@growthub/cli 0.13.8 → 0.14.0

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

@@ -69,6 +69,7 @@ function ToolCallCard({ proposal, content, onOpenArtifact }) {
     rationale: proposal?.rationale,
     confidence: proposal?.confidence,
   };
+  const showJson = meta.payload != null || meta.affectedField || meta.rationale;
   return (
     <div className="dm-helper-toolcall" data-toolcall-type={proposal?.type}>
       <button
@@ -89,9 +90,11 @@ function ToolCallCard({ proposal, content, onOpenArtifact }) {
       {open && (
         <div className="dm-helper-toolcall-body">
           {content && <div className="dm-helper-toolcall-content">{content}</div>}
-          <pre className="dm-helper-toolcall-json">
-            {JSON.stringify(meta, null, 2)}
-          </pre>
+          {showJson && (
+            <pre className="dm-helper-toolcall-json">
+              {JSON.stringify(meta, null, 2)}
+            </pre>
+          )}
         </div>
       )}
       {canNavigate && (
@@ -108,6 +111,55 @@ function ToolCallCard({ proposal, content, onOpenArtifact }) {
   );
 }
 
+function formatRunDuration(ms) {
+  const value = Number(ms);
+  if (!Number.isFinite(value) || value < 0) return "";
+  const totalSeconds = Math.max(0, Math.round(value / 1000));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  if (minutes <= 0) return `${seconds}s`;
+  return `${minutes}m ${String(seconds).padStart(2, "0")}s`;
+}
+
+function ProposalReviewCard({ proposal, checked, disabled, onCheckedChange, onKeyDown }) {
+  const [open, setOpen] = useState(false);
+  const summary = summarizePayload(proposal);
+  return (
+    <div className="dm-helper-toolcall" data-proposal-item="" tabIndex={0} onKeyDown={onKeyDown}>
+      <div className="dm-helper-toolcall-row dm-helper-proposal-card-row">
+        <input
+          type="checkbox"
+          checked={!!checked}
+          onChange={(e) => onCheckedChange(e.target.checked)}
+          disabled={disabled}
+          data-proposal-accept=""
+          aria-label={`Select ${proposal.type}`}
+        />
+        <button
+          type="button"
+          className="dm-helper-proposal-card-toggle"
+          onClick={() => setOpen((v) => !v)}
+          aria-expanded={open}
+        >
+          <span className="dm-helper-toolcall-title">{proposal.type}</span>
+          <span className="dm-helper-proposal-field">→ {proposal.affectedField}</span>
+          <ChevronDown
+            size={14}
+            className={`dm-helper-toolcall-chevron${open ? " is-open" : ""}`}
+            aria-hidden="true"
+          />
+        </button>
+      </div>
+      {open && (
+        <div className="dm-helper-toolcall-body">
+          {summary && <p className="dm-helper-proposal-payload" data-proposal-payload="">{summary}</p>}
+          {proposal.rationale && <p className="dm-helper-proposal-rationale">{proposal.rationale}</p>}
+        </div>
+      )}
+    </div>
+  );
+}
+
 // Pair a system apply-receipt message with the actual proposal payload
 // it confirms. The applyResult (rehydrated from row.lastApplied at thread
 // load time) carries the typed payloads keyed in order — we walk the
@@ -747,6 +799,11 @@ export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, i
   const acceptedCount = Object.values(accepted).filter(Boolean).length;
   const skippedCount = applyResult?.skipped?.length || 0;
   const hasProposals = result && (result.proposals || []).length > 0;
+  const visibleWarnings = (result?.warnings || []).filter((warning) => {
+    const text = String(warning || "");
+    return !/transcript does not include the actual registry row id or lastResponse payload/i.test(text)
+      && !/No credentials or env values should be stored/i.test(text);
+  });
 
   // Thread is "active" the moment the user has sent at least one message,
   // OR we have rehydrated a prior thread row. Pills only show on the
@@ -916,18 +973,9 @@ export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, i
               {/* Proposals */}
               {result && (
                 <div className="dm-helper-result">
-                <div className="dm-helper-summary">
-                  <span>{result.summary}</span>
-                </div>
-
-                {(result.warnings || []).length > 0 && (
-                  <div className="dm-helper-warnings">
-                    {result.warnings.map((w, i) => (
-                      <div key={i} className="dm-helper-warning">
-                        <AlertCircle size={12} />
-                        <span>{w}</span>
-                      </div>
-                    ))}
+                {!threadActive && result.summary && (
+                  <div className="dm-helper-summary">
+                    <span>{result.summary}</span>
                   </div>
                 )}
 
@@ -943,42 +991,17 @@ export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, i
                       aria-label="Proposals"
                     >
                       {result.proposals.map((proposal, i) => {
-                        const summary = summarizePayload(proposal);
-                        const conf = typeof proposal.confidence === "number" ? Math.round(proposal.confidence * 100) : null;
                         return (
-                          <label
+                          <ProposalReviewCard
                             key={i}
-                            className={`dm-helper-proposal${accepted[i] ? " accepted" : ""}`}
-                            data-proposal-item=""
-                            tabIndex={0}
+                            proposal={proposal}
+                            checked={accepted[i]}
+                            disabled={applying}
+                            onCheckedChange={(checked) =>
+                              setAccepted((prev) => ({ ...prev, [i]: checked }))
+                            }
                             onKeyDown={(e) => handleProposalKeyDown(e, i)}
-                          >
-                            <input
-                              type="checkbox"
-                              checked={!!accepted[i]}
-                              onChange={(e) =>
-                                setAccepted((prev) => ({ ...prev, [i]: e.target.checked }))
-                              }
-                              disabled={applying}
-                              data-proposal-accept=""
-                              tabIndex={-1}
-                            />
-                            <div className="dm-helper-proposal-body">
-                              <div className="dm-helper-proposal-row">
-                                <span className="dm-helper-proposal-type">{proposal.type}</span>
-                                <span className="dm-helper-proposal-field">→ {proposal.affectedField}</span>
-                                {conf !== null && (
-                                  <span className="dm-helper-proposal-confidence" data-proposal-confidence={conf}>
-                                    {conf}%
-                                  </span>
-                                )}
-                              </div>
-                              {summary && (
-                                <p className="dm-helper-proposal-payload" data-proposal-payload="">{summary}</p>
-                              )}
-                              <p className="dm-helper-proposal-rationale">{proposal.rationale}</p>
-                            </div>
-                          </label>
+                          />
                         );
                       })}
                     </div>
@@ -1055,13 +1078,10 @@ export function HelperSidecar({ open, onClose, workspaceConfig, initialIntent, i
                 )}
 
                 {result.receipts && (
-                  <p className="dm-field-hint" style={{ marginTop: 8 }} data-helper-receipt="">
-                    Run: {result.receipts.model} · confidence{" "}
-                    {typeof result.receipts.confidence === "number"
-                      ? `${Math.round(result.receipts.confidence * 100)}%`
-                      : "n/a"}{" "}
-                    · {result.receipts.latencyMs}ms
-                  </p>
+                  <div className="dm-helper-run-meta" data-helper-receipt="">
+                    <span>{result.receipts.model || "run"}</span>
+                    <span>{formatRunDuration(result.receipts.latencyMs)}</span>
+                  </div>
                 )}
               </div>
               )}

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

@@ -202,9 +202,9 @@ export function ReferencePicker({
     <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 }}>
+        <p className="dm-reference-picker-warning">
           <AlertTriangle size={12} aria-hidden />
-          <span>Selected reference is missing or filtered out. Pick a new row or adjust API Registry status.</span>
+          <span>Missing reference. Pick a row or test the API Registry.</span>
         </p>
       )}
       <SearchableSelect

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

@@ -857,7 +857,8 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .workspace-dashboard-title {
   min-width: 0;
 }
-.workspace-dashboard-title button {
+.workspace-dashboard-title button,
+.workspace-dashboard-title a {
   min-width: 0;
   display: inline-flex;
   align-items: center;
@@ -870,6 +871,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   overflow: hidden;
   padding: 0;
   text-align: left;
+  text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -953,17 +955,24 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   background: #ffffff;
   box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
 }
-.workspace-row-action-menu button {
+.workspace-row-action-menu button,
+.workspace-row-action-menu a {
   width: 100%;
   min-height: 30px;
+  display: inline-flex;
+  align-items: center;
   justify-content: flex-start;
   border: 0;
   border-radius: 6px;
   background: transparent;
   color: #344054;
+  font: inherit;
+  font-size: 12px;
   padding: 0 9px;
+  text-decoration: none;
 }
-.workspace-row-action-menu button:hover {
+.workspace-row-action-menu button:hover,
+.workspace-row-action-menu a:hover {
   background: #f5f5f5;
   border-color: transparent;
 }
@@ -3079,6 +3088,55 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   border-top: 1px solid #eeeeec;
   padding: 20px 0;
 }
+.workspace-settings-accordion {
+  gap: 12px;
+}
+.workspace-settings-accordion-trigger {
+  width: 100%;
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+  text-align: left;
+}
+.workspace-settings-accordion-trigger > span {
+  min-width: 0;
+  display: grid;
+  gap: 3px;
+}
+.workspace-settings-accordion-trigger h3 {
+  margin: 0;
+}
+.workspace-settings-accordion-trigger em {
+  min-width: 0;
+  display: block;
+  color: #888;
+  font-size: 12px;
+  font-style: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.workspace-settings-accordion-trigger svg {
+  flex: 0 0 auto;
+  color: #777;
+  transition: transform .16s ease;
+}
+.workspace-settings-accordion.is-open .workspace-settings-accordion-trigger svg {
+  transform: rotate(180deg);
+}
+.workspace-settings-accordion-body {
+  min-height: 0;
+  display: grid;
+  gap: 12px;
+}
 .workspace-apps-linkage-section {
   flex: 0 0 auto;
   padding-bottom: 16px;
@@ -3089,6 +3147,9 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   grid-template-rows: auto minmax(0, 1fr);
   padding-bottom: 0;
 }
+.workspace-apps-list-section .workspace-settings-accordion-body {
+  min-height: 0;
+}
 .workspace-settings-section:first-of-type {
   border-top: 0;
   padding-top: 0;
@@ -3577,6 +3638,52 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   font-size: 12px;
   line-height: 1.4;
 }
+.workspace-settings-action {
+  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid #dedede;
+  border-radius: 6px;
+  background: #fff;
+  color: #333;
+  font: inherit;
+  font-size: 12px;
+  padding: 0 10px;
+}
+.workspace-settings-codex-sites-list {
+  display: grid;
+  gap: 6px;
+  padding: 0 14px 0;
+}
+.workspace-settings-codex-sites-list a,
+.workspace-settings-codex-sites-list button {
+  min-height: 34px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) auto;
+  gap: 10px;
+  align-items: center;
+  border: 1px solid #ececea;
+  border-radius: 6px;
+  background: #fff;
+  color: #333;
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  text-decoration: none;
+  padding: 0 10px;
+}
+.workspace-settings-codex-sites-list span,
+.workspace-settings-codex-sites-list em {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.workspace-settings-codex-sites-list em {
+  color: #777;
+  font-style: normal;
+}
 
 /* Source picker */
 .workspace-source-list {
@@ -4639,7 +4746,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .dm-detail-v2-title h2 { margin: 0; font-size: 15px; font-weight: 600; color: #111827; flex: 1; }
 .dm-detail-v2-meta { display: flex; align-items: center; gap: 10px; padding-left: 21px; font-size: 12px; color: #9ca3af; }
 .dm-detail-v2-meta code { font-size: 11px; color: #6b7280; background: #f3f4f6; border-radius: 4px; padding: 2px 6px; }
-.dm-detail-v3 { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: hidden; }
+.dm-detail-v3 { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: visible; }
 .dm-picker { position: relative; min-width: 280px; }
 .dm-picker-trigger { width: min(420px, 100%); display: inline-flex; align-items: center; gap: 10px; min-height: 40px; border: 1px solid #dbe2ea; border-radius: 10px; background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(15,23,42,.05); font: inherit; padding: 0 12px; cursor: pointer; text-align: left; }
 .dm-picker.open .dm-picker-trigger { border-color: #94a3b8; box-shadow: 0 0 0 4px rgba(148,163,184,.14); }
@@ -4680,6 +4787,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .workspace-toolbar-actions .dm-picker-popover {
   left: auto;
   right: 0;
+  z-index: 220;
 }
 
 /* Active-object title block in the workspace toolbar — replaces the
@@ -4729,13 +4837,13 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   font-weight: 400;
   color: #6b7280;
 }
-.dm-picker-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; width: 360px; display: grid; gap: 10px; padding: 12px; border: 1px solid #dbe2ea; border-radius: 14px; background: #fff; box-shadow: 0 28px 80px rgba(15,23,42,.24); overflow: visible; }
+.dm-picker-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 220; width: min(360px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 120px)); display: grid; gap: 10px; padding: 12px; border: 1px solid #dbe2ea; border-radius: 14px; background: #fff; box-shadow: 0 28px 80px rgba(15,23,42,.24); overflow-y: auto; overflow-x: visible; }
 .dm-picker-tabs { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px; background: #f8fafc; }
 .dm-picker-tabs button { height: 28px; border: 0; border-radius: 999px; background: transparent; color: #64748b; font: inherit; font-size: 12px; padding: 0 10px; cursor: pointer; }
 .dm-picker-tabs button.active { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
 .dm-picker-section { display: grid; gap: 8px; }
 .dm-picker-section > p { margin: 0; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; }
-.dm-picker-scroll { display: grid; gap: 4px; max-height: 220px; overflow-y: auto; padding-right: 10px; scrollbar-gutter: stable; }
+.dm-picker-scroll { display: grid; gap: 4px; max-height: none; overflow: visible; padding-right: 10px; scrollbar-gutter: stable; }
 .dm-picker-item { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; }
 .dm-picker-row { width: 100%; display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 34px; border: 0; border-radius: 9px; background: transparent; color: #334155; font: inherit; font-size: 12px; font-weight: 500; padding: 0 10px; cursor: pointer; text-align: left; }
 .dm-picker-row:hover, .dm-picker-item.active .dm-picker-row { background: #f1f5f9; color: #111827; }
@@ -4746,7 +4854,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .dm-picker-icon-btn:hover { color: #111827; border-color: #cbd5e1; }
 .dm-picker-icon-btn.danger:hover { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
 .dm-picker-lock { margin-left: auto; color: #94a3b8; }
-.dm-picker-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 55; display: grid; gap: 4px; min-width: 156px; padding: 8px; border: 1px solid #dbe2ea; border-radius: 10px; background: #fff; box-shadow: 0 20px 44px rgba(15,23,42,.2), 0 4px 12px rgba(15,23,42,.08); }
+.dm-picker-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 240; display: grid; gap: 4px; min-width: 156px; padding: 8px; border: 1px solid #dbe2ea; border-radius: 10px; background: #fff; box-shadow: 0 20px 44px rgba(15,23,42,.2), 0 4px 12px rgba(15,23,42,.08); }
 .dm-picker-menu button { display: inline-flex; align-items: center; gap: 8px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: #334155; font: inherit; font-size: 12px; padding: 0 10px; cursor: pointer; text-align: left; }
 .dm-picker-menu button:hover { background: #f1f5f9; color: #111827; }
 .dm-picker-menu button.danger:hover { background: #fef2f2; color: #b91c1c; }
@@ -4922,7 +5030,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .dm-db-status.warn { border-color: #fde68a; background: #fffbeb; color: #92400e; }
 .dm-db-status.warn span { background: #f59e0b; }
 .dm-record-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(15,23,42,.12); }
-.dm-record-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; display: flex; flex-direction: column; width: min(440px, 100vw); background: #fff; border-left: 1px solid #dfe3e8; box-shadow: -10px 0 34px rgba(15,23,42,.16); }
+.dm-record-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; display: flex; flex-direction: column; min-height: 0; width: min(440px, 100vw); background: #fff; border-left: 1px solid #dfe3e8; box-shadow: -10px 0 34px rgba(15,23,42,.16); overflow: hidden; }
 .dm-record-drawer-wide { width: min(780px, 100vw); }
 .dm-api-action-card {
   display: grid;
@@ -4962,6 +5070,59 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .dm-api-action-card-body h3 { margin: 0; font-size: 14px; font-weight: 650; color: #111827; }
 .dm-api-action-card-body p { margin: 0; font-size: 12px; line-height: 1.45; color: #4b5563; }
 .dm-api-action-card-cta { flex-shrink: 0; align-self: center; }
+
+/* Governed creation cockpit — vertical journey inside the api-registry drawer.
+   Overrides the action-card 3-col grid and reuses the workspace's own status
+   chip (.dm-db-status) + dm-btn-* buttons. No new colors, no new primitive. */
+.dm-cockpit { display: block; grid-template-columns: none; transition: box-shadow .14s, background .14s; }
+.dm-cockpit.is-collapsed { padding-bottom: 12px; }
+.dm-cockpit-head { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; }
+.dm-cockpit-head:hover .dm-api-action-card-body h3 { color: #000; }
+.dm-cockpit-head:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 4px; border-radius: 6px; }
+.dm-cockpit-count { flex-shrink: 0; font-size: 11px; font-weight: 700; color: #94a3b8; font-variant-numeric: tabular-nums; padding-top: 2px; }
+.dm-cockpit-steps { list-style: none; margin: 10px 0 0; padding: 0; }
+.dm-cockpit-step { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid #edf0f3; }
+.dm-cockpit-step:first-child { border-top: 0; }
+.dm-cockpit-step-chip { flex-shrink: 0; align-self: start; margin-top: 1px; min-width: 64px; justify-content: center; }
+.dm-cockpit-step-body { min-width: 0; display: grid; gap: 2px; }
+.dm-cockpit-step-label { margin: 0; font-size: 13px; font-weight: 600; color: #111827; }
+.dm-cockpit-step-desc { margin: 0; font-size: 12px; line-height: 1.45; color: #64748b; }
+.dm-cockpit-step-hint { margin: 0; font-size: 11px; line-height: 1.4; color: #94a3b8; }
+.dm-cockpit-step button { flex-shrink: 0; align-self: center; }
+.dm-cockpit-step-muted .dm-cockpit-step-label,
+.dm-cockpit-step-muted .dm-cockpit-step-desc { color: #94a3b8; }
+.dm-cockpit-step-next { background: #f8fafc; margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-radius: 6px; }
+.dm-cockpit-shape { margin-top: 12px; padding-top: 12px; border-top: 1px solid #edf0f3; display: grid; gap: 6px; }
+.dm-cockpit-shape-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.dm-cockpit-shape-head .dm-api-action-card-eyebrow { margin: 0; }
+.dm-cockpit-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
+.dm-cockpit-field { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 2px 8px; }
+.dm-cockpit-field b { font-weight: 700; color: #94a3b8; text-transform: uppercase; font-size: 10px; letter-spacing: .03em; }
+.dm-cockpit-receipts { margin-top: 12px; padding-top: 12px; border-top: 1px solid #edf0f3; }
+.dm-cockpit-receipts ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
+.dm-cockpit-receipt { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; }
+.dm-cockpit-receipt-chip { align-self: start; }
+.dm-cockpit-receipt-text { font-size: 12px; color: #64748b; line-height: 1.4; }
+
+/* Serverless upgrade — toolbar button, one-time nudge, and cockpit panel. */
+.dm-workflow-upgrade-btn { position: relative; }
+.dm-workflow-upgrade-btn.is-serverless { color: #166534; }
+.dm-workflow-upgrade-btn.is-pulse { color: #111827; }
+.dm-workflow-upgrade-btn[data-tooltip]:hover::after {
+  content: attr(data-tooltip); position: absolute; top: 100%; right: 0; margin-top: 6px;
+  white-space: nowrap; background: #111827; color: #fff; font-size: 11px; font-weight: 500;
+  padding: 5px 8px; border-radius: 6px; z-index: 40; box-shadow: 0 4px 12px rgba(15,23,42,.18);
+}
+.dm-workflow-upgrade-nudge { align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; }
+.dm-workflow-upgrade-nudge > div:first-child { min-width: 0; padding-right: 10px; }
+.dm-workflow-upgrade-nudge strong,
+.dm-workflow-upgrade-nudge span { line-height: 1.35; }
+.dm-workflow-upgrade-nudge-actions { display: inline-flex; align-items: center; gap: 8px; }
+.dm-workflow-upgrade-panel { width: auto; margin: 12px 8px 16px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.06); }
+.dm-workflow-upgrade-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 0; }
+.dm-workflow-upgrade-panel-head .dm-api-action-card-eyebrow { margin: 0; }
+.dm-workflow-upgrade-panel .dm-api-action-card { margin: 8px; box-shadow: none; }
+
 .dm-api-review-banner {
   display: grid;
   grid-template-columns: auto 1fr auto;
@@ -5115,6 +5276,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   display: flex;
   align-items: center;
   gap: 6px;
+  padding-left: 16px;
   min-width: max-content;
   flex: 1 0 auto;
   color: #8b8b91;
@@ -5168,6 +5330,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   display: flex;
   align-items: center;
   gap: 6px;
+  padding-right: 16px;
   flex: 0 1 auto;
   min-width: 0;
   max-width: 58vw;
@@ -5917,6 +6080,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .dm-drawer-hidden-list { display: flex; flex-wrap: wrap; gap: 8px; }
 .dm-record-drawer-head p { margin: 0 0 3px; color: #94a3b8; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
 .dm-record-drawer-head h2 { margin: 0; color: #111827; font-size: 16px; font-weight: 650; }
+.dm-record-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 0 0 28px; }
 .dm-record-testbar { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid #edf0f3; background: #fbfdff; }
 .dm-record-testbar > span:last-child { min-width: 0; color: #64748b; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dm-record-testbar[data-panel="sandbox-agent-auth"] {
@@ -6006,7 +6170,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   white-space: pre-wrap;
   word-break: break-word;
 }
-.dm-record-fields { display: grid; gap: 8px; padding: 14px 16px 28px; overflow-y: auto; }
+.dm-record-fields { display: grid; align-content: start; gap: 8px; min-height: 0; padding: 14px 16px 0; }
 .dm-record-field { display: grid; gap: 5px; }
 .dm-record-field span { color: #475569; font-size: 11px; font-weight: 650; }
 .dm-record-field input,
@@ -6029,7 +6193,7 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .dm-radio-row input[type="radio"], .dm-check-row input[type="checkbox"] { width: 14px; height: 14px; margin: 1px 0 0; padding: 0; box-shadow: none; accent-color: #111827; }
 .dm-radio-row span, .dm-check-row span { color: #1f2937; font-size: 12px; font-weight: 500; }
 .dm-check-row { cursor: pointer; }
-.dm-select { position: relative; width: 100%; min-width: 180px; font-size: 11px; }
+.dm-select { position: relative; width: 100%; min-width: 0; font-size: 11px; }
 .dm-select-trigger { width: 100%; min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(15,23,42,.05); font: inherit; font-size: 11px; padding: 6px 10px; text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
 .dm-select-trigger:hover:not(:disabled) { border-color: #94a3b8; box-shadow: 0 2px 8px rgba(15,23,42,.08); }
 .dm-select.open .dm-select-trigger { border-color: #64748b; box-shadow: 0 0 0 3px rgba(100,116,139,.12), 0 2px 8px rgba(15,23,42,.08); }
@@ -6054,8 +6218,12 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .dm-select-pager button { height: 26px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #334155; font: inherit; font-size: 12px; padding: 0 8px; cursor: pointer; }
 .dm-select-pager button:disabled { opacity: .45; cursor: not-allowed; }
 .dm-select-pager span { color: #64748b; font-size: 12px; font-weight: 650; }
-.dm-db-grid td:has(.dm-select) { overflow: visible; padding-top: 5px; padding-bottom: 5px; }
-.dm-db-grid td .dm-select { min-width: 230px; }
+.dm-reference-picker { display: grid; gap: 6px; width: min(240px, 100%); min-width: 0; }
+.dm-reference-picker-warning { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 0; padding: 5px 7px; border: 1px solid #fde68a; border-radius: 6px; background: #fffbeb; color: #92400e; font-size: 11px; line-height: 1.25; }
+.dm-reference-picker-warning svg { flex: 0 0 auto; }
+.dm-reference-picker-warning span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dm-db-grid td:has(.dm-select) { overflow: visible; padding-top: 5px; padding-bottom: 5px; vertical-align: top; }
+.dm-db-grid td .dm-select { min-width: 0; }
 .dm-json-field { position: relative; }
 .dm-json-field > span { padding-right: 34px; }
 .dm-json-expand { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #64748b; box-shadow: 0 1px 2px rgba(15,23,42,.05); opacity: 0; cursor: pointer; transition: opacity .12s, border-color .12s, color .12s, box-shadow .12s; }
@@ -6499,6 +6667,40 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   background: #f5f5f5;
   border-color: #9ca3af;
 }
+.dm-helper-run-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-top: 8px;
+  border-top: 1px solid #e5e7eb;
+  color: #6b7280;
+  font-size: 12px;
+  line-height: 1.3;
+}
+.dm-helper-proposal-card-row {
+  grid-template-columns: 18px 1fr;
+}
+.dm-helper-proposal-card-row input[type=checkbox] {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  accent-color: #111827;
+}
+.dm-helper-proposal-card-toggle {
+  display: grid;
+  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
 
 .dm-helper-typing {
   display: inline-flex;
@@ -8852,7 +9054,7 @@ body.workspace-rail-collapsed .workspace-builder.workspace-lens-page,
 .workspace-lens-helper-callout-btn { flex-shrink: 0; font-size: 12px; font-weight: 600; color: #111827; background: #ffffff; border: 1px solid #d1d5db; border-radius: 6px; padding: 7px 12px; cursor: pointer; }
 .workspace-lens-helper-callout-btn:hover:not(:disabled) { background: #f3f4f6; }
 .workspace-lens-helper-callout-btn:disabled { opacity: 0.6; cursor: default; }
-.workspace-helper-setup-modal-backdrop { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(17, 24, 39, 0.42); backdrop-filter: blur(3px); }
+.workspace-helper-setup-modal-backdrop { position: fixed; inset: 0; z-index: 5100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(17, 24, 39, 0.42); backdrop-filter: blur(3px); }
 .workspace-helper-setup-modal { position: relative; width: min(620px, 100%); max-height: min(720px, calc(100vh - 48px)); overflow: auto; background: #ffffff; border: 1px solid #d1d5db; border-radius: 8px; box-shadow: 0 24px 70px rgba(17, 24, 39, 0.28); padding: 18px; }
 .workspace-helper-setup-modal-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #6b7280; cursor: pointer; }
 .workspace-helper-setup-modal-close:hover { background: #f9fafb; color: #111827; }

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/settings/apps/codex-sites-data-model-card.jsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { ExternalLink, Rocket } from "lucide-react";
+import {
+  CODEX_SITES_OBJECT_ID,
+  ensureCodexSitesDataModel,
+  isCodexSiteUrl
+} from "@/lib/codex-sites-workspace-adapter";
+import { SettingsAccordionSection } from "./settings-accordion-section.jsx";
+
+function CodexSitesDataModelCard({ apps, dataModel }) {
+  const objects = Array.isArray(dataModel?.objects) ? dataModel.objects : [];
+  const object = objects.find((item) => item?.id === CODEX_SITES_OBJECT_ID) || null;
+  const rows = Array.isArray(object?.rows) ? object.rows : [];
+  const liveRows = rows.filter((row) => {
+    const status = String(row?.status || "").toLowerCase();
+    return isCodexSiteUrl(row?.url) && (status === "live" || status === "active");
+  });
+  const liveCount = liveRows.length;
+  const appCount = new Set(rows.map((row) => row?.app).filter(Boolean)).size;
+
+  async function openDataModel() {
+    if (!object) {
+      const nextDataModel = ensureCodexSitesDataModel(dataModel, apps);
+      const response = await fetch("/api/workspace", {
+        method: "PATCH",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ dataModel: nextDataModel })
+      });
+      if (!response.ok) {
+        const payload = await response.json().catch(() => ({}));
+        window.alert(payload.error || "Failed to create Codex Sites object.");
+        return;
+      }
+    }
+    window.location.href = `/data-model?object=${encodeURIComponent(CODEX_SITES_OBJECT_ID)}`;
+  }
+
+  return <SettingsAccordionSection
+    id="codex-sites"
+    title="Codex Sites"
+    summary={`${rows.length} site${rows.length === 1 ? "" : "s"} · ${liveCount} live · ${appCount || apps?.length || 0} app${(appCount || apps?.length || 0) === 1 ? "" : "s"}`}
+    className="workspace-apps-linkage-section workspace-codex-sites-section"
+  >
+    <div className="workspace-app-row">
+      <span className="workspace-provider-mark"><Rocket size={15} /></span>
+      <div>
+        <strong>Codex Sites</strong>
+        <p>Manage Codex-hosted site URLs as a governed custom Data Model object attached to workspace apps and clients.</p>
+        <div className="workspace-integration-meta">
+          <span>{object ? "configured" : "not configured"}</span>
+          <span>{rows.length} site{rows.length === 1 ? "" : "s"}</span>
+          <span>{liveCount} live</span>
+          <span>{appCount || apps?.length || 0} app{(appCount || apps?.length || 0) === 1 ? "" : "s"}</span>
+        </div>
+      </div>
+      <button type="button" className="workspace-settings-action" onClick={openDataModel}>
+        <ExternalLink size={14} />{object ? "Manage" : "Set up"}
+      </button>
+    </div>
+    {rows.length ? <div className="workspace-settings-codex-sites-list">
+      {rows.slice(0, 4).map((row, index) => isCodexSiteUrl(row?.url) ? (
+        <a key={row.id || row.Name || index} href={row.url} target="_blank" rel="noreferrer">
+          <span>{row.Name || `Site ${index + 1}`}</span>
+          <em>{row.client || "Workspace"} · {row.app || "apps/workspace"}</em>
+          <ExternalLink size={13} />
+        </a>
+      ) : (
+        <button key={row.id || row.Name || index} type="button" onClick={openDataModel}>
+          <span>{row.Name || `Site ${index + 1}`}</span>
+          <em>{row.client || "Workspace"} · {row.status || "draft"}</em>
+        </button>
+      ))}
+    </div> : null}
+  </SettingsAccordionSection>;
+}
+
+export {
+  CODEX_SITES_OBJECT_ID,
+  CodexSitesDataModelCard
+};