@growthub/cli 0.13.2 → 0.13.5

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

@@ -0,0 +1,224 @@
+"use client";
+
+/**
+ * Sandbox Local Agent Auth Onboarding V1 — record sidecar panel.
+ *
+ * Rendered for any sandbox row using `adapter: local-agent-host` in local
+ * locality. The panel is host-agnostic: per-host capabilities (whether a
+ * documented login/logout subcommand exists, the label, the install hint)
+ * come from `lib/sandbox-agent-host-catalog.js` via `getAgentHostCapabilities`.
+ *
+ * Mental model — identical for every host:
+ *
+ *   1. Check status         host CLI installed and authed?
+ *   2. Run login            (only when the catalog declares loginCommand)
+ *   3. Log out              (only when the catalog declares logoutCommand)
+ *   4. Run sandbox          existing button (unchanged)
+ *
+ * Hosts without a documented login flow surface only step 1 and a notes
+ * line directing the operator to sign in via the host CLI itself. There is
+ * no second product surface, no terminal emulator — just a uniform
+ * readiness bridge.
+ *
+ * Status values stamped on the row are intentionally distinct between
+ * confirmed-authenticated ("active") and merely-installed ("reachable")
+ * so the pill cannot overclaim auth from a `--version` probe.
+ */
+
+import { useCallback, useState } from "react";
+import { Bot, Code2, LogIn, LogOut, RefreshCw } from "lucide-react";
+import { isSandboxLocalAgentHost } from "@/lib/sandbox-agent-auth-eligibility";
+import { getAgentHostCapabilities } from "@/lib/sandbox-agent-host-catalog";
+
+const STATUS_LABEL = {
+  active: "Active",
+  reachable: "Reachable",
+  stale: "Stale",
+  missing: "Missing",
+  checking: "Checking",
+  unknown: "Not checked"
+};
+
+function statusKind(status) {
+  if (status === "active") return "ok";
+  if (status === "stale") return "warn";
+  if (status === "missing") return "bad";
+  // "reachable" stays neutral — CLI is installed, but auth is NOT confirmed.
+  return "";
+}
+
+function AuthStatusPill({ status }) {
+  const value = STATUS_LABEL[status] || "Unknown";
+  const kind = statusKind(status);
+  return (
+    <span className={`dm-db-status ${kind}`} data-agent-auth-status={status || "unknown"}>
+      <span />
+      {value}
+    </span>
+  );
+}
+
+export function SandboxAgentAuthPanel({ objectId, rowName, draft, disabled, onPatchDraft }) {
+  const [busy, setBusy] = useState(null); // "status" | "login" | "logout" | null
+  const [output, setOutput] = useState(null);
+  const [message, setMessage] = useState("");
+
+  const capabilities = getAgentHostCapabilities(draft);
+  const providerMatchesHost = String(draft?.agentAuthProvider || "").trim() === String(draft?.agentHost || "").trim();
+  const currentStatus =
+    providerMatchesHost && typeof draft?.agentAuthStatus === "string" && draft.agentAuthStatus.trim()
+      ? draft.agentAuthStatus.trim()
+      : "unknown";
+  const lastChecked = providerMatchesHost ? draft?.agentAuthLastChecked || "" : "";
+  const lastMessage = providerMatchesHost ? draft?.agentAuthLastMessage || "" : "";
+  const displayMessage = normalizeAuthMessage(message || lastMessage, capabilities?.label)
+    || (currentStatus === "unknown" ? "Run Check or Login to verify this local agent host." : "");
+
+  const canAct = Boolean(objectId && rowName) && !disabled;
+
+  const callAction = useCallback(
+    async (action, endpoint) => {
+      if (!canAct) return;
+      setBusy(action);
+      setMessage("");
+      try {
+        const res = await fetch(endpoint, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ objectId, name: rowName })
+        });
+        const payload = await res.json();
+        setOutput(payload);
+        setMessage(payload.message || (payload.ok ? "Done" : payload.error || "Failed"));
+        if (typeof onPatchDraft === "function" && payload.status) {
+          onPatchDraft({
+            agentAuthStatus: payload.status,
+            agentAuthProvider: payload.provider || draft?.agentHost || "unknown",
+            agentAuthLastChecked: payload.checkedAt || new Date().toISOString(),
+            agentAuthLastExitCode:
+              typeof payload.exitCode === "number" ? payload.exitCode : null,
+            agentAuthLastMessage: payload.message || "",
+            agentAuthLastLoginUrl: payload.loginUrl || ""
+          });
+        }
+      } catch (err) {
+        setMessage(err?.message || `${action} failed`);
+      } finally {
+        setBusy(null);
+      }
+    },
+    [canAct, objectId, rowName, onPatchDraft, draft?.agentHost]
+  );
+
+  const onCheckStatus = () =>
+    callAction("status", "/api/workspace/sandbox-agent-auth/status");
+  const onLogin = () =>
+    callAction("login", "/api/workspace/sandbox-agent-auth/login");
+  const onLogout = () =>
+    callAction("logout", "/api/workspace/sandbox-agent-auth/logout");
+
+  if (!capabilities) return null;
+  const HostIcon = capabilities.slug === "codex_local" ? Code2 : Bot;
+
+  return (
+    <div className="dm-record-testbar" data-panel="sandbox-agent-auth" data-agent-host={capabilities.slug}>
+      <div className="dm-agent-auth-summary">
+        <HostIcon size={15} aria-hidden />
+        <div>
+          <strong>{capabilities.label}</strong>
+          <span>Local CLI session</span>
+        </div>
+        <AuthStatusPill status={currentStatus} />
+      </div>
+      <div className="dm-agent-auth-actions">
+        <button
+          type="button"
+          className="dm-btn-ghost"
+          disabled={busy !== null || !canAct}
+          onClick={onCheckStatus}
+          title={`Probe the local ${capabilities.label} CLI`}
+        >
+          <RefreshCw size={13} aria-hidden />
+          {busy === "status" ? "Checking…" : "Check"}
+        </button>
+        {capabilities.canLogin && (
+          <button
+            type="button"
+            className="dm-btn-primary-sm"
+            disabled={busy !== null || !canAct}
+            onClick={onLogin}
+            title={`Run the documented login flow for ${capabilities.label}`}
+          >
+            <LogIn size={13} aria-hidden />
+            {busy === "login" ? "Running…" : "Login"}
+          </button>
+        )}
+        {capabilities.canLogout && (
+          <button
+            type="button"
+            className="dm-btn-ghost"
+            disabled={busy !== null || !canAct}
+            onClick={onLogout}
+            title={`Run the documented logout flow for ${capabilities.label}`}
+          >
+            <LogOut size={13} aria-hidden />
+            {busy === "logout" ? "…" : "Logout"}
+          </button>
+        )}
+      </div>
+      {displayMessage && <span className="dm-agent-auth-message">{displayMessage}</span>}
+      {currentStatus === "missing" && (
+        <span className="dm-agent-auth-message is-warning">{capabilities.installHint}</span>
+      )}
+      {!capabilities.canLogin && capabilities.notes && (
+        <span className="dm-agent-auth-message" data-host-notes>
+          {capabilities.notes}
+        </span>
+      )}
+      {output && (output.stdout || output.stderr || output.loginUrl) && (
+        <SandboxAgentAuthOutput output={output} />
+      )}
+      {!output && lastChecked && (
+        <span className="dm-agent-auth-message is-muted">Last checked {formatChecked(lastChecked)}</span>
+      )}
+    </div>
+  );
+}
+
+function normalizeAuthMessage(value, label) {
+  const text = String(value || "").trim();
+  if (!text) return "";
+  const normalized = text.toLowerCase();
+  if (normalized.includes("authenticated")) return "Authenticated.";
+  if (label && normalized.includes(String(label).toLowerCase())) {
+    return text.replace(new RegExp(String(label).replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi"), "").replace(/\s+/g, " ").trim();
+  }
+  return text;
+}
+
+function formatChecked(iso) {
+  if (!iso) return "";
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return iso;
+  }
+}
+
+function SandboxAgentAuthOutput({ output }) {
+  const lines = [];
+  if (output.loginUrl) lines.push(`login URL: ${output.loginUrl}`);
+  if (output.stdout) lines.push(`stdout:\n${output.stdout}`);
+  if (output.stderr) lines.push(`stderr:\n${output.stderr}`);
+  return (
+    <details className="dm-agent-auth-output" data-output="sandbox-agent-auth">
+      <summary>Auth output</summary>
+      <pre>{lines.join("\n\n")}</pre>
+    </details>
+  );
+}
+
+// Re-export the eligibility predicate so callers can keep importing it from
+// this component file. New code should import from
+// `@/lib/sandbox-agent-auth-eligibility` directly.
+export { isSandboxLocalAgentHost };

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

@@ -3,7 +3,18 @@
 import { Play } from "lucide-react";
 import { StatusPill } from "./StatusPill.jsx";
 
-export function SandboxRunPanel({ status, sandboxRunning, sandboxMessage, onRun, disabled, canRun }) {
+export function SandboxRunPanel({
+  status,
+  sandboxRunning,
+  sandboxMessage,
+  onRun,
+  disabled,
+  canRun,
+  agentAuthStatus,
+  agentAuthHint
+}) {
+  const hint = agentAuthHint
+    || (sandboxMessage && isAuthHinted(sandboxMessage) ? "Claude auth may be stale — open Claude Auth panel above." : null);
   return (
     <div className="dm-record-testbar">
       <StatusPill value={status} />
@@ -16,6 +27,26 @@ export function SandboxRunPanel({ status, sandboxRunning, sandboxMessage, onRun,
         {sandboxRunning ? "Running…" : (<><Play size={13} aria-hidden /> Run sandbox</>)}
       </button>
       {sandboxMessage && <span>{sandboxMessage}</span>}
+      {hint && (
+        <span
+          data-agent-auth-hint
+          data-agent-auth-status={agentAuthStatus || "unknown"}
+          style={{ color: "#b45309", fontSize: 12, fontWeight: 600 }}
+        >
+          {hint}
+        </span>
+      )}
     </div>
   );
 }
+
+function isAuthHinted(text) {
+  if (typeof text !== "string") return false;
+  const lower = text.toLowerCase();
+  return (
+    lower.includes("not logged in")
+    || lower.includes("login required")
+    || lower.includes("authenticate")
+    || lower.includes("auth required")
+  );
+}

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

@@ -0,0 +1,226 @@
+"use client";
+
+/**
+ * Growthub Workspace Metadata Graph V1 — read-only inspector panel.
+ *
+ * Surfaces a selected metadata node's dependencies + dependents + warnings.
+ *
+ * Mounting status (V1):
+ *   This component SHIPS with the worker kit but is NOT yet mounted by the
+ *   existing builder / workflow / data-model surfaces. Mounting is
+ *   intentionally deferred to a follow-up PR so the V1 scope stays focused
+ *   on the typed projection + GET route. Operators that want the inspector
+ *   now can import it directly:
+ *
+ *     import { WorkspaceGraphInspectorPanel } from "@/app/data-model/components/WorkspaceGraphInspectorPanel.jsx";
+ *
+ *   Intended future entry points:
+ *
+ *     - Widget sidecar: View dependencies
+ *     - Workflow sidecar: View dependencies
+ *     - Run console: View graph lineage
+ *     - Data Model row sidecar: View dependents
+ *     - Workspace Settings: Metadata Graph
+ *
+ * V1 invariants:
+ *   - Read-only. No edits. No deletes.
+ *   - No fetch of provider data — only `GET /api/workspace/metadata-graph`.
+ *   - No secrets rendered.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { findDependencies, findDependents } from "@/lib/workspace-metadata-graph";
+
+const RELATION_LABELS = {
+  containsWidget: "contains widget",
+  bindsToObject: "binds to object",
+  usesField: "uses field",
+  filteredByField: "filtered by field",
+  sortedByField: "sorted by field",
+  backedBySourceRecord: "backed by source record",
+  scopedToEntity: "scoped to entity",
+  containsNode: "contains node",
+  usesSandbox: "uses sandbox",
+  readsObject: "reads object",
+  writesObject: "writes object",
+  requiresRunInput: "requires run input",
+  callsIntegration: "calls integration",
+  usesAgentHost: "uses agent host",
+  executedWorkflow: "executed workflow",
+  executedSandbox: "executed sandbox",
+  usedAgentHost: "used agent host",
+  producedArtifact: "produced artifact",
+  belongsToIntegration: "belongs to integration",
+  boundToIntegration: "bound to integration"
+};
+
+const NODE_TYPE_LABELS = {
+  dashboard: "Dashboard",
+  widget: "Widget",
+  dataModelObject: "Data Model object",
+  field: "Field",
+  view: "View",
+  workflow: "Workflow",
+  workflowNode: "Workflow node",
+  runInput: "Run input",
+  sandbox: "Sandbox",
+  agentHost: "Agent host",
+  integration: "Integration",
+  integrationEntity: "Integration entity",
+  sourceRecord: "Source record",
+  run: "Run",
+  outputArtifact: "Output artifact"
+};
+
+function relationLabel(relation) {
+  return RELATION_LABELS[relation] || relation;
+}
+
+function nodeTypeLabel(type) {
+  return NODE_TYPE_LABELS[type] || type;
+}
+
+export function WorkspaceGraphInspectorPanel({ selectedNodeId, onSelectNode }) {
+  const [graph, setGraph] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [internalSelectedId, setInternalSelectedId] = useState(selectedNodeId || "");
+
+  useEffect(() => {
+    let canceled = false;
+    setLoading(true);
+    setError(null);
+    fetch("/api/workspace/metadata-graph")
+      .then((response) => {
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        return response.json();
+      })
+      .then((envelope) => {
+        if (canceled) return;
+        setGraph(envelope?.graph || { nodes: [], edges: [] });
+      })
+      .catch((err) => {
+        if (canceled) return;
+        setError(err?.message || "Failed to load metadata graph");
+      })
+      .finally(() => {
+        if (!canceled) setLoading(false);
+      });
+    return () => { canceled = true; };
+  }, []);
+
+  useEffect(() => {
+    if (selectedNodeId && selectedNodeId !== internalSelectedId) {
+      setInternalSelectedId(selectedNodeId);
+    }
+  }, [selectedNodeId, internalSelectedId]);
+
+  const nodes = graph?.nodes || [];
+  const selected = useMemo(
+    () => nodes.find((node) => node.id === internalSelectedId) || null,
+    [nodes, internalSelectedId]
+  );
+
+  const dependencies = useMemo(
+    () => (graph && selected ? findDependencies(graph, selected.id) : []),
+    [graph, selected]
+  );
+  const dependents = useMemo(
+    () => (graph && selected ? findDependents(graph, selected.id) : []),
+    [graph, selected]
+  );
+
+  const handleSelect = (nodeId) => {
+    setInternalSelectedId(nodeId);
+    if (typeof onSelectNode === "function") onSelectNode(nodeId);
+  };
+
+  return (
+    <div className="workspace-graph-inspector" aria-label="Workspace metadata graph inspector">
+      <header className="workspace-graph-inspector-header">
+        <h3>Workspace metadata graph</h3>
+        <p className="workspace-graph-inspector-subtitle">
+          Read-only projection of dashboards, widgets, workflows, sandboxes, and runs.
+        </p>
+      </header>
+
+      {loading && <p className="workspace-graph-inspector-loading">Loading metadata graph…</p>}
+      {error && (
+        <p className="workspace-graph-inspector-error" role="alert">
+          Could not load metadata graph: {error}
+        </p>
+      )}
+
+      <div className="workspace-graph-inspector-body">
+        <aside className="workspace-graph-inspector-list">
+          <h4>Nodes ({nodes.length})</h4>
+          <ul>
+            {nodes.map((node) => (
+              <li key={node.id}>
+                <button
+                  type="button"
+                  className={`workspace-graph-inspector-node-button${node.id === internalSelectedId ? " is-selected" : ""}`}
+                  onClick={() => handleSelect(node.id)}
+                >
+                  <span className="workspace-graph-inspector-node-type">{nodeTypeLabel(node.type)}</span>
+                  <span className="workspace-graph-inspector-node-label">{node.label || node.id}</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </aside>
+
+        <section className="workspace-graph-inspector-detail">
+          {!selected && <p className="workspace-graph-inspector-empty">Select a node to view dependencies.</p>}
+          {selected && (
+            <>
+              <h4>{nodeTypeLabel(selected.type)} · {selected.label}</h4>
+              <dl className="workspace-graph-inspector-summary">
+                {Object.entries(selected.summary || {}).map(([key, value]) => (
+                  <div key={key}>
+                    <dt>{key}</dt>
+                    <dd>{Array.isArray(value) ? value.join(", ") || "—" : (value === null || value === "" ? "—" : String(value))}</dd>
+                  </div>
+                ))}
+              </dl>
+
+              <section className="workspace-graph-inspector-edges">
+                <h5>Depends on ({dependencies.length})</h5>
+                <ul>
+                  {dependencies.length === 0 && <li className="workspace-graph-inspector-empty">No dependencies.</li>}
+                  {dependencies.map(({ node, relation }) => (
+                    <li key={`dep::${node.id}::${relation}`}>
+                      <button type="button" onClick={() => handleSelect(node.id)}>
+                        <span className="workspace-graph-inspector-relation">{relationLabel(relation)}</span>
+                        <span className="workspace-graph-inspector-node-type">{nodeTypeLabel(node.type)}</span>
+                        <span className="workspace-graph-inspector-node-label">{node.label || node.id}</span>
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              </section>
+
+              <section className="workspace-graph-inspector-edges">
+                <h5>Used by ({dependents.length})</h5>
+                <ul>
+                  {dependents.length === 0 && <li className="workspace-graph-inspector-empty">Nothing depends on this node yet.</li>}
+                  {dependents.map(({ node, relation }) => (
+                    <li key={`from::${node.id}::${relation}`}>
+                      <button type="button" onClick={() => handleSelect(node.id)}>
+                        <span className="workspace-graph-inspector-relation">{relationLabel(relation)}</span>
+                        <span className="workspace-graph-inspector-node-type">{nodeTypeLabel(node.type)}</span>
+                        <span className="workspace-graph-inspector-node-label">{node.label || node.id}</span>
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              </section>
+            </>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}
+
+export default WorkspaceGraphInspectorPanel;