@growthub/cli 0.9.6 → 0.9.8

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/workspace-builder.jsx

@@ -1,13 +1,18 @@
 "use client";
 
 import Link from "next/link";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   DASHBOARD_TEMPLATES,
   SAMPLE_DATA_BINDINGS,
   SAMPLE_VIEW_ROWS,
+  cloneTemplateToDashboard,
+  cloneTemplateToTab,
   defaultConfigFor,
-  validateWorkspaceConfig
+  normalizeWorkspaceTemplate,
+  unwrapWorkspaceTemplateImport,
+  validateWorkspaceConfig,
+  wrapWorkspaceTemplateExport
 } from "@/lib/workspace-schema";
 
 const DEFAULT_POSITION = { x: 4, y: 0, w: 4, h: 5 };
@@ -70,6 +75,120 @@ function commitTabs(canvas, tabs, activeTabId) {
   return next;
 }
 
+function createDashboardRecord(name = "Untitled") {
+  const tab = createEmptyTab(name);
+  return {
+    id: generateId("dashboard"),
+    name,
+    createdBy: "Workspace owner",
+    updatedAt: "new",
+    status: "draft",
+    tabs: [tab],
+    activeTabId: tab.id
+  };
+}
+
+function createEmptyTab(name = "Untitled") {
+  return {
+    id: generateId("tab"),
+    name,
+    widgets: []
+  };
+}
+
+function cloneTabForDashboard(tab, name) {
+  return {
+    id: generateId("tab"),
+    name,
+    widgets: (tab?.widgets || []).map((widget) => ({
+      ...cloneConfig(widget),
+      id: generateId("widget")
+    }))
+  };
+}
+
+function normalizeDashboard(dashboard, fallbackCanvas) {
+  const tabs = Array.isArray(dashboard?.tabs) && dashboard.tabs.length
+    ? dashboard.tabs
+    : getTabs(fallbackCanvas).map((tab) => ({
+        ...tab,
+        id: tab.id === DEFAULT_TAB_ID ? generateId("tab") : tab.id
+      }));
+  const activeTabId = dashboard?.activeTabId && tabs.some((tab) => tab.id === dashboard.activeTabId)
+    ? dashboard.activeTabId
+    : tabs[0].id;
+  return {
+    ...dashboard,
+    tabs,
+    activeTabId
+  };
+}
+
+function dashboardCanvasFrom(dashboard, baseCanvas) {
+  const normalized = normalizeDashboard(dashboard, baseCanvas);
+  return commitTabs(baseCanvas, normalized.tabs, normalized.activeTabId);
+}
+
+function updateDashboardCanvas(dashboard, canvas) {
+  const tabs = getTabs(canvas);
+  const activeTabId = getActiveTabId(canvas);
+  return {
+    ...dashboard,
+    tabs,
+    activeTabId
+  };
+}
+
+function createDashboardFromTab(name, tab, source = {}) {
+  const clonedTab = cloneTabForDashboard(tab, name);
+  return {
+    ...source,
+    id: generateId("dashboard"),
+    name,
+    createdBy: source.createdBy || "Workspace owner",
+    updatedAt: "new",
+    status: "draft",
+    tabs: [clonedTab],
+    activeTabId: clonedTab.id
+  };
+}
+
+function getActiveDashboardId(dashboards, fallback) {
+  if (fallback && dashboards.some((dashboard) => dashboard.id === fallback)) {
+    return fallback;
+  }
+  return dashboards[0]?.id || null;
+}
+
+function activeDashboardIndex(dashboards, activeDashboardId) {
+  const index = dashboards.findIndex((dashboard) => dashboard.id === activeDashboardId);
+  return index >= 0 ? index : 0;
+}
+
+function syncActiveDashboard(config, activeDashboardId) {
+  const dashboards = config.dashboards || [];
+  const resolvedId = getActiveDashboardId(dashboards, activeDashboardId);
+  if (!resolvedId) return config;
+  return {
+    ...config,
+    dashboards: dashboards.map((dashboard) =>
+      dashboard.id === resolvedId ? updateDashboardCanvas(dashboard, config.canvas) : dashboard
+    )
+  };
+}
+
+function commitDashboardCanvas(config, activeDashboardId, nextCanvas) {
+  const dashboards = config.dashboards || [];
+  const resolvedId = getActiveDashboardId(dashboards, activeDashboardId);
+  return {
+    ...config,
+    dashboards: dashboards.map((dashboard) =>
+      dashboard.id === resolvedId ? updateDashboardCanvas(dashboard, nextCanvas) : dashboard
+    ),
+    canvas: nextCanvas
+  };
+}
+
 function findFreePosition(widgets) {
   const occupied = new Set();
   for (const widget of widgets) {
@@ -242,15 +361,98 @@ function serializeManualRows(rows, columns) {
     .join("\n");
 }
 
-function hydrateTemplate(template) {
-  return {
-    name: template.name,
-    widgets: template.widgets.map((widget) => ({
-      ...cloneConfig(widget),
-      id: generateId("widget"),
-      config: cloneConfig(widget.config || defaultConfigFor(widget.kind))
-    }))
-  };
+const NORMALIZED_TEMPLATES = DASHBOARD_TEMPLATES.map((template) => ({
+  ...normalizeWorkspaceTemplate(template),
+  widgets: template.widgets
+}));
+
+function widgetKindFill(kind) {
+  switch (kind) {
+    case "chart": return "#dbeafe";
+    case "view": return "#fef3c7";
+    case "iframe": return "#ede9fe";
+    case "rich-text": return "#dcfce7";
+    default: return "#e5e7eb";
+  }
+}
+
+function TemplateMiniGrid({ template }) {
+  const widgets = Array.isArray(template?.widgets) ? template.widgets : [];
+  return <div
+    className="template-mini-grid"
+    aria-hidden="true"
+    style={{
+      "--template-mini-columns": GRID_COLUMNS,
+      "--template-mini-rows": GRID_ROWS
+    }}
+  >
+    {widgets.map((widget, index) => <span
+      className={`template-mini-widget kind-${widget.kind}`}
+      key={`${widget.kind}-${index}`}
+      style={{
+        gridColumn: `${widget.position.x + 1} / span ${widget.position.w}`,
+        gridRow: `${widget.position.y + 1} / span ${widget.position.h}`,
+        background: widgetKindFill(widget.kind)
+      }}
+    />)}
+  </div>;
+}
+
+function TemplateGallery({
+  templates,
+  previewTemplateId,
+  onPreview,
+  onClose,
+  onApplyToCurrentTab,
+  onCloneAsDashboard
+}) {
+  const previewTemplate = templates.find((template) => template.id === previewTemplateId) || null;
+  return <div className="template-gallery" role="dialog" aria-modal="true" aria-label="Workspace templates">
+    <div className="template-gallery-backdrop" onClick={onClose} aria-hidden="true" />
+    <section className="template-gallery-panel">
+      <header className="template-gallery-header">
+        <div>
+          <p>Workspace templates</p>
+          <h2>Pick a starting layout</h2>
+        </div>
+        <button type="button" aria-label="Close template gallery" onClick={onClose}>x</button>
+      </header>
+      <div className="template-gallery-grid">
+        {templates.map((template) => {
+          const isPreviewing = previewTemplate?.id === template.id;
+          return <article
+            className={`template-card${isPreviewing ? " previewing" : ""}`}
+            key={template.id}
+          >
+            <div className="template-card-header">
+              <strong>{template.name}</strong>
+              <span className="template-card-category">{template.category}</span>
+            </div>
+            <p className="template-card-description">{template.description}</p>
+            <div className="template-card-preview">
+              <TemplateMiniGrid template={template} />
+            </div>
+            <div className="template-card-meta">
+              <span>{template.widgetCount} widget{template.widgetCount === 1 ? "" : "s"}</span>
+              {template.bestFor.length ? <span>· Best for: {template.bestFor.join(", ")}</span> : null}
+            </div>
+            {template.tags.length ? <div className="template-card-tags">
+              {template.tags.map((tag) => <span key={tag}>#{tag}</span>)}
+            </div> : null}
+            <div className="template-card-actions">
+              <button type="button" onClick={() => onPreview(template.id)}>{isPreviewing ? "Previewing" : "Preview"}</button>
+              <button type="button" onClick={() => onApplyToCurrentTab(template.id)}>Apply to Current Tab</button>
+              <button type="button" onClick={() => onCloneAsDashboard(template.id)}>Clone as New Dashboard</button>
+            </div>
+          </article>;
+        })}
+      </div>
+      {previewTemplate ? <footer className="template-gallery-footer" aria-live="polite">
+        <strong>{previewTemplate.name}</strong>
+        <span>{previewTemplate.preview?.summary || previewTemplate.description}</span>
+      </footer> : null}
+    </section>
+  </div>;
 }
 
 function WidgetPreview({ widget, selected, onSelect, onRemove, onResizeStart }) {
@@ -306,12 +508,34 @@ function WidgetPreview({ widget, selected, onSelect, onRemove, onResizeStart })
 }
 
 function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter }) {
-  const [config, setConfig] = useState(initialConfig);
+  const [config, setConfig] = useState(() => {
+    const dashboards = Array.isArray(initialConfig.dashboards) && initialConfig.dashboards.length
+      ? initialConfig.dashboards.map((dashboard, index) =>
+          normalizeDashboard(dashboard, index === 0 ? initialConfig.canvas : undefined)
+        )
+      : [createDashboardRecord("Untitled")];
+    return {
+      ...initialConfig,
+      dashboards,
+      canvas: dashboardCanvasFrom(dashboards[0], initialConfig.canvas)
+    };
+  });
   const [saving, setSaving] = useState(false);
   const [panelOpen, setPanelOpen] = useState(true);
+  const [templateGalleryOpen, setTemplateGalleryOpen] = useState(false);
+  const [previewTemplateId, setPreviewTemplateId] = useState(null);
+  const [editingDashboardId, setEditingDashboardId] = useState(null);
+  const [activeDashboardId, setActiveDashboardId] = useState(() =>
+    getActiveDashboardId(
+      Array.isArray(initialConfig.dashboards) && initialConfig.dashboards.length ? initialConfig.dashboards : [],
+      null
+    )
+  );
   const gridRef = useRef(null);
   const canvas = config.canvas;
-  const dashboards = config.dashboards;
+  const dashboards = config.dashboards || [];
+  const resolvedActiveDashboardId = getActiveDashboardId(dashboards, activeDashboardId);
+  const resolvedActiveDashboardIndex = activeDashboardIndex(dashboards, resolvedActiveDashboardId);
   const widgetTypes = config.widgetTypes;
   const tabs = getTabs(canvas);
   const activeTabId = getActiveTabId(canvas);
@@ -361,9 +585,9 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
       setSelectedWidgetId(widget.id);
       setSelectedPosition(findFreePosition([...existingWidgets, widget]));
       setDragPreview(null);
-      return { ...prev, canvas: commitTabs(prev.canvas, nextTabs, prevActiveId) };
+      return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, nextTabs, prevActiveId));
     });
