@archznn/crewloop-skills 0.6.0 → 0.7.0

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

@@ -0,0 +1,360 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { ClientSession, ClientWebSocketMessage } from '../../src/types';
+import type { View, CommandPaletteItem, FilterOptions, FilterState } from './lib/types';
+import { useSessions } from './hooks/useSessions';
+import { useWebSocket } from './hooks/useWebSocket';
+import { useSettings } from './contexts/SettingsContext';
+import { usePinnedSessions } from './contexts/PinnedSessionsContext';
+import { useFilters } from './contexts/FilterContext';
+import { useKeyboardShortcut } from './hooks/useKeyboardShortcut';
+import { useNow } from './hooks/useNow';
+import { TopBar } from './components/TopBar';
+import { Sidebar } from './components/Sidebar';
+import { CommandPalette } from './components/CommandPalette';
+import { Overview } from './components/views/Overview';
+import { SessionsView } from './components/views/SessionsView';
+import { TimelineView } from './components/views/TimelineView';
+import { NetworkView } from './components/views/NetworkView';
+import { FilesView } from './components/views/FilesView';
+import { SkillsView } from './components/views/SkillsView';
+import { SettingsView } from './components/views/SettingsView';
+import { projectInvocations, buildFileActivity } from '../../src/lib/invocations';
+import { buildGraph3D } from '../../src/lib/graph';
+import { resolvePath } from '../../src/lib/paths';
+import { buildOptions, filterInvocations, filterSessions, filterGraph } from './lib/filter';
+import { toExportableEvent, toJson, download, filename } from './lib/export';
+import { sourceIcon } from '../../src/lib/constants';
+import { formatTime } from '../../src/lib/format';
+
+const VIEWS: { key: View; label: string; icon: string }[] = [
+  { 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' },
+  { key: 'settings', label: 'Settings', icon: 'Gear' },
+];
+
+function buildPaletteItems(
+  currentView: View,
+  setView: (v: View) => void,
+  sessions: ClientSession[],
+  selectSession: (id: string) => void,
+  setFilters: (u: Partial<FilterState>) => void,
+  exportJson: () => void,
+  toggleDensity: () => void
+): CommandPaletteItem[] {
+  const items: CommandPaletteItem[] = [];
+
+  for (const v of VIEWS) {
+    items.push({
+      id: `view:${v.key}`,
+      type: 'view',
+      title: v.label,
+      icon: v.icon,
+      keywords: [v.label.toLowerCase()],
+      action: () => setView(v.key),
+    });
+  }
+
+  for (const s of sessions) {
+    items.push({
+      id: `session:${s.id}`,
+      type: 'session',
+      title: s.activeSkill?.name || s.id,
+      subtitle: `${s.source} · ${formatTime(s.startTime)}`,
+      icon: sourceIcon(s.source),
+      keywords: [s.id, s.source, s.activeSkill?.name || ''],
+      action: () => selectSession(s.id),
+    });
+  }
+
+  const skills = new Set<string>();
+  const tools = new Set<string>();
+  const files = new Set<string>();
+  const recentEvents: { id: string; title: string; tool?: string; time: number }[] = [];
+
+  for (const s of sessions) {
+    if (s.activeSkill?.name) skills.add(s.activeSkill.name);
+    if (s.skill) skills.add(s.skill);
+    for (const e of s.events.slice(-10)) {
+      if (e.tool) tools.add(e.tool);
+      const path = resolvePath(e.input, e.output);
+      if (path) files.add(path);
+      recentEvents.push({
+        id: e.id,
+        title: e.tool || e.event_type,
+        tool: e.tool,
+        time: e.timestamp,
+      });
+    }
+  }
+
+  for (const skill of skills) {
+    items.push({
+      id: `skill:${skill}`,
+      type: 'skill',
+      title: skill,
+      icon: 'Target',
+      action: () => setFilters({ skills: [skill] }),
+    });
+  }
+
+  for (const tool of tools) {
+    items.push({
+      id: `tool:${tool}`,
+      type: 'tool',
+      title: tool,
+      icon: 'Wrench',
+      action: () => setFilters({ tools: [tool] }),
+    });
+  }
+
+  for (const file of files) {
+    items.push({
+      id: `file:${file}`,
+      type: 'file',
+      title: file,
+      icon: 'FileText',
+      action: () => {
+        setView('files');
+        setFilters({ query: file });
+      },
+    });
+  }
+
+  recentEvents
+    .sort((a, b) => b.time - a.time)
+    .slice(0, 20)
+    .forEach((ev) => {
+      items.push({
+        id: `event:${ev.id}`,
+        type: 'event',
+        title: ev.title,
+        subtitle: formatTime(ev.time),
+        icon: 'Clock',
+        action: () => {
+          if (currentView !== 'timeline') setView('timeline');
+          setFilters({ query: ev.tool || ev.title });
+        },
+      });
+    });
+
+  items.push(
+    {
+      id: 'action:export',
+      type: 'action',
+      title: 'Export timeline JSON',
+      icon: 'DownloadSimple',
+      action: exportJson,
+    },
+    {
+      id: 'action:density',
+      type: 'action',
+      title: 'Toggle density',
+      icon: 'ArrowsInLineVertical',
+      action: toggleDensity,
+    },
+    {
+      id: 'action:settings',
+      type: 'action',
+      title: 'Open settings',
+      icon: 'Gear',
+      action: () => setView('settings'),
+    }
+  );
+
+  return items;
+}
+
+export default function App() {
+  const { settings, setSettings } = useSettings();
+  const { pins } = usePinnedSessions();
+  const { filters, setFilters, resetFilters } = useFilters();
+  const { sessions, selectedSessionId, selectSession, handleMessage, sortedSessions } = useSessions();
+  const [activeView, setActiveView] = useState<View>('overview');
+  const [cmdOpen, setCmdOpen] = useState(false);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [timelinePaused, setTimelinePaused] = useState(false);
+  const [pendingUpdates, setPendingUpdates] = useState<ClientWebSocketMessage[]>([]);
+  const now = useNow();
+  const pausedRef = useRef(timelinePaused);
+
+  useEffect(() => {
+    pausedRef.current = timelinePaused;
+  }, [timelinePaused]);
+
+  const sortedWithPins = useMemo(
+    () => filterSessions(sortedSessions, filters, pins, now),
+    [sortedSessions, filters, pins, now]
+  );
+
+  const activeSessionId = useMemo(() => {
+    for (const s of sessions.values()) {
+      if (s.lifecycle === 'running') return s.id;
+    }
+    return sortedWithPins[0]?.id;
+  }, [sessions, sortedWithPins]);
+
+  const selectedSession = useMemo(
+    () => (selectedSessionId ? sessions.get(selectedSessionId) : undefined),
+    [sessions, selectedSessionId]
+  );
+
+  useEffect(() => {
+    if (settings.autoFollowActive && activeSessionId && !selectedSessionId) {
+      selectSession(activeSessionId);
+    }
+  }, [activeSessionId, selectedSessionId, selectSession, settings.autoFollowActive]);
+
+  const flushPending = useCallback(() => {
+    if (pendingUpdates.length === 0) return;
+    const batch = pendingUpdates;
+    setPendingUpdates([]);
+    for (const msg of batch) handleMessage(msg);
+  }, [pendingUpdates, handleMessage]);
+
+  useEffect(() => {
+    if (!timelinePaused) flushPending();
+  }, [timelinePaused, flushPending]);
+
+  const onMessage = useCallback(
+    (msg: ClientWebSocketMessage) => {
+      if (pausedRef.current && (msg.type === 'snapshot' || msg.type === 'update')) {
+        setPendingUpdates((prev) => [...prev, msg]);
+        return;
+      }
+      handleMessage(msg);
+    },
+    [handleMessage]
+  );
+
+  const { status: connection } = useWebSocket(`ws://${location.host}/ws`, onMessage);
+
+  const invocations = useMemo(
+    () => projectInvocations(selectedSession?.events || []),
+    [selectedSession]
+  );
+  const filteredInvocations = useMemo(
+    () => filterInvocations(invocations, selectedSession, filters, now),
+    [invocations, selectedSession, filters, now]
+  );
+  const filteredFiles = useMemo(
+    () => buildFileActivity(filteredInvocations, resolvePath),
+    [filteredInvocations]
+  );
+  const graph = useMemo(
+    () => buildGraph3D(selectedSession, filteredInvocations),
+    [selectedSession, filteredInvocations]
+  );
+  const filteredGraph = useMemo(
+    () => filterGraph(graph, filteredInvocations, filters),
+    [graph, filteredInvocations, filters]
+  );
+  const filterOptions = useMemo<FilterOptions>(
+    () => buildOptions(sessions, selectedSessionId),
+    [sessions, selectedSessionId]
+  );
+
+  function handleExport() {
+    const events = filteredInvocations.map(toExportableEvent);
+    download(toJson(events), filename('json'));
+  }
+
+  function toggleDensity() {
+    setSettings((s) => ({ ...s, density: s.density === 'compact' ? 'comfortable' : 'compact' }));
+  }
+
+  const paletteItems = useMemo(
+    () =>
+      buildPaletteItems(
+        activeView,
+        (v) => {
+          setActiveView(v);
+          resetFilters();
+        },
+        sortedSessions,
+        selectSession,
+        setFilters,
+        handleExport,
+        toggleDensity
+      ),
+    [activeView, sortedSessions, selectSession, setFilters, resetFilters]
+  );
+
+  useKeyboardShortcut('k', () => setCmdOpen(true), { meta: true });
+
+  function renderView() {
+    switch (activeView) {
+      case 'overview':
+        return (
+          <Overview
+            sessions={sessions}
+            selectedSession={selectedSession}
+            onSelectSession={selectSession}
+          />
+        );
+      case 'sessions':
+        return (
+          <SessionsView
+            sessions={sortedWithPins}
+            selectedSessionId={selectedSessionId}
+            filterOptions={filterOptions}
+            onSelectSession={selectSession}
+          />
+        );
+      case 'timeline':
+        return (
+          <TimelineView
+            invocations={filteredInvocations}
+            filterOptions={filterOptions}
+            onMouseEnter={() => setTimelinePaused(true)}
+            onMouseLeave={() => setTimelinePaused(false)}
+          />
+        );
+      case 'network':
+        return <NetworkView graph={filteredGraph} filterOptions={filterOptions} />;
+      case 'files':
+        return <FilesView files={filteredFiles} filterOptions={filterOptions} />;
+      case 'skills':
+        return <SkillsView invocations={filteredInvocations} filterOptions={filterOptions} />;
+      case 'settings':
+        return <SettingsView />;
+      default:
+        return null;
+    }
+  }
+
+  return (
+    <div className="h-screen flex flex-col bg-base text-text-primary overflow-hidden">
+      <TopBar
+        activeView={activeView}
+        sessions={sortedWithPins}
+        selectedSessionId={selectedSessionId}
+        activeSessionId={activeSessionId}
+        connection={connection}
+        onSelectSession={selectSession}
+        onOpenCommandPalette={() => setCmdOpen(true)}
+        onToggleSidebar={() => setSidebarOpen((v) => !v)}
+      />
+      <div className="flex-1 flex overflow-hidden">
+        <Sidebar
+          activeView={activeView}
+          onChange={(view) => {
+            setActiveView(view);
+            setSidebarOpen(false);
+          }}
+          mobileOpen={sidebarOpen}
+          onClose={() => setSidebarOpen(false)}
+        />
+        <main className="flex-1 min-w-0 overflow-hidden animate-fade-in">{renderView()}</main>
+      </div>
+      <CommandPalette
+        items={paletteItems}
+        open={cmdOpen}
+        onClose={() => setCmdOpen(false)}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,69 @@
+import type { ClientSession } from '../../../src/types';
+import { skillIcon, sourceIcon } from '../../../src/lib/constants';
+import { Icon } from './ui/Icon';
+
+interface Props {
+  session: ClientSession | undefined;
+}
+
+function lifecycleColor(lifecycle: string): string {
+  switch (lifecycle) {
+    case 'starting':
+      return 'bg-warning';
+    case 'running':
+      return 'bg-running';
+    case 'ended':
+      return 'bg-text-muted';
+    default:
+      return 'bg-text-muted';
+  }
+}
+
+export function ActiveSkillPanel({ session }: Props) {
+  if (!session) {
+    return (
+      <section className="panel p-6 flex flex-col items-center justify-center gap-3 text-center min-h-[280px]">
+        <div className="w-16 h-16 rounded-xl bg-elevated border border-border-default flex items-center justify-center text-text-muted">
+          <Icon name="MonitorPlay" className="w-8 h-8" />
+        </div>
+        <h2 className="font-display text-4xl tracking-wide text-text-primary">NO ACTIVE SESSION</h2>
+        <p className="text-sm text-text-secondary">Start an agent session to see it here.</p>
+      </section>
+    );
+  }
+
+  const hasSkill = session.activeSkill !== undefined;
+  const skill = session.activeSkill || { name: 'NO SKILL', confidence: 'unknown' };
+  const lifecycle = session.lifecycle || 'starting';
+  const endedStatus = session.lifecycle === 'ended' ? session.status || 'ENDED' : undefined;
+
+  return (
+    <section className="panel p-6">
+      <div className={`absolute top-0 left-0 right-0 h-1 ${lifecycleColor(lifecycle)}`} />
+      <div className="flex flex-col gap-4">
+        <div className={`w-16 h-16 rounded-xl border border-border-default flex items-center justify-center ${hasSkill ? 'bg-elevated text-accent' : 'bg-warning/10 text-warning'}`}>
+          <Icon name={skillIcon(skill.name)} className="w-8 h-8" />
+        </div>
+        <h1 className="font-display text-6xl leading-none tracking-wide text-text-primary uppercase">
+          {skill.name}
+        </h1>
+        {!hasSkill && (
+          <p className="text-sm text-text-secondary">Agent is running without an active role.</p>
+        )}
+        <div className="flex flex-wrap gap-2">
+          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border border-border-default bg-elevated text-text-secondary uppercase">
+            <span className={`w-2 h-2 rounded-full ${lifecycleColor(lifecycle)}`} />
+            {endedStatus || lifecycle}
+          </span>
+          <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium border border-border-default bg-elevated text-text-secondary uppercase">
+            {skill.confidence}
+          </span>
+        </div>
+        <div className="flex items-center gap-2 text-xs text-text-muted uppercase tracking-widest">
+          <Icon name={sourceIcon(session.source)} className="w-4 h-4" />
+          <span>{session.source}</span>
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,74 @@
+import { useEffect, useRef } from 'react';
+import type { ClientSession } from '../../../src/types';
+
+interface Props {
+  session: ClientSession | undefined;
+}
+
+export function ActivityGraph({ session }: Props) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const rect = canvas.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = Math.max(1, Math.floor(rect.width * dpr));
+    canvas.height = Math.max(1, Math.floor(rect.height * dpr));
+    ctx.scale(dpr, dpr);
+
+    const width = rect.width;
+    const height = rect.height;
+    const events = session?.events || [];
+
+    const now = Date.now();
+    const span = Math.max(60000, now - Math.min(...events.map((e) => e.timestamp), now));
+    const buckets = 40;
+    const bucketMs = span / buckets;
+    const counts = new Array(buckets).fill(0);
+
+    events.forEach((e) => {
+      const idx = Math.min(buckets - 1, Math.floor((now - e.timestamp) / bucketMs));
+      counts[buckets - 1 - idx]++;
+    });
+
+    const max = Math.max(1, ...counts);
+    const pad = 4;
+    const barW = (width - pad * 2) / buckets;
+
+    const style = getComputedStyle(document.documentElement);
+    const accent = style.getPropertyValue('--accent').trim() || '#f59e0b';
+    const inset = style.getPropertyValue('--bg-inset').trim() || '#050506';
+
+    ctx.fillStyle = inset;
+    ctx.fillRect(0, 0, width, height);
+
+    counts.forEach((count, i) => {
+      const barH = (count / max) * (height - pad * 2);
+      const x = pad + i * barW;
+      const y = height - pad - barH;
+      ctx.fillStyle = accent;
+      ctx.fillRect(x + 1, y, Math.max(1, barW - 2), Math.max(1, barH));
+    });
+  }, [session]);
+
+  return (
+    <section className="panel flex flex-col h-44">
+      <h2 className="text-xs font-medium text-text-muted uppercase tracking-widest px-5 py-4 border-b border-border-default">
+        Skill Activity
+      </h2>
+      <div className="flex-1 relative p-4">
+        {!session || session.events.length === 0 ? (
+          <div className="absolute inset-0 flex items-center justify-center text-sm text-text-muted">
+            Waiting for agent activity...
+          </div>
+        ) : (
+          <canvas ref={canvasRef} className="w-full h-full" />
+        )}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,200 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import type { CommandPaletteItem } from '../lib/types';
+import { search } from '../lib/search';
+import { useCommandPalette } from '../hooks/useCommandPalette';
+import { useSettings } from '../contexts/SettingsContext';
+import { Icon } from './ui/Icon';
+
+interface Props {
+  items: CommandPaletteItem[];
+  open: boolean;
+  onClose: () => void;
+}
+
+function groupByType(items: CommandPaletteItem[]) {
+  const groups: Record<string, CommandPaletteItem[]> = {};
+  for (const item of items) {
+    groups[item.type] = groups[item.type] || [];
+    groups[item.type].push(item);
+  }
+  return groups;
+}
+
+const GROUP_ORDER = ['view', 'session', 'skill', 'tool', 'file', 'event', 'action'];
+const GROUP_LABELS: Record<string, string> = {
+  view: 'Views',
+  session: 'Sessions',
+  skill: 'Skills',
+  tool: 'Tools',
+  file: 'Files',
+  event: 'Recent events',
+  action: 'Actions',
+};
+
+export function CommandPalette({ items, open, onClose }: Props) {
+  const { query, setQuery, selectedIndex, setSelectedIndex } = useCommandPalette();
+  const { reducedMotion } = useSettings();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  const FOCUSABLE =
+    'input, button, [href], select, textarea, [tabindex]:not([tabindex="-1"])';
+
+  const results = useMemo(() => search(items, query), [items, query]);
+  const flatResults = useMemo(() => {
+    const groups = groupByType(results);
+    const ordered: { item: CommandPaletteItem; group: string }[] = [];
+    for (const type of GROUP_ORDER) {
+      for (const item of groups[type] || []) ordered.push({ item, group: GROUP_LABELS[type] });
+    }
+    return ordered;
+  }, [results]);
+
+  useEffect(() => {
+    if (open) {
+      setQuery('');
+      inputRef.current?.focus();
+    }
+  }, [open, setQuery]);
+
+  useEffect(() => {
+    if (selectedIndex >= flatResults.length) setSelectedIndex(Math.max(0, flatResults.length - 1));
+  }, [flatResults.length, selectedIndex, setSelectedIndex]);
+
+  const activate = useCallback(
+    (index: number) => {
+      const entry = flatResults[index];
+      if (entry) {
+        entry.item.action();
+        onClose();
+      }
+    },
+    [flatResults, onClose]
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Tab') {
+        const focusable = dialogRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE);
+        if (!focusable || focusable.length === 0) return;
+        const current = document.activeElement as HTMLElement | null;
+        const idx = Array.from(focusable).indexOf(current as HTMLElement);
+        if (e.shiftKey) {
+          const prev = idx <= 0 ? focusable[focusable.length - 1] : focusable[idx - 1];
+          prev.focus();
+        } else {
+          const next = idx === -1 || idx >= focusable.length - 1 ? focusable[0] : focusable[idx + 1];
+          next.focus();
+        }
+        e.preventDefault();
+        return;
+      }
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (flatResults.length === 0) return;
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedIndex((i) => (i + 1) % flatResults.length);
+        return;
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedIndex((i) => (i - 1 + flatResults.length) % flatResults.length);
+        return;
+      }
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        activate(selectedIndex);
+      }
+    }
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [open, flatResults.length, selectedIndex, activate, setSelectedIndex, onClose]);
+
+  useEffect(() => {
+    const active = listRef.current?.querySelector('[data-active="true"]') as HTMLElement | null;
+    active?.scrollIntoView({ block: 'nearest' });
+  }, [selectedIndex]);
+
+  if (!open) return null;
+
+  let currentGroup = '';
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-start justify-center pt-24">
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Command palette"
+        className={`relative w-full max-w-2xl mx-4 bg-surface border border-border-default rounded-xl shadow-2xl overflow-hidden ${
+          reducedMotion ? '' : 'animate-modal-in'
+        }`}
+      >
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-border-default">
+          <Icon name="MagnifyingGlass" className="w-5 h-5 text-text-muted" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search views, sessions, skills, tools, files..."
+            className="flex-1 bg-transparent text-text-primary placeholder:text-text-muted outline-none text-sm"
+          />
+          <kbd className="hidden sm:inline-block px-1.5 py-0.5 rounded bg-base border border-border-default text-[10px] text-text-muted font-mono">
+            Esc
+          </kbd>
+        </div>
+        <div ref={listRef} className="max-h-[60vh] overflow-y-auto py-2">
+          {flatResults.length === 0 ? (
+            <div className="flex flex-col items-center justify-center gap-2 py-10 text-text-muted">
+              <Icon name="MagnifyingGlass" className="w-8 h-8" />
+              <p className="text-sm">No results found.</p>
+            </div>
+          ) : (
+            flatResults.map(({ item, group }, idx) => {
+              const showHeader = group !== currentGroup;
+              currentGroup = group;
+              const active = idx === selectedIndex;
+              return (
+                <div key={item.id}>
+                  {showHeader && (
+                    <div className="px-4 py-1.5 text-[11px] uppercase tracking-widest text-text-muted">
+                      {group}
+                    </div>
+                  )}
+                  <button
+                    data-active={active}
+                    onMouseEnter={() => setSelectedIndex(idx)}
+                    onClick={() => activate(idx)}
+                    className={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors ${
+                      active ? 'bg-elevated' : 'hover:bg-elevated'
+                    }`}
+                  >
+                    <Icon name={item.icon || 'Circle'} className="w-5 h-5 text-accent flex-shrink-0" />
+                    <div className="flex flex-col min-w-0">
+                      <span className="text-sm text-text-primary truncate">{item.title}</span>
+                      {item.subtitle && (
+                        <span className="text-xs text-text-muted truncate">{item.subtitle}</span>
+                      )}
+                    </div>
+                  </button>
+                </div>
+              );
+            })
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}