From 1869da4fcb6721e4d311f4258bad813ed6b84023 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Fri, 13 Feb 2026 09:39:38 -0500
Subject: [PATCH] feat(frontend): add mid-session Copy for Ticket to navigation
 page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/TreeNavigationPage.tsx | 54 ++++++++++++++++++++---
 1 file changed, 47 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/TreeNavigationPage.tsx b/frontend/src/pages/TreeNavigationPage.tsx
index 7449f4a1..3a11fb20 100644
--- a/frontend/src/pages/TreeNavigationPage.tsx
+++ b/frontend/src/pages/TreeNavigationPage.tsx
@@ -10,7 +10,8 @@ import { cn, safeGetItem, safeSetItem } from '@/lib/utils'
 import { MarkdownContent } from '@/components/ui/MarkdownContent'
 import { CustomStepModal } from '@/components/step-library/CustomStepModal'
 import { PostStepActionModal, ContinuationModal, ForkTreeModal, ScratchpadSidebar, SessionOutcomeModal } from '@/components/session'
-import { Plus, CheckCircle, ArrowRight, Clock, Terminal, Clipboard, Check, HelpCircle } from 'lucide-react'
+import { Plus, CheckCircle, ArrowRight, Clock, Terminal, Clipboard, Check, Copy, HelpCircle } from 'lucide-react'
+import { toast } from '@/lib/toast'
 import { Modal } from '@/components/common/Modal'
 
 interface LocationState {
@@ -45,6 +46,8 @@ export function TreeNavigationPage() {
   const [copiedCommand, setCopiedCommand] = useState<string | null>(null)
   const [shortcutsModalOpen, setShortcutsModalOpen] = useState(false)
   const [selectingOption, setSelectingOption] = useState<string | null>(null)
+  const [copiedForTicket, setCopiedForTicket] = useState(false)
+  const [isCopyingForTicket, setIsCopyingForTicket] = useState(false)
 
   const handleCopyCommand = (text: string) => {
     navigator.clipboard.writeText(text)
@@ -52,6 +55,29 @@ export function TreeNavigationPage() {
     setTimeout(() => setCopiedCommand(null), 2000)
   }
 
+  const handleCopyForTicket = async () => {
+    if (!session || isCopyingForTicket) return
+    setIsCopyingForTicket(true)
+    try {
+      const content = await sessionsApi.export(session.id, {
+        format: 'psa',
+        include_timestamps: true,
+        include_tree_info: true,
+      })
+      if (content) {
+        await navigator.clipboard.writeText(content)
+        setCopiedForTicket(true)
+        setTimeout(() => setCopiedForTicket(false), 2000)
+        toast.success('Copied progress notes to clipboard')
+      }
+    } catch (err) {
+      console.error('Copy for ticket failed:', err)
+      toast.error('Failed to copy notes')
+    } finally {
+      setIsCopyingForTicket(false)
+    }
+  }
+
   // Session metadata (prefill from Repeat Last Session)
   const [ticketNumber, setTicketNumber] = useState<string>(locationState?.prefillTicketNumber || '')
   const [clientName, setClientName] = useState<string>(locationState?.prefillClientName || '')
@@ -549,12 +575,26 @@ export function TreeNavigationPage() {
             </p>
           )}
         </div>
-        <button
-          onClick={() => navigate('/sessions')}
-          className="rounded-md px-3 py-1.5 text-sm text-white/50 hover:bg-white/[0.06] hover:text-white"
-        >
-          Exit
-        </button>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={handleCopyForTicket}
+            disabled={isCopyingForTicket}
+            title="Copy progress notes for ticket"
+            className={cn(
+              'flex items-center gap-1.5 rounded-md border border-white/10 px-3 py-1.5 text-xs font-medium text-white/60',
+              'hover:bg-white/10 hover:text-white transition-colors disabled:opacity-50'
+            )}
+          >
+            {copiedForTicket ? <Check className="h-3.5 w-3.5 text-emerald-400" /> : <Copy className="h-3.5 w-3.5" />}
+            {copiedForTicket ? 'Copied!' : 'Copy for Ticket'}
+          </button>
+          <button
+            onClick={() => navigate('/sessions')}
+            className="rounded-md px-3 py-1.5 text-sm text-white/50 hover:bg-white/[0.06] hover:text-white"
+          >
+            Exit
+          </button>
+        </div>
       </div>
 
       {/* Breadcrumb */}