shraga 0.0.3 → 0.1.1

package/src/client/components/Sidebar.tsx

@@ -0,0 +1,235 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Plus, MessageSquare, Hash, AtSign, MessageCircle } from 'lucide-react';
+import { Button } from './ui/button';
+import { ScrollArea } from './ui/scroll-area';
+import { cn } from '@/lib/utils';
+import { WorkspaceTree } from './WorkspaceTree';
+import { useSlots } from '@/lib/slots';
+import { MachineStats } from './MachineStats';
+import type { UnreadSession } from '@/hooks/useUnread';
+import type { AgentSocket } from '@/lib/ws';
+
+interface Session {
+  sessionId: string;
+  title: string;
+  userEmail: string;
+  userName: string;
+  uid: string;
+  createdAt: number;
+  lastModified: number;
+  scope?: 'system' | 'user';
+  visibleTo?: string[];
+  slackContext?: { type: 'dm' | 'channel' | 'mention'; channelName?: string; userName?: string };
+  runStatus?: 'running' | 'idle';
+  lastStopReason?: 'max_turns_reached' | 'error' | 'aborted';
+  scheduleRunStatus?: 'running' | 'ok' | 'error' | 'aborted';
+}
+
+type ChatsFilter = 'mine' | 'all';
+
+function isMine(s: Session, uid: string, email: string): boolean {
+  if (s.uid === uid) return true;
+  if (s.visibleTo?.includes(email.toLowerCase())) return true;
+  return false;
+}
+
+interface Props {
+  getToken: () => Promise<string | null>;
+  activeSessionId?: string;
+  onSelect: (sessionId: string, title?: string) => void;
+  onNew: () => void;
+  refreshKey?: number;
+  workspaceRefreshKey?: number;
+  onRefreshWorkspace: () => void;
+  userUid: string;
+  userEmail: string;
+  unreads?: Record<string, UnreadSession>;
+  busySessions?: Set<string>;
+  socket?: AgentSocket | null;
+}
+
+export function formatTime(ts: number): string {
+  const diff = Date.now() - ts;
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return new Date(ts).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+}
+
+const iconCls = 'w-4 h-4 mt-0.5 shrink-0';
+
+function slackIcon(s: Session) {
+  const ctx = s.slackContext;
+  if (ctx?.type === 'dm') return <MessageCircle className={`${iconCls} text-purple-400`} />;
+  if (ctx?.type === 'mention') return <AtSign className={`${iconCls} text-blue-400`} />;
+  if (ctx?.type === 'channel') return <Hash className={`${iconCls} text-green-400`} />;
+  if (s.sessionId.startsWith('slack-')) return <MessageSquare className={`${iconCls} text-yellow-400`} />;
+  return <MessageSquare className={`${iconCls} text-muted-foreground`} />;
+}
+
+function slackLabel(s: Session): string | null {
+  const ctx = s.slackContext;
+  if (ctx?.type === 'dm') return `DM${ctx.userName ? ` · ${ctx.userName}` : ''}`;
+  if (ctx?.type === 'mention') return `@mention${ctx.channelName ? ` · #${ctx.channelName}` : ''}`;
+  if (ctx?.type === 'channel') return `#${ctx.channelName || 'channel'}`;
+  if (s.sessionId.startsWith('slack-')) return 'Slack';
+  return null;
+}
+
+const FILTER_KEY = 'chats-filter';
+const UNREAD_FILTER_KEY = 'chats-unread-filter';
+
+export function Sidebar({ getToken, activeSessionId, onSelect, onNew, refreshKey, workspaceRefreshKey, onRefreshWorkspace, userUid, userEmail, unreads = {}, busySessions = new Set(), socket }: Props) {
+  const slots = useSlots();
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [filter, setFilter] = useState<ChatsFilter>(() => (localStorage.getItem(FILTER_KEY) as ChatsFilter) || 'mine');
+  const [unreadOnly, setUnreadOnly] = useState(() => localStorage.getItem(UNREAD_FILTER_KEY) === 'true');
+  const [version, setVersion] = useState<string>('');
+  const acRef = useRef<AbortController | null>(null);
+  const activeRef = useRef<HTMLButtonElement | null>(null);
+
+  function changeFilter(f: ChatsFilter) {
+    setFilter(f);
+    localStorage.setItem(FILTER_KEY, f);
+  }
+
+  function toggleUnreadOnly() {
+    const next = !unreadOnly;
+    setUnreadOnly(next);
+    localStorage.setItem(UNREAD_FILTER_KEY, String(next));
+  }
+
+  const scopeFiltered = useMemo(() =>
+    sessions.filter((s) => filter === 'all' || isMine(s, userUid, userEmail)),
+    [sessions, filter, userUid, userEmail],
+  );
+
+  const visibleUnreadCount = useMemo(() =>
+    scopeFiltered.filter((s) => unreads[s.sessionId]).length,
+    [scopeFiltered, unreads],
+  );
+
+  const filtered = useMemo(() =>
+    unreadOnly ? scopeFiltered.filter((s) => unreads[s.sessionId]) : scopeFiltered,
+    [scopeFiltered, unreadOnly, unreads],
+  );
+
+  useEffect(() => {
+    getToken().then(t => t ? fetch('/api/version', { headers: { Authorization: `Bearer ${t}` } }) : null).then(r => r?.json()).then(d => d && setVersion(d.version)).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    acRef.current?.abort();
+    const ac = new AbortController();
+    acRef.current = ac;
+
+    getToken().then((token) => {
+      if (!token || ac.signal.aborted) return;
+      fetch('/api/sessions', { signal: ac.signal, headers: { Authorization: `Bearer ${token}` } })
+        .then((r) => (r.ok ? r.json() : []))
+        .then((data) => { if (Array.isArray(data)) setSessions(data); })
+        .catch(() => {});
+    });
+
+    return () => ac.abort();
+  }, [getToken, refreshKey]);
+
+  useEffect(() => {
+    if (activeRef.current) {
+      activeRef.current.scrollIntoView({ block: 'nearest' });
+    }
+  }, [activeSessionId]);
+
+  return (
+    <div className="flex flex-col h-full bg-muted/30">
+      <div className="p-3">
+        <Button variant="outline" size="sm" className="w-full gap-2 justify-start" onClick={onNew} title="New Chat (Ctrl+N)">
+          <Plus className="w-4 h-4" /> New Chat
+          <span className="ml-auto flex items-center gap-0.5 text-[10px] text-muted-foreground/50 font-mono">⌃N</span>
+        </Button>
+      </div>
+
+      <div className="border-b shrink-0 flex flex-col max-h-[40vh]">
+        <WorkspaceTree getToken={getToken} onRefresh={onRefreshWorkspace} refreshKey={workspaceRefreshKey} />
+      </div>
+
+      <div className="flex items-center justify-between px-3 pt-2 pb-1">
+        <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Chats</span>
+        <div className="flex gap-0.5">
+          {(['mine', 'all'] as const).map((f) => (
+            <button key={f} onClick={() => changeFilter(f)} className={cn(
+              'text-[10px] px-1.5 rounded-full transition-colors capitalize leading-none',
+              filter === f ? 'text-foreground font-medium' : 'text-muted-foreground/60 hover:text-muted-foreground'
+            )}>{f}</button>
+          ))}
+          <button
+            onClick={toggleUnreadOnly}
+            className={cn(
+              'text-[10px] px-1.5 rounded-full transition-colors leading-none',
+              unreadOnly ? 'text-blue-600 dark:text-blue-400 font-medium' : 'text-muted-foreground/60 hover:text-muted-foreground',
+            )}
+          >
+            unread{visibleUnreadCount > 0 && <span className="inline-block w-1.5 h-1.5 ml-1 rounded-full bg-blue-500 align-middle" />}
+          </button>
+        </div>
+      </div>
+
+      <ScrollArea className="flex-1">
+        <div className="px-2 pb-2 space-y-0.5">
+          {filtered.length === 0 && (
+            <p className="text-xs text-muted-foreground px-3 py-6 text-center">
+              {unreadOnly ? 'No unread conversations' : sessions.length === 0 ? 'No conversations yet' : 'No conversations match this filter'}
+            </p>
+          )}
+          {filtered.map((s) => {
+            const unread = unreads[s.sessionId];
+            const isBusy = busySessions.has(s.sessionId) || s.runStatus === 'running' || s.scheduleRunStatus === 'running';
+            const isError = !isBusy && (!!s.lastStopReason || s.scheduleRunStatus === 'error' || s.scheduleRunStatus === 'aborted');
+            const borderColor = isBusy ? 'border-amber-500' : isError ? 'border-red-500' : unread ? 'border-blue-500' : '';
+            const hasBorder = !!(isBusy || isError || unread);
+            return (
+              <button
+                key={s.sessionId}
+                ref={s.sessionId === activeSessionId ? activeRef : undefined}
+                onClick={() => onSelect(s.sessionId, s.title)}
+                className={cn(
+                  'w-full text-left px-3 py-2.5 text-sm transition-colors hover:bg-accent/50 group',
+                  hasBorder ? `rounded-r-lg border-l-[3px] ${borderColor}` : 'rounded-lg',
+                  activeSessionId === s.sessionId && 'bg-accent',
+                )}
+              >
+                <div className="flex items-start gap-2">
+                  {slackIcon(s)}
+                  <div className="min-w-0 flex-1">
+                    <span className={cn('block truncate text-sm leading-snug', unread && 'font-semibold')}>
+                      {s.title || 'New session'}
+                    </span>
+                    <div className="flex items-center gap-1.5 mt-0.5">
+                      <span className="text-[10px] text-muted-foreground font-medium">
+                        {slackLabel(s) || s.userName}
+                      </span>
+                      <span className="text-[10px] text-muted-foreground/50">·</span>
+                      <span className="text-[10px] text-muted-foreground">{formatTime(s.lastModified)}</span>
+                    </div>
+                  </div>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </ScrollArea>
+
+      <div className="px-4 py-2 flex flex-col items-center gap-1">
+        <MachineStats socket={socket ?? null} getToken={getToken} />
+        {slots.sidebarExtras?.()}
+        {version && (
+          <div className="text-[10px] text-muted-foreground/50 text-center">v{version}</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/components/SkillsManager.tsx

@@ -0,0 +1,280 @@
+import { useEffect, useState } from 'react';
+import { BookOpen, Plus, Trash2, X, Check, Star, Copy, Pencil, Lock, ArrowLeft } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Textarea } from './ui/textarea';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from './ui/dialog';
+
+type DefaultSkillEntry = string | { name: string; capped?: boolean | number };
+
+function entryName(e: DefaultSkillEntry): string {
+  return typeof e === 'string' ? e : e.name;
+}
+function isCapped(e: DefaultSkillEntry): boolean {
+  if (typeof e === 'string') return false;
+  return e.capped === true || (typeof e.capped === 'number' && e.capped > 0);
+}
+function isDefault(defaults: DefaultSkillEntry[], name: string): boolean {
+  return defaults.some(e => entryName(e) === name);
+}
+function findEntry(defaults: DefaultSkillEntry[], name: string): DefaultSkillEntry | undefined {
+  return defaults.find(e => entryName(e) === name);
+}
+
+interface Props {
+  getToken: () => Promise<string | null>;
+  onSkillsChange?: (skills: string[]) => void;
+  trigger?: React.ReactNode;
+}
+
+async function apiFetch(path: string, token: string, opts?: RequestInit) {
+  return fetch(path, { ...opts, headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json', ...(opts?.headers ?? {}) } });
+}
+
+type SidebarAction = null | 'create' | 'rename' | 'duplicate';
+
+export function SkillsManager({ getToken, onSkillsChange, trigger }: Props) {
+  const [open, setOpen] = useState(false);
+  const [skills, setSkills] = useState<string[]>([]);
+  const [builtins, setBuiltins] = useState<string[]>([]);
+  const [defaults, setDefaults] = useState<DefaultSkillEntry[]>([]);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [content, setContent] = useState('');
+  const [dirty, setDirty] = useState(false);
+  const [action, setAction] = useState<SidebarAction>(null);
+  const [actionName, setActionName] = useState('');
+
+  const isSelectedBuiltin = selected ? builtins.includes(selected) : false;
+
+  const loadList = async () => {
+    const token = await getToken();
+    if (!token) return;
+    const [skillsRes, defaultsRes] = await Promise.all([
+      apiFetch('/api/skills', token),
+      apiFetch('/api/skills-defaults', token),
+    ]);
+    const data: { skills: string[]; builtins: string[] } = await skillsRes.json();
+    const defs: DefaultSkillEntry[] = await defaultsRes.json();
+    setSkills(data.skills);
+    setBuiltins(data.builtins);
+    setDefaults(defs);
+    onSkillsChange?.(data.skills);
+  };
+
+  const loadSkill = async (name: string) => {
+    const token = await getToken();
+    if (!token) return;
+    const res = await apiFetch(`/api/skills/${name}`, token);
+    const skill = await res.json();
+    setContent(skill.content);
+    setSelected(name);
+    setDirty(false);
+  };
+
+  const save = async () => {
+    if (!selected || isSelectedBuiltin) return;
+    const token = await getToken();
+    if (!token) return;
+    await apiFetch(`/api/skills/${selected}`, token, { method: 'PUT', body: JSON.stringify({ content }) });
+    setDirty(false);
+  };
+
+  const submitAction = async () => {
+    const name = actionName.trim().replace(/\s+/g, '-');
+    if (!name) return;
+    const token = await getToken();
+    if (!token) return;
+
+    if (action === 'create') {
+      await apiFetch(`/api/skills/${name}`, token, { method: 'PUT', body: JSON.stringify({ content: '' }) });
+      await loadList();
+      await loadSkill(name);
+    } else if (action === 'duplicate' && selected) {
+      const res = await apiFetch(`/api/skills/${selected}/duplicate`, token, { method: 'POST', body: JSON.stringify({ newName: name }) });
+      if (!res.ok) return;
+      await loadList();
+      await loadSkill(name);
+    } else if (action === 'rename' && selected) {
+      const res = await apiFetch(`/api/skills/${selected}/rename`, token, { method: 'POST', body: JSON.stringify({ newName: name }) });
+      if (!res.ok) return;
+      await loadList();
+      await loadSkill(name);
+    }
+
+    setAction(null);
+    setActionName('');
+  };
+
+  const remove = async (name: string) => {
+    const token = await getToken();
+    if (!token) return;
+    const res = await apiFetch(`/api/skills/${name}`, token, { method: 'DELETE' });
+    if (!res.ok) return;
+    if (selected === name) { setSelected(null); setContent(''); }
+    await loadList();
+  };
+
+  const toggleDefault = async (name: string) => {
+    const token = await getToken();
+    if (!token) return;
+    const next = isDefault(defaults, name)
+      ? defaults.filter((d) => entryName(d) !== name)
+      : [...defaults, name];
+    await apiFetch('/api/skills-defaults', token, { method: 'PUT', body: JSON.stringify(next) });
+    setDefaults(next);
+  };
+
+
+  const startAction = (type: SidebarAction) => {
+    setAction(type);
+    setActionName(type === 'rename' && selected ? selected : type === 'duplicate' && selected ? `${selected}-copy` : '');
+  };
+
+  const cancelAction = () => { setAction(null); setActionName(''); };
+
+  useEffect(() => { if (open) loadList(); }, [open]);
+
+  const actionPlaceholder = action === 'create' ? 'skill-name' : action === 'rename' ? 'new-name' : 'copy-name';
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button variant="ghost" size="icon" title="Skills" className="h-8 w-8">
+            <BookOpen className="w-4 h-4" />
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="max-w-[95vw] sm:max-w-2xl h-[70dvh] sm:h-[520px] flex flex-col gap-0 p-0">
+        <DialogHeader className="px-4 pt-4 pb-2 border-b shrink-0">
+          <DialogTitle className="flex items-center gap-2">
+            <BookOpen className="w-4 h-4" /> Skills
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col sm:flex-row flex-1 overflow-hidden">
+          {/* Sidebar */}
+          <div className={`sm:w-52 border-r flex flex-col shrink-0 ${selected ? 'hidden sm:flex' : 'flex'}`}>
+            <div className="flex-1 overflow-y-auto py-1">
+              {skills.map((s) => (
+                <div
+                  key={s}
+                  className={`group flex items-center gap-1.5 px-3 py-1.5 cursor-pointer text-sm hover:bg-accent transition-colors ${selected === s ? 'bg-accent font-medium' : ''}`}
+                  onClick={() => loadSkill(s)}
+                >
+                  <button
+                    className={`shrink-0 transition-colors ${isDefault(defaults, s) ? 'text-amber-500' : 'text-muted-foreground/30 hover:text-amber-400'}`}
+                    onClick={(e) => { e.stopPropagation(); toggleDefault(s); }}
+                    title={isDefault(defaults, s) ? 'Remove from defaults' : 'Set as default (always active)'}
+                  >
+                    <Star className={`w-3 h-3 ${isDefault(defaults, s) ? 'fill-current' : ''}`} />
+                  </button>
+                  <span className="truncate flex-1">@{s}</span>
+                  {builtins.includes(s) && (
+                    <span title="Built-in (read-only)"><Lock className="w-2.5 h-2.5 text-muted-foreground/40 shrink-0" /></span>
+                  )}
+                  {!builtins.includes(s) && (
+                    <button
+                      className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive transition-opacity shrink-0"
+                      onClick={(e) => { e.stopPropagation(); remove(s); }}
+                      title="Delete"
+                    >
+                      <Trash2 className="w-3 h-3" />
+                    </button>
+                  )}
+                </div>
+              ))}
+            </div>
+
+            <div className="border-t p-2">
+              {action ? (
+                <div className="flex gap-1">
+                  <Input
+                    value={actionName}
+                    onChange={(e) => setActionName(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === 'Enter') submitAction(); if (e.key === 'Escape') cancelAction(); }}
+                    placeholder={actionPlaceholder}
+                    className="h-7 text-xs"
+                    autoFocus
+                  />
+                  <Button size="icon" className="h-7 w-7 shrink-0" onClick={submitAction}><Check className="w-3 h-3" /></Button>
+                  <Button size="icon" variant="ghost" className="h-7 w-7 shrink-0" onClick={cancelAction}><X className="w-3 h-3" /></Button>
+                </div>
+              ) : (
+                <Button variant="outline" size="sm" className="w-full h-7 text-xs" onClick={() => startAction('create')}>
+                  <Plus className="w-3 h-3 mr-1" /> New skill
+                </Button>
+              )}
+            </div>
+          </div>
+
+          {/* Editor */}
+          <div className={`flex-1 flex flex-col overflow-hidden ${!selected ? 'hidden sm:flex' : ''}`}>
+            {selected ? (
+              <>
+                <div className="flex items-center justify-between px-3 py-2 border-b text-sm shrink-0">
+                  <div className="flex items-center gap-0.5 font-medium">
+                    <button className="sm:hidden mr-1.5 text-muted-foreground" onClick={() => { setSelected(null); setContent(''); setDirty(false); }}><ArrowLeft className="w-4 h-4" /></button>
+                    <span className="text-muted-foreground">@</span>
+                    <span>{selected}</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    {isSelectedBuiltin && (
+                      <span className="text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded font-medium flex items-center gap-0.5">
+                        <Lock className="w-2.5 h-2.5" /> read-only
+                      </span>
+                    )}
+                    {isDefault(defaults, selected) && (
+                      <>
+                        <span className="text-[10px] text-amber-600 bg-amber-50 dark:bg-amber-950/50 dark:text-amber-400 px-1.5 py-0.5 rounded font-medium">
+                          default
+                        </span>
+                        <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${isCapped(findEntry(defaults, selected)!) ? 'text-blue-600 bg-blue-50 dark:bg-blue-950/50 dark:text-blue-400' : 'text-emerald-600 bg-emerald-50 dark:bg-emerald-950/50 dark:text-emerald-400'}`}>
+                          {isCapped(findEntry(defaults, selected)!) ? 'capped' : 'full'}
+                        </span>
+                      </>
+                    )}
+                    <Button
+                      variant="ghost" size="sm" className="h-6 text-xs px-1.5"
+                      onClick={() => startAction('duplicate')}
+                      title="Duplicate"
+                    >
+                      <Copy className="w-3 h-3" />
+                    </Button>
+                    {!isSelectedBuiltin && (
+                      <Button
+                        variant="ghost" size="sm" className="h-6 text-xs px-1.5"
+                        onClick={() => startAction('rename')}
+                        title="Rename"
+                      >
+                        <Pencil className="w-3 h-3" />
+                      </Button>
+                    )}
+                    {dirty && !isSelectedBuiltin && (
+                      <Button size="sm" className="h-6 text-xs" onClick={save}>
+                        <Check className="w-3 h-3 mr-1" /> Save
+                      </Button>
+                    )}
+                  </div>
+                </div>
+                <Textarea
+                  value={content}
+                  onChange={(e) => { if (!isSelectedBuiltin) { setContent(e.target.value); setDirty(true); } }}
+                  readOnly={isSelectedBuiltin}
+                  className={`flex-1 resize-none rounded-none border-0 font-mono text-xs focus-visible:ring-0 ${isSelectedBuiltin ? 'opacity-70 cursor-default' : ''}`}
+                  placeholder="Write the skill instructions here…"
+                />
+              </>
+            ) : (
+              <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground text-sm gap-1">
+                <p>Select or create a skill</p>
+                <p className="text-xs"><Star className="w-3 h-3 inline fill-amber-500 text-amber-500" /> = injected in every conversation</p>
+                <p className="text-xs"><Lock className="w-3 h-3 inline" /> = built-in, duplicate to customize</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/client/components/SmartChart.tsx

@@ -0,0 +1,167 @@
+import { useMemo } from 'react';
+import {
+  ResponsiveContainer, BarChart, Bar, LineChart, Line, PieChart, Pie, Cell,
+  XAxis, YAxis, CartesianGrid, Tooltip, Legend,
+} from 'recharts';
+
+const COLORS = ['#6366f1', '#f59e0b', '#10b981', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6', '#f97316'];
+
+interface Props {
+  data: unknown;
+}
+
+type Row = Record<string, unknown>;
+
+/** Try to parse raw string as JSON, return null on failure */
+export function tryParseChartData(raw: string): unknown | null {
+  const trimmed = raw.trim();
+  if (!trimmed.startsWith('{') && !trimmed.startsWith('[')) return null;
+  try { return JSON.parse(trimmed); } catch { return null; }
+}
+
+/** Flatten nested Mixpanel-style { data: { values: { series: { date: val } } } } into rows */
+function flattenMixpanelValues(obj: Record<string, unknown>): Row[] | null {
+  const values = (obj.data as any)?.values ?? obj.values ?? obj.series;
+  if (!values || typeof values !== 'object') return null;
+
+  const seriesMap = values as Record<string, Record<string, number>>;
+  const seriesNames = Object.keys(seriesMap);
+  if (seriesNames.length === 0) return null;
+
+  const firstSeries = seriesMap[seriesNames[0]];
+  if (!firstSeries || typeof firstSeries !== 'object') return null;
+
+  const labels = Object.keys(firstSeries);
+  return labels.map((label) => {
+    const row: Row = { label };
+    for (const name of seriesNames) row[name] = seriesMap[name]?.[label] ?? 0;
+    return row;
+  });
+}
+
+/** Detect MCP spool metadata: { file, type|count|childCount, sizeBytes, preview } */
+function isSpoolMeta(data: unknown): data is Record<string, unknown> {
+  if (!data || typeof data !== 'object' || Array.isArray(data)) return false;
+  const obj = data as Record<string, unknown>;
+  return 'file' in obj && 'sizeBytes' in obj;
+}
+
+/** Normalize any JSON shape into an array of flat row objects */
+function normalizeToRows(data: unknown): Row[] | null {
+  if (isSpoolMeta(data)) return null;
+  if (Array.isArray(data)) {
+    if (data.length === 0) return null;
+    if (typeof data[0] === 'object' && data[0] !== null) return data as Row[];
+    return null;
+  }
+  if (typeof data === 'object' && data !== null) {
+    const nested = flattenMixpanelValues(data as Record<string, unknown>);
+    if (nested) return nested;
+  }
+  return null;
+}
+
+type ChartType = 'bar' | 'line' | 'pie' | 'table';
+
+function detectChartType(rows: Row[], labelKey: string, numericKeys: string[]): ChartType {
+  if (numericKeys.length === 0) return 'table';
+  if (numericKeys.length === 1 && rows.length <= 8) return 'pie';
+  const labels = rows.map((r) => String(r[labelKey] ?? ''));
+  const looksTimeSeries = labels.some((l) => /^\d{4}-\d{2}/.test(l));
+  if (looksTimeSeries) return 'line';
+  return rows.length > 20 ? 'line' : 'bar';
+}
+
+function classifyKeys(rows: Row[]) {
+  const allKeys = [...new Set(rows.flatMap(Object.keys))];
+  const numericKeys: string[] = [];
+  let labelKey = '';
+
+  for (const key of allKeys) {
+    const vals = rows.map((r) => r[key]).filter((v) => v !== null && v !== undefined);
+    const numCount = vals.filter((v) => typeof v === 'number').length;
+    if (numCount > vals.length * 0.5) numericKeys.push(key);
+    else if (!labelKey) labelKey = key;
+  }
+  if (!labelKey) labelKey = allKeys[0] ?? 'label';
+  return { labelKey, numericKeys };
+}
+
+export function SmartChart({ data }: Props) {
+  const { rows, labelKey, numericKeys, chartType } = useMemo(() => {
+    const rows = normalizeToRows(data);
+    if (!rows || rows.length === 0) return { rows: null, labelKey: '', numericKeys: [] as string[], chartType: 'table' as ChartType };
+    const { labelKey, numericKeys } = classifyKeys(rows);
+    const chartType = detectChartType(rows, labelKey, numericKeys);
+    return { rows, labelKey, numericKeys, chartType };
+  }, [data]);
+
+  if (!rows) return <pre className="text-xs whitespace-pre-wrap break-words">{JSON.stringify(data, null, 2)}</pre>;
+
+  if (chartType === 'table') return <DataTable rows={rows} />;
+
+  return (
+    <div className="space-y-2">
+      <div className="h-64 w-full">
+        <ResponsiveContainer width="100%" height="100%">
+          {chartType === 'pie' ? (
+            <PieChart>
+              <Pie data={rows} dataKey={numericKeys[0]} nameKey={labelKey} cx="50%" cy="50%" outerRadius={80} label>
+                {rows.map((_, i) => <Cell key={i} fill={COLORS[i % COLORS.length]} />)}
+              </Pie>
+              <Tooltip />
+              <Legend />
+            </PieChart>
+          ) : chartType === 'line' ? (
+            <LineChart data={rows}>
+              <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
+              <XAxis dataKey={labelKey} tick={{ fontSize: 11 }} />
+              <YAxis tick={{ fontSize: 11 }} />
+              <Tooltip />
+              {numericKeys.length > 1 && <Legend />}
+              {numericKeys.map((key, i) => (
+                <Line key={key} type="monotone" dataKey={key} stroke={COLORS[i % COLORS.length]} strokeWidth={2} dot={false} />
+              ))}
+            </LineChart>
+          ) : (
+            <BarChart data={rows}>
+              <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
+              <XAxis dataKey={labelKey} tick={{ fontSize: 11 }} />
+              <YAxis tick={{ fontSize: 11 }} />
+              <Tooltip />
+              {numericKeys.length > 1 && <Legend />}
+              {numericKeys.map((key, i) => (
+                <Bar key={key} dataKey={key} fill={COLORS[i % COLORS.length]} radius={[3, 3, 0, 0]} />
+              ))}
+            </BarChart>
+          )}
+        </ResponsiveContainer>
+      </div>
+      <DataTable rows={rows} />
+    </div>
+  );
+}
+
+function DataTable({ rows }: { rows: Row[] }) {
+  const keys = [...new Set(rows.flatMap(Object.keys))];
+  return (
+    <div className="overflow-auto max-h-96 rounded border text-xs">
+      <table className="w-full text-left">
+        <thead className="bg-muted sticky top-0">
+          <tr>{keys.map((k) => <th key={k} className="px-2 py-1 font-medium">{k}</th>)}</tr>
+        </thead>
+        <tbody>
+          {rows.map((row, i) => (
+            <tr key={i} className="border-t">
+              {keys.map((k) => {
+                const v = row[k];
+                const cell = v === null || v === undefined ? '' : typeof v === 'object' ? JSON.stringify(v, null, 2) : String(v);
+                return <td key={k} className="px-2 py-1 max-w-[400px] whitespace-pre-wrap break-words align-top" title={cell}>{cell}</td>;
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}