orbital-command 0.1.0

package/src/hooks/useCardDisplay.ts

@@ -0,0 +1,57 @@
+import { useState, useCallback, useEffect } from 'react';
+import type { CardDisplayConfig } from '@/types';
+
+const STORAGE_KEY = 'cc-card-display';
+
+const DEFAULTS: CardDisplayConfig = {
+  effort: true,
+  category: true,
+  priority: true,
+  tags: true,
+};
+
+function readPref(): CardDisplayConfig {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return DEFAULTS;
+    const parsed: unknown = JSON.parse(raw);
+    if (typeof parsed !== 'object' || parsed === null) return DEFAULTS;
+    const obj = parsed as Record<string, unknown>;
+    return {
+      effort: typeof obj.effort === 'boolean' ? obj.effort : true,
+      category: typeof obj.category === 'boolean' ? obj.category : true,
+      priority: typeof obj.priority === 'boolean' ? obj.priority : true,
+      tags: typeof obj.tags === 'boolean' ? obj.tags : true,
+    };
+  } catch {
+    return DEFAULTS;
+  }
+}
+
+export function useCardDisplay() {
+  const [display, setDisplay] = useState<CardDisplayConfig>(readPref);
+
+  // Cross-tab sync via storage event
+  useEffect(() => {
+    function onStorage(e: StorageEvent) {
+      if (e.key === STORAGE_KEY) {
+        setDisplay(readPref());
+      }
+    }
+    window.addEventListener('storage', onStorage);
+    return () => window.removeEventListener('storage', onStorage);
+  }, []);
+
+  const toggle = useCallback((field: keyof CardDisplayConfig) => {
+    setDisplay((prev) => {
+      const next = { ...prev, [field]: !prev[field] };
+      try { localStorage.setItem(STORAGE_KEY, JSON.stringify(next)); } catch { /* noop */ }
+      return next;
+    });
+  }, []);
+
+  const isAllVisible = display.effort && display.category && display.priority && display.tags;
+  const hiddenCount = [display.effort, display.category, display.priority, display.tags].filter((v) => !v).length;
+
+  return { display, toggle, isAllVisible, hiddenCount } as const;
+}

package/src/hooks/useCcHooks.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+import type { CcHookParsed } from '../../shared/workflow-config';
+
+export function useCcHooks() {
+  const [ccHooks, setCcHooks] = useState<CcHookParsed[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch('/api/orbital/workflow/claude-hooks')
+      .then(async (res) => {
+        if (cancelled) return;
+        if (res.ok) {
+          const json = await res.json() as { data: CcHookParsed[] };
+          setCcHooks(json.data);
+        }
+      })
+      .catch(() => {/* swallow — CC hooks are optional */})
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, []);
+
+  return { ccHooks, loading };
+}

package/src/hooks/useConfigTree.ts

