@archznn/crewloop-skills 0.5.0 → 0.7.0

package/servers/dashboard/ui/src/components/Sidebar.tsx

@@ -0,0 +1,110 @@
+import type { View } from '../lib/types';
+import { useSettings } from '../contexts/SettingsContext';
+import { useViewport } from '../hooks/useViewport';
+import { Icon } from './ui/Icon';
+
+interface NavItem {
+  key: View;
+  label: string;
+  icon: string;
+}
+
+const ITEMS: NavItem[] = [
+  { key: 'overview', label: 'Overview', icon: 'House' },
+  { key: 'sessions', label: 'Sessions', icon: 'Rows' },
+  { key: 'timeline', label: 'Timeline', icon: 'Clock' },
+  { key: 'network', label: 'Network', icon: 'Graph' },
+  { key: 'files', label: 'Files', icon: 'Files' },
+  { key: 'skills', label: 'Skills', icon: 'ChartPie' },
+];
+
+const SETTINGS_ITEM: NavItem = { key: 'settings', label: 'Settings', icon: 'Gear' };
+
+interface Props {
+  activeView: View;
+  onChange: (view: View) => void;
+  mobileOpen: boolean;
+  onClose: () => void;
+}
+
+export function Sidebar({ activeView, onChange, mobileOpen, onClose }: Props) {
+  const { breakpoint } = useViewport();
+  const { reducedMotion } = useSettings();
+  const isMobile = breakpoint === 'mobile';
+  const isTablet = breakpoint === 'tablet';
+
+  function handleSelect(view: View) {
+    onChange(view);
+    if (isMobile) onClose();
+  }
+
+  function renderItem(item: NavItem) {
+    const active = activeView === item.key;
+    return (
+      <button
+        key={item.key}
+        onClick={() => handleSelect(item.key)}
+        aria-current={active ? 'page' : undefined}
+        className={`sidebar-item group relative flex items-center gap-3 w-full rounded-lg transition-colors text-left ${
+          isTablet ? 'justify-center h-11' : 'h-10 px-3'
+        } ${
+          active
+            ? 'bg-elevated text-text-primary'
+            : 'text-text-secondary hover:bg-elevated hover:text-text-primary'
+        }`}
+      >
+        {active && !reducedMotion && (
+          <span className="absolute left-0 top-1.5 bottom-1.5 w-[3px] rounded-r bg-accent" />
+        )}
+        {active && reducedMotion && (
+          <span className="absolute left-0 top-1.5 bottom-1.5 w-[3px] rounded-r bg-accent" />
+        )}
+        <Icon name={item.icon} className="w-5 h-5 flex-shrink-0" />
+        {!isTablet && <span className="text-sm font-medium">{item.label}</span>}
+      </button>
+    );
+  }
+
+  const content = (
+    <nav aria-label="Main" className="flex flex-col h-full py-4 px-3 gap-2">
+      <div className="flex flex-col gap-1">
+        {ITEMS.map(renderItem)}
+      </div>
+      <div className="flex-1" />
+      <div className="border-t border-border-default pt-2">
+        {renderItem(SETTINGS_ITEM)}
+      </div>
+    </nav>
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        {mobileOpen && (
+          <div
+            className="fixed inset-0 bg-black/60 z-40"
+            onClick={onClose}
+            aria-hidden="true"
+          />
+        )}
+        <aside
+          className={`fixed top-14 left-0 bottom-0 w-60 bg-surface border-r border-border-default z-40 transform transition-transform ${
+            mobileOpen ? 'translate-x-0' : '-translate-x-full'
+          }`}
+        >
+          {content}
+        </aside>
+      </>
+    );
+  }
+
+  return (
+    <aside
+      className={`flex-shrink-0 h-[calc(100vh-3.5rem)] bg-surface border-r border-border-default sticky top-14 ${
+        isTablet ? 'w-16' : 'w-60'
+      }`}
+    >
+      {content}
+    </aside>
+  );
+}

