@archznn/crewloop-skills 0.6.0 → 0.7.0

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

@@ -0,0 +1,178 @@
+import type { AgentSource, ClientSession, EventStatus } from '../../../src/types';
+import type { ToolInvocation } from '../../../src/lib/invocations';
+import type { Graph3D, GraphNode, GraphLink } from '../../../src/lib/graph';
+import { operationType } from '../../../src/lib/invocations';
+import type { FilterOptions, FilterState, PinnedSession, TimeRange } from './types';
+import { matchesInvocation } from './search';
+
+function linkEndpointId(endpoint: string | { id?: unknown } | number): string {
+  if (typeof endpoint === 'string') return endpoint;
+  if (endpoint && typeof endpoint === 'object' && 'id' in endpoint) return String(endpoint.id);
+  return String(endpoint);
+}
+
+function timeRangeToMs(range: TimeRange): number | null {
+  switch (range) {
+    case '1m':
+      return 60_000;
+    case '5m':
+      return 5 * 60_000;
+    case '15m':
+      return 15 * 60_000;
+    case '1h':
+      return 60 * 60_000;
+    case '24h':
+      return 24 * 60 * 60_000;
+    default:
+      return null;
+  }
+}
+
+function isWithinTimeRange(timestamp: number, range: TimeRange, now: number, session?: ClientSession): boolean {
+  if (range === 'all') return true;
+  if (range === 'session') {
+    if (!session) return true;
+    const start = session.startTime;
+    const end = session.endedAt || now;
+    return timestamp >= start && timestamp <= end;
+  }
+  const ms = timeRangeToMs(range);
+  if (ms == null) return true;
+  return timestamp >= now - ms;
+}
+
+function uniqueSorted<T extends string>(values: T[]): T[] {
+  return Array.from(new Set(values)).sort((a, b) => a.localeCompare(b));
+}
+
+export function buildOptions(
+  sessions: Map<string, ClientSession>,
+  selectedSessionId: string | null
+): FilterOptions {
+  const selected = selectedSessionId ? sessions.get(selectedSessionId) : undefined;
+  const relevant = selected ? [selected] : Array.from(sessions.values());
+
+  const sources = uniqueSorted<AgentSource>(relevant.map((s) => s.source));
+  const skills = uniqueSorted<string>(
+    relevant
+      .flatMap((s) => [s.activeSkill?.name, s.skill].filter(Boolean) as string[])
+  );
+  const statuses = uniqueSorted<EventStatus>(
+    relevant.map((s) => s.status).filter(Boolean) as EventStatus[]
+  );
+  const tools = uniqueSorted<string>(
+    relevant
+      .flatMap((s) => s.events)
+      .filter((e) => e.tool)
+      .map((e) => e.tool as string)
+  );
+  const opTypes = uniqueSorted<('read' | 'edit' | 'other')>(
+    tools.map((t) => operationType(t))
+  );
+
+  return { sources, skills, statuses, tools, opTypes };
+}
+
+export function filterInvocations(
+  invocations: ToolInvocation[],
+  session: ClientSession | undefined,
+  filters: FilterState,
+  now: number
+): ToolInvocation[] {
+  return invocations.filter((inv) => {
+    if (filters.query && !matchesInvocation(inv, filters.query)) return false;
+    if (filters.statuses.length > 0 && !filters.statuses.includes(inv.status as EventStatus)) return false;
+    if (filters.skills.length > 0 && !filters.skills.includes(inv.skill || '')) return false;
+    if (filters.tools.length > 0 && !filters.tools.includes(inv.tool)) return false;
+    if (filters.opTypes.length > 0 && !filters.opTypes.includes(operationType(inv.tool))) return false;
+    if (!isWithinTimeRange(inv.startTime, filters.timeRange, now, session)) return false;
+    return true;
+  });
+}
+
+export function filterSessions(
+  sessions: ClientSession[],
+  filters: FilterState,
+  pins: PinnedSession[],
+  now: number
+): ClientSession[] {
+  const pinOrder = new Map(pins.map((p, i) => [p.id, i]));
+
+  const filtered = sessions.filter((s) => {
+    if (filters.sources.length > 0 && !filters.sources.includes(s.source)) return false;
+    if (filters.skills.length > 0) {
+      const skill = s.activeSkill?.name || s.skill;
+      if (!skill || !filters.skills.includes(skill)) return false;
+    }
+    if (filters.statuses.length > 0 && !filters.statuses.includes(s.status || 'running')) return false;
+    if (!isWithinTimeRange(s.lastActivity, filters.timeRange, now, s)) return false;
+    return true;
+  });
+
+  return filtered.sort((a, b) => {
+    const aPin = pinOrder.has(a.id);
+    const bPin = pinOrder.has(b.id);
+    if (aPin && !bPin) return -1;
+    if (!aPin && bPin) return 1;
+    if (aPin && bPin) {
+      return (pinOrder.get(a.id) ?? 0) - (pinOrder.get(b.id) ?? 0);
+    }
+    return (b.lastActivity || 0) - (a.lastActivity || 0);
+  });
+}
+
+export function filterGraph(
+  graph: Graph3D,
+  invocations: ToolInvocation[],
+  filters: FilterState
+): Graph3D {
+  const query = filters.query.trim().toLowerCase();
+  const toolSet = new Set(filters.tools);
+  const opSet = new Set(filters.opTypes);
+
+  const matchedTools = new Set<string>();
+  for (const inv of invocations) {
+    const keepTool =
+      (toolSet.size === 0 || toolSet.has(inv.tool)) &&
+      (opSet.size === 0 || opSet.has(operationType(inv.tool)));
+    if (keepTool) matchedTools.add(`tool:${inv.tool}`);
+  }
+
+  const skillNodes = graph.nodes.filter((n) => n.type === 'skill');
+
+  const keptNodes = new Map<string, GraphNode>();
+  for (const n of skillNodes) keptNodes.set(n.id, n);
+
+  const keptLinks: GraphLink[] = [];
+
+  for (const n of graph.nodes) {
+    if (n.type === 'tool') {
+      const matchesTool = matchedTools.has(n.id);
+      const matchesQuery = query ? n.label.toLowerCase().includes(query) : true;
+      if (matchesTool && matchesQuery) keptNodes.set(n.id, n);
+    }
+  }
+
+  for (const n of graph.nodes) {
+    if (n.type === 'file') {
+      const matchesQuery = query ? n.label.toLowerCase().includes(query) : true;
+      if (!matchesQuery) continue;
+      const hasToolLink = graph.links.some((l) => {
+        const sourceId = linkEndpointId(l.source);
+        const targetId = linkEndpointId(l.target);
+        return keptNodes.has(sourceId) && targetId === n.id;
+      });
+      if (hasToolLink) keptNodes.set(n.id, n);
+    }
+  }
+
+  for (const l of graph.links) {
+    const sourceId = linkEndpointId(l.source);
+    const targetId = linkEndpointId(l.target);
+    if (keptNodes.has(sourceId) && keptNodes.has(targetId)) {
+      keptLinks.push(l);
+    }
+  }
+
+  return { nodes: Array.from(keptNodes.values()), links: keptLinks };
+}

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

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { formatDuration, formatTime, truncate, escapeHtml } from '../../../src/lib/format';
+
+describe('format', () => {
+  it('formats duration', () => {
+    expect(formatDuration(0)).toBe('00:00');
+    expect(formatDuration(61000)).toBe('01:01');
+    expect(formatDuration(3661000)).toBe('1:01:01');
+    expect(formatDuration(undefined)).toBe('00:00');
+  });
+
+  it('formats time', () => {
+    const ts = new Date('2026-06-26T14:30:45').getTime();
+    expect(formatTime(ts)).toBe('14:30:45');
+  });
+
+  it('truncates strings', () => {
+    expect(truncate('hello', 10)).toBe('hello');
+    expect(truncate('hello world', 6)).toBe('hello…');
+  });
+
+  it('escapes html', () => {
+    expect(escapeHtml('<div>"x"</div>')).toBe('&lt;div&gt;&quot;x&quot;&lt;/div&gt;');
+  });
+});

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

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest';
+import { score, search, matchesInvocation } from './search';
+import type { CommandPaletteItem, ToolInvocation } from './types';
+
+function item(title: string, subtitle?: string, keywords?: string[]): CommandPaletteItem {
+  return { id: title, type: 'view', title, subtitle, keywords, action: () => {} };
+}
+
+describe('search', () => {
+  it('scores zero when no tokens match', () => {
+    expect(score(item('Timeline'), 'files')).toBe(0);
+  });
+
+  it('scores positive when all tokens match', () => {
+    expect(score(item('Session Overview', 'list all sessions'), 'session list')).toBe(2);
+  });
+
+  it('returns ranked results', () => {
+    const items = [item('Files'), item('Sessions'), item('Settings')];
+    expect(search(items, 'ses').map((i) => i.title)).toEqual(['Sessions']);
+  });
+
+  it('matches invocations by tool, detail, skill, and output', () => {
+    const inv: ToolInvocation = {
+      id: '1',
+      tool: 'Read',
+      eventType: 'tool_end',
+      status: 'success',
+      startTime: 0,
+      skill: 'engineer',
+      detail: 'opened readme',
+      output: { contentSnippet: 'hello world' },
+    };
+    expect(matchesInvocation(inv, 'Read')).toBe(true);
+    expect(matchesInvocation(inv, 'engineer')).toBe(true);
+    expect(matchesInvocation(inv, 'hello')).toBe(true);
+    expect(matchesInvocation(inv, 'missing')).toBe(false);
+  });
+
+  it('requires every token to match', () => {
+    const inv: ToolInvocation = {
+      id: '1',
+      tool: 'Edit',
+      eventType: 'tool_end',
+      status: 'success',
+      startTime: 0,
+      detail: 'updated config',
+    };
+    expect(matchesInvocation(inv, 'edit config')).toBe(true);
+    expect(matchesInvocation(inv, 'edit missing')).toBe(false);
+  });
+});

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

