apteva 0.4.32 → 0.4.44

package/src/web/components/tests/TestsPage.tsx

@@ -271,7 +271,7 @@ export function TestsPage() {
       running: "bg-blue-900/50 text-blue-400",
     };
     return (
-      <span className={`px-2 py-0.5 rounded text-xs font-medium ${colors[status] || "bg-[#222] text-[#666]"}`}>
+      <span className={`px-2 py-0.5 rounded text-xs font-medium ${colors[status] || "bg-[var(--color-surface-raised)] text-[var(--color-text-muted)]"}`}>
         {status.toUpperCase()}
       </span>
     );
@@ -297,7 +297,7 @@ export function TestsPage() {
       <div className="flex items-center justify-between mb-6">
         <div>
           <h1 className="text-xl font-bold">Tests</h1>
-          <p className="text-sm text-[#666] mt-1">
+          <p className="text-sm text-[var(--color-text-muted)] mt-1">
             Describe behavior, AI handles the rest
           </p>
         </div>
@@ -306,14 +306,14 @@ export function TestsPage() {
             <button
               onClick={handleRunAll}
               disabled={runningAll}
-              className="px-4 py-2 bg-[#1a1a1a] hover:bg-[#222] text-[#e0e0e0] rounded text-sm font-medium transition disabled:opacity-50"
+              className="px-4 py-2 bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] text-[var(--color-text)] rounded text-sm font-medium transition disabled:opacity-50"
             >
               {runningAll ? "Running..." : "Run All"}
             </button>
           )}
           <button
             onClick={openCreate}
-            className="px-4 py-2 bg-[#f97316] hover:bg-[#fb923c] text-white rounded text-sm font-medium transition"
+            className="px-4 py-2 bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-white rounded text-sm font-medium transition"
           >
             + New Test
           </button>
