npm - @growthub/cli - Versions diffs - 0.13.6 → 0.13.8 - Mend

@growthub/cli 0.13.6 → 0.13.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

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

@@ -1,7 +1,8 @@
 "use client";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { CheckCircle, ExternalLink, Loader2, RefreshCw, ShieldCheck, XCircle } from "lucide-react";
+import Link from "next/link";
+import { ArrowRight, CheckCircle, ExternalLink, Loader2, RefreshCw, ShieldCheck, XCircle } from "lucide-react";
 /**
  * NangoConnectionPanel — interactive sidecar for an api-registry row whose
@@ -114,7 +115,7 @@ function StatusBadge({ status, label }) {
   );
 }
-export function NangoConnectionPanel({ row, disabled, onUpdateRow }) {
+export function NangoConnectionPanel({ row, disabled, onUpdateRow, templateContext }) {
   const initialProviderConfigKey = useMemo(() => deriveProviderConfigKey(row), [row]);
   const initialConnectionId = useMemo(() => deriveDefaultConnectionId(row), [row]);
   const initialStatus = useMemo(() => deriveInitialStatus(row), [row]);
@@ -491,6 +492,40 @@ export function NangoConnectionPanel({ row, disabled, onUpdateRow }) {
           </button>
         ) : null}
       </div>
+      {/*
+       * Template-aware affordances. When this row was scaffolded as part
+       * of a workspace template (project-management today), surface a
+       * "next step" hint linking back to the activation checklist or the
+       * seeded workflow. Other rows render no template context at all.
+       */}
+      {templateContext && (templateContext.nextHref || templateContext.backHref) ? (
+        <div
+          className={
+            "workspace-template-context-banner"
+            + ((statusKind === "connected" || persistedStatus === "connected") ? "" : " is-warn")
+          }
+          role="note"
+        >
+          <span>
+            {(statusKind === "connected" || persistedStatus === "connected")
+              ? (templateContext.nextLabel || "Next: run the seeded workflow.")
+              : (templateContext.pendingLabel || "Finish OAuth above, then continue setup.")}
+          </span>
+          {templateContext.backHref ? (
+            <Link href={templateContext.backHref} className="workspace-template-context-link">
+              <span>Back to setup checklist</span>
+              <ArrowRight size={12} aria-hidden="true" />
+            </Link>
+          ) : null}
+          {templateContext.nextHref ? (
+            <Link href={templateContext.nextHref} className="workspace-template-context-link">
+              <span>{templateContext.nextCta || "Open workflow"}</span>
+              <ArrowRight size={12} aria-hidden="true" />
+            </Link>
+          ) : null}
+        </div>
+      ) : null}
     </section>
   );
 }

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

@@ -445,46 +445,53 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .workspace-rail.is-collapsed {
   padding: 18px 10px;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
 }
+/* Collapsed rail = a single clean icon column. Every primary action stays
+   tracked as an icon (toggle, home, search, chat, builder, lens, management,
+   settings); only labels, folders, chat list, brand, helper pill, activation
+   panel, and the duplicate top-bar gear are hidden. Native title attributes
+   provide the hover tooltip of each item's name. */
 .workspace-rail.is-collapsed .workspace-rail-brand-button,
 .workspace-rail.is-collapsed .workspace-rail-folders,
-.workspace-rail.is-collapsed .workspace-nav,
 .workspace-rail.is-collapsed .workspace-rail-chat,
 .workspace-rail.is-collapsed .workspace-rail-status,
-.workspace-rail.is-collapsed .workspace-rail-helper-pill {
+.workspace-rail.is-collapsed .workspace-rail-helper-pill,
+.workspace-rail.is-collapsed .workspace-rail-activation-slot,
+.workspace-rail.is-collapsed .workspace-rail-icon-btn[aria-label="Workspace settings"],
+.workspace-rail.is-collapsed .workspace-nav-label {
   display: none;
 }
-.workspace-rail.is-collapsed .workspace-rail-topbar {
-  justify-content: center;
-  width: 100%;
-  display: contents;
-}
-.workspace-rail.is-collapsed .workspace-rail-topbar-actions {
+.workspace-rail.is-collapsed .workspace-rail-topbar,
+.workspace-rail.is-collapsed .workspace-rail-topbar-actions,
+.workspace-rail.is-collapsed .workspace-rail-tabbar,
+.workspace-rail.is-collapsed .workspace-rail-tabs {
   display: contents;
 }
-.workspace-rail.is-collapsed .workspace-rail-icon-btn[aria-pressed="true"] {
-  order: 1;
-}
-.workspace-rail.is-collapsed .workspace-rail-icon-btn[data-rail-search] {
-  order: 3;
-}
-.workspace-rail.is-collapsed .workspace-rail-icon-btn[aria-label="Workspace settings"] {
-  order: 4;
-}
+/* Vertical order: toggle · home · search · chat · [nav: builder, lens,
+   management, settings]. */
+.workspace-rail.is-collapsed .workspace-rail-icon-btn[aria-pressed="true"] { order: 1; }
+.workspace-rail.is-collapsed .workspace-rail-tab[aria-label="Home"] { order: 2; }
+.workspace-rail.is-collapsed .workspace-rail-icon-btn[data-rail-search] { order: 3; }
+.workspace-rail.is-collapsed .workspace-rail-tab[aria-label="Helper conversations"] { order: 4; }
+.workspace-rail.is-collapsed .workspace-nav { order: 5; }
 .workspace-rail.is-collapsed .workspace-rail-icon-btn[aria-pressed="true"] svg {
   transform: rotate(180deg);
 }
-.workspace-rail.is-collapsed .workspace-rail-tabbar {
+.workspace-rail.is-collapsed .workspace-nav {
   display: flex;
-  justify-content: center;
-  width: 100%;
-  order: 2;
-}
-.workspace-rail.is-collapsed .workspace-rail-tabs {
   flex-direction: column;
+  align-items: center;
   gap: 8px;
+  width: 100%;
+}
+.workspace-rail.is-collapsed .workspace-nav a,
+.workspace-rail.is-collapsed .workspace-nav .workspace-nav-button {
+  justify-content: center;
+  gap: 0;
   padding: 0;
+  width: 34px;
+  height: 34px;
 }
 .workspace-rail.is-collapsed .workspace-rail-tab,
 .workspace-rail.is-collapsed .workspace-rail-icon-btn {
@@ -525,12 +532,31 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   margin-top: 2px;
 }
 .workspace-nav a,
-.workspace-nav-static {
+.workspace-nav-static,
+.workspace-nav .workspace-nav-button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
   border-radius: 6px;
   color: #686868;
   font-size: 13px;
   padding: 8px 9px;
   text-decoration: none;
+  width: 100%;
+}
+.workspace-nav a > svg,
+.workspace-nav .workspace-nav-button > svg {
+  flex-shrink: 0;
+  color: #9a9a9a;
+}
+.workspace-nav a.active > svg,
+.workspace-nav .workspace-nav-button.active > svg {
+  color: #2c2c2c;
+}
+.workspace-nav-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .workspace-nav-static {
   cursor: default;
@@ -559,7 +585,10 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
   padding: 16px;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-gutter: stable;
+  overscroll-behavior: contain;
 }
 .workspace-toolbar {
   min-height: 48px;
@@ -639,6 +668,54 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .workspace-tabs > button svg {
   flex: 0 0 auto;
 }
+.workspace-toolbar-actions > .workspace-finish-setup-control {
+  gap: 0;
+  padding: 0;
+  overflow: hidden;
+}
+.workspace-finish-setup-trigger,
+.workspace-finish-setup-dismiss {
+  min-height: 28px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 10px;
+  cursor: pointer;
+}
+.workspace-finish-setup-trigger:hover,
+.workspace-finish-setup-dismiss:hover {
+  background: #fafafa;
+}
+.workspace-finish-setup-control.is-complete {
+  border-color: #bbf7d0;
+  color: #047857;
+  background: #f0fdf4;
+}
+.workspace-finish-setup-control.is-complete .workspace-finish-setup-trigger:hover,
+.workspace-finish-setup-control.is-complete .workspace-finish-setup-dismiss:hover {
+  background: #dcfce7;
+}
+.workspace-finish-setup-dismiss {
+  width: 30px;
+  padding: 0;
+  border-left: 1px solid #bbf7d0;
+}
+.workspace-finish-setup-dismiss-x {
+  display: none;
+}
+.workspace-finish-setup-dismiss:hover {
+  color: #b91c1c;
+}
+.workspace-finish-setup-dismiss:hover .workspace-finish-setup-dismiss-check {
+  display: none;
+}
+.workspace-finish-setup-dismiss:hover .workspace-finish-setup-dismiss-x {
+  display: block;
+}
 .workspace-table,
 .workspace-canvas {
   border: 1px solid #e7e7e7;
@@ -4120,6 +4197,68 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .workspace-chart-type-tabs button.active em {
   color: #075985;
 }
+.workspace-table-view-tabs {
+  grid-template-columns: repeat(4, 1fr);
+}
+.workspace-table-transform-preview {
+  display: grid;
+  gap: 8px;
+  min-height: 88px;
+  margin-top: 10px;
+  color: #4b5563;
+  font-size: 11px;
+}
+.workspace-table-transform-preview.is-board,
+.workspace-table-transform-preview.is-calendar {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.workspace-table-transform-preview.is-calendar {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+.workspace-table-transform-preview section {
+  min-width: 0;
+  border: 1px solid #eeeeee;
+  border-radius: 5px;
+  background: #fafafa;
+  padding: 6px;
+}
+.workspace-table-transform-preview strong,
+.workspace-table-transform-preview span,
+.workspace-table-transform-preview em {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.workspace-table-transform-preview strong {
+  color: #111827;
+  font-size: 11px;
+}
+.workspace-table-transform-preview span {
+  margin-top: 5px;
+  border-radius: 4px;
+  background: #fff;
+  padding: 5px 6px;
+}
+.workspace-table-transform-preview div {
+  display: grid;
+  grid-template-columns: minmax(64px, 1fr) 2fr minmax(32px, auto);
+  align-items: center;
+  gap: 8px;
+}
+.workspace-table-transform-preview i {
+  display: block;
+  width: var(--width, 42%);
+  height: 9px;
+  margin-left: var(--offset, 0);
+  border-radius: 999px;
+  background: #93c5fd;
+}
+.workspace-table-transform-preview em {
+  color: #9ca3af;
+  font-style: normal;
+}
 .workspace-axis-range {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -8501,3 +8640,275 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .dm-swarm-phase { border: 1px solid #edf0f3; border-radius: 4px; padding: 6px 8px; font-size: 11px; }
 .dm-swarm-phase summary { cursor: pointer; color: #6b7280; font-weight: 500; }
 .dm-swarm-phase pre { margin: 6px 0 0; font-size: 11px; white-space: pre-wrap; color: #111827; max-height: 240px; overflow: auto; }
+/* Customer Activation Layer V1 — workspace activation panel */
+.workspace-activation-panel { border: 1px solid #e5e7eb; border-radius: 10px; background: #ffffff; padding: 18px 20px; margin: 0 0 20px; display: flex; flex-direction: column; gap: 16px; }
+.workspace-activation-panel.is-complete { background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 80%); border-color: #bbf7d0; }
+.workspace-activation-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
+.workspace-activation-head-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; min-width: 0; }
+.workspace-activation-eyebrow { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; font-weight: 600; }
+.workspace-activation-headline { margin: 0; font-size: 18px; font-weight: 600; color: #111827; line-height: 1.3; }
+.workspace-activation-subheadline { margin: 0; font-size: 13px; color: #4b5563; }
+.workspace-activation-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 120px; }
+.workspace-activation-progress-value { font-size: 11px; font-weight: 600; color: #475569; }
+.workspace-activation-progress-bar { display: block; width: 120px; height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
+.workspace-activation-progress-fill { display: block; height: 100%; background: #3b82f6; transition: width 200ms ease; }
+.workspace-activation-panel.is-complete .workspace-activation-progress-fill { background: #16a34a; }
+.workspace-activation-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
+.workspace-activation-step { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid #edf0f3; border-radius: 8px; background: #fbfcfd; transition: border-color 120ms ease, background 120ms ease; }
+.workspace-activation-step.is-next { border-color: #3b82f6; background: #eff6ff; }
+.workspace-activation-step.is-complete { background: #f0fdf4; border-color: #bbf7d0; }
+.workspace-activation-step.is-blocked { background: #fffbeb; border-color: #fde68a; }
+.workspace-activation-step.is-optional { opacity: 0.85; }
+.workspace-activation-step-status { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: #ffffff; border: 1px solid #cbd5f5; color: #3b82f6; flex-shrink: 0; }
+.workspace-activation-step.is-complete .workspace-activation-step-status { background: #16a34a; border-color: #16a34a; color: #ffffff; }
+.workspace-activation-step.is-blocked .workspace-activation-step-status { background: #fef3c7; border-color: #f59e0b; color: #b45309; }
+.workspace-activation-step.is-optional .workspace-activation-step-status { background: #f5f3ff; border-color: #c4b5fd; color: #7c3aed; }
+.workspace-activation-step-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
+.workspace-activation-step-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
+.workspace-activation-step-title { margin: 0; font-size: 13px; font-weight: 600; color: #111827; }
+.workspace-activation-step-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
+.workspace-activation-step-badge.is-complete { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
+.workspace-activation-step-badge.is-blocked { background: #fef3c7; color: #b45309; border-color: #fde68a; }
+.workspace-activation-step-badge.is-optional { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
+.workspace-activation-step-description { margin: 0; font-size: 12px; color: #475569; line-height: 1.5; }
+.workspace-activation-step-hint { display: inline-flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 11px; color: #6b7280; line-height: 1.45; }
+.workspace-activation-step-hint > svg { margin-top: 2px; flex-shrink: 0; }
+.workspace-activation-step-cta { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 12px; color: #1d4ed8; text-decoration: none; padding: 4px 0; }
+.workspace-activation-step-cta:hover { text-decoration: underline; }
+.workspace-activation-step-cta.is-primary { background: #3b82f6; color: #ffffff; border-radius: 6px; padding: 4px 10px; }
+.workspace-activation-step-cta.is-primary:hover { background: #2563eb; text-decoration: none; }
+.workspace-activation-helper-cta { display: flex; justify-content: flex-end; }
+.workspace-activation-helper-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px dashed #c7d2fe; color: #4338ca; font-size: 12px; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
+.workspace-activation-helper-btn:hover { background: #eef2ff; }
+/* Activation → Workspace Lens handoff teaser (shown once setup completes). */
+.workspace-activation-lens-teaser { margin-top: 14px; border-top: 1px solid #eef0f2; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.workspace-activation-lens-teaser-text { font-size: 12px; color: #4b5563; line-height: 1.45; }
+.workspace-activation-lens-teaser-link { font-size: 12px; font-weight: 600; color: #374151; text-decoration: none; white-space: nowrap; }
+.workspace-activation-lens-teaser-link:hover { text-decoration: underline; }
+/* Locked rail nav affordance (Workspace Lens before setup completes). */
+.workspace-nav-button.is-locked { opacity: 0.45; cursor: default; }
+/* ── Workspace Lens — post-activation operating surface ─────────────────────
+   Neutral, calm, aggregate-first. No semantic color overload, no icon spam. */
+body.workspace-rail-collapsed .workspace-builder.workspace-lens-page,
+.workspace-builder.workspace-lens-page { grid-template-columns: var(--workspace-rail-width) minmax(0, 1fr); height: 100vh; overflow: hidden; }
+.workspace-lens-surface { width: 100%; padding: 0; background: #f7f7f8; overflow-y: auto; overflow-x: hidden; }
+.workspace-lens-shell { width: 100%; max-width: none; margin: 0; padding: 24px 28px 32px; }
+.workspace-lens-locked { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; padding: 28px; max-width: 560px; margin: 48px auto; display: flex; flex-direction: column; gap: 8px; }
+.workspace-lens-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
+.workspace-lens-title { font-size: 18px; font-weight: 600; color: #111827; margin: 0; }
+.workspace-lens-subtitle { font-size: 13px; color: #6b7280; margin: 4px 0 0; }
+.workspace-lens-score { font-size: 12px; color: #4b5563; font-variant-numeric: tabular-nums; margin: 2px 0 0; }
+.workspace-lens-controls.workspace-builder-filterbar { margin: 0 0 14px; border: 1px solid #e8edf3; border-radius: 8px; background: #fff; }
+.workspace-lens-filters.workspace-builder-filterbar__segments { max-width: 100%; overflow-x: auto; }
+.workspace-lens-filter { white-space: nowrap; }
+.workspace-lens-filter.is-active { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
+.workspace-lens-search-wrap { flex-shrink: 0; }
+.workspace-lens-search { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #111827; font: inherit; font-size: 12px; padding: 0; }
+.workspace-lens-control-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
+.workspace-lens-control-card { border: 1px solid #e5e7eb; border-radius: 8px; background: #ffffff; min-height: 184px; padding: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); display: flex; flex-direction: column; gap: 12px; }
+.workspace-lens-control-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
+.workspace-lens-control-card-head h2 { margin: 0; color: #111827; font-size: 13px; font-weight: 600; line-height: 1.3; }
+.workspace-lens-control-card-head span { color: #6b7280; font-size: 12px; }
+.workspace-lens-icon-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #6b7280; cursor: pointer; }
+.workspace-lens-icon-btn:hover { border-color: #e5e7eb; background: #f9fafb; color: #111827; }
+.workspace-lens-checklist { display: flex; flex-direction: column; gap: 6px; }
+.workspace-lens-check-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; border-radius: 6px; background: #f3f4f6; color: #374151; padding: 0 10px; text-decoration: none; font-size: 12px; }
+.workspace-lens-check-item:hover { background: #e5e7eb; }
+.workspace-lens-check-item.is-complete { background: #dcfce7; color: #15803d; text-decoration: line-through; box-shadow: inset 3px 0 0 #22c55e; }
+.workspace-lens-check-item.is-complete svg { color: #16a34a; }
+.workspace-lens-stat-list { display: flex; flex-direction: column; gap: 0; margin-top: 14px; }
+.workspace-lens-stat-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; gap: 12px; min-height: 31px; border-bottom: 1px solid #eef0f2; color: #6b7280; font-size: 12px; }
+.workspace-lens-stat-row:last-child { border-bottom: 0; }
+.workspace-lens-stat-row strong { color: #111827; font-size: 13px; font-weight: 500; text-align: left; font-variant-numeric: tabular-nums; }
+.workspace-lens-helper-card-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: #4b5563; }
+.workspace-lens-helper-card-body svg { color: #111827; }
+.workspace-lens-helper-card-body strong { color: #111827; font-size: 13px; }
+.workspace-lens-helper-card-body p { margin: 0; color: #6b7280; font-size: 12px; line-height: 1.45; max-width: 260px; }
+.workspace-lens-helper-card-body button { margin-top: 4px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #111827; font-size: 12px; font-weight: 500; padding: 7px 12px; cursor: pointer; }
+.workspace-lens-helper-card-body button:hover { background: #f9fafb; }
+.workspace-lens-branches { margin: 24px 0 32px; }
+.workspace-lens-branches-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
+.workspace-lens-branches-head h2 { margin: 0; color: #111827; font-size: 18px; font-weight: 600; }
+.workspace-lens-branches-head span { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #e5e7eb; color: #374151; padding: 2px 8px; font-size: 11px; font-weight: 600; }
+.workspace-lens-branches-table { border: 1px solid #e5e7eb; border-radius: 8px; background: #ffffff; overflow: visible; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
+.workspace-lens-branch-row { position: relative; display: grid; grid-template-columns: minmax(240px, 1fr) auto; align-items: center; gap: 16px; min-height: 46px; border-bottom: 1px solid #eef0f2; padding: 0 16px; }
+.workspace-lens-branch-row:last-child { border-bottom: 0; }
+.workspace-lens-branch-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: #111827; font-size: 13px; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace); }
+.workspace-lens-branch-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.workspace-lens-branch-name svg { color: #4b5563; flex-shrink: 0; }
+.workspace-lens-branch-actions { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
+.workspace-lens-preview-pill,
+.workspace-lens-progress-pill,
+.workspace-lens-owner-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; border: 1px solid #e5e7eb; border-radius: 999px; background: #ffffff; color: #4b5563; padding: 0 9px; text-decoration: none; font-size: 11px; white-space: nowrap; }
+.workspace-lens-preview-pill:hover { background: #f9fafb; color: #111827; }
+.workspace-lens-owner-pill { border-color: transparent; color: #4b5563; }
+.workspace-lens-branch-summary,
+.workspace-lens-branch-next { display: none; grid-column: 1 / -1; margin: -6px 0 10px 22px; color: #6b7280; font-size: 12px; line-height: 1.4; }
+.workspace-lens-branch-next { margin-top: -8px; color: #374151; font-weight: 500; }
+.workspace-lens-action-menu { position: absolute; z-index: 80; top: 34px; right: 0; width: 190px; border: 1px solid #e5e7eb; border-radius: 8px; background: #ffffff; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
+.workspace-lens-action-menu button,
+.workspace-lens-action-menu a { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 0; border-radius: 6px; background: transparent; color: #111827; padding: 9px 8px; text-align: left; text-decoration: none; font-size: 12px; cursor: pointer; }
+.workspace-lens-action-menu button:hover,
+.workspace-lens-action-menu a:hover { background: #f3f4f6; }
+@media (max-width: 1100px) {
+  .workspace-lens-control-grid { grid-template-columns: 1fr; }
+  .workspace-lens-branch-row { grid-template-columns: 1fr; align-items: flex-start; padding: 10px 12px; gap: 8px; }
+  .workspace-lens-branch-actions { justify-content: flex-start; flex-wrap: wrap; }
+  .workspace-lens-branch-summary,
+  .workspace-lens-branch-next { margin-left: 22px; }
+}
+.workspace-lens-stream { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.workspace-lens-card { border: 1px solid #e8edf3; border-radius: 10px; background: #fff; padding: 12px 14px; }
+.workspace-lens-card.is-ready { opacity: 0.7; }
+.workspace-lens-card-head { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
+.workspace-lens-card-title { font-size: 13px; font-weight: 600; color: #111827; flex: 1; }
+.workspace-lens-chip { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; border: 1px solid #e5e7eb; border-radius: 999px; padding: 1px 8px; }
+.workspace-lens-chip.is-blocked { color: #374151; border-color: #d1d5db; background: #f3f4f6; }
+.workspace-lens-card-progress { font-size: 11px; color: #6b7280; font-variant-numeric: tabular-nums; }
+.workspace-lens-caret { color: #9ca3af; transition: transform 120ms ease; }
+.workspace-lens-caret.is-open { transform: rotate(180deg); }
+.workspace-lens-card-headline { font-size: 12px; color: #4b5563; line-height: 1.45; margin: 8px 0 0; }
+.workspace-lens-card-next { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; font-size: 12px; }
+.workspace-lens-next-label { color: #9ca3af; }
+.workspace-lens-next-link { color: #374151; font-weight: 600; text-decoration: none; }
+.workspace-lens-next-link:hover { text-decoration: underline; }
+.workspace-lens-card-detail { margin-top: 12px; border-top: 1px solid #f1f5f9; padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
+.workspace-lens-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
+.workspace-lens-step { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: #4b5563; }
+.workspace-lens-step-label { flex: 1; }
+.workspace-lens-step-status { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #9ca3af; }
+.workspace-lens-step.is-blocked .workspace-lens-step-status { color: #6b7280; font-weight: 600; }
+.workspace-lens-step-hint { flex-basis: 100%; font-size: 11px; color: #9ca3af; }
+.workspace-lens-blocked { font-size: 12px; color: #374151; margin: 0; }
+.workspace-lens-agent { border: 1px solid #f1f5f9; border-radius: 8px; background: #fafbfc; padding: 10px; }
+.workspace-lens-agent-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; margin: 0 0 6px; }
+.workspace-lens-agent-row { display: flex; gap: 8px; font-size: 12px; color: #4b5563; margin: 2px 0; }
+.workspace-lens-agent-row > span { color: #9ca3af; min-width: 84px; }
+.workspace-lens-empty { font-size: 12px; color: #9ca3af; padding: 16px; text-align: center; }
+/* Workspace contribution graph — neutral chrome, GitHub green cell scale. */
+.workspace-contrib { border: 1px solid #e8edf3; border-radius: 10px; background: #fff; padding: 14px 16px; margin-bottom: 16px; }
+.workspace-contrib-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
+.workspace-contrib-total { font-size: 12px; color: #4b5563; }
+.workspace-contrib-legend { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #9ca3af; }
+.workspace-contrib-grid-wrap { width: 100%; overflow: visible; }
+.workspace-contrib-months { display: grid; grid-template-columns: repeat(53, minmax(0, 1fr)); gap: 3px; margin-left: 38px; margin-bottom: 4px; }
+.workspace-contrib-month { font-size: 9px; color: #9ca3af; white-space: nowrap; }
+.workspace-contrib-body { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: stretch; }
+.workspace-contrib-weekdays { display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 3px; width: 30px; }
+.workspace-contrib-weekdays span { font-size: 9px; color: #9ca3af; line-height: 1; display: flex; align-items: center; }
+.workspace-contrib-weeks { display: grid; grid-template-columns: repeat(53, minmax(0, 1fr)); gap: 3px; min-width: 0; }
+.workspace-contrib-week { display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 3px; min-width: 0; }
+.workspace-contrib-cell { width: 100%; aspect-ratio: 1; min-height: 10px; max-height: 18px; border-radius: 3px; padding: 0; border: 1px solid rgba(27, 31, 35, 0.06); background: #ebedf0; cursor: pointer; }
+.workspace-contrib-cell:disabled { cursor: default; }
+.workspace-contrib-cell.lvl-0 { background: #ebedf0; }
+.workspace-contrib-cell.lvl-1 { background: #9be9a8; }
+.workspace-contrib-cell.lvl-2 { background: #40c463; }
+.workspace-contrib-cell.lvl-3 { background: #30a14e; }
+.workspace-contrib-cell.lvl-4 { background: #216e39; }
+.workspace-contrib-cell.has-count { border-color: rgba(27, 31, 35, 0.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 0 1px rgba(34,197,94,0.18); }
+.workspace-contrib-cell.has-count:hover { outline: 2px solid rgba(17, 24, 39, 0.75); outline-offset: 1px; }
+.workspace-contrib-cell.lvl-future { background: transparent; border-color: transparent; }
+.workspace-contrib-legend .workspace-contrib-cell { cursor: default; }
+.workspace-contrib-tooltip { position: fixed; transform: translate(-50%, calc(-100% - 8px)); z-index: 50; background: #111827; color: #fff; border-radius: 6px; padding: 6px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.18); display: flex; flex-direction: column; gap: 2px; pointer-events: auto; }
+.workspace-contrib-tooltip-count { font-size: 11px; font-weight: 600; }
+.workspace-contrib-tooltip-date { font-size: 10px; color: #cbd5e1; }
+.workspace-contrib-tooltip-link { font-size: 10px; color: #9be9a8; text-decoration: none; margin-top: 2px; }
+.workspace-contrib-tooltip-link:hover { text-decoration: underline; }
+/* Workspace Lens one-time walkthrough — calm white popover. */
+.workspace-rail-lens-nav { position: relative; }
+.workspace-lens-walkthrough { position: relative; width: 264px; background: #ffffff; border: 1px solid #d1d5db; border-radius: 5px; box-shadow: 0 6px 18px rgba(17, 24, 39, 0.12); padding: 12px 13px; }
+.workspace-lens-walkthrough.is-anchored,
+.workspace-lens-walkthrough.is-rail-reveal { position: fixed; z-index: 1200; }
+.workspace-lens-walkthrough.is-anchored::before,
+.workspace-lens-walkthrough.is-rail-reveal::before { content: ""; position: absolute; left: -6px; top: 16px; width: 10px; height: 10px; background: #ffffff; border-left: 1px solid #d1d5db; border-bottom: 1px solid #d1d5db; transform: rotate(45deg); }
+@media (max-width: 760px) {
+  .workspace-lens-walkthrough.is-anchored,
+  .workspace-lens-walkthrough.is-rail-reveal { right: 16px; width: auto; }
+  .workspace-lens-walkthrough.is-anchored::before,
+  .workspace-lens-walkthrough.is-rail-reveal::before { display: none; }
+}
+.workspace-lens-walkthrough.is-panel { width: 100%; max-width: 520px; margin: 0 0 16px; }
+.workspace-lens-walkthrough-x { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: transparent; color: #9ca3af; border-radius: 5px; cursor: pointer; }
+.workspace-lens-walkthrough-x:hover { background: #f3f4f6; color: #4b5563; }
+.workspace-lens-walkthrough-eyebrow { margin: 0 0 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; }
+.workspace-lens-walkthrough-title { margin: 0 0 5px; font-size: 13px; font-weight: 600; color: #111827; padding-right: 18px; }
+.workspace-lens-walkthrough-body { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: #4b5563; }
+.workspace-lens-walkthrough-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.workspace-lens-walkthrough-steps { font-size: 11px; color: #9ca3af; font-variant-numeric: tabular-nums; }
+.workspace-lens-walkthrough-next { font-size: 12px; font-weight: 600; color: #ffffff; background: #111827; border: none; border-radius: 6px; padding: 6px 12px; cursor: pointer; }
+.workspace-lens-walkthrough-next:hover { background: #1f2937; }
+/* Helper handoff — one callout, one helper widget, one sandbox config. */
+.workspace-lens-helper-callout { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafbfc; padding: 12px 14px; margin: 0 0 16px; }
+.workspace-lens-helper-callout-text { min-width: 0; }
+.workspace-lens-helper-callout-title { margin: 0 0 3px; font-size: 13px; font-weight: 600; color: #111827; }
+.workspace-lens-helper-callout-body { margin: 0; font-size: 12px; line-height: 1.5; color: #6b7280; max-width: 560px; }
+.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 { 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; }
+.workspace-helper-setup-breadcrumbs { display: flex; gap: 8px; flex-wrap: wrap; padding-right: 36px; margin-bottom: 16px; font-size: 12px; color: #9ca3af; }
+.workspace-helper-setup-breadcrumbs span { border: 1px solid #e5e7eb; border-radius: 999px; padding: 4px 9px; background: #f9fafb; }
+.workspace-helper-setup-breadcrumbs span.active { color: #111827; border-color: #111827; background: #fff; font-weight: 600; }
+.workspace-helper-setup-step { display: flex; flex-direction: column; gap: 12px; }
+.workspace-helper-setup-step h2 { margin: 0; font-size: 18px; line-height: 1.25; color: #111827; }
+.workspace-helper-setup-step p { margin: 0; font-size: 13px; line-height: 1.55; color: #4b5563; }
+.workspace-helper-setup-eyebrow { font-size: 11px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280 !important; }
+.workspace-helper-setup-target { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; display: grid; gap: 4px; background: #fafafa; }
+.workspace-helper-setup-target span, .workspace-helper-setup-target small { font-size: 12px; color: #6b7280; }
+.workspace-helper-setup-target strong { font-size: 14px; color: #111827; }
+.workspace-helper-setup-card-grid { display: grid; gap: 8px; }
+.workspace-helper-setup-toggle { display: flex !important; align-items: flex-start; gap: 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; padding: 11px 12px; cursor: pointer; }
+.workspace-helper-setup-toggle:hover { background: #f9fafb; }
+.workspace-helper-setup-toggle input { width: 16px !important; height: 16px; margin: 2px 0 0; padding: 0 !important; accent-color: #111827; flex-shrink: 0; }
+.workspace-helper-setup-toggle span { display: grid; gap: 3px; min-width: 0; }
+.workspace-helper-setup-toggle strong { color: #111827; font-size: 13px; }
+.workspace-helper-setup-toggle small { color: #6b7280; font-size: 12px; line-height: 1.35; }
+.workspace-helper-setup-radio-group { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; display: grid; gap: 8px; background: #fafafa; }
+.workspace-helper-setup-radio-group > span { font-size: 12px; font-weight: 700; color: #374151; }
+.workspace-helper-setup-radio-group label { display: flex !important; align-items: center; gap: 8px; font-size: 13px; color: #111827; font-weight: 600; }
+.workspace-helper-setup-radio-group input { width: 15px !important; height: 15px; margin: 0; padding: 0 !important; accent-color: #111827; }
+.workspace-helper-setup-radio-group small { color: #9ca3af; font-size: 12px; line-height: 1.4; }
+.workspace-helper-setup-field-stack { display: grid; gap: 10px; }
+.workspace-helper-agent-options { display: grid; gap: 8px; }
+.workspace-helper-agent-options button { display: grid; gap: 3px; text-align: left; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; padding: 10px 12px; cursor: pointer; }
+.workspace-helper-agent-options button:hover { background: #f9fafb; }
+.workspace-helper-agent-options button.active { border-color: #111827; box-shadow: inset 3px 0 0 #111827; }
+.workspace-helper-agent-options strong { font-size: 13px; color: #111827; }
+.workspace-helper-agent-options span { font-size: 12px; line-height: 1.4; color: #6b7280; }
+.workspace-helper-setup-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+.workspace-helper-setup-step label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: #374151; }
+.workspace-helper-setup-step input, .workspace-helper-setup-step select { width: 100%; border: 1px solid #d1d5db; border-radius: 7px; padding: 9px 10px; font-size: 13px; color: #111827; background: #fff; }
+.workspace-helper-setup-review { display: grid; gap: 8px; margin: 0; }
+.workspace-helper-setup-review div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; border-bottom: 1px solid #f3f4f6; padding-bottom: 8px; }
+.workspace-helper-setup-review dt { font-size: 12px; color: #6b7280; }
+.workspace-helper-setup-review dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 12px; color: #111827; }
+.workspace-helper-setup-error { color: #b91c1c !important; }
+.workspace-helper-setup-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
+.workspace-helper-setup-actions button { border: 1px solid #d1d5db; border-radius: 7px; background: #fff; color: #111827; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
+.workspace-helper-setup-actions button.primary { background: #111827; border-color: #111827; color: #fff; }
+.workspace-helper-setup-actions button:disabled { opacity: 0.55; cursor: default; }
+/* Compact rail variant — slim activation chip in WorkspaceRail Home */
+.workspace-activation-panel.is-compact { padding: 12px 14px; margin: 0 0 12px; gap: 10px; border-radius: 8px; }
+.workspace-activation-panel.is-compact .workspace-activation-head { gap: 8px; }
+.workspace-activation-panel.is-compact .workspace-activation-headline { font-size: 13px; }
+.workspace-activation-panel.is-compact .workspace-activation-subheadline { font-size: 11px; }
+.workspace-activation-panel.is-compact .workspace-activation-step { padding: 8px 10px; gap: 8px; }
+.workspace-activation-panel.is-compact .workspace-activation-step-title { font-size: 12px; }
+.workspace-activation-panel.is-compact .workspace-activation-step-description { font-size: 11px; }
+.workspace-activation-panel.is-compact .workspace-activation-progress-bar { width: 80px; }
+/* Template-aware context banner — workflow + nango affordance */
+.workspace-template-context-banner { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; font-size: 12px; margin: 0 0 12px; }
+.workspace-template-context-banner.is-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
+.workspace-template-context-banner .workspace-template-context-link { color: inherit; text-decoration: underline; font-weight: 600; margin-left: auto; }

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/workflows/WorkflowSurface.jsx CHANGED Viewed

@@ -51,6 +51,7 @@ import { AgentSwarmPanel } from "../data-model/components/AgentSwarmPanel.jsx";
 import { RunSetupPanel } from "./RunSetupPanel.jsx";
 import { describeRunInputMetadataItems, discoverRunInputSchema } from "@/lib/orchestration-run-inputs";
 import { selectWorkflowNodeInputSchema } from "@/lib/workspace-metadata-selectors";
+import { deriveProvenance, hasConnectionId } from "@/lib/workspace-activation";
 // Workspace Metadata Graph V1 — read-only dependency metadata for workflow
 // sidecars. The runtime path (sandbox-run, publish, draft/live) is
@@ -387,6 +388,33 @@ export default function WorkflowSurface() {
     [workspaceConfig, sandboxRow]
   );
+  // Template-aware activation banner. When the active workflow belongs to
+  // a seeded template (project-management today) and its provider row
+  // doesn't have a connectionId yet, surface a back-link to the API
+  // Registry / Nango panel so the user can finish setup without hunting
+  // through Data Model surfaces.
+  const templateBanner = useMemo(() => {
+    if (!workspaceConfig) return null;
+    const provenance = deriveProvenance(workspaceConfig);
+    if (provenance.template !== "project-management") return null;
+    if (!registryRow) return null;
+    const ready = hasConnectionId(registryRow);
+    const apiRegistryObjectId = String(
+      (Array.isArray(workspaceConfig?.dataModel?.objects)
+        ? workspaceConfig.dataModel.objects.find((o) => o?.objectType === "api-registry")?.id
+        : "") || ""
+    );
+    const apiRegistryRowId = String(registryRow.integrationId || "").trim();
+    const backHref = apiRegistryObjectId && apiRegistryRowId
+      ? `/data-model?object=${encodeURIComponent(apiRegistryObjectId)}&row=${encodeURIComponent(apiRegistryRowId)}`
+      : "/data-model";
+    return {
+      ready,
+      backHref,
+      providerConfigKey: String(registryRow.providerConfigKey || registryRow.integrationId || "").trim(),
+    };
+  }, [workspaceConfig, registryRow]);
   useEffect(() => {
     setSidecarMode(runId ? "trace" : "graph");
   }, [runId]);
@@ -876,6 +904,22 @@ export default function WorkflowSurface() {
           </div>
         </header>
+        {templateBanner ? (
+          <div
+            className={"workspace-template-context-banner" + (templateBanner.ready ? "" : " is-warn")}
+            role="note"
+          >
+            <span>
+              {templateBanner.ready
+                ? `Provider connected via Nango${templateBanner.providerConfigKey ? ` (${templateBanner.providerConfigKey})` : ""}. Ready to run.`
+                : "Connect your provider through Nango before running this workflow."}
+            </span>
+            <Link href={templateBanner.backHref} className="workspace-template-context-link">
+              <span>{templateBanner.ready ? "Manage connection" : "Open Nango panel"}</span>
+            </Link>
+          </div>
+        ) : null}
         {loading ? (
           <p className="dm-workflow-empty">Loading workflow…</p>
         ) : error ? (