@archznn/crewloop-skills 0.5.0 → 0.7.0

package/servers/dashboard/ui/src/contexts/SettingsContext.tsx

@@ -0,0 +1,60 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
+import type { DashboardSettings, Theme } from '../lib/types';
+import { loadSettings, saveSettings } from '../lib/settings';
+import { useReducedMotion } from '../hooks/useReducedMotion';
+
+interface SettingsContextValue {
+  settings: DashboardSettings;
+  resolvedTheme: 'dark' | 'light';
+  reducedMotion: boolean;
+  setSettings: (updater: DashboardSettings | ((prev: DashboardSettings) => DashboardSettings)) => void;
+}
+
+const SettingsContext = createContext<SettingsContextValue | null>(null);
+
+function resolveTheme(theme: Theme): 'dark' | 'light' {
+  if (theme !== 'system') return theme;
+  return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+}
+
+export function SettingsProvider({ children }: { children: ReactNode }) {
+  const [settings, setSettingsState] = useState<DashboardSettings>(() => loadSettings());
+  const systemReducedMotion = useReducedMotion();
+  const resolvedTheme = useMemo(() => resolveTheme(settings.theme), [settings.theme]);
+  const reducedMotion = settings.reducedMotion || systemReducedMotion;
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.remove('dark', 'light');
+    root.classList.add(resolvedTheme);
+  }, [resolvedTheme]);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.remove('density-compact', 'density-comfortable');
+    root.classList.add(`density-${settings.density}`);
+  }, [settings.density]);
+
+  const setSettings = useCallback(
+    (updater: DashboardSettings | ((prev: DashboardSettings) => DashboardSettings)) => {
+      setSettingsState((prev) => {
+        const next = typeof updater === 'function' ? (updater as (p: DashboardSettings) => DashboardSettings)(prev) : updater;
+        saveSettings(next);
+        return next;
+      });
+    },
+    []
+  );
+
+  return (
+    <SettingsContext.Provider value={{ settings, resolvedTheme, reducedMotion, setSettings }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}
+
+export function useSettings(): SettingsContextValue {
+  const ctx = useContext(SettingsContext);
+  if (!ctx) throw new Error('useSettings must be used within SettingsProvider');
+  return ctx;
+}

package/servers/dashboard/ui/src/hooks/useCommandPalette.ts

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export interface CommandPaletteState {
+  open: boolean;
+  query: string;
+  selectedIndex: number;
+}
+
+export interface CommandPaletteActions {
+  setOpen: (open: boolean) => void;
+  setQuery: (query: string) => void;
+  setSelectedIndex: (index: number | ((prev: number) => number)) => void;
+}
+
+export function useCommandPalette(): CommandPaletteState & CommandPaletteActions {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [selectedIndex, setSelectedIndexState] = useState(0);
+
+  const setSelectedIndex = useCallback(
+    (index: number | ((prev: number) => number)) => {
+      setSelectedIndexState((prev) => (typeof index === 'function' ? index(prev) : index));
+    },
+    []
+  );
+
+  useEffect(() => {
+    setSelectedIndexState(0);
+  }, [query]);
+
+  useEffect(() => {
+    if (open) setQuery('');
+  }, [open]);
+
+  return { open, setOpen, query, setQuery, selectedIndex, setSelectedIndex };
+}

package/servers/dashboard/ui/src/hooks/useKeyboardShortcut.ts

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+
+interface ShortcutOptions {
+  meta?: boolean;
+  ctrl?: boolean;
+  preventDefault?: boolean;
+  disabled?: boolean;
+}
+
+export function useKeyboardShortcut(
+  key: string,
+  callback: () => void,
+  options: ShortcutOptions = {}
+): void {
+  const { meta = false, ctrl = false, preventDefault = true, disabled = false } = options;
+
+  useEffect(() => {
+    if (disabled) return;
+
+    function handler(e: KeyboardEvent) {
+      const target = e.target as HTMLElement | null;
+      const tag = target?.tagName ?? '';
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target?.isContentEditable) {
+        return;
+      }
+      if (e.key.toLowerCase() !== key.toLowerCase()) return;
+      if (meta && !(e.metaKey || e.ctrlKey)) return;
+      if (ctrl && !e.ctrlKey) return;
+      if (!meta && !ctrl && (e.metaKey || e.ctrlKey)) return;
+
+      if (preventDefault) e.preventDefault();
+      callback();
+    }
+
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [key, callback, meta, ctrl, preventDefault, disabled]);
+}

package/servers/dashboard/ui/src/hooks/useNow.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+
+export function useNow(interval = 10_000): number {
+  const [now, setNow] = useState(Date.now());
+
+  useEffect(() => {
+    const id = window.setInterval(() => setNow(Date.now()), interval);
+    return () => window.clearInterval(id);
+  }, [interval]);
+
+  return now;
+}

package/servers/dashboard/ui/src/hooks/useReducedMotion.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+export function useReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setReduced(mq.matches);
+    const handler = (e: MediaQueryListEvent) => setReduced(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
+  return reduced;
+}

package/servers/dashboard/ui/src/hooks/useSessions.ts

@@ -0,0 +1,64 @@
+import { useCallback, useState } from 'react';
+import type { ClientSession, ClientWebSocketMessage } from '../../../src/types';
+
+export interface SessionsState {
+  sessions: Map<string, ClientSession>;
+  selectedSessionId: string | null;
+}
+
+function defaultSelected(
+  sessions: Map<string, ClientSession>,
+  activeSessionId: string | undefined,
+  current: string | null
+): string | null {
+  if (current && sessions.has(current)) return current;
+  if (activeSessionId && sessions.has(activeSessionId)) return activeSessionId;
+  const first = sessions.keys().next().value;
+  return first || null;
+}
+
+export function useSessions() {
+  const [state, setState] = useState<SessionsState>({
+    sessions: new Map(),
+    selectedSessionId: null,
+  });
+
+  const selectSession = useCallback((id: string | null) => {
+    setState((prev) => ({ ...prev, selectedSessionId: id }));
+  }, []);
+
+  const handleMessage = useCallback((msg: ClientWebSocketMessage) => {
+    setState((prev) => {
+      const sessions = new Map(prev.sessions);
+      let activeSessionId: string | undefined;
+
+      if (msg.type === 'snapshot') {
+        sessions.clear();
+        for (const s of msg.sessions) {
+          sessions.set(s.id, s);
+        }
+      } else if (msg.type === 'update') {
+        const s = msg.session;
+        sessions.set(s.id, s);
+        if (msg.isActive) activeSessionId = s.id;
+      }
+
+      return {
+        sessions,
+        selectedSessionId: defaultSelected(sessions, activeSessionId, prev.selectedSessionId),
+      };
+    });
+  }, []);
+
+  const sortedSessions = Array.from(state.sessions.values()).sort(
+    (a, b) => (b.lastActivity || 0) - (a.lastActivity || 0)
+  );
+
+  return {
+    sessions: state.sessions,
+    selectedSessionId: state.selectedSessionId,
+    selectSession,
+    handleMessage,
+    sortedSessions,
+  };
+}

package/servers/dashboard/ui/src/hooks/useTheme.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+
+type Theme = 'dark' | 'light' | 'system';
+
+function resolveTheme(theme: Theme): 'dark' | 'light' {
+  if (theme !== 'system') return theme;
+  if (window.matchMedia('(prefers-color-scheme: light)').matches) return 'light';
+  return 'dark';
+}
+
+export function useTheme() {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    const stored = localStorage.getItem('crewloop-theme') as Theme | null;
+    return stored || 'system';
+  });
+  const resolved = resolveTheme(theme);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.remove('dark', 'light');
+    root.classList.add(resolved);
+  }, [resolved]);
+
+  const setTheme = (value: Theme) => {
+    localStorage.setItem('crewloop-theme', value);
+    setThemeState(value);
+  };
+
+  return { theme, resolved, setTheme };
+}

