From b1ff8660d4bd142849afe94f479e7587a23bcdf3 Mon Sep 17 00:00:00 2001
From: lorentz <lorentz@wulfconsulting.com>
Date: Sun, 3 May 2026 17:58:51 -0400
Subject: [PATCH] feat(04-03): reskin /mobile/tickets/[id] in-page header per
 D-18

- Add ExternalLink to lucide-react imports
- Replace legacy 'Back' button with three-slot header bar:
  back chevron + 'Tickets' label (router.back()), breadcrumb
  'Tickets / #{ticket_number}', ExternalLink icon to /analyzer/ticket/{id}
- rel='noopener noreferrer' + target='_blank' on external link (T-04-11)
- Detail body (badges, title, stats grid, description, timeline) unchanged per D-19
---
 app/mobile/tickets/[id]/page.tsx | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/app/mobile/tickets/[id]/page.tsx b/app/mobile/tickets/[id]/page.tsx
index 7de406f..e85b2da 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, AlignLeft, Code2,
+  ChevronDown, ChevronRight, User, Briefcase, AlertCircle, EyeOff, Eye, ExternalLink, Mail, AlignLeft, Code2,
 } from 'lucide-react';
 
 const PRIORITY_LABEL: Record<number, string> = {
@@ -237,9 +237,31 @@ export default function TicketTimeline({ params }: { params: Promise<{ id: strin
     <div>
       {/* Ticket header */}
       <div className="px-4 pt-4 pb-3 border-b">
-        <button onClick={() => router.back()} className="flex items-center gap-1 text-sm text-muted-foreground mb-3 hover:text-foreground">
-          <ArrowLeft className="w-4 h-4" /> Back
-        </button>
+        <div className="flex items-center justify-between -mx-4 px-4 py-3 border-b mb-3">
+          <button
+            type="button"
+            onClick={() => router.back()}
+            aria-label="Back to Tickets"
+            className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <ArrowLeft className="w-4 h-4" aria-hidden="true" />
+            <span>Tickets</span>
+          </button>
+
+          <p className="text-sm font-semibold truncate mx-2 flex-1 text-center">
+            Tickets / #{ticket.ticket_number}
+          </p>
+
+          <a
+            href={`/analyzer/ticket/${ticket.id}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Open ticket on desktop"
+            className="text-muted-foreground hover:text-foreground transition-colors shrink-0"
+          >
+            <ExternalLink className="w-4 h-4" aria-hidden="true" />
+          </a>
+        </div>
         <div className="flex items-start gap-2 mb-2">
           <span className={`shrink-0 text-xs font-medium px-2 py-0.5 rounded-full border ${priClass}`}>
             {PRIORITY_LABEL[ticket.priority] ?? `P${ticket.priority}`}