@jlongo78/agent-spaces 0.9.7 → 0.9.8

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/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',

package/.next/standalone/src/hooks/use-speech-recognition.ts

@@ -63,7 +63,8 @@ export function useSpeechRecognition(): UseSpeechRecognitionReturn {
       }
     };
 
-    recognition.onerror = () => {
+    recognition.onerror = (event: any) => {
+      console.error('[SpeechRecognition] error:', event.error, event.message);
       setIsListening(false);
     };
 

package/.next/standalone/src/lib/cortex/benchmark.ts

@@ -6,6 +6,17 @@ import type { ChildProcess } from 'node:child_process';
 
 let _access: any = null;
 
+/** Resolve the installed @spaces/cortex package root (managed install, symlink, etc.). */
+function resolveCortexPackageDir(): string | null {
+  try {
+    const { createRequire } = require('module') as typeof import('module');
+    const req = createRequire(path.join(process.cwd(), 'package.json'));
+    return path.dirname(req.resolve('@spaces/cortex/package.json'));
+  } catch {
+    return null;
+  }
+}
+
 export function getBenchmarkAccess(): any {
   if (_access) return _access;
 
@@ -14,11 +25,16 @@ export function getBenchmarkAccess(): any {
 
   const user = getCurrentUser();
   const { spacesDir } = getUserPaths(user);
+  const cortexPkgDir = resolveCortexPackageDir();
 
-  // Check candidate paths: user's cortex dir first, then the local dev results dir
+  // Check candidate paths in priority order:
+  //   1. User's cortex dir (where the run route could point --output)
+  //   2. Next standalone sibling — only meaningful in a dev layout
+  //   3. Addon's own results dir — where the CLI writes by default
   const candidates = [
     path.join(spacesDir, 'cortex', 'benchmark.db'),
     path.join(process.cwd(), 'tests', 'benchmark', 'results', 'benchmark.db'),
+    ...(cortexPkgDir ? [path.join(cortexPkgDir, 'tests', 'benchmark', 'results', 'benchmark.db')] : []),
   ];
 
   for (const dbPath of candidates) {

package/.next/standalone/src/lib/cortex/index.ts

@@ -52,5 +52,58 @@ export function hasCortexAddon(): boolean { return loadAddon() !== null; }
 // Re-export engine functions — delegate to addon or return safe fallbacks
 export async function getCortex() { return loadAddon()?.getCortex() ?? null; }
 export function isCortexAvailable(): boolean { return loadAddon()?.isCortexAvailable() ?? false; }
-export function resetCortex(): void { loadAddon()?.resetCortex(); }
+export function resetCortex(): void { _client = null; loadAddon()?.resetCortex(); }
 export type { CortexInstance } from './types';
+
+// --- Cortex Client (multi-server support) ---
+let _client: any = null;
+
+/**
+ * Get a CortexClient that wraps the local embedded engine + any remote connections
+ * from ~/.cortex/connections.json. Use this for search/teach/context operations
+ * that should fan out across all connected Cortex servers.
+ */
+export async function getCortexClient(): Promise<any | null> {
+  if (_client) return _client;
+
+  const addon = loadAddon();
+  if (!addon) return null;
+
+  const engine = await addon.getCortex();
+  if (!engine) return null;
+
+  try {
+    const { createClient, EmbeddedConnection, RemoteConnection, loadConfig } = addon;
+
+    // Build embedded connection from local engine
+    const embeddedConn = new EmbeddedConnection({
+      name: 'local',
+      domains: engine.domainRegistry.list(),
+      writable: true,
+      default: true,
+      primary: true,
+      engine,
+    });
+
+    // Load remote connections from config file
+    const connections: any[] = [embeddedConn];
+    try {
+      const config = loadConfig();
+      for (const c of config.connections) {
+        if (c.type === 'remote') {
+          connections.push(new RemoteConnection(c));
+        }
+        // Skip embedded configs — we already have our local engine
+      }
+    } catch {
+      // No connections.json or invalid — that's fine, just use embedded
+    }
+
+    _client = createClient({ connections });
+    return _client;
+  } catch (err) {
+    // Cortex client not available (old addon version?) — fall back
+    console.warn('[cortex] Client library not available, multi-server disabled:', err);
+    return null;
+  }
+}

package/.next/standalone/src/lib/db/queries.ts

@@ -1,9 +1,5 @@
-import path from 'path';
 import crypto from 'crypto';
 import { getDb } from './schema';
-import { getUserPaths } from '../config';
-import { getCurrentUser } from '../auth';
-import { scanCodexSessions } from '../codex/parser';
 import type { SessionWithMeta, Project, Workspace, Tag, SearchResult } from '@/types/claude';
 
 // ─── Projects ───────────────────────────────────────────────
@@ -517,87 +513,8 @@ function mapPane(row: any): PaneData {
   return { ...row, isPopout: !!row.isPopout, isCollaborating: !!row.isCollaborating };
 }
 
-function findLatestSessionIdForPane(db: ReturnType<typeof getDb>, cwd: string, agentType: string): string | null {
-  if (!cwd || !agentType || agentType === 'shell') return null;
-
-  try {
-    const resolved = path.resolve(cwd);
-    const row = db.prepare(`
-      SELECT s.session_id as sessionId
-      FROM sessions s
-      LEFT JOIN projects p ON p.id = s.project_id
-      WHERE s.agent_type = ?
-        AND (
-          s.project_path = ? OR s.project_path = ?
-          OR p.path = ? OR p.path = ?
-        )
-      ORDER BY s.modified DESC
-      LIMIT 1
-    `).get(agentType, cwd, resolved, cwd, resolved) as { sessionId: string } | undefined;
-
-    if (row?.sessionId) return row.sessionId;
-
-    if (agentType === 'codex') {
-      const paths = getUserPaths(getCurrentUser());
-      const latest = scanCodexSessions(paths.codexSessionsDir).find((session) => {
-        try {
-          return path.resolve(session.cwd) === resolved;
-        } catch {
-          return false;
-        }
-      });
-      if (latest?.id) return latest.id;
-    }
-
-    // Pi stores sessions as JSONL in .pi/sessions/ (project) or ~/.pi/agent/sessions/ (global).
-    // Check project-level first, then fall back to global.
-    if (agentType === 'pi') {
-      const fs = require('fs');
-      const dirs = [
-        path.join(resolved, '.pi', 'sessions'),
-        path.join(require('os').homedir(), '.pi', 'agent', 'sessions'),
-      ];
-      for (const dir of dirs) {
-        try {
-          if (!fs.existsSync(dir)) continue;
-          const files: string[] = fs.readdirSync(dir)
-            .filter((f: string) => f.endsWith('.jsonl'))
-            .sort((a: string, b: string) => {
-              // Sort by modification time descending (most recent first)
-              const aStat = fs.statSync(path.join(dir, a));
-              const bStat = fs.statSync(path.join(dir, b));
-              return bStat.mtimeMs - aStat.mtimeMs;
-            });
-          if (files.length > 0) {
-            return path.basename(files[0], '.jsonl');
-          }
-        } catch { /* ignore */ }
-      }
-    }
-
-    return null;
-  } catch {
-    return null;
-  }
-}
-
 function normalizePane(row: any): PaneData {
-  const pane = mapPane(row);
-
-  if (!pane.claudeSessionId || pane.claudeSessionId === 'new') {
-    const db = getDb();
-    const sessionId = findLatestSessionIdForPane(db, pane.cwd, pane.agentType);
-    if (sessionId) {
-      pane.claudeSessionId = sessionId;
-      try {
-        db.prepare('UPDATE panes SET claude_session_id = ? WHERE id = ?').run(sessionId, pane.id);
-      } catch {
-        // Ignore best-effort backfill failures during reads.
-      }
-    }
-  }
-
-  return pane;
+  return mapPane(row);
 }
 
 export function getPanesByWorkspace(workspaceId: number): PaneData[] {
@@ -651,11 +568,7 @@ export function createPane(pane: {
     baselineSha = execFileSync('git', ['rev-parse', 'HEAD'], { cwd: pane.cwd, encoding: 'utf-8', timeout: 3000 }).trim();
   } catch { /* not a git repo or git not available */ }
 
-  // Automatically find the most recent session for this agent+project if not specified
-  let sessId = pane.claudeSessionId || null;
-  if (!sessId || sessId === 'new') {
-    sessId = findLatestSessionIdForPane(db, pane.cwd, pane.agentType || 'shell');
-  }
+  const sessId = (pane.claudeSessionId && pane.claudeSessionId !== 'new') ? pane.claudeSessionId : null;
 
   db.prepare(`
     INSERT INTO panes (id, title, color, cwd, claude_session_id, agent_type, custom_command, sort_order, workspace_id, node_id, is_collaborating, diff_baseline_sha, custom_model_id)