@@ -0,0 +1,60 @@
+import type { CommandPaletteItem, ToolInvocation } from './types';
+
+function normalize(str: string): string {
+  return str
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '');
+}
+
+function tokens(query: string): string[] {
+  return normalize(query)
+    .split(/\s+/)
+    .filter(Boolean);
+}
+
+function haystack(item: CommandPaletteItem): string {
+  const parts = [item.title, item.subtitle, ...(item.keywords || [])];
+  return normalize(parts.join(' '));
+}
+
+export function score(item: CommandPaletteItem, query: string): number {
+  const tks = tokens(query);
+  if (tks.length === 0) return 1;
+  const hay = haystack(item);
+  let total = 0;
+  for (const t of tks) {
+    if (hay.includes(t)) total += 1;
+  }
+  return total === tks.length ? total : 0;
+}
+
+export function search(items: CommandPaletteItem[], query: string): CommandPaletteItem[] {
+  const q = query.trim();
+  if (!q) return items.slice(0, 50);
+  const scored = items
+    .map((item) => ({ item, value: score(item, q) }))
+    .filter((s) => s.value > 0)
+    .sort((a, b) => b.value - a.value);
+  return scored.slice(0, 50).map((s) => s.item);
+}
+
+function invocationText(inv: ToolInvocation): string {
+  const parts = [
+    inv.tool,
+    inv.detail,
+    inv.skill,
+    inv.eventType,
+    inv.status,
+    inv.input ? JSON.stringify(inv.input) : '',
+    inv.output ? JSON.stringify(inv.output) : '',
+  ];
+  return normalize(parts.join(' '));
+}
+
+export function matchesInvocation(inv: ToolInvocation, query: string): boolean {
+  const tks = tokens(query);
+  if (tks.length === 0) return true;
+  const hay = invocationText(inv);
+  return tks.every((t) => hay.includes(t));
+}

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

