@growthub/cli 0.13.7 → 0.13.9

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

@@ -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;
@@ -831,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;
@@ -844,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;
 }
@@ -927,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;
 }
@@ -3053,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;
@@ -3063,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;
@@ -3551,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 {
@@ -4613,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); }
@@ -4654,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
@@ -4703,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; }
@@ -4720,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; }
@@ -8656,6 +8790,222 @@ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
 .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; }

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
+};