@growthub/cli 0.9.4 → 0.9.6

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/api/workspace/route.js

@@ -6,6 +6,14 @@ import { describePaymentAdapter } from "@/lib/adapters/payments";
 import { describePersistenceAdapter } from "@/lib/adapters/persistence";
 import { groupIntegrationsByLane } from "@/lib/domain/integrations";
 import { buildPortalWorkspace, portalCapabilities } from "@/lib/domain/portal";
+import {
+  describePersistenceMode,
+  readWorkspaceConfig,
+  writeWorkspaceConfig
+} from "@/lib/workspace-config";
+
+const ALLOWED_PATCH_FIELDS = new Set(["dashboards", "widgetTypes", "canvas"]);
+
 async function GET() {
   const integrations = await listAgencyPortalIntegrations();
   const config = readAdapterConfig();
@@ -18,14 +26,66 @@ async function GET() {
   const settings = {
     integrations: groupIntegrationsByLane(integrations)
   };
+  const workspaceConfig = await readWorkspaceConfig();
+  const persistence = describePersistenceMode();
   return NextResponse.json({
     config,
     adapters,
     capabilities: portalCapabilities,
     settings,
-    workspace: buildPortalWorkspace({ config, adapters, integrations: settings.integrations })
+    workspace: buildPortalWorkspace({ config, adapters, integrations: settings.integrations }),
+    workspaceConfig,
+    workspaceConfigPersistence: persistence
   });
 }
-export {
-  GET
-};
+
+async function PATCH(request) {
+  let patch;
+  try {
+    patch = await request.json();
+  } catch {
+    return NextResponse.json({ error: "invalid json body" }, { status: 400 });
+  }
+  if (!patch || typeof patch !== "object" || Array.isArray(patch)) {
+    return NextResponse.json({ error: "patch must be a plain object" }, { status: 400 });
+  }
+  const unknown = Object.keys(patch).filter((key) => !ALLOWED_PATCH_FIELDS.has(key));
+  if (unknown.length) {
+    return NextResponse.json(
+      { error: "patch contains unknown fields", details: unknown, allowed: Array.from(ALLOWED_PATCH_FIELDS) },
+      { status: 400 }
+    );
+  }
+  const sanitized = {};
+  for (const key of ALLOWED_PATCH_FIELDS) {
+    if (Object.prototype.hasOwnProperty.call(patch, key)) {
+      sanitized[key] = patch[key];
+    }
+  }
+  try {
+    const next = await writeWorkspaceConfig(sanitized);
+    return NextResponse.json({ workspaceConfig: next });
+  } catch (error) {
+    if (error.code === "WORKSPACE_PERSISTENCE_READ_ONLY") {
+      return NextResponse.json(
+        {
+          error: "workspace config is read-only in this runtime",
+          reason: error.message,
+          adapter: error.adapter,
+          guidance:
+            "Edit growthub.config.json locally, or set WORKSPACE_CONFIG_ALLOW_FS_WRITE=true on a writable runtime."
+        },
+        { status: 409 }
+      );
+    }
+    if (error.code === "WORKSPACE_PERSISTENCE_PATH_REFUSED") {
+      return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+    if (error.code === "INVALID_WORKSPACE_CONFIG") {
+      return NextResponse.json({ error: error.message, details: error.details }, { status: 400 });
+    }
+    return NextResponse.json({ error: error.message || "failed to write workspace config" }, { status: 500 });
+  }
+}
+
+export { GET, PATCH };

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/globals.css

@@ -544,23 +544,46 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   background: #f3f3f3;
   color: #222;
 }
+.workspace-toolbar-actions select,
+.workspace-widget-settings select {
+  min-height: 32px;
+  border: 1px solid #dcdcdc;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #444;
+  font: inherit;
+  padding: 0 8px;
+}
+.workspace-hidden-input {
+  display: none;
+}
+.workspace-config-message {
+  margin: -8px 0 10px;
+  color: #777;
+  font-size: 12px;
+}
 .workspace-grid {
   position: relative;
   display: grid;
   grid-template-columns: repeat(var(--workspace-columns), minmax(48px, 1fr));
+  grid-template-rows: repeat(var(--workspace-rows), 52px);
   grid-auto-rows: 52px;
   gap: 8px;
-  min-height: 620px;
   padding: 8px;
 }
 .workspace-grid-cell {
+  appearance: none;
   border: 1px solid #ededed;
   border-radius: 7px;
   background: #fdfdfd;
+  cursor: crosshair;
+  padding: 0;
+}
+.workspace-grid-cell:disabled {
+  pointer-events: none;
+  opacity: 1;
 }
 .workspace-add-widget {
-  grid-column: 1 / span 4;
-  grid-row: 1 / span 4;
   z-index: 1;
   display: grid;
   place-items: center;
@@ -572,6 +595,11 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   color: #3d3d3d;
   cursor: pointer;
 }
+.workspace-add-widget.selecting {
+  border-color: #7aa2ff;
+  background: rgba(122, 162, 255, 0.16);
+  box-shadow: inset 0 0 0 1px rgba(84, 125, 255, 0.35);
+}
 .workspace-add-widget small {
   color: #979797;
 }
@@ -593,16 +621,138 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   background: #b9ecff;
 }
 .workspace-widget-preview {
+  position: relative;
   z-index: 2;
   border: 1px solid #dedede;
   border-radius: 7px;
   background: #ffffff;
-  padding: 10px;
+  padding: 12px;
+  cursor: pointer;
+  overflow: hidden;
 }
