@jlongo78/agent-spaces 0.9.7 → 0.9.9

package/.next/standalone/src/components/wizard/chart-wizard.tsx

@@ -0,0 +1,405 @@
+'use client';
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { X, Send, BarChart3 } from 'lucide-react';
+import { api } from '@/lib/api';
+
+interface DataPoint {
+  label: string;
+  value: number;
+  color?: string;
+}
+
+interface Series {
+  name: string;
+  color: string;
+  values: number[];
+}
+
+interface ChartSpec {
+  chart: {
+    title: string;
+    type: 'bar' | 'line' | 'pie' | 'scatter' | 'heatmap' | 'table';
+    xAxis?: string;
+    yAxis?: string;
+    color: string;
+  };
+  data: DataPoint[];
+  series?: Series[];
+  labels?: string[];
+  options: {
+    showLegend?: boolean;
+    stacked?: boolean;
+    fillArea?: boolean;
+  };
+  summary: string;
+}
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+const SERIES_COLORS = [
+  '#6366f1', '#22c55e', '#f59e0b', '#ef4444', '#3b82f6',
+  '#ec4899', '#14b8a6', '#a855f7', '#f97316',
+];
+
+function ChartPreview({ spec }: { spec: ChartSpec }) {
+  // Multi-series line chart
+  if (spec.chart.type === 'line' && spec.series && spec.series.length > 0) {
+    const labels = spec.labels || [];
+    const allVals = spec.series.flatMap(s => s.values);
+    const maxVal = Math.max(...allVals, 1);
+    const numPoints = labels.length || Math.max(...spec.series.map(s => s.values.length));
+    const w = 340, h = 180, padL = 10, padR = 10, padT = 10, padB = 25;
+    const plotW = w - padL - padR;
+    const plotH = h - padT - padB;
+
+    return (
+      <div>
+        <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="280" preserveAspectRatio="xMidYMid meet">
+          {/* Grid lines */}
+          {[0, 0.25, 0.5, 0.75, 1].map((frac, i) => {
+            const y = padT + plotH * (1 - frac);
+            return <line key={i} x1={padL} y1={y} x2={w - padR} y2={y} stroke="#27272a" strokeWidth={0.5} />;
+          })}
+          {/* Series */}
+          {spec.series.map((series, si) => {
+            const color = series.color || SERIES_COLORS[si % SERIES_COLORS.length];
+            const points = series.values.map((v, i) => ({
+              x: padL + (i / Math.max(series.values.length - 1, 1)) * plotW,
+              y: padT + plotH - (v / maxVal) * plotH,
+            }));
+            const pathD = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
+            return (
+              <g key={si}>
+                <path d={pathD} fill="none" stroke={color} strokeWidth={1.5} opacity={0.85} />
+                {points.map((p, i) => (
+                  <circle key={i} cx={p.x} cy={p.y} r={2} fill={color} />
+                ))}
+              </g>
+            );
+          })}
+          {/* X-axis labels */}
+          {labels.map((label, i) => {
+            const x = padL + (i / Math.max(labels.length - 1, 1)) * plotW;
+            return (
+              <text key={i} x={x} y={h - 5} textAnchor="middle" fill="#71717a" fontSize={7}>{label}</text>
+            );
+          })}
+        </svg>
+        {/* Legend */}
+        <div className="flex flex-wrap gap-x-3 gap-y-1 mt-2">
+          {spec.series.map((s, i) => (
+            <div key={i} className="flex items-center gap-1.5 text-[10px]">
+              <span className="w-2 h-2 rounded-full" style={{ backgroundColor: s.color || SERIES_COLORS[i % SERIES_COLORS.length] }} />
+              <span className="text-zinc-400">{s.name}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Single-series charts
+  const data = spec.data || [];
+  if (data.length === 0) {
+    return <div className="text-xs text-zinc-500 text-center py-8">No data to display</div>;
+  }
+  const maxVal = Math.max(...data.map(d => d.value), 1);
+
+  if (spec.chart.type === 'bar') {
+    const barMaxH = 200;
+    return (
+      <div>
+        {spec.chart.yAxis && <div className="text-xs text-zinc-500 mb-2">{spec.chart.yAxis}</div>}
+        <div className="flex items-end gap-2" style={{ height: barMaxH + 30 }}>
+          {spec.data.map((d, i) => {
+            const barH = Math.max((d.value / maxVal) * barMaxH, 4);
+            return (
+              <div key={i} className="flex-1 flex flex-col items-center justify-end" style={{ height: barMaxH + 30 }}>
+                <div className="text-[10px] text-zinc-400 mb-1">{d.value}</div>
+                <div
+                  className="w-full rounded-t transition-all duration-300"
+                  style={{ height: barH, backgroundColor: d.color || spec.chart.color }}
+                />
+                <div className="text-[10px] text-zinc-500 mt-1.5 truncate w-full text-center">{d.label}</div>
+              </div>
+            );
+          })}
+        </div>
+        {spec.chart.xAxis && <div className="text-xs text-zinc-500 text-center mt-2">{spec.chart.xAxis}</div>}
+      </div>
+    );
+  }
+
+  if (spec.chart.type === 'line') {
+    const points = spec.data.map((d, i) => ({
+      x: (i / Math.max(spec.data.length - 1, 1)) * 280 + 10,
+      y: 140 - (d.value / maxVal) * 120,
+    }));
+    const pathD = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
+    const areaD = pathD + ` L ${points[points.length - 1]?.x || 0} 140 L ${points[0]?.x || 0} 140 Z`;
+
+    return (
+      <div>
+        <svg viewBox="0 0 300 160" width="100%" height="220" preserveAspectRatio="xMidYMid meet">
+          {spec.options.fillArea && (
+            <path d={areaD} fill={spec.chart.color} opacity={0.15} />
+          )}
+          <path d={pathD} fill="none" stroke={spec.chart.color} strokeWidth={2} />
+          {points.map((p, i) => (
+            <g key={i}>
+              <circle cx={p.x} cy={p.y} r={3} fill={spec.chart.color} />
+              <text x={p.x} y={155} textAnchor="middle" fill="#71717a" fontSize={8}>{spec.data[i].label}</text>
+              <text x={p.x} y={p.y - 8} textAnchor="middle" fill="#a1a1aa" fontSize={7}>{spec.data[i].value}</text>
+            </g>
+          ))}
+        </svg>
+      </div>
+    );
+  }
+
+  if (spec.chart.type === 'pie') {
+    const total = spec.data.reduce((s, d) => s + d.value, 0) || 1;
+    let cumAngle = -Math.PI / 2;
+    const slices = spec.data.map((d, i) => {
+      const angle = (d.value / total) * Math.PI * 2;
+      const startAngle = cumAngle;
+      cumAngle += angle;
+      const endAngle = cumAngle;
+      const x1 = 75 + 60 * Math.cos(startAngle);
+      const y1 = 75 + 60 * Math.sin(startAngle);
+      const x2 = 75 + 60 * Math.cos(endAngle);
+      const y2 = 75 + 60 * Math.sin(endAngle);
+      const largeArc = angle > Math.PI ? 1 : 0;
+      return {
+        d: `M 75 75 L ${x1} ${y1} A 60 60 0 ${largeArc} 1 ${x2} ${y2} Z`,
+        color: d.color || SERIES_COLORS[i % SERIES_COLORS.length],
+        label: d.label,
+        pct: Math.round((d.value / total) * 100),
+      };
+    });
+
+    return (
+      <div className="flex items-center gap-4">
+        <svg viewBox="0 0 150 150" width="128" height="128">
+          {slices.map((s, i) => (
+            <path key={i} d={s.d} fill={s.color} stroke="#09090b" strokeWidth={1} />
+          ))}
+        </svg>
+        <div className="space-y-1">
+          {slices.map((s, i) => (
+            <div key={i} className="flex items-center gap-2 text-[11px]">
+              <span className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: s.color }} />
+              <span className="text-zinc-300">{s.label}</span>
+              <span className="text-zinc-500">{s.pct}%</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (spec.chart.type === 'scatter') {
+    return (
+      <div>
+        <svg viewBox="0 0 300 160" width="100%" height="220" preserveAspectRatio="xMidYMid meet">
+          {spec.data.map((d, i) => {
+            const x = (i / Math.max(spec.data.length - 1, 1)) * 260 + 20;
+            const y = 140 - (d.value / maxVal) * 120;
+            return (
+              <g key={i}>
+                <circle cx={x} cy={y} r={4} fill={d.color || spec.chart.color} opacity={0.7} />
+                <text x={x} y={155} textAnchor="middle" fill="#71717a" fontSize={8}>{d.label}</text>
+              </g>
+            );
+          })}
+        </svg>
+      </div>
+    );
+  }
+
+  // table fallback
+  return (
+    <div className="overflow-auto">
+      <table className="w-full text-xs">
+        <thead>
+          <tr className="border-b border-zinc-700">
+            <th className="text-left py-1.5 px-2 text-zinc-400 font-medium">Label</th>
+            <th className="text-right py-1.5 px-2 text-zinc-400 font-medium">Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          {spec.data.map((d, i) => (
+            <tr key={i} className="border-b border-zinc-800/50">
+              <td className="py-1.5 px-2 text-zinc-300">{d.label}</td>
+              <td className="py-1.5 px-2 text-right text-zinc-200 font-mono">{d.value}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export function ChartWizard({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+}) {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [spec, setSpec] = useState<ChartSpec | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [input, setInput] = useState('');
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
+  }, [messages, loading]);
+
+  const sendMessage = useCallback(async (text: string) => {
+    const userMsg: Message = { role: 'user', content: text };
+    const updated = [...messages, userMsg];
+    setMessages(updated);
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch(api('/api/wizard/chart'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ messages: updated, currentSpec: spec }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+
+      setMessages([...updated, { role: 'assistant', content: data.reply }]);
+      if (data.spec) setSpec(data.spec);
+    } catch (e: any) {
+      setError(e.message);
+    }
+    setLoading(false);
+  }, [messages, spec]);
+
+  const handleSend = () => {
+    const text = input.trim();
+    if (!text || loading) return;
+    setInput('');
+    sendMessage(text);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 bg-zinc-950 flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between px-6 py-3 border-b border-zinc-800 flex-shrink-0">
+        <div className="flex items-center gap-2">
+          <BarChart3 className="w-4 h-4 text-emerald-400" />
+          <h2 className="text-sm font-semibold text-zinc-100">Chart Builder</h2>
+          <span className="text-[10px] text-zinc-600 bg-zinc-800 px-1.5 py-0.5 rounded">demo</span>
+        </div>
+        <button onClick={onClose} className="text-zinc-500 hover:text-white">
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+
+      {error && (
+        <div className="px-6 py-2 bg-red-500/10 border-b border-red-500/20 text-xs text-red-400">
+          {error}
+        </div>
+      )}
+
+      {/* Content: chat left, preview right */}
+      <div className="flex-1 flex overflow-hidden min-h-0">
+        {/* Chat */}
+        <div className="flex-1 flex flex-col border-r border-zinc-800 min-w-0">
+          <div ref={listRef} className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+            {messages.length === 0 && !loading && (
+              <div className="text-center py-12">
+                <p className="text-zinc-400 text-sm mb-1">Describe the data you want to visualize.</p>
+                <p className="text-zinc-600 text-xs">I'll help you pick a chart type and build it.</p>
+              </div>
+            )}
+
+            {messages.map((msg, i) => (
+              <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                <div className={`max-w-[80%] rounded-lg px-3 py-2 text-sm ${
+                  msg.role === 'user' ? 'bg-emerald-700 text-white' : 'bg-zinc-800 text-zinc-200'
+                }`}>
+                  <p className="whitespace-pre-wrap">{msg.content}</p>
+                </div>
+              </div>
+            ))}
+
+            {loading && (
+              <div className="flex justify-start">
+                <div className="bg-zinc-800 rounded-lg px-4 py-3">
+                  <div className="flex gap-1">
+                    <span className="w-2 h-2 bg-zinc-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+                    <span className="w-2 h-2 bg-zinc-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+                    <span className="w-2 h-2 bg-zinc-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Input */}
+          <div className="px-6 py-3 border-t border-zinc-800 flex-shrink-0">
+            <div className="flex gap-2">
+              <textarea
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    handleSend();
+                  }
+                }}
+                placeholder="Describe your data..."
+                rows={2}
+                className="flex-1 bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-sm text-zinc-200 placeholder:text-zinc-600 focus:outline-none focus:border-zinc-500 resize-none"
+              />
+              <button
+                onClick={handleSend}
+                disabled={!input.trim() || loading}
+                className="px-4 bg-emerald-600 hover:bg-emerald-500 disabled:bg-zinc-800 disabled:text-zinc-600 text-white rounded-lg flex items-center gap-1.5 text-sm self-end"
+              >
+                <Send className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Chart preview */}
+        <div className="w-[420px] flex-shrink-0 flex flex-col overflow-y-auto">
+          {!spec ? (
+            <div className="flex flex-col items-center justify-center h-full px-6 text-center">
+              <BarChart3 className="w-8 h-8 text-zinc-700 mb-3" />
+              <p className="text-zinc-500 text-sm">Your chart will appear here as you describe your data.</p>
+            </div>
+          ) : (
+            <div className="p-5">
+              <div className="mb-3">
+                <div className="text-sm font-medium text-zinc-200">{spec.chart.title}</div>
+                <div className="text-[10px] text-zinc-500 mt-0.5">
+                  {spec.chart.type} chart
+                  {spec.summary && ` \u2014 ${spec.summary}`}
+                </div>
+              </div>
+              <div className="bg-zinc-900 rounded-lg border border-zinc-800 p-4">
+                <ChartPreview spec={spec} />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/.next/standalone/src/components/workspace/workspace-todos.tsx

@@ -0,0 +1,265 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Check, Plus, X } from 'lucide-react';
+import { api } from '@/lib/api';
+import type { Workspace, WorkspaceTodo } from '@/types/claude';
+
+export function WorkspaceTodos({ workspace }: { workspace: Workspace | null }) {
+  const workspaceId = workspace?.id ?? null;
+  const color = workspace?.color ?? '#6366f1';
+
+  const [todos, setTodos] = useState<WorkspaceTodo[]>([]);
+  const [adding, setAdding] = useState(false);
+  const [addInput, setAddInput] = useState('');
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editText, setEditText] = useState('');
+  const addInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (workspaceId == null) { setTodos([]); return; }
+    let cancelled = false;
+    fetch(api(`/api/workspaces/${workspaceId}/todos`))
+      .then(r => r.json())
+      .then((data: WorkspaceTodo[]) => { if (!cancelled) setTodos(Array.isArray(data) ? data : []); })
+      .catch(() => { if (!cancelled) setTodos([]); });
+    return () => { cancelled = true; };
+  }, [workspaceId]);
+
+  const addTodo = useCallback(async () => {
+    const text = addInput.trim();
+    if (!text || workspaceId == null) { setAddInput(''); setAdding(false); return; }
+
+    const tempId = -Date.now();
+    const temp: WorkspaceTodo = {
+      id: tempId,
+      workspaceId,
+      text,
+      completed: false,
+      sortOrder: Number.MAX_SAFE_INTEGER,
+      created: new Date().toISOString(),
+      completedAt: null,
+    };
+    setTodos(prev => [...prev, temp]);
+    setAddInput('');
+    addInputRef.current?.focus();
+
+    try {
+      const res = await fetch(api(`/api/workspaces/${workspaceId}/todos`), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text }),
+      });
+      if (!res.ok) throw new Error(await res.text());
+      const real: WorkspaceTodo = await res.json();
+      setTodos(prev => prev.map(t => t.id === tempId ? real : t));
+    } catch (err) {
+      console.error('failed to add todo', err);
+      setTodos(prev => prev.filter(t => t.id !== tempId));
+    }
+  }, [addInput, workspaceId]);
+
+  const toggleTodo = useCallback(async (todo: WorkspaceTodo) => {
+    if (workspaceId == null) return;
+    const next = !todo.completed;
+    setTodos(prev => prev.map(t => t.id === todo.id
+      ? { ...t, completed: next, completedAt: next ? new Date().toISOString() : null }
+      : t
+    ));
+    try {
+      const res = await fetch(api(`/api/workspaces/${workspaceId}/todos/${todo.id}`), {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ completed: next }),
+      });
+      if (!res.ok) throw new Error();
+      const real: WorkspaceTodo = await res.json();
+      setTodos(prev => prev.map(t => t.id === todo.id ? real : t));
+    } catch {
+      setTodos(prev => prev.map(t => t.id === todo.id ? todo : t));
+    }
+  }, [workspaceId]);
+
+  const deleteTodo = useCallback(async (todo: WorkspaceTodo) => {
+    if (workspaceId == null) return;
+    // Snapshot the original index so we can restore in place on failure,
+    // rather than appending to the end.
+    let originalIndex = -1;
+    setTodos(prev => {
+      originalIndex = prev.findIndex(t => t.id === todo.id);
+      return prev.filter(t => t.id !== todo.id);
+    });
+    try {
+      const res = await fetch(api(`/api/workspaces/${workspaceId}/todos/${todo.id}`), { method: 'DELETE' });
+      if (!res.ok) throw new Error();
+    } catch {
+      setTodos(prev => {
+        if (originalIndex < 0 || prev.some(t => t.id === todo.id)) return prev;
+        const next = [...prev];
+        next.splice(Math.min(originalIndex, next.length), 0, todo);
+        return next;
+      });
+    }
+  }, [workspaceId]);
+
+  const saveEdit = useCallback(async (todo: WorkspaceTodo) => {
+    const text = editText.trim();
+    setEditingId(null);
+    if (!text || text === todo.text || workspaceId == null) return;
+    setTodos(prev => prev.map(t => t.id === todo.id ? { ...t, text } : t));
+    try {
+      const res = await fetch(api(`/api/workspaces/${workspaceId}/todos/${todo.id}`), {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text }),
+      });
+      if (!res.ok) throw new Error();
+    } catch {
+      setTodos(prev => prev.map(t => t.id === todo.id ? { ...t, text: todo.text } : t));
+    }
+  }, [editText, workspaceId]);
+
+  const clearCompleted = useCallback(async () => {
+    if (workspaceId == null) return;
+    const done = todos.filter(t => t.completed);
+    if (done.length === 0) return;
+    setTodos(prev => prev.filter(t => !t.completed));
+    const results = await Promise.allSettled(
+      done.map(t => fetch(api(`/api/workspaces/${workspaceId}/todos/${t.id}`), { method: 'DELETE' }))
+    );
+    if (results.some(r => r.status === 'rejected' || (r.status === 'fulfilled' && !r.value.ok))) {
+      // Reconcile by refetching
+      fetch(api(`/api/workspaces/${workspaceId}/todos`))
+        .then(r => r.json())
+        .then((data: WorkspaceTodo[]) => setTodos(Array.isArray(data) ? data : []))
+        .catch(() => {});
+    }
+  }, [todos, workspaceId]);
+
+  const sorted = [...todos].sort((a, b) => {
+    if (a.completed !== b.completed) return a.completed ? 1 : -1;
+    if (!a.completed) return a.sortOrder - b.sortOrder;
+    const aT = a.completedAt ?? '';
+    const bT = b.completedAt ?? '';
+    return bT.localeCompare(aT);
+  });
+  const completedCount = sorted.filter(t => t.completed).length;
+
+  const chipHeight = 'h-7';
+  const chipShape = `${chipHeight} rounded-full inline-flex items-center gap-1.5 pl-2 pr-1 py-1 text-xs border whitespace-nowrap`;
+
+  return (
+    <div className="border-b border-zinc-800 bg-zinc-900/40 px-4 py-2 flex-shrink-0">
+      <div className="flex flex-wrap items-center gap-1.5 max-h-[30vh] overflow-y-auto">
+        {sorted.map(todo => {
+          const isEditing = editingId === todo.id;
+          const activeStyle = {
+            backgroundColor: `${color}22`,
+            borderColor: `${color}66`,
+            color: color,
+          };
+          const doneStyle = {
+            backgroundColor: 'rgba(39, 39, 42, 0.5)',
+            borderColor: 'rgba(63, 63, 70, 0.5)',
+            color: 'rgb(113, 113, 122)',
+          };
+          const style = todo.completed ? doneStyle : activeStyle;
+
+          return (
+            <div
+              key={todo.id}
+              className={`group ${chipShape}`}
+              style={style}
+            >
+              <button
+                onClick={() => toggleTodo(todo)}
+                className="w-3.5 h-3.5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors"
+                style={{
+                  borderColor: todo.completed ? color : `${color}aa`,
+                  backgroundColor: todo.completed ? color : 'transparent',
+                }}
+                aria-label={todo.completed ? 'Mark incomplete' : 'Mark complete'}
+              >
+                {todo.completed && <Check className="w-2.5 h-2.5 text-white" />}
+              </button>
+
+              {isEditing ? (
+                <input
+                  autoFocus
+                  value={editText}
+                  onChange={e => setEditText(e.target.value)}
+                  onBlur={() => saveEdit(todo)}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter') saveEdit(todo);
+                    if (e.key === 'Escape') setEditingId(null);
+                  }}
+                  className="bg-transparent focus:outline-none max-w-[240px]"
+                  style={{ color: 'inherit' }}
+                />
+              ) : (
+                <button
+                  onClick={() => { setEditingId(todo.id); setEditText(todo.text); }}
+                  className={`text-left truncate max-w-[200px] ${todo.completed ? 'line-through' : ''}`}
+                  style={{ color: 'inherit' }}
+                >
+                  {todo.text}
+                </button>
+              )}
+
+              <button
+                onClick={() => deleteTodo(todo)}
+                className="opacity-0 group-hover:opacity-100 transition-opacity rounded-full p-0.5 hover:bg-black/20 flex-shrink-0"
+                style={{ color: 'inherit' }}
+                aria-label="Delete todo"
+              >
+                <X className="w-3 h-3" />
+              </button>
+            </div>
+          );
+        })}
+
+        {/* Add chip */}
+        {adding ? (
+          <div className={`${chipShape} border-dashed border-zinc-600 text-zinc-300`}>
+            <Plus className="w-3 h-3 text-zinc-500 flex-shrink-0" />
+            <input
+              ref={addInputRef}
+              autoFocus
+              value={addInput}
+              onChange={e => setAddInput(e.target.value)}
+              onKeyDown={e => {
+                if (e.key === 'Enter') addTodo();
+                if (e.key === 'Escape') { setAddInput(''); setAdding(false); }
+              }}
+              onBlur={() => {
+                if (addInput.trim()) addTodo();
+                else setAdding(false);
+              }}
+              placeholder="todo…"
+              className="bg-transparent focus:outline-none text-xs placeholder:text-zinc-600 max-w-[200px]"
+            />
+          </div>
+        ) : (
+          <button
+            onClick={() => { if (workspaceId != null) setAdding(true); }}
+            disabled={workspaceId == null}
+            className={`${chipHeight} rounded-full inline-flex items-center gap-1 px-3 py-1 text-xs border border-dashed border-zinc-700 text-zinc-500 hover:text-zinc-300 hover:border-zinc-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap`}
+          >
+            <Plus className="w-3 h-3" />
+            {workspaceId == null ? 'Select a workspace' : 'add todo'}
+          </button>
+        )}
+
+        {/* Clear completed */}
+        {completedCount > 0 && (
+          <button
+            onClick={clearCompleted}
+            className="ml-auto text-[10px] text-zinc-500 hover:text-zinc-300 px-2 py-1 transition-colors whitespace-nowrap"
+          >
+            clear {completedCount} done
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/.next/standalone/src/hooks/use-benchmark.ts

@@ -56,6 +56,7 @@ export function useStartBenchmark() {
       categories?: string;
       noJudge?: boolean;
       model?: string;
+      concurrency?: number;
     }) => {
       const res = await fetch(api('/api/benchmark/run'), {
         method: 'POST',