FEA: Replace agent-monitor sidecar with in-process SQLite database + React renderer

- Replace agent-dashboard sidecar (external process) with in-process node:sqlite database
- Create functional repository layer matching symphony-alpha patterns (sessions, agents, events, dashboard stores)
- Add Vite + React 19 renderer with DesignSystemProvider shell and DS components
- Add hook ingestion endpoint (POST /api/hooks/event) writing directly to local SQLite
- Extend preload bridge with typed db IPC channels (db.getSessions, db.getAgents, db.getEvents, db.getDashboardSummary)
- Update window.ts to load Vite-built renderer (dev server in dev, file in prod)
- Vendor @closedloop-ai/design-system as file: dep with subpath component exports
- Preserve legacy HTML renderer as legacy.html for strangler-fig migration via iframe
- Add DashboardPage using DS Card/Badge/Button components with real-time summary queries

Testing: pnpm build:renderer (Vite) and npx tsc (main process) both compile clean; all DB-layer errors resolved; pre-existing tsc errors (node-pty, ws, react) unchanged.
Risks: Sidecar not yet disabled — this adds parallel in-process DB alongside existing agent-monitor; legacy HTML still works via iframe fallback.

Author: mikeangstadt

apps/desktop/package.json

@@ -7,13 +7,14 @@
   "type": "module",
   "main": "dist/main/index.js",
   "scripts": {
-    "dev": "pnpm build && ELECTRON_BIN=$(bash scripts/patch-electron-plist.sh | tail -1) && \"$ELECTRON_BIN\" .",
+    "dev": "pnpm build:renderer && pnpm build && ELECTRON_BIN=$(bash scripts/patch-electron-plist.sh | tail -1) && \"$ELECTRON_BIN\" .",
     "start": "ELECTRON_BIN=$(bash scripts/patch-electron-plist.sh | tail -1) && \"$ELECTRON_BIN\" .",
-    "clean:dist": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",
+    "clean:dist": "node -e \"require('fs').rmSync('dist/main',{recursive:true,force:true});require('fs').rmSync('dist/server',{recursive:true,force:true})\"",
     "clean:package": "node -e \"require('fs').rmSync('dist-dmg',{recursive:true,force:true})\"",
     "prebuild": "node -e \"const{execSync:e}=require('child_process'),{writeFileSync:w}=require('fs');const h=e('git rev-parse HEAD').toString().trim();w('src/shared/build-info.ts','// AUTO-GENERATED — do not edit\\nexport const BUILD_COMMIT_HASH = \\\"'+h+'\\\";\\n');\"",
-    "build": "pnpm clean:dist && pnpm prebuild && tsc -p tsconfig.json && pnpm build:agent-monitor",
+    "build": "pnpm build:renderer && pnpm clean:dist && pnpm prebuild && tsc -p tsconfig.json",
     "build:agent-monitor": "node scripts/build-agent-monitor.mjs",
+    "build:renderer": "vite build --config vite.renderer.config.ts",
     "dashboard:reset": "node scripts/reset-dashboard-db.mjs",
     "dashboard:reset-packs": "node scripts/reset-dashboard-db.mjs --packs-only",
     "stage:package": "node scripts/stage-packaging-app.mjs",
@@ -24,29 +25,37 @@
     "release": "pnpm clean:package && pnpm build && pnpm stage:package && node scripts/run-electron-builder.mjs --publish always"
   },
   "dependencies": {
+    "@closedloop-ai/design-system": "file:vendor/design-system",
     "@closedloop-ai/loops-api": "0.2.11",
     "agent-dashboard": "github:hoangsonww/Claude-Code-Agent-Monitor#840c518d7fa69231de049e41b893938228b67e40",
     "busboy": "^1.6.0",
     "electron-log": "^5.4.3",
     "electron-store": "^8.2.0",
     "electron-updater": "^6.8.3",
     "glob": "^11.0.1",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.6",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^19.2.6",
+    "react-hook-form": "^7.76.1",
+    "react-resizable-panels": "^3.0.6",
     "socket.io-client": "^4.8.1",
     "zod": "^4.0.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "4.3.4",
+    "@tailwindcss/postcss": "^4.3.0",
     "@types/busboy": "^1.5.4",
     "@types/node": "^22.13.8",
     "@typescript-eslint/eslint-plugin": "^8.57.1",
     "@typescript-eslint/parser": "^8.57.1",
+    "@vitejs/plugin-react": "4.3.4",
     "agent-dashboard-client": "github:hoangsonww/Claude-Code-Agent-Monitor#840c518d7fa69231de049e41b893938228b67e40&path:/client",
     "autoprefixer": "10.4.20",
     "electron": "^35.0.2",
     "electron-builder": "^26.8.1",
     "eslint": "^10.0.3",
-    "postcss": "8.5.1",
-    "tailwindcss": "3.4.17",
+    "postcss": "8.5.15",
+    "tailwindcss": "4.3.0",
     "tsx": "^4.19.3",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.57.1",

apps/desktop/postcss.renderer.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

apps/desktop/src/main/app.ts

@@ -65,6 +65,7 @@ import { SettingsStore, type SavedConfigManagedPatch } from "./settings-store.js
 import { DesktopTray } from "./tray.js";
 import { DesktopWindow } from "./window.js";
 import { AgentMonitorSidecar } from "./agent-monitor-sidecar.js";
+import { openAgentDatabase } from "./database/index.js";
 import { AgentSessionSyncService } from "./agent-session-sync-service.js";
 import {
   isAgentMonitorHooksEnabled,
@@ -196,6 +197,7 @@ export class DesktopApplication {
   private readonly cloudSocket: CloudSocketService;
   private readonly commandExecutor: CloudCommandExecutor;
   private readonly agentMonitor: AgentMonitorSidecar;
+  private readonly agentDatabase: ReturnType<typeof openAgentDatabase>;
   private readonly agentSessionSync: AgentSessionSyncService;
   private readonly activityLog: ActivityLogStore;
   private readonly approvalStore: ApprovalStore;
@@ -284,6 +286,9 @@ export class DesktopApplication {
     this.tray = new DesktopTray();
     this.desktopWindow = new DesktopWindow();
     this.agentMonitor = new AgentMonitorSidecar();
+    this.agentDatabase = openAgentDatabase(
+      path.join(app.getPath("userData"), "agent-dashboard.sqlite"),
+    );
     this.activityLog = new ActivityLogStore();
     this.jobStore = new JobStore();
     this.approvalStore = new ApprovalStore({
@@ -3190,6 +3195,59 @@ export class DesktopApplication {
       this.restartCloudSocket();
       return appliedConfig;
     });
+
+    ipcMain.handle("desktop:db:get-sessions", () => {
+      return this.agentDatabase.sessions.getAll();
+    });
+
+    ipcMain.handle("desktop:db:get-session", (_event, id: string) => {
+      return this.agentDatabase.sessions.getById(id);
+    });
+
+    ipcMain.handle("desktop:db:get-agents", (_event, sessionId: string) => {
+      return this.agentDatabase.agents.getBySession(sessionId);
+    });
+
+    ipcMain.handle(
+      "desktop:db:get-events",
+      (_event, sessionId: string, agentId?: string) => {
+        if (agentId) {
+          return this.agentDatabase.events.getBySessionAndAgent(
+            sessionId,
+            agentId,
+          );
+        }
+        return this.agentDatabase.events.getBySession(sessionId);
+      },
+    );
+
+    ipcMain.handle("desktop:db:get-dashboard-summary", () => {
+      return this.agentDatabase.getSummary();
+    });
+
+    ipcMain.handle("desktop:db:get-sessions-with-details", () => {
+      return this.agentDatabase.sessions.getAllWithDetails();
+    });
+
+    ipcMain.handle("desktop:db:get-event-feed", () => {
+      return this.agentDatabase.events.getAll();
+    });
+
+    ipcMain.handle("desktop:db:get-events-with-session", (_event, sessionId: string) => {
+      return this.agentDatabase.events.getWithSession(sessionId);
+    });
+
+    ipcMain.handle("desktop:db:get-event-count-by-type", () => {
+      return this.agentDatabase.events.getCountByType();
+    });
+
+    ipcMain.handle("desktop:db:get-token-analytics", () => {
+      return this.agentDatabase.dashboard.getTokenAnalytics();
+    });
+
+    ipcMain.handle("desktop:db:get-agent-hierarchy", (_event, sessionId: string) => {
+      return this.agentDatabase.agents.getBySessionWithChildren(sessionId, this.agentDatabase.events);
+    });
   }
 
   private signDesktopRequest(

apps/desktop/src/main/database/agents.ts

@@ -0,0 +1,147 @@
+import type { DatabaseSync } from "node:sqlite";
+import type { AgentRow, AgentHierarchyNode, HookEventPayload } from "./types.js";
+
+export function createAgentStore(db: DatabaseSync) {
+  const insertStmt = db.prepare(`
+    INSERT INTO agents (id, session_id, name, type, subagent_type, status, task, current_tool, started_at, updated_at, parent_agent_id, metadata)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+  `);
+
+  const updateStatusStmt = db.prepare(`
+    UPDATE agents SET status = ?, updated_at = ?, ended_at = ? WHERE id = ?
+  `);
+
+  const updateStmt = db.prepare(`
+    UPDATE agents SET name = ?, task = ?, current_tool = ?, updated_at = ? WHERE id = ?
+  `);
+
+  const getBySessionStmt = db.prepare(
+    "SELECT * FROM agents WHERE session_id = ? ORDER BY started_at ASC",
+  );
+  const getByIdStmt = db.prepare("SELECT * FROM agents WHERE id = ?");
+
+  const getBySessionWithChildrenStmt = db.prepare(`
+    SELECT a.*, 
+      (SELECT COUNT(*) FROM agents child WHERE child.parent_agent_id = a.id) as children_count
+    FROM agents a WHERE a.session_id = ? ORDER BY a.started_at ASC
+  `);
+
+  function toRow(raw: Record<string, unknown> | undefined): AgentRow | undefined {
+    if (!raw) return undefined;
+    return {
+      id: raw.id as string,
+      sessionId: raw.session_id as string,
+      name: (raw.name as string) ?? null,
+      type: (raw.type as string) ?? null,
+      subagentType: (raw.subagent_type as string) ?? null,
+      status: raw.status as string,
+      task: (raw.task as string) ?? null,
+      currentTool: (raw.current_tool as string) ?? null,
+      startedAt: (raw.started_at as string) ?? null,
+      updatedAt: (raw.updated_at as string) ?? null,
+      endedAt: (raw.ended_at as string) ?? null,
+      awaitingInputSince: (raw.awaiting_input_since as string) ?? null,
+      parentAgentId: (raw.parent_agent_id as string) ?? null,
+      metadata: (raw.metadata as string) ?? null,
+    };
+  }
+
+  function rowsToList(raws: Record<string, unknown>[]): AgentRow[] {
+    return raws.map(toRow).filter(Boolean) as AgentRow[];
+  }
+
+  return {
+    upsert(payload: HookEventPayload): AgentRow {
+      if (!payload.agentId || !payload.sessionId) {
+        throw new Error("agentId and sessionId are required");
+      }
+
+      const existing = toRow(getByIdStmt.get(payload.agentId) as Record<string, unknown> | undefined);
+      const now = new Date().toISOString();
+
+      if (existing) {
+        if (payload.status) {
+          const endedAt = ["completed", "failed", "stopped"].includes(payload.status) ? now : null;
+          updateStatusStmt.run(payload.status, now, endedAt, payload.agentId);
+        }
+        if (payload.name || payload.task || payload.toolName) {
+          updateStmt.run(
+            payload.name ?? existing.name,
+            payload.task ?? existing.task,
+            payload.toolName ?? existing.currentTool,
+            now,
+            payload.agentId,
+          );
+        }
+        return toRow(getByIdStmt.get(payload.agentId) as Record<string, unknown>)!;
+      }
+
+      insertStmt.run(
+        payload.agentId,
+        payload.sessionId,
+        payload.name ?? null,
+        payload.type ?? null,
+        payload.subagentType ?? null,
+        payload.status ?? "running",
+        payload.task ?? null,
+        payload.toolName ?? null,
+        now,
+        now,
+        payload.parentAgentId ?? null,
+        payload.metadata ? JSON.stringify(payload.metadata) : null,
+      );
+
+      return toRow(getByIdStmt.get(payload.agentId) as Record<string, unknown>)!;
+    },
+
+    getBySession(sessionId: string): AgentRow[] {
+      return rowsToList(getBySessionStmt.all(sessionId) as Record<string, unknown>[]);
+    },
+
+    getBySessionWithChildren(sessionId: string, eventStore: { getBySession: (sid: string) => { agentId: string | null; eventType: string; toolName: string | null; summary: string | null; createdAt: string | null }[] }): AgentHierarchyNode[] {
+      const raws = getBySessionWithChildrenStmt.all(sessionId) as Record<string, unknown>[];
+      const allAgents = raws.map((r) => ({
+        ...toRow(r)!,
+        childrenCount: r.children_count as number,
+      }));
+
+      const agentMap = new Map<string, AgentHierarchyNode>();
+      const roots: AgentHierarchyNode[] = [];
+
+      for (const agent of allAgents) {
+        const events = eventStore.getBySession(sessionId)
+          .filter((e) => e.agentId === agent.id)
+          .map((e) => ({
+            eventType: e.eventType,
+            toolName: e.toolName,
+            summary: e.summary,
+            createdAt: e.createdAt,
+          }));
+
+        const node: AgentHierarchyNode = {
+          agentId: agent.id,
+          name: agent.name,
+          type: agent.type,
+          subagentType: agent.subagentType,
+          status: agent.status,
+          task: agent.task,
+          currentTool: agent.currentTool,
+          children: [],
+          events,
+        };
+        agentMap.set(agent.id, node);
+      }
+
+      for (const agent of allAgents) {
+        const node = agentMap.get(agent.id)!;
+        if (agent.parentAgentId && agentMap.has(agent.parentAgentId)) {
+          agentMap.get(agent.parentAgentId)!.children.push(node);
+        } else {
+          roots.push(node);
+        }
+      }
+
+      return roots;
+    },
+  };
+}

apps/desktop/src/main/database/dashboard.ts

@@ -0,0 +1,97 @@
+import type { DatabaseSync } from "node:sqlite";
+import type { DashboardSummary, TokenAnalytics } from "./types.js";
+
+export function createDashboardQueries(db: DatabaseSync) {
+  const totalSessionsStmt = db.prepare("SELECT COUNT(*) as count FROM sessions");
+  const activeSessionsStmt = db.prepare(
+    "SELECT COUNT(*) as count FROM sessions WHERE status NOT IN ('completed', 'failed', 'stopped')",
+  );
+  const totalAgentsStmt = db.prepare("SELECT COUNT(*) as count FROM agents");
+  const totalEventsStmt = db.prepare("SELECT COUNT(*) as count FROM events");
+  const totalTokensStmt = db.prepare(`
+    SELECT COALESCE(SUM(input_tokens + output_tokens), 0) as total
+    FROM token_usage
+  `);
+  const recentSessionsStmt = db.prepare(
+    "SELECT id, name, status, model, cwd, started_at FROM sessions ORDER BY started_at DESC LIMIT 10",
+  );
+
+  const tokenAnalyticsStmt = db.prepare(`
+    SELECT COALESCE(SUM(input_tokens), 0) as totalInput,
+      COALESCE(SUM(output_tokens), 0) as totalOutput,
+      COALESCE(SUM(cache_read_tokens), 0) as totalCacheRead,
+      COALESCE(SUM(cache_write_tokens), 0) as totalCacheWrite
+    FROM token_usage
+  `);
+
+  const tokenByModelStmt = db.prepare(`
+    SELECT model,
+      SUM(input_tokens) as inputTokens,
+      SUM(output_tokens) as outputTokens,
+      COUNT(DISTINCT session_id) as sessions
+    FROM token_usage
+    WHERE model IS NOT NULL
+    GROUP BY model
+    ORDER BY SUM(input_tokens + output_tokens) DESC
+  `);
+
+  const tokenByDayStmt = db.prepare(`
+    SELECT DATE(t.created_at) as day,
+      SUM(t.input_tokens) as inputTokens,
+      SUM(t.output_tokens) as outputTokens
+    FROM token_usage t
+    WHERE t.created_at IS NOT NULL
+    GROUP BY DATE(t.created_at)
+    ORDER BY day DESC
+    LIMIT 30
+  `);
+
+  return {
+    getSummary(): DashboardSummary {
+      const totalSessions = (totalSessionsStmt.get() as { count: number }).count;
+      const activeSessions = (activeSessionsStmt.get() as { count: number }).count;
+      const totalAgents = (totalAgentsStmt.get() as { count: number }).count;
+      const totalEvents = (totalEventsStmt.get() as { count: number }).count;
+      const totalTokens = (totalTokensStmt.get() as { total: number }).total;
+      const recentSessions = recentSessionsStmt.all() as Array<{
+        id: string;
+        name: string | null;
+        status: string;
+        model: string | null;
+        cwd: string | null;
+        started_at: string | null;
+      }>;
+
+      return {
+        totalSessions,
+        activeSessions,
+        totalAgents,
+        totalEvents,
+        totalTokens,
+        recentSessions: recentSessions.map((s) => ({
+          id: s.id,
+          name: s.name,
+          status: s.status,
+          model: s.model,
+          cwd: s.cwd,
+          startedAt: s.started_at,
+        })),
+      };
+    },
+
+    getTokenAnalytics(): TokenAnalytics {
+      const totals = tokenAnalyticsStmt.get() as { totalInput: number; totalOutput: number; totalCacheRead: number; totalCacheWrite: number };
+      const byModel = tokenByModelStmt.all() as Array<{ model: string; inputTokens: number; outputTokens: number; sessions: number }>;
+      const byDay = tokenByDayStmt.all() as Array<{ day: string; inputTokens: number; outputTokens: number }>;
+
+      return {
+        totalInputTokens: totals.totalInput,
+        totalOutputTokens: totals.totalOutput,
+        totalCacheReadTokens: totals.totalCacheRead,
+        totalCacheWriteTokens: totals.totalCacheWrite,
+        byModel,
+        byDay,
+      };
+    },
+  };
+}