apteva 0.4.44 → 0.4.51

package/src/routes/api/telemetry.ts

@@ -34,6 +34,13 @@ export async function handleTelemetryRoutes(
         return json({ error: "agent_id and events are required" }, 400);
       }
 
+      // Debug: log raw incoming events
+      for (const event of body.events) {
+        if (event.category === "LLM") {
+          console.log(`[telemetry] RAW LLM event from ${body.agent_id}: ${JSON.stringify(event)}`);
+        }
+      }
+
       // Filter out debug events - too noisy
       const filteredEvents = body.events.filter(e => e.level !== "debug");
 
@@ -47,7 +54,16 @@ export async function handleTelemetryRoutes(
             if (event.category === "LLM" && event.data) {
               const inputTokens = (event.data.input_tokens as number) || 0;
               const outputTokens = (event.data.output_tokens as number) || 0;
-              (event as any).cost = (inputTokens * pricing.input_cost + outputTokens * pricing.output_cost) / 1_000_000;
+              const cacheCreationTokens = (event.data.cache_creation_tokens as number) || 0;
+              const cacheReadTokens = (event.data.cache_read_tokens as number) || 0;
+              const reasoningTokens = (event.data.reasoning_tokens as number) || 0;
+              (event as any).cost = (
+                inputTokens * pricing.input_cost +
+                outputTokens * pricing.output_cost +
+                cacheCreationTokens * pricing.cache_creation_cost +
+                cacheReadTokens * pricing.cache_read_cost +
+                reasoningTokens * pricing.output_cost
+              ) / 1_000_000;
             }
           }
         }
@@ -69,6 +85,7 @@ export async function handleTelemetryRoutes(
           data: e.data,
           duration_ms: e.duration_ms,
           error: e.error,
+          cost: (e as any).cost as number | undefined,
         }));
         telemetryBroadcaster.broadcast(broadcastEvents);
       }
@@ -134,7 +151,7 @@ export async function handleTelemetryRoutes(
       project_id: projectIdParam === "null" ? null : projectIdParam || undefined,
       since: url.searchParams.get("since") || undefined,
       until: url.searchParams.get("until") || undefined,
-      group_by: (url.searchParams.get("group_by") as "agent" | "day") || undefined,
+      group_by: (url.searchParams.get("group_by") as "agent" | "day" | "project") || undefined,
     });
     return json({ usage });
   }
@@ -147,6 +164,8 @@ export async function handleTelemetryRoutes(
     const stats = TelemetryDB.getStats({
       agentId,
       projectId: projectIdParam === "null" ? null : projectIdParam || undefined,
+      since: url.searchParams.get("since") || undefined,
+      until: url.searchParams.get("until") || undefined,
     });
     return json({ stats });
   }

package/src/server.ts