@@ -0,0 +1,51 @@
+import { useState, useEffect, useCallback } from 'react';
+import { socket } from '../socket';
+import { useReconnect } from './useReconnect';
+import type { ConfigPrimitiveType, ConfigFileNode } from '@/types';
+
+interface UseConfigTreeResult {
+  tree: ConfigFileNode[];
+  loading: boolean;
+  refresh: () => void;
+}
+
+export function useConfigTree(type: ConfigPrimitiveType): UseConfigTreeResult {
+  const [tree, setTree] = useState<ConfigFileNode[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchTree = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/orbital/config/${type}/tree`);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const json = await res.json();
+      setTree(json.data ?? []);
+    } catch {
+      setTree([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [type]);
+
+  // Initial fetch
+  useEffect(() => {
+    setLoading(true);
+    fetchTree();
+  }, [fetchTree]);
+
+  useReconnect(fetchTree);
+
+  // Subscribe to real-time changes
+  useEffect(() => {
+    const event = `config:${type}:changed`;
+    const handler = () => {
+      fetchTree();
+    };
+    const typedEvent = event as keyof import('@/types').ServerToClientEvents;
+    socket.on(typedEvent, handler);
+    return () => {
+      socket.off(typedEvent, handler);
+    };
+  }, [type, fetchTree]);
+
+  return { tree, loading, refresh: fetchTree };
+}

package/src/hooks/useEnforcementRules.ts

@@ -0,0 +1,46 @@
+import { useEffect, useState, useCallback } from 'react';
+import { socket } from '../socket';
+import { useReconnect } from './useReconnect';
+import type { EnforcementRulesData, ViolationTrendPoint, OrbitalEvent } from '../types';
+
+export function useEnforcementRules() {
+  const [data, setData] = useState<EnforcementRulesData | null>(null);
+  const [trend, setTrend] = useState<ViolationTrendPoint[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchRules = useCallback(async () => {
+    try {
+      const [rulesRes, trendRes] = await Promise.all([
+        fetch('/api/orbital/enforcement/rules'),
+        fetch('/api/orbital/events/violations/trend?days=30'),
+      ]);
+      if (rulesRes.ok) setData(await rulesRes.json());
+      if (trendRes.ok) setTrend(await trendRes.json());
+    } catch {
+      // Server may not be running
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchRules();
+  }, [fetchRules]);
+
+  useReconnect(fetchRules);
+
+  // Re-fetch when new violations/overrides arrive
+  useEffect(() => {
+    function onNewEvent(event: OrbitalEvent) {
+      if (event.type === 'VIOLATION' || event.type === 'OVERRIDE') {
+        fetchRules();
+      }
+    }
+    socket.on('event:new', onNewEvent);
+    return () => {
+      socket.off('event:new', onNewEvent);
+    };
+  }, [fetchRules]);
+
+  return { data, trend, loading, refetch: fetchRules };
+}

package/src/hooks/useEvents.ts

@@ -0,0 +1,59 @@
+import { useEffect, useState, useCallback } from 'react';
+import { socket } from '../socket';
+import { useReconnect } from './useReconnect';
+import type { OrbitalEvent } from '../types';
+
+interface UseEventsOptions {
+  limit?: number;
+  type?: string;
+}
+
+export function useEvents(options: UseEventsOptions = {}) {
+  const { limit = 50, type } = options;
+  const [events, setEvents] = useState<OrbitalEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchEvents = useCallback(async () => {
+    try {
+      const params = new URLSearchParams();
+      params.set('limit', String(limit));
+      if (type) params.set('type', type);
+
+      const res = await fetch(`/api/orbital/events?${params}`);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      setEvents(data);
+    } catch {
+      // Silently fail on fetch errors — events will come via socket
+    } finally {
+      setLoading(false);
+    }
+  }, [limit, type]);
+
+  useEffect(() => {
+    fetchEvents();
+  }, [fetchEvents]);
+
+  useReconnect(fetchEvents);
+
+  // Real-time updates — prepend new events
+  useEffect(() => {
+    function onNewEvent(event: OrbitalEvent) {
+      // If we have a type filter, only add matching events
+      if (type && event.type !== type) return;
+
+      setEvents((prev) => {
+        // Prevent duplicates
+        if (prev.some((e) => e.id === event.id)) return prev;
+        return [event, ...prev].slice(0, limit);
+      });
+    }
+
+    socket.on('event:new', onNewEvent);
+    return () => {
+      socket.off('event:new', onNewEvent);
+    };
+  }, [limit, type]);
+
+  return { events, loading, refetch: fetchEvents };
+}

package/src/hooks/useFileEditor.ts

@@ -0,0 +1,165 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { ConfigPrimitiveType } from '@/types';
+
+interface UseFileEditorResult {
+  content: string;
+  setContent: (value: string) => void;
+  frontmatter: Record<string, string>;
+  setFrontmatterField: (key: string, value: string) => void;
+  body: string;
+  setBody: (value: string) => void;
+  dirty: boolean;
+  saving: boolean;
+  loading: boolean;
+  save: () => Promise<void>;
+  error: string | null;
+}
+
+/** Split raw content into frontmatter fields and body */
+function parseFrontmatter(raw: string): { fields: Record<string, string>; body: string } {
+  const match = raw.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/);
+  if (!match) return { fields: {}, body: raw };
+
+  const fields: Record<string, string> = {};
+  for (const line of match[1].split('\n')) {
+    const idx = line.indexOf(':');
+    if (idx > 0) {
+      const key = line.slice(0, idx).trim();
+      const val = line.slice(idx + 1).trim();
+      fields[key] = val;
+    }
+  }
+  return { fields, body: match[2] };
+}
+
+/** Serialize frontmatter fields + body back into raw content */
+function serializeFrontmatter(fields: Record<string, string>, body: string): string {
+  const entries = Object.entries(fields).filter(([, v]) => v !== '');
+  if (entries.length === 0) return body;
+  const yaml = entries.map(([k, v]) => `${k}: ${v}`).join('\n');
+  return `---\n${yaml}\n---\n${body}`;
+}
+
+export function useFileEditor(
+  type: ConfigPrimitiveType | null,
+  filePath: string | null,
+): UseFileEditorResult {
+  const [content, setContent] = useState('');
+  const [savedContent, setSavedContent] = useState('');
+  const [frontmatter, setFrontmatter] = useState<Record<string, string>>({});
+  const [body, setBody] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Track the current fetch to avoid race conditions
+  const fetchIdRef = useRef(0);
+
+  // Fetch file content
+  useEffect(() => {
+    if (!type || !filePath) {
+      setContent('');
+      setSavedContent('');
+      setFrontmatter({});
+      setBody('');
+      setError(null);
+      return;
+    }
+
+    const id = ++fetchIdRef.current;
+    setLoading(true);
+    setError(null);
+
+    fetch(`/api/orbital/config/${type}/file?path=${encodeURIComponent(filePath)}`)
+      .then(async (res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const json = await res.json();
+        if (id !== fetchIdRef.current) return; // stale
+        const raw = json.data?.content ?? '';
+        setContent(raw);
+        setSavedContent(raw);
+        const parsed = parseFrontmatter(raw);
+        setFrontmatter(parsed.fields);
+        setBody(parsed.body);
+      })
+      .catch((err) => {
+        if (id !== fetchIdRef.current) return;
+        setError(err instanceof Error ? err.message : 'Failed to load file');
+      })
+      .finally(() => {
+        if (id === fetchIdRef.current) setLoading(false);
+      });
+  }, [type, filePath]);
+
+  // Update raw content when frontmatter or body changes (keep in sync)
+  const updateContent = useCallback((newFields: Record<string, string>, newBody: string) => {
+    const raw = serializeFrontmatter(newFields, newBody);
+    setContent(raw);
+  }, []);
+
+  const setFrontmatterField = useCallback((key: string, value: string) => {
+    setFrontmatter((prev) => {
+      const next = { ...prev, [key]: value };
+      setBody((b) => {
+        updateContent(next, b);
+        return b;
+      });
+      return next;
+    });
+  }, [updateContent]);
+
+  const handleSetBody = useCallback((value: string) => {
+    setBody(value);
+    setFrontmatter((f) => {
+      updateContent(f, value);
+      return f;
+    });
+  }, [updateContent]);
+
+  const handleSetContent = useCallback((value: string) => {
+    setContent(value);
+    const parsed = parseFrontmatter(value);
+    setFrontmatter(parsed.fields);
+    setBody(parsed.body);
+  }, []);
+
+  // Save
+  const save = useCallback(async () => {
+    if (!type || !filePath) return;
+    setSaving(true);
+    setError(null);
+
+    try {
+      const res = await fetch(`/api/orbital/config/${type}/file`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: filePath, content }),
+      });
+      if (!res.ok) {
+        const json = await res.json().catch(() => ({ error: 'Save failed' }));
+        throw new Error(json.error ?? `HTTP ${res.status}`);
+      }
+      setSavedContent(content);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Save failed');
+    } finally {
+      setSaving(false);
+    }
+  }, [type, filePath, content]);
+
+  const dirty = content !== savedContent;
+
+  return {
+    content,
+    setContent: handleSetContent,
+    frontmatter,
+    setFrontmatterField,
+    body,
+    setBody: handleSetBody,
+    dirty,
+    saving,
+    loading,
+    save,
+    error,
+  };
+}

package/src/hooks/useGates.ts

@@ -0,0 +1,57 @@
+import { useEffect, useState, useCallback } from 'react';
+import { socket } from '../socket';
+import { useReconnect } from './useReconnect';
+import type { QualityGate } from '../types';
+
+export function useGates(scopeId?: number) {
+  const [gates, setGates] = useState<QualityGate[]>([]);
+  const [stats, setStats] = useState<{ gate_name: string; total: number; passed: number; failed: number }[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchGates = useCallback(async () => {
+    try {
+      const params = scopeId ? `?scope_id=${scopeId}` : '';
+      const [gatesRes, statsRes] = await Promise.all([
+        fetch(`/api/orbital/gates${params}`),
+        fetch('/api/orbital/gates/stats'),
+      ]);
+
+      if (gatesRes.ok) setGates(await gatesRes.json());
+      if (statsRes.ok) setStats(await statsRes.json());
+    } catch {
+      // Silently fail
+    } finally {
+      setLoading(false);
+    }
+  }, [scopeId]);
+
+  useEffect(() => {
+    fetchGates();
+  }, [fetchGates]);
+
+  useReconnect(fetchGates);
+
+  // Real-time gate updates
+  useEffect(() => {
+    function onGateUpdated(gate: QualityGate) {
+      setGates((prev) => {
+        const idx = prev.findIndex(
+          (g) => g.gate_name === gate.gate_name && g.scope_id === gate.scope_id
+        );
+        if (idx >= 0) {
+          const next = [...prev];
+          next[idx] = gate;
+          return next;
+        }
+        return [...prev, gate];
+      });
+    }
+
+    socket.on('gate:updated', onGateUpdated);
+    return () => {
+      socket.off('gate:updated', onGateUpdated);
+    };
+  }, []);
+
+  return { gates, stats, loading, refetch: fetchGates };
+}

package/src/hooks/useIdeaActions.ts

@@ -0,0 +1,53 @@
+import { useState, useCallback } from 'react';
+
+interface IdeaActionsState {
+  surpriseLoading: boolean;
+  handleSurprise: () => Promise<void>;
+  handleApproveGhost: (id: number) => Promise<void>;
+  handleRejectGhost: (id: number) => Promise<void>;
+}
+
+export function useIdeaActions(
+  closeIdeaForm: () => void,
+  setSelectedIdea: (scope: null) => void,
+): IdeaActionsState {
+  const [surpriseLoading, setSurpriseLoading] = useState(false);
+
+  const handleSurprise = useCallback(async () => {
+    setSurpriseLoading(true);
+    try {
+      const res = await fetch('/api/orbital/ideas/surprise', { method: 'POST' });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({ error: 'Request failed' }));
+        throw new Error(body.error ?? `HTTP ${res.status}`);
+      }
+      closeIdeaForm();
+    } catch {
+      // Keep modal open on error — user can retry
+    } finally {
+      setSurpriseLoading(false);
+    }
+  }, [closeIdeaForm]);
+
+  const handleApproveGhost = useCallback(async (id: number) => {
+    try {
+      const res = await fetch(`/api/orbital/ideas/${id}/approve`, { method: 'POST' });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      setSelectedIdea(null);
+    } catch (err) {
+      console.error('[Orbital] Failed to approve idea:', err);
+    }
+  }, [setSelectedIdea]);
+
+  const handleRejectGhost = useCallback(async (id: number) => {
+    try {
+      const res = await fetch(`/api/orbital/ideas/${id}`, { method: 'DELETE' });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      setSelectedIdea(null);
+    } catch (err) {
+      console.error('[Orbital] Failed to reject idea:', err);
+    }
+  }, [setSelectedIdea]);
+
+  return { surpriseLoading, handleSurprise, handleApproveGhost, handleRejectGhost };
+}