chore(release): 0.6.1

dashboard-app/package.json

@@ -9,6 +9,7 @@
     "build": "tsc --noEmit && vite build",
     "preview": "vite preview",
     "lint": "tsc --noEmit",
+    "test": "vitest run",
     "sync": "node ./scripts/sync.mjs"
   },
   "dependencies": {
@@ -21,6 +22,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.6.3",
     "vite": "^5.4.11",
-    "vite-plugin-singlefile": "^2.0.3"
+    "vite-plugin-singlefile": "^2.0.3",
+    "vitest": "^2.1.4"
   }
 }

dashboard-app/src/App.tsx

@@ -3,10 +3,13 @@ import { Topbar } from './components/Topbar';
 import { PageHeader } from './components/PageHeader';
 import { Metric, type MetricBucket } from './components/Metric';
 import { CallTable, type Call } from './components/CallTable';
+import { fmtCostUSD } from './components/format';
 import { LiveCallPanel } from './components/LiveCallPanel';
 import { MetricsPanel } from './components/MetricsPanel';
 import { useDashboardData } from './hooks/useDashboardData';
 import { useTranscript } from './hooks/useTranscript';
+import { useUiPrefs } from './hooks/useUiPrefs';
+import { deleteCalls } from './lib/api';
 import {
   bucketStrategyForRange,
   computeSparkline,
@@ -53,7 +56,9 @@ function pickPhoneNumber(calls: readonly Call[]): string {
 }
 
 export function App() {
-  const { calls, aggregates, isStreaming, error, refresh } = useDashboardData();
+  const { calls, aggregates, isStreaming, error, refresh, removeCallsLocal } =
+    useDashboardData();
+  const { revealed, dark, toggleRevealed, toggleDark } = useUiPrefs();
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [search, setSearch] = useState('');
   const [range, setRange] = useState<RangeKey>('24h');
@@ -156,13 +161,33 @@ export function App() {
     refresh().catch(() => undefined);
   };
 
+  const handleDeleteCalls = async (ids: readonly string[]): Promise<void> => {
+    if (ids.length === 0) return;
+    // Optimistic local removal so the rows vanish immediately. The SSE
+    // ``calls_deleted`` event triggers a refresh shortly after; if the
+    // server rejects an id (race with a status callback), it re-appears.
+    removeCallsLocal(ids);
+    if (ids.includes(selectedId ?? '')) setSelectedId(null);
+    try {
+      await deleteCalls(ids);
+    } catch {
+      // Pull the authoritative snapshot back if the call failed so the UI
+      // is consistent with the server's view.
+      await refresh().catch(() => undefined);
+    }
+  };
+
   return (
     <>
       <Topbar
         liveCount={liveCount}
         todayCount={totalCount}
         phoneNumber={phoneNumber}
         sdkVersion={SDK_VERSION}
+        revealed={revealed}
+        dark={dark}
+        onToggleRevealed={toggleRevealed}
+        onToggleDark={toggleDark}
       />
       <div className="page">
         <PageHeader range={range} setRange={(r) => setRange(r as RangeKey)} />
@@ -174,6 +199,7 @@ export function App() {
             spark={sparkTotalCalls.heights}
             buckets={toBuckets(sparkTotalCalls)}
             onSelectCall={setSelectedId}
+            kind="count"
           />
           <Metric
             label="Avg latency p95"
@@ -182,13 +208,15 @@ export function App() {
             spark={sparkLatency.heights}
             buckets={toBuckets(sparkLatency)}
             onSelectCall={setSelectedId}
+            kind="latency"
           />
           <Metric
             label={`Spend · ${RANGE_LABEL[range]}`}
-            value={`$${rangeSpend.toFixed(2)}`}
+            value={fmtCostUSD(rangeSpend)}
             spark={sparkSpend.heights}
             buckets={toBuckets(sparkSpend)}
             onSelectCall={setSelectedId}
+            kind="spend"
           />
           <Metric
             label="Active now"
@@ -199,6 +227,7 @@ export function App() {
             spark={sparkLive.heights}
             buckets={toBuckets(sparkLive)}
             onSelectCall={setSelectedId}
+            kind="count"
           />
         </div>
 
@@ -210,6 +239,8 @@ export function App() {
             newId={null}
             search={search}
             setSearch={setSearch}
+            onDeleteCalls={handleDeleteCalls}
+            revealed={revealed}
           />
           <div className="rr">
             <LiveCallPanel
@@ -220,6 +251,7 @@ export function App() {
               setRecording={setRecording}
               muted={muted}
               setMuted={setMuted}
+              revealed={revealed}
             />
             <MetricsPanel call={selected} />
           </div>