@growthub/cli 0.9.12 → 0.9.13

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/settings/apis-webhooks/apis-webhooks-form.jsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { Eye, EyeOff, Link as LinkIcon, Plus, X } from "lucide-react";
+import { useState } from "react";
+
+const PAGE_SIZE = 10;
+
+function blankRef(kind) {
+  return {
+    id: kind === "webhook" ? "webhook-ref" : "api-ref",
+    kind,
+    endpointRef: "",
+    value: "",
+    url: "",
+    showValue: false,
+    showUrl: false,
+    hasSecret: false,
+    status: "not-configured"
+  };
+}
+
+function normalizeRef(item, index) {
+  const kind = item.kind === "webhook" ? "webhook" : "api";
+  return {
+    id: item.id || `${kind}-ref-${index + 1}`,
+    kind,
+    endpointRef: item.endpointRef || "",
+    value: "",
+    url: item.url || "",
+    showValue: false,
+    showUrl: Boolean(item.url),
+    hasSecret: item.hasSecret === true,
+    status: item.status || "not-configured"
+  };
+}
+
+function displayKind(kind) {
+  return kind === "webhook" ? "Webhook" : "API";
+}
+
+function SecretValue({ item, onChange, onToggle }) {
+  const hiddenValue = item.hasSecret && !item.showValue;
+  return <div className="workspace-secret-field">
+    <input
+      aria-label={`${displayKind(item.kind)} value`}
+      autoComplete="off"
+      placeholder={item.hasSecret ? "••••••••••••" : "Value"}
+      type={hiddenValue ? "password" : "text"}
+      value={hiddenValue ? "************" : item.value}
+      onChange={(event) => onChange(event.target.value)}
+      onFocus={() => {
+        if (hiddenValue) onToggle(true);
+      }}
+    />
+    <button type="button" aria-label={item.showValue ? "Hide value" : "Show value"} onClick={() => onToggle(!item.showValue)}>
+      {item.showValue ? <EyeOff size={15} /> : <Eye size={15} />}
+    </button>
+  </div>;
+}
+
+function ConfigRow({ item, index, copiedKey, onCopyKey, onRemove, onUpdate }) {
+  const configured = item.hasSecret || item.status === "configured";
+  const keyText = item.endpointRef || "";
+  return <article className="workspace-secret-row">
+    <h3>{displayKind(item.kind)}</h3>
+    <div className="workspace-secret-row-main">
+      {configured && keyText ? <button
+          type="button"
+          className="workspace-key-field"
+          data-tooltip={copiedKey === item.id ? "Copied" : "Click to copy"}
+          onClick={() => onCopyKey(item)}
+        >{keyText}</button>
+        : <input
+          aria-label={`${displayKind(item.kind)} key`}
+          value={item.endpointRef}
+          onChange={(event) => onUpdate(index, { endpointRef: event.target.value })}
+          placeholder="Key"
+        />}
+      <SecretValue
+        item={item}
+        onChange={(value) => onUpdate(index, { value, hasSecret: Boolean(value) || item.hasSecret, showValue: true })}
+        onToggle={(showValue) => onUpdate(index, { showValue })}
+      />
+      <button type="button" className="workspace-icon-button" aria-label={`Remove ${displayKind(item.kind)} ref`} onClick={() => onRemove(index)}>
+        <X size={15} />
+      </button>
+    </div>
+    {item.showUrl || item.url ? <label className="workspace-url-field">
+      <span>{displayKind(item.kind)} URL</span>
+      <input
+        value={item.url}
+        onChange={(event) => onUpdate(index, { url: event.target.value, showUrl: true })}
+        placeholder={item.kind === "webhook" ? "Webhook URL" : "API URL"}
+      />
+    </label> : <button type="button" className="workspace-link-button" onClick={() => onUpdate(index, { showUrl: true })}>
+      <LinkIcon size={13} aria-hidden="true" />
+      <span>Add optional {displayKind(item.kind)} URL</span>
+    </button>}
+  </article>;
+}
+
+function ApisWebhooksForm({ persistence, refs }) {
+  const initialRefs = refs.length ? refs.map(normalizeRef) : [blankRef("api"), blankRef("webhook")];
+  const [items, setItems] = useState(initialRefs);
+  const [message, setMessage] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [copiedKey, setCopiedKey] = useState("");
+  const [page, setPage] = useState(0);
+  const canSave = persistence?.canSave !== false;
+  const pageCount = Math.max(1, Math.ceil(items.length / PAGE_SIZE));
+  const activePage = Math.min(page, pageCount - 1);
+  const visibleItems = items.slice(activePage * PAGE_SIZE, activePage * PAGE_SIZE + PAGE_SIZE);
+
+  function updateItem(index, patch) {
+    setItems((current) => current.map((item, itemIndex) => itemIndex === index ? { ...item, ...patch } : item));
+  }
+
+  function removeItem(index) {
+    setItems((current) => current.filter((_, itemIndex) => itemIndex !== index));
+  }
+
+  async function copyKey(item) {
+    const value = item.endpointRef || "";
+    if (!value) return;
+    await navigator.clipboard?.writeText(value);
+    setCopiedKey(item.id);
+    window.setTimeout(() => setCopiedKey(""), 1400);
+  }
+
+  async function save(event) {
+    event.preventDefault();
+    if (!canSave || saving) return;
+    setSaving(true);
+    setMessage("");
+    try {
+      const response = await fetch("/api/settings/apis-webhooks", {
+        method: "PATCH",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          refs: items.map((item) => ({
+            id: item.id,
+            kind: item.kind,
+            endpointRef: item.endpointRef,
+            url: item.url,
+            status: item.endpointRef || item.value ? "configured" : "not-configured",
+            hasSecret: Boolean(item.value) || item.hasSecret
+          }))
+        })
+      });
+      const payload = await response.json();
+      if (!response.ok) throw new Error(payload.guidance || payload.error || "Failed to save API/Webhook refs");
+      setItems(payload.refs.length ? payload.refs.map(normalizeRef) : [blankRef("api"), blankRef("webhook")]);
+      setMessage("Saved.");
+    } catch (error) {
+      setMessage(error.message || "Failed to save.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return <form className="workspace-settings-card" onSubmit={save}>
+    <div className="workspace-settings-card-heading">
+      <div>
+        <h2>APIs & Webhooks</h2>
+        <p>Save secret references for this workspace. Values are hidden after save.</p>
+      </div>
+      <div className="workspace-settings-top-actions">
+        <button type="button" className="workspace-secondary-button" onClick={() => setItems((current) => [...current, blankRef("api")])}>
+          <Plus size={13} aria-hidden="true" />
+          <span>Add API key</span>
+        </button>
+        <button type="button" className="workspace-secondary-button" onClick={() => setItems((current) => [...current, blankRef("webhook")])}>
+          <Plus size={13} aria-hidden="true" />
+          <span>Add webhook key</span>
+        </button>
+        <button type="submit" disabled={!canSave || saving}>{saving ? "Saving..." : "Save"}</button>
+      </div>
+    </div>
+
+    <section className="workspace-settings-section">
+      <div className="workspace-secret-list">
+        {visibleItems.map((item, visibleIndex) => {
+          const index = activePage * PAGE_SIZE + visibleIndex;
+          return <ConfigRow
+          copiedKey={copiedKey}
+          index={index}
+          item={item}
+          key={`${item.id}:${index}`}
+          onCopyKey={copyKey}
+          onRemove={removeItem}
+          onUpdate={updateItem}
+        />;
+        })}
+      </div>
+      {pageCount > 1 ? <div className="workspace-pagination">
+        <button type="button" disabled={activePage === 0} onClick={() => setPage((value) => Math.max(0, value - 1))}>Previous</button>
+        <span>{activePage + 1} / {pageCount}</span>
+        <button type="button" disabled={activePage >= pageCount - 1} onClick={() => setPage((value) => Math.min(pageCount - 1, value + 1))}>Next</button>
+      </div> : null}
+    </section>
+
+    {message ? <p className="workspace-settings-message">{message}</p> : null}
+  </form>;
+}
+
+export {
+  ApisWebhooksForm
+};

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

@@ -0,0 +1,19 @@
+import { SettingsShell } from "../settings-shell.jsx";
+import { readAdapterConfig } from "@/lib/adapters/env";
+import { describePersistenceMode, readWorkspaceConfig } from "@/lib/workspace-config";
+import { ApisWebhooksForm } from "./apis-webhooks-form.jsx";
+
+async function ApisWebhooksSettingsPage() {
+  const config = readAdapterConfig();
+  const workspaceConfig = await readWorkspaceConfig();
+  const integrations = Array.isArray(workspaceConfig.integrations) ? workspaceConfig.integrations : [];
+  const refs = integrations.filter((item) => item?.sourceType === "custom-api-webhooks");
+
+  return <SettingsShell active="/settings/apis-webhooks" eyebrow="Settings" title="APIs & Webhooks">
+    <ApisWebhooksForm adapter={config.integrationAdapter} persistence={describePersistenceMode()} refs={refs} />
+  </SettingsShell>;
+}
+
+export {
+  ApisWebhooksSettingsPage as default
+};

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

@@ -0,0 +1,43 @@
+"use client";
+
+import { useState } from "react";
+
+const PAGE_SIZE = 10;
+
+function AppsList({ apps }) {
+  const [page, setPage] = useState(0);
+  const pageCount = Math.max(1, Math.ceil(apps.length / PAGE_SIZE));
+  const activePage = Math.min(page, pageCount - 1);
+  const visibleApps = apps.slice(activePage * PAGE_SIZE, activePage * PAGE_SIZE + PAGE_SIZE);
+
+  if (!apps.length) {
+    return <p className="workspace-settings-empty">No workspace apps are declared on the active config.</p>;
+  }
+
+  return <div className="workspace-paginated-list">
+    <div className="workspace-app-list bounded">
+      {visibleApps.map((item, index) => <article className="workspace-app-row" key={item.id || index}>
+        <span className="workspace-provider-mark">{item.icon || item.label?.slice(0, 1) || item.name?.slice(0, 1) || "A"}</span>
+        <div>
+          <strong>{item.label || item.name || item.id}</strong>
+          <p>{item.description || "Workspace app metadata from the active config."}</p>
+          <div className="workspace-integration-meta">
+            <span>{item.provider || "workspace"}</span>
+            <span>{item.source || "config"}</span>
+            <span>{item.authority || "read-only"}</span>
+          </div>
+        </div>
+        <span className={`workspace-integration-status ${item.status || "available"}`}>{item.status || "available"}</span>
+      </article>)}
+    </div>
+    {pageCount > 1 ? <div className="workspace-pagination">
+      <button type="button" disabled={activePage === 0} onClick={() => setPage((value) => Math.max(0, value - 1))}>Previous</button>
+      <span>{activePage + 1} / {pageCount}</span>
+      <button type="button" disabled={activePage >= pageCount - 1} onClick={() => setPage((value) => Math.min(pageCount - 1, value + 1))}>Next</button>
+    </div> : null}
+  </div>;
+}
+
+export {
+  AppsList
+};

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

@@ -0,0 +1,109 @@
+import { SettingsShell } from "../settings-shell.jsx";
+import { promises as fs } from "node:fs";
+import path from "node:path";
+import { readWorkspaceConfig } from "@/lib/workspace-config";
+import { AppsList } from "./apps-list.jsx";
+
+async function readForkMetadata() {
+  try {
+    const forkPath = path.resolve(process.cwd(), "../..", ".growthub-fork", "fork.json");
+    return JSON.parse(await fs.readFile(forkPath, "utf8"));
+  } catch {
+    return null;
+  }
+}
+
+async function pathExists(filePath) {
+  try {
+    await fs.access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function readWorkspaceDirectoryApps() {
+  const appsRoot = path.dirname(process.cwd());
+  let entries = [];
+  try {
+    entries = await fs.readdir(appsRoot, { withFileTypes: true });
+  } catch {
+    return [];
+  }
+
+  const apps = [];
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+    const appPath = path.join(appsRoot, entry.name);
+    const [hasPackage, hasNext, hasVite] = await Promise.all([
+      pathExists(path.join(appPath, "package.json")),
+      pathExists(path.join(appPath, "next.config.js")),
+      pathExists(path.join(appPath, "vite.config.js"))
+    ]);
+    if (!hasPackage && !hasNext && !hasVite) continue;
+    let packageName = "";
+    if (hasPackage) {
+      try {
+        const pkg = JSON.parse(await fs.readFile(path.join(appPath, "package.json"), "utf8"));
+        packageName = pkg.name || "";
+      } catch {
+        packageName = "";
+      }
+    }
+    apps.push({
+      id: entry.name,
+      name: entry.name === "workspace" ? "Workspace" : entry.name,
+      description: entry.name === "workspace" ? "Default Growthub workspace app." : "Workspace app discovered from the apps directory.",
+      provider: packageName || "local",
+      source: `apps/${entry.name}`,
+      authority: "directory",
+      status: "available"
+    });
+  }
+  return apps.sort((a, b) => a.id.localeCompare(b.id));
+}
+
+async function AppsSettingsPage() {
+  const workspaceConfig = await readWorkspaceConfig();
+  const fork = await readForkMetadata();
+  const directoryApps = await readWorkspaceDirectoryApps();
+  const configApps = Array.isArray(workspaceConfig.apps) ? workspaceConfig.apps : [];
+  const appsById = new Map(directoryApps.map((item) => [item.id, item]));
+  for (const item of configApps) {
+    const id = item.id || item.name;
+    if (!id) continue;
+    appsById.set(id, { ...(appsById.get(id) || {}), ...item });
+  }
+  const apps = Array.from(appsById.values());
+  const bridge = workspaceConfig.bridge && typeof workspaceConfig.bridge === "object" ? workspaceConfig.bridge : null;
+
+  return <SettingsShell active="/settings/apps" eyebrow="Settings" title="Apps">
+    <section className="workspace-settings-card workspace-apps-card">
+      <div className="workspace-settings-card-heading">
+        <div>
+          <h2>Apps</h2>
+          <p>Read-only workspace app, bridge, and fork metadata already available to this workspace.</p>
+        </div>
+      </div>
+
+      <section className="workspace-settings-section workspace-apps-linkage-section">
+        <h3>Workspace Linkage</h3>
+        <div className="workspace-settings-kv">
+          <span>Workspace</span><code>{workspaceConfig.id || "workspace-builder-default"}</code>
+          <span>Fork</span><code>{fork?.forkId || "local fork metadata unavailable"}</code>
+          <span>Kit</span><code>{fork?.kitId || workspaceConfig.provenance?.mirrors || "growthub-custom-workspace-starter-v1"}</code>
+          <span>Bridge</span><code>{bridge?.status || bridge?.id || "not connected"}</code>
+        </div>
+      </section>
+
+      <section className="workspace-settings-section workspace-apps-list-section">
+        <h3>Workspace Apps</h3>
+        <AppsList apps={apps} />
+      </section>
+    </section>
+  </SettingsShell>;
+}
+
+export {
+  AppsSettingsPage as default
+};

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/settings/general/general-settings-form.jsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Upload, X } from "lucide-react";
+
+function textColorForAccent(accent) {
+  const hex = String(accent || "").replace("#", "");
+  if (!/^[0-9a-f]{6}$/i.test(hex)) return "#ffffff";
+  const red = parseInt(hex.slice(0, 2), 16);
+  const green = parseInt(hex.slice(2, 4), 16);
+  const blue = parseInt(hex.slice(4, 6), 16);
+  const luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;
+  return luminance > 0.62 ? "#252525" : "#ffffff";
+}
+
+function GeneralSettingsForm({ workspace, persistence }) {
+  const initialBranding = workspace.branding || {};
+  const [name, setName] = useState(workspace.name || "Growthub Workspace");
+  const [logoUrl, setLogoUrl] = useState(initialBranding.logoUrl || "");
+  const [accent, setAccent] = useState(initialBranding.accent || "#3f68ff");
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState("");
+
+  const canSave = persistence?.canSave !== false;
+  const previewInitial = useMemo(() => (name || "G").trim().slice(0, 1).toUpperCase(), [name]);
+
+  function uploadLogo(event) {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result === "string") setLogoUrl(reader.result);
+    };
+    reader.readAsDataURL(file);
+  }
+
+  async function saveSettings(event) {
+    event.preventDefault();
+    if (!canSave || saving) return;
+    setSaving(true);
+    setMessage("");
+    try {
+      const response = await fetch("/api/settings/workspace", {
+        method: "PATCH",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          name,
+          branding: {
+            name,
+            logoUrl,
+            accent
+          }
+        })
+      });
+      const payload = await response.json();
+      if (!response.ok) {
+        throw new Error(payload.guidance || payload.error || "Failed to save settings");
+      }
+      setName(payload.workspace?.name || name);
+      setLogoUrl(payload.workspace?.branding?.logoUrl || "");
+      setAccent(payload.workspace?.branding?.accent || accent);
+      setMessage("Saved workspace identity.");
+    } catch (error) {
+      setMessage(error.message || "Failed to save settings.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return <form className="workspace-settings-card" onSubmit={saveSettings}>
+    <div className="workspace-settings-card-heading">
+      <div>
+        <h2>General</h2>
+        <p>Workspace-scoped identity for this governed workspace only.</p>
+      </div>
+    </div>
+
+    <section className="workspace-settings-section">
+      <h3>Workspace Identity</h3>
+      <div className="workspace-logo-controls">
+        <div className="workspace-logo-preview">
+          <span className="workspace-logo-placeholder" aria-hidden="true" style={{
+            backgroundColor: logoUrl ? undefined : accent,
+            color: logoUrl ? undefined : textColorForAccent(accent)
+          }}>
+            {logoUrl ? <img src={logoUrl} alt="" /> : previewInitial}
+          </span>
+        </div>
+        <div className="workspace-logo-actions">
+          <div>
+            <label className="workspace-file-button">
+              <Upload size={14} aria-hidden="true" />
+              <span>Upload</span>
+              <input accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml" type="file" onChange={uploadLogo} />
+            </label>
+            <button className="workspace-remove-button" type="button" onClick={() => setLogoUrl("")} disabled={!logoUrl}>
+              <X size={14} aria-hidden="true" />
+              <span>Remove</span>
+            </button>
+          </div>
+          <p>Square PNGs, JPEGs, GIFs, WEBPs, or SVGs.</p>
+        </div>
+      </div>
+      <div className="workspace-settings-grid">
+        <label>
+          <span>Workspace name</span>
+          <input value={name} onChange={(event) => setName(event.target.value)} />
+        </label>
+      </div>
+      <div className="workspace-settings-grid logo-grid">
+        <label>
+          <span>Logo reference</span>
+          <input value={logoUrl} onChange={(event) => setLogoUrl(event.target.value)} placeholder="Upload a file or paste a safe URL" />
+        </label>
+        <label>
+          <span>Color</span>
+          <span className="workspace-color-field">
+            <input aria-label="Workspace color" type="color" value={accent} onChange={(event) => setAccent(event.target.value)} />
+            <input value={accent} onChange={(event) => setAccent(event.target.value)} placeholder="#3f68ff" />
+          </span>
+        </label>
+      </div>
+    </section>
+
+    <div className="workspace-settings-actions">
+      {message ? <p>{message}</p> : <p>{canSave ? "" : persistence?.guidance}</p>}
+      <button className="workspace-save-button" type="submit" disabled={!canSave || saving}>{saving ? "Saving..." : "Save"}</button>
+    </div>
+  </form>;
+}
+
+export {
+  GeneralSettingsForm
+};

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

@@ -0,0 +1,25 @@
+import { SettingsShell } from "../settings-shell.jsx";
+import { GeneralSettingsForm } from "./general-settings-form.jsx";
+import {
+  describePersistenceMode,
+  readWorkspaceConfig
+} from "@/lib/workspace-config";
+
+async function GeneralSettingsPage() {
+  const workspaceConfig = await readWorkspaceConfig();
+  const persistence = describePersistenceMode();
+  return <SettingsShell active="/settings/general" eyebrow="Settings" title="General">
+    <GeneralSettingsForm
+      workspace={{
+        id: workspaceConfig.id,
+        name: workspaceConfig.name,
+        branding: workspaceConfig.branding || {}
+      }}
+      persistence={persistence}
+    />
+  </SettingsShell>;
+}
+
+export {
+  GeneralSettingsPage as default
+};

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

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { readAdapterConfig } from "@/lib/adapters/env";
 import { describeIntegrationAdapter, listGovernedWorkspaceIntegrations } from "@/lib/adapters/integrations";
 import { groupIntegrationsByLane } from "@/lib/domain/integrations";
+import { readWorkspaceConfig } from "@/lib/workspace-config";
 
 function countConnected(rows) {
   return rows.filter((item) => item.isConnected || item.status === "connected").length;
@@ -36,24 +37,42 @@ function IntegrationRow({ item }) {
     </article>;
 }
 
+function textColorForAccent(accent) {
+  const hex = String(accent || "").replace("#", "");
+  if (!/^[0-9a-f]{6}$/i.test(hex)) return "#ffffff";
+  const red = parseInt(hex.slice(0, 2), 16);
+  const green = parseInt(hex.slice(2, 4), 16);
+  const blue = parseInt(hex.slice(4, 6), 16);
+  const luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;
+  return luminance > 0.62 ? "#252525" : "#ffffff";
+}
+
 async function IntegrationsSettingsPage() {
   const config = readAdapterConfig();
   const adapter = describeIntegrationAdapter();
+  const workspaceConfig = await readWorkspaceConfig();
+  const branding = workspaceConfig.branding || {};
+  const workspaceName = branding.name || workspaceConfig.name || "Growthub Workspace";
   const grouped = groupIntegrationsByLane(await listGovernedWorkspaceIntegrations());
   const allRows = [...grouped.dataSources, ...grouped.workspaceIntegrations];
 
   return <main className="workspace-builder workspace-settings-page">
       <aside className="workspace-rail" aria-label="Workspace navigation">
         <div className="workspace-brand">
-          <span className="workspace-mark">G</span>
-          <span>Growthub Workspace</span>
+          <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 href="/data-model">Data Model</Link>
           <Link className="active" href="/settings/integrations">Integrations</Link>
-          <span className="workspace-nav-static">Workspace Settings</span>
           <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" />

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

@@ -0,0 +1,25 @@
+import { SettingsShell } from "./settings-shell.jsx";
+import { GeneralSettingsForm } from "./general/general-settings-form.jsx";
+import {
+  describePersistenceMode,
+  readWorkspaceConfig
+} from "@/lib/workspace-config";
+
+async function SettingsIndexPage() {
+  const workspaceConfig = await readWorkspaceConfig();
+  const persistence = describePersistenceMode();
+  return <SettingsShell active="/settings/general" eyebrow="Settings" title="General">
+    <GeneralSettingsForm
+      workspace={{
+        id: workspaceConfig.id,
+        name: workspaceConfig.name,
+        branding: workspaceConfig.branding || {}
+      }}
+      persistence={persistence}
+    />
+  </SettingsShell>;
+}
+
+export {
+  SettingsIndexPage as default
+};

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

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { X } from "lucide-react";
+
+const SETTINGS_TABS = [
+  { href: "/settings/general", label: "General" },
+  { href: "/settings/apis-webhooks", label: "APIs & Webhooks" },
+  { href: "/settings/apps", label: "Apps" }
+];
+
+function SettingsShell({ active, eyebrow, title, children, aside }) {
+  return <main className="workspace-settings-shell">
+    <header className="workspace-settings-topbar">
+      <Link className="workspace-settings-exit" href="/" aria-label="Exit settings" title="Exit Settings">
+        <X size={16} aria-hidden="true" />
+      </Link>
+      <nav className="workspace-settings-tabs" aria-label="Settings navigation">
+        {SETTINGS_TABS.map((tab) => <Link
+          className={active === tab.href ? "active" : undefined}
+          href={tab.href}
+          key={tab.href}
+        >{tab.label}</Link>)}
+      </nav>
+      {aside ? <div className="workspace-settings-aside">{aside}</div> : null}
+    </header>
+    <section className="workspace-settings-main">
+      {children}
+    </section>
+  </main>;
+}
+
+export {
+  SettingsShell
+};