From 1364f70ca711bbe61a944684c05e88080393fb1d Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Sun, 15 Feb 2026 19:34:22 -0500
Subject: [PATCH] refactor: migrate session pages to new design system

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/SessionDetailPage.tsx  | 44 +++++++++++------------
 frontend/src/pages/SessionHistoryPage.tsx | 40 ++++++++++-----------
 2 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/frontend/src/pages/SessionDetailPage.tsx b/frontend/src/pages/SessionDetailPage.tsx
index 0f1cd966..d6bc7785 100644
--- a/frontend/src/pages/SessionDetailPage.tsx
+++ b/frontend/src/pages/SessionDetailPage.tsx
@@ -289,7 +289,7 @@ export function SessionDetailPage() {
   if (isLoading) {
     return (
       <div className="flex h-64 items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-primary" />
       </div>
     )
   }
@@ -302,7 +302,7 @@ export function SessionDetailPage() {
         </div>
         <button
           onClick={() => navigate('/sessions')}
-          className="mt-4 text-white hover:underline"
+          className="mt-4 text-foreground hover:underline"
         >
           Back to sessions
         </button>
@@ -318,14 +318,14 @@ export function SessionDetailPage() {
           <div>
             <button
               onClick={() => navigate('/sessions')}
-              className="mb-2 text-sm text-white/40 hover:text-white"
+              className="mb-2 text-sm text-muted-foreground hover:text-foreground"
             >
               ← Back to sessions
             </button>
-            <h1 className="text-2xl font-bold text-white sm:text-3xl">
+            <h1 className="text-2xl font-heading font-bold text-foreground sm:text-3xl">
               {session.ticket_number || 'Session Details'}
             </h1>
-            <div className="mt-2 flex items-center gap-4 text-sm text-white/40">
+            <div className="mt-2 flex items-center gap-4 text-sm text-muted-foreground">
               <span
                 className={cn(
                   'flex items-center gap-1',
@@ -342,23 +342,23 @@ export function SessionDetailPage() {
               </span>
               {session.client_name && <span>Client: {session.client_name}</span>}
               {session.completed_at && (
-                <span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white">
+                <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-foreground">
                   Duration: {getTotalDuration()}
                 </span>
               )}
               {outcomeLabel && (
-                <span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white">
+                <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-foreground">
                   Outcome: {outcomeLabel}
                 </span>
               )}
             </div>
             {session.outcome_notes && (
-              <p className="mt-2 text-sm text-white/60">Outcome Notes: {session.outcome_notes}</p>
+              <p className="mt-2 text-sm text-muted-foreground">Outcome Notes: {session.outcome_notes}</p>
             )}
             {session.next_steps && (
               <div className="mt-2">
-                <span className="text-sm text-white/40">Next Steps:</span>
-                <p className="mt-0.5 text-sm text-white/60 whitespace-pre-wrap">{session.next_steps}</p>
+                <span className="text-sm text-muted-foreground">Next Steps:</span>
+                <p className="mt-0.5 text-sm text-muted-foreground whitespace-pre-wrap">{session.next_steps}</p>
               </div>
             )}
           </div>
@@ -384,8 +384,8 @@ export function SessionDetailPage() {
             <button
               onClick={handleCopyForTicket}
               className={cn(
-                'flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                'hover:bg-white/90'
+                'flex items-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                'hover:opacity-90'
               )}
             >
               {copiedPsa ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
@@ -399,8 +399,8 @@ export function SessionDetailPage() {
                 onChange={(e) => setExportFormat(e.target.value as typeof exportFormat)}
                 aria-label="Export format"
                 className={cn(
-                  'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white sm:w-auto',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                  'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground sm:w-auto',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                 )}
               >
                 <option value="markdown">Markdown</option>
@@ -414,8 +414,8 @@ export function SessionDetailPage() {
                   onChange={(e) => setMaxStepIndex(e.target.value ? Number(e.target.value) : null)}
                   aria-label="Export through step"
                   className={cn(
-                    'rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                    'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                    'rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                   )}
                 >
                   <option value="">All steps</option>
@@ -431,8 +431,8 @@ export function SessionDetailPage() {
                 onChange={(e) => setDetailLevel(e.target.value as 'standard' | 'full')}
                 aria-label="Detail level"
                 className={cn(
-                  'rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                  'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                  'rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                 )}
               >
                 <option value="standard">Standard</option>
@@ -443,8 +443,8 @@ export function SessionDetailPage() {
                 disabled={isExporting}
                 title="Copy to clipboard"
                 className={cn(
-                  'rounded-md border border-white/10 bg-transparent p-2 text-white/60',
-                  'hover:bg-white/10 hover:text-white disabled:opacity-50'
+                  'rounded-md border border-border bg-card p-2 text-muted-foreground',
+                  'hover:bg-accent hover:text-foreground disabled:opacity-50'
                 )}
               >
                 {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
@@ -453,8 +453,8 @@ export function SessionDetailPage() {
                 onClick={handlePreview}
                 disabled={isExporting}
                 className={cn(
-                  'flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                  'hover:bg-white/90 disabled:opacity-50'
+                  'flex items-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                  'hover:opacity-90 disabled:opacity-50'
                 )}
               >
                 <Eye className="h-4 w-4" />
diff --git a/frontend/src/pages/SessionHistoryPage.tsx b/frontend/src/pages/SessionHistoryPage.tsx
index 556808f8..d4be75a8 100644
--- a/frontend/src/pages/SessionHistoryPage.tsx
+++ b/frontend/src/pages/SessionHistoryPage.tsx
@@ -151,14 +151,14 @@ export function SessionHistoryPage() {
   return (
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       <div className="mb-8">
-        <h1 className="text-2xl font-bold text-white sm:text-3xl">Session History</h1>
-        <p className="mt-2 text-white/40">
+        <h1 className="text-2xl font-heading font-bold text-foreground sm:text-3xl">Session History</h1>
+        <p className="mt-2 text-muted-foreground">
           Search and filter your troubleshooting sessions
         </p>
       </div>
 
       {/* Filter Tabs */}
-      <div className="mb-6 flex gap-2 border-b border-white/[0.06]">
+      <div className="mb-6 flex gap-2 border-b border-border">
         {(['all', 'active', 'completed'] as const).map((tab) => (
           <button
             key={tab}
@@ -166,8 +166,8 @@ export function SessionHistoryPage() {
             className={cn(
               'px-4 py-2 text-sm font-medium transition-colors',
               filter === tab
-                ? 'border-b-2 border-white text-white'
-                : 'text-white/40 hover:text-white'
+                ? 'border-b-2 border-primary text-foreground'
+                : 'text-muted-foreground hover:text-foreground'
             )}
           >
             {tab.charAt(0).toUpperCase() + tab.slice(1)}
@@ -188,22 +188,22 @@ export function SessionHistoryPage() {
       {/* Loading State */}
       {isLoading ? (
         <div className="flex justify-center py-12">
-          <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-primary" />
         </div>
       ) : sessions.length === 0 ? (
-        <div className="py-12 text-center text-white/40">
+        <div className="py-12 text-center text-muted-foreground">
           No sessions found.{' '}
           {filters.ticketNumber || filters.clientName || filters.treeName || filters.dateRange?.from ? (
             <button
               onClick={handleClearFilters}
-              className="text-white hover:underline"
+              className="text-foreground hover:underline"
             >
               Clear filters
             </button>
           ) : (
             <button
               onClick={() => navigate('/trees')}
-              className="text-white hover:underline"
+              className="text-foreground hover:underline"
             >
               Start a new session
             </button>
@@ -214,7 +214,7 @@ export function SessionHistoryPage() {
           {sessions.map((session) => (
             <div
               key={session.id}
-              className="glass-card rounded-2xl p-4 transition-all hover:glass-card-hover"
+              className="bg-card border border-border rounded-xl p-4 transition-all hover:bg-accent/50"
             >
               <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                 <div className="flex-1">
@@ -226,11 +226,11 @@ export function SessionHistoryPage() {
                         session.completed_at ? 'bg-green-500' : 'bg-yellow-500'
                       )}
                     />
-                    <span className="font-medium text-white">
+                    <span className="font-medium text-foreground">
                       {session.ticket_number || 'No ticket'}
                     </span>
                     {session.client_name && (
-                      <span className="rounded-full bg-white/10 px-2.5 py-0.5 text-xs font-medium text-white">
+                      <span className="rounded-full bg-accent px-2.5 py-0.5 text-xs font-medium text-foreground">
                         {session.client_name}
                       </span>
                     )}
@@ -242,7 +242,7 @@ export function SessionHistoryPage() {
                           session.outcome === 'workaround' && 'bg-amber-500/20 text-amber-300',
                           session.outcome === 'escalated' && 'bg-blue-500/20 text-blue-300',
                           session.outcome === 'unresolved' && 'bg-rose-500/20 text-rose-300',
-                          !session.outcome && 'bg-white/10 text-white/70'
+                          !session.outcome && 'bg-accent text-muted-foreground'
                         )}
                       >
                         {formatOutcomeLabel(session.outcome)}
@@ -251,12 +251,12 @@ export function SessionHistoryPage() {
                   </div>
 
                   {/* Tree Name */}
-                  <p className="mt-1 text-sm text-white/40">
+                  <p className="mt-1 text-sm text-muted-foreground">
                     <span className="font-medium">Tree:</span> {getTreeName(session)}
                   </p>
 
                   {/* Timestamps */}
-                  <p className="mt-1 text-sm text-white/40">
+                  <p className="mt-1 text-sm text-muted-foreground">
                     Started: {formatDate(session.started_at)}
                     {session.completed_at && (
                       <> · Completed: {formatDate(session.completed_at)}</>
@@ -264,7 +264,7 @@ export function SessionHistoryPage() {
                   </p>
 
                   {/* Stats */}
-                  <p className="mt-1 text-sm text-white/40">
+                  <p className="mt-1 text-sm text-muted-foreground">
                     {session.decisions.length} decision{session.decisions.length !== 1 ? 's' : ''} recorded
                     {session.scratchpad && session.scratchpad.trim() && (
                       <span> · Has notes</span>
@@ -277,8 +277,8 @@ export function SessionHistoryPage() {
                   <button
                     onClick={() => navigate(`/sessions/${session.id}`)}
                     className={cn(
-                      'rounded-md border border-white/10 px-3 py-2 text-sm font-medium text-white/60',
-                      'hover:bg-white/10 hover:text-white'
+                      'rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground',
+                      'hover:bg-accent hover:text-foreground'
                     )}
                   >
                     View Details
@@ -287,8 +287,8 @@ export function SessionHistoryPage() {
                     <button
                       onClick={() => navigate(getTreeNavigatePath(session.tree_id, session.tree_snapshot?.tree_type), { state: { sessionId: session.id } })}
                       className={cn(
-                        'rounded-md bg-white px-3 py-2 text-sm font-medium text-black',
-                        'hover:bg-white/90'
+                        'rounded-md bg-gradient-brand px-3 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                        'hover:opacity-90'
                       )}
                     >
                       Resume