orbital-command 0.1.0

package/src/components/SessionPanel.tsx

@@ -0,0 +1,335 @@
+import { useState, useCallback } from 'react';
+import { ArrowLeft, Terminal, ChevronRight } from 'lucide-react';
+import { format } from 'date-fns';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+import type { EnrichedSession } from '@/hooks/useScopeSessions';
+
+const ACTION_LABELS: Record<string, string> = {
+  createScope: 'Created',
+  reviewScope: 'Reviewed',
+  implementScope: 'Implemented',
+  verifyScope: 'Verified',
+  commit: 'Committed',
+  pushToMain: 'Pushed to Main',
+  pushToDev: 'Pushed to Dev',
+  pushToStaging: 'PR to Staging',
+  pushToProduction: 'PR to Production',
+};
+
+function actionLabel(action: string | null): string | null {
+  if (!action) return null;
+  return ACTION_LABELS[action] ?? action;
+}
+
+interface SessionPanelProps {
+  sessions: EnrichedSession[];
+  loading: boolean;
+}
+
+interface SessionMeta {
+  slug: string;
+  branch: string;
+  fileSize: number;
+  summary: string | null;
+  startedAt: string;
+  lastActiveAt: string;
+}
+
+interface SessionContent {
+  id: string;
+  content: string;
+  claude_session_id: string | null;
+  meta: SessionMeta | null;
+}
+
+export function SessionPanel({ sessions, loading }: SessionPanelProps) {
+  const [selected, setSelected] = useState<EnrichedSession | null>(null);
+  const [content, setContent] = useState<SessionContent | null>(null);
+  const [contentLoading, setContentLoading] = useState(false);
+  const [resuming, setResuming] = useState(false);
+
+  const selectSession = useCallback(async (session: EnrichedSession) => {
+    setSelected(session);
+    setContentLoading(true);
+    try {
+      const res = await fetch(`/api/orbital/sessions/${session.id}/content`);
+      if (res.ok) setContent(await res.json());
+    } catch {
+      // silent
+    } finally {
+      setContentLoading(false);
+    }
+  }, []);
+
+  const handleResume = useCallback(async () => {
+    const sessionId = selected?.claude_session_id;
+    if (!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]);
+
+  if (loading) {
+    return (
+      <div className="flex h-32 items-center justify-center">
+        <div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+      </div>
+    );
+  }
+
+  // ─── Detail view ───────────────────────────────────────────
+  if (selected) {
+    const discoveries = Array.isArray(selected.discoveries) ? selected.discoveries : [];
+    const nextSteps = Array.isArray(selected.next_steps) ? selected.next_steps : [];
+    const canResume = !!selected.claude_session_id;
+    const meta = content?.meta ?? null;
+    // Prefer meta summary (from JSONL), then DB summary
+    const rawDisplayName = meta?.summary ?? selected.summary ?? null;
+    const displayName = rawDisplayName ? truncateText(rawDisplayName, 100) : null;
+
+    return (
+      <div className="flex h-full flex-col">
+        {/* Back button + header */}
+        <div className="flex items-center gap-2 pb-3">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={() => { setSelected(null); setContent(null); }}
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div className="min-w-0 flex-1">
+            <p className="text-xxs text-muted-foreground">
+              {selected.started_at && format(new Date(selected.started_at), 'MMM d, yyyy')}
+            </p>
+            <p className="truncate text-sm font-light">
+              {displayName || 'Untitled Session'}
+            </p>
+          </div>
+        </div>
+
+        <Separator className="mb-3" />
+
+        {/* Content */}
+        <ScrollArea className="flex-1 -mr-2 pr-2">
+          {contentLoading ? (
+            <div className="flex h-20 items-center justify-center">
+              <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+            </div>
+          ) : (
+            <table className="w-full text-xs">
+              <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">
+                {/* DB fields */}
+                <tr>
+                  <td>Scope</td>
+                  <td>{selected.scope_id}</td>
+                </tr>
+                {actionLabel(selected.action) && (
+                  <tr>
+                    <td>Action</td>
+                    <td>{actionLabel(selected.action)}</td>
+                  </tr>
+                )}
+                <tr>
+                  <td>Summary</td>
+                  <td>{selected.summary ? truncateText(selected.summary, 200) : '—'}</td>
+                </tr>
+                <tr>
+                  <td>Started</td>
+                  <td>{selected.started_at ? format(new Date(selected.started_at), 'MMM d, h:mm a') : '—'}</td>
+                </tr>
+                <tr>
+                  <td>Ended</td>
+                  <td>{selected.ended_at ? format(new Date(selected.ended_at), 'MMM d, h:mm a') : '—'}</td>
+                </tr>
+
+                {/* JSONL metadata (when available) */}
+                {meta && (
+                  <>
+                    {meta.branch && meta.branch !== 'unknown' && (
+                      <tr>
+                        <td>Branch</td>
+                        <td className="font-mono text-xxs">{meta.branch}</td>
+                      </tr>
+                    )}
+                    {meta.fileSize > 0 && (
+                      <tr>
+                        <td>File size</td>
+                        <td>{formatFileSize(meta.fileSize)}</td>
+                      </tr>
+                    )}
+                    <tr>
+                      <td>Plan</td>
+                      <td className="text-muted-foreground">{meta.slug}</td>
+                    </tr>
+                  </>
+                )}
+
+                {/* Handoff file */}
+                {selected.handoff_file && (
+                  <tr>
+                    <td>Handoff</td>
+                    <td className="font-mono text-xxs">{selected.handoff_file}</td>
+                  </tr>
+                )}
+
+                {/* Discoveries */}
+                {discoveries.length > 0 && (
+                  <tr>
+                    <td>Completed</td>
+                    <td>
+                      <ul className="space-y-0.5">
+                        {discoveries.map((item, idx) => (
+                          <li key={idx} className="text-muted-foreground">
+                            <span className="text-bid-green mr-1">{'•'}</span>{item}
+                          </li>
+                        ))}
+                      </ul>
+                    </td>
+                  </tr>
+                )}
+
+                {/* Next steps */}
+                {nextSteps.length > 0 && (
+                  <tr>
+                    <td>Next steps</td>
+                    <td>
+                      <ul className="space-y-0.5">
+                        {nextSteps.map((item, idx) => (
+                          <li key={idx} className="text-muted-foreground">
+                            <span className="text-accent-blue mr-1">{'•'}</span>{item}
+                          </li>
+                        ))}
+                      </ul>
+                    </td>
+                  </tr>
+                )}
+
+                {/* Session ID */}
+                {selected.claude_session_id && (
+                  <tr>
+                    <td>Session ID</td>
+                    <td className="font-mono text-xxs text-muted-foreground">{selected.claude_session_id}</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          )}
+        </ScrollArea>
+
+        {/* Resume button */}
+        <div className="pt-3">
+          <Button
+            className="w-full"
+            disabled={!canResume || resuming}
+            onClick={handleResume}
+            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-xs text-muted-foreground">
+              No matching Claude Code session found
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // ─── List view ─────────────────────────────────────────────
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center gap-2 pb-3">
+        <h3 className="text-xs font-normal">Sessions</h3>
+        <Badge variant="secondary" className="text-xxs">
+          {sessions.length}
+        </Badge>
+      </div>
+
+      {sessions.length === 0 ? (
+        <div className="flex flex-1 items-center justify-center">
+          <p className="text-xs text-muted-foreground">No sessions recorded yet</p>
+        </div>
+      ) : (
+        <ScrollArea className="flex-1 -mr-2 pr-2">
+          <div className="space-y-2">
+            {sessions.map((session) => {
+              const discoveries = Array.isArray(session.discoveries) ? session.discoveries : [];
+              const nextSteps = Array.isArray(session.next_steps) ? session.next_steps : [];
+
+              return (
+                <Card
+                  key={session.id}
+                  className={cn(
+                    'cursor-pointer transition-colors hover:border-primary/30',
+                    session.claude_session_id && 'border-l-2 border-l-primary/50',
+                    'glow-blue-sm',
+                  )}
+                  onClick={() => selectSession(session)}
+                >
+                  <CardContent className="p-2.5">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-1.5">
+                        <span className="text-xxs text-muted-foreground">
+                          {session.started_at && format(new Date(session.started_at), 'MMM d')}
+                        </span>
+                        {actionLabel(session.action) && (
+                          <Badge variant="outline" className="text-xxs px-1 py-0 font-light">
+                            {actionLabel(session.action)}
+                          </Badge>
+                        )}
+                      </div>
+                      <ChevronRight className="h-3.5 w-3.5 text-muted-foreground/50" />
+                    </div>
+                    <p className="mt-1 truncate text-xs font-normal">
+                      {session.summary || 'Untitled Session'}
+                    </p>
+                    <div className="mt-1.5 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>
+                      )}
+                      {session.claude_session_id && (
+                        <span className="text-primary/70">resumable</span>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+}
+
+function truncateText(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`;
+}

package/src/components/SprintContainer.tsx

@@ -0,0 +1,303 @@
+import { useState, useEffect, useRef } from 'react';
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+import { X, Layers, Package, Play } from 'lucide-react';
+import type { Sprint, Scope, CardDisplayConfig } from '@/types';
+import { ScopeCard } from './ScopeCard';
+import { cn, formatScopeId } from '@/lib/utils';
+import { useWorkflow } from '@/hooks/useWorkflow';
+
+interface SprintContainerProps {
+  sprint: Sprint;
+  /** Full scope objects for scopes in the sprint (for rendering cards) */
+  scopeLookup: Map<number, Scope>;
+  onDelete?: (id: number) => void;
+  onDispatch?: (id: number) => void;
+  onRename?: (id: number, name: string) => void;
+  onScopeClick?: (scope: Scope) => void;
+  cardDisplay?: CardDisplayConfig;
+  dimmedIds?: Set<number>;
+  /** Number of loose (non-batched) scopes in the column — drives "Add all" button visibility */
+  looseCount?: number;
+  /** Bulk-add all loose column scopes into this batch */
+  onAddAll?: (sprintId: number) => void;
+  /** Whether this sprint was just created and should start with name editing */
+  editingName?: boolean;
+  /** Called when name editing finishes (committed or cancelled) */
+  onEditingDone?: () => void;
+}
+
+const STATUS_STYLE: Record<string, string> = {
+  assembling: 'border-dashed border-cyan-500/40',
+  dispatched: 'border-solid border-amber-500/50 batch-group-dispatched',
+  in_progress: 'border-solid border-amber-500/40 batch-group-dispatched',
+  completed: 'border-solid border-green-500/40 opacity-60',
+  failed: 'border-solid border-red-500/40',
+  cancelled: 'border-solid border-muted-foreground/30 opacity-50',
+};
+
+const STATUS_LABEL: Record<string, string> = {
+  assembling: 'Assembling',
+  dispatched: 'Dispatched',
+  in_progress: 'Running',
+  completed: 'Complete',
+  failed: 'Failed',
+  cancelled: 'Cancelled',
+};
+
+function totalEffortHours(sprint: Sprint): string {
+  let total = 0;
+  for (const ss of sprint.scopes) {
+    if (!ss.effort_estimate) continue;
+    const match = ss.effort_estimate.toLowerCase().match(/(\d+(?:\.\d+)?)\s*hour/);
+    if (match) total += parseFloat(match[1]);
+    const minMatch = ss.effort_estimate.toLowerCase().match(/(\d+)\s*min/);
+    if (minMatch) total += parseInt(minMatch[1]) / 60;
+  }
+  if (total === 0) return 'TBD';
+  return total < 1 ? `${Math.round(total * 60)}M` : `~${total.toFixed(0)}H`;
+}
+
+export function SprintContainer({ sprint, scopeLookup, onDelete, onDispatch, onRename, onScopeClick, cardDisplay, dimmedIds, looseCount, onAddAll, editingName, onEditingDone }: SprintContainerProps) {
+  const { engine } = useWorkflow();
+  const isAssembling = sprint.status === 'assembling';
+  const [isEditing, setIsEditing] = useState(editingName ?? false);
+  const [draftName, setDraftName] = useState(sprint.name);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (editingName) {
+      setIsEditing(true);
+      setDraftName('');
+    }
+  }, [editingName]);
+
+  useEffect(() => {
+    if (isEditing) inputRef.current?.focus();
+  }, [isEditing]);
+
+  const commitName = () => {
+    const trimmed = draftName.trim();
+    if (trimmed && trimmed !== sprint.name && onRename) {
+      onRename(sprint.id, trimmed);
+    }
+    setIsEditing(false);
+    setDraftName(trimmed || sprint.name);
+    onEditingDone?.();
+  };
+  const isBatch = sprint.group_type === 'batch';
+  const batchActionLabel = isBatch
+    ? (() => {
+        const target = engine.getBatchTargetStatus(sprint.target_column);
+        return target ? engine.findEdge(sprint.target_column, target)?.label ?? 'Dispatch' : 'Dispatch';
+      })()
+    : undefined;
+
+  // Only sprints are draggable (batches dispatch via header button)
+  const {
+    attributes: dragAttrs,
+    listeners: dragListeners,
+    setNodeRef: setDragRef,
+    transform,
+    isDragging,
+  } = useDraggable({
+    id: `sprint-${sprint.id}`,
+    disabled: isBatch || !isAssembling || sprint.scope_ids.length === 0,
+  });
+
+  const { setNodeRef: setDropRef, isOver } = useDroppable({
+    id: `sprint-drop-${sprint.id}`,
+    disabled: !isAssembling,
+  });
+
+  const dragStyle = transform ? { transform: CSS.Translate.toString(transform) } : undefined;
+
+  const totalScopes = sprint.scope_ids.length;
+  const { progress } = sprint;
+  const canDispatch = isBatch && isAssembling && totalScopes > 0 && onDispatch;
+
+  // Icon and border vary by group_type
+  const Icon = isBatch ? Package : Layers;
+  const iconColor = isBatch ? 'text-amber-400' : 'text-cyan-400';
+  const borderStyle = isBatch && isAssembling
+    ? 'border-muted-foreground/30'
+    : STATUS_STYLE[sprint.status] ?? 'border-muted-foreground/30';
+
+  return (
+    <div
+      ref={setDragRef}
+      style={{
+        ...dragStyle,
+        ...(isBatch && isAssembling ? { borderColor: (engine.getList(sprint.target_column)?.hex ?? '') + '80' } : undefined),
+      }}
+      className={cn(
+        'rounded-lg border bg-card/30 transition-all duration-200',
+        borderStyle,
+        isDragging && 'opacity-30',
+        !isBatch && isAssembling && 'cursor-grab active:cursor-grabbing',
+      )}
+      {...(isBatch ? {} : dragAttrs)}
+      {...(isBatch ? {} : dragListeners)}
+    >
+      {/* Header */}
+      <div className="flex items-center gap-2 px-2.5 py-1.5 border-b border-inherit">
+        <Icon className={cn('h-3 w-3 shrink-0', iconColor)} />
+        {isEditing ? (
+          <input
+            ref={inputRef}
+            className="min-w-0 flex-1 h-5 rounded bg-muted/50 px-1.5 text-xs font-medium text-foreground border border-cyan-500/30 focus:outline-none focus:ring-1 focus:ring-cyan-500/50"
+            placeholder={isBatch ? 'Batch name...' : 'Sprint name...'}
+            value={draftName}
+            onChange={(e) => setDraftName(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') commitName();
+              if (e.key === 'Escape') { setIsEditing(false); setDraftName(sprint.name); onEditingDone?.(); }
+            }}
+            onBlur={commitName}
+            onClick={(e) => e.stopPropagation()}
+          />
+        ) : (
+          <span
+            className={cn('text-xs font-medium text-foreground truncate flex-1', isAssembling && 'cursor-text')}
+            onDoubleClick={() => { if (isAssembling) { setIsEditing(true); setDraftName(sprint.name); } }}
+          >
+            {sprint.name}
+          </span>
+        )}
+        <span className={cn(
+          'rounded px-1 py-0.5 text-[10px] uppercase',
+          sprint.status === 'dispatched' || sprint.status === 'in_progress'
+            ? 'bg-amber-500/20 text-amber-400'
+            : sprint.status === 'completed'
+            ? 'bg-green-500/20 text-green-400'
+            : sprint.status === 'failed'
+            ? 'bg-red-500/20 text-red-400'
+            : 'text-muted-foreground',
+        )}>
+          {STATUS_LABEL[sprint.status]}
+        </span>
+        {isAssembling && (looseCount ?? 0) > 0 && onAddAll && (
+          <button
+            onClick={(e) => { e.stopPropagation(); onAddAll(sprint.id); }}
+            className="shrink-0 flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+            title={`Add all ${looseCount} remaining scopes`}
+          >
+            + All ({looseCount})
+          </button>
+        )}
+        {canDispatch && (
+          <button
+            onClick={(e) => { e.stopPropagation(); onDispatch(sprint.id); }}
+            className="shrink-0 flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] bg-cyan-600/80 text-black hover:bg-cyan-500/80 transition-colors"
+            title={batchActionLabel ?? 'Dispatch'}
+          >
+            <Play className="h-2.5 w-2.5" />
+            {batchActionLabel ?? 'Dispatch'}
+          </button>
+        )}
+        {isAssembling && onDelete && (
+          <button
+            onClick={(e) => { e.stopPropagation(); onDelete(sprint.id); }}
+            className="shrink-0 text-muted-foreground hover:text-red-400 transition-colors"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        )}
+      </div>
+
+      {/* Scope Cards (inside the sprint) */}
+      <div
+        ref={setDropRef}
+        className={cn(
+          'p-1.5 space-y-1 min-h-[40px] transition-colors duration-150',
+          isOver && isAssembling && 'bg-cyan-500/5 ring-1 ring-inset ring-cyan-500/30 rounded-b-lg',
+        )}
+      >
+        {sprint.scope_ids.map((scopeId) => {
+          const scope = scopeLookup.get(scopeId);
+          if (!scope) {
+            // Fallback: show minimal info from sprint scope data
+            const ss = sprint.scopes.find((s) => s.scope_id === scopeId);
+            return (
+              <div key={scopeId} className="rounded border border-muted-foreground/20 bg-card/50 px-2 py-1 text-xs text-muted-foreground">
+                <span className="font-mono">{formatScopeId(scopeId)}</span>
+                {ss && <span className="ml-2">{ss.title}</span>}
+              </div>
+            );
+          }
+          return (
+            <ScopeCard key={scopeId} scope={scope} onClick={onScopeClick} cardDisplay={cardDisplay} dimmed={dimmedIds?.has(scopeId)} />
+          );
+        })}
+        {totalScopes === 0 && isAssembling && isOver && (
+          <p className="py-3 text-center text-[10px] text-muted-foreground/50">
+            Drop to add
+          </p>
+        )}
+      </div>
+
+      {/* Footer: effort + scope count + progress + dispatch result */}
+      <div className="flex items-center justify-between border-t border-inherit px-2.5 py-1">
+        <span className="text-[10px] text-muted-foreground">
+          {isBatch ? batchActionLabel ?? 'Batch' : `Effort: ${totalEffortHours(sprint)}`}
+        </span>
+        <span className="text-[10px] text-muted-foreground">
+          {totalScopes} scope{totalScopes !== 1 ? 's' : ''}
+        </span>
+        {sprint.status !== 'assembling' && totalScopes > 0 && (
+          <div className="flex items-center gap-1">
+            {progress.completed > 0 && (
+              <span className="text-[10px] text-green-400">{progress.completed} done</span>
+            )}
+            {progress.failed > 0 && (
+              <span className="text-[10px] text-red-400">{progress.failed} fail</span>
+            )}
+            {progress.in_progress > 0 && (
+              <span className="text-[10px] text-amber-400">{progress.in_progress} active</span>
+            )}
+          </div>
+        )}
+      </div>
+      {/* Dispatch result (batch only — commit SHA / PR link) */}
+      {isBatch && sprint.dispatch_result && (
+        <div className="border-t border-inherit px-2.5 py-1 text-[10px] text-muted-foreground space-y-0.5">
+          {sprint.dispatch_result.commit_sha && (
+            <span className="font-mono">{sprint.dispatch_result.commit_sha.slice(0, 7)}</span>
+          )}
+          {sprint.dispatch_result.pr_url && (
+            <a
+              href={sprint.dispatch_result.pr_url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-cyan-400 hover:underline ml-1"
+            >
+              PR #{sprint.dispatch_result.pr_number ?? ''}
+            </a>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Compact sprint preview for drag overlay */
+export function SprintDragPreview({ sprint }: { sprint: Sprint }) {
+  return (
+    <div className="w-72 rotate-1 opacity-90 shadow-xl shadow-black/40 rounded-lg border border-cyan-500/40 bg-card/80 p-2">
+      <div className="flex items-center gap-2 mb-1">
+        <Layers className="h-3 w-3 text-cyan-400" />
+        <span className="text-xs font-medium">{sprint.name}</span>
+      </div>
+      <div className="space-y-0.5">
+        {sprint.scopes.slice(0, 3).map((ss) => (
+          <div key={ss.scope_id} className="rounded bg-muted/30 px-1.5 py-0.5 text-[10px] text-muted-foreground truncate">
+            {formatScopeId(ss.scope_id)} {ss.title}
+          </div>
+        ))}
+        {sprint.scopes.length > 3 && (
+          <p className="text-[10px] text-muted-foreground text-center">+{sprint.scopes.length - 3} more</p>
+        )}
+      </div>
+    </div>
+  );
+}