From 44db9a301946a306df86a32356c2cfe924d8ef6e Mon Sep 17 00:00:00 2001
From: lorentz <lorentz@wulfconsulting.com>
Date: Mon, 23 Mar 2026 16:15:05 -0400
Subject: [PATCH] feat: add description block to mobile ticket detail with View
 original toggle

---
 app/mobile/tickets/[id]/page.tsx | 39 +++++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/app/mobile/tickets/[id]/page.tsx b/app/mobile/tickets/[id]/page.tsx
index 5704c5f..7de406f 100644
--- a/app/mobile/tickets/[id]/page.tsx
+++ b/app/mobile/tickets/[id]/page.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState, use } from 'react';
 import { useRouter } from 'next/navigation';
 import {
   ArrowLeft, RefreshCw, Clock, FileText, Timer, CheckCircle2,
-  ChevronDown, ChevronRight, User, Briefcase, AlertCircle, EyeOff, Eye, Mail,
+  ChevronDown, ChevronRight, User, Briefcase, AlertCircle, EyeOff, Eye, Mail, AlignLeft, Code2,
 } from 'lucide-react';
 
 const PRIORITY_LABEL: Record<number, string> = {
@@ -212,6 +212,8 @@ export default function TicketTimeline({ params }: { params: Promise<{ id: strin
   const [error, setError] = useState<string | null>(null);
   const [showSystem, setShowSystem] = useState(false);
   const [showInternal, setShowInternal] = useState(false);
+  const [descOpen, setDescOpen] = useState(true);
+  const [descRaw, setDescRaw] = useState(false);
 
   useEffect(() => {
     setLoading(true);
@@ -279,6 +281,41 @@ export default function TicketTimeline({ params }: { params: Promise<{ id: strin
             <p className="text-[10px] text-muted-foreground">Hours logged</p>
           </div>
         </div>
+
+        {/* Description */}
+        {ticket.description && (
+          <div className="mt-3">
+            <button
+              onClick={() => setDescOpen(o => !o)}
+              className="w-full flex items-center justify-between py-1.5 text-left"
+            >
+              <span className="flex items-center gap-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                <AlignLeft className="w-3.5 h-3.5" />Description
+              </span>
+              {descOpen
+                ? <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+                : <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />}
+            </button>
+            {descOpen && (
+              <div className="mt-1.5 rounded-xl border bg-muted/40 p-3">
+                {descRaw ? (
+                  <pre className="text-xs text-muted-foreground whitespace-pre-wrap break-words font-mono leading-relaxed">
+                    {ticket.description.replace(/<[^>]+>/g, '').replace(/&nbsp;/g, ' ').replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').trim()}
+                  </pre>
+                ) : (
+                  <p className="text-sm text-foreground leading-relaxed">{renderContent(ticket.description)}</p>
+                )}
+                <button
+                  onClick={() => setDescRaw(r => !r)}
+                  className="mt-2 flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <Code2 className="w-3 h-3" />
+                  {descRaw ? 'Show formatted' : 'View original'}
+                </button>
+              </div>
+            )}
+          </div>
+        )}
       </div>
 
       {/* Timeline */}