@@ -0,0 +1,50 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { loadSettings, saveSettings, migrate } from './settings';
+import { DEFAULT_SETTINGS } from './types';
+
+const store: Record<string, string> = {};
+
+beforeEach(() => {
+  Object.keys(store).forEach((k) => delete store[k]);
+  globalThis.localStorage = {
+    getItem: (key: string) => store[key] ?? null,
+    setItem: (key: string, value: string) => {
+      store[key] = value;
+    },
+    removeItem: (key: string) => {
+      delete store[key];
+    },
+    clear: () => {
+      Object.keys(store).forEach((k) => delete store[k]);
+    },
+    key: (index: number) => Object.keys(store)[index] ?? null,
+    length: 0,
+  } as Storage;
+});
+
+describe('settings', () => {
+  it('loads defaults when storage is empty', () => {
+    expect(loadSettings()).toEqual(DEFAULT_SETTINGS);
+  });
+
+  it('migrates partial settings with defaults', () => {
+    expect(migrate({ theme: 'dark' })).toEqual({ ...DEFAULT_SETTINGS, theme: 'dark' });
+  });
+
+  it('ignores invalid values during migration', () => {
+    expect(
+      migrate({ theme: 'purple', density: 'compact', reducedMotion: 'yes', maxEvents: -5 })
+    ).toEqual({ ...DEFAULT_SETTINGS, density: 'compact' });
+  });
+
+  it('saves and reloads settings', () => {
+    const next = { ...DEFAULT_SETTINGS, theme: 'light' as const, density: 'compact' as const };
+    saveSettings(next);
+    expect(loadSettings()).toEqual(next);
+  });
+
+  it('falls back to legacy crewloop-theme key', () => {
+    globalThis.localStorage.setItem('crewloop-theme', 'dark');
+    expect(loadSettings()).toEqual({ ...DEFAULT_SETTINGS, theme: 'dark' });
+  });
+});

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