-  }, [addSlot]);
+  }, [activeDashboardId, addSlot]);
 
   const switchTab = useCallback((tabId) => {
     setConfig((prev) => {
@@ -374,9 +598,9 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
       setSelectedWidgetId(null);
       setSelectedPosition(findFreePosition(nextTab?.widgets || []));
       setDragPreview(null);
-      return { ...prev, canvas: commitTabs(prev.canvas, prevTabs, tabId) };
+      return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, prevTabs, tabId));
     });
-  }, []);
+  }, [activeDashboardId]);
 
   const addTab = useCallback(() => {
     setConfig((prev) => {
@@ -395,49 +619,160 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
       setSelectedWidgetId(null);
       setSelectedPosition({ ...DEFAULT_POSITION });
       setDragPreview(null);
-      return { ...prev, canvas: commitTabs(prev.canvas, nextTabs, newTab.id) };
+      return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, nextTabs, newTab.id));
     });
-  }, []);
+  }, [activeDashboardId]);
 
   const addDashboard = useCallback(() => {
+    setConfig((prev) => {
+      const synced = syncActiveDashboard(prev, activeDashboardId);
+      const prevDashboards = synced.dashboards || [];
+      const name = `Dashboard ${prevDashboards.length + 1}`;
+      const dashboard = createDashboardRecord(name);
+      setSelectedWidgetId(null);
+      setSelectedPosition({ ...DEFAULT_POSITION });
+      setDragPreview(null);
+      setEditingDashboardId(dashboard.id);
+      setActiveDashboardId(dashboard.id);
+      setConfigMessage(`Created ${name}`);
+      return {
+        ...synced,
+        dashboards: [...prevDashboards, dashboard],
+        canvas: dashboardCanvasFrom(dashboard, synced.canvas)
+      };
+    });
+  }, [activeDashboardId]);
+
+  const selectDashboard = useCallback((index) => {
+    setConfig((prev) => {
+      const synced = syncActiveDashboard(prev, activeDashboardId);
+      const prevDashboards = synced.dashboards || [];
+      const dashboard = prevDashboards[index];
+      if (!dashboard) return prev;
+      const normalized = normalizeDashboard(dashboard, index === 0 ? synced.canvas : undefined);
+      setSelectedWidgetId(null);
+      setSelectedPosition(findFreePosition(getTabs(dashboardCanvasFrom(normalized, prev.canvas))[0]?.widgets || []));
+      setDragPreview(null);
+      setEditingDashboardId(dashboard.id);
+      setActiveDashboardId(dashboard.id);
+      setConfigMessage(`Editing ${dashboard.name}`);
+      return {
+        ...synced,
+        dashboards: prevDashboards.map((item) => item.id === dashboard.id ? normalized : item),
+        canvas: dashboardCanvasFrom(normalized, synced.canvas)
+      };
+    });
+  }, [activeDashboardId]);
+
+  const renameDashboard = useCallback((dashboardId, name) => {
+    const nextName = name.trimStart();
+    setConfig((prev) => {
+      const prevDashboards = prev.dashboards || [];
+      const index = prevDashboards.findIndex((dashboard) => dashboard.id === dashboardId);
+      if (index < 0) return prev;
+      const displayName = nextName || "Untitled";
+      const nextDashboards = prevDashboards.map((dashboard) =>
+        dashboard.id === dashboardId ? { ...dashboard, name: displayName, updatedAt: "new" } : dashboard
+      );
+      const nextDashboardsWithTabs = nextDashboards.map((dashboard, dashboardIndex) => {
+        if (dashboardIndex !== index) return dashboard;
+        const normalized = normalizeDashboard(dashboard, index === 0 ? prev.canvas : undefined);
+        const renamedTabs = normalized.tabs.map((tab, tabIndex) =>
+          tabIndex === 0 ? { ...tab, name: displayName } : tab
+        );
+        return { ...normalized, tabs: renamedTabs };
+      });
+      const activeDashboard = nextDashboardsWithTabs.find((dashboard) => dashboard.id === getActiveDashboardId(nextDashboardsWithTabs, activeDashboardId));
+      return {
+        ...prev,
+        dashboards: nextDashboardsWithTabs,
+        canvas: dashboardCanvasFrom(activeDashboard || nextDashboardsWithTabs[0], prev.canvas)
+      };
+    });
+  }, [activeDashboardId]);
+
+  const updateDashboardStatus = useCallback((dashboardId, status) => {
     setConfig((prev) => ({
       ...prev,
-      dashboards: [
-        ...(prev.dashboards || []),
-        {
-          id: generateId("dashboard"),
-          name: "Untitled",
-          createdBy: "Workspace owner",
-          updatedAt: "new",
-          status: "draft"
-        }
-      ]
+      dashboards: (prev.dashboards || []).map((dashboard) =>
+        dashboard.id === dashboardId ? { ...dashboard, status, updatedAt: "new" } : dashboard
+      )
     }));
   }, []);
 