package/servers/dashboard/ui/src/hooks/useViewport.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+export type Breakpoint = 'mobile' | 'tablet' | 'desktop';
+
+export function useViewport(): { width: number; breakpoint: Breakpoint } {
+  const [width, setWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handler = () => setWidth(window.innerWidth);
+    window.addEventListener('resize', handler);
+    return () => window.removeEventListener('resize', handler);
+  }, []);
+
+  let breakpoint: Breakpoint = 'desktop';
+  if (width < 768) breakpoint = 'mobile';
+  else if (width < 1024) breakpoint = 'tablet';
+
+  return { width, breakpoint };
+}

package/servers/dashboard/ui/src/hooks/useWebSocket.ts

@@ -0,0 +1,118 @@
+import { useEffect, useRef, useState } from 'react';
+import type { ClientWebSocketMessage } from '../../../src/types';
+
+type ConnectionStatus = 'connecting' | 'connected' | 'disconnected';
+
+export function useWebSocket(
+  url: string,
+  onMessage: (msg: ClientWebSocketMessage) => void
+): { status: ConnectionStatus; send: (data: unknown) => void } {
+  const [status, setStatus] = useState<ConnectionStatus>('connecting');
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimerRef = useRef<number | null>(null);
+  const pingTimerRef = useRef<number | null>(null);
+  const lastPongRef = useRef<number>(0);
+  const onMessageRef = useRef(onMessage);
+
+  useEffect(() => {
+    onMessageRef.current = onMessage;
+  }, [onMessage]);
+
+  useEffect(() => {
+    let active = true;
+
+    function scheduleReconnect() {
+      if (reconnectTimerRef.current) return;
+      reconnectTimerRef.current = window.setTimeout(() => {
+        reconnectTimerRef.current = null;
+        if (active) connect();
+      }, 3000);
+    }
+
+    function startPing(ws: WebSocket) {
+      stopPing();
+      lastPongRef.current = Date.now();
+      pingTimerRef.current = window.setInterval(() => {
+        if (ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: 'ping' }));
+        }
+        if (Date.now() - lastPongRef.current > 35000) {
+          ws.close();
+        }
+      }, 15000);
+    }
+
+    function stopPing() {
+      if (pingTimerRef.current) {
+        clearInterval(pingTimerRef.current);
+        pingTimerRef.current = null;
+      }
+    }
+
+    function connect() {
+      setStatus('connecting');
+      try {
+        const ws = new WebSocket(url);
+        wsRef.current = ws;
+
+        ws.addEventListener('open', () => {
+          if (!active) {
+            ws.close();
+            return;
+          }
+          setStatus('connected');
+          startPing(ws);
+        });
+
+        ws.addEventListener('message', (event) => {
+          let msg: ClientWebSocketMessage;
+          try {
+            msg = JSON.parse(event.data);
+          } catch {
+            return;
+          }
+          if ((msg as { type: string }).type === 'pong') {
+            lastPongRef.current = Date.now();
+            return;
+          }
+          onMessageRef.current(msg);
+        });
+
+        ws.addEventListener('close', () => {
+          setStatus('disconnected');
+          stopPing();
+          if (active) scheduleReconnect();
+        });
+
+        ws.addEventListener('error', () => {
+          ws.close();
+        });
+      } catch {
+        setStatus('disconnected');
+        scheduleReconnect();
+      }
+    }
+
+    connect();
+
+    return () => {
+      active = false;
+      if (reconnectTimerRef.current) {
+        clearTimeout(reconnectTimerRef.current);
+        reconnectTimerRef.current = null;
+      }
+      stopPing();
+      wsRef.current?.close();
+      wsRef.current = null;
+    };
+  }, [url]);
+
+  const send = (data: unknown) => {
+    const ws = wsRef.current;
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(data));
+    }
+  };
+
+  return { status, send };
+}