-.workspace-widget-preview span {
+.workspace-widget-preview.selected {
+  border-color: #3f68ff;
+  box-shadow: inset 0 0 0 1px rgba(63, 104, 255, 0.45);
+}
+.workspace-resize-handle {
+  position: absolute;
+  z-index: 3;
+  width: 13px;
+  height: 13px;
+  border: 1px solid #3f68ff;
+  border-radius: 4px;
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(63, 104, 255, 0.22);
+  padding: 0;
+}
+.workspace-resize-handle.nw {
+  top: -6px;
+  left: -6px;
+  cursor: nwse-resize;
+}
+.workspace-resize-handle.ne {
+  top: -6px;
+  right: -6px;
+  cursor: nesw-resize;
+}
+.workspace-resize-handle.sw {
+  bottom: -6px;
+  left: -6px;
+  cursor: nesw-resize;
+}
+.workspace-resize-handle.se {
+  right: -6px;
+  bottom: -6px;
+  cursor: nwse-resize;
+}
+.workspace-widget-preview-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 22px;
+}
+.workspace-widget-preview-title span,
+.workspace-widget-preview-title button {
   color: #888;
   font-size: 11px;
 }
+.workspace-widget-preview-title strong {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  color: #333;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.workspace-widget-preview-title button {
+  width: 22px;
+  height: 22px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+}
+.workspace-widget-preview:not(.selected) .workspace-widget-preview-title button {
+  visibility: hidden;
+}
+.workspace-view-table {
+  margin-top: 10px;
+  border: 1px solid #eeeeee;
+  border-radius: 4px;
+  overflow: hidden;
+  color: #555;
+  font-size: 12px;
+}
+.workspace-view-table div {
+  display: grid;
+  grid-template-columns: repeat(var(--workspace-view-columns, 2), minmax(0, 1fr));
+  min-height: 25px;
+  border-bottom: 1px solid #eeeeee;
+}
+.workspace-view-table span {
+  min-width: 0;
+  overflow: hidden;
+  padding: 5px 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.workspace-view-table span + span {
+  border-left: 1px solid #eeeeee;
+}
+.workspace-view-table footer {
+  padding: 7px 8px;
+  color: #999;
+}
+.workspace-iframe-preview {
+  height: calc(100% - 34px);
+  min-height: 90px;
+  display: grid;
+  place-items: center;
+  margin-top: 10px;
+  border-radius: 7px;
+  background: #fdfdfd;
+  color: #d54040;
+  font-size: 12px;
+}
+.workspace-rich-text-preview {
+  margin: 18px 10px 0;
+  color: #444;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.workspace-chart-preview {
+  height: calc(100% - 42px);
+  min-height: 96px;
+  display: flex;
+  align-items: end;
+  gap: 8px;
+  padding: 16px 10px 6px;
+}
+.workspace-chart-preview span {
+  flex: 1;
+  border-radius: 5px 5px 0 0;
+  background: #d9e4ff;
+}
 .workspace-widget-panel {
   border-left: 1px solid #e8e8e8;
   padding: 0 12px 16px;
@@ -614,16 +764,28 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   gap: 10px;
   border-bottom: 1px solid #ececec;
 }
-.workspace-panel-title button {
+.workspace-panel-title button,
+.workspace-panel-title > span {
   width: 24px;
   height: 24px;
+  display: grid;
+  place-items: center;
   border: 0;
   border-radius: 5px;
   background: #f1f1f1;
   color: #888;
 }
 .workspace-panel-title strong {
+  min-width: 0;
   font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.workspace-panel-title em {
+  color: #999;
+  font-size: 12px;
+  font-style: normal;
 }
 .workspace-panel-label {
   margin: 14px 0 7px;
@@ -647,7 +809,6 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   padding: 0 8px;
   text-align: left;
 }
-.workspace-widget-types button:first-child,
 .workspace-widget-types button:hover {
   background: #f2f2f2;
 }
@@ -678,6 +839,61 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   color: #777;
   background: #f4f4f4;
 }
+.workspace-widget-settings {
+  display: grid;
+  gap: 14px;
+  padding-top: 14px;
+}
+.workspace-field-stack {
+  display: grid;
+  gap: 12px;
+}
+.workspace-widget-settings label {
+  display: grid;
+  gap: 6px;
+}
+.workspace-widget-settings label span {
+  color: #999;
+  font-size: 11px;
+  font-weight: 700;
+}
+.workspace-widget-settings input,
+.workspace-widget-settings textarea {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  background: #fafafa;
+  color: #444;
+  font: inherit;
+  padding: 8px 9px;
+}
+.workspace-widget-settings textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+.workspace-settings-list {
+  display: grid;
+  gap: 2px;
+}
+.workspace-settings-list div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 32px;
+  border-radius: 5px;
+  color: #666;
+  font-size: 13px;
+  padding: 0 8px;
+}
+.workspace-settings-list div:nth-child(3),
+.workspace-settings-list div:hover {
+  background: #f3f3f3;
+}
+.workspace-settings-list code {
+  color: #aaa;
+  background: transparent;
+}
 
 @media (max-width: 1080px) {
   .workspace-builder {

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

@@ -1,115 +1,21 @@
 import workspaceConfig from "../growthub.config.json";
 import { readAdapterConfig } from "@/lib/adapters/env";
 import { describeIntegrationAdapter } from "@/lib/adapters/integrations";
-import Link from "next/link";
+import { describePersistenceMode } from "@/lib/workspace-config";
+import WorkspaceBuilder from "./workspace-builder.jsx";
 
 function Home() {
   const adapterConfig = readAdapterConfig();
   const integrationAdapter = describeIntegrationAdapter();
-  const canvas = workspaceConfig.canvas;
-  const dashboards = workspaceConfig.dashboards;
-  const widgetTypes = workspaceConfig.widgetTypes;
-
-  return <main className="workspace-builder">
-      <aside className="workspace-rail" aria-label="Workspace navigation">
-        <div className="workspace-brand">
-          <span className="workspace-mark">G</span>
-          <span>Growthub Workspace</span>
-        </div>
-        <nav className="workspace-nav">
-          <a className="active" href="#dashboards">Dashboards</a>
-          <a href="#canvas">Canvas</a>
-          <a href="#widgets">Widgets</a>
-          <a href="#bindings">Bindings</a>
-          <Link href="/settings/integrations">Integrations</Link>
-        </nav>
-        <div className="workspace-rail-status">
-          <span className="status-dot" />
-          {integrationAdapter.authority}
-        </div>
-      </aside>
-
-      <section className="workspace-surface">
-        <header className="workspace-toolbar">
-          <div>
-            <p>Official starter</p>
-            <h1>{workspaceConfig.name}</h1>
-          </div>
-          <div className="workspace-toolbar-actions">
-            <button type="button">New Dashboard</button>
-            <button type="button">Save</button>
-          </div>
-        </header>
-
-        <section className="workspace-table" id="dashboards" aria-label="Dashboards">
-          <div className="workspace-table-heading">
-            <strong>Dashboards</strong>
-            <span>{dashboards.length} template</span>
-          </div>
-          <div className="workspace-table-row workspace-table-head">
-            <span>Title</span>
-            <span>Created by</span>
-            <span>Last update</span>
-            <span>Status</span>
-          </div>
-          {dashboards.map((dashboard) => <div className="workspace-table-row" key={dashboard.id}>
-              <span>{dashboard.name}</span>
-              <span>{dashboard.createdBy}</span>
-              <span>{dashboard.updatedAt}</span>
-              <code>{dashboard.status}</code>
-            </div>)}
-        </section>
-
-        <section className="workspace-canvas" id="canvas" aria-label="Composable dashboard canvas">
-          <div className="workspace-tabs">
-            <button className="active" type="button">{canvas.name}</button>
-            <button type="button">New Tab</button>
-          </div>
-          <div className="workspace-grid" style={{ "--workspace-columns": canvas.layout.columns }}>
-            <button className="workspace-add-widget" type="button">
-              <span className="workspace-widget-icon" aria-hidden="true"><span /></span>
-              <strong>Add widget</strong>
-              <small>Click to add your first widget</small>
-            </button>
-            {Array.from({ length: 96 }).map((_, index) => <span aria-hidden="true" className="workspace-grid-cell" key={index} />)}
-            {canvas.widgets.map((widget) => <article className="workspace-widget-preview" key={widget.id} style={{
-              gridColumn: `${widget.position.x + 1} / span ${widget.position.w}`,
-              gridRow: `${widget.position.y + 1} / span ${widget.position.h}`
-            }}>
-                <span>{widget.kind}</span>
-                <strong>{widget.title}</strong>
-              </article>)}
-          </div>
-        </section>
-      </section>
-
-      <aside className="workspace-widget-panel" id="widgets" aria-label="Widget configuration">
-        <div className="workspace-panel-title">
-          <button type="button" aria-label="Close widget panel">x</button>
-          <strong>New widget</strong>
-        </div>
-        <section>
-          <p className="workspace-panel-label">Widget type</p>
-          <div className="workspace-widget-types">
-            {widgetTypes.map((widget) => <button type="button" key={widget.kind}>
-                <span>{widget.icon}</span>
-                {widget.label}
-              </button>)}
-          </div>
-        </section>
-        <section className="workspace-bindings" id="bindings">
-          <p className="workspace-panel-label">Config bindings</p>
-          {Object.entries(canvas.bindings).map(([key, value]) => <div key={key}>
-              <span>{key}</span>
-              <code>{String(value)}</code>
-            </div>)}
-          <div>
-            <span>integrationAdapter</span>
-            <code>{adapterConfig.integrationAdapter}</code>
-          </div>
-        </section>
-      </aside>
-    </main>;
+  const persistence = describePersistenceMode();
+  return (
+    <WorkspaceBuilder
+      initialConfig={workspaceConfig}
+      adapterConfig={adapterConfig}
+      integrationAdapter={integrationAdapter}
+      persistence={persistence}
+    />
+  );
 }
 
 export {