apteva 0.4.32 → 0.4.44

package/src/web/components/dashboard/Dashboard.tsx

@@ -1,7 +1,9 @@
-import React, { useState, useEffect, useCallback, useMemo } from "react";
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { useAgentActivity, useAuth, useProjects, useTelemetryContext } from "../../context";
+import { useTelemetry } from "../../context/TelemetryContext";
 import type { TelemetryEvent } from "../../context";
 import type { Agent, Provider, Route, DashboardStats, Task } from "../../types";
+import { CloseIcon } from "../common/Icons";
 
 interface DashboardProps {
   agents: Agent[];
@@ -23,9 +25,12 @@ export function Dashboard({
   const { authFetch } = useAuth();
   const { currentProjectId } = useProjects();
   const { events: realtimeEvents, statusChangeCounter } = useTelemetryContext();
+  const { events: taskTelemetryEvents } = useTelemetry({ category: "TASK" });
+  const lastProcessedTaskEventRef = useRef<string | null>(null);
   const [stats, setStats] = useState<DashboardStats | null>(null);
   const [recentTasks, setRecentTasks] = useState<Task[]>([]);
   const [historicalActivities, setHistoricalActivities] = useState<TelemetryEvent[]>([]);
+  const [quickMessageAgent, setQuickMessageAgent] = useState<Agent | null>(null);
 
   // Filter agents by current project
   const filteredAgents = useMemo(() => {
@@ -75,6 +80,17 @@ export function Dashboard({
     fetchDashboardData();
   }, [fetchDashboardData, statusChangeCounter]);
 
+  // Real-time task updates from telemetry
+  useEffect(() => {
+    if (!taskTelemetryEvents.length) return;
+    const latestEvent = taskTelemetryEvents[0];
+    if (!latestEvent || latestEvent.id === lastProcessedTaskEventRef.current) return;
+    if (latestEvent.type === "task_created" || latestEvent.type === "task_updated" || latestEvent.type === "task_deleted") {
+      lastProcessedTaskEventRef.current = latestEvent.id;
+      fetchDashboardData();
+    }
+  }, [taskTelemetryEvents, fetchDashboardData]);
+
   // Filter tasks by project agents and sort by next execution (soonest first)
   const filteredTasks = useMemo(() => {
     let list = currentProjectId
@@ -98,11 +114,11 @@ export function Dashboard({
 
   // Merge real-time + historical thread_activity events, deduplicate
   const activities = useMemo(() => {
-    const realtimeActivities = realtimeEvents.filter(e => e.type === "thread_activity");
+    const realtimeActivities = realtimeEvents.filter(e => e.type === "thread_activity" && !e.data?.parent_id);
     const seen = new Set(realtimeActivities.map(e => e.id));
     const merged = [...realtimeActivities];
     for (const evt of historicalActivities) {
-      if (!seen.has(evt.id)) {
+      if (!seen.has(evt.id) && !evt.data?.parent_id) {
         merged.push(evt);
         seen.add(evt.id);
       }
@@ -114,7 +130,7 @@ export function Dashboard({
     }
     // Sort newest first
     filtered.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
-    return filtered.slice(0, 8);
+    return filtered.slice(0, 12);
   }, [realtimeEvents, historicalActivities, currentProjectId, projectAgentIds]);
 
   // Build agent name lookup
@@ -133,7 +149,7 @@ export function Dashboard({
         <StatCard label="Agents" value={filteredAgents.length} subValue={`${filteredRunningCount} running`} />
         <StatCard label="Tasks" value={taskStats.total} subValue={`${taskStats.pending} pending`} />
         <StatCard label="Completed" value={taskStats.completed} color="text-green-400" />
-        <StatCard label="Providers" value={configuredProviders.length} color="text-[#f97316]" />
+        <StatCard label="Providers" value={configuredProviders.length} color="text-[var(--color-accent)]" />
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
@@ -144,13 +160,19 @@ export function Dashboard({
           onAction={() => onNavigate("agents")}
         >
           {loading ? (
-            <div className="p-4 text-center text-[#666]">Loading...</div>
+            <div className="p-4 text-center text-[var(--color-text-muted)]">Loading...</div>
           ) : filteredAgents.length === 0 ? (
-            <div className="p-4 text-center text-[#666]">No agents yet</div>
+            <div className="p-4 text-center text-[var(--color-text-muted)]">No agents yet</div>
           ) : (
-            <div className="divide-y divide-[#1a1a1a]">
+            <div className="divide-y divide-[var(--color-border)]">
               {filteredAgents.slice(0, 5).map((agent) => (
-                <AgentListItem key={agent.id} agent={agent} onSelect={() => onSelectAgent(agent)} showProject={!currentProjectId} />
+                <AgentListItem
+                  key={agent.id}
+                  agent={agent}
+                  onSelect={() => onSelectAgent(agent)}
+                  onMessage={agent.status === "running" ? () => setQuickMessageAgent(agent) : undefined}
+                  showProject={!currentProjectId}
+                />
               ))}
             </div>
           )}
@@ -163,12 +185,12 @@ export function Dashboard({
           onAction={() => onNavigate("telemetry")}
         >
           {activities.length === 0 ? (
-            <div className="p-4 text-center text-[#666]">
+            <div className="p-4 text-center text-[var(--color-text-muted)]">
               <p>No activity yet</p>
-              <p className="text-sm text-[#444] mt-1">Agent activity will appear here in real-time</p>
+              <p className="text-sm text-[var(--color-text-faint)] mt-1">Agent activity will appear here in real-time</p>
             </div>
           ) : (
-            <div className="divide-y divide-[#1a1a1a]">
+            <div className="divide-y divide-[var(--color-border)]">
               {activities.map((evt) => (
                 <ActivityItem
                   key={evt.id}
@@ -188,12 +210,12 @@ export function Dashboard({
           onAction={() => onNavigate("tasks")}
         >
           {filteredTasks.length === 0 ? (
-            <div className="p-4 text-center text-[#666]">
+            <div className="p-4 text-center text-[var(--color-text-muted)]">
               <p>No tasks yet</p>
-              <p className="text-sm text-[#444] mt-1">Tasks will appear when agents create them</p>
+              <p className="text-sm text-[var(--color-text-faint)] mt-1">Tasks will appear when agents create them</p>
             </div>
           ) : (
-            <div className="divide-y divide-[#1a1a1a]">
+            <div className="divide-y divide-[var(--color-border)]">
               {filteredTasks.slice(0, 5).map((task) => (
                 <div
                   key={`${task.agentId}-${task.id}`}
@@ -201,16 +223,16 @@ export function Dashboard({
                 >
                   <div className="flex-1 min-w-0">
                     <p className="font-medium truncate">{task.title}</p>
-                    <p className="text-sm text-[#666]">
+                    <p className="text-sm text-[var(--color-text-muted)]">
                       {task.agentName}
                       {task.recurrence && (
-                        <span className="ml-1 text-[#555]">· {formatCronShort(task.recurrence)}</span>
+                        <span className="ml-1 text-[var(--color-text-faint)]">· {formatCronShort(task.recurrence)}</span>
                       )}
                       {task.next_run && (
-                        <span className="ml-1 text-[#f97316]">· {formatRelativeShort(task.next_run)}</span>
+                        <span className="ml-1 text-[var(--color-accent)]">· {formatRelativeShort(task.next_run)}</span>
                       )}
                       {!task.next_run && task.execute_at && (
-                        <span className="ml-1 text-[#f97316]">· {formatRelativeShort(task.execute_at)}</span>
+                        <span className="ml-1 text-[var(--color-accent)]">· {formatRelativeShort(task.execute_at)}</span>
                       )}
                     </p>
                   </div>
@@ -221,6 +243,14 @@ export function Dashboard({
           )}
         </DashboardCard>
       </div>
+
+      {/* Quick Message Modal */}
+      {quickMessageAgent && (
+        <QuickMessageModal
+          agent={quickMessageAgent}
+          onClose={() => setQuickMessageAgent(null)}
+        />
+      )}
     </div>
   );
 }
@@ -234,10 +264,10 @@ interface StatCardProps {
 
 function StatCard({ label, value, subValue, color }: StatCardProps) {
   return (
-    <div className="bg-[#111] rounded p-4 border border-[#1a1a1a]">
-      <p className="text-sm text-[#666] mb-1">{label}</p>
+    <div className="bg-[var(--color-surface)] rounded p-4 border border-[var(--color-border)]">
+      <p className="text-sm text-[var(--color-text-muted)] mb-1">{label}</p>
       <p className={`text-2xl font-semibold ${color || ''}`}>{value}</p>
-      {subValue && <p className="text-xs text-[#555] mt-1">{subValue}</p>}
+      {subValue && <p className="text-xs text-[var(--color-text-faint)] mt-1">{subValue}</p>}
     </div>
   );
 }
@@ -251,8 +281,8 @@ interface DashboardCardProps {
 
 function DashboardCard({ title, actionLabel, onAction, children }: DashboardCardProps) {
   return (
-    <div className="bg-[#111] rounded border border-[#1a1a1a] overflow-hidden">
-      <div className="px-4 py-3 border-b border-[#1a1a1a] flex items-center justify-between">
+    <div className="bg-[var(--color-surface)] rounded border border-[var(--color-border)] overflow-hidden">
+      <div className="px-4 py-3 border-b border-[var(--color-border)] flex items-center justify-between">
         <h3 className="font-semibold">{title}</h3>
         <button
           onClick={onAction}
@@ -266,40 +296,57 @@ function DashboardCard({ title, actionLabel, onAction, children }: DashboardCard
   );
 }
 
-function AgentListItem({ agent, onSelect, showProject }: { agent: Agent; onSelect: () => void; showProject?: boolean }) {
-  const { isActive } = useAgentActivity(agent.id);
+function AgentListItem({ agent, onSelect, onMessage, showProject }: { agent: Agent; onSelect: () => void; onMessage?: () => void; showProject?: boolean }) {
+  const { isActive, label } = useAgentActivity(agent.id);
   const { projects } = useProjects();
   const project = agent.projectId ? projects.find(p => p.id === agent.projectId) : null;
 
   return (
     <div
       onClick={onSelect}
-      className="px-4 py-3 hover:bg-[#1a1a1a] cursor-pointer flex items-center justify-between"
+      className="px-4 py-3 hover:bg-[var(--color-surface-raised)] cursor-pointer flex items-center justify-between group"
     >
-      <div className="flex-1 min-w-0">
-        <p className="font-medium">{agent.name}</p>
-        <div className="flex items-center gap-2 text-sm text-[#666]">
-          <span>{agent.provider}</span>
-          {showProject && project && (
-            <>
-              <span className="text-[#444]">·</span>
-              <span className="flex items-center gap-1">
-                <span className="w-2 h-2 rounded-full" style={{ backgroundColor: project.color }} />
-                {project.name}
-              </span>
-            </>
-          )}
+      <div className="flex items-center gap-3 flex-1 min-w-0">
+        <span
+          className={`w-2 h-2 rounded-full flex-shrink-0 ${
+            agent.status === "running"
+              ? isActive
+                ? "bg-green-400 animate-pulse"
+                : "bg-[#3b82f6]"
+              : "bg-[var(--color-scrollbar)]"
+          }`}
+        />
+        <div className="flex-1 min-w-0">
+          <p className="font-medium truncate">{agent.name}</p>
+          <div className="flex items-center gap-2 text-sm text-[var(--color-text-muted)]">
+            {isActive && label ? (
+              <span className="text-green-400 truncate">{label}</span>
+            ) : (
+              <span>{agent.provider} · {agent.status === "running" ? "idle" : "stopped"}</span>
+            )}
+            {showProject && project && (
+              <>
+                <span className="text-[var(--color-text-faint)]">·</span>
+                <span className="flex items-center gap-1">
+                  <span className="w-2 h-2 rounded-full" style={{ backgroundColor: project.color }} />
+                  {project.name}
+                </span>
+              </>
+            )}
+          </div>
         </div>
       </div>
-      <span
-        className={`w-2 h-2 rounded-full flex-shrink-0 ${
-          agent.status === "running"
-            ? isActive
-              ? "bg-green-400 animate-pulse"
-              : "bg-[#3b82f6]"
-            : "bg-[#444]"
-        }`}
-      />
+      {onMessage && (
+        <button
+          onClick={(e) => { e.stopPropagation(); onMessage(); }}
+          className="opacity-0 group-hover:opacity-100 transition px-2 py-1 text-xs text-[var(--color-accent)] hover:bg-[var(--color-accent-10)] rounded"
+          title="Send message"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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>
+        </button>
+      )}
     </div>
   );
 }
@@ -320,9 +367,9 @@ function ActivityItem({ activity, agentName, timestamp }: { activity: string; ag
   return (
     <div className="px-4 py-3">
       <p className="text-sm truncate">{activity}</p>
-      <div className="flex items-center gap-2 text-xs text-[#555] mt-1">
-        <span className="text-[#666]">{agentName}</span>
-        <span className="text-[#444]">&middot;</span>
+      <div className="flex items-center gap-2 text-xs text-[var(--color-text-faint)] mt-1">
+        <span className="text-[var(--color-text-muted)]">{agentName}</span>
+        <span className="text-[var(--color-text-faint)]">&middot;</span>
         <span>{timeAgo(timestamp)}</span>
       </div>
     </div>
@@ -345,6 +392,84 @@ function TaskStatusBadge({ status }: { status: Task["status"] }) {
   );
 }
 
+// --- Quick Message Modal ---
+
+function QuickMessageModal({ agent, onClose }: { agent: Agent; onClose: () => void }) {
+  const { authFetch } = useAuth();
+  const [message, setMessage] = useState("");
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const handleSend = async () => {
+    if (!message.trim() || sending) return;
+    setSending(true);
+    try {
+      const res = await authFetch(`/api/agents/${agent.id}/chat`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: message.trim(), agent_id: agent.id }),
+      });
+      if (res.ok) {
+        setSent(true);
+        setTimeout(onClose, 1200);
+      }
+    } catch {
+      // ignore
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/60" onClick={onClose} />
+      <div className="relative bg-[var(--color-surface)] border border-[var(--color-border-light)] rounded-xl shadow-2xl w-full max-w-md mx-4 p-5">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-3">
+            <span className="w-2.5 h-2.5 rounded-full bg-green-400 animate-pulse" />
+            <h3 className="font-medium">{agent.name}</h3>
+          </div>
+          <button onClick={onClose} className="text-[var(--color-text-muted)] hover:text-[var(--color-text)] transition">
+            <CloseIcon />
+          </button>
+        </div>
+
+        {sent ? (
+          <div className="py-6 text-center">
+            <p className="text-green-400 font-medium">Message sent</p>
+            <p className="text-sm text-[var(--color-text-faint)] mt-1">The agent will process your message</p>
+          </div>
+        ) : (
+          <div className="flex gap-2">
+            <input
+              ref={inputRef}
+              type="text"
+              value={message}
+              onChange={e => setMessage(e.target.value)}
+              onKeyDown={e => e.key === "Enter" && handleSend()}
+              placeholder={`Message ${agent.name}...`}
+              disabled={sending}
+              className="flex-1 bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-[var(--color-accent)] placeholder-[#444] disabled:opacity-50"
+            />
+            <button
+              onClick={handleSend}
+              disabled={sending || !message.trim()}
+              className="px-4 py-2.5 bg-[var(--color-accent)] text-black rounded-lg text-sm font-medium hover:bg-[var(--color-accent-hover)] transition disabled:opacity-30"
+            >
+              {sending ? "..." : "Send"}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
 // --- Task sorting helper ---
 
 function statusPriority(task: Task): number {

package/src/web/components/index.ts

@@ -12,7 +12,7 @@ export { OnboardingWizard } from "./onboarding";
 export { SettingsPage } from "./settings";
 export { AgentCard, CreateAgentModal, AgentPanel, AgentsView } from "./agents";
 export { Dashboard } from "./dashboard";
-export { ActivityPage } from "./activity";
+export { ThreadsPage } from "./threads/ThreadsPage";
 export { TasksPage } from "./tasks";
 export { McpPage } from "./mcp";
 export { SkillsPage } from "./skills/SkillsPage";

package/src/web/components/layout/Header.tsx

@@ -134,24 +134,25 @@ export function Header({ onMenuClick, agents = [] }: HeaderProps) {
   };
 
   const getProjectColor = () => {
-    if (currentProjectId === null) return "#666";
-    if (currentProjectId === "unassigned") return "#888";
+    if (currentProjectId === null) return "var(--color-text-muted)";
+    if (currentProjectId === "unassigned") return "var(--color-text-secondary)";
     return currentProject?.color || "#6366f1";
   };
 
   return (
-    <header className="border-b border-[#1a1a1a] px-4 md:px-6 py-4 flex-shrink-0">
+    <header className="px-4 md:px-6 py-4 flex-shrink-0" style={{ borderBottom: "1px solid var(--color-border)" }}>
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           {/* Hamburger menu button - mobile only */}
           <button
             onClick={onMenuClick}
-            className="p-2 -ml-2 text-[#666] hover:text-[#e0e0e0] transition md:hidden"
+            className="p-2 -ml-2 transition md:hidden"
+            style={{ color: "var(--color-text-muted)" }}
           >
             <MenuIcon />
           </button>
           <div className="flex items-center gap-2">
-            <span className="text-[#f97316]">&gt;_</span>
+            <span style={{ color: "var(--color-accent)" }}>&gt;_</span>
             <span className="text-xl tracking-wider">apteva</span>
           </div>
 
@@ -160,7 +161,8 @@ export function Header({ onMenuClick, agents = [] }: HeaderProps) {
             <div className="relative ml-2 md:ml-4">
               <button
                 onClick={() => setShowProjectMenu(!showProjectMenu)}
-                className="flex items-center gap-2 px-3 py-1.5 rounded border border-[#222] bg-[#111] hover:bg-[#1a1a1a] transition text-sm"
+                className="flex items-center gap-2 px-3 py-1.5 rounded transition text-sm"
+                style={{ border: "1px solid var(--color-border-light)", backgroundColor: "var(--color-surface)" }}
               >
                 <span
                   className="w-2.5 h-2.5 rounded-full"
@@ -172,43 +174,49 @@ export function Header({ onMenuClick, agents = [] }: HeaderProps) {
                 <ChevronDownIcon />
               </button>
               {showProjectMenu && (
-                <div className="absolute left-0 top-full mt-1 w-56 bg-[#111] border border-[#222] rounded-lg shadow-xl z-50">
+                <div className="absolute left-0 top-full mt-1 w-56 rounded-lg shadow-xl z-50" style={{ backgroundColor: "var(--color-surface)", border: "1px solid var(--color-border-light)" }}>
                   <div className="py-1 max-h-64 overflow-y-auto">
                     <button
                       onClick={() => handleProjectSelect(null)}
-                      className={`w-full px-4 py-2 text-left text-sm flex items-center gap-2 hover:bg-[#1a1a1a] transition ${
-                        currentProjectId === null ? "bg-[#1a1a1a] text-[#f97316]" : ""
-                      }`}
+                      className="w-full px-4 py-2 text-left text-sm flex items-center gap-2 transition"
+                      style={{
+                        backgroundColor: currentProjectId === null ? "var(--color-surface-raised)" : "transparent",
+                        color: currentProjectId === null ? "var(--color-accent)" : "var(--color-text)",
+                      }}
                     >
-                      <span className="w-2.5 h-2.5 rounded-full bg-[#666]" />
+                      <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: "var(--color-text-muted)" }} />
                       All Projects
                     </button>
                     {projects.map(project => (
                       <button
                         key={project.id}
                         onClick={() => handleProjectSelect(project.id)}
-                        className={`w-full px-4 py-2 text-left text-sm flex items-center gap-2 hover:bg-[#1a1a1a] transition ${
-                          currentProjectId === project.id ? "bg-[#1a1a1a] text-[#f97316]" : ""
-                        }`}
+                        className="w-full px-4 py-2 text-left text-sm flex items-center gap-2 transition"
+                        style={{
+                          backgroundColor: currentProjectId === project.id ? "var(--color-surface-raised)" : "transparent",
+                          color: currentProjectId === project.id ? "var(--color-accent)" : "var(--color-text)",
+                        }}
                       >
                         <span
                           className="w-2.5 h-2.5 rounded-full flex-shrink-0"
                           style={{ backgroundColor: project.color }}
                         />
                         <span className="truncate">{project.name}</span>
-                        <span className="ml-auto text-xs text-[#666]">{project.agentCount}</span>
+                        <span className="ml-auto text-xs" style={{ color: "var(--color-text-muted)" }}>{project.agentCount}</span>
                       </button>
                     ))}
                     {unassignedCount > 0 && (
                       <button
                         onClick={() => handleProjectSelect("unassigned")}
-                        className={`w-full px-4 py-2 text-left text-sm flex items-center gap-2 hover:bg-[#1a1a1a] transition ${
-                          currentProjectId === "unassigned" ? "bg-[#1a1a1a] text-[#f97316]" : ""
-                        }`}
+                        className="w-full px-4 py-2 text-left text-sm flex items-center gap-2 transition"
+                        style={{
+                          backgroundColor: currentProjectId === "unassigned" ? "var(--color-surface-raised)" : "transparent",
+                          color: currentProjectId === "unassigned" ? "var(--color-accent)" : "var(--color-text)",
+                        }}
                       >
-                        <span className="w-2.5 h-2.5 rounded-full bg-[#888]" />
+                        <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: "var(--color-text-secondary)" }} />
                         <span className="truncate">Unassigned</span>
-                        <span className="ml-auto text-xs text-[#666]">{unassignedCount}</span>
+                        <span className="ml-auto text-xs" style={{ color: "var(--color-text-muted)" }}>{unassignedCount}</span>
                       </button>
                     )}
                   </div>
@@ -222,7 +230,7 @@ export function Header({ onMenuClick, agents = [] }: HeaderProps) {
             <span
               className={`w-2 h-2 rounded-full ${connected ? "bg-green-400" : "bg-red-400"}`}
             />
-            <span className="text-xs text-[#666] hidden sm:inline">
+            <span className="text-xs hidden sm:inline" style={{ color: "var(--color-text-muted)" }}>
               {connected ? "Live" : "Offline"}
             </span>
           </div>
@@ -230,7 +238,8 @@ export function Header({ onMenuClick, agents = [] }: HeaderProps) {
           <div className="relative">
             <button
               onClick={openNotifications}
-              className="relative p-2 text-[#666] hover:text-[#e0e0e0] transition rounded hover:bg-[#1a1a1a]"
+              className="relative p-2 transition rounded"
+              style={{ color: "var(--color-text-muted)" }}
             >
               <BellIcon className="w-5 h-5" />
               {unseenCount > 0 && (
@@ -253,40 +262,47 @@ export function Header({ onMenuClick, agents = [] }: HeaderProps) {
             {showNotifications && (
               <>
                 <div className="fixed inset-0 z-40" onClick={() => setShowNotifications(false)} />
-                <div className="absolute right-0 top-full mt-1 w-80 bg-[#111] border border-[#222] rounded-lg shadow-xl z-50 max-h-96 overflow-y-auto">
-                  <div className="px-4 py-3 border-b border-[#222] flex items-center justify-between">
+                <div className="absolute right-0 top-full mt-1 w-80 rounded-lg shadow-xl z-50 max-h-96 overflow-y-auto" style={{ backgroundColor: "var(--color-surface)", border: "1px solid var(--color-border-light)" }}>
+                  <div className="px-4 py-3 flex items-center justify-between" style={{ borderBottom: "1px solid var(--color-border-light)" }}>
                     <span className="text-sm font-medium">Notifications</span>
                     {notifications.length > 0 && (
-                      <span className="text-xs text-[#666]">{notifications.length} recent</span>
+                      <span className="text-xs" style={{ color: "var(--color-text-muted)" }}>{notifications.length} recent</span>
                     )}
                   </div>
                   {notifications.length === 0 ? (
-                    <div className="px-4 py-8 text-center text-sm text-[#666]">
+                    <div className="px-4 py-8 text-center text-sm" style={{ color: "var(--color-text-muted)" }}>
                       No notifications
                     </div>
                   ) : (
                     <div className="py-1">
                       {notifications.map(n => (
-                        <div key={n.id} className={`px-4 py-3 hover:bg-[#1a1a1a] transition border-b border-[#1a1a1a] ${!n.seen ? "bg-[#0f0f0f]" : ""}`}>
+                        <div key={n.id} className="px-4 py-3 transition" style={{
+                          borderBottom: "1px solid var(--color-border)",
+                          backgroundColor: !n.seen ? "var(--color-bg-secondary)" : "transparent",
+                        }}>
                           <div className="flex items-center gap-2 mb-1">
                             <span className={`w-2 h-2 rounded-full flex-shrink-0 ${
                               !n.seen
-                                ? (n.level === "error" || n.category === "ERROR" ? "bg-red-400" : "bg-[#f97316]")
-                                : "bg-[#333]"
-                            }`} />
-                            <span className={`text-xs font-medium truncate ${!n.seen ? "text-[#ccc]" : "text-[#666]"}`}>
+                                ? (n.level === "error" || n.category === "ERROR" ? "bg-red-400" : "")
+                                : ""
+                            }`} style={{
+                              backgroundColor: !n.seen
+                                ? (n.level === "error" || n.category === "ERROR" ? undefined : "var(--color-accent)")
+                                : "var(--color-surface-raised)",
+                            }} />
+                            <span className="text-xs font-medium truncate" style={{ color: !n.seen ? "var(--color-text)" : "var(--color-text-muted)" }}>
                               {n.category === "system" && n.type === "agent_stopped" ? "Agent Stopped" :
                                n.category === "ERROR" ? "Error" :
                                `${n.category} / ${n.type}`}
                             </span>
-                            <span className="text-[10px] text-[#555] ml-auto flex-shrink-0">
+                            <span className="text-[10px] ml-auto flex-shrink-0" style={{ color: "var(--color-text-faint)" }}>
                               {formatNotifTime(n.timestamp)}
                             </span>
                           </div>
-                          <div className={`text-xs truncate ${!n.seen ? "text-[#aaa]" : "text-[#666]"}`}>
+                          <div className="text-xs truncate" style={{ color: !n.seen ? "var(--color-text-secondary)" : "var(--color-text-muted)" }}>
                             {n.error || (n.data as any)?.message || (n.data as any)?.error || `${n.type} event`}
                           </div>
-                          <div className="text-[10px] text-[#555] mt-1">
+                          <div className="text-[10px] mt-1" style={{ color: "var(--color-text-faint)" }}>
                             {agentNames[n.agent_id] || n.agent_id.slice(0, 8)}
                           </div>
                         </div>