@@ -322,19 +322,19 @@ export function TestsPage() {
 
       {/* Test list */}
       {loading ? (
-        <div className="text-[#666] text-sm">Loading...</div>
+        <div className="text-[var(--color-text-muted)] text-sm">Loading...</div>
       ) : tests.length === 0 ? (
         <div className="text-center py-16">
-          <div className="text-[#333] text-4xl mb-4">
+          <div className="text-[var(--color-border-light)] text-4xl mb-4">
             <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
             </svg>
           </div>
-          <p className="text-[#666] mb-2">No tests yet</p>
-          <p className="text-xs text-[#555] mb-4">Describe what your agents should do and let AI verify it</p>
+          <p className="text-[var(--color-text-muted)] mb-2">No tests yet</p>
+          <p className="text-xs text-[var(--color-text-faint)] mb-4">Describe what your agents should do and let AI verify it</p>
           <button
             onClick={openCreate}
-            className="px-4 py-2 bg-[#f97316] hover:bg-[#fb923c] text-white rounded text-sm font-medium transition"
+            className="px-4 py-2 bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-white rounded text-sm font-medium transition"
           >
             Create your first test
           </button>
@@ -342,7 +342,7 @@ export function TestsPage() {
       ) : (
         <div className="space-y-3">
           {tests.map(tc => (
-            <div key={tc.id} className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4">
+            <div key={tc.id} className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4">
               <div className="flex items-start justify-between">
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 mb-1">
@@ -352,18 +352,18 @@ export function TestsPage() {
                       : tc.last_run && (<>
                           {statusBadge(tc.last_run.status)}
                           {tc.last_run.score != null && (
-                            <span className="text-xs text-[#888] font-mono">{tc.last_run.score}/10</span>
+                            <span className="text-xs text-[var(--color-text-secondary)] font-mono">{tc.last_run.score}/10</span>
                           )}
                         </>)
                     }
                   </div>
                   {tc.behavior && (
-                    <p className="text-xs text-[#888] mb-1.5 line-clamp-2">{tc.behavior}</p>
+                    <p className="text-xs text-[var(--color-text-secondary)] mb-1.5 line-clamp-2">{tc.behavior}</p>
                   )}
-                  <div className="text-xs text-[#666] space-y-0.5">
+                  <div className="text-xs text-[var(--color-text-muted)] space-y-0.5">
                     <div>
                       Agent:{" "}
-                      <span className="text-[#888]">
+                      <span className="text-[var(--color-text-secondary)]">
                         {tc.agent_name || (tc.last_run?.selected_agent_name
                           ? `${tc.last_run.selected_agent_name} (auto-selected)`
                           : "Auto (AI picks)")}
@@ -371,18 +371,18 @@ export function TestsPage() {
                     </div>
                     {tc.last_run?.generated_message && (
                       <div className="truncate">
-                        Message: <span className="text-[#888]">"{tc.last_run.generated_message}"</span>
+                        Message: <span className="text-[var(--color-text-secondary)]">"{tc.last_run.generated_message}"</span>
                       </div>
                     )}
                     {tc.input_message && !tc.last_run?.generated_message && (
                       <div className="truncate">
-                        Message: <span className="text-[#888]">"{tc.input_message}"</span>
+                        Message: <span className="text-[var(--color-text-secondary)]">"{tc.input_message}"</span>
                       </div>
                     )}
                     {tc.last_run && (
                       <div>
                         Last run:{" "}
-                        <span className="text-[#888]">
+                        <span className="text-[var(--color-text-secondary)]">
                           {tc.last_run.duration_ms ? `${(tc.last_run.duration_ms / 1000).toFixed(1)}s` : "---"}
                           {tc.last_run.judge_reasoning && ` --- "${tc.last_run.judge_reasoning.slice(0, 80)}${tc.last_run.judge_reasoning.length > 80 ? "..." : ""}"`}
                         </span>
@@ -393,7 +393,7 @@ export function TestsPage() {
                 <div className="flex items-center gap-1 ml-3 shrink-0">
                   <button
                     onClick={() => viewRuns(tc.id)}
-                    className="px-2 py-1 text-xs text-[#666] hover:text-[#888] hover:bg-[#1a1a1a] rounded transition"
+                    className="px-2 py-1 text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)] rounded transition"
                     title="View run history"
                   >
                     History
@@ -401,19 +401,19 @@ export function TestsPage() {
                   <button
                     onClick={() => handleRun(tc.id)}
                     disabled={runningTests.has(tc.id)}
-                    className="px-3 py-1 text-xs bg-[#1a1a1a] hover:bg-[#222] text-[#e0e0e0] rounded transition disabled:opacity-50"
+                    className="px-3 py-1 text-xs bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] text-[var(--color-text)] rounded transition disabled:opacity-50"
                   >
                     {runningTests.has(tc.id) ? "Running..." : "Run"}
                   </button>
                   <button
                     onClick={() => openEdit(tc)}
-                    className="px-2 py-1 text-xs text-[#666] hover:text-[#888] hover:bg-[#1a1a1a] rounded transition"
+                    className="px-2 py-1 text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)] rounded transition"
                   >
                     Edit
                   </button>
                   <button
                     onClick={() => handleDelete(tc.id)}
-                    className="px-2 py-1 text-xs text-[#666] hover:text-red-400 hover:bg-[#1a1a1a] rounded transition"
+                    className="px-2 py-1 text-xs text-[var(--color-text-muted)] hover:text-red-400 hover:bg-[var(--color-surface-raised)] rounded transition"
                   >
                     Delete
                   </button>
@@ -428,50 +428,50 @@ export function TestsPage() {
       {selectedRuns && (
         <div className="mt-6">
           <div className="flex items-center justify-between mb-3">
-            <h2 className="text-sm font-bold text-[#888]">Run History</h2>
+            <h2 className="text-sm font-bold text-[var(--color-text-secondary)]">Run History</h2>
             <button
               onClick={() => { setSelectedRuns(null); setExpandedRun(null); }}
-              className="text-xs text-[#666] hover:text-[#888]"
+              className="text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"
             >
               Close
             </button>
           </div>
           {selectedRuns.runs.length === 0 ? (
-            <p className="text-sm text-[#666]">No runs yet</p>
+            <p className="text-sm text-[var(--color-text-muted)]">No runs yet</p>
           ) : (
             <div className="space-y-2">
               {selectedRuns.runs.map(run => (
-                <div key={run.id} className="bg-[#0d0d0d] border border-[#1a1a1a] rounded p-3">
+                <div key={run.id} className="bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded p-3">
                   <div
                     className="flex items-center justify-between cursor-pointer"
                     onClick={() => setExpandedRun(expandedRun === run.id ? null : run.id)}
                   >
                     <div className="flex items-center gap-3">
                       {statusBadge(run.status)}
-                      <span className="text-xs text-[#666]">
+                      <span className="text-xs text-[var(--color-text-muted)]">
                         {run.duration_ms ? `${(run.duration_ms / 1000).toFixed(1)}s` : "---"}
                       </span>
                       {run.score != null && (
-                        <span className="text-xs text-[#888] font-mono">{run.score}/10</span>
+                        <span className="text-xs text-[var(--color-text-secondary)] font-mono">{run.score}/10</span>
                       )}
                       {run.selected_agent_name && (
-                        <span className="text-xs text-[#555]">
+                        <span className="text-xs text-[var(--color-text-faint)]">
                           Agent: {run.selected_agent_name}
                         </span>
                       )}
-                      <span className="text-xs text-[#555]">
+                      <span className="text-xs text-[var(--color-text-faint)]">
                         {new Date(run.created_at).toLocaleString()}
                       </span>
                     </div>
-                    <span className="text-xs text-[#555]">{expandedRun === run.id ? "---" : "+"}</span>
+                    <span className="text-xs text-[var(--color-text-faint)]">{expandedRun === run.id ? "---" : "+"}</span>
                   </div>
                   {expandedRun === run.id && (
                     <div className="mt-3 space-y-2">
                       {run.planner_reasoning && (
                         <div>
-                          <div className="text-xs text-[#666] mb-1">Planner:</div>
-                          <div className="text-sm text-[#aaa] bg-[#0a0a0a] p-2 rounded">
-                            {run.selected_agent_name && <span className="text-[#f97316]">{run.selected_agent_name}</span>}
+                          <div className="text-xs text-[var(--color-text-muted)] mb-1">Planner:</div>
+                          <div className="text-sm text-[var(--color-text-secondary)] bg-[var(--color-bg)] p-2 rounded">
+                            {run.selected_agent_name && <span className="text-[var(--color-accent)]">{run.selected_agent_name}</span>}
                             {run.selected_agent_name && " --- "}
                             {run.planner_reasoning}
                           </div>
@@ -479,26 +479,26 @@ export function TestsPage() {
                       )}
                       {run.generated_message && (
                         <div>
-                          <div className="text-xs text-[#666] mb-1">Generated Message:</div>
-                          <div className="text-sm text-[#aaa] bg-[#0a0a0a] p-2 rounded">"{run.generated_message}"</div>
+                          <div className="text-xs text-[var(--color-text-muted)] mb-1">Generated Message:</div>
+                          <div className="text-sm text-[var(--color-text-secondary)] bg-[var(--color-bg)] p-2 rounded">"{run.generated_message}"</div>
                         </div>
                       )}
                       {run.judge_reasoning && (
                         <div>
-                          <div className="text-xs text-[#666] mb-1">Judge:</div>
-                          <div className="text-sm text-[#aaa] bg-[#0a0a0a] p-2 rounded">{run.judge_reasoning}</div>
+                          <div className="text-xs text-[var(--color-text-muted)] mb-1">Judge:</div>
+                          <div className="text-sm text-[var(--color-text-secondary)] bg-[var(--color-bg)] p-2 rounded">{run.judge_reasoning}</div>
                         </div>
                       )}
                       {run.error && (
                         <div>
                           <div className="text-xs text-red-400 mb-1">Error:</div>
-                          <div className="text-sm text-red-300 bg-[#0a0a0a] p-2 rounded">{run.error}</div>
+                          <div className="text-sm text-red-300 bg-[var(--color-bg)] p-2 rounded">{run.error}</div>
                         </div>
                       )}
                       {run.agent_response && (
                         <div>
-                          <div className="text-xs text-[#666] mb-1">Agent Response (Thread):</div>
-                          <pre className="text-xs text-[#888] bg-[#0a0a0a] p-2 rounded overflow-auto max-h-64">
+                          <div className="text-xs text-[var(--color-text-muted)] mb-1">Agent Response (Thread):</div>
+                          <pre className="text-xs text-[var(--color-text-secondary)] bg-[var(--color-bg)] p-2 rounded overflow-auto max-h-64">
                             {run.agent_response}
                           </pre>
                         </div>
@@ -515,34 +515,34 @@ export function TestsPage() {
       {/* Create/Edit Form Modal */}
       {showForm && (
         <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center" onClick={() => setShowForm(false)}>
-          <div className="bg-[#111] border border-[#1a1a1a] rounded-lg w-full max-w-lg mx-4 p-6" onClick={e => e.stopPropagation()}>
+          <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg w-full max-w-lg mx-4 p-6" onClick={e => e.stopPropagation()}>
             <h2 className="text-lg font-bold mb-4">{editingTest ? "Edit Test" : "New Test"}</h2>
 
             <div className="space-y-4">
               <div>
-                <label className="block text-xs text-[#666] mb-1">Name</label>
+                <label className="block text-xs text-[var(--color-text-muted)] mb-1">Name</label>
                 <input
                   value={formName}
                   onChange={e => setFormName(e.target.value)}
                   placeholder="e.g. Social Media Posting"
-                  className="w-full bg-[#0a0a0a] border border-[#222] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#f97316]"
+                  className="w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded px-3 py-2 text-sm focus:outline-none focus:border-[var(--color-accent)]"
                 />
               </div>
 
               <div>
-                <label className="block text-xs text-[#666] mb-1">Behavior</label>
+                <label className="block text-xs text-[var(--color-text-muted)] mb-1">Behavior</label>
                 <textarea
                   value={formBehavior}
                   onChange={e => setFormBehavior(e.target.value)}
                   placeholder="Describe what should happen, e.g. 'When asked to post on social media, the agent creates a proper post with relevant hashtags and confirms it was published'"
                   rows={3}
-                  className="w-full bg-[#0a0a0a] border border-[#222] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#f97316] resize-none"
+                  className="w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded px-3 py-2 text-sm focus:outline-none focus:border-[var(--color-accent)] resize-none"
                 />
-                <p className="text-xs text-[#555] mt-1">AI will generate the test message and evaluate results based on this</p>
+                <p className="text-xs text-[var(--color-text-faint)] mt-1">AI will generate the test message and evaluate results based on this</p>
               </div>
 
               <div>
-                <label className="block text-xs text-[#666] mb-1">Agent</label>
+                <label className="block text-xs text-[var(--color-text-muted)] mb-1">Agent</label>
                 <Select
                   value={formAgentId}
                   onChange={setFormAgentId}
@@ -552,21 +552,21 @@ export function TestsPage() {
                     label: `${a.name} (${a.status})`,
                   }))}
                 />
-                <p className="text-xs text-[#555] mt-1">Leave empty to let AI choose the right agent</p>
+                <p className="text-xs text-[var(--color-text-faint)] mt-1">Leave empty to let AI choose the right agent</p>
               </div>
             </div>
 
             <div className="flex justify-end gap-2 mt-6">
               <button
                 onClick={() => setShowForm(false)}
-                className="px-4 py-2 text-sm text-[#888] hover:text-[#e0e0e0] transition"
+                className="px-4 py-2 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition"
               >
                 Cancel
               </button>
               <button
                 onClick={handleSave}
                 disabled={!formName || !formBehavior}
-                className="px-4 py-2 bg-[#f97316] hover:bg-[#fb923c] disabled:opacity-50 text-white rounded text-sm font-medium transition"
+                className="px-4 py-2 bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] disabled:opacity-50 text-white rounded text-sm font-medium transition"
               >
                 {editingTest ? "Save" : "Create"}
               </button>

package/src/web/components/threads/ThreadsPage.tsx

@@ -0,0 +1,315 @@
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Chat, convertApiMessages } from "@apteva/apteva-kit";
+import { useAgentActivity, useAuth, useProjects, useTelemetryContext, useTheme } from "../../context";
+import type { TelemetryEvent } from "../../context";
+import type { Agent, Route } from "../../types";
+
+interface Thread {
+  id: string;
+  title?: string;
+  created_at: string;
+  updated_at: string;
+  message_count?: number;
+  agent_id: string;
+  agent_name: string;
+}
+
+interface ThreadsPageProps {
+  agents: Agent[];
+  onNavigate?: (route: Route) => void;
+}
+
+export function ThreadsPage({ agents, onNavigate }: ThreadsPageProps) {
+  const { theme } = useTheme();
+  const { authFetch } = useAuth();
+  const { currentProjectId } = useProjects();
+  const { events: realtimeEvents, statusChangeCounter } = useTelemetryContext();
+
+  const [threads, setThreads] = useState<Thread[]>([]);
+  const [selectedThread, setSelectedThread] = useState<Thread | null>(null);
+  const [newChatAgent, setNewChatAgent] = useState<Agent | null>(null);
+  const [initialMessages, setInitialMessages] = useState<any[]>([]);
+  const [loadingThreads, setLoadingThreads] = useState(true);
+  const [loadingMessages, setLoadingMessages] = useState(false);
+  const [historicalActivities, setHistoricalActivities] = useState<TelemetryEvent[]>([]);
+  const [showAgentPicker, setShowAgentPicker] = useState(false);
+  const [newChatKey, setNewChatKey] = useState(0);
+
+  const filteredAgents = useMemo(() => {
+    if (currentProjectId === null) return agents;
+    if (currentProjectId === "unassigned") return agents.filter(a => !a.projectId);
+    return agents.filter(a => a.projectId === currentProjectId);
+  }, [agents, currentProjectId]);
+
+  const runningAgents = useMemo(() => filteredAgents.filter(a => a.status === "running"), [filteredAgents]);
+  const agentIds = useMemo(() => new Set(filteredAgents.map(a => a.id)), [filteredAgents]);
+
+  // Fetch consolidated threads
+  const fetchThreads = useCallback(async () => {
+    try {
+      const projectParam = currentProjectId ? `?project_id=${encodeURIComponent(currentProjectId)}` : "";
+      const [threadsRes, activityRes] = await Promise.all([
+        authFetch(`/api/threads${projectParam}`).catch(() => null),
+        authFetch(`/api/telemetry/events?type=thread_activity&limit=100${projectParam ? `&${projectParam}` : ""}`).catch(() => null),
+      ]);
+      if (threadsRes?.ok) {
+        const data = await threadsRes.json();
+        setThreads(data.threads || []);
+      }
+      if (activityRes?.ok) {
+        const data = await activityRes.json();
+        setHistoricalActivities(data.events || []);
+      }
+    } catch (e) {
+      console.error("Failed to fetch threads:", e);
+    } finally {
+      setLoadingThreads(false);
+    }
+  }, [authFetch, currentProjectId]);
+
+  useEffect(() => { fetchThreads(); }, [fetchThreads, statusChangeCounter]);
+
+  useEffect(() => {
+    const interval = setInterval(fetchThreads, 15000);
+    return () => clearInterval(interval);
+  }, [fetchThreads]);
+
+  // Open an existing thread
+  const openThread = useCallback(async (thread: Thread) => {
+    setNewChatAgent(null);
+    setLoadingMessages(true);
+    setSelectedThread(thread);
+    try {
+      const res = await authFetch(`/api/agents/${thread.agent_id}/threads/${thread.id}/messages`);
+      if (res.ok) {
+        const data = await res.json();
+        setInitialMessages(convertApiMessages(data.messages || []));
+      } else {
+        setInitialMessages([]);
+      }
+    } catch {
+      setInitialMessages([]);
+    }
+    setLoadingMessages(false);
+  }, [authFetch]);
+
+  // Start a new conversation with an agent
+  const startNewChat = (agent: Agent) => {
+    setSelectedThread(null);
+    setInitialMessages([]);
+    setNewChatAgent(agent);
+    setNewChatKey(k => k + 1);
+    setShowAgentPicker(false);
+  };
+
+  // Merge real-time + historical activity
+  const activities = useMemo(() => {
+    const realtimeThreadEvents = realtimeEvents.filter(e => e.type === "thread_activity" && !e.data?.parent_id);
+    const seen = new Set(realtimeThreadEvents.map(e => e.id));
+    const merged = [...realtimeThreadEvents];
+    for (const evt of historicalActivities) {
+      if (!seen.has(evt.id) && !evt.data?.parent_id) { merged.push(evt); seen.add(evt.id); }
+    }
+    return merged
+      .filter(e => agentIds.has(e.agent_id))
+      .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+      .slice(0, 100);
+  }, [realtimeEvents, historicalActivities, agentIds]);
+
+  // Group activities by thread_id
+  const activityByThread = useMemo(() => {
+    const map = new Map<string, TelemetryEvent[]>();
+    for (const evt of activities) {
+      const tid = evt.thread_id || evt.data?.thread_id as string;
+      if (tid) {
+        if (!map.has(tid)) map.set(tid, []);
+        map.get(tid)!.push(evt);
+      }
+    }
+    return map;
+  }, [activities]);
+
+  const runningCount = runningAgents.length;
+
+  // What's currently shown in chat
+  const chatAgentId = selectedThread?.agent_id || newChatAgent?.id;
+  const chatAgentName = selectedThread?.agent_name || newChatAgent?.name;
+  const chatThreadId = selectedThread?.id;
+  const chatKey = selectedThread
+    ? `${selectedThread.agent_id}-${selectedThread.id}`
+    : newChatAgent
+      ? `new-${newChatAgent.id}-${newChatKey}`
+      : null;
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden">
+      {/* Header */}
+      <div className="px-6 pt-6 pb-4 shrink-0">
+        <div className="flex items-center justify-between">
+          <h1 className="text-xl font-semibold">Threads</h1>
+          <span className="text-sm text-[var(--color-text-muted)]">
+            {threads.length} threads from {runningCount} running agents
+          </span>
+        </div>
+      </div>
+
+      {/* Messenger layout: 1/4 threads | 3/4 chat */}
+      <div className="flex-1 flex min-h-0 overflow-hidden">
+        {/* Thread list — 1/4 */}
+        <div className="w-1/4 min-w-[260px] max-w-[360px] flex flex-col overflow-hidden">
+          {/* New conversation button */}
+          <div className="p-2 shrink-0">
+            <div className="relative">
+              <button
+                onClick={() => setShowAgentPicker(!showAgentPicker)}
+                disabled={runningAgents.length === 0}
+                className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-[var(--color-accent-10)] text-[var(--color-accent)] text-sm font-medium hover:bg-[var(--color-accent-20)] transition disabled:opacity-30 disabled:cursor-not-allowed"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                </svg>
+                New conversation
+              </button>
+
+              {/* Agent picker dropdown */}
+              {showAgentPicker && (
+                <>
+                  <div className="fixed inset-0 z-40" onClick={() => setShowAgentPicker(false)} />
+                  <div className="absolute top-full left-0 right-0 mt-1 bg-[var(--color-surface)] border border-[var(--color-border-light)] rounded-lg shadow-xl z-50 max-h-60 overflow-auto">
+                    {runningAgents.map(agent => (
+                      <button
+                        key={agent.id}
+                        onClick={() => startNewChat(agent)}
+                        className="w-full text-left px-3 py-2.5 hover:bg-[var(--color-surface-raised)] transition"
+                      >
+                        <p className="text-sm font-medium truncate">{agent.name}</p>
+                        <p className="text-[10px] text-[var(--color-text-faint)]">{agent.provider} · {agent.model}</p>
+                      </button>
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+
+          <div className="flex-1 overflow-auto px-2 pb-2">
+            {loadingThreads ? (
+              <div className="p-6 text-center text-[var(--color-text-faint)] text-sm">Loading threads...</div>
+            ) : threads.length === 0 ? (
+              <div className="p-6 text-center text-[var(--color-text-faint)] text-sm">
+                <p>No threads yet</p>
+                <p className="mt-1 text-[var(--color-text-faint)]">Start a conversation or wait for agents</p>
+              </div>
+            ) : (
+              <div className="space-y-0.5">
+                {threads.map(thread => (
+                  <ThreadRow
+                    key={`${thread.agent_id}-${thread.id}`}
+                    thread={thread}
+                    selected={selectedThread?.id === thread.id && selectedThread?.agent_id === thread.agent_id}
+                    activities={activityByThread.get(thread.id) || []}
+                    onSelect={() => openThread(thread)}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Chat — 3/4 */}
+        <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+          {chatAgentId && chatKey ? (
+            loadingMessages ? (
+              <div className="flex-1 flex items-center justify-center text-[var(--color-text-muted)]">Loading messages...</div>
+            ) : (
+              <Chat
+                key={chatKey}
+                agentId="default"
+                apiUrl={`/api/agents/${chatAgentId}`}
+                threadId={chatThreadId}
+                initialMessages={initialMessages}
+                placeholder={`Message ${chatAgentName}...`}
+                headerTitle={chatAgentName}
+                variant="terminal"
+                theme={theme.id as "light" | "dark"}
+                showHeader={true}
+              />
+            )
+          ) : (
+            <div className="flex-1 flex items-center justify-center">
+              <div className="text-center text-[var(--color-text-faint)]">
+                <svg className="w-12 h-12 mx-auto mb-3 text-[var(--color-border-light)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+                </svg>
+                <p className="text-sm">Select a thread or start a new conversation</p>
+                <p className="text-xs text-[var(--color-text-faint)] mt-1">Chat with any running agent</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// --- Thread Row ---
+
+function ThreadRow({ thread, selected, activities, onSelect }: {
+  thread: Thread;
+  selected: boolean;
+  activities: TelemetryEvent[];
+  onSelect: () => void;
+}) {
+  const { isActive } = useAgentActivity(thread.agent_id);
+  const latestActivity = activities[0];
+  const activityText = latestActivity?.data?.activity as string | undefined;
+
+  return (
+    <button
+      onClick={onSelect}
+      className={`w-full text-left px-3 py-2.5 rounded-lg transition ${
+        selected
+          ? "bg-[var(--color-accent-10)]"
+          : "hover:bg-[var(--color-bg-secondary)]"
+      }`}
+    >
+      <div className="flex items-center justify-between gap-2 mb-1">
+        <span className="text-sm font-medium truncate">
+          {thread.title || `Thread ${thread.id.slice(0, 8)}`}
+        </span>
+        <span className="text-[10px] text-[var(--color-text-faint)] shrink-0">{timeAgo(thread.updated_at)}</span>
+      </div>
+      <div className="flex items-center gap-1.5">
+        <span
+          className={`w-1.5 h-1.5 rounded-full shrink-0 ${
+            isActive ? "bg-green-400 animate-pulse" : "bg-[var(--color-scrollbar)]"
+          }`}
+        />
+        <span className="text-[11px] text-[var(--color-accent)]">{thread.agent_name}</span>
+        {thread.message_count != null && (
+          <>
+            <span className="text-[var(--color-border-light)]">&middot;</span>
+            <span className="text-[10px] text-[var(--color-text-faint)]">{thread.message_count} msgs</span>
+          </>
+        )}
+      </div>
+      {activityText && (
+        <p className="text-[11px] text-[var(--color-text-faint)] truncate mt-1">{activityText}</p>
+      )}
+    </button>
+  );
+}
+
+// --- Helpers ---
+
+function timeAgo(timestamp: string): string {
+  const seconds = Math.floor((Date.now() - new Date(timestamp).getTime()) / 1000);
+  if (seconds < 5) return "just now";
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}

package/src/web/context/AuthContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect, useCallback, useRef, type ReactNode } from "react";
+import React, { createContext, useContext, useState, useEffect, useCallback, useMemo, useRef, type ReactNode } from "react";
 
 interface User {
   id: string;
@@ -216,7 +216,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
     return () => clearInterval(refreshInterval);
   }, [accessToken, refreshTokenInternal]);
 
-  const value: AuthContextValue = {
+  const value = useMemo<AuthContextValue>(() => ({
     user,
     isAuthenticated: !!user,
     isLoading,
@@ -230,7 +230,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
     refreshToken,
     checkAuth,
     authFetch,
-  };
+  }), [user, isLoading, hasUsers, isDev, accessToken, onboardingComplete, setOnboardingComplete, login, logout, refreshToken, checkAuth, authFetch]);
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }