@growthub/cli 0.9.17 → 0.10.0

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

@@ -0,0 +1 @@
+export { DataModelTableSurface as DataTable } from "./DataModelShell.jsx";

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

@@ -0,0 +1 @@
+export { RecordFieldEditor as FieldEditor } from "./DataModelShell.jsx";

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

@@ -0,0 +1,9 @@
+"use client";
+
+/**
+ * Extension surface for governed field visibility / ordering beyond per-row editors.
+ * Row-level editing is composed through `FieldEditor` + drawer sections today.
+ */
+export function FieldManager() {
+  return null;
+}

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

@@ -0,0 +1,41 @@
+"use client";
+
+import { Plus } from "lucide-react";
+import { LucideIcon, OBJECT_TYPE_PRESETS, objectTypeBadge, pluralize } from "./dm-shared.jsx";
+
+function ObjectRow({ table, selected, onSelect }) {
+  const badge = objectTypeBadge(table.objectType);
+  const iconName = table.icon || OBJECT_TYPE_PRESETS[table.objectType]?.icon || "Database";
+  return (
+    <button type="button" className={`dm-obj-row${selected ? " active" : ""}`} onClick={onSelect}>
+      <LucideIcon name={iconName} size={13} className="dm-obj-icon" />
+      <span className="dm-obj-name">{table.label}</span>
+      <span className={`dm-badge ${badge.cls}`}>{badge.label}</span>
+    </button>
+  );
+}
+
+export function ObjectSidebar({ tables, selectedTable, onSelectSource, onAddObject }) {
+  return (
+    <aside className="dm-obj-col">
+      <div className="dm-obj-col-head">
+        <span>{pluralize(tables.length, "object")}</span>
+      </div>
+      <div className="dm-obj-col-body">
+        {tables.map((table) => (
+          <ObjectRow
+            key={`${table.source}-${table.id}`}
+            table={table}
+            selected={selectedTable?.id === table.id}
+            onSelect={() => onSelectSource(table.source)}
+          />
+        ))}
+      </div>
+      <div className="dm-obj-col-foot">
+        <button type="button" className="dm-obj-add-btn" onClick={onAddObject}>
+          <Plus size={13} />New object
+        </button>
+      </div>
+    </aside>
+  );
+}

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

@@ -0,0 +1 @@
+export { DataModelRecordDrawer as RecordDrawer } from "./DataModelShell.jsx";

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

