orbital-command 0.1.0

package/src/hooks/useSettings.tsx

@@ -0,0 +1,187 @@
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
+
+// ─── Types ───────────────────────────────────────────────
+
+export interface Settings {
+  fontFamily: string;
+  fontScale: number;
+  reduceMotion: boolean;
+  showBackgroundEffects: boolean;
+  showStatusBar: boolean;
+  compactMode: boolean;
+}
+
+interface SettingsContextValue {
+  settings: Settings;
+  updateSetting: <K extends keyof Settings>(key: K, value: Settings[K]) => void;
+}
+
+// ─── Defaults ────────────────────────────────────────────
+
+const DEFAULTS: Settings = {
+  fontFamily: 'Space Grotesk',
+  fontScale: 1.1,
+  reduceMotion: false,
+  showBackgroundEffects: true,
+  showStatusBar: true,
+  compactMode: false,
+};
+
+const STORAGE_KEY = 'cc-settings';
+
+// ─── Font Catalog ────────────────────────────────────────
+
+export const FONT_CATALOG = [
+  { family: 'JetBrains Mono', category: 'monospace' as const, label: 'JetBrains Mono' },
+  { family: 'Space Mono', category: 'monospace' as const, label: 'Space Mono' },
+  { family: 'Fira Code', category: 'monospace' as const, label: 'Fira Code' },
+  { family: 'IBM Plex Mono', category: 'monospace' as const, label: 'IBM Plex Mono' },
+  { family: 'Source Code Pro', category: 'monospace' as const, label: 'Source Code Pro' },
+  { family: 'Space Grotesk', category: 'sans-serif' as const, label: 'Space Grotesk' },
+  { family: 'Inter', category: 'sans-serif' as const, label: 'Inter' },
+  { family: 'Outfit', category: 'sans-serif' as const, label: 'Outfit' },
+  { family: 'Sora', category: 'sans-serif' as const, label: 'Sora' },
+  { family: 'Orbitron', category: 'display' as const, label: 'Orbitron' },
+  { family: 'Exo 2', category: 'display' as const, label: 'Exo 2' },
+] as const;
+
+export type FontCategory = typeof FONT_CATALOG[number]['category'];
+
+// ─── Font Loading ────────────────────────────────────────
+
+const FONT_LINK_ID = 'cc-dynamic-font';
+const PREVIEW_LINK_ID = 'cc-font-previews';
+
+function loadGoogleFont(family: string): void {
+  if (family === 'JetBrains Mono') {
+    const existing = document.getElementById(FONT_LINK_ID);
+    if (existing) existing.remove();
+    return;
+  }
+
+  const encoded = family.replace(/ /g, '+');
+  const href = `https://fonts.googleapis.com/css2?family=${encoded}:wght@300;400;500;600;700&display=swap`;
+
+  let link = document.getElementById(FONT_LINK_ID) as HTMLLinkElement | null;
+  if (link) {
+    if (link.href === href) return;
+    link.href = href;
+  } else {
+    link = document.createElement('link');
+    link.id = FONT_LINK_ID;
+    link.rel = 'stylesheet';
+    link.href = href;
+    document.head.appendChild(link);
+  }
+}
+
+export function preloadFontPreviews(): void {
+  if (document.getElementById(PREVIEW_LINK_ID)) return;
+
+  const families = FONT_CATALOG
+    .filter(f => f.family !== 'JetBrains Mono')
+    .map(f => `family=${f.family.replace(/ /g, '+')}:wght@400`)
+    .join('&');
+  const href = `https://fonts.googleapis.com/css2?${families}&display=swap`;
+
+  const link = document.createElement('link');
+  link.id = PREVIEW_LINK_ID;
+  link.rel = 'stylesheet';
+  link.href = href;
+  document.head.appendChild(link);
+}
+
+// ─── Persistence ─────────────────────────────────────────
+
+function readSettings(): Settings {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) return { ...DEFAULTS, ...JSON.parse(raw) };
+  } catch { /* use defaults */ }
+  return { ...DEFAULTS };
+}
+
+function persistSettings(settings: Settings): void {
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(settings)); } catch { /* noop */ }
+}
+
+// ─── DOM Side Effects ────────────────────────────────────
+
+function applySettingsToDOM(settings: Settings): void {
+  const root = document.documentElement;
+
+  // Font family
+  const fallback = FONT_CATALOG.find(f => f.family === settings.fontFamily)?.category === 'monospace'
+    ? 'monospace' : 'sans-serif';
+  root.style.setProperty('--font-family', `'${settings.fontFamily}', ${fallback}`);
+  loadGoogleFont(settings.fontFamily);
+
+  // Font scale
+  root.style.setProperty('--font-scale', settings.fontScale.toString());
+
+  // Reduce motion
+  if (settings.reduceMotion) {
+    root.setAttribute('data-reduce-motion', 'true');
+  } else {
+    root.removeAttribute('data-reduce-motion');
+  }
+
+  // Compact mode
+  if (settings.compactMode) {
+    root.setAttribute('data-compact', 'true');
+  } else {
+    root.removeAttribute('data-compact');
+  }
+}
+
+// ─── Context ─────────────────────────────────────────────
+
+const SettingsContext = createContext<SettingsContextValue | null>(null);
+
+// ─── Provider ────────────────────────────────────────────
+
+export function SettingsProvider({ children }: { children: ReactNode }) {
+  const [settings, setSettings] = useState<Settings>(readSettings);
+
+  const updateSetting = useCallback(<K extends keyof Settings>(key: K, value: Settings[K]) => {
+    setSettings(prev => {
+      const next = { ...prev, [key]: value };
+      persistSettings(next);
+      applySettingsToDOM(next);
+      return next;
+    });
+  }, []);
+
+  // Apply on mount
+  useEffect(() => {
+    applySettingsToDOM(settings);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Cross-tab sync
+  useEffect(() => {
+    const handler = (e: StorageEvent) => {
+      if (e.key === STORAGE_KEY) {
+        const next = readSettings();
+        setSettings(next);
+        applySettingsToDOM(next);
+      }
+    };
+    window.addEventListener('storage', handler);
+    return () => window.removeEventListener('storage', handler);
+  }, []);
+
+  return (
+    <SettingsContext.Provider value={{ settings, updateSetting }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}
+
+// ─── Hook ────────────────────────────────────────────────
+
+export function useSettings(): SettingsContextValue {
+  const ctx = useContext(SettingsContext);
+  if (!ctx) throw new Error('useSettings must be used within a SettingsProvider');
+  return ctx;
+}

package/src/hooks/useSocket.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { socket } from '../socket';
+
+export function useSocket() {
+  const [connected, setConnected] = useState(socket.connected);
+
+  useEffect(() => {
+    function onConnect() {
+      setConnected(true);
+    }
+    function onDisconnect() {
+      setConnected(false);
+    }
+
+    socket.on('connect', onConnect);
+    socket.on('disconnect', onDisconnect);
+
+    return () => {
+      socket.off('connect', onConnect);
+      socket.off('disconnect', onDisconnect);
+    };
+  }, []);
+
+  return { socket, connected };
+}

package/src/hooks/useSourceControl.ts

@@ -0,0 +1,105 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { socket } from '../socket';
+import type {
+  GitOverview,
+  CommitEntry,
+  BranchInfoData,
+  WorktreeDetail,
+  GitHubStatus,
+  DriftPair,
+} from '../types';
+
+interface SourceControlState {
+  overview: GitOverview | null;
+  commits: CommitEntry[];
+  branches: BranchInfoData[];
+  worktrees: WorktreeDetail[];
+  github: GitHubStatus | null;
+  drift: DriftPair[];
+  loading: boolean;
+  refetch: () => void;
+  loadMoreCommits: () => void;
+  hasMoreCommits: boolean;
+}
+
+const COMMIT_PAGE_SIZE = 50;
+
+export function useSourceControl(): SourceControlState {
+  const [overview, setOverview] = useState<GitOverview | null>(null);
+  const [commits, setCommits] = useState<CommitEntry[]>([]);
+  const [branches, setBranches] = useState<BranchInfoData[]>([]);
+  const [worktrees, setWorktrees] = useState<WorktreeDetail[]>([]);
+  const [github, setGitHub] = useState<GitHubStatus | null>(null);
+  const [drift, setDrift] = useState<DriftPair[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [hasMoreCommits, setHasMoreCommits] = useState(true);
+  const offsetRef = useRef(0);
+
+  const fetchCore = useCallback(async () => {
+    try {
+      const [overviewRes, commitsRes, branchesRes, worktreesRes, driftRes] = await Promise.all([
+        fetch('/api/orbital/git/overview'),
+        fetch(`/api/orbital/git/commits?limit=${COMMIT_PAGE_SIZE}&offset=0`),
+        fetch('/api/orbital/git/branches'),
+        fetch('/api/orbital/git/worktrees'),
+        fetch('/api/orbital/git/drift'),
+      ]);
+
+      if (overviewRes.ok) setOverview(await overviewRes.json());
+      if (commitsRes.ok) {
+        const data = await commitsRes.json();
+        setCommits(data);
+        offsetRef.current = data.length;
+        setHasMoreCommits(data.length >= COMMIT_PAGE_SIZE);
+      }
+      if (branchesRes.ok) setBranches(await branchesRes.json());
+      if (worktreesRes.ok) setWorktrees(await worktreesRes.json());
+      if (driftRes.ok) setDrift(await driftRes.json());
+    } catch {
+      // Non-critical — dashboard degrades gracefully
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // GitHub status fetched separately (can be slow)
+  const fetchGitHub = useCallback(async () => {
+    try {
+      const res = await fetch('/api/orbital/github/status');
+      if (res.ok) setGitHub(await res.json());
+    } catch { /* ok */ }
+  }, []);
+
+  const refetch = useCallback(() => {
+    fetchCore();
+    fetchGitHub();
+  }, [fetchCore, fetchGitHub]);
+
+  const loadMoreCommits = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/orbital/git/commits?limit=${COMMIT_PAGE_SIZE}&offset=${offsetRef.current}`);
+      if (res.ok) {
+        const data: CommitEntry[] = await res.json();
+        setCommits(prev => [...prev, ...data]);
+        offsetRef.current += data.length;
+        setHasMoreCommits(data.length >= COMMIT_PAGE_SIZE);
+      }
+    } catch { /* ok */ }
+  }, []);
+
+  useEffect(() => {
+    fetchCore();
+    fetchGitHub();
+  }, [fetchCore, fetchGitHub]);
+
+  // Real-time: refetch on git status change
+  useEffect(() => {
+    function onGitChange() {
+      fetchCore();
+    }
+    socket.on('git:status:changed', onGitChange);
+    return () => { socket.off('git:status:changed', onGitChange); };
+  }, [fetchCore]);
+
+  return { overview, commits, branches, worktrees, github, drift, loading, refetch, loadMoreCommits, hasMoreCommits };
+}

package/src/hooks/useSprintPreflight.ts

@@ -0,0 +1,55 @@
+import { useState, useEffect, useCallback } from 'react';
+import type { Sprint } from '@/types';
+
+interface SprintPreflightState {
+  graph: { layers: number[][]; edges: Array<{ from: number; to: number }> } | null;
+  loading: boolean;
+  showPreflight: boolean;
+  pendingSprint: Sprint | null;
+  onConfirm: () => Promise<void>;
+  onCancel: () => void;
+}
+
+export function useSprintPreflight(
+  pendingSprint: Sprint | null,
+  getGraph: (id: number) => Promise<{ layers: number[][]; edges: Array<{ from: number; to: number }> } | null>,
+  dispatchSprint: (id: number) => Promise<unknown>,
+  dismissSprintDispatch: () => void,
+): SprintPreflightState {
+  const [graph, setGraph] = useState<SprintPreflightState['graph']>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!pendingSprint) return;
+    let cancelled = false;
+    setLoading(true);
+    getGraph(pendingSprint.id).then((g) => {
+      if (!cancelled) {
+        setGraph(g);
+        setLoading(false);
+      }
+    });
+    return () => { cancelled = true; };
+  }, [pendingSprint, getGraph]);
+
+  const onConfirm = useCallback(async () => {
+    if (!pendingSprint) return;
+    await dispatchSprint(pendingSprint.id);
+    dismissSprintDispatch();
+    setGraph(null);
+  }, [pendingSprint, dispatchSprint, dismissSprintDispatch]);
+
+  const onCancel = useCallback(() => {
+    dismissSprintDispatch();
+    setGraph(null);
+  }, [dismissSprintDispatch]);
+
+  return {
+    graph,
+    loading,
+    showPreflight: pendingSprint != null,
+    pendingSprint,
+    onConfirm,
+    onCancel,
+  };
+}

package/src/hooks/useSprints.ts

@@ -0,0 +1,154 @@
+import { useEffect, useState, useCallback } from 'react';
+import { socket } from '../socket';
+import { useReconnect } from './useReconnect';
+import type { Sprint, GroupType } from '../types';
+
+export interface AddScopesResult {
+  added: number[];
+  unmet_dependencies: Array<{ scope_id: number; missing: Array<{ scope_id: number; title: string; status: string }> }>;
+}
+
+export function useSprints() {
+  const [sprints, setSprints] = useState<Sprint[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchSprints = useCallback(async () => {
+    try {
+      const res = await fetch('/api/orbital/sprints');
+      if (!res.ok) return;
+      const data = await res.json();
+      setSprints(data);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchSprints();
+  }, [fetchSprints]);
+
+  useReconnect(fetchSprints);
+
+  // Real-time updates via Socket.io
+  useEffect(() => {
+    function onCreated(sprint: Sprint) {
+      setSprints((prev) => [sprint, ...prev]);
+    }
+
+    function onUpdated(sprint: Sprint) {
+      setSprints((prev) => {
+        const idx = prev.findIndex((s) => s.id === sprint.id);
+        if (idx >= 0) {
+          const next = [...prev];
+          next[idx] = sprint;
+          return next;
+        }
+        return [sprint, ...prev];
+      });
+    }
+
+    function onDeleted({ id }: { id: number }) {
+      setSprints((prev) => prev.filter((s) => s.id !== id));
+    }
+
+    function onCompleted(sprint: Sprint) {
+      setSprints((prev) => {
+        const idx = prev.findIndex((s) => s.id === sprint.id);
+        if (idx >= 0) {
+          const next = [...prev];
+          next[idx] = sprint;
+          return next;
+        }
+        return prev;
+      });
+    }
+
+    socket.on('sprint:created', onCreated);
+    socket.on('sprint:updated', onUpdated);
+    socket.on('sprint:deleted', onDeleted);
+    socket.on('sprint:completed', onCompleted);
+
+    return () => {
+      socket.off('sprint:created', onCreated);
+      socket.off('sprint:updated', onUpdated);
+      socket.off('sprint:deleted', onDeleted);
+      socket.off('sprint:completed', onCompleted);
+    };
+  }, []);
+
+  const createSprint = useCallback(async (
+    name: string,
+    options?: { target_column?: string; group_type?: GroupType },
+  ): Promise<Sprint | null> => {
+    const res = await fetch('/api/orbital/sprints', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, ...options }),
+    });
+    if (!res.ok) return null;
+    return res.json();
+  }, []);
+
+  const renameSprint = useCallback(async (id: number, name: string): Promise<boolean> => {
+    const res = await fetch(`/api/orbital/sprints/${id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name }),
+    });
+    return res.ok;
+  }, []);
+
+  const deleteSprint = useCallback(async (id: number): Promise<boolean> => {
+    const res = await fetch(`/api/orbital/sprints/${id}`, { method: 'DELETE' });
+    return res.ok;
+  }, []);
+
+  const addScopes = useCallback(async (sprintId: number, scopeIds: number[]): Promise<AddScopesResult | null> => {
+    const res = await fetch(`/api/orbital/sprints/${sprintId}/scopes`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ scope_ids: scopeIds }),
+    });
+    if (!res.ok) return null;
+    return res.json();
+  }, []);
+
+  const removeScopes = useCallback(async (sprintId: number, scopeIds: number[]): Promise<boolean> => {
+    const res = await fetch(`/api/orbital/sprints/${sprintId}/scopes`, {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ scope_ids: scopeIds }),
+    });
+    return res.ok;
+  }, []);
+
+  const dispatchSprint = useCallback(async (id: number): Promise<{ ok: boolean; error?: string; layers?: number[][] }> => {
+    const res = await fetch(`/api/orbital/sprints/${id}/dispatch`, { method: 'POST' });
+    return res.json();
+  }, []);
+
+  const cancelSprint = useCallback(async (id: number): Promise<boolean> => {
+    const res = await fetch(`/api/orbital/sprints/${id}/cancel`, { method: 'POST' });
+    return res.ok;
+  }, []);
+
+  const getGraph = useCallback(async (id: number): Promise<{ layers: number[][]; edges: Array<{ from: number; to: number }> } | null> => {
+    const res = await fetch(`/api/orbital/sprints/${id}/graph`);
+    if (!res.ok) return null;
+    return res.json();
+  }, []);
+
+  return {
+    sprints,
+    loading,
+    refetch: fetchSprints,
+    createSprint,
+    renameSprint,
+    deleteSprint,
+    addScopes,
+    removeScopes,
+    dispatchSprint,
+    cancelSprint,
+    getGraph,
+  };
+}

