apteva 0.4.44 → 0.4.48

package/src/server.ts

@@ -357,7 +357,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 +367,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 +449,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 && (

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>
     );

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

@@ -8,7 +8,7 @@ interface ModalProps {
 export function Modal({ children, onClose }: ModalProps) {
   return (
     <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
-      <div className="bg-[var(--color-surface)] rounded p-6 w-full max-w-xl lg:max-w-2xl border border-[var(--color-border)] max-h-[90vh] overflow-y-auto">
+      <div className="bg-[var(--color-surface)] card p-6 w-full max-w-xl lg:max-w-2xl max-h-[90vh] overflow-y-auto">
         {children}
       </div>
     </div>
@@ -37,19 +37,19 @@ export function ConfirmModal({
 }: ConfirmModalProps) {
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-[var(--color-surface)] border border-[var(--color-border-light)] rounded-lg p-6 w-full max-w-sm">
+      <div className="bg-[var(--color-surface)] card p-6 w-full max-w-sm">
         {title && <h3 className="font-medium mb-2">{title}</h3>}
         <p className="text-sm text-[var(--color-text)] mb-4">{message}</p>
         <div className="flex gap-2">
           <button
             onClick={onCancel}
-            className="flex-1 text-sm bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] px-4 py-2 rounded transition"
+            className="flex-1 text-sm bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] btn px-4 py-2 transition"
           >
             {cancelText}
           </button>
           <button
             onClick={onConfirm}
-            className={`flex-1 text-sm text-white px-4 py-2 rounded transition ${
+            className={`flex-1 text-sm text-white px-4 py-2 btn transition ${
               confirmVariant === "danger"
                 ? "bg-red-500 hover:bg-red-600"
                 : "bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)]"
@@ -93,7 +93,7 @@ export function AlertModal({
 
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-[var(--color-surface)] border border-[var(--color-border-light)] rounded-lg p-6 w-full max-w-sm text-center">
+      <div className="bg-[var(--color-surface)] card p-6 w-full max-w-sm text-center">
         <div
           className={`w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 ${iconColors[variant]}`}
         >
@@ -103,7 +103,7 @@ export function AlertModal({
         <p className="text-sm text-[var(--color-text)] mb-4">{message}</p>
         <button
           onClick={onClose}
-          className="w-full text-sm bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] px-4 py-2 rounded transition"
+          className="w-full text-sm bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] px-4 py-2 btn transition"
         >
           {buttonText}
         </button>

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

@@ -35,7 +35,7 @@ export function Select({ value, options, onChange, placeholder = "Select...", co
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
-        className={`w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded ${compact ? "px-2.5 py-1.5 text-sm" : "px-3 py-2"} text-left flex items-center justify-between focus:outline-none focus:border-[var(--color-accent)] text-[var(--color-text)] hover:border-[var(--color-border-light)] transition`}
+        className={`w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] btn ${compact ? "px-2.5 py-1.5 text-sm" : "px-3 py-2"} text-left flex items-center justify-between focus:outline-none focus:border-[var(--color-accent)] text-[var(--color-text)] hover:border-[var(--color-border-light)] transition`}
       >
         <span className={selectedOption ? "text-[var(--color-text)]" : "text-[var(--color-text-muted)]"}>
           {selectedOption ? (
@@ -51,7 +51,7 @@ export function Select({ value, options, onChange, placeholder = "Select...", co
       </button>
 
       {isOpen && (
-        <div className="absolute z-50 w-full min-w-max mt-1 bg-[var(--color-surface)] border border-[var(--color-border-light)] rounded shadow-lg max-h-60 overflow-y-auto scrollbar-hide">
+        <div className="absolute z-50 w-full min-w-max mt-1 bg-[var(--color-surface)] border border-[var(--color-border-light)] shadow-lg max-h-60 overflow-y-auto scrollbar-hide" style={{ borderRadius: "var(--radius-button)" }}>
           {options.map((option) => (
             <button
               key={option.value}

package/src/web/components/connections/ConnectionsPage.tsx

@@ -28,7 +28,7 @@ export function ConnectionsPage() {
         </div>
 
         {/* Tabs */}
-        <div className="flex gap-1 mb-6 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-1 w-fit">
+        <div className="flex gap-1 mb-6 bg-[var(--color-surface)] card p-1 w-fit">
           {tabs.map(tab => (
             <button
               key={tab.id}