diff --git a/dashboard/src/main.tsx b/dashboard/src/main.tsx
index 1f38c253b8..68e52e8a0c 100644
--- a/dashboard/src/main.tsx
+++ b/dashboard/src/main.tsx
@@ -321,6 +321,7 @@ const ChatPage      = lazy(() => import("./v2/ChatPage.js").then(m => ({ default
 const TasksPage     = lazy(() => import("./v2/TasksPage.js").then(m => ({ default: m.TasksPage })));
 const AgentsPage    = lazy(() => import("./v2/AgentsPage.js").then(m => ({ default: m.AgentsPage })));
 const NodesPage     = lazy(() => import("./v2/NodesPage.js").then(m => ({ default: m.NodesPage })));
+const CustomDashboardsPage = lazy(() => import("./v2/CustomDashboardsPage.js").then(m => ({ default: m.CustomDashboardsPage })));
 const StatsPage     = lazy(() => import("./v2/StatsPage.js").then(m => ({ default: m.StatsPage })));
 const SchedulerPage = lazy(() => import("./v2/SchedulerPage.js").then(m => ({ default: m.SchedulerPage })));
 const SettingsPage  = lazy(() => import("./v2/SettingsPage.js").then(m => ({ default: m.SettingsPage })));
@@ -388,6 +389,12 @@ const nodesRoute = createRoute({
   component: NodesPage,
 });
 
+const customDashboardsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/custom-dashboards",
+  component: CustomDashboardsPage,
+});
+
 const statsRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/stats",
@@ -455,7 +462,7 @@ const notFoundRoute = createRoute({
   component: ErrorPage,
 });
 
-const routeTree = rootRoute.addChildren([indexRoute, sprintsRoute, tasksRoute, projectsRoute, chatRoute, agentsRoute, nodesRoute, statsRoute, schedulerRoute, configRoute, memoryRoute, knowledgeRoute, browserRoute, fileBrowserRoute, docsRoute, docsDocumentRoute, liveRoute, notFoundRoute]);
+const routeTree = rootRoute.addChildren([indexRoute, sprintsRoute, tasksRoute, projectsRoute, chatRoute, agentsRoute, nodesRoute, customDashboardsRoute, statsRoute, schedulerRoute, configRoute, memoryRoute, knowledgeRoute, browserRoute, fileBrowserRoute, docsRoute, docsDocumentRoute, liveRoute, notFoundRoute]);
 // `defaultPreload: "intent"` warms route matching on hover/focus; the page chunks themselves are
 // prefetched explicitly by the nav components via prefetchRoute() since they are Preact-lazy.
 const router = createRouter({ routeTree, defaultPreload: "intent", defaultPreloadDelay: 50 });
diff --git a/dashboard/src/v2/CustomDashboardsPage.tsx b/dashboard/src/v2/CustomDashboardsPage.tsx
new file mode 100644
index 0000000000..fa3810d4a4
--- /dev/null
+++ b/dashboard/src/v2/CustomDashboardsPage.tsx
@@ -0,0 +1,524 @@
+import type { FunctionComponent } from "preact";
+import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
+import { AlertTriangle, LayoutDashboard, RefreshCw, Save } from "lucide-preact";
+import { PageContainer } from "./components/layout/PageContainer.js";
+import { PageHeader } from "./components/layout/PageHeader.js";
+import { Button } from "./components/ui/Button.js";
+import { EmptyState } from "./components/ui/EmptyState.js";
+import { ActionFeedbackRegion } from "./components/ui/ActionFeedbackRegion.js";
+import { ConfirmDialog } from "./components/ui/ConfirmDialog.js";
+import { useConfirmDialog } from "./hooks/use-confirm-dialog.js";
+import { useActionFeedback } from "./hooks/use-action-feedback.js";
+import { useProjectData } from "./context/project-data.js";
+import {
+  archiveCustomDashboard,
+  createCustomDashboard,
+  createCustomDashboardRevision,
+  fetchCustomDashboard,
+  fetchCustomDashboardDataCatalog,
+  fetchCustomDashboardValidationLogs,
+  fetchCustomDashboardValidationSession,
+  fetchCustomDashboards,
+  publishCustomDashboardRevision,
+  startCustomDashboardValidation,
+  updateCustomDashboardDraft,
+  type CustomDashboardDataCatalogResponse,
+} from "./lib/custom-dashboard-api.js";
+import {
+  createDefaultCustomDashboardDraft,
+  hasDraftChanged,
+  parseJsonDraft,
+  selectLatestRevision,
+  stableJsonStringify,
+} from "./lib/custom-dashboard-view-models.js";
+import { CustomDashboardList } from "./components/custom-dashboards/CustomDashboardList.js";
+import {
+  CustomDashboardEditorPanel,
+  type CustomDashboardDraftState,
+  type CustomDashboardEditorTab,
+} from "./components/custom-dashboards/CustomDashboardEditorPanel.js";
+import { CustomDashboardValidationPanel } from "./components/custom-dashboards/CustomDashboardValidationPanel.js";
+import type {
+  CreateCustomDashboardRevisionInput,
+  CustomDashboardDataSourceNodeGraph,
+  CustomDashboardFileBundle,
+  CustomDashboardJsonObject,
+  CustomDashboardManifest,
+  CustomDashboardRecord,
+  CustomDashboardRevisionRecord,
+  CustomDashboardValidationSessionRecord,
+  UpdateCustomDashboardDraftInput,
+} from "./types.js";
+
+const terminalValidationStatuses = new Set(["passed", "failed", "cancelled"]);
+
+function dashboardToDraft(dashboard: CustomDashboardRecord): CustomDashboardDraftState {
+  return {
+    title: dashboard.title,
+    description: dashboard.description,
+    manifestText: stableJsonStringify(dashboard.manifest),
+    fileBundleText: stableJsonStringify(dashboard.fileBundle),
+    sourceGraphText: stableJsonStringify(dashboard.sourceNodeGraph),
+    styleguideText: stableJsonStringify(dashboard.styleguide),
+  };
+}
+
+export const CustomDashboardsPage: FunctionComponent = () => {
+  const { selectedProject, loading: projectLoading } = useProjectData();
+  const projectId = selectedProject?.id ?? null;
+  const [dashboards, setDashboards] = useState<CustomDashboardRecord[]>([]);
+  const [selectedDashboardId, setSelectedDashboardId] = useState<string | null>(null);
+  const [selectedDashboard, setSelectedDashboard] = useState<CustomDashboardRecord | null>(null);
+  const [revisions, setRevisions] = useState<CustomDashboardRevisionRecord[]>([]);
+  const [selectedRevisionId, setSelectedRevisionId] = useState<string | null>(null);
+  const [catalog, setCatalog] = useState<CustomDashboardDataCatalogResponse | null>(null);
+  const [draft, setDraft] = useState<CustomDashboardDraftState | null>(null);
+  const [activeTab, setActiveTab] = useState<CustomDashboardEditorTab>("manifest");
+  const [selectedFilePath, setSelectedFilePath] = useState("src/dashboard.tsx");
+  const [validationSession, setValidationSession] = useState<CustomDashboardValidationSessionRecord | null>(null);
+  const [logs, setLogs] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [creatingRevision, setCreatingRevision] = useState(false);
+  const [validating, setValidating] = useState(false);
+  const [refreshingLogs, setRefreshingLogs] = useState(false);
+  const [publishing, setPublishing] = useState(false);
+  const [archiving, setArchiving] = useState(false);
+  const {
+    feedback,
+    setError,
+    setSuccess,
+    clearFeedback,
+    clearError,
+  } = useActionFeedback();
+  const archiveConfirm = useConfirmDialog();
+
+  const selectedRevision = useMemo(
+    () => revisions.find((revision) => revision.id === selectedRevisionId) ?? null,
+    [revisions, selectedRevisionId],
+  );
+  const dirty = useMemo(() => draft ? hasDraftChanged(selectedDashboard, draft) : false, [draft, selectedDashboard]);
+
+  const loadProjectDashboards = useCallback(async (nextProjectId: string, signal?: AbortSignal): Promise<void> => {
+    setLoading(true);
+    try {
+      const [listResponse, nextCatalog] = await Promise.all([
+        fetchCustomDashboards(nextProjectId, signal),
+        fetchCustomDashboardDataCatalog(nextProjectId, signal),
+      ]);
+      if (signal?.aborted) {
+        return;
+      }
+      setDashboards(listResponse.dashboards);
+      setCatalog(nextCatalog);
+      setSelectedDashboardId((current) => (
+        current && listResponse.dashboards.some((dashboard) => dashboard.id === current)
+          ? current
+          : listResponse.dashboards[0]?.id ?? null
+      ));
+      if (listResponse.dashboards.length === 0) {
+        setSelectedDashboard(null);
+        setRevisions([]);
+        setSelectedRevisionId(null);
+        setDraft(null);
+      }
+    } catch (error) {
+      if (!signal?.aborted) {
+        setError(error instanceof Error ? error.message : "Failed to load custom dashboards.");
+      }
+    } finally {
+      if (!signal?.aborted) {
+        setLoading(false);
+      }
+    }
+  }, [setError]);
+
+  const loadDashboardDetail = useCallback(async (dashboardId: string, signal?: AbortSignal): Promise<void> => {
+    try {
+      const detail = await fetchCustomDashboard(dashboardId, signal);
+      if (signal?.aborted) {
+        return;
+      }
+      setSelectedDashboard(detail.dashboard);
+      setDashboards((current) => current.map((dashboard) => dashboard.id === detail.dashboard.id ? detail.dashboard : dashboard));
+      setRevisions(detail.revisions);
+      const nextRevision = detail.revisions.find((revision) => revision.id === selectedRevisionId)
+        ?? selectLatestRevision(detail.revisions);
+      setSelectedRevisionId(nextRevision?.id ?? null);
+      setDraft(dashboardToDraft(detail.dashboard));
+      setSelectedFilePath(detail.dashboard.fileBundle.files[0]?.path ?? "src/dashboard.tsx");
+    } catch (error) {
+      if (!signal?.aborted) {
+        setError(error instanceof Error ? error.message : "Failed to load custom dashboard details.");
+      }
+    }
+  }, [selectedRevisionId, setError]);
+
+  useEffect(() => {
+    if (!projectId) {
+      setDashboards([]);
+      setSelectedDashboardId(null);
+      setSelectedDashboard(null);
+      setRevisions([]);
+      setDraft(null);
+      return;
+    }
+    const controller = new AbortController();
+    void loadProjectDashboards(projectId, controller.signal);
+    return () => controller.abort();
+  }, [loadProjectDashboards, projectId]);
+
+  useEffect(() => {
+    if (!selectedDashboardId) {
+      return;
+    }
+    const controller = new AbortController();
+    void loadDashboardDetail(selectedDashboardId, controller.signal);
+    return () => controller.abort();
+  }, [loadDashboardDetail, selectedDashboardId]);
+
+  const refreshSelectedDashboard = useCallback(async (): Promise<void> => {
+    if (!selectedDashboardId) {
+      return;
+    }
+    await loadDashboardDetail(selectedDashboardId);
+  }, [loadDashboardDetail, selectedDashboardId]);
+
+  const buildDraftInput = useCallback((): UpdateCustomDashboardDraftInput & CreateCustomDashboardRevisionInput => {
+    if (!draft) {
+      throw new Error("No dashboard draft is selected.");
+    }
+    const manifest = parseJsonDraft<CustomDashboardManifest>(draft.manifestText, "Manifest");
+    if (!manifest.ok) {
+      throw new Error(manifest.message);
+    }
+    const fileBundle = parseJsonDraft<CustomDashboardFileBundle>(draft.fileBundleText, "File bundle");
+    if (!fileBundle.ok) {
+      throw new Error(fileBundle.message);
+    }
+    const sourceNodeGraph = parseJsonDraft<CustomDashboardDataSourceNodeGraph>(draft.sourceGraphText, "Source graph");
+    if (!sourceNodeGraph.ok) {
+      throw new Error(sourceNodeGraph.message);
+    }
+    const styleguide = parseJsonDraft<CustomDashboardJsonObject>(draft.styleguideText, "Styleguide");
+    if (!styleguide.ok) {
+      throw new Error(styleguide.message);
+    }
+    return {
+      title: draft.title.trim() || manifest.value.title || "Untitled Dashboard",
+      description: draft.description,
+      manifest: manifest.value,
+      fileBundle: fileBundle.value,
+      sourceNodeGraph: sourceNodeGraph.value,
+      styleguide: styleguide.value,
+    };
+  }, [draft]);
+
+  const saveDraft = useCallback(async (): Promise<CustomDashboardRecord> => {
+    if (!selectedDashboard) {
+      throw new Error("No dashboard is selected.");
+    }
+    const input = buildDraftInput();
+    const updated = await updateCustomDashboardDraft(selectedDashboard.id, input);
+    setSelectedDashboard(updated);
+    setDashboards((current) => current.map((dashboard) => dashboard.id === updated.id ? updated : dashboard));
+    setDraft(dashboardToDraft(updated));
+    return updated;
+  }, [buildDraftInput, selectedDashboard]);
+
+  const handleSaveDraft = async (): Promise<void> => {
+    setSaving(true);
+    clearFeedback();
+    try {
+      await saveDraft();
+      setSuccess("Custom dashboard draft saved.");
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "Failed to save custom dashboard.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleCreateDashboard = async (): Promise<void> => {
+    if (!projectId) {
+      return;
+    }
+    setCreating(true);
+    clearFeedback();
+    try {
+      const created = await createCustomDashboard(projectId, createDefaultCustomDashboardDraft());
+      setDashboards((current) => [created, ...current]);
+      setSelectedDashboardId(created.id);
+      setSuccess("Custom dashboard created.");
+      await loadProjectDashboards(projectId);
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "Failed to create custom dashboard.");
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleCreateRevision = async (): Promise<void> => {
+    if (!selectedDashboard) {
+      return;
+    }
+    setCreatingRevision(true);
+    clearFeedback();
+    try {
+      const input = buildDraftInput();
+      if (dirty) {
+        await saveDraft();
+      }
+      const revision = await createCustomDashboardRevision(selectedDashboard.id, input);
+      setRevisions((current) => [revision, ...current.filter((item) => item.id !== revision.id)]);
+      setSelectedRevisionId(revision.id);
+      setValidationSession(null);
+      setLogs("");
+      setSuccess(`Revision ${revision.revisionNumber} created.`);
+      await refreshSelectedDashboard();
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "Failed to create dashboard revision.");
+    } finally {
+      setCreatingRevision(false);
+    }
+  };
+
+  const refreshLogs = useCallback(async (sessionId: string): Promise<void> => {
+    setRefreshingLogs(true);
+    try {
+      const response = await fetchCustomDashboardValidationLogs(sessionId, 300);
+      setLogs(response.logs);
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "Failed to load validation logs.");
+    } finally {
+      setRefreshingLogs(false);
+    }
+  }, [setError]);
+
+  const handleStartValidation = async (): Promise<void> => {
+    if (!projectId || !selectedDashboard || !selectedRevision) {
+      return;
+    }
+    setValidating(true);
+    setLogs("");
+    clearFeedback();
+    try {
+      const session = await startCustomDashboardValidation(selectedDashboard.id, selectedRevision.id, projectId);
+      setValidationSession(session);
+      await refreshLogs(session.id);
+      setSuccess(`Validation ${session.status}.`);
+      if (terminalValidationStatuses.has(session.status)) {
+        await refreshSelectedDashboard();
+      }
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "Failed to start validation.");
+    } finally {
+      setValidating(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!validationSession || terminalValidationStatuses.has(validationSession.status)) {
+      return;
+    }
+    let cancelled = false;
+    const interval = window.setInterval(() => {
+      void fetchCustomDashboardValidationSession(validationSession.id)
+        .then((session) => {
+          if (cancelled) {
+            return;
+          }
+          setValidationSession(session);
+          void refreshLogs(session.id);
+          if (terminalValidationStatuses.has(session.status)) {
+            void refreshSelectedDashboard();
+          }
+        })
+        .catch((error) => {
+          if (!cancelled) {
+            setError(error instanceof Error ? error.message : "Failed to poll validation status.");
+          }
+        });
+    }, 2500);
+    return () => {
+      cancelled = true;
+      window.clearInterval(interval);
+    };
+  }, [refreshLogs, refreshSelectedDashboard, setError, validationSession]);
+
+  const handleRefreshLogs = async (): Promise<void> => {
+    if (validationSession) {
+      await refreshLogs(validationSession.id);
+    }
+  };
+
+  const handlePublish = async (): Promise<void> => {
+    if (!selectedDashboard || !selectedRevision) {
+      return;
+    }
+    setPublishing(true);
+    clearFeedback();
+    try {
+      const validationSessionId = validationSession?.revisionId === selectedRevision.id ? validationSession.id : undefined;
+      const published = await publishCustomDashboardRevision(selectedDashboard.id, selectedRevision.id, validationSessionId);
+      setSelectedDashboard(published);
+      setDashboards((current) => current.map((dashboard) => dashboard.id === published.id ? published : dashboard));
+      setSuccess("Custom dashboard revision published.");
+      await refreshSelectedDashboard();
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "Failed to publish revision.");
+    } finally {
+      setPublishing(false);
+    }
+  };
+
+  const handleArchive = async (): Promise<void> => {
+    if (!selectedDashboard) {
+      return;
+    }
+    const confirmed = await archiveConfirm.requestConfirm({
+      title: "Archive custom dashboard?",
+      body: "Archiving clears the active publication while preserving revision and validation history.",
+      confirmLabel: "Archive",
+      destructive: true,
+      tone: "danger",
+    });
+    if (!confirmed) {
+      return;
+    }
+    setArchiving(true);
+    clearFeedback();
+    try {
+      const archived = await archiveCustomDashboard(selectedDashboard.id);
+      setSelectedDashboard(archived);
+      setDashboards((current) => current.map((dashboard) => dashboard.id === archived.id ? archived : dashboard));
+      setDraft(dashboardToDraft(archived));
+      setSuccess("Custom dashboard archived.");
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "Failed to archive custom dashboard.");
+    } finally {
+      setArchiving(false);
+    }
+  };
+
+  const noProject = !projectLoading && !projectId;
+  const showEmpty = !loading && projectId && dashboards.length === 0;
+
+  return (
+    <PageContainer aria-label="Custom dashboards" padding="section" className="gap-6">
+      <PageHeader
+        icon={LayoutDashboard}
+        eyebrow="Custom Dashboards"
+        title="Dashboard Workspace"
+        subtitle="Manage generated dashboard drafts, validate immutable revisions in detached preview sessions, and publish only validated bundles."
+        actions={(
+          <div className="flex flex-wrap items-center gap-2">
+            <Button icon={RefreshCw} onClick={() => projectId && void loadProjectDashboards(projectId)} disabled={!projectId} pending={loading}>
+              Refresh
+            </Button>
+            <Button icon={Save} variant="signal" onClick={() => void handleSaveDraft()} disabled={!selectedDashboard || !dirty || selectedDashboard.status === "archived"} pending={saving}>
+              Save Draft
+            </Button>
+          </div>
+        )}
+      />
+
+      <ActionFeedbackRegion
+        status={feedback.status}
+        message={feedback.message}
+        onDismiss={clearFeedback}
+        clearError={clearError}
+        autoDismiss={feedback.autoDismiss}
+        retryAction={feedback.retryAction}
+        retryLabel={feedback.retryLabel}
+        retryPending={feedback.retryPending}
+      />
+
+      {noProject ? (
+        <EmptyState
+          icon={<LayoutDashboard className="h-8 w-8" aria-hidden="true" />}
+          title="Select a project to manage custom dashboards."
+          description="Custom dashboards are scoped to the active project and use that project's persisted data catalog."
+        />
+      ) : null}
+
+      {showEmpty ? (
+        <EmptyState
+          icon={<LayoutDashboard className="h-8 w-8" aria-hidden="true" />}
+          title="No custom dashboards yet."
+          description="Create a draft to edit the generated manifest, file bundle, source graph, and validation workflow."
+          primaryAction={<Button icon={LayoutDashboard} variant="signal" pending={creating} onClick={() => void handleCreateDashboard()}>Create Dashboard</Button>}
+        />
+      ) : null}
+
+      {loading && dashboards.length === 0 && projectId ? (
+        <div className="rounded-[1.4rem] border border-black/[0.08] bg-white/70 p-8 text-sm font-semibold text-slate-500 dark:border-white/[0.08] dark:bg-white/[0.05] dark:text-slate-400">
+          Loading custom dashboards...
+        </div>
+      ) : null}
+
+      {projectId && dashboards.length > 0 && selectedDashboard && draft ? (
+        <div className="grid min-w-0 gap-4 xl:grid-cols-[minmax(14rem,0.42fr)_minmax(0,1fr)_minmax(18rem,0.5fr)]">
+          <CustomDashboardList
+            dashboards={dashboards}
+            selectedDashboardId={selectedDashboardId}
+            onSelect={(dashboardId) => {
+              setSelectedDashboardId(dashboardId);
+              setValidationSession(null);
+              setLogs("");
+            }}
+            onCreate={() => void handleCreateDashboard()}
+            creating={creating}
+          />
+          <CustomDashboardEditorPanel
+            draft={draft}
+            onDraftChange={setDraft}
+            activeTab={activeTab}
+            onActiveTabChange={setActiveTab}
+            selectedFilePath={selectedFilePath}
+            onSelectedFilePathChange={setSelectedFilePath}
+            catalog={catalog}
+          />
+          <CustomDashboardValidationPanel
+            dashboard={selectedDashboard}
+            revisions={revisions}
+            selectedRevision={selectedRevision}
+            selectedRevisionId={selectedRevisionId}
+            onSelectedRevisionIdChange={(revisionId) => {
+              setSelectedRevisionId(revisionId);
+              setValidationSession(null);
+              setLogs("");
+            }}
+            validationSession={validationSession}
+            logs={logs}
+            creatingRevision={creatingRevision}
+            validating={validating}
+            refreshingLogs={refreshingLogs}
+            publishing={publishing}
+            archiving={archiving}
+            onCreateRevision={() => void handleCreateRevision()}
+            onStartValidation={() => void handleStartValidation()}
+            onRefreshLogs={() => void handleRefreshLogs()}
+            onPublish={() => void handlePublish()}
+            onArchive={() => void handleArchive()}
+          />
+        </div>
+      ) : null}
+
+      {!loading && projectId && dashboards.length > 0 && !selectedDashboard ? (
+        <div className="flex items-center gap-2 rounded-[1rem] border border-status-red/20 bg-status-red/[0.06] p-4 text-sm font-semibold text-status-red">
+          <AlertTriangle aria-hidden="true" className="h-4 w-4 shrink-0" />
+          Custom dashboard details could not be loaded.
+        </div>
+      ) : null}
+
+      <ConfirmDialog
+        isOpen={archiveConfirm.isOpen}
+        options={archiveConfirm.options}
+        onConfirm={archiveConfirm.handleConfirm}
+        onCancel={archiveConfirm.handleCancel}
+      />
+    </PageContainer>
+  );
+};
diff --git a/dashboard/src/v2/components/custom-dashboards/CustomDashboardEditorPanel.tsx b/dashboard/src/v2/components/custom-dashboards/CustomDashboardEditorPanel.tsx
new file mode 100644
index 0000000000..6fb8aaf59a
--- /dev/null
+++ b/dashboard/src/v2/components/custom-dashboards/CustomDashboardEditorPanel.tsx
@@ -0,0 +1,282 @@
+import type { FunctionComponent } from "preact";
+import { Database, FileCode2, Layers3, Palette, ScrollText } from "lucide-preact";
+import { Button } from "../ui/Button.js";
+import type {
+  CustomDashboardDataSourceNodeGraph,
+  CustomDashboardFileBundle,
+  CustomDashboardFileBundleEntry,
+  CustomDashboardJsonObject,
+  CustomDashboardManifest,
+} from "../../types.js";
+import type { CustomDashboardDataCatalogResponse, CustomDashboardCatalogSource } from "../../lib/custom-dashboard-api.js";
+import { parseJsonDraft, stableJsonStringify } from "../../lib/custom-dashboard-view-models.js";
+
+export type CustomDashboardEditorTab = "manifest" | "files" | "sources" | "styleguide" | "catalog";
+
+export interface CustomDashboardDraftState {
+  title: string;
+  description: string;
+  manifestText: string;
+  fileBundleText: string;
+  sourceGraphText: string;
+  styleguideText: string;
+}
+
+interface CustomDashboardEditorPanelProps {
+  draft: CustomDashboardDraftState;
+  onDraftChange: (draft: CustomDashboardDraftState) => void;
+  activeTab: CustomDashboardEditorTab;
+  onActiveTabChange: (tab: CustomDashboardEditorTab) => void;
+  selectedFilePath: string;
+  onSelectedFilePathChange: (path: string) => void;
+  catalog: CustomDashboardDataCatalogResponse | null;
+}
+
+const tabs: Array<{ id: CustomDashboardEditorTab; label: string; icon: typeof ScrollText }> = [
+  { id: "manifest", label: "Manifest", icon: ScrollText },
+  { id: "files", label: "Files", icon: FileCode2 },
+  { id: "sources", label: "Sources", icon: Layers3 },
+  { id: "styleguide", label: "Styleguide", icon: Palette },
+  { id: "catalog", label: "Catalog", icon: Database },
+];
+
+export const CustomDashboardEditorPanel: FunctionComponent<CustomDashboardEditorPanelProps> = ({
+  draft,
+  onDraftChange,
+  activeTab,
+  onActiveTabChange,
+  selectedFilePath,
+  onSelectedFilePathChange,
+  catalog,
+}) => {
+  const parsedBundle = parseJsonDraft<CustomDashboardFileBundle>(draft.fileBundleText, "File bundle");
+  const files = parsedBundle.ok && Array.isArray(parsedBundle.value.files) ? parsedBundle.value.files : [];
+  const selectedFile = files.find((file) => file.path === selectedFilePath) ?? files[0] ?? null;
+
+  const setDraftField = (field: keyof CustomDashboardDraftState, value: string) => {
+    onDraftChange({ ...draft, [field]: value });
+  };
+
+  const updateFileBundle = (nextFiles: CustomDashboardFileBundleEntry[]) => {
+    const metadata = parsedBundle.ok ? parsedBundle.value.metadata : undefined;
+    onDraftChange({
+      ...draft,
+      fileBundleText: stableJsonStringify({ files: nextFiles, ...(metadata ? { metadata } : {}) }),
+    });
+  };
+
+  const updateSelectedFile = (patch: Partial<CustomDashboardFileBundleEntry>) => {
+    if (!selectedFile) {
+      return;
+    }
+    const nextFile = { ...selectedFile, ...patch };
+    const nextFiles = files.map((file) => file.path === selectedFile.path ? nextFile : file);
+    updateFileBundle(nextFiles);
+    if (patch.path) {
+      onSelectedFilePathChange(patch.path);
+    }
+  };
+
+  const addFile = () => {
+    const path = `src/custom-${files.length + 1}.tsx`;
+    updateFileBundle([...files, { path, content: "export const value = null;\n", contentType: "text/typescript-jsx" }]);
+    onSelectedFilePathChange(path);
+  };
+
+  const removeSelectedFile = () => {
+    if (!selectedFile || files.length <= 1) {
+      return;
+    }
+    const nextFiles = files.filter((file) => file.path !== selectedFile.path);
+    updateFileBundle(nextFiles);
+    onSelectedFilePathChange(nextFiles[0]?.path ?? "");
+  };
+
+  const addCatalogSource = (source: CustomDashboardCatalogSource) => {
+    const parsedGraph = parseJsonDraft<CustomDashboardDataSourceNodeGraph>(draft.sourceGraphText, "Source graph");
+    if (!parsedGraph.ok) {
+      return;
+    }
+    const exists = parsedGraph.value.nodes.some((node) => node.id === source.id);
+    const nextGraph: CustomDashboardDataSourceNodeGraph = {
+      ...parsedGraph.value,
+      nodes: exists ? parsedGraph.value.nodes : [
+        ...parsedGraph.value.nodes,
+        { id: source.id, type: source.type, title: source.title, config: source.config as CustomDashboardJsonObject | undefined },
+      ],
+    };
+    onDraftChange({ ...draft, sourceGraphText: stableJsonStringify(nextGraph) });
+    onActiveTabChange("sources");
+  };
+
+  return (
+    <section
+      aria-label="Custom dashboard editor"
+      className="flex min-h-[34rem] min-w-0 flex-col rounded-[1.4rem] border border-black/[0.08] bg-white/70 p-4 shadow-[0_18px_52px_rgba(15,23,42,0.06)] backdrop-blur-xl dark:border-white/[0.08] dark:bg-white/[0.05]"
+    >
+      <div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)]">
+        <label className="flex min-w-0 flex-col gap-1.5 text-xs font-bold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
+          Title
+          <input
+            value={draft.title}
+            onInput={(event) => setDraftField("title", event.currentTarget.value)}
+            className="min-h-[2.75rem] rounded-[0.9rem] border border-black/[0.08] bg-white/80 px-3 text-sm font-semibold normal-case tracking-normal text-slate-900 outline-none focus:border-signal-500 focus:ring-2 focus:ring-signal-500/20 dark:border-white/[0.08] dark:bg-white/[0.06] dark:text-white"
+          />
+        </label>
+        <label className="flex min-w-0 flex-col gap-1.5 text-xs font-bold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
+          Description
+          <input
+            value={draft.description}
+            onInput={(event) => setDraftField("description", event.currentTarget.value)}
+            className="min-h-[2.75rem] rounded-[0.9rem] border border-black/[0.08] bg-white/80 px-3 text-sm font-medium normal-case tracking-normal text-slate-900 outline-none focus:border-signal-500 focus:ring-2 focus:ring-signal-500/20 dark:border-white/[0.08] dark:bg-white/[0.06] dark:text-white"
+          />
+        </label>
+      </div>
+
+      <div className="mt-4 flex min-w-0 gap-2 overflow-x-auto pb-1" role="tablist" aria-label="Custom dashboard draft sections">
+        {tabs.map((tab) => {
+          const Icon = tab.icon;
+          const selected = activeTab === tab.id;
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              role="tab"
+              aria-selected={selected}
+              onClick={() => onActiveTabChange(tab.id)}
+              className={`inline-flex min-h-[2.5rem] shrink-0 items-center gap-2 rounded-[0.9rem] px-3 text-sm font-bold transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-signal-500/60 ${
+                selected
+                  ? "bg-signal-500 text-void-900"
+                  : "bg-slate-900/[0.04] text-slate-600 hover:bg-slate-900/[0.08] dark:bg-white/[0.05] dark:text-slate-300 dark:hover:bg-white/[0.08]"
+              }`}
+            >
+              <Icon aria-hidden="true" className="h-4 w-4" />
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="mt-4 min-h-0 flex-1">
+        {activeTab === "manifest" ? (
+          <JsonTextarea
+            label="Manifest JSON"
+            value={draft.manifestText}
+            onInput={(value) => setDraftField("manifestText", value)}
+            rows={18}
+          />
+        ) : null}
+
+        {activeTab === "files" ? (
+          <div className="grid min-h-0 gap-3 lg:grid-cols-[minmax(11rem,0.45fr)_minmax(0,1fr)]">
+            <div className="flex min-h-[16rem] flex-col gap-2 rounded-[1rem] border border-black/[0.06] bg-slate-900/[0.03] p-2 dark:border-white/[0.06] dark:bg-white/[0.03]">
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-xs font-bold uppercase tracking-[0.14em] text-slate-500">Bundle</span>
+                <Button size="sm" variant="ghost" onClick={addFile}>Add</Button>
+              </div>
+              <div className="flex flex-col gap-1 overflow-y-auto">
+                {files.map((file) => (
+                  <button
+                    key={file.path}
+                    type="button"
+                    aria-pressed={file.path === selectedFile?.path}
+                    onClick={() => onSelectedFilePathChange(file.path)}
+                    className={`min-h-[2.25rem] rounded-[0.7rem] px-2 text-left text-xs font-semibold focus:outline-none focus-visible:ring-2 focus-visible:ring-signal-500/60 ${
+                      file.path === selectedFile?.path
+                        ? "bg-signal-500/15 text-signal-700 dark:text-signal-300"
+                        : "text-slate-600 hover:bg-white/70 dark:text-slate-300 dark:hover:bg-white/[0.06]"
+                    }`}
+                  >
+                    <span className="block truncate">{file.path}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+            {selectedFile ? (
+              <div className="flex min-w-0 flex-col gap-3">
+                <div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto]">
+                  <input
+                    aria-label="Selected file path"
+                    value={selectedFile.path}
+                    onInput={(event) => updateSelectedFile({ path: event.currentTarget.value })}
+                    className="min-h-[2.5rem] min-w-0 rounded-[0.85rem] border border-black/[0.08] bg-white/80 px-3 text-sm font-semibold text-slate-900 outline-none focus:border-signal-500 focus:ring-2 focus:ring-signal-500/20 dark:border-white/[0.08] dark:bg-white/[0.06] dark:text-white"
+                  />
+                  <Button size="sm" variant="danger" disabled={files.length <= 1} onClick={removeSelectedFile}>
+                    Remove
+                  </Button>
+                </div>
+                <textarea
+                  aria-label="Selected file content"
+                  value={selectedFile.content}
+                  rows={18}
+                  spellcheck={false}
+                  onInput={(event) => updateSelectedFile({ content: event.currentTarget.value })}
+                  className="min-h-[26rem] w-full resize-y rounded-[1rem] border border-black/[0.08] bg-slate-950 px-3 py-3 font-mono text-xs leading-relaxed text-slate-100 outline-none focus:border-signal-500 focus:ring-2 focus:ring-signal-500/20"
+                />
+              </div>
+            ) : (
+              <JsonTextarea label="File bundle JSON" value={draft.fileBundleText} onInput={(value) => setDraftField("fileBundleText", value)} rows={18} />
+            )}
+          </div>
+        ) : null}
+
+        {activeTab === "sources" ? (
+          <JsonTextarea
+            label="Source node graph JSON"
+            value={draft.sourceGraphText}
+            onInput={(value) => setDraftField("sourceGraphText", value)}
+            rows={18}
+          />
+        ) : null}
+
+        {activeTab === "styleguide" ? (
+          <JsonTextarea
+            label="Styleguide JSON"
+            value={draft.styleguideText}
+            onInput={(value) => setDraftField("styleguideText", value)}
+            rows={18}
+          />
+        ) : null}
+
+        {activeTab === "catalog" ? (
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+            {(catalog?.sources ?? []).map((source) => (
+              <article key={`${source.dashboardId}:${source.id}`} className="rounded-[1rem] border border-black/[0.08] bg-white/70 p-3 dark:border-white/[0.08] dark:bg-white/[0.04]">
+                <div className="min-w-0">
+                  <h3 className="truncate text-sm font-bold text-slate-900 dark:text-white">{source.title}</h3>
+                  <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">{source.type} from {source.dashboardTitle}</p>
+                </div>
+                <Button className="mt-3 w-full" size="sm" variant="secondary" onClick={() => addCatalogSource(source)}>
+                  Add to graph
+                </Button>
+              </article>
+            ))}
+            {(!catalog || catalog.sources.length === 0) ? (
+              <div className="rounded-[1rem] border border-dashed border-black/[0.12] p-6 text-sm text-slate-500 dark:border-white/[0.12] dark:text-slate-400">
+                No catalog sources are available for this project yet.
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+};
+
+const JsonTextarea: FunctionComponent<{
+  label: string;
+  value: string;
+  rows: number;
+  onInput: (value: string) => void;
+}> = ({ label, value, rows, onInput }) => (
+  <label className="flex min-h-0 flex-col gap-2 text-xs font-bold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
+    {label}
+    <textarea
+      value={value}
+      rows={rows}
+      spellcheck={false}
+      onInput={(event) => onInput(event.currentTarget.value)}
+      className="min-h-[28rem] w-full resize-y rounded-[1rem] border border-black/[0.08] bg-slate-950 px-3 py-3 font-mono text-xs leading-relaxed text-slate-100 outline-none focus:border-signal-500 focus:ring-2 focus:ring-signal-500/20"
+    />
+  </label>
+);
diff --git a/dashboard/src/v2/components/custom-dashboards/CustomDashboardList.tsx b/dashboard/src/v2/components/custom-dashboards/CustomDashboardList.tsx
new file mode 100644
index 0000000000..1f53e6446a
--- /dev/null
+++ b/dashboard/src/v2/components/custom-dashboards/CustomDashboardList.tsx
@@ -0,0 +1,67 @@
+import type { FunctionComponent } from "preact";
+import { LayoutDashboard, Plus } from "lucide-preact";
+import { Button } from "../ui/Button.js";
+import type { CustomDashboardRecord } from "../../types.js";
+import { getDashboardStatusView } from "../../lib/custom-dashboard-view-models.js";
+
+interface CustomDashboardListProps {
+  dashboards: CustomDashboardRecord[];
+  selectedDashboardId: string | null;
+  onSelect: (dashboardId: string) => void;
+  onCreate: () => void;
+  creating: boolean;
+}
+
+export const CustomDashboardList: FunctionComponent<CustomDashboardListProps> = ({
+  dashboards,
+  selectedDashboardId,
+  onSelect,
+  onCreate,
+  creating,
+}) => (
+  <section
+    aria-label="Custom dashboards"
+    className="flex min-h-[18rem] flex-col rounded-[1.4rem] border border-black/[0.08] bg-white/70 p-3 shadow-[0_18px_52px_rgba(15,23,42,0.06)] backdrop-blur-xl dark:border-white/[0.08] dark:bg-white/[0.05]"
+  >
+    <div className="mb-3 flex items-center justify-between gap-3 px-1">
+      <h2 className="font-display text-sm font-bold text-slate-900 dark:text-white">Dashboards</h2>
+      <Button size="sm" variant="signal" icon={Plus} pending={creating} onClick={onCreate}>
+        New
+      </Button>
+    </div>
+    <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto pr-1">
+      {dashboards.map((dashboard) => {
+        const status = getDashboardStatusView(dashboard.status);
+        const active = dashboard.id === selectedDashboardId;
+        return (
+          <button
+            key={dashboard.id}
+            type="button"
+            aria-pressed={active}
+            onClick={() => onSelect(dashboard.id)}
+            className={`group flex min-h-[5rem] w-full min-w-0 flex-col items-start gap-2 rounded-[1rem] border p-3 text-left transition-[background-color,border-color,box-shadow,transform] focus:outline-none focus-visible:ring-2 focus-visible:ring-signal-500/60 ${
+              active
+                ? "border-signal-500/35 bg-signal-500/[0.08] shadow-[inset_0_0_0_1px_rgba(0,224,160,0.14)]"
+                : "border-black/[0.06] bg-white/45 hover:border-black/[0.12] hover:bg-white/70 dark:border-white/[0.06] dark:bg-white/[0.03] dark:hover:border-white/[0.14]"
+            }`}
+          >
+            <span className="flex w-full min-w-0 items-center gap-2">
+              <LayoutDashboard aria-hidden="true" className="h-4 w-4 shrink-0 text-signal-500" />
+              <span className="min-w-0 flex-1 truncate text-sm font-bold text-slate-900 dark:text-white">
+                {dashboard.title}
+              </span>
+            </span>
+            <span className={`inline-flex rounded-full px-2 py-0.5 text-[11px] font-bold ring-1 ${status.className}`}>
+              {status.label}
+            </span>
+            {dashboard.description ? (
+              <span className="line-clamp-2 text-xs leading-relaxed text-slate-500 dark:text-slate-400">
+                {dashboard.description}
+              </span>
+            ) : null}
+          </button>
+        );
+      })}
+    </div>
+  </section>
+);
diff --git a/dashboard/src/v2/components/custom-dashboards/CustomDashboardValidationPanel.tsx b/dashboard/src/v2/components/custom-dashboards/CustomDashboardValidationPanel.tsx
new file mode 100644
index 0000000000..3e7693aaf3
--- /dev/null
+++ b/dashboard/src/v2/components/custom-dashboards/CustomDashboardValidationPanel.tsx
@@ -0,0 +1,204 @@
+import type { FunctionComponent } from "preact";
+import { useRef, useState } from "preact/hooks";
+import { CheckCircle2, ExternalLink, FileClock, MoreHorizontal, Play, RadioTower, Rocket, ScrollText, ShieldCheck } from "lucide-preact";
+import { Button } from "../ui/Button.js";
+import { DropdownMenu, DropdownMenuItem } from "../ui/DropdownMenu.js";
+import type {
+  CustomDashboardRecord,
+  CustomDashboardRevisionRecord,
+  CustomDashboardValidationSessionRecord,
+} from "../../types.js";
+import {
+  buildValidationPreviewPath,
+  canPublishRevision,
+  getRevisionValidationLabel,
+  getValidationStages,
+} from "../../lib/custom-dashboard-view-models.js";
+
+interface CustomDashboardValidationPanelProps {
+  dashboard: CustomDashboardRecord;
+  revisions: CustomDashboardRevisionRecord[];
+  selectedRevision: CustomDashboardRevisionRecord | null;
+  selectedRevisionId: string | null;
+  onSelectedRevisionIdChange: (revisionId: string) => void;
+  validationSession: CustomDashboardValidationSessionRecord | null;
+  logs: string;
+  creatingRevision: boolean;
+  validating: boolean;
+  refreshingLogs: boolean;
+  publishing: boolean;
+  archiving: boolean;
+  onCreateRevision: () => void;
+  onStartValidation: () => void;
+  onRefreshLogs: () => void;
+  onPublish: () => void;
+  onArchive: () => void;
+}
+
+export const CustomDashboardValidationPanel: FunctionComponent<CustomDashboardValidationPanelProps> = ({
+  dashboard,
+  revisions,
+  selectedRevision,
+  selectedRevisionId,
+  onSelectedRevisionIdChange,
+  validationSession,
+  logs,
+  creatingRevision,
+  validating,
+  refreshingLogs,
+  publishing,
+  archiving,
+  onCreateRevision,
+  onStartValidation,
+  onRefreshLogs,
+  onPublish,
+  onArchive,
+}) => {
+  const [revisionMenuOpen, setRevisionMenuOpen] = useState(false);
+  const revisionMenuTriggerRef = useRef<HTMLButtonElement>(null);
+  const stages = getValidationStages(validationSession?.status ?? selectedRevision?.validationStatus ?? null);
+  const previewPath = buildValidationPreviewPath(validationSession?.id);
+  const publishEnabled = canPublishRevision(selectedRevision, validationSession);
+
+  return (
+    <aside
+      aria-label="Custom dashboard validation and publication"
+      className="flex min-h-[34rem] min-w-0 flex-col gap-4 rounded-[1.4rem] border border-black/[0.08] bg-white/70 p-4 shadow-[0_18px_52px_rgba(15,23,42,0.06)] backdrop-blur-xl dark:border-white/[0.08] dark:bg-white/[0.05]"
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h2 className="font-display text-sm font-bold text-slate-900 dark:text-white">Revision Gate</h2>
+          <p className="mt-1 text-xs leading-relaxed text-slate-500 dark:text-slate-400">
+            Publish only immutable revisions with a passed validation report.
+          </p>
+        </div>
+        <DropdownMenu
+          isOpen={revisionMenuOpen}
+          onOpenChange={setRevisionMenuOpen}
+          triggerRef={revisionMenuTriggerRef}
+          menuAriaLabel="Select dashboard revision"
+          content={(
+            <div className="flex min-w-[14rem] flex-col gap-1 rounded-[1rem] border border-black/[0.08] bg-white/95 p-1.5 shadow-xl dark:border-white/[0.08] dark:bg-void-800/95">
+              {revisions.map((revision) => (
+                <DropdownMenuItem
+                  key={revision.id}
+                  onClick={() => {
+                    onSelectedRevisionIdChange(revision.id);
+                    setRevisionMenuOpen(false);
+                  }}
+                  className="rounded-[0.75rem] px-3 py-2 text-left text-sm font-semibold text-slate-700 hover:bg-slate-900/[0.06] focus:outline-none focus-visible:ring-2 focus-visible:ring-signal-500/60 dark:text-slate-200 dark:hover:bg-white/[0.06]"
+                >
+                  Revision {revision.revisionNumber} · {getRevisionValidationLabel(revision.validationStatus)}
+                </DropdownMenuItem>
+              ))}
+            </div>
+          )}
+        >
+          <button
+            ref={revisionMenuTriggerRef}
+            type="button"
+            className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-[0.9rem] border border-black/[0.08] bg-white/70 text-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-signal-500/60 dark:border-white/[0.08] dark:bg-white/[0.05] dark:text-slate-300"
+            aria-label="Open revision menu"
+            aria-haspopup="menu"
+            aria-expanded={revisionMenuOpen}
+          >
+            <MoreHorizontal aria-hidden="true" className="h-4 w-4" />
+          </button>
+        </DropdownMenu>
+      </div>
+
+      <div className="rounded-[1rem] border border-black/[0.06] bg-slate-900/[0.03] p-3 dark:border-white/[0.06] dark:bg-white/[0.03]">
+        <div className="flex min-w-0 items-center gap-2">
+          <FileClock aria-hidden="true" className="h-4 w-4 shrink-0 text-signal-500" />
+          <span className="min-w-0 flex-1 truncate text-sm font-bold text-slate-900 dark:text-white">
+            {selectedRevision ? `Revision ${selectedRevision.revisionNumber}` : "No revision"}
+          </span>
+          <span className="rounded-full bg-white/70 px-2 py-0.5 text-[11px] font-bold text-slate-500 ring-1 ring-black/[0.06] dark:bg-white/[0.06] dark:ring-white/[0.08]">
+            {getRevisionValidationLabel(selectedRevision?.validationStatus ?? null)}
+          </span>
+        </div>
+        <div className="mt-3 grid grid-cols-3 gap-2">
+          {stages.map((stage) => (
+            <div
+              key={stage.id}
+              className={`min-h-[4rem] rounded-[0.85rem] border p-2 ${
+                stage.state === "passed"
+                  ? "border-status-green/25 bg-status-green/[0.08] text-status-green"
+                  : stage.state === "active"
+                    ? "border-sky-500/25 bg-sky-500/[0.08] text-sky-500"
+                    : stage.state === "failed"
+                      ? "border-status-red/25 bg-status-red/[0.08] text-status-red"
+                      : "border-black/[0.06] bg-white/50 text-slate-500 dark:border-white/[0.06] dark:bg-white/[0.04]"
+              }`}
+            >
+              <div className="flex items-center gap-1.5">
+                {stage.state === "passed" ? <CheckCircle2 aria-hidden="true" className="h-3.5 w-3.5" /> : <RadioTower aria-hidden="true" className="h-3.5 w-3.5" />}
+                <span className="text-[11px] font-bold uppercase tracking-[0.12em]">{stage.label}</span>
+              </div>
+              <p className="mt-2 text-xs font-semibold capitalize">{stage.state}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-1">
+        <Button icon={FileClock} onClick={onCreateRevision} pending={creatingRevision} disabled={dashboard.status === "archived"}>
+          Create Revision
+        </Button>
+        <Button icon={Play} onClick={onStartValidation} pending={validating} disabled={!selectedRevision || dashboard.status === "archived"}>
+          Validate
+        </Button>
+        <Button
+          icon={Rocket}
+          variant="signal"
+          onClick={onPublish}
+          pending={publishing}
+          disabled={!publishEnabled || dashboard.status === "archived"}
+          disabledReason="A selected revision must pass validation before it can be published."
+        >
+          Publish
+        </Button>
+        <Button variant="danger" onClick={onArchive} pending={archiving} disabled={dashboard.status === "archived"}>
+          Archive
+        </Button>
+      </div>
+
+      {previewPath ? (
+        <a
+          href={previewPath}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex min-h-[2.5rem] items-center justify-center gap-2 rounded-[0.9rem] border border-signal-500/25 bg-signal-500/[0.08] px-3 text-sm font-bold text-signal-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-signal-500/60 dark:text-signal-300"
+        >
+          <ExternalLink aria-hidden="true" className="h-4 w-4" />
+          Open validation preview
+        </a>
+      ) : null}
+
+      <div className="flex min-h-0 flex-1 flex-col">
+        <div className="mb-2 flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2">
+            <ScrollText aria-hidden="true" className="h-4 w-4 text-slate-500" />
+            <h3 className="text-sm font-bold text-slate-900 dark:text-white">Validation Logs</h3>
+          </div>
+          <Button size="sm" variant="ghost" onClick={onRefreshLogs} pending={refreshingLogs} disabled={!validationSession}>
+            Refresh
+          </Button>
+        </div>
+        <pre
+          aria-label="Validation logs"
+          className="min-h-[12rem] flex-1 overflow-auto whitespace-pre-wrap rounded-[1rem] border border-black/[0.08] bg-slate-950 p-3 font-mono text-xs leading-relaxed text-slate-100"
+        >
+          {logs || "No validation logs yet."}
+        </pre>
+      </div>
+
+      {dashboard.publishedRevisionId ? (
+        <div className="flex items-center gap-2 rounded-[0.9rem] bg-status-green/[0.08] px-3 py-2 text-xs font-semibold text-status-green ring-1 ring-status-green/20">
+          <ShieldCheck aria-hidden="true" className="h-4 w-4 shrink-0" />
+          Published revision {revisions.find((revision) => revision.id === dashboard.publishedRevisionId)?.revisionNumber ?? selectedRevisionId}
+        </div>
+      ) : null}
+    </aside>
+  );
+};
diff --git a/dashboard/src/v2/components/custom-dashboards/__tests__/CustomDashboardsPage.test.tsx b/dashboard/src/v2/components/custom-dashboards/__tests__/CustomDashboardsPage.test.tsx
new file mode 100644
index 0000000000..c366745256
--- /dev/null
+++ b/dashboard/src/v2/components/custom-dashboards/__tests__/CustomDashboardsPage.test.tsx
@@ -0,0 +1,265 @@
+/** @vitest-environment jsdom */
+/** @jsx h */
+import { h } from "preact";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/preact";
+import "@testing-library/jest-dom/vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { CustomDashboardsPage } from "../../../CustomDashboardsPage.js";
+import { ProjectDataContext } from "../../../context/project-data.js";
+import type {
+  CustomDashboardRecord,
+  CustomDashboardRevisionRecord,
+  CustomDashboardValidationSessionRecord,
+} from "../../../types.js";
+import {
+  archiveCustomDashboard,
+  createCustomDashboard,
+  createCustomDashboardRevision,
+  fetchCustomDashboard,
+  fetchCustomDashboardDataCatalog,
+  fetchCustomDashboardValidationLogs,
+  fetchCustomDashboardValidationSession,
+  fetchCustomDashboards,
+  publishCustomDashboardRevision,
+  startCustomDashboardValidation,
+  updateCustomDashboardDraft,
+} from "../../../lib/custom-dashboard-api.js";
+
+vi.mock("../../../lib/custom-dashboard-api.js", () => ({
+  archiveCustomDashboard: vi.fn(),
+  createCustomDashboard: vi.fn(),
+  createCustomDashboardRevision: vi.fn(),
+  fetchCustomDashboard: vi.fn(),
+  fetchCustomDashboardDataCatalog: vi.fn(),
+  fetchCustomDashboardValidationLogs: vi.fn(),
+  fetchCustomDashboardValidationSession: vi.fn(),
+  fetchCustomDashboards: vi.fn(),
+  publishCustomDashboardRevision: vi.fn(),
+  startCustomDashboardValidation: vi.fn(),
+  updateCustomDashboardDraft: vi.fn(),
+}));
+
+vi.mock("../../../lib/motion/index.js", () => ({
+  useInteractionTokens: vi.fn(() => ({
+    controlFeedback: { duration: "0ms", ease: "linear" },
+    enterExit: { duration: "0ms", ease: "linear" },
+    selectionMovement: { duration: "0ms", ease: "linear" },
+  })),
+  useAnimatedActiveIndicator: vi.fn(() => ({ style: {} })),
+  useGsapInteractionTokens: vi.fn(() => ({
+    controlFeedback: { duration: 0, ease: "linear" },
+    enterExit: { duration: 0, ease: "linear" },
+    selectionMovement: { duration: 0, ease: "linear" },
+  })),
+}));
+
+vi.mock("gsap", () => ({
+  default: {
+    fromTo: vi.fn(),
+    set: vi.fn(),
+    to: vi.fn(),
+    killTweensOf: vi.fn(),
+    timeline: vi.fn(() => ({ to: vi.fn().mockReturnThis(), fromTo: vi.fn().mockReturnThis(), set: vi.fn().mockReturnThis() })),
+  },
+}));
+
+vi.mock("../../ui/ActionFeedbackRegion.js", async () => {
+  const { h: createElement } = await vi.importActual<typeof import("preact")>("preact");
+  return {
+    ActionFeedbackRegion: ({ message }: { message: string | null }) => {
+    return message ? createElement("div", { role: "status" }, message) : null;
+    },
+  };
+});
+
+vi.mock("../../ui/ConfirmDialog.js", async () => {
+  const { h: createElement } = await vi.importActual<typeof import("preact")>("preact");
+  return {
+    ConfirmDialog: ({ isOpen }: { isOpen: boolean }) => {
+    return isOpen ? createElement("div", { role: "dialog", "aria-label": "Confirm archive" }) : null;
+    },
+  };
+});
+
+vi.mock("../CustomDashboardList.js", async () => {
+  const { h: createElement } = await vi.importActual<typeof import("preact")>("preact");
+  return {
+    CustomDashboardList: ({ dashboards, selectedDashboardId, onSelect, onCreate }: any) => {
+    return createElement(
+      "section",
+      { "aria-label": "Custom dashboards" },
+      dashboards.map((dashboard: CustomDashboardRecord) => createElement(
+        "button",
+        {
+          key: dashboard.id,
+          type: "button",
+          "aria-pressed": dashboard.id === selectedDashboardId,
+          onClick: () => onSelect(dashboard.id),
+        },
+        dashboard.title,
+      )),
+      createElement("button", { type: "button", onClick: onCreate }, "New"),
+    );
+    },
+  };
+});
+
+vi.mock("../CustomDashboardEditorPanel.js", async () => {
+  const { h: createElement } = await vi.importActual<typeof import("preact")>("preact");
+  return {
+    CustomDashboardEditorPanel: () => {
+    return createElement("section", { "aria-label": "Custom dashboard editor" }, "Editor");
+    },
+  };
+});
+
+vi.mock("../CustomDashboardValidationPanel.js", async () => {
+  const { h: createElement } = await vi.importActual<typeof import("preact")>("preact");
+  return {
+    CustomDashboardValidationPanel: ({ selectedRevision, validationSession, logs, onStartValidation, onPublish }: any) => {
+    const canPublish = Boolean(
+      selectedRevision?.validationStatus === "passed"
+        || (validationSession?.status === "passed" && validationSession.revisionId === selectedRevision?.id),
+    );
+    return createElement(
+      "aside",
+      { "aria-label": "Custom dashboard validation and publication" },
+      createElement("button", { type: "button", onClick: onStartValidation }, "Validate"),
+      createElement("button", { type: "button", disabled: !canPublish, onClick: onPublish }, "Publish"),
+      logs ? createElement("pre", null, logs) : null,
+      validationSession ? createElement("a", { href: `/api/custom-dashboard-validations/${validationSession.id}/proxy/` }, "Open validation preview") : null,
+    );
+    },
+  };
+});
+
+const dashboard: CustomDashboardRecord = {
+  id: "dashboard-1",
+  projectId: "project-1",
+  title: "Delivery Pulse",
+  description: "Release health",
+  status: "draft",
+  manifest: {
+    schemaVersion: 1,
+    title: "Delivery Pulse",
+    entryFile: "src/dashboard.tsx",
+    filePaths: ["src/dashboard.tsx"],
+  },
+  fileBundle: {
+    files: [{ path: "src/dashboard.tsx", content: "export default function Dashboard() { return null; }" }],
+  },
+  sourceNodeGraph: { nodes: [], edges: [] },
+  styleguide: { tone: "operational" },
+  runtimeMetadata: {},
+  publishedRevisionId: null,
+  createdAt: "2026-07-07T00:00:00.000Z",
+  updatedAt: "2026-07-07T00:00:00.000Z",
+};
+
+const revision: CustomDashboardRevisionRecord = {
+  id: "revision-1",
+  dashboardId: "dashboard-1",
+  projectId: "project-1",
+  revisionNumber: 1,
+  manifest: dashboard.manifest,
+  fileBundle: dashboard.fileBundle,
+  sourceNodeGraph: dashboard.sourceNodeGraph,
+  styleguide: dashboard.styleguide,
+  validationStatus: null,
+  validationReport: null,
+  runtimeMetadata: {},
+  validatedAt: null,
+  createdAt: "2026-07-07T00:00:00.000Z",
+  updatedAt: "2026-07-07T00:00:00.000Z",
+};
+
+const passedSession: CustomDashboardValidationSessionRecord = {
+  id: "session-1",
+  dashboardId: "dashboard-1",
+  revisionId: "revision-1",
+  projectId: "project-1",
+  status: "passed",
+  validationReport: { valid: true, summary: "Passed", issues: [] },
+  runtimeMetadata: { validation: { hostPort: 4445 } },
+  startedAt: "2026-07-07T00:00:00.000Z",
+  finishedAt: "2026-07-07T00:00:01.000Z",
+  createdAt: "2026-07-07T00:00:00.000Z",
+  updatedAt: "2026-07-07T00:00:01.000Z",
+};
+
+const projectContext = {
+  projects: [{ id: "project-1", name: "Approved Test Project", status: "ready" }],
+  selectedProjectId: "project-1",
+  selectedProject: { id: "project-1", name: "Approved Test Project", status: "ready" },
+  loading: false,
+  error: null,
+  refreshProjects: vi.fn(),
+  selectProject: vi.fn(),
+  createProject: vi.fn(),
+  updateProject: vi.fn(),
+  deleteProject: vi.fn(),
+};
+
+const renderPage = (context: typeof projectContext | any = projectContext) => render(
+  <ProjectDataContext.Provider value={context}>
+    <CustomDashboardsPage />
+  </ProjectDataContext.Provider>,
+);
+
+describe("CustomDashboardsPage", () => {
+  beforeEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+    vi.mocked(fetchCustomDashboards).mockResolvedValue({ dashboards: [dashboard] });
+    vi.mocked(fetchCustomDashboard).mockResolvedValue({ dashboard, revisions: [revision] });
+    vi.mocked(fetchCustomDashboardDataCatalog).mockResolvedValue({
+      projectId: "project-1",
+      dashboards: [],
+      sources: [{ id: "tasks", type: "sqlite_query", title: "Tasks", dashboardId: "dashboard-1", dashboardTitle: "Delivery Pulse" }],
+    });
+    vi.mocked(fetchCustomDashboardValidationLogs).mockResolvedValue({ logs: "build ok\nhealth ok" });
+    vi.mocked(fetchCustomDashboardValidationSession).mockResolvedValue(passedSession);
+    vi.mocked(startCustomDashboardValidation).mockResolvedValue(passedSession);
+    vi.mocked(publishCustomDashboardRevision).mockResolvedValue({ ...dashboard, status: "published", publishedRevisionId: "revision-1" });
+    vi.mocked(updateCustomDashboardDraft).mockResolvedValue(dashboard);
+    vi.mocked(createCustomDashboard).mockResolvedValue(dashboard);
+    vi.mocked(createCustomDashboardRevision).mockResolvedValue(revision);
+    vi.mocked(archiveCustomDashboard).mockResolvedValue({ ...dashboard, status: "archived" });
+  });
+
+  it("renders a project placeholder when no project is selected", () => {
+    renderPage({ ...projectContext, selectedProjectId: null, selectedProject: null });
+
+    expect(screen.getByText("Select a project to manage custom dashboards.")).toBeInTheDocument();
+    expect(fetchCustomDashboards).not.toHaveBeenCalled();
+  });
+
+  it("loads the workspace and keeps publish disabled until validation passes", async () => {
+    renderPage();
+
+    expect(await screen.findByText("Dashboard Workspace")).toBeInTheDocument();
+    expect(await screen.findByText("Delivery Pulse")).toBeInTheDocument();
+    const publishButton = screen.getByRole("button", { name: /Publish/i });
+    expect(publishButton).toBeDisabled();
+
+    fireEvent.click(screen.getByRole("button", { name: /^Validate$/i }));
+
+    await waitFor(() => {
+      expect(startCustomDashboardValidation).toHaveBeenCalledWith("dashboard-1", "revision-1", "project-1");
+    });
+    expect(await screen.findByText(/build ok/i)).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /Open validation preview/i })).toHaveAttribute(
+      "href",
+      "/api/custom-dashboard-validations/session-1/proxy/",
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: /Publish/i })).toBeEnabled();
+    });
+    fireEvent.click(screen.getByRole("button", { name: /Publish/i }));
+
+    await waitFor(() => {
+      expect(publishCustomDashboardRevision).toHaveBeenCalledWith("dashboard-1", "revision-1", "session-1");
+    });
+  });
+});
diff --git a/dashboard/src/v2/components/onboarding/GuidedDashboardTour.tsx b/dashboard/src/v2/components/onboarding/GuidedDashboardTour.tsx
index 502a955524..5eebc7731a 100644
--- a/dashboard/src/v2/components/onboarding/GuidedDashboardTour.tsx
+++ b/dashboard/src/v2/components/onboarding/GuidedDashboardTour.tsx
@@ -1,7 +1,7 @@
 import type { FunctionComponent } from "preact";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
 import gsap from "gsap";
-import { ArrowLeft, ArrowRight, BookOpen, Box, CalendarDays, Check, Compass, EyeOff, FolderOpen, FolderTree, Library, MessageCircle, Sparkles } from "lucide-preact";
+import { ArrowLeft, ArrowRight, BookOpen, Box, CalendarDays, Check, Compass, EyeOff, FolderOpen, FolderTree, LayoutDashboard, Library, MessageCircle, Sparkles } from "lucide-preact";
 import { DASHBOARD_TOUR_START_EVENT, DASHBOARD_TOUR_STORAGE_KEY } from "../../lib/onboarding-control.js";
 import { useReducedMotion } from "../../hooks/use-reduced-motion.js";
 import { useInteractionTokens } from "../../lib/motion/tokens.js";
@@ -95,6 +95,14 @@ const TOUR_STEPS: TourStep[] = [
     body: "Nodes lets you compose project workflow graphs, configure node widgets, attach flows to agents, and inspect persisted runs.",
     accent: "signal",
   },
+  {
+    id: "custom-dashboards",
+    targetId: "nav-custom-dashboards",
+    eyebrow: "Dashboard lab",
+    title: "Dashboards",
+    body: "Dashboards lets you manage generated dashboard manifests, file bundles, validation previews, and validated publication state for the active project.",
+    accent: "signal",
+  },
   {
     id: "stats",
     targetId: "nav-stats",
@@ -520,7 +528,7 @@ export const GuidedDashboardTour: FunctionComponent = () => {
 
           <div className="mt-5 flex items-start gap-4">
             <div className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl ${accent.bgPanel} ${accent.text} ring-1 ring-white/10`}>
-              {activeStep.id === "projects" ? <FolderOpen className="h-5 w-5" /> : activeStep.id === "docker" ? <Box className="h-5 w-5" /> : activeStep.id === "chat" ? <MessageCircle className="h-5 w-5" /> : activeStep.id === "schedule" ? <CalendarDays className="h-5 w-5" /> : activeStep.id === "knowledge" ? <Library className="h-5 w-5" /> : activeStep.id === "files" ? <FolderTree className="h-5 w-5" /> : activeStep.id === "docs" ? <BookOpen className="h-5 w-5" /> : <Compass className="h-5 w-5" />}
+              {activeStep.id === "projects" ? <FolderOpen className="h-5 w-5" /> : activeStep.id === "docker" ? <Box className="h-5 w-5" /> : activeStep.id === "chat" ? <MessageCircle className="h-5 w-5" /> : activeStep.id === "schedule" ? <CalendarDays className="h-5 w-5" /> : activeStep.id === "custom-dashboards" ? <LayoutDashboard className="h-5 w-5" /> : activeStep.id === "knowledge" ? <Library className="h-5 w-5" /> : activeStep.id === "files" ? <FolderTree className="h-5 w-5" /> : activeStep.id === "docs" ? <BookOpen className="h-5 w-5" /> : <Compass className="h-5 w-5" />}
             </div>
             <div>
               <h2 id="dashboard-tour-title" className="font-display text-xl font-semibold leading-none tracking-tight">{activeStep.title}</h2>
diff --git a/dashboard/src/v2/lib/custom-dashboard-api.ts b/dashboard/src/v2/lib/custom-dashboard-api.ts
new file mode 100644
index 0000000000..013b927cf7
--- /dev/null
+++ b/dashboard/src/v2/lib/custom-dashboard-api.ts
@@ -0,0 +1,170 @@
+import { fetchJson } from "../../lib/api/fetch-json.js";
+import type {
+  CreateCustomDashboardDraftInput,
+  CreateCustomDashboardRevisionInput,
+  CustomDashboardDataSourceNodeGraph,
+  CustomDashboardRecord,
+  CustomDashboardRevisionRecord,
+  CustomDashboardValidationSessionRecord,
+  UpdateCustomDashboardDraftInput,
+} from "../types.js";
+
+export interface CustomDashboardListResponse {
+  dashboards: CustomDashboardRecord[];
+}
+
+export interface CustomDashboardDetailResponse {
+  dashboard: CustomDashboardRecord;
+  revisions: CustomDashboardRevisionRecord[];
+}
+
+export interface CustomDashboardCatalogSource {
+  id: string;
+  type: string;
+  title: string;
+  dashboardId: string;
+  dashboardTitle: string;
+  config?: Record<string, unknown>;
+}
+
+export interface CustomDashboardDataCatalogResponse {
+  projectId: string;
+  dashboards: Array<{
+    id: string;
+    title: string;
+    status: CustomDashboardRecord["status"];
+    publishedRevisionId: string | null;
+    sourceNodeGraph: CustomDashboardDataSourceNodeGraph;
+  }>;
+  sources: CustomDashboardCatalogSource[];
+}
+
+export interface CustomDashboardValidationLogsResponse {
+  logs: string;
+}
+
+const jsonHeaders = { "Content-Type": "application/json" };
+
+export const fetchCustomDashboards = (
+  projectId: string,
+  signal?: AbortSignal,
+): Promise<CustomDashboardListResponse> => (
+  fetchJson<CustomDashboardListResponse>(`/api/projects/${encodeURIComponent(projectId)}/custom-dashboards`, { signal })
+);
+
+export const fetchCustomDashboard = (
+  dashboardId: string,
+  signal?: AbortSignal,
+): Promise<CustomDashboardDetailResponse> => (
+  fetchJson<CustomDashboardDetailResponse>(`/api/custom-dashboards/${encodeURIComponent(dashboardId)}`, { signal })
+);
+
+export const createCustomDashboard = (
+  projectId: string,
+  input: CreateCustomDashboardDraftInput,
+): Promise<CustomDashboardRecord> => (
+  fetchJson<CustomDashboardRecord>(`/api/projects/${encodeURIComponent(projectId)}/custom-dashboards`, {
+    method: "POST",
+    headers: jsonHeaders,
+    body: JSON.stringify(input),
+  })
+);
+
+export const updateCustomDashboardDraft = (
+  dashboardId: string,
+  input: UpdateCustomDashboardDraftInput,
+): Promise<CustomDashboardRecord> => (
+  fetchJson<CustomDashboardRecord>(`/api/custom-dashboards/${encodeURIComponent(dashboardId)}`, {
+    method: "PATCH",
+    headers: jsonHeaders,
+    body: JSON.stringify(input),
+  })
+);
+
+export const createCustomDashboardRevision = (
+  dashboardId: string,
+  input: CreateCustomDashboardRevisionInput = {},
+): Promise<CustomDashboardRevisionRecord> => (
+  fetchJson<CustomDashboardRevisionRecord>(`/api/custom-dashboards/${encodeURIComponent(dashboardId)}/revisions`, {
+    method: "POST",
+    headers: jsonHeaders,
+    body: JSON.stringify(input),
+  })
+);
+
+export const startCustomDashboardValidation = (
+  dashboardId: string,
+  revisionId: string,
+  projectId: string,
+): Promise<CustomDashboardValidationSessionRecord> => (
+  fetchJson<CustomDashboardValidationSessionRecord>(
+    `/api/custom-dashboards/${encodeURIComponent(dashboardId)}/revisions/${encodeURIComponent(revisionId)}/validate`,
+    {
+      method: "POST",
+      headers: jsonHeaders,
+      body: JSON.stringify({ projectId }),
+    },
+  )
+);
+
+export const fetchCustomDashboardValidationSession = (
+  sessionId: string,
+  signal?: AbortSignal,
+): Promise<CustomDashboardValidationSessionRecord> => (
+  fetchJson<CustomDashboardValidationSessionRecord>(`/api/custom-dashboard-validations/${encodeURIComponent(sessionId)}`, { signal })
+);
+
+export const fetchCustomDashboardValidationLogs = (
+  sessionId: string,
+  tail = 200,
+  signal?: AbortSignal,
+): Promise<CustomDashboardValidationLogsResponse> => {
+  const url = new URL(`/api/custom-dashboard-validations/${encodeURIComponent(sessionId)}/logs`, window.location.origin);
+  url.searchParams.set("tail", String(tail));
+  return fetchJson<CustomDashboardValidationLogsResponse>(`${url.pathname}${url.search}`, { signal });
+};
+
+export const stopCustomDashboardValidation = (
+  sessionId: string,
+): Promise<CustomDashboardValidationSessionRecord> => (
+  fetchJson<CustomDashboardValidationSessionRecord>(`/api/custom-dashboard-validations/${encodeURIComponent(sessionId)}/stop`, {
+    method: "POST",
+  })
+);
+
+export const removeCustomDashboardValidation = async (sessionId: string): Promise<void> => {
+  await fetchJson<Record<string, never>>(`/api/custom-dashboard-validations/${encodeURIComponent(sessionId)}`, {
+    method: "DELETE",
+  });
+};
+
+export const publishCustomDashboardRevision = (
+  dashboardId: string,
+  revisionId: string,
+  validationSessionId?: string,
+): Promise<CustomDashboardRecord> => (
+  fetchJson<CustomDashboardRecord>(
+    `/api/custom-dashboards/${encodeURIComponent(dashboardId)}/revisions/${encodeURIComponent(revisionId)}/publish`,
+    {
+      method: "POST",
+      headers: jsonHeaders,
+      body: JSON.stringify({ revisionId, ...(validationSessionId ? { validationSessionId } : {}) }),
+    },
+  )
+);
+
+export const archiveCustomDashboard = (dashboardId: string): Promise<CustomDashboardRecord> => (
+  fetchJson<CustomDashboardRecord>(`/api/custom-dashboards/${encodeURIComponent(dashboardId)}`, {
+    method: "DELETE",
+  })
+);
+
+export const fetchCustomDashboardDataCatalog = (
+  projectId: string,
+  signal?: AbortSignal,
+): Promise<CustomDashboardDataCatalogResponse> => (
+  fetchJson<CustomDashboardDataCatalogResponse>(
+    `/api/projects/${encodeURIComponent(projectId)}/custom-dashboards/data-catalog`,
+    { signal },
+  )
+);
diff --git a/dashboard/src/v2/lib/custom-dashboard-view-models.ts b/dashboard/src/v2/lib/custom-dashboard-view-models.ts
new file mode 100644
index 0000000000..f7cf162a25
--- /dev/null
+++ b/dashboard/src/v2/lib/custom-dashboard-view-models.ts
@@ -0,0 +1,228 @@
+import type {
+  CreateCustomDashboardDraftInput,
+  CustomDashboardDataSourceNodeGraph,
+  CustomDashboardFileBundle,
+  CustomDashboardJsonObject,
+  CustomDashboardJsonValue,
+  CustomDashboardManifest,
+  CustomDashboardRecord,
+  CustomDashboardRevisionRecord,
+  CustomDashboardValidationSessionRecord,
+  CustomDashboardValidationStatus,
+} from "../types.js";
+
+export type JsonDraftResult<T> =
+  | { ok: true; value: T }
+  | { ok: false; message: string };
+
+export interface ValidationStageView {
+  id: "build" | "start" | "health";
+  label: string;
+  state: "pending" | "active" | "passed" | "failed" | "cancelled";
+}
+
+export interface DashboardStatusView {
+  label: string;
+  className: string;
+}
+
+export const DEFAULT_CUSTOM_DASHBOARD_MANIFEST: CustomDashboardManifest = {
+  schemaVersion: 1,
+  title: "Untitled Dashboard",
+  description: "Project-scoped custom dashboard draft.",
+  entryFile: "src/dashboard.tsx",
+  filePaths: ["src/dashboard.tsx"],
+};
+
+export const DEFAULT_CUSTOM_DASHBOARD_FILE_BUNDLE: CustomDashboardFileBundle = {
+  files: [
+    {
+      path: "src/dashboard.tsx",
+      contentType: "text/typescript-jsx",
+      content: [
+        "import { h } from 'preact';",
+        "",
+        "export default function Dashboard() {",
+        "  return <main>Custom dashboard revision</main>;",
+        "}",
+      ].join("\n"),
+    },
+  ],
+};
+
+export const DEFAULT_CUSTOM_DASHBOARD_SOURCE_GRAPH: CustomDashboardDataSourceNodeGraph = {
+  nodes: [],
+  edges: [],
+};
+
+export const DEFAULT_CUSTOM_DASHBOARD_STYLEGUIDE: CustomDashboardJsonObject = {
+  tone: "operational",
+  density: "compact",
+  notes: "Use existing Code UX dashboard data and keep controls accessible.",
+};
+
+export function stableJsonStringify(value: CustomDashboardJsonValue | unknown): string {
+  return JSON.stringify(sortJsonValue(value), null, 2);
+}
+
+export function parseJsonDraft<T>(input: string, label: string): JsonDraftResult<T> {
+  try {
+    return { ok: true, value: JSON.parse(input) as T };
+  } catch (error) {
+    const detail = error instanceof Error ? error.message : "Invalid JSON";
+    return { ok: false, message: `${label} contains invalid JSON: ${detail}` };
+  }
+}
+
+export function createDefaultCustomDashboardDraft(title = "Untitled Dashboard"): CreateCustomDashboardDraftInput {
+  const manifest = { ...DEFAULT_CUSTOM_DASHBOARD_MANIFEST, title };
+  return {
+    title,
+    description: "",
+    manifest,
+    fileBundle: DEFAULT_CUSTOM_DASHBOARD_FILE_BUNDLE,
+    sourceNodeGraph: DEFAULT_CUSTOM_DASHBOARD_SOURCE_GRAPH,
+    styleguide: DEFAULT_CUSTOM_DASHBOARD_STYLEGUIDE,
+    runtimeMetadata: {},
+  };
+}
+
+export function getDashboardStatusView(status: CustomDashboardRecord["status"]): DashboardStatusView {
+  switch (status) {
+    case "published":
+      return { label: "Published", className: "bg-status-green/10 text-status-green ring-status-green/25" };
+    case "validated":
+      return { label: "Validated", className: "bg-signal-500/10 text-signal-600 dark:text-signal-300 ring-signal-500/25" };
+    case "validating":
+      return { label: "Validating", className: "bg-sky-500/10 text-sky-600 dark:text-sky-300 ring-sky-500/25" };
+    case "rejected":
+      return { label: "Failed", className: "bg-status-red/10 text-status-red ring-status-red/25" };
+    case "archived":
+      return { label: "Archived", className: "bg-slate-500/10 text-slate-500 ring-slate-500/25" };
+    case "draft":
+    default:
+      return { label: "Draft", className: "bg-slate-500/10 text-slate-600 dark:text-slate-300 ring-slate-500/20" };
+  }
+}
+
+export function getRevisionValidationLabel(status: CustomDashboardValidationStatus | null): string {
+  switch (status) {
+    case "queued":
+      return "Queued";
+    case "building":
+      return "Building";
+    case "running":
+      return "Running";
+    case "passed":
+      return "Validated";
+    case "failed":
+      return "Failed";
+    case "cancelled":
+      return "Cancelled";
+    default:
+      return "Unvalidated";
+  }
+}
+
+export function canPublishRevision(
+  revision: CustomDashboardRevisionRecord | null,
+  session?: CustomDashboardValidationSessionRecord | null,
+): boolean {
+  if (!revision) {
+    return false;
+  }
+  if (revision.validationStatus === "passed" && revision.validationReport?.valid === true) {
+    return true;
+  }
+  return Boolean(
+    session
+      && session.revisionId === revision.id
+      && session.status === "passed"
+      && session.validationReport?.valid === true,
+  );
+}
+
+export function getValidationStages(
+  status: CustomDashboardValidationStatus | null | undefined,
+): ValidationStageView[] {
+  const failed = status === "failed";
+  const cancelled = status === "cancelled";
+  return [
+    {
+      id: "build",
+      label: "Build",
+      state: status === "building" || status === "queued"
+        ? "active"
+        : failed || cancelled
+          ? status
+          : status === "running" || status === "passed"
+            ? "passed"
+            : "pending",
+    },
+    {
+      id: "start",
+      label: "Start",
+      state: status === "running"
+        ? "active"
+        : status === "passed"
+          ? "passed"
+          : failed || cancelled
+            ? status
+            : "pending",
+    },
+    {
+      id: "health",
+      label: "Health",
+      state: status === "passed"
+        ? "passed"
+        : failed || cancelled
+          ? status
+          : "pending",
+    },
+  ];
+}
+
+export function buildValidationPreviewPath(sessionId: string | null | undefined): string | null {
+  return sessionId ? `/api/custom-dashboard-validations/${encodeURIComponent(sessionId)}/proxy/` : null;
+}
+
+export function selectLatestRevision(revisions: CustomDashboardRevisionRecord[]): CustomDashboardRevisionRecord | null {
+  return [...revisions].sort((left, right) => right.revisionNumber - left.revisionNumber)[0] ?? null;
+}
+
+export function hasDraftChanged(
+  dashboard: CustomDashboardRecord | null,
+  draft: {
+    title: string;
+    description: string;
+    manifestText: string;
+    fileBundleText: string;
+    sourceGraphText: string;
+    styleguideText: string;
+  },
+): boolean {
+  if (!dashboard) {
+    return false;
+  }
+  return dashboard.title !== draft.title
+    || dashboard.description !== draft.description
+    || stableJsonStringify(dashboard.manifest) !== draft.manifestText.trim()
+    || stableJsonStringify(dashboard.fileBundle) !== draft.fileBundleText.trim()
+    || stableJsonStringify(dashboard.sourceNodeGraph) !== draft.sourceGraphText.trim()
+    || stableJsonStringify(dashboard.styleguide) !== draft.styleguideText.trim();
+}
+
+function sortJsonValue(value: unknown): unknown {
+  if (Array.isArray(value)) {
+    return value.map(sortJsonValue);
+  }
+  if (!value || typeof value !== "object") {
+    return value;
+  }
+  return Object.keys(value as Record<string, unknown>)
+    .sort()
+    .reduce<Record<string, unknown>>((acc, key) => {
+      acc[key] = sortJsonValue((value as Record<string, unknown>)[key]);
+      return acc;
+    }, {});
+}
diff --git a/dashboard/src/v2/lib/navigation-items.ts b/dashboard/src/v2/lib/navigation-items.ts
index b035fe87c6..dcb71c13a9 100644
--- a/dashboard/src/v2/lib/navigation-items.ts
+++ b/dashboard/src/v2/lib/navigation-items.ts
@@ -10,6 +10,7 @@ import {
   Hexagon,
   Inbox,
   Layers,
+  LayoutDashboard,
   Library,
   ListChecks,
   MessageCircle,
@@ -28,6 +29,7 @@ export type NavigationItemId =
   | "tasks"
   | "agents"
   | "nodes"
+  | "custom-dashboards"
   | "stats"
   | "scheduler"
   | "memory"
@@ -80,6 +82,7 @@ export const ALL_NAVIGATION_ITEMS: readonly NavigationItem[] = [
   { id: "tasks", icon: ListChecks, label: "Tasks", path: "/tasks", color: "text-signal-400", group: "workspace", dockSection: "right", tourId: "nav-tasks", kind: "route" },
   { id: "agents", icon: Cpu, label: "Agents", path: "/agents", color: "text-signal-400", group: "workspace", dockSection: "right", tourId: "nav-agents", kind: "route" },
   { id: "nodes", icon: GitBranch, label: "Nodes", path: "/nodes", color: "text-signal-500", group: "workspace", dockSection: "right", tourId: "nav-nodes", kind: "route" },
+  { id: "custom-dashboards", icon: LayoutDashboard, label: "Dashboards", dockLabel: "Dash", path: "/custom-dashboards", color: "text-signal-500", group: "workspace", dockSection: "right", tourId: "nav-custom-dashboards", kind: "route" },
   { id: "stats", icon: BarChart3, label: "Stats", path: "/stats", color: "text-signal-500", group: "workspace", dockSection: "right", tourId: "nav-stats", kind: "route" },
   { id: "scheduler", icon: CalendarDays, label: "Schedule", path: "/scheduler", color: "text-signal-500", group: "workspace", dockSection: "right", tourId: "nav-schedule", kind: "route" },
   { id: "memory", icon: Inbox, label: "Memory", path: "/memory", color: "text-signal-500", group: "workspace", dockSection: "right", tourId: "nav-memory", kind: "route" },
@@ -99,6 +102,7 @@ const STANDARD_NAVIGATION_ITEM_IDS: readonly NavigationItemId[] = [
   "tasks",
   "agents",
   "nodes",
+  "custom-dashboards",
   "stats",
   "browser",
   "docs",
diff --git a/dashboard/src/v2/router/route-prefetch.ts b/dashboard/src/v2/router/route-prefetch.ts
index 2884d65a6f..352541ac23 100644
--- a/dashboard/src/v2/router/route-prefetch.ts
+++ b/dashboard/src/v2/router/route-prefetch.ts
@@ -16,6 +16,7 @@ const componentImporters: Record<string, ModuleImporter> = {
   "/tasks": () => import("../TasksPage.js"),
   "/agents": () => import("../AgentsPage.js"),
   "/nodes": () => import("../NodesPage.js"),
+  "/custom-dashboards": () => import("../CustomDashboardsPage.js"),
   "/stats": () => import("../StatsPage.js"),
   "/scheduler": () => import("../SchedulerPage.js"),
   "/config": () => import("../SettingsPage.js"),
diff --git a/dashboard/src/v2/types.ts b/dashboard/src/v2/types.ts
index d8b1809dde..dc76601419 100644
--- a/dashboard/src/v2/types.ts
+++ b/dashboard/src/v2/types.ts
@@ -173,6 +173,23 @@ import type {
   NodeWidgetSelectOption,
   UpdateNodeFlowInput,
 } from "../../../src/contracts/node-flow-types.js";
+import type {
+  CreateCustomDashboardDraftInput,
+  CreateCustomDashboardRevisionInput,
+  CustomDashboardDataSourceNodeGraph,
+  CustomDashboardFileBundle,
+  CustomDashboardFileBundleEntry,
+  CustomDashboardJsonObject,
+  CustomDashboardJsonValue,
+  CustomDashboardManifest,
+  CustomDashboardRecord,
+  CustomDashboardRevisionRecord,
+  CustomDashboardStatus,
+  CustomDashboardValidationReport,
+  CustomDashboardValidationSessionRecord,
+  CustomDashboardValidationStatus,
+  UpdateCustomDashboardDraftInput,
+} from "../../../src/contracts/custom-dashboard-types.js";
 
 export interface SegmentDefinition {
   label: string;
@@ -187,6 +204,23 @@ export type AgentConnection = McpConnectionRecord;
 export type AgentPreset = AgentPresetRecord;
 export type ChatThread = ConversationThreadRecord;
 export type ChatMessageRecord = ConversationMessageRecord;
+export type {
+  CreateCustomDashboardDraftInput,
+  CreateCustomDashboardRevisionInput,
+  CustomDashboardDataSourceNodeGraph,
+  CustomDashboardFileBundle,
+  CustomDashboardFileBundleEntry,
+  CustomDashboardJsonObject,
+  CustomDashboardJsonValue,
+  CustomDashboardManifest,
+  CustomDashboardRecord,
+  CustomDashboardRevisionRecord,
+  CustomDashboardStatus,
+  CustomDashboardValidationReport,
+  CustomDashboardValidationSessionRecord,
+  CustomDashboardValidationStatus,
+  UpdateCustomDashboardDraftInput,
+};
 
 export type ProjectCardSourceBadgeKind = "local" | "remote-git" | "local-repository";
 export type ProjectCardActionKind = "open-project" | "settings" | "setup-project" | "delete";
diff --git a/docs-web/architecture/custom-dashboard-foundation.md b/docs-web/architecture/custom-dashboard-foundation.md
index 629221f96f..aaadbaaa97 100644
--- a/docs-web/architecture/custom-dashboard-foundation.md
+++ b/docs-web/architecture/custom-dashboard-foundation.md
@@ -1,6 +1,6 @@
 # Custom Dashboard Foundation
 
-Custom dashboards are a persisted domain model for project-scoped dashboard generation. The foundation stores manifests, generated file bundles, data-source node graphs, validation history, and publication state, and the server-side validation runtime can now build and health-check a revision in an isolated Docker session. HTTP routes, MCP tools, and frontend UI are layered separately.
+Custom dashboards are a persisted domain model for project-scoped dashboard generation. The foundation stores manifests, generated file bundles, data-source node graphs, validation history, and publication state, and the server-side validation runtime can build and health-check a revision in an isolated Docker session. HTTP routes, MCP tools, and the Preact management workspace are thin layers over the repository and validation-service boundaries.
 
 ## Contracts
 
@@ -68,6 +68,22 @@ The MCP management surface is `manage_custom_dashboards` in `src/mcp/management/
 
 Validation proxy requests reuse the preview proxy boundary: request bodies are capped at 5 MB, dashboard credentials and hop-by-hop/proxy/control headers are stripped before upstream forwarding, `Origin`/`Referer`/`Sec-Fetch-Site` are normalized to the loopback upstream, and upstream `Set-Cookie`, CSP, CSP report-only, and `X-Frame-Options` response headers are removed before returning to the dashboard origin.
 
+## Frontend Workspace
+
+The Preact workspace is reachable at `/custom-dashboards` and is lazy-loaded from `dashboard/src/v2/CustomDashboardsPage.tsx`. It is project-scoped through the existing selected-project context and uses typed helpers in `dashboard/src/v2/lib/custom-dashboard-api.ts` for list/get/create/update, revision creation, detached validation sessions, logs, publication, archiving, and data catalog lookup.
+
+The page manages mutable draft text for:
+
+- manifest JSON
+- generated file bundle entries and file content
+- source node graph JSON
+- styleguide JSON
+- data catalog source selection
+
+Draft edits remain persisted bundle text sent back through API calls; generated dashboard code is not imported from `dashboard/src` at runtime. Revisions are created as immutable snapshots, then validated through a detached session. The validation panel shows build/start/health stage state, renders refreshed logs, links to the validation proxy preview, and disables publication until the selected revision has a passed validation report or a matching passed validation session.
+
+Navigation is centralized through `dashboard/src/v2/lib/navigation-items.ts`, so both the kinetic dock and sidebar expose the Dashboards destination with stable labels, tour markers, and route prefetching.
+
 ## Docker and Logs
 
 Docker argument construction lives in `src/services/custom-dashboard-docker-plan.ts`. Validation containers use the configured CLI workflow image, bind-mount only the generated workspace/runtime home plus an optional setup script, and do not mount provider credential directories.
diff --git a/docs/architecture/custom-dashboard-foundation.md b/docs/architecture/custom-dashboard-foundation.md
index 629221f96f..aaadbaaa97 100644
--- a/docs/architecture/custom-dashboard-foundation.md
+++ b/docs/architecture/custom-dashboard-foundation.md
@@ -1,6 +1,6 @@
 # Custom Dashboard Foundation
 
-Custom dashboards are a persisted domain model for project-scoped dashboard generation. The foundation stores manifests, generated file bundles, data-source node graphs, validation history, and publication state, and the server-side validation runtime can now build and health-check a revision in an isolated Docker session. HTTP routes, MCP tools, and frontend UI are layered separately.
+Custom dashboards are a persisted domain model for project-scoped dashboard generation. The foundation stores manifests, generated file bundles, data-source node graphs, validation history, and publication state, and the server-side validation runtime can build and health-check a revision in an isolated Docker session. HTTP routes, MCP tools, and the Preact management workspace are thin layers over the repository and validation-service boundaries.
 
 ## Contracts
 
@@ -68,6 +68,22 @@ The MCP management surface is `manage_custom_dashboards` in `src/mcp/management/
 
 Validation proxy requests reuse the preview proxy boundary: request bodies are capped at 5 MB, dashboard credentials and hop-by-hop/proxy/control headers are stripped before upstream forwarding, `Origin`/`Referer`/`Sec-Fetch-Site` are normalized to the loopback upstream, and upstream `Set-Cookie`, CSP, CSP report-only, and `X-Frame-Options` response headers are removed before returning to the dashboard origin.
 
+## Frontend Workspace
+
+The Preact workspace is reachable at `/custom-dashboards` and is lazy-loaded from `dashboard/src/v2/CustomDashboardsPage.tsx`. It is project-scoped through the existing selected-project context and uses typed helpers in `dashboard/src/v2/lib/custom-dashboard-api.ts` for list/get/create/update, revision creation, detached validation sessions, logs, publication, archiving, and data catalog lookup.
+
+The page manages mutable draft text for:
+
+- manifest JSON
+- generated file bundle entries and file content
+- source node graph JSON
+- styleguide JSON
+- data catalog source selection
+
+Draft edits remain persisted bundle text sent back through API calls; generated dashboard code is not imported from `dashboard/src` at runtime. Revisions are created as immutable snapshots, then validated through a detached session. The validation panel shows build/start/health stage state, renders refreshed logs, links to the validation proxy preview, and disables publication until the selected revision has a passed validation report or a matching passed validation session.
+
+Navigation is centralized through `dashboard/src/v2/lib/navigation-items.ts`, so both the kinetic dock and sidebar expose the Dashboards destination with stable labels, tour markers, and route prefetching.
+
 ## Docker and Logs
 
 Docker argument construction lives in `src/services/custom-dashboard-docker-plan.ts`. Validation containers use the configured CLI workflow image, bind-mount only the generated workspace/runtime home plus an optional setup script, and do not mount provider credential directories.
diff --git a/tests/dashboard/lib/custom-dashboard-view-models.test.ts b/tests/dashboard/lib/custom-dashboard-view-models.test.ts
new file mode 100644
index 0000000000..499555cc70
--- /dev/null
+++ b/tests/dashboard/lib/custom-dashboard-view-models.test.ts
@@ -0,0 +1,116 @@
+import { describe, expect, it } from "vitest";
+import type {
+  CustomDashboardRecord,
+  CustomDashboardRevisionRecord,
+  CustomDashboardValidationSessionRecord,
+} from "../../../dashboard/src/v2/types.js";
+import {
+  buildValidationPreviewPath,
+  canPublishRevision,
+  createDefaultCustomDashboardDraft,
+  getDashboardStatusView,
+  getRevisionValidationLabel,
+  getValidationStages,
+  hasDraftChanged,
+  parseJsonDraft,
+  stableJsonStringify,
+} from "../../../dashboard/src/v2/lib/custom-dashboard-view-models.js";
+
+const dashboard: CustomDashboardRecord = {
+  id: "dashboard-1",
+  projectId: "project-1",
+  title: "Delivery Pulse",
+  description: "Release health",
+  status: "draft",
+  manifest: {
+    schemaVersion: 1,
+    title: "Delivery Pulse",
+    entryFile: "src/dashboard.tsx",
+    filePaths: ["src/dashboard.tsx"],
+  },
+  fileBundle: {
+    files: [{ path: "src/dashboard.tsx", content: "export default function Dashboard() { return null; }" }],
+  },
+  sourceNodeGraph: { nodes: [], edges: [] },
+  styleguide: { tone: "operational" },
+  runtimeMetadata: {},
+  publishedRevisionId: null,
+  createdAt: "2026-07-07T00:00:00.000Z",
+  updatedAt: "2026-07-07T00:00:00.000Z",
+};
+
+const revision: CustomDashboardRevisionRecord = {
+  id: "revision-1",
+  dashboardId: "dashboard-1",
+  projectId: "project-1",
+  revisionNumber: 1,
+  manifest: dashboard.manifest,
+  fileBundle: dashboard.fileBundle,
+  sourceNodeGraph: dashboard.sourceNodeGraph,
+  styleguide: dashboard.styleguide,
+  validationStatus: null,
+  validationReport: null,
+  runtimeMetadata: {},
+  validatedAt: null,
+  createdAt: "2026-07-07T00:00:00.000Z",
+  updatedAt: "2026-07-07T00:00:00.000Z",
+};
+
+describe("custom dashboard view models", () => {
+  it("creates a default persisted bundle draft", () => {
+    const draft = createDefaultCustomDashboardDraft("Ops Console");
+
+    expect(draft.title).toBe("Ops Console");
+    expect(draft.manifest.entryFile).toBe("src/dashboard.tsx");
+    expect(draft.fileBundle.files[0]?.content).toContain("Custom dashboard revision");
+    expect(draft.sourceNodeGraph?.nodes).toEqual([]);
+  });
+
+  it("parses and formats JSON drafts deterministically", () => {
+    expect(parseJsonDraft<{ ok: true }>("{\"ok\":true}", "Manifest")).toEqual({ ok: true, value: { ok: true } });
+    expect(parseJsonDraft("{", "Manifest")).toMatchObject({ ok: false });
+    expect(stableJsonStringify({ b: 1, a: { d: 2, c: 3 } })).toBe(stableJsonStringify({ a: { c: 3, d: 2 }, b: 1 }));
+  });
+
+  it("gates publication on passed revision or matching passed session", () => {
+    expect(canPublishRevision(revision)).toBe(false);
+    expect(canPublishRevision({ ...revision, validationStatus: "passed", validationReport: { valid: true, issues: [] } })).toBe(true);
+
+    const session: CustomDashboardValidationSessionRecord = {
+      id: "session-1",
+      dashboardId: "dashboard-1",
+      revisionId: "revision-1",
+      projectId: "project-1",
+      status: "passed",
+      validationReport: { valid: true, issues: [] },
+      runtimeMetadata: {},
+      startedAt: "2026-07-07T00:00:00.000Z",
+      finishedAt: "2026-07-07T00:00:01.000Z",
+      createdAt: "2026-07-07T00:00:00.000Z",
+      updatedAt: "2026-07-07T00:00:01.000Z",
+    };
+
+    expect(canPublishRevision(revision, session)).toBe(true);
+    expect(canPublishRevision(revision, { ...session, revisionId: "other" })).toBe(false);
+  });
+
+  it("summarizes statuses, stages, previews, and draft dirtiness", () => {
+    expect(getDashboardStatusView("published").label).toBe("Published");
+    expect(getRevisionValidationLabel("building")).toBe("Building");
+    expect(getValidationStages("running").map((stage) => stage.state)).toEqual(["passed", "active", "pending"]);
+    expect(getValidationStages("passed").map((stage) => stage.state)).toEqual(["passed", "passed", "passed"]);
+    expect(buildValidationPreviewPath("session 1")).toBe("/api/custom-dashboard-validations/session%201/proxy/");
+
+    const draft = {
+      title: dashboard.title,
+      description: dashboard.description,
+      manifestText: stableJsonStringify(dashboard.manifest),
+      fileBundleText: stableJsonStringify(dashboard.fileBundle),
+      sourceGraphText: stableJsonStringify(dashboard.sourceNodeGraph),
+      styleguideText: stableJsonStringify(dashboard.styleguide),
+    };
+
+    expect(hasDraftChanged(dashboard, draft)).toBe(false);
+    expect(hasDraftChanged(dashboard, { ...draft, title: "Changed" })).toBe(true);
+  });
+});
diff --git a/tests/dashboard/v2/navigation-knowledge.test.tsx b/tests/dashboard/v2/navigation-knowledge.test.tsx
index 975b500629..4a29583078 100644
--- a/tests/dashboard/v2/navigation-knowledge.test.tsx
+++ b/tests/dashboard/v2/navigation-knowledge.test.tsx
@@ -97,6 +97,7 @@ describe("Knowledge Base Navigation", () => {
                 "Tasks",
                 "Agents",
                 "Nodes",
+                "Dashboards",
                 "Stats",
                 "Schedule",
                 "Memory",
@@ -115,6 +116,7 @@ describe("Knowledge Base Navigation", () => {
             "Tasks",
             "Agents",
             "Nodes",
+            "Dashboards",
             "Stats",
             "Schedule",
             "Memory",
@@ -152,6 +154,7 @@ describe("Knowledge Base Navigation", () => {
             "Tasks",
             "Agents",
             "Nodes",
+            "Dash",
             "Stats",
             "Schedule",
             "Memory",