package/src/hooks/useStatusBarHighlight.ts

@@ -0,0 +1,18 @@
+import { useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+export function useStatusBarHighlight() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const raw = searchParams.get('highlight');
+  const highlightedScopeId = raw != null ? Number(raw) : null;
+
+  const clearHighlight = useCallback(() => {
+    setSearchParams((prev) => {
+      prev.delete('highlight');
+      return prev;
+    }, { replace: true });
+  }, [setSearchParams]);
+
+  return { highlightedScopeId, clearHighlight };
+}

package/src/hooks/useSwimlaneBoardSettings.ts

@@ -0,0 +1,104 @@
+import { useState, useCallback, useEffect } from 'react';
+import type { ViewMode, SwimGroupField } from '@/types';
+
+// ─── Constants ─────────────────────────────────────────────
+const VIEW_MODE_KEY = 'cc-view-mode';
+const GROUP_FIELD_KEY = 'cc-swim-group';
+const COLLAPSED_LANES_KEY = 'cc-swim-collapsed';
+
+// ─── localStorage helpers ──────────────────────────────────
+
+function readViewMode(): ViewMode {
+  try {
+    const raw = localStorage.getItem(VIEW_MODE_KEY);
+    if (raw === 'kanban' || raw === 'swimlane') return raw;
+  } catch { /* use default */ }
+  return 'kanban';
+}
+
+function readGroupField(): SwimGroupField {
+  try {
+    const raw = localStorage.getItem(GROUP_FIELD_KEY);
+    if (raw === 'priority' || raw === 'category' || raw === 'tags' || raw === 'effort' || raw === 'dependencies') {
+      return raw;
+    }
+  } catch { /* use default */ }
+  return 'priority';
+}
+
+function readCollapsedLanes(): Set<string> {
+  try {
+    const raw = localStorage.getItem(COLLAPSED_LANES_KEY);
+    if (raw) {
+      const arr = JSON.parse(raw) as string[];
+      if (Array.isArray(arr)) return new Set(arr);
+    }
+  } catch { /* use default */ }
+  return new Set();
+}
+
+function persistViewMode(mode: ViewMode) {
+  try { localStorage.setItem(VIEW_MODE_KEY, mode); } catch { /* noop */ }
+}
+
+function persistGroupField(field: SwimGroupField) {
+  try { localStorage.setItem(GROUP_FIELD_KEY, field); } catch { /* noop */ }
+}
+
+function persistCollapsedLanes(lanes: Set<string>) {
+  try { localStorage.setItem(COLLAPSED_LANES_KEY, JSON.stringify([...lanes])); } catch { /* noop */ }
+}
+
+// ─── Hook ──────────────────────────────────────────────────
+
+export function useSwimlaneBoardSettings() {
+  const [viewMode, setViewModeState] = useState<ViewMode>(readViewMode);
+  const [groupField, setGroupFieldState] = useState<SwimGroupField>(readGroupField);
+  const [collapsedLanes, setCollapsedLanes] = useState<Set<string>>(readCollapsedLanes);
+
+  // Cross-tab sync
+  useEffect(() => {
+    function onStorage(e: StorageEvent) {
+      if (e.key === VIEW_MODE_KEY) setViewModeState(readViewMode());
+      if (e.key === GROUP_FIELD_KEY) setGroupFieldState(readGroupField());
+      if (e.key === COLLAPSED_LANES_KEY) setCollapsedLanes(readCollapsedLanes());
+    }
+    window.addEventListener('storage', onStorage);
+    return () => window.removeEventListener('storage', onStorage);
+  }, []);
+
+  const setViewMode = useCallback((mode: ViewMode) => {
+    setViewModeState(mode);
+    persistViewMode(mode);
+  }, []);
+
+  const setGroupField = useCallback((field: SwimGroupField) => {
+    setGroupFieldState(field);
+    persistGroupField(field);
+    // Reset collapsed lanes when switching group field
+    setCollapsedLanes(new Set());
+    persistCollapsedLanes(new Set());
+  }, []);
+
+  const toggleLaneCollapse = useCallback((laneValue: string) => {
+    setCollapsedLanes((prev) => {
+      const next = new Set(prev);
+      if (next.has(laneValue)) {
+        next.delete(laneValue);
+      } else {
+        next.add(laneValue);
+      }
+      persistCollapsedLanes(next);
+      return next;
+    });
+  }, []);
+
+  return {
+    viewMode,
+    setViewMode,
+    groupField,
+    setGroupField,
+    collapsedLanes,
+    toggleLaneCollapse,
+  } as const;
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+export function useTheme() {
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', 'neon-glass');
+  }, []);
+
+  return { neonGlass: true as const };
+}