@growthub/cli 0.10.0 → 0.12.0

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/components/DataModelShell.jsx

@@ -43,12 +43,16 @@ import {
   Zap,
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { HelperSidecar } from "./HelperSidecar.jsx";
+import { WorkspaceRail } from "../../workspace-rail.jsx";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   OBJECT_TYPE_PRESETS,
   addTableField,
   addTableRow,
   appendRowsToTable,
   createTypedBusinessObject,
+  deleteTableRow,
   describeBindingLane,
   effectiveRelations,
   exportTableAsCsv,
@@ -301,8 +305,8 @@ function ObjectViewPicker({ tables, selectedTable, saving, onSelectSource, onSav
           {favoriteObjects.length > 0 && (
             <div className="dm-picker-section">
               <p>Favorites</p>
-              {favoriteObjects.map((table) => (
-                <button key={`favorite-${table.source}`} type="button" className="dm-picker-row" onClick={() => onSelectSource(table.source)}>
+              {favoriteObjects.map((table, favIdx) => (
+                <button key={`favorite-${table.id || table.source}-${favIdx}`} type="button" className="dm-picker-row" onClick={() => onSelectSource(table.source)}>
                   <Pin size={14} />
                   <span>{table.label}</span>
                 </button>
@@ -310,9 +314,13 @@ function ObjectViewPicker({ tables, selectedTable, saving, onSelectSource, onSav
             </div>
           )}
           <div className="dm-picker-tabs">
-            {["all", "objects", "views"].map((item) => (
-              <button key={item} type="button" className={mode === item ? "active" : ""} onClick={() => setMode(item)}>
-                {item}
+            {[
+              { id: "all", label: "All" },
+              { id: "objects", label: "Objects" },
+              { id: "views", label: "Views" },
+            ].map((item) => (
+              <button key={item.id} type="button" className={mode === item.id ? "active" : ""} onClick={() => setMode(item.id)}>
+                {item.label}
               </button>
             ))}
           </div>
@@ -320,8 +328,8 @@ function ObjectViewPicker({ tables, selectedTable, saving, onSelectSource, onSav
             <div className="dm-picker-section">
               <p>Objects</p>
               <div className="dm-picker-scroll">
-                {objects.map((table) => (
-                  <div key={table.source} className={`dm-picker-item${selectedTable?.source === table.source ? " active" : ""}`}>
+                {objects.map((table, objIdx) => (
+                  <div key={`${table.id || table.source}:${objIdx}`} className={`dm-picker-item${selectedTable?.source === table.source ? " active" : ""}`}>
                     <button type="button" className="dm-picker-row" onClick={() => {
                       onSelectSource(table.source);
                       setOpen(false);
@@ -413,36 +421,9 @@ function SaveToast({ saving, message }) {
   return <span className={`dm-toast ${message.startsWith("Error") ? "error" : "ok"}`}>{message}</span>;
 }
 
-function NavRail({ authority, workspaceConfig }) {
-  const branding = workspaceConfig?.branding || {};
-  const workspaceName = branding.name || workspaceConfig?.name || "Growthub Workspace";
-  return (
-    <aside className="workspace-rail" aria-label="Workspace navigation">
-      <div className="workspace-brand">
-        <span
-          className="workspace-mark"
-          style={{
-            background: branding.logoUrl ? undefined : branding.accent || undefined,
-            color: branding.logoUrl ? undefined : textColorForAccent(branding.accent),
-          }}
-        >
-          {branding.logoUrl ? <img src={branding.logoUrl} alt="" /> : workspaceName.slice(0, 1).toUpperCase()}
-        </span>
-        <span>{workspaceName}</span>
-      </div>
-      <nav className="workspace-nav">
-        <Link href="/">Dashboards</Link>
-        <Link className="active" href="/data-model">Data Model</Link>
-        <span className="workspace-nav-static">Management</span>
-        <Link className="workspace-nav-bottom" href="/settings/general">Workspace Settings</Link>
-      </nav>
-      <div className="workspace-rail-status">
-        <span className="status-dot" />
-        {authority || "local-catalog"}
-      </div>
-    </aside>
-  );
-}
+// NavRail extracted to `app/workspace-rail.jsx` (shared across all
+// governed-workspace pages). The legacy local definition has been
+// removed — every surface now renders <WorkspaceRail />.
 
 // ─── Object list (sidebar lives in ./ObjectSidebar.jsx) ───────────────────────
 
@@ -1388,7 +1369,7 @@ function DataModelRecordDrawer({ table, tables, workspaceConfig, rowIndex, row,
   );
 }
 
-function DataModelTableSurface({ table, tables, workspaceConfig, saving, onSave }) {
+function DataModelTableSurface({ table, tables, workspaceConfig, saving, onSave, onOpenThread }) {
   const [selectedRow, setSelectedRow] = useState(null);
   const [fieldName, setFieldName] = useState("");
   const [fieldType, setFieldType] = useState("text");
@@ -1399,10 +1380,23 @@ function DataModelTableSurface({ table, tables, workspaceConfig, saving, onSave
   const [filterDraft, setFilterDraft] = useState({ fieldId: "", operator: "eq", value: "" });
   const [filterTarget, setFilterTarget] = useState("");
   const [menuColumn, setMenuColumn] = useState("");
+  const [selectedRows, setSelectedRows] = useState(() => new Set());
+  const [confirmDeleteSelection, setConfirmDeleteSelection] = useState(false);
+  const [lastSelectedRowIndex, setLastSelectedRowIndex] = useState(null);
+  const [selectMenuOpen, setSelectMenuOpen] = useState(false);
+  const [pageSize, setPageSize] = useState(15);
+  const [pageIndex, setPageIndex] = useState(0);
   const fieldInputRef = useRef(null);
 
   useEffect(() => { if (addingField) fieldInputRef.current?.focus(); }, [addingField]);
-  useEffect(() => { setSelectedRow(null); }, [table.id]);
+  useEffect(() => {
+    setSelectedRow(null);
+    setSelectedRows(new Set());
+    setConfirmDeleteSelection(false);
+    setLastSelectedRowIndex(null);
+    setSelectMenuOpen(false);
+    setPageIndex(0);
+  }, [table.id]);
   useEffect(() => {
     setFieldName("");
     setFieldType("text");
@@ -1430,6 +1424,25 @@ function DataModelTableSurface({ table, tables, workspaceConfig, saving, onSave
     () => (settings.views || []).find((view) => view.id === settings.activeViewId) || null,
     [settings.views, settings.activeViewId]
   );
+  const selectedRowCount = selectedRows.size;
+  const pageCount = Math.max(1, Math.ceil(rowEntries.length / pageSize));
+  const safePageIndex = Math.min(pageIndex, pageCount - 1);
+  const pageStart = safePageIndex * pageSize;
+  const pageEntries = rowEntries.slice(pageStart, pageStart + pageSize);
+  const pageEnd = Math.min(pageStart + pageSize, rowEntries.length);
+  const pageSelectedCount = pageEntries.filter((entry) => selectedRows.has(entry.originalIndex)).length;
+  const allPageSelected = pageEntries.length > 0 && pageSelectedCount === pageEntries.length;
+
+  useEffect(() => {
+    setPageIndex((current) => Math.min(current, pageCount - 1));
+  }, [pageCount]);
+
+  useEffect(() => {
+    setPageIndex(0);
+    setSelectedRow(null);
+    setLastSelectedRowIndex(null);
+    setSelectMenuOpen(false);
+  }, [settings.filter, settings.sort, pageSize]);
 
   function commitField() {
     const name = fieldName.trim();
@@ -1540,6 +1553,78 @@ function DataModelTableSurface({ table, tables, workspaceConfig, saving, onSave
     }));
   }
 
+  function toggleRowSelection(originalIndex, visibleIndex, event) {
+    setConfirmDeleteSelection(false);
+    setSelectMenuOpen(false);
+    setSelectedRows((current) => {
+      const next = new Set(current);
+      if (event?.shiftKey && lastSelectedRowIndex !== null) {
+        const start = Math.min(lastSelectedRowIndex, visibleIndex);
+        const end = Math.max(lastSelectedRowIndex, visibleIndex);
+        rowEntries.slice(start, end + 1).forEach((entry) => next.add(entry.originalIndex));
+      } else if (next.has(originalIndex)) {
+        next.delete(originalIndex);
+      } else {
+        next.add(originalIndex);
+      }
+      return next;
+    });
+    setLastSelectedRowIndex(visibleIndex);
+  }
+
+  function clearRowSelection() {
+    setSelectedRows(new Set());
+    setConfirmDeleteSelection(false);
+    setLastSelectedRowIndex(null);
+    setSelectMenuOpen(false);
+  }
+
+  function selectCurrentPage() {
+    setConfirmDeleteSelection(false);
+    setSelectedRows((current) => {
+      const next = new Set(current);
+      pageEntries.forEach((entry) => next.add(entry.originalIndex));
+      return next;
+    });
+    setLastSelectedRowIndex(pageEntries.length ? pageStart : null);
+    setSelectMenuOpen(false);
+  }
+
+  function toggleCurrentPageSelection() {
+    setConfirmDeleteSelection(false);
+    setSelectedRows((current) => {
+      const next = new Set(current);
+      if (allPageSelected) pageEntries.forEach((entry) => next.delete(entry.originalIndex));
+      else pageEntries.forEach((entry) => next.add(entry.originalIndex));
+      return next;
+    });
+    setLastSelectedRowIndex(pageEntries.length ? pageStart : null);
+    setSelectMenuOpen(false);
+  }
+
+  function selectAllFilteredRows() {
+    setConfirmDeleteSelection(false);
+    setSelectedRows((current) => {
+      const next = new Set(current);
+      rowEntries.forEach((entry) => next.add(entry.originalIndex));
+      return next;
+    });
+    setLastSelectedRowIndex(rowEntries.length ? 0 : null);
+    setSelectMenuOpen(false);
+  }
+
+  function deleteSelectedRows() {
+    if (!selectedRows.size) return;
+    if (!confirmDeleteSelection) {
+      setConfirmDeleteSelection(true);
+      return;
+    }
+    const rowIndexes = Array.from(selectedRows).sort((a, b) => b - a);
+    onSave((config) => rowIndexes.reduce((nextConfig, rowIndex) => deleteTableRow(nextConfig, table, rowIndex), config));
+    setSelectedRow(null);
+    clearRowSelection();
+  }
+
   const selectedEntry = selectedRow === null ? null : rowEntries[selectedRow];
   const selectedRecord = selectedEntry?.row || null;
 
@@ -1553,6 +1638,11 @@ function DataModelTableSurface({ table, tables, workspaceConfig, saving, onSave
       )}
       <div className="dm-db-toolbar">
         <div className="dm-filter-chip-row">
+          {selectedRowCount > 0 && (
+            <span className="dm-filter-chip dm-selection-count">
+              {pluralize(selectedRowCount, "record")} selected
+            </span>
+          )}
           {settings.filter?.clauses?.map((clause) => (
             <button key={`${clause.fieldId}:${clause.operator}`} type="button" className="dm-filter-chip" onClick={() => removeFilter(clause.fieldId)}>
               <LucideIcon name={FIELD_TYPE_ICON_NAMES[settings.types?.[clause.fieldId] || inferFieldType(clause.fieldId)] || "Type"} size={12} />
@@ -1562,9 +1652,24 @@ function DataModelTableSurface({ table, tables, workspaceConfig, saving, onSave
           ))}
         </div>
         <div className="dm-records-actions">
-          <button type="button" className="dm-btn-ghost" onClick={() => setFilterTarget((current) => current === "toolbar" ? "" : "toolbar")}>
-            <Filter size={13} />Filter
-          </button>
+          <span className="dm-filter-anchor">
+            <button type="button" className="dm-btn-ghost" onClick={() => setFilterTarget((current) => current === "toolbar" ? "" : "toolbar")}>
+              <Filter size={13} />Filter
+            </button>
+            {filterTarget === "toolbar" && (
+              <div className="dm-filter-popover dm-filter-popover-toolbar">
+                <StaticSelect value={filterDraft.fieldId} options={visibleColumns.map((column) => ({ value: column, label: column }))} onChange={(next) => setFilterDraft((current) => ({ ...current, fieldId: next }))} />
+                <StaticSelect value={filterDraft.operator} options={FILTER_OPERATOR_OPTIONS.map((item) => ({ value: item.value, label: item.label }))} onChange={(next) => setFilterDraft((current) => ({ ...current, operator: next }))} />
+                {!["isEmpty", "isNotEmpty"].includes(filterDraft.operator) && (
+                  <input value={filterDraft.value} placeholder="Value" onChange={(event) => setFilterDraft((current) => ({ ...current, value: event.target.value }))} />
+                )}
+                <div className="dm-filter-popover-actions">
+                  <button type="button" className="dm-btn-outline" onClick={() => setFilterTarget("")}>Cancel</button>
+                  <button type="button" className="dm-btn-primary-sm" onClick={applyFilter}>Apply</button>
+                </div>
+              </div>
+            )}
+          </span>
           {activeView ? (
             <button type="button" className="dm-btn-ghost" onClick={updateCurrentView}>
               Update view
@@ -1589,21 +1694,16 @@ function DataModelTableSurface({ table, tables, workspaceConfig, saving, onSave
               <Plus size={13} />Add record
             </button>
           )}
-        </div>
-      </div>
-      {filterTarget === "toolbar" && (
-        <div className="dm-filter-popover dm-filter-popover-toolbar">
-          <StaticSelect value={filterDraft.fieldId} options={visibleColumns.map((column) => ({ value: column, label: column }))} onChange={(next) => setFilterDraft((current) => ({ ...current, fieldId: next }))} />
-          <StaticSelect value={filterDraft.operator} options={FILTER_OPERATOR_OPTIONS.map((item) => ({ value: item.value, label: item.label }))} onChange={(next) => setFilterDraft((current) => ({ ...current, operator: next }))} />
-          {!["isEmpty", "isNotEmpty"].includes(filterDraft.operator) && (
-            <input value={filterDraft.value} placeholder="Value" onChange={(event) => setFilterDraft((current) => ({ ...current, value: event.target.value }))} />
+          {table.mutable && selectedRowCount > 0 && (
+            <>
+              <button type="button" className="dm-btn-ghost" disabled={saving} onClick={clearRowSelection}>Cancel selection</button>
+              <button type="button" className="dm-btn-danger-sm" disabled={saving} onClick={deleteSelectedRows}>
+                {confirmDeleteSelection ? `Confirm delete ${selectedRowCount}` : "Delete"}
+              </button>
+            </>
           )}
-          <div className="dm-filter-popover-actions">
-            <button type="button" className="dm-btn-outline" onClick={() => setFilterTarget("")}>Cancel</button>
-            <button type="button" className="dm-btn-primary-sm" onClick={applyFilter}>Apply</button>
-          </div>
         </div>
-      )}
+      </div>
       {csvOpen && (
         <div className="dm-csv-panel">
           <textarea className="dm-csv-textarea" rows={4} value={csvText} onChange={(e) => setCsvText(e.target.value)} placeholder={"Name,Status\nAcme,Active"} />
@@ -1615,10 +1715,30 @@ function DataModelTableSurface({ table, tables, workspaceConfig, saving, onSave
         </div>
       )}
       <div className="dm-db-grid-wrap">
+        <div className="dm-db-grid-scroll">
         <table className="dm-db-grid">
           <thead>
             <tr>
-              <th className="dm-db-rownum">#</th>
+              <th className="dm-db-rownum dm-db-rownum-head">
+                {table.mutable ? (
+                  <div className="dm-row-select-head-wrap">
+                    <button type="button" className="dm-row-select dm-row-select-all" aria-label={allPageSelected ? "Clear page selection" : "Select current page"} aria-pressed={allPageSelected} onClick={(event) => { event.stopPropagation(); toggleCurrentPageSelection(); }}>
+                      <span className="dm-row-select-box" />
+                      <span className="dm-row-number">#</span>
+                    </button>
+                    <button type="button" className="dm-row-select-menu-btn" aria-label="Selection options" aria-expanded={selectMenuOpen} onClick={(event) => { event.stopPropagation(); setSelectMenuOpen((open) => !open); }}>
+                      <ChevronDown size={11} />
+                    </button>
+                    {selectMenuOpen && (
+                      <div className="dm-row-select-menu">
+                        <button type="button" onClick={selectCurrentPage}>Select page</button>
+                        <button type="button" onClick={selectAllFilteredRows}>Select all filtered</button>
+                        <button type="button" disabled={!selectedRowCount} onClick={clearRowSelection}>Clear selection</button>
+                      </div>
+                    )}
+                  </div>
+                ) : "#"}
+              </th>
               {visibleColumns.map((column) => (
                 <th key={column}>
                   <button type="button" className="dm-db-head-btn" onClick={() => setMenuColumn((current) => current === column ? "" : column)}>
@@ -1694,14 +1814,42 @@ function DataModelTableSurface({ table, tables, workspaceConfig, saving, onSave
             </tr>
           </thead>
           <tbody>
-            {rowEntries.map(({ row, originalIndex }, rowIndex) => (
-              <tr key={rowIndex} className={selectedRow === rowIndex ? "selected" : ""} onClick={() => setSelectedRow(rowIndex)}>
-                <td className="dm-db-rownum">{rowIndex + 1}</td>
+            {pageEntries.map(({ row, originalIndex }, rowIndex) => {
+              const visibleIndex = pageStart + rowIndex;
+              const displayIndex = visibleIndex + 1;
+              return (
+              <tr key={`${originalIndex}:${visibleIndex}`} className={`${selectedRow === visibleIndex ? "selected" : ""}${selectedRows.has(originalIndex) ? " multi-selected" : ""}`} onClick={() => setSelectedRow(visibleIndex)}>
+                <td className="dm-db-rownum">
+                  {table.mutable ? (
+                    <button type="button" className="dm-row-select" aria-label={selectedRows.has(originalIndex) ? `Deselect row ${displayIndex}` : `Select row ${displayIndex}`} aria-pressed={selectedRows.has(originalIndex)} onClick={(event) => { event.stopPropagation(); toggleRowSelection(originalIndex, visibleIndex, event); }}>
+                      <span className="dm-row-select-box" />
+                      <span className="dm-row-number">{displayIndex}</span>
+                    </button>
+                  ) : displayIndex}
+                </td>
                 {visibleColumns.map((column) => {
                   const relation = relationForColumn(table, column);
+                  // The Helper Threads object is a normal custom-typed
+                  // governed object. We opt the "open" column into a
+                  // Reopen link based on the stable well-known object id
+                  // so we don't need a dedicated object type.
+                  const isHelperThreadOpenCol = table.objectId === "helper-threads" && column === "open";
                   return (
                   <td key={column}>
-                    {relation ? (
+                    {isHelperThreadOpenCol ? (
+                      <button
+                        type="button"
+                        className="dm-thread-open-link"
+                        data-helper-thread-open=""
+                        data-thread-id={row?.id || ""}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          if (typeof onOpenThread === "function") onOpenThread(row);
+                        }}
+                      >
+                        <Zap size={11} />Reopen
+                      </button>
+                    ) : relation ? (
                       <RelationPickerOrSelect
                         table={table}
                         tables={tables}
@@ -1721,7 +1869,7 @@ function DataModelTableSurface({ table, tables, workspaceConfig, saving, onSave
                 );})}
                 {table.mutable && <td className="dm-db-empty-cell" />}
               </tr>
-            ))}
+            );})}
             {table.mutable && (
               <tr className="dm-db-new-row" onClick={() => onSave((config) => addTableRow(config, table))}>
                 <td className="dm-db-rownum">+</td>
@@ -1730,6 +1878,24 @@ function DataModelTableSurface({ table, tables, workspaceConfig, saving, onSave
             )}
           </tbody>
         </table>
+        </div>
+        <div className="dm-pagination-bar">
+          <span className="dm-pagination-summary">Showing {rowEntries.length ? pageStart + 1 : 0}-{pageEnd} of {rowEntries.length}</span>
+          <div className="dm-pagination-controls">
+            <label className="dm-page-size-control">
+              <span>Rows</span>
+              <select value={pageSize} onChange={(event) => { setPageSize(Number(event.target.value)); setPageIndex(0); }}>
+                <option value={15}>15</option>
+                <option value={25}>25</option>
+                <option value={50}>50</option>
+                <option value={100}>100</option>
+              </select>
+            </label>
+            <button type="button" className="dm-pagination-btn" disabled={safePageIndex === 0} onClick={() => setPageIndex((current) => Math.max(0, current - 1))}>Previous</button>
+            <span className="dm-pagination-page">{safePageIndex + 1} / {pageCount}</span>
+            <button type="button" className="dm-pagination-btn" disabled={safePageIndex >= pageCount - 1} onClick={() => setPageIndex((current) => Math.min(pageCount - 1, current + 1))}>Next</button>
+          </div>
+        </div>
       </div>
       <DataModelRecordDrawer
         table={table}
@@ -1909,8 +2075,101 @@ function AddObjectSidebar({ open, saving, onClose, onCreate, allTables }) {
   );
 }
 
+
+// ─── Command Palette ──────────────────────────────────────────────────────────
+
+function DataModelCommandPalette({ commands, onClose }) {
+  const [query, setQuery] = useState("");
+  const [highlight, setHighlight] = useState(0);
+  const inputRef = useRef(null);
+  useEffect(() => { inputRef.current?.focus(); }, []);
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return commands;
+    return commands.filter((c) =>
+      `${c.label} ${c.group || ""} ${(c.aliases || []).join(" ")}`.toLowerCase().includes(q)
+    );
+  }, [commands, query]);
+  useEffect(() => {
+    setHighlight((v) => Math.min(v, Math.max(0, filtered.length - 1)));
+  }, [filtered.length]);
+  const handleKey = (e) => {
+    if (e.key === "ArrowDown") { e.preventDefault(); setHighlight((v) => Math.min(filtered.length - 1, v + 1)); }
+    else if (e.key === "ArrowUp") { e.preventDefault(); setHighlight((v) => Math.max(0, v - 1)); }
+    else if (e.key === "Enter") {
+      e.preventDefault();
+      const cmd = filtered[highlight];
+      if (cmd && !cmd.disabled) { cmd.run(); onClose(); }
+    } else if (e.key === "Escape") { e.preventDefault(); onClose(); }
+  };
+  const groups = useMemo(() => {
+    const map = new Map();
+    filtered.forEach((c) => {
+      const key = c.group || "General";
+      if (!map.has(key)) map.set(key, []);
+      map.get(key).push(c);
+    });
+    return Array.from(map.entries());
+  }, [filtered]);
+  return (
+    <div className="workspace-command-palette" role="dialog" aria-modal="true" aria-label="Command palette" data-palette="">
+      <div className="workspace-overlay-backdrop" onClick={onClose} aria-hidden="true" />
+      <section className="workspace-command-palette-panel" onKeyDown={handleKey}>
+        <header className="workspace-command-palette-input">
+          <span aria-hidden="true">⌘</span>
+          <input
+            ref={inputRef}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Type a command or ask helper…"
+            aria-label="Command palette search"
+          />
+          <kbd>esc</kbd>
+        </header>
+        <div className="workspace-command-palette-list" role="listbox">
+          {filtered.length === 0 ? <p className="workspace-panel-hint">No matching commands.</p> : null}
+          {groups.map(([group, items]) => (
+            <div key={group} className="workspace-command-palette-group">
+              <p className="workspace-panel-label">{group}</p>
+              {items.map((cmd) => {
+                const gi = filtered.indexOf(cmd);
+                const isHL = gi === highlight;
+                return (
+                  <button
+                    key={cmd.id}
+                    type="button"
+                    role="option"
+                    aria-selected={isHL}
+                    className={"workspace-command-palette-item" + (isHL ? " active" : "") + (cmd.disabled ? " disabled" : "")}
+                    disabled={cmd.disabled}
+                    onMouseEnter={() => setHighlight(gi)}
+                    onClick={() => { if (!cmd.disabled) { cmd.run(); onClose(); } }}
+                  >
+                    <span aria-hidden="true"><Zap size={14} /></span>
+                    <span className="workspace-command-palette-label">{cmd.label}</span>
+                    {cmd.shortcut ? <kbd>{cmd.shortcut}</kbd> : null}
+                  </button>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+        <footer className="workspace-command-palette-footer">
+          <span>↑ ↓ navigate</span><span>↵ run</span><span>esc close</span>
+        </footer>
+      </section>
+    </div>
+  );
+}
+
 // ─── Page ─────────────────────────────────────────────────────────────────────
 
+// Auto-save tempo: hold local edits in memory + localStorage, only PATCH the
+// server after this idle window. Keeps growthub.config.json from rewriting on
+// every keystroke and lets the UI stay snappy on slow disks.
+const SAVE_DEBOUNCE_MS = 20000;
+const LOCAL_CACHE_KEY = "growthub.workspace.dataModel.localDraft.v1";
+
 export default function DataModelShell() {
   const [workspaceConfig, setWorkspaceConfig] = useState(null);
   const [authority, setAuthority] = useState(null);
@@ -1920,6 +2179,43 @@ export default function DataModelShell() {
   const [message, setMessage] = useState("");
   const [selectedSource, setSelectedSource] = useState("");
   const [addOpen, setAddOpen] = useState(false);
+  const [helperOpen, setHelperOpen] = useState(false);
+  const [helperIntent, setHelperIntent] = useState("create_object");
+  const [helperInitialPrompt, setHelperInitialPrompt] = useState("");
+  const [helperInitialThread, setHelperInitialThread] = useState(null);
+  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
+  const pendingPatchRef = useRef({});
+  const saveTimerRef = useRef(null);
+
+  // Cross-page rail entrypoints. Settings / integrations pages render
+  // <WorkspaceRail> without an in-process helper handler — clicking the
+  // pill or a chat thread there navigates to `/data-model?helper=open`
+  // or `/data-model?thread=<id>`. We consume those query params here
+  // exactly once per change and strip them so refreshes are idempotent.
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  useEffect(() => {
+    if (!workspaceConfig) return;
+    const helperParam = searchParams?.get("helper");
+    const threadParam = searchParams?.get("thread");
+    if (!helperParam && !threadParam) return;
+    if (threadParam) {
+      const ht = (workspaceConfig?.dataModel?.objects || []).find((o) => o?.id === "helper-threads");
+      const row = (ht?.rows || []).find((r) => r?.id === threadParam);
+      if (row) {
+        setHelperInitialThread(row);
+        setHelperOpen(true);
+      }
+    } else if (helperParam === "open") {
+      setHelperInitialThread(null);
+      setHelperOpen(true);
+    }
+    const next = new URLSearchParams(searchParams.toString());
+    next.delete("helper");
+    next.delete("thread");
+    const query = next.toString();
+    router.replace(query ? `/data-model?${query}` : "/data-model", { scroll: false });
+  }, [workspaceConfig, searchParams, router]);
 
   const load = useCallback(async () => {
     setLoading(true);
@@ -1939,6 +2235,40 @@ export default function DataModelShell() {
 
   useEffect(() => { load(); }, [load]);
 
+  // Cmd+K opens command palette. Slash opens it too, but only when no
+  // editable element is focused — matches the dashboard builder.
+  useEffect(() => {
+    const handler = (e) => {
+      if ((e.metaKey || e.ctrlKey) && (e.key === "k" || e.key === "K")) {
+        e.preventDefault();
+        setCommandPaletteOpen((v) => !v);
+        return;
+      }
+      if (e.key === "/" && !commandPaletteOpen && !addOpen && !helperOpen) {
+        const t = e.target;
+        const editable = t instanceof HTMLElement && (
+          t.tagName === "INPUT" ||
+          t.tagName === "TEXTAREA" ||
+          t.tagName === "SELECT" ||
+          t.isContentEditable
+        );
+        if (!editable) {
+          e.preventDefault();
+          setCommandPaletteOpen(true);
+          return;
+        }
+      }
+      if (e.key === "Escape" && commandPaletteOpen) setCommandPaletteOpen(false);
+    };
+    const railOpen = () => setCommandPaletteOpen(true);
+    window.addEventListener("keydown", handler);
+    window.addEventListener("growthub:open-command-palette", railOpen);
+    return () => {
+      window.removeEventListener("keydown", handler);
+      window.removeEventListener("growthub:open-command-palette", railOpen);
+    };
+  }, [commandPaletteOpen, addOpen, helperOpen]);
+
   const tables = useMemo(
     () => (workspaceConfig ? listWorkspaceDataModelTables(workspaceConfig) : []),
     [workspaceConfig],
@@ -1950,16 +2280,19 @@ export default function DataModelShell() {
     if (!selectedSource && tables[0]) setSelectedSource(tables[0].source);
   }, [selectedSource, tables]);
 
-  const save = useCallback(async (mutate) => {
-    if (!workspaceConfig) return;
+  // Flush any accumulated patch keys to the server. Called by the debounce
+  // timer and on visibilitychange/beforeunload so no local edit is lost.
+  const flushPendingPatch = useCallback(async () => {
+    const patch = pendingPatchRef.current;
+    pendingPatchRef.current = {};
+    if (saveTimerRef.current) {
+      clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = null;
+    }
+    if (Object.keys(patch).length === 0) return;
     setSaving(true);
     setMessage("");
-    const next = mutate(workspaceConfig);
     try {
-      const patch = {};
-      for (const key of ["dashboards", "widgetTypes", "canvas", "dataModel"]) {
-        if (next[key] !== workspaceConfig[key]) patch[key] = next[key];
-      }
       const res = await fetch("/api/workspace", {
         method: "PATCH",
         headers: { "content-type": "application/json" },
@@ -1969,12 +2302,58 @@ export default function DataModelShell() {
       if (!res.ok) throw new Error(payload.error || "Save failed");
       setWorkspaceConfig(payload.workspaceConfig);
       setMessage("Saved");
+      try { window.localStorage.removeItem(LOCAL_CACHE_KEY); } catch {}
     } catch (err) {
       setMessage(`Error: ${err.message || "Save failed"}`);
     } finally {
       setSaving(false);
     }
-  }, [workspaceConfig]);
+  }, []);
+
+  // Mutate-in-memory immediately so the UI feels instant, persist a draft to
+  // localStorage every change, and only PATCH the server after SAVE_DEBOUNCE_MS
+  // of idleness. Sandbox-environment objects' lastRunId/lastResponse fields
+  // bypass the debounce (they need durability for run telemetry).
+  const save = useCallback((mutate) => {
+    setWorkspaceConfig((current) => {
+      if (!current) return current;
+      const next = mutate(current);
+      const patch = pendingPatchRef.current;
+      let touchedSandboxRun = false;
+      for (const key of ["dashboards", "widgetTypes", "canvas", "dataModel"]) {
+        if (next[key] !== current[key]) patch[key] = next[key];
+      }
+      try {
+        const sandboxKey = JSON.stringify((next.dataModel?.objects || []).find((o) => o.objectType === "sandbox-environment")?.rows || []);
+        const prevSandboxKey = JSON.stringify((current.dataModel?.objects || []).find((o) => o.objectType === "sandbox-environment")?.rows || []);
+        if (sandboxKey !== prevSandboxKey) touchedSandboxRun = true;
+      } catch {}
+      try {
+        window.localStorage.setItem(LOCAL_CACHE_KEY, JSON.stringify({ savedAt: Date.now(), patch }));
+      } catch {}
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+      if (touchedSandboxRun) {
+        // immediate flush: durable sandbox run state must persist
+        Promise.resolve().then(flushPendingPatch);
+      } else {
+        saveTimerRef.current = setTimeout(flushPendingPatch, SAVE_DEBOUNCE_MS);
+      }
+      return next;
+    });
+  }, [flushPendingPatch]);
+
+  // Flush before navigation / tab close so the 20s window never silently drops a draft.
+  useEffect(() => {
+    function handleBeforeUnload() { flushPendingPatch(); }
+    function handleVisibility() { if (document.visibilityState === "hidden") flushPendingPatch(); }
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      document.removeEventListener("visibilitychange", handleVisibility);
+      flushPendingPatch();
+    };
+  }, [flushPendingPatch]);
 
   const createObject = useCallback(({ name, objectType, icon }) => {
     save((config) => createTypedBusinessObject(config, { name, objectType, icon }));
@@ -1982,15 +2361,162 @@ export default function DataModelShell() {
     setAddOpen(false);
   }, [save]);
 
+  const INTENT_FOR_TYPE = {
+    people: "edit_view",
+    tasks: "edit_view",
+    "api-registry": "register_api",
+    "sandbox-environment": "create_object",
+    "data-source": "explain",
+    custom: "create_object",
+  };
+
+  // Starter prompt seeded into the textarea when the user asks the helper
+  // about a specific Data Model object. Non-technical users see context-
+  // appropriate guidance instead of an empty box.
+  const STARTER_PROMPT_FOR_TYPE = {
+    people: (name) => `Improve the "${name}" people list. Suggest fields and a view layout that fit a sales / outreach workflow.`,
+    tasks: (name) => `Improve the "${name}" tasks board. Suggest status fields, owners, and a sensible view layout.`,
+    "api-registry": (name) => `Register a new API integration for "${name}". Draft the row with integration label, base URL, endpoint, auth header, and method.`,
+    "sandbox-environment": (name) => `Configure the "${name}" sandbox environment. Suggest runtime, prompt, instructions, and lifecycle status fields.`,
+    "data-source": (name) => `Explain how the "${name}" data source is wired up and what changes would make it more reliable.`,
+    custom: (name) => `Improve the "${name}" object. Suggest fields, relations, and starter rows that fit my use case.`,
+  };
+
+  const openHelperForTable = (table) => {
+    const intent = INTENT_FOR_TYPE[table?.objectType] || "create_object";
+    const fill = STARTER_PROMPT_FOR_TYPE[table?.objectType];
+    setHelperIntent(intent);
+    setHelperInitialPrompt(fill ? fill(table?.label || table?.source || "this object") : "");
+    setHelperInitialThread(null);
+    setHelperOpen(true);
+  };
+
+  const openHelperWith = (intent, prompt) => {
+    setHelperIntent(intent);
+    setHelperInitialPrompt(prompt || "");
+    setHelperInitialThread(null);
+    setHelperOpen(true);
+  };
+
+  // Reopen a helper thread row from the Helper Threads Data Model object.
+  // The row already holds the full prior turn (intent, prompt, proposals,
+  // warnings, receipts) — passing it through initialThread rehydrates the
+  // sidecar state so the user reads the conversation exactly where it ended.
+  const openHelperThreadFromRow = (row) => {
+    if (!row || !row.id) return;
+    const proposals = Array.isArray(row.proposals) ? row.proposals : [];
+    const warnings = Array.isArray(row.warnings) ? row.warnings : [];
+    const result = {
+      summary: row.summary || "",
+      proposals,
+      warnings,
+      receipts: row.receipts || null,
+      threadId: row.id,
+    };
+    setHelperIntent(row.intent || "explain");
+    setHelperInitialPrompt(typeof row.prompt === "string" ? row.prompt : "");
+    setHelperInitialThread({
+      id: row.id,
+      intent: row.intent || "explain",
+      prompt: typeof row.prompt === "string" ? row.prompt : "",
+      result,
+    });
+    setHelperOpen(true);
+  };
+
+  const paletteCommands = [
+    {
+      id: "helper.build_dashboard", group: "Ask helper", label: "Ask helper — build a dashboard",
+      run: () => openHelperWith("build_dashboard", "Draft a dashboard for a local agency with pipeline stages, weekly revenue, and a leaderboard widget.")
+    },
+    {
+      id: "helper.create_object", group: "Ask helper", label: "Ask helper — create a custom object",
+      run: () => openHelperWith("create_object", "Create a custom object for tracking client engagements: name, owner, status, value, next step.")
+    },
+    {
+      id: "helper.register_api", group: "Ask helper", label: "Ask helper — register an API",
+      run: () => openHelperWith("register_api", "Register an API integration: integration label, base URL, endpoint, auth header, and method.")
+    },
+    {
+      id: "helper.repair", group: "Ask helper", label: "Ask helper — repair workspace",
+      run: () => openHelperWith("repair", "Inspect this workspace for missing references, broken bindings, or incomplete views. Propose the smallest fix for each issue.")
+    },
+    {
+      id: "helper.explain", group: "Ask helper", label: "Ask helper — explain this workspace",
+      run: () => openHelperWith("explain", "Explain what this workspace contains and how the objects, dashboards, and bindings relate to each other.")
+    },
+    {
+      id: "object.new", group: "Data Model", label: "New object",
+      run: () => setAddOpen(true)
+    },
+    {
+      id: "nav.dashboards", group: "Navigation", label: "Go to Dashboards",
+      run: () => { window.location.href = "/"; }
+    },
+    {
+      id: "nav.settings", group: "Navigation", label: "Go to Settings",
+      run: () => { window.location.href = "/settings/general"; }
+    },
+  ];
+
   return (
     <main className="workspace-builder workspace-settings-page">
-      <NavRail authority={authority} workspaceConfig={workspaceConfig} />
+      <WorkspaceRail
+        authority={authority}
+        workspaceConfig={workspaceConfig}
+        helperOpen={helperOpen}
+        onOpenHelper={() => {
+          if (helperOpen) { setHelperOpen(false); return; }
+          // Rail pill ALWAYS opens a fresh thread (empty state, chip
+          // stack visible). Reopening a specific conversation goes
+          // through onOpenThread from the Chat tab.
+          setHelperInitialThread(null);
+          setHelperIntent("create_object");
+          setHelperInitialPrompt("");
+          setHelperOpen(true);
+        }}
+        onOpenThread={(row) => {
+          setHelperInitialThread(row);
+          setHelperOpen(true);
+        }}
+        onConfigChange={(next) => {
+          if (typeof setWorkspaceConfig === "function") setWorkspaceConfig(next);
+        }}
+      />
 
       <section className="workspace-surface">
         <header className="workspace-toolbar">
-          <div><p>Workspace</p><h1>Data Model</h1></div>
+          {selectedTable ? (
+            <div className="workspace-toolbar-object">
+              <div className="workspace-toolbar-object-title">
+                <span className="workspace-toolbar-object-icon" aria-hidden="true">
+                  <LucideIcon
+                    name={selectedTable.icon || OBJECT_TYPE_PRESETS[selectedTable.objectType]?.icon || "Database"}
+                    size={16}
+                  />
+                </span>
+                <h1>{selectedTable.label}</h1>
+              </div>
+              <p className="workspace-toolbar-object-meta">
+                {(selectedTable.columns?.length || 0)} {(selectedTable.columns?.length || 0) === 1 ? "Field" : "Fields"}
+                {" · "}
+                {(selectedTable.rows?.length || 0)} {(selectedTable.rows?.length || 0) === 1 ? "Record" : "Records"}
+              </p>
+            </div>
+          ) : (
+            <div><p>Workspace</p><h1>Data Model</h1></div>
+          )}
           <div className="workspace-toolbar-actions">
             <SaveToast saving={saving} message={message} />
+            {selectedTable && (
+              <ObjectViewPicker
+                tables={tables}
+                selectedTable={selectedTable}
+                saving={saving}
+                onSelectSource={setSelectedSource}
+                onSave={save}
+              />
+            )}
             <button type="button" className="dm-btn-primary" onClick={() => setAddOpen(true)}>
               <Plus size={14} />New object
             </button>
@@ -2005,6 +2531,55 @@ export default function DataModelShell() {
           allTables={tables}
         />
 
+        <HelperSidecar
+          open={helperOpen}
+          onClose={() => setHelperOpen(false)}
+          workspaceConfig={workspaceConfig}
+          initialIntent={helperIntent}
+          initialPrompt={helperInitialPrompt}
+          initialThread={helperInitialThread}
+          onOpenArtifact={(target) => {
+            // Close the chat and route the user to the artifact they
+            // just created — data-model object/row stays in-page, a
+            // dashboard navigates to the workspace home with a query
+            // param the builder reads to focus it.
+            if (!target) return;
+            if (target.surface === "data-model" && target.source) {
+              setSelectedSource(target.source);
+              setHelperOpen(false);
+              return;
+            }
+            if (target.surface === "dashboard" && target.dashboardId) {
+              setHelperOpen(false);
+              router.push(`/?dashboard=${encodeURIComponent(target.dashboardId)}`);
+            }
+          }}
+          onApplied={(updatedConfig) => {
+            // Anchor the user on the most recently created/updated Data Model
+            // object so a helper-driven object.create lands on the surface
+            // instead of needing a manual click.
+            setWorkspaceConfig(updatedConfig);
+            const nextObjects = updatedConfig?.dataModel?.objects || [];
+            const prevIds = new Set(
+              (workspaceConfig?.dataModel?.objects || []).map((o) => o?.id).filter(Boolean)
+            );
+            const newlyCreated = nextObjects.find((o) => o?.id && !prevIds.has(o.id));
+            const nextSource = (newlyCreated?.label || newlyCreated?.id)
+              ? (newlyCreated.label || newlyCreated.id)
+              : selectedSource;
+            if (nextSource && nextSource !== selectedSource) {
+              setSelectedSource(nextSource);
+            }
+          }}
+        />
+
+        {commandPaletteOpen && (
+          <DataModelCommandPalette
+            commands={paletteCommands}
+            onClose={() => setCommandPaletteOpen(false)}
+          />
+        )}
+
         {loading && <div className="dm-loading">Loading workspace…</div>}
 
         {error && (
@@ -2019,13 +2594,8 @@ export default function DataModelShell() {
         {!loading && !error && tables.length > 0 && (
           selectedTable && (
             <section className="dm-detail-v2 dm-detail-v3">
-              <div className="dm-detail-v2-head dm-detail-v3-head">
-                <div className="dm-detail-v2-title">
-                  <ObjectViewPicker tables={tables} selectedTable={selectedTable} saving={saving} onSelectSource={setSelectedSource} onSave={save} />
-                </div>
-                <SourceValidationBanner table={selectedTable} />
-              </div>
-              <DataModelTableSurface workspaceConfig={workspaceConfig} table={selectedTable} tables={tables} saving={saving} onSave={save} />
+              <SourceValidationBanner table={selectedTable} />
+              <DataModelTableSurface workspaceConfig={workspaceConfig} table={selectedTable} tables={tables} saving={saving} onSave={save} onOpenThread={openHelperThreadFromRow} />
             </section>
           )
         )}
@@ -2034,10 +2604,22 @@ export default function DataModelShell() {
           <div className="dm-page-empty">
             <Database size={32} />
             <strong>No objects yet</strong>
-            <p>Create a Data Source, API Registry, People, Tasks, or Custom object to get started.</p>
-            <button type="button" className="dm-btn-primary" onClick={() => setAddOpen(true)}>
-              <Plus size={14} />New object
-            </button>
+            <p>Create your first Data Source, API Registry, People list, or custom object to get started.</p>
+            <div className="dm-page-empty-actions">
+              <button type="button" className="dm-btn-primary" onClick={() => setAddOpen(true)}>
+                <Plus size={14} />New object
+              </button>
+              <button
+                type="button"
+                className="dm-btn-outline"
+                onClick={() => openHelperWith(
+                  "create_object",
+                  "I run a local agency. Create my first business object: a client list with name, owner, status, deal value, and next step. Then suggest a starter dashboard."
+                )}
+              >
+                <Zap size={14} />Try the helper
+              </button>
+            </div>
           </div>
         )}
       </section>