package/servers/dashboard/ui/src/components/TelemetryPanel.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { ClientSession } from '../../../src/types';
+import { formatDuration } from '../../../src/lib/format';
+
+interface Props {
+  session: ClientSession | undefined;
+}
+
+export function TelemetryPanel({ session }: Props) {
+  const [now, setNow] = useState(Date.now());
+
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  const toolEvents = useMemo(
+    () => (session?.events || []).filter((e) => e.event_type === 'tool_start' || e.event_type === 'tool_end'),
+    [session]
+  );
+
+  const eventRate = useMemo(() => {
+    const windowStart = now - 60000;
+    return (session?.events || []).filter((e) => e.timestamp > windowStart).length;
+  }, [session, now]);
+
+  const duration = useMemo(() => {
+    if (!session) return 0;
+    const end = session.endedAt || session.lastActivity || now;
+    return end - session.startTime;
+  }, [session, now]);
+
+  const cards = [
+    { label: 'Tools', value: Math.ceil(toolEvents.length / 2) },
+    { label: 'Duration', value: formatDuration(duration) },
+    { label: 'Rate/m', value: eventRate },
+  ];
+
+  return (
+    <section className="panel p-5">
+      <h2 className="text-xs font-medium text-text-muted uppercase tracking-widest pb-4 border-b border-border-default">
+        Telemetry
+      </h2>
+      <div className="pt-4 flex flex-col gap-4">
+        {cards.map((c) => (
+          <div
+            key={c.label}
+            className="flex flex-col gap-1 p-3 bg-inset border border-border-default rounded"
+          >
+            <span className="text-2xl font-medium tabular text-accent">{c.value}</span>
+            <span className="text-xs text-text-muted uppercase tracking-widest">{c.label}</span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/servers/dashboard/ui/src/components/Timeline.tsx

@@ -0,0 +1,57 @@
+import type { ToolInvocation } from '../../../src/lib/invocations';
+import { TimelineRow } from './TimelineRow';
+
+interface Props {
+  invocations: ToolInvocation[];
+  expandedIds: Set<string>;
+  onToggle: (id: string) => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+}
+
+export function Timeline({ invocations, expandedIds, onToggle, onMouseEnter, onMouseLeave }: Props) {
+  async function handleCopy(inv: ToolInvocation) {
+    const text = JSON.stringify(
+      {
+        id: inv.id,
+        tool: inv.tool,
+        status: inv.status,
+        startTime: inv.startTime,
+        durationMs: inv.durationMs,
+        skill: inv.skill,
+        detail: inv.detail,
+      },
+      null,
+      2
+    );
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      // Ignore clipboard errors.
+    }
+  }
+
+  return (
+    <div
+      className="flex-1 overflow-y-auto px-5 py-3"
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      {invocations.length === 0 ? (
+        <p className="text-center py-8 text-text-muted text-sm">No events match the filters.</p>
+      ) : (
+        <ul className="relative list-none m-0 p-0 before:content-[''] before:absolute before:top-3 before:bottom-3 before:left-[32px] before:w-px before:bg-border-default">
+          {invocations.map((inv) => (
+            <TimelineRow
+              key={inv.id}
+              inv={inv}
+              expanded={expandedIds.has(inv.id)}
+              onToggle={() => onToggle(inv.id)}
+              onCopy={() => handleCopy(inv)}
+            />
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

package/servers/dashboard/ui/src/components/TimelineRow.tsx

@@ -0,0 +1,112 @@
+import { useMemo, useState } from 'react';
+import type { ToolInvocation } from '../../../src/lib/invocations';
+import { formatDuration, formatTime, escapeHtml, prettyJson } from '../../../src/lib/format';
+import { Icon } from './ui/Icon';
+
+interface Props {
+  inv: ToolInvocation;
+  expanded: boolean;
+  onToggle: () => void;
+  onCopy: () => void;
+}
+
+function statusClasses(status: string): { row: string; dot: string; icon: string } {
+  switch (status) {
+    case 'running':
+      return {
+        row: 'bg-running/10 border-l-running',
+        dot: 'bg-running animate-pulse',
+        icon: 'Spinner',
+      };
+    case 'success':
+      return {
+        row: 'bg-success/5 border-l-success',
+        dot: 'bg-success',
+        icon: 'Check',
+      };
+    case 'error':
+      return {
+        row: 'bg-error/5 border-l-error',
+        dot: 'bg-error',
+        icon: 'X',
+      };
+    default:
+      return {
+        row: 'border-l-transparent opacity-90',
+        dot: 'bg-text-muted',
+        icon: '',
+      };
+  }
+}
+
+function Payload({ label, payload }: { label: string; payload?: Record<string, unknown> }) {
+  if (!payload || Object.keys(payload).length === 0) return null;
+  return (
+    <div className="flex flex-col gap-1.5">
+      <span className="text-[11px] font-semibold text-text-muted uppercase tracking-widest">{label}</span>
+      <pre className="p-2.5 bg-base border border-border-default rounded text-xs text-text-secondary whitespace-pre-wrap break-words max-h-52 overflow-auto">
+        <code dangerouslySetInnerHTML={{ __html: escapeHtml(prettyJson(payload)) }} />
+      </pre>
+    </div>
+  );
+}
+
+export function TimelineRow({ inv, expanded, onToggle, onCopy }: Props) {
+  const status = statusClasses(inv.status);
+  const [copied, setCopied] = useState(false);
+  const hasDetails = useMemo(
+    () => (inv.input && Object.keys(inv.input).length > 0) || (inv.output && Object.keys(inv.output).length > 0),
+    [inv.input, inv.output]
+  );
+
+  async function handleCopy(e: React.MouseEvent) {
+    e.stopPropagation();
+    await onCopy();
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1200);
+  }
+
+  return (
+    <li
+      onClick={onToggle}
+      className={`timeline-row grid grid-cols-[56px_16px_1fr_auto] items-start gap-3 py-2 px-2.5 -mx-2.5 rounded cursor-pointer border-l-2 hover:bg-elevated transition-colors ${status.row}`}
+      role="listitem"
+    >
+      <span className="text-xs text-text-muted text-right pt-0.5 tabular">{formatTime(inv.startTime)}</span>
+      <span className={`w-2 h-2 rounded-full justify-self-center mt-1.5 z-10 ${status.dot}`} />
+      <div className="flex items-baseline gap-2.5 min-w-0 flex-wrap">
+        <span className="font-mono text-sm font-semibold text-text-primary flex-shrink-0">{inv.tool}</span>
+        <span className="text-sm text-text-secondary truncate min-w-0">
+          {inv.detail || inv.skill || ''}
+        </span>
+        {inv.durationMs ? (
+          <span className="text-[11px] text-text-muted bg-inset px-1.5 py-0.5 rounded ml-auto tabular">
+            {formatDuration(inv.durationMs)}
+          </span>
+        ) : null}
+      </div>
+      <div className="flex items-center gap-1 text-text-muted mt-0.5">
+        {status.icon ? <Icon name={status.icon} className={`w-4 h-4 ${status.icon === 'Spinner' ? 'animate-spin' : ''}`} /> : null}
+        <button
+          onClick={handleCopy}
+          aria-label="Copy event"
+          className="p-1 rounded hover:bg-base hover:text-accent transition-colors"
+        >
+          <Icon name={copied ? 'Check' : 'Copy'} className="w-3.5 h-3.5" />
+        </button>
+      </div>
+      {expanded && (
+        <div className="col-span-3 col-start-2 mt-2 p-3 bg-inset border border-border-default rounded flex flex-col gap-3">
+          {hasDetails ? (
+            <>
+              <Payload label="Input" payload={inv.input} />
+              <Payload label="Output" payload={inv.output} />
+            </>
+          ) : (
+            <p className="text-sm text-text-muted">No details available.</p>
+          )}
+        </div>
+      )}
+    </li>
+  );
+}

package/servers/dashboard/ui/src/components/TopBar.tsx

@@ -0,0 +1,116 @@
+import type { ClientSession } from '../../../src/types';
+import type { View } from '../lib/types';
+import { useSettings } from '../contexts/SettingsContext';
+import { SessionSelector } from './SessionSelector';
+import { Icon } from './ui/Icon';
+
+interface Props {
+  activeView: View;
+  sessions: ClientSession[];
+  selectedSessionId: string | null;
+  activeSessionId: string | undefined;
+  connection: 'connecting' | 'connected' | 'disconnected';
+  onSelectSession: (id: string) => void;
+  onOpenCommandPalette: () => void;
+  onToggleSidebar: () => void;
+}
+
+const VIEW_TITLES: Record<View, string> = {
+  overview: 'Overview',
+  sessions: 'Sessions',
+  timeline: 'Timeline',
+  network: 'Network',
+  files: 'Files',
+  skills: 'Skills',
+  settings: 'Settings',
+};
+
+function commandHint(): string {
+  if (typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform)) {
+    return '⌘K';
+  }
+  return 'Ctrl+K';
+}
+
+export function TopBar({
+  activeView,
+  sessions,
+  selectedSessionId,
+  activeSessionId,
+  connection,
+  onSelectSession,
+  onOpenCommandPalette,
+  onToggleSidebar,
+}: Props) {
+  const { resolvedTheme, setSettings } = useSettings();
+
+  return (
+    <header className="h-14 bg-surface border-b border-border-default flex items-center justify-between px-4 flex-shrink-0 z-50">
+      <div className="flex items-center gap-3">
+        <button
+          onClick={onToggleSidebar}
+          aria-label="Toggle sidebar"
+          className="lg:hidden w-9 h-9 rounded-lg border border-border-default bg-elevated text-text-secondary hover:border-accent hover:text-accent transition-colors flex items-center justify-center"
+        >
+          <Icon name="List" className="w-5 h-5" />
+        </button>
+        <div className="flex items-baseline gap-2">
+          <span className="font-display text-2xl tracking-widest text-text-primary">CREWLOOP</span>
+          <span className="text-text-muted hidden sm:inline">·</span>
+          <span className="text-xs text-text-muted tracking-widest uppercase hidden sm:inline">
+            {VIEW_TITLES[activeView]}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button
+          onClick={onOpenCommandPalette}
+          className="hidden md:flex items-center gap-2 px-3 py-1.5 rounded-lg border border-border-default bg-elevated text-text-secondary hover:border-accent hover:text-accent transition-colors text-xs"
+        >
+          <Icon name="MagnifyingGlass" className="w-4 h-4" />
+          <span>Search</span>
+          <kbd className="ml-2 px-1.5 py-0.5 rounded bg-base border border-border-default text-[10px] font-mono">
+            {commandHint()}
+          </kbd>
+        </button>
+        <button
+          onClick={onOpenCommandPalette}
+          aria-label="Search"
+          className="md:hidden w-9 h-9 rounded-lg border border-border-default bg-elevated text-text-secondary hover:border-accent hover:text-accent transition-colors flex items-center justify-center"
+        >
+          <Icon name="MagnifyingGlass" className="w-5 h-5" />
+        </button>
+
+        <div className="hidden sm:flex items-center gap-1.5 px-2 py-1 rounded-lg border border-border-default bg-elevated text-xs text-text-secondary">
+          <span
+            className={`w-2 h-2 rounded-full ${
+              connection === 'connected'
+                ? 'bg-success'
+                : connection === 'connecting'
+                ? 'bg-warning'
+                : 'bg-error'
+            }`}
+          />
+          <span className="capitalize">{connection}</span>
+        </div>
+
+        <button
+          onClick={() => setSettings((s) => ({ ...s, theme: resolvedTheme === 'dark' ? 'light' : 'dark' }))}
+          aria-label="Toggle theme"
+          className="w-9 h-9 rounded-lg border border-border-default bg-elevated text-text-secondary hover:border-accent hover:text-accent transition-colors flex items-center justify-center"
+        >
+          <Icon name={resolvedTheme === 'light' ? 'Sun' : 'Moon'} className="w-5 h-5" />
+        </button>
+
+        <SessionSelector
+          sessions={sessions}
+          selectedSessionId={selectedSessionId}
+          activeSessionId={activeSessionId}
+          connection={connection}
+          onSelect={onSelectSession}
+        />
+      </div>
+    </header>
+  );
+}

package/servers/dashboard/ui/src/components/ViewHeader.tsx

@@ -0,0 +1,19 @@
+import { Icon } from './ui/Icon';
+
+interface Props {
+  title: string;
+  icon?: string;
+  children?: React.ReactNode;
+}
+
+export function ViewHeader({ title, icon, children }: Props) {
+  return (
+    <div className="flex items-center justify-between px-5 py-4 border-b border-border-default flex-shrink-0">
+      <div className="flex items-center gap-2">
+        {icon && <Icon name={icon} className="w-5 h-5 text-accent" />}
+        <h1 className="font-display text-3xl tracking-wide text-text-primary uppercase">{title}</h1>
+      </div>
+      {children && <div className="flex items-center gap-2">{children}</div>}
+    </div>
+  );
+}

package/servers/dashboard/ui/src/components/ui/Icon.tsx

@@ -0,0 +1,105 @@
+import type { IconProps } from '@phosphor-icons/react';
+import {
+  Target,
+  Blueprint,
+  Palette,
+  Wrench,
+  MagnifyingGlass,
+  RocketLaunch,
+  Article,
+  Flask,
+  ChartBar,
+  Toolbox,
+  Microscope,
+  Shield,
+  Person,
+  Brain,
+  TreeStructure,
+  Circle,
+  ChatTeardropText,
+  Terminal,
+  Planet,
+  CodeBlock,
+  FileText,
+  Monitor,
+  Moon,
+  Sun,
+  CaretDown,
+  MonitorPlay,
+  Check,
+  X,
+  Spinner,
+  House,
+  Rows,
+  Clock,
+  Graph,
+  Files,
+  ChartPie,
+  Gear,
+  ArrowsInLineVertical,
+  ArrowsOutLineVertical,
+  PushPin,
+  PushPinSlash,
+  DownloadSimple,
+  Copy,
+  XCircle,
+  Faders,
+  List,
+} from '@phosphor-icons/react';
+
+const ICON_MAP: Record<string, React.ComponentType<IconProps>> = {
+  Target,
+  Blueprint,
+  Palette,
+  Wrench,
+  MagnifyingGlass,
+  RocketLaunch,
+  Article,
+  Flask,
+  ChartBar,
+  Toolbox,
+  Microscope,
+  Shield,
+  Person,
+  Brain,
+  TreeStructure,
+  Circle,
+  ChatTeardropText,
+  Terminal,
+  Planet,
+  CodeBlock,
+  FileText,
+  Monitor,
+  Moon,
+  Sun,
+  CaretDown,
+  MonitorPlay,
+  Check,
+  X,
+  Spinner,
+  House,
+  Rows,
+  Clock,
+  Graph,
+  Files,
+  ChartPie,
+  Gear,
+  ArrowsInLineVertical,
+  ArrowsOutLineVertical,
+  PushPin,
+  PushPinSlash,
+  DownloadSimple,
+  Copy,
+  XCircle,
+  Faders,
+  List,
+};
+
+interface Props extends Omit<IconProps, 'ref'> {
+  name: string;
+}
+
+export function Icon({ name, ...props }: Props) {
+  const Comp = ICON_MAP[name] || Circle;
+  return <Comp {...props} />;
+}

package/servers/dashboard/ui/src/components/ui/StatusBadge.tsx

@@ -0,0 +1,19 @@
+interface Props {
+  status: string;
+}
+
+export function StatusBadge({ status }: Props) {
+  const color =
+    status === 'running'
+      ? 'text-running border-running/35'
+      : status === 'success'
+      ? 'text-success border-success/35'
+      : status === 'error'
+      ? 'text-error border-error/35'
+      : 'text-text-muted border-border-default';
+  return (
+    <span className={`text-[10px] font-semibold uppercase px-1.5 py-0.5 rounded border ${color}`}>
+      {status}
+    </span>
+  );
+}

package/servers/dashboard/ui/src/components/views/FilesView.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import type { FileEntry } from '../../../../src/lib/invocations';
+import { ViewHeader } from '../ViewHeader';
+import { FilterBar } from '../FilterBar';
+import { FileActivity } from '../FileActivity';
+import type { FilterOptions } from '../../lib/types';
+
+interface Props {
+  files: FileEntry[];
+  filterOptions: FilterOptions;
+}
+
+export function FilesView({ files, filterOptions }: Props) {
+  const [selectedPath, setSelectedPath] = useState<string | null>(null);
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      <ViewHeader title="Files" icon="Files" />
+      <FilterBar options={filterOptions} resultCount={files.length} />
+      <FileActivity files={files} selectedPath={selectedPath} onSelect={setSelectedPath} />
+    </div>
+  );
+}

package/servers/dashboard/ui/src/components/views/NetworkView.tsx

@@ -0,0 +1,20 @@
+import type { Graph3D } from '../../../../src/lib/graph';
+import { ViewHeader } from '../ViewHeader';
+import { FilterBar } from '../FilterBar';
+import { Network3D } from '../Network3D';
+import type { FilterOptions } from '../../lib/types';
+
+interface Props {
+  graph: Graph3D;
+  filterOptions: FilterOptions;
+}
+
+export function NetworkView({ graph, filterOptions }: Props) {
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      <ViewHeader title="Network" icon="Graph" />
+      <FilterBar options={filterOptions} resultCount={graph.nodes.length} />
+      <Network3D graph={graph} />
+    </div>
+  );
+}