-  const duplicateDashboard = useCallback(() => {
+  const cloneDashboard = useCallback((index) => {
     setConfig((prev) => {
-      const source = prev.dashboards?.[0] || {
-        name: "Untitled",
-        createdBy: "Workspace owner",
+      const synced = syncActiveDashboard(prev, activeDashboardId);
+      const prevDashboards = synced.dashboards || [];
+      const sourceDashboard = prevDashboards[index];
+      if (!sourceDashboard) return prev;
+      const normalizedSource = normalizeDashboard(sourceDashboard, index === resolvedActiveDashboardIndex ? synced.canvas : undefined);
+      const name = `${sourceDashboard.name} Copy`;
+      const dashboard = {
+        ...normalizedSource,
+        id: generateId("dashboard"),
+        name,
         updatedAt: "new",
-        status: "draft"
+        status: "draft",
+        tabs: normalizedSource.tabs.map((tab, tabIndex) =>
+          cloneTabForDashboard(tab, tabIndex === 0 ? name : tab.name)
+        )
       };
+      dashboard.activeTabId = dashboard.tabs[0].id;
+      setSelectedWidgetId(null);
+      setSelectedPosition(findFreePosition(dashboard.tabs[0].widgets));
+      setDragPreview(null);
+      setEditingDashboardId(dashboard.id);
+      setActiveDashboardId(dashboard.id);
+      setConfigMessage(`Cloned ${sourceDashboard.name}`);
       return {
-        ...prev,
-        dashboards: [
-          ...(prev.dashboards || []),
-          {
-            ...source,
-            id: generateId("dashboard"),
-            name: `${source.name} Copy`,
-            updatedAt: "new",
-            status: "draft"
-          }
-        ]
+        ...synced,
+        dashboards: [...prevDashboards, dashboard],
+        canvas: dashboardCanvasFrom(dashboard, synced.canvas)
       };
     });
-  }, []);
+  }, [activeDashboardId, resolvedActiveDashboardIndex]);
+
+  const deleteDashboard = useCallback((index) => {
+    setConfig((prev) => {
+      const synced = syncActiveDashboard(prev, activeDashboardId);
+      const prevDashboards = synced.dashboards || [];
+      if (!prevDashboards[index]) return prev;
+      if (prevDashboards.length <= 1) {
+        const dashboard = createDashboardRecord("Untitled");
+        setSelectedWidgetId(null);
+        setSelectedPosition({ ...DEFAULT_POSITION });
+        setDragPreview(null);
+        setEditingDashboardId(dashboard.id);
+        setActiveDashboardId(dashboard.id);
+        setConfigMessage("Reset dashboard");
+        return {
+          ...synced,
+          dashboards: [dashboard],
+          canvas: dashboardCanvasFrom(dashboard, synced.canvas)
+        };
+      }
+      const removed = prevDashboards[index];
+      const nextDashboards = prevDashboards.filter((_, dashboardIndex) => dashboardIndex !== index);
+      const nextActiveIndex = Math.min(index, nextDashboards.length - 1);
+      const nextActiveDashboard = normalizeDashboard(nextDashboards[nextActiveIndex], synced.canvas);
+      setSelectedWidgetId(null);
+      setSelectedPosition(findFreePosition(nextActiveDashboard.tabs[0]?.widgets || []));
+      setDragPreview(null);
+      setEditingDashboardId(nextActiveDashboard.id);
+      setActiveDashboardId(nextActiveDashboard.id);
+      setConfigMessage(`Deleted ${removed.name}`);
+      return {
+        ...synced,
+        dashboards: nextDashboards.map((dashboard) => dashboard.id === nextActiveDashboard.id ? nextActiveDashboard : dashboard),
+        canvas: dashboardCanvasFrom(nextActiveDashboard, synced.canvas)
+      };
+    });
+  }, [activeDashboardId]);
+
+  const duplicateDashboard = useCallback(() => {
+    cloneDashboard(resolvedActiveDashboardIndex);
+  }, [cloneDashboard, resolvedActiveDashboardIndex]);
 
   const duplicateTab = useCallback(() => {
     setConfig((prev) => {
@@ -460,65 +795,137 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
       setSelectedWidgetId(null);
       setSelectedPosition(findFreePosition(cloned.widgets));
       setDragPreview(null);
-      return { ...prev, canvas: commitTabs(prev.canvas, nextTabs, cloned.id) };
+      return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, nextTabs, cloned.id));
     });
-  }, []);
+  }, [activeDashboardId]);
+
+  const deleteTab = useCallback((tabId) => {
+    setConfig((prev) => {
+      const prevTabs = getTabs(prev.canvas);
+      const tab = prevTabs.find((item) => item.id === tabId);
+      if (!tab) return prev;
+      if (prevTabs.length <= 1) {
+        const fallback = createEmptyTab(tab.name || "Tab 1");
+        setSelectedWidgetId(null);
+        setSelectedPosition({ ...DEFAULT_POSITION });
+        setDragPreview(null);
+        setConfigMessage(`Cleared ${tab.name}`);
+        return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, [fallback], fallback.id));
+      }
+      const nextTabs = prevTabs.filter((item) => item.id !== tabId);
+      const activeIndex = prevTabs.findIndex((item) => item.id === tabId);
+      const nextActiveTab = nextTabs[Math.min(activeIndex, nextTabs.length - 1)] || nextTabs[0];
+      setSelectedWidgetId(null);
+      setSelectedPosition(findFreePosition(nextActiveTab.widgets || []));
+      setDragPreview(null);
+      setConfigMessage(`Deleted ${tab.name}`);
+      return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, nextTabs, nextActiveTab.id));
+    });
+  }, [activeDashboardId]);
 
