orbital-command 0.1.0

package/src/views/SessionTimeline.tsx

@@ -0,0 +1,516 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { motion } from 'framer-motion';
+import { Clock, ExternalLink, FileText, Terminal } from 'lucide-react';
+import { format } from 'date-fns';
+import { socket } from '@/socket';
+import { useTheme } from '@/hooks/useTheme';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { cn, formatScopeId } from '@/lib/utils';
+import type { Session } from '@/types';
+
+const sessionStagger = { show: { transition: { staggerChildren: 0.04 } } };
+const sessionItem = {
+  hidden: { opacity: 0, y: 10 },
+  show: { opacity: 1, y: 0, transition: { type: 'spring', stiffness: 300, damping: 25 } },
+};
+
+interface SessionMeta {
+  slug: string;
+  branch: string;
+  fileSize: number;
+  summary: string | null;
+  startedAt: string;
+  lastActiveAt: string;
+}
+
+interface SessionStatsUser {
+  totalMessages: number;
+  metaMessages: number;
+  toolResults: number;
+  commands: string[];
+  permissionModes: string[];
+  cwd: string | null;
+  version: string | null;
+}
+
+interface SessionStatsAssistant {
+  totalMessages: number;
+  models: string[];
+  totalInputTokens: number;
+  totalOutputTokens: number;
+  totalCacheReadTokens: number;
+  totalCacheCreationTokens: number;
+  toolsUsed: Record<string, number>;
+}
+
+interface SessionStatsSystem {
+  totalMessages: number;
+  subtypes: string[];
+  stopReasons: string[];
+  totalDurationMs: number;
+  hookCount: number;
+  hookErrors: number;
+}
+
+interface SessionStats {
+  typeCounts: Record<string, number>;
+  user: SessionStatsUser;
+  assistant: SessionStatsAssistant;
+  system: SessionStatsSystem;
+  progress: { totalLines: number };
+  timing: { firstTimestamp: string | null; lastTimestamp: string | null; durationMs: number };
+}
+
+interface SessionDetail {
+  id: string;
+  content: string;
+  claude_session_id: string | null;
+  meta: SessionMeta | null;
+  stats: SessionStats | null;
+}
+
+/** Session with aggregated scope_ids and actions from deduplicated backend response */
+interface TimelineSession extends Session {
+  scope_ids: number[];
+  actions: string[];
+}
+
+const ACTION_LABELS: Record<string, string> = {
+  createScope: 'Created',
+  reviewScope: 'Reviewed',
+  implementScope: 'Implemented',
+  verifyScope: 'Verified',
+  reviewGate: 'Review Gate',
+  fixReview: 'Fix Review',
+  commit: 'Committed',
+  pushToMain: 'Pushed to Main',
+  pushToDev: 'Pushed to Dev',
+  pushToStaging: 'PR to Staging',
+  pushToProduction: 'PR to Production',
+};
+
+function actionLabel(action: string): string {
+  return ACTION_LABELS[action] ?? action;
+}
+
+// ─── Main Component ────────────────────────────────────────
+
+export function SessionTimeline() {
+  const [sessions, setSessions] = useState<TimelineSession[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selected, setSelected] = useState<TimelineSession | null>(null);
+  const [detail, setDetail] = useState<SessionDetail | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [resuming, setResuming] = useState(false);
+  const { neonGlass } = useTheme();
+  const autoSelected = useRef(false);
+
+  const selectSession = useCallback(async (session: TimelineSession) => {
+    setSelected(session);
+    setDetail(null);
+    setDetailLoading(true);
+    try {
+      const res = await fetch(`/api/orbital/sessions/${session.id}/content`);
+      if (res.ok) setDetail(await res.json());
+    } catch { /* silent */ }
+    finally { setDetailLoading(false); }
+  }, []);
+
+  const fetchSessions = useCallback(async () => {
+    try {
+      const res = await fetch('/api/orbital/sessions');
+      if (res.ok) setSessions(await res.json());
+    } catch { /* silent */ }
+    finally { setLoading(false); }
+  }, []);
+
+  useEffect(() => { fetchSessions(); }, [fetchSessions]);
+
+  // Auto-select first session on initial load
+  useEffect(() => {
+    if (!autoSelected.current && sessions.length > 0) {
+      autoSelected.current = true;
+      selectSession(sessions[0]);
+    }
+  }, [sessions, selectSession]);
+
+  useEffect(() => {
+    const onUpdate = () => fetchSessions();
+    socket.on('session:updated', onUpdate);
+    return () => { socket.off('session:updated', onUpdate); };
+  }, [fetchSessions]);
+
+  const handleResume = useCallback(async () => {
+    const sessionId = detail?.claude_session_id;
+    if (!selected || !sessionId) return;
+    setResuming(true);
+    try {
+      await fetch(`/api/orbital/sessions/${selected.id}/resume`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ claude_session_id: sessionId }),
+      });
+    } catch { /* silent */ }
+    finally { setTimeout(() => setResuming(false), 2000); }
+  }, [selected, detail]);
+
+  if (loading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-1 min-h-0 flex-col">
+      <div className="mb-4 flex items-center gap-3">
+        <Clock className="h-4 w-4 text-primary" />
+        <h1 className="text-xl font-light">Sessions</h1>
+        <Badge variant="secondary">{sessions.length} sessions</Badge>
+      </div>
+
+      {sessions.length === 0 ? (
+        <div className="flex flex-1 items-center justify-center">
+          <div className="text-center">
+            <Clock className="mx-auto mb-3 h-10 w-10 text-muted-foreground/30" />
+            <p className="text-sm text-muted-foreground">
+              No session history yet. Sessions are recorded from handoff files.
+            </p>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-1 gap-0 overflow-hidden rounded-lg border border-border/50">
+          {/* Left: session list */}
+          <div className="w-[40%] border-r border-border/50 overflow-hidden">
+            <ScrollArea className="h-full">
+              <div className="relative p-3">
+                <div className="absolute left-6 top-3 bottom-3 w-px bg-border" />
+                {neonGlass ? (
+                  <motion.div className="space-y-1" variants={sessionStagger} initial="hidden" animate="show">
+                    {sessions.map((s) => (
+                      <motion.div key={s.id} variants={sessionItem}>
+                        <SessionListItem session={s} isSelected={selected?.id === s.id} neonGlass onClick={() => selectSession(s)} />
+                      </motion.div>
+                    ))}
+                  </motion.div>
+                ) : (
+                  <div className="space-y-1">
+                    {sessions.map((s) => (
+                      <SessionListItem key={s.id} session={s} isSelected={selected?.id === s.id} neonGlass={false} onClick={() => selectSession(s)} />
+                    ))}
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+
+          {/* Right: detail pane */}
+          <div className="w-[60%] overflow-hidden">
+            {selected ? (
+              <DetailPane session={selected} detail={detail} loading={detailLoading} resuming={resuming} onResume={handleResume} />
+            ) : (
+              <div className="flex h-full items-center justify-center">
+                <div className="text-center">
+                  <Clock className="mx-auto mb-3 h-10 w-10 text-muted-foreground/30" />
+                  <p className="text-sm text-muted-foreground">Select a session to view details</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Session List Item ─────────────────────────────────────
+
+function SessionListItem({ session, isSelected, neonGlass, onClick }: {
+  session: TimelineSession; isSelected: boolean; neonGlass: boolean; onClick: () => void;
+}) {
+  const scopeIds = session.scope_ids;
+  const discoveries = Array.isArray(session.discoveries) ? session.discoveries : [];
+  const nextSteps = Array.isArray(session.next_steps) ? session.next_steps : [];
+
+  return (
+    <div className="relative pl-8 cursor-pointer" onClick={onClick}>
+      <div className={cn(
+        'absolute left-1.5 top-3 h-2.5 w-2.5 rounded-full border-2',
+        isSelected ? 'border-primary bg-primary' : 'border-muted-foreground/40 bg-background',
+        neonGlass && 'timeline-dot-glow glow-blue',
+      )} />
+      <div className={cn(
+        'rounded-md px-3 py-2 transition-colors',
+        isSelected ? 'bg-primary/10 border border-primary/30' : 'hover:bg-muted/50',
+      )}>
+        <div className="flex items-center gap-1.5 flex-wrap">
+          {session.started_at && (
+            <span className="text-xxs text-muted-foreground">{format(new Date(session.started_at), 'MMM d')}</span>
+          )}
+          {scopeIds.slice(0, 3).map((id) => (
+            <Badge key={id} variant="outline" className="font-mono text-xxs px-1 py-0">{formatScopeId(id)}</Badge>
+          ))}
+          {scopeIds.length > 3 && (
+            <span className="text-xxs text-muted-foreground">+{scopeIds.length - 3}</span>
+          )}
+          {session.actions?.slice(0, 2).map((a) => (
+            <Badge key={a} variant="secondary" className="text-xxs px-1 py-0 font-light">{actionLabel(a)}</Badge>
+          ))}
+        </div>
+        <p className={cn('mt-0.5 text-xs font-normal truncate', isSelected ? 'text-foreground' : 'text-foreground/80')}>
+          {session.summary ? truncate(session.summary, 80) : 'Untitled Session'}
+        </p>
+        <div className="mt-1 flex items-center gap-3 text-xxs text-muted-foreground">
+          {discoveries.length > 0 && <span className="text-bid-green">{discoveries.length} completed</span>}
+          {nextSteps.length > 0 && <span className="text-accent-blue">{nextSteps.length} next</span>}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Detail Pane ───────────────────────────────────────────
+
+function DetailPane({ session, detail, loading, resuming, onResume }: {
+  session: TimelineSession; detail: SessionDetail | null; loading: boolean; resuming: boolean; onResume: () => void;
+}) {
+  const scopeIds = session.scope_ids;
+  const discoveries = Array.isArray(session.discoveries) ? session.discoveries : [];
+  const nextSteps = Array.isArray(session.next_steps) ? session.next_steps : [];
+  const meta = detail?.meta ?? null;
+  const canResume = !!detail?.claude_session_id;
+  const displayName = meta?.summary ?? session.summary ?? null;
+
+  // Build metadata rows as [label, value, className?, actionUrl?] tuples
+  const rows: [string, string, string?, string?][] = [];
+  if (scopeIds.length > 0) rows.push(['Scopes', scopeIds.map((id) => formatScopeId(id)).join(', ')]);
+  if (session.actions?.length > 0) rows.push(['Actions', session.actions.map(actionLabel).join(', ')]);
+  if (session.summary) rows.push(['Summary', truncate(session.summary, 200)]);
+  rows.push(['Started', session.started_at ? format(new Date(session.started_at), 'MMM d, h:mm a') : '—']);
+  rows.push(['Ended', session.ended_at ? format(new Date(session.ended_at), 'MMM d, h:mm a') : '—']);
+  if (meta?.branch && meta.branch !== 'unknown') rows.push(['Branch', meta.branch, 'font-mono text-xxs']);
+  if (meta && meta.fileSize > 0) rows.push(['File size', formatFileSize(meta.fileSize)]);
+  if (meta) rows.push(['Plan', meta.slug, 'text-muted-foreground', `/api/orbital/open-file?path=scopes/${meta.slug}.md`]);
+  if (session.handoff_file) rows.push(['Handoff', session.handoff_file, 'font-mono text-xxs']);
+  if (detail?.claude_session_id) rows.push(['Session ID', detail.claude_session_id, 'font-mono text-xxs text-muted-foreground']);
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="px-5 pt-4 pb-3">
+        <p className="text-xxs text-muted-foreground">
+          {session.started_at && format(new Date(session.started_at), 'MMM d, yyyy — h:mm a')}
+          {scopeIds.length > 0 && scopeIds.slice(0, 4).map((id) => (
+            <span key={id} className="ml-1.5">
+              <Badge variant="outline" className="font-mono text-xxs">{formatScopeId(id)}</Badge>
+            </span>
+          ))}
+          {scopeIds.length > 4 && <span className="ml-1 text-xxs">+{scopeIds.length - 4}</span>}
+        </p>
+        <h2 className="mt-1 text-sm font-light">{displayName ? truncate(displayName, 120) : 'Untitled Session'}</h2>
+      </div>
+
+      <Separator />
+
+      <ScrollArea className="flex-1">
+        <div className="px-5 py-4">
+          {loading ? (
+            <div className="flex h-20 items-center justify-center">
+              <div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+            </div>
+          ) : (
+            <>
+              <table className="w-full table-fixed text-xs">
+                <colgroup><col className="w-28" /><col /></colgroup>
+                <tbody className="[&_td]:border-b [&_td]:border-border/30 [&_td]:py-2 [&_td]:align-top [&_td:first-child]:pr-3 [&_td:first-child]:text-muted-foreground [&_td:first-child]:whitespace-nowrap [&_td:last-child]:break-all">
+                  {rows.map(([label, value, cls, action]) => (
+                    <tr key={label}>
+                      <td>{label}</td>
+                      <td className={cls}>
+                        {action ? (
+                          <button
+                            onClick={() => { fetch(action, { method: 'POST' }); }}
+                            className="inline-flex items-center gap-1.5 hover:text-accent-blue transition-colors"
+                            title="Open file"
+                          >
+                            {value}
+                            <ExternalLink className="h-3 w-3 opacity-50" />
+                          </button>
+                        ) : value}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+
+              <BulletSection title="Completed" items={discoveries} color="text-bid-green" />
+              <BulletSection title="Next Steps" items={nextSteps} color="text-accent-blue" />
+
+              {detail?.stats && <StatsSection stats={detail.stats} />}
+
+              {session.handoff_file && (
+                <div className="mt-4 flex items-center gap-1.5 text-xxs text-muted-foreground/60">
+                  <FileText className="h-3 w-3" />
+                  <span className="truncate">{session.handoff_file}</span>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </ScrollArea>
+
+      {!loading && (
+        <div className="border-t border-border/50 px-5 py-3">
+          <Button className="w-full" disabled={!canResume || resuming} onClick={onResume}
+            title={canResume ? 'Open in iTerm' : 'No Claude Code session found'}>
+            <Terminal className="mr-2 h-4 w-4" />
+            {resuming ? 'Opening iTerm...' : 'Resume Session'}
+          </Button>
+          {!canResume && <p className="mt-1.5 text-center text-xxs text-muted-foreground">No matching Claude Code session found</p>}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Stats Section ─────────────────────────────────────────
+
+function StatsSection({ stats }: { stats: SessionStats }) {
+  const { user, assistant, system, timing } = stats;
+  const toolEntries = Object.entries(assistant.toolsUsed).sort((a, b) => b[1] - a[1]);
+
+  return (
+    <div className="mt-5 space-y-4">
+      <Separator />
+
+      {/* Timing */}
+      <StatsGroup title="Timing">
+        {timing.durationMs > 0 && <StatsRow label="Duration" value={formatDuration(timing.durationMs)} />}
+        {timing.firstTimestamp && <StatsRow label="First event" value={format(new Date(timing.firstTimestamp), 'MMM d, h:mm:ss a')} />}
+        {timing.lastTimestamp && <StatsRow label="Last event" value={format(new Date(timing.lastTimestamp), 'MMM d, h:mm:ss a')} />}
+      </StatsGroup>
+
+      {/* User */}
+      <StatsGroup title="User">
+        <StatsRow label="Messages" value={`${user.totalMessages - user.metaMessages - user.toolResults} direct, ${user.metaMessages} meta, ${user.toolResults} tool results`} />
+        {user.commands.length > 0 && <StatsRow label="Commands" value={user.commands.join(', ')} cls="font-mono" />}
+        {user.permissionModes.length > 0 && <StatsRow label="Permission modes" value={user.permissionModes.join(', ')} />}
+        {user.version && <StatsRow label="Claude Code version" value={user.version} cls="font-mono" />}
+        {user.cwd && <StatsRow label="Working directory" value={user.cwd} cls="font-mono text-xxs" />}
+      </StatsGroup>
+
+      {/* Assistant */}
+      <StatsGroup title="Assistant">
+        <StatsRow label="Responses" value={String(assistant.totalMessages)} />
+        {assistant.models.length > 0 && <StatsRow label="Models" value={assistant.models.join(', ')} cls="font-mono" />}
+        <StatsRow label="Input tokens" value={formatNumber(assistant.totalInputTokens)} />
+        <StatsRow label="Output tokens" value={formatNumber(assistant.totalOutputTokens)} />
+        {assistant.totalCacheReadTokens > 0 && <StatsRow label="Cache read tokens" value={formatNumber(assistant.totalCacheReadTokens)} />}
+        {assistant.totalCacheCreationTokens > 0 && <StatsRow label="Cache creation tokens" value={formatNumber(assistant.totalCacheCreationTokens)} />}
+        {toolEntries.length > 0 && (
+          <tr>
+            <td className="pr-3 text-muted-foreground whitespace-nowrap align-top">Tools used</td>
+            <td>
+              <div className="flex flex-wrap gap-1">
+                {toolEntries.map(([name, count]) => (
+                  <Badge key={name} variant="outline" className="font-mono text-xxs px-1.5 py-0">
+                    {name} <span className="ml-1 text-muted-foreground">{count}</span>
+                  </Badge>
+                ))}
+              </div>
+            </td>
+          </tr>
+        )}
+      </StatsGroup>
+
+      {/* System */}
+      {system.totalMessages > 0 && (
+        <StatsGroup title="System">
+          <StatsRow label="Events" value={String(system.totalMessages)} />
+          {system.subtypes.length > 0 && <StatsRow label="Subtypes" value={system.subtypes.join(', ')} />}
+          {system.stopReasons.length > 0 && <StatsRow label="Stop reasons" value={system.stopReasons.join(', ')} />}
+          {system.totalDurationMs > 0 && <StatsRow label="Total processing" value={formatDuration(system.totalDurationMs)} />}
+          {system.hookCount > 0 && <StatsRow label="Hooks fired" value={`${system.hookCount}${system.hookErrors > 0 ? ` (${system.hookErrors} errors)` : ''}`} />}
+        </StatsGroup>
+      )}
+
+      {/* Line counts */}
+      <StatsGroup title="Raw Counts">
+        {Object.entries(stats.typeCounts).sort((a, b) => b[1] - a[1]).map(([type, count]) => (
+          <StatsRow key={type} label={type} value={String(count)} />
+        ))}
+      </StatsGroup>
+    </div>
+  );
+}
+
+function StatsGroup({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <h4 className="mb-2 text-xxs font-medium uppercase tracking-wider text-foreground">{title}</h4>
+      <table className="w-full table-fixed text-xs">
+        <colgroup><col className="w-40" /><col /></colgroup>
+        <tbody className="[&_td]:border-b [&_td]:border-border/20 [&_td]:py-1.5 [&_td]:align-top [&_td:first-child]:pr-3 [&_td:first-child]:text-muted-foreground [&_td:first-child]:whitespace-nowrap">
+          {children}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function StatsRow({ label, value, cls }: { label: string; value: string; cls?: string }) {
+  return (
+    <tr>
+      <td>{label}</td>
+      <td className={cls}>{value}</td>
+    </tr>
+  );
+}
+
+// ─── Shared Helpers ────────────────────────────────────────
+
+function BulletSection({ title, items, color }: { title: string; items: string[]; color: string }) {
+  if (items.length === 0) return null;
+  return (
+    <div className="mt-5">
+      <h4 className="mb-2 text-xxs font-medium uppercase tracking-wider text-foreground">{title}</h4>
+      <ul className="space-y-1.5">
+        {items.map((item, idx) => (
+          <li key={idx} className="flex items-start gap-2 text-xs">
+            <span className={cn('mt-0.5', color)}>{'•'}</span>
+            <span>{item}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function truncate(text: string, max: number): string {
+  return text.length > max ? text.slice(0, max) + '...' : text;
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  const secs = Math.floor(ms / 1000);
+  if (secs < 60) return `${secs}s`;
+  const mins = Math.floor(secs / 60);
+  const remSecs = secs % 60;
+  if (mins < 60) return `${mins}m ${remSecs}s`;
+  const hrs = Math.floor(mins / 60);
+  const remMins = mins % 60;
+  return `${hrs}h ${remMins}m`;
+}
+
+function formatNumber(n: number): string {
+  return n.toLocaleString();
+}