apteva 0.4.31 → 0.4.41

package/src/web/components/tasks/TasksPage.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { TasksIcon, CloseIcon, RecurringIcon, ScheduledIcon, TaskOnceIcon } from "../common/Icons";
+import { Select } from "../common/Select";
 import { useAuth, useProjects } from "../../context";
 import { useTelemetry } from "../../context/TelemetryContext";
 import type { Task, TaskTrajectoryStep, ToolUseBlock, ToolResultBlock } from "../../types";
@@ -14,6 +15,7 @@ export function TasksPage({ onSelectAgent }: TasksPageProps) {
   const [tasks, setTasks] = useState<Task[]>([]);
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState<string>("all");
+  const [agentFilter, setAgentFilter] = useState<string>("all");
   const [selectedTask, setSelectedTask] = useState<Task | null>(null);
   const [loadingTask, setLoadingTask] = useState(false);
   const lastProcessedEventRef = useRef<string | null>(null);
@@ -87,9 +89,23 @@ export function TasksPage({ onSelectAgent }: TasksPageProps) {
     }
   }, [authFetch]);
 
+  // Extract unique agents from tasks for the agent filter
+  const uniqueAgents = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const t of tasks) {
+      const id = t.agentId || (t as any).agent_id;
+      const name = t.agentName || (t as any).agent_name;
+      if (id && name && !map.has(id)) {
+        map.set(id, name);
+      }
+    }
+    return Array.from(map.entries()).sort((a, b) => a[1].localeCompare(b[1]));
+  }, [tasks]);
+
   // Sort tasks: running first, then pending by next execution (soonest first), then completed/failed by date
   const sortedTasks = useMemo(() => {
-    return [...tasks].sort((a, b) => {
+    const filtered = agentFilter === "all" ? tasks : tasks.filter(t => (t.agentId || (t as any).agent_id) === agentFilter);
+    return [...filtered].sort((a, b) => {
       // Running tasks first
       if (a.status === "running" && b.status !== "running") return -1;
       if (b.status === "running" && a.status !== "running") return 1;
@@ -111,7 +127,7 @@ export function TasksPage({ onSelectAgent }: TasksPageProps) {
       const bDate = b.completed_at || b.executed_at || b.created_at;
       return new Date(bDate).getTime() - new Date(aDate).getTime();
     });
-  }, [tasks]);
+  }, [tasks, agentFilter]);
 
   const statusColors: Record<string, string> = {
     pending: "bg-yellow-500/20 text-yellow-400",
@@ -141,20 +157,36 @@ export function TasksPage({ onSelectAgent }: TasksPageProps) {
                 View tasks from all running agents
               </p>
             </div>
-            <div className="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
-              {filterOptions.map(opt => (
-                <button
-                  key={opt.value}
-                  onClick={() => setFilter(opt.value)}
-                  className={`px-3 py-1.5 rounded text-sm transition whitespace-nowrap ${
-                    filter === opt.value
-                      ? "bg-[#f97316] text-black"
-                      : "bg-[#1a1a1a] hover:bg-[#222]"
-                  }`}
-                >
-                  {opt.label}
-                </button>
-              ))}
+            <div className="flex items-center gap-3 flex-wrap pb-1">
+              <div className="flex gap-2 overflow-x-auto scrollbar-hide">
+                {filterOptions.map(opt => (
+                  <button
+                    key={opt.value}
+                    onClick={() => setFilter(opt.value)}
+                    className={`px-3 py-1.5 rounded text-sm transition whitespace-nowrap ${
+                      filter === opt.value
+                        ? "bg-[#f97316] text-black"
+                        : "bg-[#1a1a1a] hover:bg-[#222]"
+                    }`}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+              {uniqueAgents.length > 0 && (
+                <div className="w-48">
+                  <Select
+                    value={agentFilter}
+                    onChange={setAgentFilter}
+                    placeholder="All agents"
+                    compact
+                    options={[
+                      { value: "all", label: "All agents" },
+                      ...uniqueAgents.map(([id, name]) => ({ value: id, label: name })),
+                    ]}
+                  />
+                </div>
+              )}
             </div>
           </div>
 

package/src/web/components/telemetry/TelemetryPage.tsx

@@ -1,6 +1,10 @@
 import React, { useState, useEffect, useMemo, useRef, useCallback } from "react";
 import { Select } from "../common/Select";
 import { useTelemetryContext, useProjects, useAuth, type TelemetryEvent } from "../../context";
+import {
+  AreaChart, Area, BarChart, Bar,
+  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
+} from "recharts";
 
 interface TelemetryStats {
   total_events: number;
@@ -20,6 +24,15 @@ interface UsageByAgent {
   errors: number;
 }
 
+interface DailyUsage {
+  date: string;
+  input_tokens: number;
+  output_tokens: number;
+  llm_calls: number;
+  tool_calls: number;
+  errors: number;
+}
+
 // Helper to extract stats from a single event
 function extractEventStats(event: TelemetryEvent): {
   llm_calls: number;
@@ -50,6 +63,7 @@ export function TelemetryPage() {
   const [fetchedStats, setFetchedStats] = useState<TelemetryStats | null>(null);
   const [historicalEvents, setHistoricalEvents] = useState<TelemetryEvent[]>([]);
   const [fetchedUsage, setFetchedUsage] = useState<UsageByAgent[]>([]);
+  const [dailyUsage, setDailyUsage] = useState<DailyUsage[]>([]);
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState({
     level: "",
@@ -127,6 +141,18 @@ export function TelemetryPage() {
       const usageRes = await authFetch(`/api/telemetry/usage?${usageParams}`);
       const usageData = await usageRes.json();
       setFetchedUsage(usageData.usage || []);
+
+      // Fetch daily usage for charts
+      const dailyParams = new URLSearchParams();
+      dailyParams.set("group_by", "day");
+      if (projectParam) dailyParams.set("project_id", projectParam);
+      const dailyRes = await authFetch(`/api/telemetry/usage?${dailyParams}`);
+      const dailyData = await dailyRes.json();
+      // Sort by date ascending for charts
+      const sorted = (dailyData.usage || []).sort((a: DailyUsage, b: DailyUsage) =>
+        a.date.localeCompare(b.date)
+      );
+      setDailyUsage(sorted);
     } catch (e) {
       console.error("Failed to fetch telemetry:", e);
     }
@@ -371,6 +397,164 @@ export function TelemetryPage() {
           </div>
         )}
 
+        {/* Charts */}
+        {(() => {
+          // Use daily data if we have multiple days, otherwise aggregate events by hour
+          const useDaily = dailyUsage.length > 1;
+          const chartData = useDaily ? dailyUsage : (() => {
+            // Aggregate all visible events by hour
+            const buckets = new Map<string, { date: string; llm_calls: number; tool_calls: number; errors: number; input_tokens: number; output_tokens: number }>();
+            for (const event of allEvents) {
+              const d = new Date(event.timestamp);
+              const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")} ${String(d.getHours()).padStart(2, "0")}:00`;
+              if (!buckets.has(key)) {
+                buckets.set(key, { date: key, llm_calls: 0, tool_calls: 0, errors: 0, input_tokens: 0, output_tokens: 0 });
+              }
+              const b = buckets.get(key)!;
+              const s = extractEventStats(event);
+              b.llm_calls += s.llm_calls;
+              b.tool_calls += s.tool_calls;
+              b.errors += s.errors;
+              b.input_tokens += s.input_tokens;
+              b.output_tokens += s.output_tokens;
+            }
+            return Array.from(buckets.values()).sort((a, b) => a.date.localeCompare(b.date));
+          })();
+          const chartLabel = useDaily ? "Daily" : "Hourly";
+
+          if (chartData.length === 0) return null;
+
+          return (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
+            {/* Activity Chart */}
+            <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4">
+              <h3 className="text-sm font-medium text-[#888] mb-4">{chartLabel} Activity</h3>
+              <ResponsiveContainer width="100%" height={200}>
+                <AreaChart data={chartData}>
+                  <CartesianGrid strokeDasharray="3 3" stroke="#1a1a1a" />
+                  <XAxis
+                    dataKey="date"
+                    stroke="#444"
+                    tick={{ fill: "#666", fontSize: 11 }}
+                    tickFormatter={(v) => {
+                      if (!useDaily && v.includes(" ")) {
+                        return v.split(" ")[1];
+                      }
+                      const d = new Date(v + "T00:00:00");
+                      return `${d.getMonth() + 1}/${d.getDate()}`;
+                    }}
+                  />
+                  <YAxis stroke="#444" tick={{ fill: "#666", fontSize: 11 }} allowDecimals={false} />
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: "#111",
+                      border: "1px solid #333",
+                      borderRadius: "8px",
+                      fontSize: 12,
+                    }}
+                    labelStyle={{ color: "#888" }}
+                    cursor={{ stroke: "rgba(255,255,255,0.1)" }}
+                    labelFormatter={(v) => useDaily ? new Date(v + "T00:00:00").toLocaleDateString() : v}
+                  />
+                  <Legend
+                    wrapperStyle={{ fontSize: 11 }}
+                    iconType="circle"
+                    iconSize={8}
+                  />
+                  <Area
+                    type="monotone"
+                    dataKey="llm_calls"
+                    name="LLM Calls"
+                    stroke="#f97316"
+                    fill="#f97316"
+                    fillOpacity={0.15}
+                    strokeWidth={1.5}
+                  />
+                  <Area
+                    type="monotone"
+                    dataKey="tool_calls"
+                    name="Tool Calls"
+                    stroke="#fb923c"
+                    fill="#fb923c"
+                    fillOpacity={0.08}
+                    strokeWidth={1.5}
+                  />
+                  <Area
+                    type="monotone"
+                    dataKey="errors"
+                    name="Errors"
+                    stroke="#ef4444"
+                    fill="#ef4444"
+                    fillOpacity={0.1}
+                    strokeWidth={1.5}
+                  />
+                </AreaChart>
+              </ResponsiveContainer>
+            </div>
+
+            {/* Token Usage Chart */}
+            <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4">
+              <h3 className="text-sm font-medium text-[#888] mb-4">{chartLabel} Token Usage</h3>
+              <ResponsiveContainer width="100%" height={200}>
+                <BarChart data={chartData}>
+                  <CartesianGrid strokeDasharray="3 3" stroke="#1a1a1a" />
+                  <XAxis
+                    dataKey="date"
+                    stroke="#444"
+                    tick={{ fill: "#666", fontSize: 11 }}
+                    tickFormatter={(v) => {
+                      if (!useDaily && v.includes(" ")) {
+                        return v.split(" ")[1];
+                      }
+                      const d = new Date(v + "T00:00:00");
+                      return `${d.getMonth() + 1}/${d.getDate()}`;
+                    }}
+                  />
+                  <YAxis
+                    stroke="#444"
+                    tick={{ fill: "#666", fontSize: 11 }}
+                    tickFormatter={(v) => {
+                      if (v >= 1000000) return `${(v / 1000000).toFixed(1)}M`;
+                      if (v >= 1000) return `${(v / 1000).toFixed(0)}K`;
+                      return v;
+                    }}
+                  />
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: "#111",
+                      border: "1px solid #333",
+                      borderRadius: "8px",
+                      fontSize: 12,
+                    }}
+                    labelStyle={{ color: "#888" }}
+                    cursor={{ fill: "rgba(255,255,255,0.03)" }}
+                    labelFormatter={(v) => useDaily ? new Date(v + "T00:00:00").toLocaleDateString() : v}
+                    formatter={(value: number) => [value.toLocaleString(), undefined]}
+                  />
+                  <Legend
+                    wrapperStyle={{ fontSize: 11 }}
+                    iconType="circle"
+                    iconSize={8}
+                  />
+                  <Bar
+                    dataKey="input_tokens"
+                    name="Input Tokens"
+                    fill="#f97316"
+                    radius={[2, 2, 0, 0]}
+                  />
+                  <Bar
+                    dataKey="output_tokens"
+                    name="Output Tokens"
+                    fill="#ea580c"
+                    radius={[2, 2, 0, 0]}
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+          );
+        })()}
+
         {/* Usage by Agent */}
         {usage.length > 0 && (
           <div className="mb-6">

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

@@ -0,0 +1,313 @@
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Chat, convertApiMessages } from "@apteva/apteva-kit";
+import { useAgentActivity, useAuth, useProjects, useTelemetryContext } 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 { 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-[#666]">
+            {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-[#f97316]/10 text-[#f97316] text-sm font-medium hover:bg-[#f97316]/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-[#111] border border-[#222] 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-[#1a1a1a] transition"
+                      >
+                        <p className="text-sm font-medium truncate">{agent.name}</p>
+                        <p className="text-[10px] text-[#555]">{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-[#555] text-sm">Loading threads...</div>
+            ) : threads.length === 0 ? (
+              <div className="p-6 text-center text-[#555] text-sm">
+                <p>No threads yet</p>
+                <p className="mt-1 text-[#444]">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-[#666]">Loading messages...</div>
+            ) : (
+              <Chat
+                key={chatKey}
+                agentId="default"
+                apiUrl={`/api/agents/${chatAgentId}`}
+                threadId={chatThreadId}
+                initialMessages={initialMessages}
+                placeholder={`Message ${chatAgentName}...`}
+                headerTitle={chatAgentName}
+                variant="terminal"
+                showHeader={true}
+              />
+            )
+          ) : (
+            <div className="flex-1 flex items-center justify-center">
+              <div className="text-center text-[#555]">
+                <svg className="w-12 h-12 mx-auto mb-3 text-[#333]" 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-[#444] 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-[#f97316]/10"
+          : "hover:bg-[#151515]"
+      }`}
+    >
+      <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-[#555] 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-[#444]"
+          }`}
+        />
+        <span className="text-[11px] text-[#f97316]">{thread.agent_name}</span>
+        {thread.message_count != null && (
+          <>
+            <span className="text-[#333]">&middot;</span>
+            <span className="text-[10px] text-[#555]">{thread.message_count} msgs</span>
+          </>
+        )}
+      </div>
+      {activityText && (
+        <p className="text-[11px] text-[#555] 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>;
 }

package/src/web/context/ProjectContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react";
+import React, { createContext, useContext, useState, useEffect, useCallback, useMemo, type ReactNode } from "react";
 import { useAuth } from "./AuthContext";
 
 export interface Project {
@@ -189,7 +189,7 @@ export function ProjectProvider({ children }: ProjectProviderProps) {
     }
   }, [authLoading, projectsEnabled, refreshProjects]);
 
-  const value: ProjectContextValue = {
+  const value = useMemo<ProjectContextValue>(() => ({
     projects,
     currentProjectId,
     currentProject,
@@ -203,7 +203,7 @@ export function ProjectProvider({ children }: ProjectProviderProps) {
     updateProject,
     deleteProject,
     refreshProjects,
-  };
+  }), [projects, currentProjectId, currentProject, isLoading, error, unassignedCount, projectsEnabled, metaAgentEnabled, setCurrentProjectId, createProject, updateProject, deleteProject, refreshProjects]);
 
   return <ProjectContext.Provider value={value}>{children}</ProjectContext.Provider>;
 }