@@ -0,0 +1,56 @@
+import type { DashboardSettings, Theme, Density } from './types';
+import { DEFAULT_SETTINGS } from './types';
+
+const STORAGE_KEY = 'crewloop-dashboard-settings';
+const LEGACY_THEME_KEY = 'crewloop-theme';
+
+function isTheme(value: unknown): value is Theme {
+  return value === 'dark' || value === 'light' || value === 'system';
+}
+
+function isDensity(value: unknown): value is Density {
+  return value === 'compact' || value === 'comfortable';
+}
+
+function isBoolean(value: unknown): value is boolean {
+  return typeof value === 'boolean';
+}
+
+function isPositiveInteger(value: unknown): value is number {
+  return typeof value === 'number' && Number.isFinite(value) && value > 0 && Number.isInteger(value);
+}
+
+export function migrate(partial: unknown): DashboardSettings {
+  const next = { ...DEFAULT_SETTINGS };
+  if (partial && typeof partial === 'object') {
+    const p = partial as Record<string, unknown>;
+    if (isTheme(p.theme)) next.theme = p.theme;
+    if (isDensity(p.density)) next.density = p.density;
+    if (isBoolean(p.reducedMotion)) next.reducedMotion = p.reducedMotion;
+    if (isBoolean(p.autoFollowActive)) next.autoFollowActive = p.autoFollowActive;
+    if (isPositiveInteger(p.maxEvents)) next.maxEvents = p.maxEvents;
+  }
+  return next;
+}
+
+export function loadSettings(): DashboardSettings {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) return migrate(JSON.parse(raw));
+    const legacy = localStorage.getItem(LEGACY_THEME_KEY) as Theme | null;
+    if (legacy && isTheme(legacy)) {
+      return { ...DEFAULT_SETTINGS, theme: legacy };
+    }
+  } catch {
+    // Ignore corrupted storage.
+  }
+  return { ...DEFAULT_SETTINGS };
+}
+
+export function saveSettings(settings: DashboardSettings): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+  } catch {
+    // Ignore private-mode or quota errors.
+  }
+}

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

@@ -0,0 +1,124 @@
+import type { AgentSource, ClientSession, EventStatus } from '../../../src/types';
+import type { Graph3D } from '../../../src/lib/graph';
+import type { ToolInvocation } from '../../../src/lib/invocations';
+
+export type { ToolInvocation };
+
+export type View =
+  | 'overview'
+  | 'sessions'
+  | 'timeline'
+  | 'network'
+  | 'files'
+  | 'skills'
+  | 'settings';
+
+export type Theme = 'dark' | 'light' | 'system';
+export type Density = 'compact' | 'comfortable';
+
+export type TimeRange =
+  | 'all'
+  | '1m'
+  | '5m'
+  | '15m'
+  | '1h'
+  | '24h'
+  | 'session';
+
+export interface FilterState {
+  query: string;
+  sources: AgentSource[];
+  skills: string[];
+  statuses: EventStatus[];
+  tools: string[];
+  opTypes: ('read' | 'edit' | 'other')[];
+  timeRange: TimeRange;
+}
+
+export const DEFAULT_FILTER_STATE: FilterState = {
+  query: '',
+  sources: [],
+  skills: [],
+  statuses: [],
+  tools: [],
+  opTypes: [],
+  timeRange: 'all',
+};
+
+export interface DashboardSettings {
+  theme: Theme;
+  density: Density;
+  reducedMotion: boolean;
+  autoFollowActive: boolean;
+  maxEvents: number;
+}
+
+export const DEFAULT_SETTINGS: DashboardSettings = {
+  theme: 'system',
+  density: 'comfortable',
+  reducedMotion: false,
+  autoFollowActive: true,
+  maxEvents: 100,
+};
+
+export interface PinnedSession {
+  id: string;
+  pinnedAt: number;
+}
+
+export interface CommandPaletteItem {
+  id: string;
+  type: 'view' | 'session' | 'skill' | 'tool' | 'file' | 'event' | 'action';
+  title: string;
+  subtitle?: string;
+  icon?: string;
+  keywords?: string[];
+  action(): void;
+}
+
+export interface ExportableEvent {
+  id: string;
+  timestamp: number;
+  tool?: string;
+  eventType: string;
+  status: string;
+  skill?: string;
+  detail?: string;
+  path?: string;
+  durationMs?: number;
+}
+
+export interface FilterOptions {
+  sources: AgentSource[];
+  skills: string[];
+  statuses: EventStatus[];
+  tools: string[];
+  opTypes: ('read' | 'edit' | 'other')[];
+}
+
+export interface FilterEngine {
+  buildOptions(
+    sessions: Map<string, ClientSession>,
+    selectedSessionId: string | null
+  ): FilterOptions;
+
+  filterInvocations(
+    invocations: ToolInvocation[],
+    session: ClientSession | undefined,
+    filters: FilterState,
+    now: number
+  ): ToolInvocation[];
+
+  filterSessions(
+    sessions: ClientSession[],
+    filters: FilterState,
+    pins: PinnedSession[],
+    now: number
+  ): ClientSession[];
+
+  filterGraph(
+    graph: Graph3D,
+    invocations: ToolInvocation[],
+    filters: FilterState
+  ): Graph3D;
+}

package/servers/dashboard/ui/src/main.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { SettingsProvider } from './contexts/SettingsContext';
+import { PinnedSessionsProvider } from './contexts/PinnedSessionsContext';
+import { FilterProvider } from './contexts/FilterContext';
+import './styles/index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <SettingsProvider>
+      <PinnedSessionsProvider>
+        <FilterProvider>
+          <App />
+        </FilterProvider>
+      </PinnedSessionsProvider>
+    </SettingsProvider>
+  </React.StrictMode>
+);