-  const applyTemplate = useCallback((templateId) => {
+  const applyTemplateToCurrentTab = useCallback((templateId) => {
     const template = DASHBOARD_TEMPLATES.find((item) => item.id === templateId);
     if (!template) return;
+    const clonedTab = cloneTemplateToTab(template, { tabName: template.name, idFactory: generateId });
     setConfig((prev) => {
-      const hydrated = hydrateTemplate(template);
       const prevTabs = getTabs(prev.canvas);
       const prevActiveId = getActiveTabId(prev.canvas);
+      const dashboardIndex = activeDashboardIndex(prev.dashboards || [], activeDashboardId);
       const stableTabs = prevTabs.length === 1 && prevTabs[0].id === DEFAULT_TAB_ID
         ? [{ ...prevTabs[0], id: DEFAULT_TAB_ID }]
         : prevTabs;
       const nextTabs = stableTabs.map((tab) =>
-        tab.id === prevActiveId ? { ...tab, name: hydrated.name, widgets: hydrated.widgets } : tab
+        tab.id === prevActiveId ? { ...tab, name: clonedTab.name, widgets: clonedTab.widgets } : tab
+      );
+      const nextCanvas = commitTabs(prev.canvas, nextTabs, prevActiveId);
+      const nextDashboards = (prev.dashboards || []).map((dashboard, index) =>
+        index === dashboardIndex
+          ? updateDashboardCanvas({ ...dashboard, name: template.name, updatedAt: "new", status: "draft" }, nextCanvas)
+          : dashboard
       );
-      setSelectedWidgetId(null);
-      setSelectedPosition(findFreePosition(hydrated.widgets));
-      setDragPreview(null);
-      setConfigMessage(`Applied ${template.name}`);
       return {
         ...prev,
-        dashboards: (prev.dashboards || []).map((dashboard, index) =>
-          index === 0 ? { ...dashboard, name: template.name, updatedAt: "new", status: "draft" } : dashboard
-        ),
-        canvas: commitTabs(prev.canvas, nextTabs, prevActiveId)
+        dashboards: nextDashboards,
+        canvas: nextCanvas
       };
     });
-  }, []);
+    setSelectedWidgetId(null);
+    setSelectedPosition(findFreePosition(clonedTab.widgets));
+    setDragPreview(null);
+    setConfigMessage(`Applied ${template.name} to current tab`);
+    setTemplateGalleryOpen(false);
+    setPreviewTemplateId(null);
+  }, [activeDashboardId]);
+
+  const cloneTemplateAsDashboard = useCallback((templateId) => {
+    const template = DASHBOARD_TEMPLATES.find((item) => item.id === templateId);
+    if (!template) return;
+    const cloned = cloneTemplateToDashboard(template, { idFactory: generateId });
+    setConfig((prev) => {
+      const synced = syncActiveDashboard(prev, activeDashboardId);
+      const dashboard = {
+        ...cloned.dashboard,
+        tabs: [cloned.tab],
+        activeTabId: cloned.tab.id
+      };
+      setActiveDashboardId(dashboard.id);
+      return {
+        ...synced,
+        dashboards: [...(synced.dashboards || []), dashboard],
+        canvas: dashboardCanvasFrom(dashboard, synced.canvas)
+      };
+    });
+    setSelectedWidgetId(null);
+    setSelectedPosition(findFreePosition(cloned.tab.widgets));
+    setDragPreview(null);
+    setConfigMessage(`Cloned ${template.name} as dashboard`);
+    setTemplateGalleryOpen(false);
+    setPreviewTemplateId(null);
+  }, [activeDashboardId]);
 
   const exportConfig = useCallback(() => {
-    const blob = new Blob([`${JSON.stringify({
-      dashboards: config.dashboards,
-      widgetTypes: config.widgetTypes,
-      canvas: config.canvas
-    }, null, 2)}\n`], { type: "application/json" });
+    const syncedConfig = syncActiveDashboard(config, activeDashboardId);
+    const primaryDashboard = syncedConfig.dashboards?.[0] || {};
+    const wrapped = wrapWorkspaceTemplateExport(
+      {
+        dashboards: syncedConfig.dashboards,
+        widgetTypes: syncedConfig.widgetTypes,
+        canvas: syncedConfig.canvas
+      },
+      {
+        name: primaryDashboard.name || syncedConfig.name || "Workspace template",
+        description: syncedConfig.description || ""
+      }
+    );
+    const blob = new Blob([`${JSON.stringify(wrapped, null, 2)}\n`], { type: "application/json" });
     const url = URL.createObjectURL(blob);
     const anchor = document.createElement("a");
     anchor.href = url;
-    anchor.download = "growthub-dashboard.config.json";
+    anchor.download = "growthub-dashboard.template.json";
     anchor.click();
     URL.revokeObjectURL(url);
-    setConfigMessage("Exported dashboard config");
-  }, [config]);
+    setConfigMessage("Exported workspace template");
+  }, [activeDashboardId, config]);
 
   const importConfig = useCallback(async (event) => {
     const file = event.target.files?.[0];
     if (!file) return;
     try {
-      const imported = JSON.parse(await file.text());
-      validateWorkspaceConfig(imported);
+      const parsed = JSON.parse(await file.text());
+      const payload = unwrapWorkspaceTemplateImport(parsed);
+      validateWorkspaceConfig(payload);
+      const importedDashboards = (payload.dashboards || []).map((dashboard, index) =>
+        normalizeDashboard(dashboard, index === 0 ? payload.canvas : undefined)
+      );
+      const importedActiveDashboard = importedDashboards[0];
       setConfig((prev) => ({
         ...prev,
-        dashboards: imported.dashboards,
-        widgetTypes: imported.widgetTypes,
-        canvas: imported.canvas
+        dashboards: importedDashboards,
+        widgetTypes: payload.widgetTypes,
+        canvas: importedActiveDashboard ? dashboardCanvasFrom(importedActiveDashboard, payload.canvas) : payload.canvas
       }));
-      const importedTabs = getTabs(imported.canvas);
+      setActiveDashboardId(importedActiveDashboard?.id || null);
+      const importedTabs = getTabs(importedActiveDashboard ? dashboardCanvasFrom(importedActiveDashboard, payload.canvas) : payload.canvas);
       setSelectedWidgetId(null);
       setSelectedPosition(findFreePosition(importedTabs[0]?.widgets || []));
       setDragPreview(null);
@@ -535,21 +942,32 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
     setSaving(true);
     try {
       const stamp = todayIsoDate();
-      const updatedDashboards = (config.dashboards || []).map((dashboard, index) =>
-        index === 0 ? { ...dashboard, updatedAt: stamp } : dashboard
+      const syncedConfig = syncActiveDashboard(config, activeDashboardId);
+      const updatedDashboards = (syncedConfig.dashboards || []).map((dashboard) =>
+        dashboard.id === getActiveDashboardId(syncedConfig.dashboards || [], activeDashboardId)
+          ? { ...dashboard, updatedAt: stamp }
+          : dashboard
       );
       const response = await fetch("/api/workspace", {
         method: "PATCH",
         headers: { "content-type": "application/json" },
         body: JSON.stringify({
           dashboards: updatedDashboards,
-          widgetTypes: config.widgetTypes,
-          canvas: config.canvas
+          widgetTypes: syncedConfig.widgetTypes,
+          canvas: syncedConfig.canvas
         })
       });
       const payload = await response.json();
       if (response.ok && payload.workspaceConfig) {
-        setConfig(payload.workspaceConfig);
+        const savedDashboards = (payload.workspaceConfig.dashboards || []).map((dashboard, index) =>
+          normalizeDashboard(dashboard, index === 0 ? payload.workspaceConfig.canvas : undefined)
+        );
+        const savedActiveDashboard = savedDashboards.find((dashboard) => dashboard.id === activeDashboardId) || savedDashboards[0];
+        setConfig({
+          ...payload.workspaceConfig,
+          dashboards: savedDashboards,
+          canvas: savedActiveDashboard ? dashboardCanvasFrom(savedActiveDashboard, payload.workspaceConfig.canvas) : payload.workspaceConfig.canvas
+        });
         setConfigMessage("Saved dashboard config");
       } else {
         setConfigMessage(payload.error || "Save failed");
@@ -559,7 +977,7 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
     } finally {
       setSaving(false);
     }
-  }, [saving, config]);
+  }, [activeDashboardId, saving, config]);
 
   const reopenPanel = useCallback(() => setPanelOpen(true), []);
   const closePanel = useCallback(() => setPanelOpen(false), []);
@@ -626,9 +1044,9 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
           )
         };
       });