package/servers/dashboard/ui/src/lib/export.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { toExportableEvent, toJson, filename } from './export';
+import type { ToolInvocation } from '../../../src/lib/invocations';
+
+describe('export', () => {
+  it('maps an invocation to an exportable event', () => {
+    const inv: ToolInvocation = {
+      id: 'e1',
+      tool: 'Read',
+      eventType: 'tool_end',
+      status: 'success',
+      startTime: 1000,
+      skill: 'engineer',
+      detail: 'opened file',
+      input: { path: 'src/index.ts' },
+      durationMs: 50,
+    };
+    const ev = toExportableEvent(inv);
+    expect(ev.id).toBe('e1');
+    expect(ev.tool).toBe('Read');
+    expect(ev.path).toBe('src/index.ts');
+    expect(ev.durationMs).toBe(50);
+  });
+
+  it('produces valid JSON', () => {
+    const blob = toJson([{ id: 'e1', timestamp: 1, eventType: 'tool_end', status: 'success' }]);
+    expect(blob.type).toBe('application/json');
+  });
+
+  it('generates a filename with timestamp', () => {
+    expect(filename('json')).toMatch(/^crewloop-events-\d{4}-\d{2}-\d{2}-\d{6}\.json$/);
+  });
+});

package/servers/dashboard/ui/src/lib/export.ts

