FEA-1550: Restore PGlite dashboard parity

- Use bigint token arithmetic in PGlite analytics and session totals, and carry hook identity fields into sync payloads.

- Align dashboard pages, tables, controls, and visualizations on design-system primitives.

- Port deleted SQLite/sidecar coverage that still maps to first-party PGlite behavior, including token reconciliation, pagination, lifecycle/import, parser, catchup-cache, and sync edge cases.

Testing: Desktop typecheck, lint, build, focused PGlite dashboard tests, and expanded dashboard/PGlite/sync/parser/reconciliation/boundary tests passed.

Risks: Full desktop test suite was not rerun; generated sidecar/vendor-only tests remain intentionally deleted because the sidecar path was removed.

Author: mikeangstadt

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

@@ -242,6 +242,7 @@ export interface OpenPgliteAgentDatabaseOptions {
   detectBillingMode: (harness: string) => string;
   emit?: (sessionId: string) => void;
   extractTranscript?: (path: string) => TranscriptExtract | null;
+  getUserIdentity?: () => { userId: string | null; organizationId: string | null } | null;
   log?: (message: string) => void;
   now?: () => string;
   staleMinutes?: number;
@@ -285,6 +286,7 @@ export async function openPgliteAgentDatabase(
       detectBillingMode: options.detectBillingMode,
       emit: options.emit,
       extractTranscript: options.extractTranscript,
+      getUserIdentity: options.getUserIdentity,
       log,
       now: nowFn,
       staleMinutes: options.staleMinutes,
@@ -335,7 +337,7 @@ function createPgliteSessionStore(db: PgliteClient) {
           s.*,
           COALESCE(ac.agent_count, 0)::int as agent_count,
           COALESCE(ec.event_count, 0)::int as event_count,
-          COALESCE(tt.total_tokens, 0)::int as total_tokens
+          COALESCE(tt.total_tokens, 0) as total_tokens
         FROM sessions s
         LEFT JOIN agent_counts ac ON ac.session_id = s.id
         LEFT JOIN event_counts ec ON ec.session_id = s.id
@@ -350,7 +352,7 @@ function createPgliteSessionStore(db: PgliteClient) {
           s.*,
           COALESCE(ac.agent_count, 0)::int as agent_count,
           COALESCE(ec.event_count, 0)::int as event_count,
-          COALESCE(tt.total_tokens, 0)::int as total_tokens
+          COALESCE(tt.total_tokens, 0) as total_tokens
         FROM sessions s
         LEFT JOIN agent_counts ac ON ac.session_id = s.id
         LEFT JOIN event_counts ec ON ec.session_id = s.id
@@ -369,7 +371,7 @@ function createPgliteSessionStore(db: PgliteClient) {
           s.*,
           COALESCE(ac.agent_count, 0)::int as agent_count,
           COALESCE(ec.event_count, 0)::int as event_count,
-          COALESCE(tt.total_tokens, 0)::int as total_tokens
+          COALESCE(tt.total_tokens, 0) as total_tokens
         FROM sessions s
         LEFT JOIN agent_counts ac ON ac.session_id = s.id
         LEFT JOIN event_counts ec ON ec.session_id = s.id
@@ -398,7 +400,7 @@ function createPgliteSessionStore(db: PgliteClient) {
           s.*,
           COALESCE(ac.agent_count, 0)::int as agent_count,
           COALESCE(ec.event_count, 0)::int as event_count,
-          COALESCE(tt.total_tokens, 0)::int as total_tokens
+          COALESCE(tt.total_tokens, 0) as total_tokens
         FROM sessions s
         LEFT JOIN agent_counts ac ON ac.session_id = s.id
         LEFT JOIN event_counts ec ON ec.session_id = s.id
@@ -670,7 +672,7 @@ function createPgliteDashboardQueries(db: PgliteClient) {
         count(db, "SELECT COUNT(*)::int as count FROM agents"),
         count(db, "SELECT COUNT(*)::int as count FROM events"),
         count(db, "SELECT COUNT(DISTINCT event_type)::int as count FROM events"),
-        scalarNumber(db, "SELECT COALESCE(SUM(input_tokens + output_tokens), 0)::int as total FROM token_usage", "total"),
+        scalarNumber(db, "SELECT COALESCE(SUM(input_tokens::bigint + output_tokens::bigint), 0) as total FROM token_usage", "total"),
         db.query<{
           id: string;
           name: string | null;
@@ -704,10 +706,10 @@ function createPgliteDashboardQueries(db: PgliteClient) {
         total_cache_read: number;
         total_cache_write: number;
       }>(`
-        SELECT COALESCE(SUM(input_tokens), 0)::int as total_input,
-          COALESCE(SUM(output_tokens), 0)::int as total_output,
-          COALESCE(SUM(cache_read_tokens), 0)::int as total_cache_read,
-          COALESCE(SUM(cache_write_tokens), 0)::int as total_cache_write
+        SELECT COALESCE(SUM(input_tokens), 0) as total_input,
+          COALESCE(SUM(output_tokens), 0) as total_output,
+          COALESCE(SUM(cache_read_tokens), 0) as total_cache_read,
+          COALESCE(SUM(cache_write_tokens), 0) as total_cache_write
         FROM token_usage
       `);
       const byModel = await db.query<{
@@ -717,22 +719,22 @@ function createPgliteDashboardQueries(db: PgliteClient) {
         sessions: number;
       }>(`
         SELECT model,
-          SUM(input_tokens)::int as input_tokens,
-          SUM(output_tokens)::int as output_tokens,
+          SUM(input_tokens) as input_tokens,
+          SUM(output_tokens) as output_tokens,
           COUNT(DISTINCT session_id)::int as sessions
         FROM token_usage
         WHERE model IS NOT NULL
         GROUP BY model
-        ORDER BY SUM(input_tokens + output_tokens) DESC
+        ORDER BY SUM(input_tokens::bigint + output_tokens::bigint) DESC
       `);
       const byDay = await db.query<{
         day: string;
         input_tokens: number;
         output_tokens: number;
       }>(`
         SELECT (created_at::timestamp::date)::text as day,
-          SUM(input_tokens)::int as input_tokens,
-          SUM(output_tokens)::int as output_tokens
+          SUM(input_tokens) as input_tokens,
+          SUM(output_tokens) as output_tokens
         FROM token_usage
         WHERE created_at IS NOT NULL
         GROUP BY created_at::timestamp::date
@@ -1159,6 +1161,7 @@ function createPgliteLifecycle(
     detectBillingMode: (harness: string) => string;
     emit?: (sessionId: string) => void;
     extractTranscript?: (path: string) => TranscriptExtract | null;
+    getUserIdentity?: () => { userId: string | null; organizationId: string | null } | null;
     log: (message: string) => void;
     now: () => string;
     staleMinutes?: number;
@@ -1195,6 +1198,7 @@ function createPgliteLifecycle(
               tokenUsage,
               transcript,
               detectBillingMode: deps.detectBillingMode,
+              getUserIdentity: deps.getUserIdentity,
             });
           });
           return true;
@@ -1229,11 +1233,12 @@ async function handleHook(
     tokenUsage: ReturnType<typeof createPgliteTokenUsageStore>;
     transcript: TranscriptExtract | null;
     detectBillingMode: (harness: string) => string;
+    getUserIdentity?: () => { userId: string | null; organizationId: string | null } | null;
   },
 ): Promise<void> {
   const { data, hookType, harness, now, sessionId } = options;
   const main = mainAgentId(sessionId);
-  await ensureSession(tx, sessionId, data, harness, now, options.detectBillingMode);
+  await ensureSession(tx, sessionId, data, harness, now, options.detectBillingMode, options.getUserIdentity);
   const session = await getSession(tx, sessionId);
   if (!session) {
     return;
@@ -1571,6 +1576,8 @@ async function loadPgliteSyncedSessions(
     metadata: string | null;
     harness: string | null;
     billing_mode: string | null;
+    user_id: string | null;
+    organization_id: string | null;
   }>(
     db,
     `
@@ -1586,7 +1593,9 @@ async function loadPgliteSyncedSessions(
         awaiting_input_since,
         metadata,
         harness,
-        billing_mode
+        billing_mode,
+        user_id,
+        organization_id
       FROM sessions
       WHERE id IN (__IDS__)
     `,
@@ -1721,6 +1730,8 @@ async function loadPgliteSyncedSessions(
         endedAt: row.ended_at,
         awaitingInputSince: row.awaiting_input_since,
         metadata: parseJsonObjectText(row.metadata),
+        ...(row.user_id ? { userId: row.user_id } : {}),
+        ...(row.organization_id ? { organizationId: row.organization_id } : {}),
         ...(attribution ? { attribution } : {}),
         agents: (agentsBySessionId.get(id) ?? []).map((agentRow) => ({
           externalAgentId: agentRow.id,
@@ -1848,7 +1859,7 @@ function sessionDetailsCtes(): string {
     token_totals AS (
       SELECT
         session_id,
-        COALESCE(SUM(COALESCE(input_tokens, 0) + COALESCE(output_tokens, 0)), 0)::int as total_tokens
+        COALESCE(SUM(COALESCE(input_tokens, 0)::bigint + COALESCE(output_tokens, 0)::bigint), 0) as total_tokens
       FROM token_usage
       GROUP BY session_id
     )
@@ -1987,14 +1998,19 @@ async function ensureSession(
   harness: string,
   now: string,
   detectBillingMode: (harness: string) => string,
+  getUserIdentity?: () => { userId: string | null; organizationId: string | null } | null,
 ): Promise<void> {
   if (await getSession(tx, sessionId)) {
     return;
   }
   const billingMode = safe(() => detectBillingMode(harness)) ?? "unknown";
+  const identity = safe(() => getUserIdentity?.()) ?? null;
   await tx.query(
-    `INSERT INTO sessions (id, name, status, cwd, model, started_at, updated_at, harness, billing_mode)
-     VALUES ($1, $2, 'active', $3, $4, $5, $5, $6, $7)`,
+    `INSERT INTO sessions (
+       id, name, status, cwd, model, started_at, updated_at, harness,
+       billing_mode, user_id, organization_id
+     )
+     VALUES ($1, $2, 'active', $3, $4, $5, $5, $6, $7, $8, $9)`,
     [
       sessionId,
       data.session_name ?? null,
@@ -2003,6 +2019,8 @@ async function ensureSession(
       now,
       harness,
       billingMode,
+      identity?.userId ?? null,
+      identity?.organizationId ?? null,
     ],
   );
   await tx.query(

apps/desktop/src/renderer/components/analytics/AnalyticsDetails.tsx

@@ -1,10 +1,10 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@closedloop-ai/design-system/components/ui/card";
 import { LineChart } from "@closedloop-ai/design-system/components/ui/primitives/line-chart";
 import { DonutChart } from "@closedloop-ai/design-system/components/ui/primitives/donut-chart";
 import { RankedBar } from "@closedloop-ai/design-system/components/ui/primitives/ranked-bar";
 import { ActivityHeatmap } from "@closedloop-ai/design-system/components/ui/primitives/activity-heatmap";
 import { SegmentedBar } from "@closedloop-ai/design-system/components/ui/primitives/segmented-bar";
 import type { AnalyticsData } from "../../../shared/agent-db-contract";
+import { DashboardCard } from "../layout/page-shell";
 
 const PALETTE = [
   "#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6",
@@ -78,72 +78,52 @@ export function AnalyticsDetails({ data }: { data: AnalyticsData }) {
   return (
     <>
       {dailyEvents.length > 0 && (
-        <Card>
-          <CardHeader><CardTitle>Activity Heatmap</CardTitle></CardHeader>
-          <CardContent>
-            <ActivityHeatmap weeks={heatmapWeeks} />
-          </CardContent>
-        </Card>
+        <DashboardCard title="Activity Heatmap">
+          <ActivityHeatmap weeks={heatmapWeeks} />
+        </DashboardCard>
       )}
 
-      <div className="grid grid-cols-2 gap-6">
-        <Card>
-          <CardHeader><CardTitle>Token Distribution</CardTitle></CardHeader>
-          <CardContent>
+      <div className="grid grid-cols-1 gap-3 xl:grid-cols-2">
+        <DashboardCard title="Token Distribution">
             {tokenSegments.length > 0 ? (
               <DonutChart segments={tokenSegments} formatTotal={(t) => t.toLocaleString()} centerLabel="Tokens" />
             ) : (
               <p className="py-8 text-sm text-center text-[var(--muted-foreground)]">No token data</p>
             )}
-          </CardContent>
-        </Card>
+        </DashboardCard>
 
-        <Card>
-          <CardHeader><CardTitle>Sessions by Status</CardTitle></CardHeader>
-          <CardContent>
+        <DashboardCard title="Sessions by Status">
             {sessionSegments.length > 0 ? (
               <DonutChart segments={sessionSegments} formatTotal={(t) => `${t}`} centerLabel="Sessions" />
             ) : (
               <p className="py-8 text-sm text-center text-[var(--muted-foreground)]">No session data</p>
             )}
-          </CardContent>
-        </Card>
+        </DashboardCard>
 
-        <Card>
-          <CardHeader><CardTitle>Agents by Status</CardTitle></CardHeader>
-          <CardContent>
+        <DashboardCard title="Agents by Status">
             {agentStatusSegments.length > 0 ? (
               <DonutChart segments={agentStatusSegments} formatTotal={(t) => `${t}`} centerLabel="Agents" />
             ) : (
               <p className="py-8 text-sm text-center text-[var(--muted-foreground)]">No agent data</p>
             )}
-          </CardContent>
-        </Card>
+        </DashboardCard>
 
-        <Card>
-          <CardHeader><CardTitle>Events by Type</CardTitle></CardHeader>
-          <CardContent>
+        <DashboardCard title="Events by Type">
             {eventSegments.length > 0 ? (
               <DonutChart segments={eventSegments} formatTotal={(t) => t.toLocaleString()} centerLabel="Events" />
             ) : (
               <p className="py-8 text-sm text-center text-[var(--muted-foreground)]">No event data</p>
             )}
-          </CardContent>
-        </Card>
+        </DashboardCard>
       </div>
 
       {agentTypeSegments.length > 0 && (
-        <Card>
-          <CardHeader><CardTitle>Agent Type Distribution</CardTitle></CardHeader>
-          <CardContent>
-            <SegmentedBar segments={agentTypeSegments} total={agentTypeTotal} />
-          </CardContent>
-        </Card>
+        <DashboardCard title="Agent Type Distribution">
+          <SegmentedBar segments={agentTypeSegments} total={agentTypeTotal} />
+        </DashboardCard>
       )}
 
-      <Card>
-        <CardHeader><CardTitle>Tool Usage</CardTitle></CardHeader>
-        <CardContent>
+      <DashboardCard title="Tool Usage">
           {toolUsage.length > 0 ? (
             <div className="space-y-2">
               {toolUsage.slice(0, 15).map((t) => (
@@ -158,12 +138,9 @@ export function AnalyticsDetails({ data }: { data: AnalyticsData }) {
           ) : (
             <p className="py-8 text-sm text-center text-[var(--muted-foreground)]">No tool usage data</p>
           )}
-        </CardContent>
-      </Card>
+      </DashboardCard>
 
-      <Card>
-        <CardHeader><CardTitle>Token Usage by Model</CardTitle></CardHeader>
-        <CardContent>
+      <DashboardCard title="Token Usage by Model">
           {tokens.byModel.length > 0 ? (
             <div className="space-y-2">
               {tokens.byModel.map((m) => {
@@ -183,28 +160,21 @@ export function AnalyticsDetails({ data }: { data: AnalyticsData }) {
           ) : (
             <p className="py-8 text-sm text-center text-[var(--muted-foreground)]">No model data</p>
           )}
-        </CardContent>
-      </Card>
+      </DashboardCard>
 
       {dayPoints.length > 0 && (
-        <Card>
-          <CardHeader><CardTitle>Daily Token Usage (Last 30 Days)</CardTitle></CardHeader>
-          <CardContent>
-            <div className="h-48">
-              <LineChart points={dayPoints} color={PALETTE[0]} valueFormatter={(v) => v.toLocaleString()} />
-            </div>
-          </CardContent>
-        </Card>
+        <DashboardCard title="Daily Token Usage (Last 30 Days)">
+          <div className="h-48">
+            <LineChart points={dayPoints} color={PALETTE[0]} valueFormatter={(v) => v.toLocaleString()} />
+          </div>
+        </DashboardCard>
       )}
 
-      <Card>
-        <CardHeader><CardTitle>At a Glance</CardTitle></CardHeader>
-        <CardContent className="text-sm text-[var(--muted-foreground)]">
+      <DashboardCard title="At a Glance" contentClassName="text-sm text-[var(--muted-foreground)]">
           {cacheTokens > 0
             ? `${Math.round((cacheTokens / (totalTokens + cacheTokens)) * 100)}% of total token traffic was cache-related.`
             : "No cache token activity recorded yet."}
-        </CardContent>
-      </Card>
+      </DashboardCard>
     </>
   );
 }