-      return { ...prev, canvas: commitTabs(prev.canvas, nextTabs, prevActiveId) };
+      return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, nextTabs, prevActiveId));
     });
-  }, [activeWidgets]);
+  }, [activeDashboardId, activeWidgets]);
   const finishResizeDrag = useCallback(() => {
     if (!resizeDragRef.current) return;
     resizeDragRef.current = null;
@@ -652,9 +1070,9 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
           )
         };
       });
-      return { ...prev, canvas: commitTabs(prev.canvas, nextTabs, prevActiveId) };
+      return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, nextTabs, prevActiveId));
     });
-  }, [selectedWidgetId]);
+  }, [activeDashboardId, selectedWidgetId]);
   const updateSelectedWidgetConfig = useCallback((updates) => {
     if (!selectedWidget) return;
     updateSelectedWidget({ config: { ...(selectedWidget.config || {}), ...updates } });
@@ -670,10 +1088,24 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
       const nextActiveWidgets = nextTabs.find((tab) => tab.id === prevActiveId)?.widgets || [];
       setSelectedWidgetId(null);
       setSelectedPosition(findFreePosition(nextActiveWidgets));
-      return { ...prev, canvas: commitTabs(prev.canvas, nextTabs, prevActiveId) };
+      return commitDashboardCanvas(prev, activeDashboardId, commitTabs(prev.canvas, nextTabs, prevActiveId));
     });