@@ -0,0 +1,39 @@
+import type { ToolInvocation } from '../../../src/lib/invocations';
+import { resolvePath } from '../../../src/lib/paths';
+import type { ExportableEvent } from './types';
+
+export function toExportableEvent(inv: ToolInvocation): ExportableEvent {
+  return {
+    id: inv.id,
+    timestamp: inv.startTime,
+    tool: inv.tool,
+    eventType: inv.eventType,
+    status: inv.status,
+    skill: inv.skill,
+    detail: inv.detail,
+    path: resolvePath(inv.input, inv.output),
+    durationMs: inv.durationMs,
+  };
+}
+
+export function toJson(events: ExportableEvent[]): Blob {
+  return new Blob([JSON.stringify(events, null, 2)], { type: 'application/json' });
+}
+
+export function download(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+export function filename(extension: 'json'): string {
+  const now = new Date();
+  const pad = (n: number) => n.toString().padStart(2, '0');
+  const stamp = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}-${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
+  return `crewloop-events-${stamp}.${extension}`;
+}

package/servers/dashboard/ui/src/lib/filter.test.ts

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest';
+import { buildOptions, filterInvocations, filterSessions, filterGraph } from './filter';
+import type { AgentSource, ClientSession, EventStatus } from '../../../src/types';
+import type { ToolInvocation } from '../../../src/lib/invocations';
+import type { Graph3D } from '../../../src/lib/graph';
+import { DEFAULT_FILTER_STATE } from './types';
+
+function makeSession(id: string, source: ClientSession['source'], overrides?: Partial<ClientSession>): ClientSession {
+  return {
+    id,
+    source,
+    lifecycle: 'running',
+    events: [],
+    startTime: 0,
+    lastActivity: 1000,
+    toolCounts: {},
+    ...overrides,
+  } as ClientSession;
+}
+
+function makeInv(tool: string, overrides?: Partial<ToolInvocation>): ToolInvocation {
+  return {
+    id: Math.random().toString(),
+    tool,
+    eventType: 'tool_end',
+    status: 'success',
+    startTime: 500,
+    ...overrides,
+  } as ToolInvocation;
+}
+
+describe('filter', () => {
+  it('builds options from selected session', () => {
+    const session = makeSession('s1', 'kimi', {
+      activeSkill: { name: 'engineer', confidence: 'explicit' },
+      events: [{ id: 'e1', timestamp: 0, event_type: 'tool_end', tool: 'Read' }],
+    });
+    const sessions = new Map<string, ClientSession>([['s1', session]]);
+    expect(buildOptions(sessions, 's1')).toEqual({
+      sources: ['kimi'],
+      skills: ['engineer'],
+      statuses: [],
+      tools: ['Read'],
+      opTypes: ['read'],
+    });
+  });
+
+  it('filters invocations by tool and status', () => {
+    const invs = [
+      makeInv('Read', { status: 'success' }),
+      makeInv('Edit', { status: 'error' }),
+      makeInv('Bash', { status: 'running' }),
+    ];
+    const filters = { ...DEFAULT_FILTER_STATE, tools: ['Read', 'Edit'], statuses: ['success' as EventStatus] };
+    expect(filterInvocations(invs, undefined, filters, 1000)).toHaveLength(1);
+  });
+
+  it('filters invocations by time range', () => {
+    const invs = [
+      makeInv('Read', { startTime: 64000 }),
+      makeInv('Edit', { startTime: 100 }),
+    ];
+    const filters = { ...DEFAULT_FILTER_STATE, timeRange: '1m' as const };
+    expect(filterInvocations(invs, undefined, filters, 65000)).toHaveLength(1);
+  });
+
+  it('filters sessions by source and pin order', () => {
+    const a = makeSession('a', 'kimi', { lastActivity: 2000 });
+    const b = makeSession('b', 'codex', { lastActivity: 3000 });
+    const filters = { ...DEFAULT_FILTER_STATE, sources: ['kimi', 'codex'] as AgentSource[] };
+    const result = filterSessions([a, b], filters, [{ id: 'a', pinnedAt: 0 }], 4000);
+    expect(result.map((s) => s.id)).toEqual(['a', 'b']);
+  });
+
+  it('filters graph while keeping skill root', () => {
+    const graph: Graph3D = {
+      nodes: [
+        { id: 'skill:eng', type: 'skill', label: 'engineer', weight: 1 },
+        { id: 'tool:Read', type: 'tool', label: 'Read', weight: 1 },
+        { id: 'tool:Edit', type: 'tool', label: 'Edit', weight: 1 },
+        { id: 'file:a', type: 'file', label: 'a', weight: 1 },
+      ],
+      links: [
+        { source: 'skill:eng', target: 'tool:Read', weight: 1 },
+        { source: 'skill:eng', target: 'tool:Edit', weight: 1 },
+        { source: 'tool:Read', target: 'file:a', weight: 1 },
+      ],
+    };
+    const invs = [makeInv('Read'), makeInv('Edit')];
+    const filters = { ...DEFAULT_FILTER_STATE, tools: ['Read'] };
+    const result = filterGraph(graph, invs, filters);
+    expect(result.nodes.map((n) => n.id).sort()).toEqual(['file:a', 'skill:eng', 'tool:Read']);
+    expect(result.links).toHaveLength(2);
+  });
+});