Normalize active dashboard selection to avoid showing widgets from other dashboards.

Author: homanp

src/components/dashboard-grid.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo, useCallback, useState, useEffect, useRef } from "react";
 import { LayoutGrid, TrendingUp, Shield, Globe } from "lucide-react";
-import { useWidgetStore } from "@/store/widget-store";
+import { resolveActiveDashboardId, useWidgetStore } from "@/store/widget-store";
 import { WidgetCard } from "@/components/widget-card";
 import { TextBlockItem } from "@/components/text-block-item";
 import { deleteWidgetFromDb, deleteTextBlockFromDb, scheduleSyncToServer } from "@/lib/sync-db";
@@ -185,31 +185,35 @@ export function DashboardGrid() {
     return () => observer.disconnect();
   }, []);
 
-  const activeDashboard = dashboards.find((d) => d.id === activeDashboardId);
+  const resolvedActiveDashboardId = useMemo(
+    () => resolveActiveDashboardId(dashboards, activeDashboardId),
+    [dashboards, activeDashboardId],
+  );
+  const activeDashboard = dashboards.find((d) => d.id === resolvedActiveDashboardId);
 
   const widgets = useMemo(() => {
-    if (!activeDashboard) return allWidgets;
+    if (!activeDashboard) return dashboards.length === 0 ? allWidgets : [];
     return allWidgets.filter((w) => activeDashboard.widgetIds.includes(w.id));
-  }, [allWidgets, activeDashboard]);
+  }, [allWidgets, activeDashboard, dashboards.length]);
 
   const textBlocks = useMemo(() => {
-    if (!activeDashboard) return allTextBlocks;
+    if (!activeDashboard) return dashboards.length === 0 ? allTextBlocks : [];
     return allTextBlocks.filter((tb) => (activeDashboard.textBlockIds ?? []).includes(tb.id));
-  }, [allTextBlocks, activeDashboard]);
+  }, [allTextBlocks, activeDashboard, dashboards.length]);
 
   const DEFAULT_VIEWPORT = { panX: 24, panY: 60, zoom: 1 };
 