+  }, [activeDashboardId]);
+
+  const closeTemplateGallery = useCallback(() => {
+    setTemplateGalleryOpen(false);
+    setPreviewTemplateId(null);
   }, []);
 
+  useEffect(() => {
+    if (!templateGalleryOpen) return undefined;
+    const handler = (event) => {
+      if (event.key === "Escape") closeTemplateGallery();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [templateGalleryOpen, closeTemplateGallery]);
+
   const builderStyle = panelOpen ? undefined : { gridTemplateColumns: COLLAPSED_GRID_COLUMNS };
 
   return <main className="workspace-builder" style={builderStyle}>
@@ -702,13 +1134,7 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
             <h1>{config.name}</h1>
           </div>
           <div className="workspace-toolbar-actions">
-            <select aria-label="Apply dashboard template" defaultValue="" onChange={(event) => {
-              if (event.target.value) applyTemplate(event.target.value);
-              event.target.value = "";
-            }}>
-              <option value="">Templates</option>
-              {DASHBOARD_TEMPLATES.map((template) => <option key={template.id} value={template.id}>{template.name}</option>)}
-            </select>
+            <button type="button" onClick={() => setTemplateGalleryOpen(true)}>Templates</button>
             <button type="button" onClick={addDashboard}>New Dashboard</button>
             <button type="button" onClick={duplicateDashboard}>Duplicate Dashboard</button>
             <button type="button" onClick={() => importInputRef.current?.click()}>Import</button>
@@ -735,12 +1161,45 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
             <span>Created by</span>
             <span>Last update</span>
             <span>Status</span>
+            <span>Actions</span>
           </div>
-          {dashboards.map((dashboard) => <div className="workspace-table-row" key={dashboard.id}>
-              <span>{dashboard.name}</span>
+          {dashboards.map((dashboard, index) => <div className="workspace-table-row" key={dashboard.id}>
+              <span className="workspace-dashboard-title">
+                {editingDashboardId === dashboard.id ? <input
+                  aria-label={`Rename ${dashboard.name}`}
+                  onBlur={() => setEditingDashboardId(null)}
+                  onChange={(event) => renameDashboard(dashboard.id, event.target.value)}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter" || event.key === "Escape") {
+                      event.currentTarget.blur();
+                    }
+                  }}
+                  value={dashboard.name}
+                /> : <button
+                  className={index === resolvedActiveDashboardIndex ? "active" : ""}
+                  onClick={() => selectDashboard(index)}
+                  type="button"
+                >{dashboard.name}</button>}
+              </span>
               <span>{dashboard.createdBy}</span>
               <span>{dashboard.updatedAt}</span>
-              <code>{dashboard.status}</code>
+              <span>
+                <select
+                  aria-label={`Status for ${dashboard.name}`}
+                  onChange={(event) => updateDashboardStatus(dashboard.id, event.target.value)}
+                  value={dashboard.status}
+                >
+                  <option value="draft">draft</option>
+                  <option value="active">active</option>
+                  <option value="archived">archived</option>
+                </select>
+              </span>
+              <span className="workspace-dashboard-actions">
+                <button type="button" onClick={() => selectDashboard(index)}>Edit</button>
+                <button type="button" onClick={() => setEditingDashboardId(dashboard.id)}>Rename</button>
+                <button type="button" onClick={() => cloneDashboard(index)}>Clone</button>
+                <button type="button" onClick={() => deleteDashboard(index)}>Delete</button>
+              </span>
             </div>)}
         </section>
 
@@ -751,7 +1210,26 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
                 className={tab.id === activeTabId ? "active" : ""}
                 type="button"
                 onClick={() => switchTab(tab.id)}
-              >{tab.name}</button>)}
+              >
+                <span>{tab.name}</span>
+                <span
+                  aria-label={`Delete tab ${tab.name}`}
+                  className="workspace-tab-delete"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    deleteTab(tab.id);
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      deleteTab(tab.id);
+                    }
+                  }}
+                  role="button"
+                  tabIndex={0}
+                >x</span>
+              </button>)}
             <button type="button" onClick={addTab}>New Tab</button>
             <button type="button" onClick={duplicateTab}>Duplicate Tab</button>
           </div>
@@ -806,6 +1284,15 @@ function WorkspaceBuilder({ initialConfig, adapterConfig, integrationAdapter })
         </section>
       </section>
 
+      {templateGalleryOpen ? <TemplateGallery
+        templates={NORMALIZED_TEMPLATES}
+        previewTemplateId={previewTemplateId}
+        onPreview={setPreviewTemplateId}
+        onClose={closeTemplateGallery}
+        onApplyToCurrentTab={applyTemplateToCurrentTab}
+        onCloneAsDashboard={cloneTemplateAsDashboard}
+      /> : null}
+
       {panelOpen ? <aside className="workspace-widget-panel" id="widgets" aria-label="Widget configuration">
         <div className="workspace-panel-title">
           <button type="button" aria-label="Close widget panel" onClick={closePanel}>x</button>