@@ -34,6 +34,7 @@ export interface TelemetryEvent {
   data?: Record<string, unknown>;
   duration_ms?: number;
   error?: string;
+  cost?: number;
 }
 
 class TelemetryBroadcaster {
@@ -357,7 +358,7 @@ const server = Bun.serve({
   development: false, // Suppress "Started server" message
   idleTimeout: 255, // Max value - prevents SSE connections from timing out
 
-  async fetch(req: Request): Promise<Response> {
+  async fetch(req: Request, bunServer: Server): Promise<Response | undefined> {
     const url = new URL(req.url);
     const path = url.pathname;
 
@@ -367,6 +368,19 @@ const server = Bun.serve({
       console.log(`[${req.method}] ${path}${params}`);
     }
 
+    // WebSocket upgrade: /api/agents/:id/voice → proxy to agent binary
+    const voiceMatch = path.match(/^\/api\/agents\/([^/]+)\/voice$/);
+    if (voiceMatch && req.headers.get("upgrade")?.toLowerCase() === "websocket") {
+      const agentId = voiceMatch[1];
+      const agent = AgentDB.findById(agentId);
+      if (!agent || agent.status !== "running" || !agent.port) {
+        return new Response("Agent not available", { status: 400 });
+      }
+      const upgraded = bunServer.upgrade(req, { data: { agentId: agent.id, agentPort: agent.port } });
+      if (upgraded) return undefined;
+      return new Response("WebSocket upgrade failed", { status: 500 });
+    }
+
     // CORS headers - configurable origins
     const origin = req.headers.get("Origin") || "";
     const allowedOrigins = process.env.CORS_ORIGINS?.split(",") || [];
@@ -436,6 +450,44 @@ const server = Bun.serve({
     // Serve static files (React app)
     return serveStatic(req, path);
   },
+
+  // WebSocket proxy for agent voice/realtime
+  websocket: {
+    open(ws: any) {
+      const { agentId, agentPort } = ws.data;
+      const agentWs = new WebSocket(`ws://localhost:${agentPort}/voice`);
+
+      agentWs.onopen = () => {
+        console.log(`[WS] Voice proxy connected: agent=${agentId} port=${agentPort}`);
+      };
+      agentWs.onmessage = (event: MessageEvent) => {
+        try { ws.send(event.data); } catch {}
+      };
+      agentWs.onclose = (event: CloseEvent) => {
+        console.log(`[WS] Agent disconnected: agent=${agentId} code=${event.code}`);
+        ws.close(event.code, event.reason);
+      };
+      agentWs.onerror = () => {
+        ws.close(1011, "Agent WebSocket error");
+      };
+
+      // Store agent WS on the client WS for message/close handlers
+      ws.data.agentWs = agentWs;
+    },
+    message(ws: any, message: string | Buffer) {
+      const agentWs = ws.data.agentWs as WebSocket;
+      if (agentWs?.readyState === WebSocket.OPEN) {
+        agentWs.send(message);
+      }
+    },
+    close(ws: any, code: number, reason: string) {
+      const agentWs = ws.data.agentWs as WebSocket;
+      if (agentWs && agentWs.readyState !== WebSocket.CLOSED) {
+        agentWs.close(code, reason);
+      }
+      console.log(`[WS] Client disconnected: agent=${ws.data.agentId} code=${code}`);
+    },
+  },
 });
 
 const serverUrl = `http://localhost:${PORT}`;

package/src/web/App.tsx

@@ -241,7 +241,7 @@ function AppContent() {
   }
 
   return (
-    <div className="h-screen font-mono flex flex-col overflow-hidden" style={{ backgroundColor: "var(--color-bg)", color: "var(--color-text)" }}>
+    <div className="h-screen flex flex-col overflow-hidden" style={{ backgroundColor: "var(--color-bg)", color: "var(--color-text)" }}>
       <Header onMenuClick={() => setMobileMenuOpen(true)} agents={agents} />
 
       {startError && (
@@ -314,7 +314,7 @@ function AppContent() {
 
           {route === "tests" && <TestsPage />}
 
-          {route === "telemetry" && <TelemetryPage />}
+          {route === "analytics" && <TelemetryPage />}
 
           {route === "api" && <ApiDocsPage />}
           </Suspense>

package/src/web/components/agents/AgentCard.tsx

@@ -34,10 +34,10 @@ export const AgentCard = React.memo(function AgentCard({ agent, selected, onSele
   return (
     <div
       onClick={onSelect}
-      className={`bg-[var(--color-surface)] rounded p-5 border transition cursor-pointer flex flex-col h-full ${
+      className={`bg-[var(--color-surface)] card p-5 transition cursor-pointer flex flex-col h-full ${
         selected
-          ? 'border-[var(--color-accent)]'
-          : 'border-[var(--color-border)] hover:border-[var(--color-border-light)]'
+          ? '!border-[var(--color-accent)]'
+          : 'hover:border-[var(--color-border-light)]'
       }`}
     >
       <div className="flex items-start justify-between mb-3">
@@ -62,7 +62,8 @@ export const AgentCard = React.memo(function AgentCard({ agent, selected, onSele
           {enabledFeatures.map(({ key, icon: Icon, label }) => (
             <span
               key={key}
-              className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-[var(--color-accent-10)] text-[var(--color-accent-70)] text-xs"
+              className="inline-flex items-center gap-1 px-2 py-0.5 bg-[var(--color-accent-10)] text-[var(--color-accent-70)] text-xs"
+              style={{ borderRadius: "var(--radius-badge)" }}
               title={label}
             >
               <Icon className="w-3 h-3" />
@@ -143,7 +144,7 @@ export const AgentCard = React.memo(function AgentCard({ agent, selected, onSele
       <button
         onClick={onToggle}
         disabled={agent.status === "starting" || agent.status === "stopping"}
-        className={`w-full px-3 py-1.5 rounded text-sm font-medium transition mt-auto ${
+        className={`w-full px-3 py-1.5 btn text-sm font-medium transition mt-auto ${
           agent.status === "starting" || agent.status === "stopping"
             ? "bg-[var(--color-surface-raised)] text-[var(--color-text-muted)] cursor-wait"
             : agent.status === "running"
@@ -160,7 +161,7 @@ export const AgentCard = React.memo(function AgentCard({ agent, selected, onSele
 function StatusBadge({ status, isActive, activityLabel }: { status: Agent["status"]; isActive?: boolean; activityLabel?: string }) {
   if (status === "running" && isActive && activityLabel) {
     return (
-      <span className="px-2 py-1 rounded text-xs font-medium bg-green-500/20 text-green-400 animate-pulse">
+      <span className="px-2 py-1 text-xs font-medium bg-green-500/20 text-green-400 animate-pulse" style={{ borderRadius: "var(--radius-badge)" }}>
         {activityLabel}
       </span>
     );
@@ -170,13 +171,14 @@ function StatusBadge({ status, isActive, activityLabel }: { status: Agent["statu
 
   return (
     <span
-      className={`px-2 py-1 rounded text-xs font-medium ${
+      className={`px-2 py-1 text-xs font-medium ${
         isTransitioning
           ? "bg-yellow-500/20 text-yellow-400 animate-pulse"
           : status === "running"
             ? "bg-[#3b82f6]/20 text-[#3b82f6]"
             : "bg-[var(--color-surface-raised)] text-[var(--color-text-muted)]"
       }`}
+      style={{ borderRadius: "var(--radius-badge)" }}
     >
       {status}
     </span>

package/src/web/components/agents/AgentPanel.tsx

@@ -123,6 +123,7 @@ function ChatTab({ agent, onStartAgent }: { agent: Agent; onStartAgent: (e?: Rea
         variant="terminal"
         theme={theme.id as "light" | "dark"}
         headerTitle={agent.name}
+        enableVoice={!!agent.features.realtime}
       />
     );
   }
@@ -328,6 +329,9 @@ function TasksTab({ agent }: { agent: Agent }) {
   const [showCreateForm, setShowCreateForm] = useState(false);
   const [executing, setExecuting] = useState(false);
   const [deleting, setDeleting] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [editForm, setEditForm] = useState({ title: "", description: "", type: "once" as "once" | "recurring", priority: 5, execute_at: "", recurrence: "" });
   const { confirm, ConfirmDialog } = useConfirm();
   const { events } = useTelemetry({ agent_id: agent.id, category: "task" });
 
@@ -428,6 +432,51 @@ function TasksTab({ agent }: { agent: Agent }) {
     }
   };
 
+  const startEditing = (task: Task) => {
+    setEditForm({
+      title: task.title,
+      description: task.description || "",
+      type: task.type as "once" | "recurring",
+      priority: task.priority,
+      execute_at: task.execute_at ? new Date(task.execute_at).toISOString().slice(0, 16) : "",
+      recurrence: task.recurrence || "",
+    });
+    setEditing(true);
+  };
+
+  const handleUpdateTask = async () => {
+    if (!selectedTask || saving) return;
+    setSaving(true);
+    try {
+      const body: Record<string, unknown> = {
+        title: editForm.title.trim(),
+        description: editForm.description.trim() || undefined,
+        type: editForm.type,
+        priority: editForm.priority,
+      };
+      if (editForm.type === "once" && editForm.execute_at) {
+        body.execute_at = new Date(editForm.execute_at).toISOString();
+      }
+      if (editForm.type === "recurring" && editForm.recurrence.trim()) {
+        body.recurrence = editForm.recurrence.trim();
+      }
+      const res = await authFetch(`/api/tasks/${agent.id}/${selectedTask.id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (res.ok) {
+        setEditing(false);
+        setSelectedTask(null);
+        fetchTasks();
+      }
+    } catch (e) {
+      console.error("Failed to update task:", e);
+    } finally {
+      setSaving(false);
+    }
+  };
+
   // Refetch when agent changes, filter changes, or task telemetry arrives
   useEffect(() => {
     setLoading(true);
@@ -493,73 +542,182 @@ function TasksTab({ agent }: { agent: Agent }) {
         {/* Back button + actions */}
         <div className="px-4 pt-3 pb-2 border-b border-[var(--color-border)] shrink-0 flex items-center justify-between">
           <button
-            onClick={() => setSelectedTask(null)}
+            onClick={() => { setSelectedTask(null); setEditing(false); }}
             className="text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text)] transition flex items-center gap-1"
           >
-            <span>←</span> Back to tasks
+            <span>←</span> {editing ? "Cancel" : "Back to tasks"}
           </button>
           <div className="flex items-center gap-2">
-            {(selectedTask.status === "pending" || selectedTask.status === "completed") && (
-              <button
-                onClick={handleExecuteTask}
-                disabled={executing}
-                title="Execute now"
-                className="text-[var(--color-accent)] hover:opacity-80 transition disabled:opacity-50"
-              >
-                <svg className="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-              </button>
+            {editing ? (
+              <>
+                <button
+                  onClick={() => setEditing(false)}
+                  className="text-[var(--color-text-muted)] hover:text-[var(--color-text)] text-sm transition"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleUpdateTask}
+                  disabled={saving || !editForm.title.trim()}
+                  className="px-3 py-1 rounded text-sm bg-[var(--color-accent)] text-black hover:opacity-90 transition disabled:opacity-50"
+                >
+                  {saving ? "Saving..." : "Save"}
+                </button>
+              </>
+            ) : (
+              <>
+                {(selectedTask.status === "pending" || selectedTask.status === "completed" || selectedTask.status === "failed") && (
+                  <button
+                    onClick={() => startEditing(selectedTask)}
+                    title="Edit task"
+                    className="text-[var(--color-text-muted)] hover:text-[var(--color-accent)] transition"
+                  >
+                    <svg className="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
+                  </button>
+                )}
+                {(selectedTask.status === "pending" || selectedTask.status === "completed") && (
+                  <button
+                    onClick={handleExecuteTask}
+                    disabled={executing}
+                    title="Execute now"
+                    className="text-[var(--color-accent)] hover:opacity-80 transition disabled:opacity-50"
+                  >
+                    <svg className="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                  </button>
+                )}
+                <button
+                  onClick={handleDeleteTask}
+                  disabled={deleting}
+                  title="Delete task"
+                  className="text-red-400 hover:text-red-300 transition disabled:opacity-50"
+                >
+                  <svg className="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+                </button>
+              </>
             )}
-            <button
-              onClick={handleDeleteTask}
-              disabled={deleting}
-              title="Delete task"
-              className="text-red-400 hover:text-red-300 transition disabled:opacity-50"
-            >
-              <svg className="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
-            </button>
           </div>
         </div>
 
         {/* Task detail content */}
         <div className="flex-1 overflow-auto p-4 space-y-4">
+          {(() => {
+            const inputClass = "w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded px-2 py-1.5 text-sm focus:outline-none focus:border-[var(--color-accent)] text-[var(--color-text)]";
+            return <>
           {/* Title & Status */}
           <div>
             <div className="flex items-start justify-between gap-2 mb-1">
-              <h3 className="text-lg font-medium">{selectedTask.title}</h3>
-              <span className={`px-2 py-1 rounded text-xs font-medium flex-shrink-0 ${statusColors[selectedTask.status]}`}>
-                {selectedTask.status}
-              </span>
+              {editing ? (
+                <input
+                  type="text"
+                  value={editForm.title}
+                  onChange={e => setEditForm({ ...editForm, title: e.target.value })}
+                  className={`${inputClass} text-lg font-medium`}
+                  placeholder="Task title"
+                />
+              ) : (
+                <h3 className="text-lg font-medium">{selectedTask.title}</h3>
+              )}
+              {!editing && (
+                <span className={`px-2 py-1 rounded text-xs font-medium flex-shrink-0 ${statusColors[selectedTask.status]}`}>
+                  {selectedTask.status}
+                </span>
+              )}
             </div>
           </div>
 
           {/* Description */}
-          {selectedTask.description && (
+          {editing ? (
+            <div>
+              <h4 className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider mb-1">Description</h4>
+              <textarea
+                value={editForm.description}
+                onChange={e => setEditForm({ ...editForm, description: e.target.value })}
+                className={`${inputClass} resize-none`}
+                rows={3}
+                placeholder="Task description..."
+              />
+            </div>
+          ) : selectedTask.description ? (
             <div>
               <h4 className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider mb-1">Description</h4>
               <p className="text-sm text-[var(--color-text-secondary)] whitespace-pre-wrap">{selectedTask.description}</p>
             </div>
-          )}
+          ) : null}
 
           {/* Metadata */}
-          <div className="grid grid-cols-2 gap-3 text-sm">
+          {editing ? (
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider mb-1 block">Type</label>
+                <select
+                  value={editForm.type}
+                  onChange={e => setEditForm({ ...editForm, type: e.target.value as "once" | "recurring" })}
+                  className={inputClass}
+                >
+                  <option value="once">One-time</option>
+                  <option value="recurring">Recurring</option>
+                </select>
+              </div>
+              <div>
+                <label className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider mb-1 block">Priority</label>
+                <input
+                  type="number"
+                  min={1}
+                  max={10}
+                  value={editForm.priority}
+                  onChange={e => setEditForm({ ...editForm, priority: Number(e.target.value) })}
+                  className={inputClass}
+                />
+              </div>
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 gap-3 text-sm">
+              <div>
+                <span className="text-[var(--color-text-muted)]">Type</span>
+                <p className="capitalize">{selectedTask.type}</p>
+              </div>
+              <div>
+                <span className="text-[var(--color-text-muted)]">Priority</span>
+                <p>{selectedTask.priority}</p>
+              </div>
+              {selectedTask.recurrence && (
+                <div>
+                  <span className="text-[var(--color-text-muted)]">Recurrence</span>
+                  <p>{formatCron(selectedTask.recurrence)}</p>
+                  <p className="text-xs text-[var(--color-text-faint)] mt-0.5 font-mono">{selectedTask.recurrence}</p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Schedule (edit mode) */}
+          {editing && editForm.type === "once" && (
             <div>
-              <span className="text-[var(--color-text-muted)]">Type</span>
-              <p className="capitalize">{selectedTask.type}</p>
+              <label className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider mb-1 block">Schedule</label>
+              <input
+                type="datetime-local"
+                value={editForm.execute_at}
+                onChange={e => setEditForm({ ...editForm, execute_at: e.target.value })}
+                className={inputClass}
+              />
             </div>
+          )}
+          {editing && editForm.type === "recurring" && (
             <div>
-              <span className="text-[var(--color-text-muted)]">Priority</span>
-              <p>{selectedTask.priority}</p>
+              <label className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider mb-1 block">Cron Schedule</label>
+              <input
+                type="text"
+                value={editForm.recurrence}
+                onChange={e => setEditForm({ ...editForm, recurrence: e.target.value })}
+                className={`${inputClass} font-mono`}
+                placeholder="*/30 * * * *"
+              />
+              <p className="text-xs text-[var(--color-text-faint)] mt-1">e.g. */30 * * * * = every 30 min</p>
             </div>
-            {selectedTask.recurrence && (
-              <div>
-                <span className="text-[var(--color-text-muted)]">Recurrence</span>
-                <p>{formatCron(selectedTask.recurrence)}</p>
-                <p className="text-xs text-[var(--color-text-faint)] mt-0.5 font-mono">{selectedTask.recurrence}</p>
-              </div>
-            )}
-          </div>
+          )}
 
-          {/* Timestamps */}
+          {/* Timestamps (view mode only) */}
+          {!editing && (
           <div className="space-y-2 text-sm">
             <div className="flex justify-between">
               <span className="text-[var(--color-text-muted)]">Created</span>
@@ -590,9 +748,10 @@ function TasksTab({ agent }: { agent: Agent }) {
               </div>
             )}
           </div>
+          )}
 
           {/* Error */}
-          {selectedTask.status === "failed" && selectedTask.error && (
+          {!editing && selectedTask.status === "failed" && selectedTask.error && (
             <div className="min-w-0">
               <h4 className="text-xs text-red-400 uppercase tracking-wider mb-1">Error</h4>
               <div className="bg-red-500/10 border border-red-500/20 rounded p-3 overflow-x-auto">
@@ -602,7 +761,7 @@ function TasksTab({ agent }: { agent: Agent }) {
           )}
 
           {/* Result */}
-          {selectedTask.status === "completed" && selectedTask.result && (
+          {!editing && selectedTask.status === "completed" && selectedTask.result && (
             <div className="min-w-0">
               <h4 className="text-xs text-green-400 uppercase tracking-wider mb-1">Result</h4>
               <div className="bg-green-500/10 border border-green-500/20 rounded p-3 overflow-x-auto">
@@ -614,13 +773,13 @@ function TasksTab({ agent }: { agent: Agent }) {
           )}
 
           {/* Trajectory */}
-          {loadingTask && !selectedTask.trajectory && (
+          {!editing && loadingTask && !selectedTask.trajectory && (
             <div>
               <h4 className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider mb-2">Trajectory</h4>
               <div className="text-sm text-[var(--color-text-faint)]">Loading trajectory...</div>
             </div>
           )}
-          {selectedTask.trajectory && selectedTask.trajectory.length > 0 && (
+          {!editing && selectedTask.trajectory && selectedTask.trajectory.length > 0 && (
             <div>
               <h4 className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
                 Trajectory ({selectedTask.trajectory.length} steps)
@@ -628,6 +787,8 @@ function TasksTab({ agent }: { agent: Agent }) {
               <TrajectoryView trajectory={selectedTask.trajectory} />
             </div>
           )}
+            </>;
+          })()}
         </div>
       </div>
     );
@@ -681,7 +842,7 @@ function TasksTab({ agent }: { agent: Agent }) {
             <div
               key={task.id}
               onClick={() => selectTask(task)}
-              className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 cursor-pointer hover:border-[var(--color-border-light)] transition"
+              className="bg-[var(--color-surface)] card p-4 cursor-pointer hover:border-[var(--color-border-light)] transition"
             >
               <div className="flex items-start justify-between mb-2">
                 <div className="flex-1 min-w-0">

package/src/web/components/agents/CreateAgentModal.tsx

@@ -202,7 +202,7 @@ export function CreateAgentModal({
                       key={key}
                       type="button"
                       onClick={() => toggleFeature(key)}
-                      className={`flex items-center gap-3 p-3 rounded border text-left transition ${
+                      className={`flex items-center gap-3 p-3 btn border text-left transition ${
                         isEnabled
                           ? "border-[var(--color-accent)] bg-[var(--color-accent-10)]"
                           : "border-[var(--color-border-light)] hover:border-[var(--color-border-light)]"
@@ -237,7 +237,7 @@ export function CreateAgentModal({
                       },
                     },
                   })}
-                  className={`flex items-center gap-2 px-3 py-2 rounded border transition ${
+                  className={`flex items-center gap-2 px-3 py-2 btn border transition ${
                     form.features.builtinTools?.webSearch
                       ? "border-[var(--color-accent)] bg-[var(--color-accent-10)] text-[var(--color-accent)]"
                       : "border-[var(--color-border-light)] hover:border-[var(--color-border-light)] text-[var(--color-text-secondary)]"
@@ -260,7 +260,7 @@ export function CreateAgentModal({
                       },
                     },
                   })}
-                  className={`flex items-center gap-2 px-3 py-2 rounded border transition ${
+                  className={`flex items-center gap-2 px-3 py-2 btn border transition ${
                     form.features.builtinTools?.webFetch
                       ? "border-[var(--color-accent)] bg-[var(--color-accent-10)] text-[var(--color-accent)]"
                       : "border-[var(--color-border-light)] hover:border-[var(--color-border-light)] text-[var(--color-text-secondary)]"
@@ -282,14 +282,14 @@ export function CreateAgentModal({
           <div className="flex gap-3 mt-6">
             <button
               onClick={onClose}
-              className="flex-1 border border-[var(--color-border-light)] hover:border-[var(--color-accent)] hover:text-[var(--color-accent)] px-4 py-2 rounded font-medium transition"
+              className="flex-1 border border-[var(--color-border-light)] hover:border-[var(--color-accent)] hover:text-[var(--color-accent)] px-4 py-2 btn font-medium transition"
             >
               Cancel
             </button>
             <button
               onClick={onCreate}
               disabled={!form.name}
-              className="flex-1 bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] disabled:opacity-50 text-black px-4 py-2 rounded font-medium transition"
+              className="flex-1 bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] disabled:opacity-50 text-black px-4 py-2 btn font-medium transition"
             >
               Create
             </button>

package/src/web/components/auth/LoginPage.tsx

@@ -23,7 +23,7 @@ export function LoginPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[var(--color-bg)] text-[var(--color-text)] font-mono flex items-center justify-center p-8">
+    <div className="min-h-screen bg-[var(--color-bg)] text-[var(--color-text)] flex items-center justify-center p-8">
       <div className="w-full max-w-md">
         {/* Logo */}
         <div className="text-center mb-8">
@@ -34,7 +34,7 @@ export function LoginPage() {
           <p className="text-[var(--color-text-muted)]">Run AI agents locally</p>
         </div>
 
-        <div className="bg-[var(--color-surface)] rounded-lg border border-[var(--color-border)] p-8">
+        <div className="bg-[var(--color-surface)] card p-8">
           <h2 className="text-2xl font-semibold mb-2">Welcome back</h2>
           <p className="text-[var(--color-text-muted)] mb-6">Sign in to continue to apteva</p>
 

package/src/web/components/common/LoadingSpinner.tsx

@@ -30,7 +30,7 @@ export function LoadingSpinner({ message = "Loading...", fullScreen = false }: L
 
   if (fullScreen) {
     return (
-      <div className="min-h-screen bg-[var(--color-bg)] text-[var(--color-text)] font-mono flex items-center justify-center">
+      <div className="min-h-screen bg-[var(--color-bg)] text-[var(--color-text)] flex items-center justify-center">
         {content}
       </div>
     );