-  const viewport = activeDashboardId
-    ? viewports[activeDashboardId] ?? DEFAULT_VIEWPORT
+  const viewport = resolvedActiveDashboardId
+    ? viewports[resolvedActiveDashboardId] ?? DEFAULT_VIEWPORT
     : DEFAULT_VIEWPORT;
 
   const handleViewportChange = useCallback(
     (panX: number, panY: number, zoom: number) => {
-      if (activeDashboardId) {
-        setViewport(activeDashboardId, { panX, panY, zoom });
+      if (resolvedActiveDashboardId) {
+        setViewport(resolvedActiveDashboardId, { panX, panY, zoom });
       }
     },
-    [activeDashboardId, setViewport]
+    [resolvedActiveDashboardId, setViewport]
   );
 
   const handleRemove = useCallback(

src/components/dashboard-picker.tsx

@@ -5,7 +5,7 @@ import { ChevronDown, Plus, Pencil, Check, Trash2, LayoutDashboard } from "lucid
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
-import { useWidgetStore } from "@/store/widget-store";
+import { resolveActiveDashboardId, useWidgetStore } from "@/store/widget-store";
 import { scheduleSyncToServer } from "@/lib/sync-db";
 
 export function DashboardPicker() {
@@ -25,7 +25,8 @@ export function DashboardPicker() {
   const editInputRef = useRef<HTMLInputElement>(null);
   const newInputRef = useRef<HTMLInputElement>(null);
 
-  const activeDashboard = dashboards.find((d) => d.id === activeDashboardId);
+  const resolvedActiveDashboardId = resolveActiveDashboardId(dashboards, activeDashboardId);
+  const activeDashboard = dashboards.find((d) => d.id === resolvedActiveDashboardId);
 
   useEffect(() => {
     if (!open) return;
@@ -141,7 +142,7 @@ export function DashboardPicker() {
                 onClick={() => editingId !== d.id && handleSelect(d.id)}
                 className={cn(
                   "flex items-center gap-2 px-3 py-1.5 text-xs uppercase tracking-wider cursor-pointer transition-colors",
-                  d.id === activeDashboardId
+                  d.id === resolvedActiveDashboardId
                     ? "text-zinc-100 bg-zinc-700/50"
                     : "text-zinc-400 hover:text-zinc-200 hover:bg-zinc-700/30"
                 )}
@@ -168,9 +169,9 @@ export function DashboardPicker() {
                     <button
                       onClick={(e) => handleStartEdit(e, d.id, d.title)}
                       className="opacity-0 group-hover:opacity-100 text-zinc-500 hover:text-zinc-300 shrink-0"
-                      style={{ opacity: d.id === activeDashboardId ? 0.6 : 0 }}
+                      style={{ opacity: d.id === resolvedActiveDashboardId ? 0.6 : 0 }}
                       onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.opacity = "1"; }}
-                      onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.opacity = d.id === activeDashboardId ? "0.6" : "0"; }}
+                      onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.opacity = d.id === resolvedActiveDashboardId ? "0.6" : "0"; }}
                     >
                       <Pencil className="h-3 w-3" />
                     </button>

src/store/__tests__/widget-store.test.ts

@@ -1,5 +1,10 @@
 import { beforeEach, describe, expect, it } from "vitest";
-import { getNextWidgetInsertionY, shiftItemsDown, useWidgetStore } from "@/store/widget-store";
+import {
+  getNextWidgetInsertionY,
+  resolveActiveDashboardId,
+  shiftItemsDown,
+  useWidgetStore,
+} from "@/store/widget-store";
 import type { Dashboard, TextBlock, Widget } from "@/store/widget-store";
 
 function makeWidget(id: string, x: number, y: number, w: number, h: number): Widget {
@@ -111,6 +116,24 @@ describe("getNextWidgetInsertionY", () => {
   });
 });
 
+describe("resolveActiveDashboardId", () => {
+  it("keeps the current dashboard when it still exists", () => {
+    const dashboards = [makeDashboard("dash-1"), makeDashboard("dash-2")];
+
+    expect(resolveActiveDashboardId(dashboards, "dash-2")).toBe("dash-2");
+  });
+
+  it("falls back to the first dashboard when the stored id is stale", () => {
+    const dashboards = [makeDashboard("dash-1"), makeDashboard("dash-2")];
+
+    expect(resolveActiveDashboardId(dashboards, "missing")).toBe("dash-1");
+  });
+
+  it("returns null when there are no dashboards", () => {
+    expect(resolveActiveDashboardId([], "missing")).toBeNull();
+  });
+});
+
 describe("addWidget", () => {
   it("places the first widget at the baseline row", () => {
     const widgetId = useWidgetStore.getState().addWidget("First");
@@ -165,3 +188,27 @@ describe("addWidget", () => {
   });
 });
 
+describe("dashboard selection", () => {
+  it("falls back to the first dashboard when selecting a stale id", () => {
+    useWidgetStore.setState({
+      dashboards: [makeDashboard("dash-1"), makeDashboard("dash-2")],
+      activeDashboardId: "dash-1",
+    });
+
+    useWidgetStore.getState().setActiveDashboard("missing");
+
+    expect(useWidgetStore.getState().activeDashboardId).toBe("dash-1");
+  });
+
+  it("moves selection to the next available dashboard when removing the active one", () => {
+    useWidgetStore.setState({
+      dashboards: [makeDashboard("dash-1"), makeDashboard("dash-2")],
+      activeDashboardId: "dash-1",
+    });
+
+    useWidgetStore.getState().removeDashboard("dash-1");
+
+    expect(useWidgetStore.getState().activeDashboardId).toBe("dash-2");
+  });
+});
+

src/store/widget-store.ts

@@ -161,6 +161,17 @@ export function getNextWidgetInsertionY(
   return Number.isFinite(topY) ? topY - newHeight : 0;
 }
 
+export function resolveActiveDashboardId(
+  dashboards: Dashboard[],
+  activeDashboardId: string | null | undefined,
+): string | null {
+  if (dashboards.length === 0) return null;
+  if (activeDashboardId && dashboards.some((dashboard) => dashboard.id === activeDashboardId)) {
+    return activeDashboardId;
+  }
+  return dashboards[0].id;
+}
+
 export const useWidgetStore = create<WidgetStore>()(
   persist(
     (set, get) => ({
@@ -196,13 +207,17 @@ export const useWidgetStore = create<WidgetStore>()(
         const widgetIds = dashboard?.widgetIds ?? [];
         const textBlockIds = dashboard?.textBlockIds ?? [];
         set((state) => {
+          const dashboards = state.dashboards.filter((d) => d.id !== id);
           const nextActions = { ...state.currentActions };
           for (const wid of widgetIds) delete nextActions[wid];
           return {
-            dashboards: state.dashboards.filter((d) => d.id !== id),
+            dashboards,
             widgets: state.widgets.filter((w) => !widgetIds.includes(w.id)),
             textBlocks: state.textBlocks.filter((tb) => !textBlockIds.includes(tb.id)),
-            activeDashboardId: state.activeDashboardId === id ? null : state.activeDashboardId,
+            activeDashboardId: resolveActiveDashboardId(
+              dashboards,
+              state.activeDashboardId === id ? null : state.activeDashboardId,
+            ),
             activeWidgetId: widgetIds.includes(state.activeWidgetId ?? "") ? null : state.activeWidgetId,
             streamingWidgetIds: state.streamingWidgetIds.filter((wid) => !widgetIds.includes(wid)),
             reasoningStreamingIds: state.reasoningStreamingIds.filter((wid) => !widgetIds.includes(wid)),
@@ -212,7 +227,7 @@ export const useWidgetStore = create<WidgetStore>()(
       },
 
       setActiveDashboard: (id) => {
-        set({ activeDashboardId: id });
+        set({ activeDashboardId: resolveActiveDashboardId(get().dashboards, id) });
       },
 
       addWidget: (title = "Untitled Widget", description = "") => {
@@ -600,7 +615,7 @@ export const useWidgetStore = create<WidgetStore>()(
           ...current,
           ...stored,
           dashboards,
-          activeDashboardId: stored.activeDashboardId ?? dashboards[0]?.id ?? null,
+          activeDashboardId: resolveActiveDashboardId(dashboards, stored.activeDashboardId ?? null),
           streamingWidgetIds: [],
           currentActions: {},
           reasoningStreamingIds: [],