@@ -0,0 +1,244 @@
+"use client";
+
+import { ChevronDown, Search, AlertTriangle } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { fetchReferenceOptions } from "@/lib/data-model/reference-options";
+
+const EMPTY_CONTEXT = Object.freeze({});
+
+function SearchableSelect({
+  value,
+  options,
+  disabled,
+  placeholder = "Select...",
+  onChange,
+  pageSize = 8,
+  footer,
+  loading,
+  emptyHint,
+  serverDriven,
+  onSearchChange
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [page, setPage] = useState(0);
+
+  useEffect(() => {
+    if (!serverDriven || !onSearchChange) return undefined;
+    const handle = setTimeout(() => onSearchChange(query), 220);
+    return () => clearTimeout(handle);
+  }, [query, serverDriven, onSearchChange]);
+
+  const selected = options.find((option) => option.value === String(value || ""));
+  const filtered = useMemo(() => {
+    if (serverDriven) return options;
+    const needle = query.trim().toLowerCase();
+    if (!needle) return options;
+    return options.filter((option) =>
+      `${option.label} ${option.value} ${option.secondaryLabel || ""}`.toLowerCase().includes(needle)
+    );
+  }, [options, query, serverDriven]);
+  const pageCount = Math.max(1, Math.ceil(filtered.length / pageSize));
+  const currentPage = Math.min(page, pageCount - 1);
+  const visibleOptions = filtered.slice(currentPage * pageSize, currentPage * pageSize + pageSize);
+
+  useEffect(() => {
+    setPage(0);
+  }, [query, options.length]);
+
+  return (
+    <div
+      className={`dm-select${open ? " open" : ""}${disabled ? " disabled" : ""}`}
+      onClick={(event) => event.stopPropagation()}
+      onBlur={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+      }}
+    >
+      <button
+        type="button"
+        className="dm-select-trigger"
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => setOpen((current) => !current)}
+      >
+        <span className={selected ? "" : "empty"}>{selected?.label || placeholder}</span>
+        <ChevronDown size={15} aria-hidden="true" />
+      </button>
+      {open && (
+        <div className="dm-select-popover">
+          <label className="dm-select-search">
+            <Search size={14} aria-hidden="true" />
+            <input
+              autoFocus
+              value={query}
+              placeholder="Search..."
+              onChange={(event) => {
+                const next = event.target.value;
+                setQuery(next);
+              }}
+            />
+          </label>
+          {loading && <p className="dm-select-empty" style={{ padding: 8 }}>Loading…</p>}
+          {!loading && (
+            <div className="dm-select-list" role="listbox">
+              <button
+                type="button"
+                className={`dm-select-option${!value ? " selected" : ""}`}
+                role="option"
+                aria-selected={!value}
+                onClick={() => {
+                  onChange("");
+                  setOpen(false);
+                }}
+              >
+                <span>{placeholder}</span>
+              </button>
+              {visibleOptions.map((option) => (
+                <button
+                  type="button"
+                  key={`${option.value}:${option.label}`}
+                  className={`dm-select-option${option.value === String(value || "") ? " selected" : ""}`}
+                  role="option"
+                  aria-selected={option.value === String(value || "")}
+                onClick={() => {
+                  onChange(option.value);
+                  setOpen(false);
+                  setQuery("");
+                  if (serverDriven && onSearchChange) onSearchChange("");
+                }}
+                >
+                  <span>{option.label}</span>
+                  {option.secondaryLabel && <em>{option.secondaryLabel}</em>}
+                </button>
+              ))}
+              {visibleOptions.length === 0 && (
+                <p className="dm-select-empty">{emptyHint || "No matches"}</p>
+              )}
+            </div>
+          )}
+          {filtered.length > pageSize && (
+            <div className="dm-select-pager">
+              <button type="button" disabled={currentPage === 0} onClick={() => setPage((next) => Math.max(0, next - 1))}>Prev</button>
+              <span>{currentPage + 1} / {pageCount}</span>
+              <button type="button" disabled={currentPage >= pageCount - 1} onClick={() => setPage((next) => Math.min(pageCount - 1, next + 1))}>Next</button>
+            </div>
+          )}
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ReferencePicker({
+  objectId,
+  field,
+  value,
+  onChange,
+  disabled,
+  placeholder = "Select reference…",
+  context = EMPTY_CONTEXT
+}) {
+  const [options, setOptions] = useState([]);
+  const [nextCursor, setNextCursor] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [liveQuery, setLiveQuery] = useState("");
+  const mountedRef = useRef(false);
+  const requestIdRef = useRef(0);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  const loadPage = useCallback(async ({ query, cursor, append }) => {
+    if (!objectId || !field) return;
+    const requestId = requestIdRef.current + 1;
+    requestIdRef.current = requestId;
+    setLoading(true);
+    setError("");
+    try {
+      const payload = await fetchReferenceOptions({
+        objectId,
+        field,
+        query: query || "",
+        cursor,
+        limit: 25,
+        context
+      });
+      if (!mountedRef.current || requestId !== requestIdRef.current) return;
+      const next = Array.isArray(payload.options) ? payload.options : [];
+      setOptions((prev) => (append ? [...prev, ...next] : next));
+      setNextCursor(payload.nextCursor || null);
+    } catch (err) {
+      if (!mountedRef.current || requestId !== requestIdRef.current) return;
+      setError(err?.message || "Failed to load options");
+      if (!append) setOptions([]);
+    } finally {
+      if (!mountedRef.current || requestId !== requestIdRef.current) return;
+      setLoading(false);
+    }
+  }, [objectId, field, context]);
+
+  useEffect(() => {
+    loadPage({ query: liveQuery, cursor: null, append: false });
+  }, [liveQuery, objectId, field, loadPage]);
+
+  useEffect(() => {
+    setLiveQuery("");
+  }, [objectId, field]);
+
+  const valueInOptions = useMemo(
+    () => options.some((o) => String(o.value) === String(value || "")),
+    [options, value]
+  );
+  const showRepair = Boolean(value) && !valueInOptions && !loading;
+
+  return (
+    <div className="dm-reference-picker">
+      {error && <p className="dm-field-error" style={{ fontSize: 11 }}>{error}</p>}
+      {showRepair && (
+        <p className="dm-validation-banner" style={{ fontSize: 11, marginBottom: 6 }}>
+          <AlertTriangle size={12} aria-hidden />
+          <span>Selected reference is missing or filtered out. Pick a new row or adjust API Registry status.</span>
+        </p>
+      )}
+      <SearchableSelect
+        value={value || ""}
+        options={options.map((o) => ({
+          value: String(o.value),
+          label: String(o.label || o.value),
+          secondaryLabel: o.secondaryLabel
+        }))}
+        disabled={disabled}
+        placeholder={placeholder}
+        pageSize={10}
+        loading={loading}
+        emptyHint="No matches — try another search"
+        onChange={onChange}
+        serverDriven
+        onSearchChange={setLiveQuery}
+        footer={
+          nextCursor ? (
+            <div style={{ padding: 8, borderTop: "1px solid rgba(255,255,255,0.06)" }}>
+              <button
+                type="button"
+                className="dm-btn-ghost"
+                disabled={loading || disabled}
+                onClick={() => loadPage({ query: liveQuery, cursor: nextCursor, append: true })}
+              >
+                Load more
+              </button>
+            </div>
+          ) : null
+        }
+      />
+    </div>
+  );
+}
+
+export { SearchableSelect };

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

@@ -0,0 +1,21 @@
+"use client";
+
+import { Play } from "lucide-react";
+import { StatusPill } from "./StatusPill.jsx";
+
+export function SandboxRunPanel({ status, sandboxRunning, sandboxMessage, onRun, disabled, canRun }) {
+  return (
+    <div className="dm-record-testbar">
+      <StatusPill value={status} />
+      <button
+        type="button"
+        className="dm-btn-primary-sm"
+        disabled={sandboxRunning || disabled || !canRun}
+        onClick={onRun}
+      >
+        {sandboxRunning ? "Running…" : (<><Play size={13} aria-hidden /> Run sandbox</>)}
+      </button>
+      {sandboxMessage && <span>{sandboxMessage}</span>}
+    </div>
+  );
+}

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

@@ -0,0 +1,15 @@
+"use client";
+
+import { StatusPill } from "./StatusPill.jsx";
+
+export function SourceTestPanel({ status, testing, testMessage, onTest, disabled }) {
+  return (
+    <div className="dm-record-testbar">
+      <StatusPill value={status} />
+      <button type="button" className="dm-btn-primary-sm" disabled={testing || disabled} onClick={onTest}>
+        {testing ? "Testing…" : "Test connection"}
+      </button>
+      {testMessage && <span>{testMessage}</span>}
+    </div>
+  );
+}

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

@@ -0,0 +1,13 @@
+"use client";
+
+export function StatusPill({ value }) {
+  const status = String(value || "untested").toLowerCase();
+  const ok = ["connected", "approved", "ok", "success"].includes(status);
+  const bad = ["failed", "error", "disconnected"].includes(status);
+  return (
+    <span className={`dm-db-status ${ok ? "ok" : bad ? "bad" : ""}`}>
+      <span />
+      {value || "untested"}
+    </span>
+  );
+}

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

@@ -0,0 +1,41 @@
+"use client";
+
+export function ToggleField({ checked, disabled, label, onChange, description }) {
+  return (
+    <label className="dm-check-row">
+      <input
+        type="checkbox"
+        checked={Boolean(checked)}
+        disabled={disabled}
+        onChange={(event) => onChange(event.target.checked)}
+      />
+      <span>
+        {label}
+        {description && <span className="dm-cell-empty" style={{ display: "block", marginTop: 4 }}>{description}</span>}
+      </span>
+    </label>
+  );
+}
+
+export function SegmentedToggle({ value, options, disabled, onChange, label, name = "segmented" }) {
+  const group = String(name || "segmented");
+  return (
+    <div className="dm-record-field">
+      {label && <span>{label}</span>}
+      <div className="dm-radio-row">
+        {options.map((opt) => (
+          <label key={opt}>
+            <input
+              type="radio"
+              name={group}
+              checked={value === opt}
+              disabled={disabled}
+              onChange={() => onChange(opt)}
+            />
+            <span>{opt}</span>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,99 @@
+"use client";
+
+import {
+  Activity,
+  BarChart2,
+  Box,
+  Building2,
+  Calendar,
+  CheckSquare,
+  Code2,
+  Database,
+  FileText,
+  Globe,
+  Hash,
+  Layers,
+  Link2,
+  List,
+  Mail,
+  Plus,
+  ShoppingCart,
+  Star,
+  Tag,
+  Terminal,
+  ToggleLeft,
+  Type,
+  Users,
+  Zap,
+} from "lucide-react";
+import { OBJECT_TYPE_PRESETS } from "@/lib/workspace-data-model";
+
+const LUCIDE_MAP = {
+  Activity, BarChart2, Box, Building2, Calendar, CheckSquare, Code2,
+  Database, FileText, Globe, Hash, Layers, Link2, List, Mail, Plus,
+  ShoppingCart, Star, Tag, Terminal, ToggleLeft, Type, Users, Zap,
+};
+
+const ICON_PICKER_SET = [
+  "Database", "Globe", "Code2", "Users", "CheckSquare", "Building2",
+  "Tag", "Star", "Zap", "FileText", "Mail", "BarChart2",
+  "Layers", "Box", "Activity", "ShoppingCart", "Terminal",
+];
+
+const OBJECT_TYPE_BADGE = {
+  "data-source":         { label: "Data Source",         cls: "dm-badge-datasource" },
+  "api-registry":        { label: "API Registry",        cls: "dm-badge-registry" },
+  "sandbox-environment": { label: "Sandbox Environment", cls: "dm-badge-sandbox" },
+  people:                { label: "People",              cls: "dm-badge-people" },
+  tasks:                 { label: "Tasks",               cls: "dm-badge-tasks" },
+  custom:                { label: "Custom",              cls: "dm-badge-manual" },
+};
+
+const FIELD_TYPE_ICON_NAMES = {
+  text: "Type", number: "Hash", date: "Calendar", url: "Link2", select: "List", boolean: "ToggleLeft",
+};
+
+function LucideIcon({ name, size = 14, className, style }) {
+  const Icon = LUCIDE_MAP[name] || Database;
+  return <Icon size={size} className={className} style={style} aria-hidden="true" />;
+}
+
+function inferFieldType(name) {
+  const n = name.toLowerCase();
+  if (n.includes("date") || n.includes("_at") || n.includes("created") || n.includes("updated")) return "date";
+  if (n.includes("url") || n.includes("link") || n.includes("website") || n === "endpoint" || n === "baseurl") return "url";
+  if (n.includes("count") || n.includes("num") || n.includes("amount") || n.includes("arr") || n.includes("price")) return "number";
+  if (n === "status" || n === "stage" || n === "type" || n === "icp" || n === "priority" || n === "authtype" || n === "method") return "select";
+  if (n.startsWith("is_") || n.includes("active") || n.includes("enabled")) return "boolean";
+  return "text";
+}
+
+function pluralize(count, word) {
+  return `${count} ${count === 1 ? word : `${word}s`}`;
+}
+
+function objectTypeBadge(objectType) {
+  return OBJECT_TYPE_BADGE[objectType] || OBJECT_TYPE_BADGE.custom;
+}
+
+function textColorForAccent(accent) {
+  const hex = String(accent || "").replace("#", "");
+  if (!/^[0-9a-f]{6}$/i.test(hex)) return "#ffffff";
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.62 ? "#252525" : "#ffffff";
+}
+
+export {
+  FIELD_TYPE_ICON_NAMES,
+  ICON_PICKER_SET,
+  LUCIDE_MAP,
+  LucideIcon,
+  OBJECT_TYPE_BADGE,
+  OBJECT_TYPE_PRESETS,
+  inferFieldType,
+  objectTypeBadge,
+  pluralize,
+  textColorForAccent
+};