Add dark mode, export preview, and keyboard navigation

- Add theme store with light/dark/system modes and ThemeToggle component
- Prevent flash of wrong theme on initial load via inline script
- Add ExportPreviewModal for previewing session exports before download
- Add copy-to-clipboard functionality to session export
- Implement keyboard shortcuts for tree navigation (1-9 options, Esc back, Enter continue)
- Display keyboard hints in tree navigation UI
- Fix findNode to safely handle undefined structure parameter
- Update page title to "Apoklisis"

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/pages/SessionDetailPage.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
+import { Copy, Check, Eye } from 'lucide-react'
 import { sessionsApi } from '@/api'
+import { ExportPreviewModal } from '@/components/session/ExportPreviewModal'
 import type { Session, SessionExport } from '@/types'
 import { cn } from '@/lib/utils'
 
@@ -12,6 +14,9 @@ export function SessionDetailPage() {
   const [error, setError] = useState<string | null>(null)
   const [isExporting, setIsExporting] = useState(false)
   const [exportFormat, setExportFormat] = useState<'markdown' | 'text' | 'html'>('markdown')
+  const [exportContent, setExportContent] = useState<string | null>(null)
+  const [showPreview, setShowPreview] = useState(false)
+  const [copied, setCopied] = useState(false)
 
   useEffect(() => {
     if (id) {
@@ -33,27 +38,30 @@ export function SessionDetailPage() {
     }
   }
 
-  const handleExport = async () => {
-    if (!session) return
+  const getFilename = () => {
+    if (!session) return 'export.txt'
+    const ext = exportFormat === 'markdown' ? 'md' : exportFormat === 'html' ? 'html' : 'txt'
+    return `session-${session.ticket_number || session.id}.${ext}`
+  }
+
+  const fetchExportContent = async () => {
+    if (!session) return null
+    const options: SessionExport = {
+      format: exportFormat,
+      include_timestamps: true,
+      include_tree_info: true,
+    }
+    return await sessionsApi.export(session.id, options)
+  }
+
+  const handlePreview = async () => {
     setIsExporting(true)
     try {
-      const options: SessionExport = {
-        format: exportFormat,
-        include_timestamps: true,
-        include_tree_info: true,
+      const content = await fetchExportContent()
+      if (content) {
+        setExportContent(content)
+        setShowPreview(true)
       }
-      const content = await sessionsApi.export(session.id, options)
-
-      // Create download
-      const blob = new Blob([content], { type: 'text/plain' })
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-      a.download = `session-${session.ticket_number || session.id}.${exportFormat === 'markdown' ? 'md' : exportFormat === 'html' ? 'html' : 'txt'}`
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      URL.revokeObjectURL(url)
     } catch (err) {
       console.error('Export failed:', err)
     } finally {
@@ -61,6 +69,35 @@ export function SessionDetailPage() {
     }
   }
 
+  const handleCopy = async () => {
+    setIsExporting(true)
+    try {
+      const content = await fetchExportContent()
+      if (content) {
+        await navigator.clipboard.writeText(content)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      }
+    } catch (err) {
+      console.error('Copy failed:', err)
+    } finally {
+      setIsExporting(false)
+    }
+  }
+
+  const handleDownload = () => {
+    if (!exportContent || !session) return
+    const blob = new Blob([exportContent], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = getFilename()
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
   const formatDate = (dateString: string) => {
     return new Date(dateString).toLocaleString()
   }
@@ -127,6 +164,7 @@ export function SessionDetailPage() {
           <select
             value={exportFormat}
             onChange={(e) => setExportFormat(e.target.value as typeof exportFormat)}
+            aria-label="Export format"
             className={cn(
               'rounded-md border border-input bg-background px-3 py-2 text-sm',
               'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
@@ -137,14 +175,26 @@ export function SessionDetailPage() {
             <option value="html">HTML</option>
           </select>
           <button
-            onClick={handleExport}
+            onClick={handleCopy}
+            disabled={isExporting}
+            title="Copy to clipboard"
+            className={cn(
+              'rounded-md border border-input bg-background p-2 text-muted-foreground',
+              'hover:bg-accent hover:text-accent-foreground disabled:opacity-50'
+            )}
+          >
+            {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+          </button>
+          <button
+            onClick={handlePreview}
             disabled={isExporting}
             className={cn(
-              'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
+              'flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
               'hover:bg-primary/90 disabled:opacity-50'
             )}
           >
-            {isExporting ? 'Exporting...' : 'Export'}
+            <Eye className="h-4 w-4" />
+            {isExporting ? 'Loading...' : 'Preview'}
           </button>
         </div>
       </div>
@@ -199,6 +249,16 @@ export function SessionDetailPage() {
           )}
         </div>
       </div>
+
+      {/* Export Preview Modal */}
+      <ExportPreviewModal
+        isOpen={showPreview}
+        onClose={() => setShowPreview(false)}
+        content={exportContent || ''}
+        filename={getFilename()}
+        format={exportFormat}
+        onDownload={handleDownload}
+      />
     </div>
   )
 }