@growthub/cli 0.10.0 → 0.12.0

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

@@ -398,12 +398,12 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 .workspace-builder {
   min-height: 100vh;
   display: grid;
-  grid-template-columns: 220px minmax(0, 1fr) 320px;
+  grid-template-columns: 264px minmax(0, 1fr) 320px;
   background: #fafafa;
   color: #252525;
 }
 .workspace-settings-page {
-  grid-template-columns: 220px minmax(0, 1fr);
+  grid-template-columns: 264px minmax(0, 1fr);
 }
 .workspace-rail,
 .workspace-widget-panel {
@@ -416,6 +416,15 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   gap: 18px;
   border-right: 1px solid #e8e8e8;
   padding: 18px 14px;
+  /* Lock rail to viewport height so the bottom status pill never
+     scrolls off the device fold (long thread lists scroll inside
+     .workspace-rail-thread-scroll instead of stretching the rail). */
+  height: 100vh;
+  max-height: 100vh;
+  min-height: 0;
+  position: sticky;
+  top: 0;
+  overflow: hidden;
 }
 .workspace-brand {
   display: flex;
@@ -425,8 +434,8 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   font-weight: 650;
 }
 .workspace-mark {
-  width: 26px;
-  height: 26px;
+  width: 28px;
+  height: 28px;
   display: grid;
   place-items: center;
   border: 1px solid #dedede;
@@ -435,6 +444,7 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   color: #555;
   font-size: 12px;
   overflow: hidden;
+  flex-shrink: 0;
 }
 .workspace-mark img {
   width: 100%;
@@ -478,7 +488,12 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 }
 .workspace-surface {
   min-width: 0;
+  min-height: 0;
+  max-height: 100vh;
   padding: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 .workspace-toolbar {
   min-height: 48px;
@@ -508,8 +523,11 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   justify-content: flex-end;
   gap: 8px;
 }
-.workspace-toolbar-actions a,
-.workspace-toolbar-actions span {
+/* Direct-child scoping — must NOT cascade into nested popovers/pickers
+   rendered inside .workspace-toolbar-actions (e.g. the picker row spans
+   would otherwise get treated as 30px pills with their own border). */
+.workspace-toolbar-actions > a,
+.workspace-toolbar-actions > span {
   min-height: 30px;
   display: inline-flex;
   align-items: center;
@@ -527,21 +545,32 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 .workspace-add-widget {
   font: inherit;
 }
-.workspace-toolbar-actions button,
-.workspace-tabs button {
+/* Direct-child scoping — the unified toolbar button treatment must NOT
+   cascade into nested popovers, dropdowns, or pickers rendered inside
+   .workspace-toolbar-actions (those carry their own styling). */
+.workspace-toolbar-actions > button,
+.workspace-tabs > button {
   min-height: 30px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
-  border: 1px solid #dedede;
+  border: 1px solid #e5e7eb;
   border-radius: 6px;
   background: #ffffff;
   color: #4f4f4f;
   padding: 0 10px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
+}
+.workspace-toolbar-actions > button:hover,
+.workspace-tabs > button:hover {
+  background: #fafafa;
+  border-color: #d1d5db;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
 }
-.workspace-toolbar-actions button svg,
-.workspace-tabs button svg {
+.workspace-toolbar-actions > button svg,
+.workspace-tabs > button svg {
   flex: 0 0 auto;
 }
 .workspace-table,
@@ -549,7 +578,14 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   border: 1px solid #e7e7e7;
   border-radius: 8px;
   background: #ffffff;
-  overflow: hidden;
+  /* Bounded height with internal scroll — the 16-row × 52px grid
+     (832px+) was being clipped on most laptop viewports. Reserves
+     ~210px above for the workspace toolbar + dashboard tabs + page
+     padding so the rail's bottom status pill stays above the fold. */
+  max-height: calc(100vh - 210px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
 }
 .workspace-table {
   margin-bottom: 14px;
@@ -1870,7 +1906,7 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 }
 .template-mini-widget.kind-chart { background: #dbeafe; }
 .template-mini-widget.kind-view { background: #fef3c7; }
-.template-mini-widget.kind-iframe { background: #ede9fe; }
+.template-mini-widget.kind-iframe { background: #e0f2fe; }
 .template-mini-widget.kind-rich-text { background: #dcfce7; }
 .template-card-meta {
   display: flex;
@@ -3544,10 +3580,34 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   box-shadow: inset 0 0 0 1px #38bdf8;
 }
 
-/* Chart config */
+/* Chart config — condensed grammar to match the helper Setup tab
+   rhythm. Tighter gaps + smaller labels keeps the chart panel from
+   bleeding past the fold while preserving every existing control. */
 .workspace-chart-config {
   display: grid;
-  gap: 12px;
+  gap: 8px;
+}
+.workspace-chart-config > section,
+.workspace-chart-config > div { padding: 4px 0; }
+.workspace-chart-config h3,
+.workspace-chart-config h4 {
+  margin: 4px 0 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.workspace-chart-config label {
+  font-size: 11.5px;
+  color: #4b5563;
+}
+.workspace-chart-config select,
+.workspace-chart-config input[type="text"],
+.workspace-chart-config input[type="number"] {
+  height: 28px;
+  font-size: 12px;
+  padding: 0 8px;
 }
 .workspace-chart-type-tabs {
   display: grid;
@@ -3960,19 +4020,105 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 
 /* Detail panel v2 */
 .dm-detail-v2 { display: flex; flex-direction: column; min-width: 0; }
-.dm-detail-v2-head { padding: 14px 18px 10px; border-bottom: 1px solid #efefef; }
+/* dm-detail-v2-head / dm-detail-v2-title are kept for legacy callers, but the
+   data-model surface no longer renders that band — the picker moved into the
+   workspace toolbar and the dm-db-toolbar is now the top band of the table
+   surface. */
+.dm-detail-v2-head { padding: 14px 18px 10px; }
 .dm-detail-v2-title { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
 .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: visible; }
-.dm-detail-v3-head { padding-bottom: 14px; }
+.dm-detail-v3 { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: hidden; }
 .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); }
 .dm-picker-trigger-copy { display: grid; min-width: 0; flex: 1; }
 .dm-picker-trigger-copy strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; color: #111827; }
 .dm-picker-trigger-copy em { font-style: normal; font-size: 11px; color: #94a3b8; }
+
+/* Workspace-toolbar variant — only the picker TRIGGER is re-skinned to
+   match the other 30px toolbar buttons. The popover and everything
+   inside it keep their default .dm-picker-* styles untouched. */
+.workspace-toolbar-actions .dm-picker {
+  min-width: 0;
+}
+.workspace-toolbar-actions .dm-picker-trigger {
+  width: auto;
+  min-width: 0;
+  min-height: 30px;
+  height: 30px;
+  padding: 0 10px;
+  border-radius: 6px;
+  border-color: #e5e7eb;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+.workspace-toolbar-actions .dm-picker-trigger:hover {
+  background: #fafafa;
+  border-color: #d1d5db;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
+}
+.workspace-toolbar-actions .dm-picker.open .dm-picker-trigger {
+  border-color: #9ca3af;
+  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
+}
+/* Hide the field/record meta inside the trigger — the workspace toolbar
+   title block already carries that info, so the trigger only needs the
+   object label + chevron. */
+.workspace-toolbar-actions .dm-picker-trigger-copy em { display: none; }
+.workspace-toolbar-actions .dm-picker-trigger-copy strong { font-size: 12px; }
+.workspace-toolbar-actions .dm-picker-popover {
+  left: auto;
+  right: 0;
+}
+
+/* Active-object title block in the workspace toolbar — replaces the
+   hardcoded "WORKSPACE / Data Model" eyebrow. The object icon sits in a
+   small white-card chip BEFORE the title (light grey border, slight
+   dropshadow); generous spacing between chip and title; bold object
+   label on top; regular-weight Fields/Records meta below. */
+.workspace-toolbar-object {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.workspace-toolbar-object-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.workspace-toolbar-object-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid #e5e7eb;
+  border-radius: 7px;
+  background: #ffffff;
+  color: #6b7280;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+  flex-shrink: 0;
+}
+.workspace-toolbar-object-title h1 {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 650;
+  color: #111827;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.workspace-toolbar-object-meta {
+  margin: 0;
+  padding-left: 40px; /* 28px icon chip + 12px gap → sits under the title text */
+  font-size: 12px;
+  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-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; }
@@ -4056,28 +4202,79 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 
 /* Data Model database grid */
 .dm-db-surface { display: flex; flex-direction: column; gap: 10px; padding: 14px; min-height: 0; flex: 1; background: #fff; overflow: visible; }
-.dm-db-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; overflow: visible; }
+/* Top band of the data-model table surface: action buttons (left) and
+   filter chips (right, only when filters are active) live ABOVE the
+   divider line. The divider is the toolbar's own bottom border,
+   separating the action band from the table rows below.
+   The DOM order is (chips, actions); flex `order` swaps them visually
+   so chips sit right-aligned under the picker dropdown (which holds
+   the Views selector) and action buttons run left-aligned. */
+.dm-db-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  overflow: visible;
+  padding: 12px 16px;
+  border-bottom: 1px solid #efefef;
+  background: #fff;
+}
+.dm-db-toolbar + * { padding-top: 4px; }
+.dm-db-toolbar .dm-records-actions {
+  order: 1;
+  margin-left: 0;
+  margin-right: auto;
+  justify-content: flex-start;
+}
+.dm-db-toolbar .dm-filter-chip-row {
+  order: 2;
+  justify-content: flex-end;
+  margin-left: auto;
+}
 .dm-db-toolbar-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
 .dm-db-toolbar-title strong { font-size: 13px; color: #111827; font-weight: 650; }
 .dm-db-toolbar-title span { font-size: 12px; color: #9ca3af; }
 .dm-inline-panel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid #dfe3e8; border-radius: 10px; background: #fbfdff; }
 .dm-inline-panel input { height: 32px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #111827; font: inherit; font-size: 12px; padding: 0 10px; }
-.dm-filter-chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 32px; }
+.dm-filter-chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 0; }
 .dm-filter-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; border: 1px solid #c7d2fe; border-radius: 8px; background: #eef2ff; color: #3730a3; font: inherit; font-size: 12px; padding: 0 10px; cursor: pointer; }
+.dm-selection-count { border-color: #d1d5db; background: #fff; color: #475569; cursor: default; }
 .dm-filter-chip span { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dm-filter-popover { position: absolute; z-index: 40; display: grid; gap: 8px; width: 320px; padding: 10px; border: 1px solid #dbe2ea; border-radius: 10px; background: #fff; box-shadow: 0 18px 42px rgba(15,23,42,.18), 0 3px 10px rgba(15,23,42,.08); }
 .dm-filter-popover input { height: 32px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #111827; font: inherit; font-size: 12px; padding: 0 10px; }
-.dm-filter-popover-toolbar { top: 48px; right: 0; }
+.dm-filter-anchor { position: relative; display: inline-flex; }
+.dm-filter-popover-toolbar { top: calc(100% + 6px); left: 0; right: auto; }
 .dm-filter-popover-column { top: calc(100% + 6px); left: 0; }
 .dm-filter-popover-actions { display: flex; justify-content: flex-end; gap: 8px; }
-.dm-db-grid-wrap { flex: 1; min-height: 420px; overflow: auto; border: 1px solid #dfe3e8; border-radius: 7px; background: #fff; }
+.dm-db-grid-wrap { display: flex; flex: 1; min-height: 420px; flex-direction: column; overflow: hidden; border: 1px solid #dfe3e8; border-radius: 7px; background: #fff; }
+.dm-db-grid-wrap > .dm-db-grid-scroll { flex: 1 1 auto; overflow: auto; }
 .dm-db-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; color: #1f2937; }
 .dm-db-grid th { position: sticky; top: 0; z-index: 1; height: 32px; background: #f8fafc; color: #475569; border-bottom: 1px solid #dfe3e8; border-right: 1px solid #edf0f3; padding: 0; text-align: left; font-weight: 650; white-space: nowrap; }
 .dm-db-grid td { height: 32px; max-width: 260px; border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
 .dm-db-grid tbody tr:hover td { background: #f8fafc; }
 .dm-db-grid tbody tr.selected td { background: #eef2ff; }
+.dm-db-grid tbody tr.multi-selected td { background: #f8fafc; }
 .dm-db-head-btn { display: inline-flex; align-items: center; justify-content: flex-start; width: 100%; height: 32px; gap: 6px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 12px; font-weight: inherit; padding: 0 10px; cursor: pointer; }
 .dm-db-rownum { width: 42px; min-width: 42px; text-align: center !important; color: #94a3b8 !important; background: #f8fafc; font-variant-numeric: tabular-nums; }
+.dm-row-select { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 32px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
+.dm-row-select-box { position: relative; display: none; width: 16px; height: 16px; border: 1px solid #d1d5db; border-radius: 5px; background: #fff; box-sizing: border-box; }
+.dm-row-select:hover .dm-row-select-box, .dm-row-select[aria-pressed="true"] .dm-row-select-box { border-color: #cbd5e1; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.14); }
+.dm-row-select[aria-pressed="true"] .dm-row-select-box { display: inline-flex; }
+.dm-row-select[aria-pressed="true"] .dm-row-select-box::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #334155; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
+.dm-db-grid tbody tr:hover .dm-row-select-box { display: inline-flex; }
+.dm-row-select[aria-pressed="true"] .dm-row-number, .dm-db-grid tbody tr:hover .dm-row-select .dm-row-number { display: none; }
+.dm-db-rownum-head { position: sticky; overflow: visible; z-index: 4 !important; }
+.dm-row-select-head-wrap { position: relative; display: flex; align-items: center; justify-content: center; height: 32px; }
+.dm-row-select-all { width: 26px; flex: 0 0 26px; }
+.dm-row-select-menu-btn { display: none; }
+.dm-db-rownum-head:hover .dm-row-select-menu-btn, .dm-row-select-menu-btn[aria-expanded="true"] { display: none; }
+.dm-row-select-menu-btn:hover { background: #eef2f7; color: #475569; }
+.dm-db-rownum-head:hover .dm-row-select-all .dm-row-select-box, .dm-row-select-all[aria-pressed="true"] .dm-row-select-box { display: inline-flex; }
+.dm-db-rownum-head:hover .dm-row-select-all .dm-row-number, .dm-row-select-all[aria-pressed="true"] .dm-row-number { display: none; }
+.dm-row-select-menu { position: absolute; top: calc(100% + 6px); left: 6px; z-index: 50; display: grid; gap: 3px; min-width: 150px; padding: 6px; border: 1px solid #dbe2ea; border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.08); }
+.dm-row-select-menu button { display: flex; align-items: center; height: 28px; border: 0; border-radius: 6px; background: transparent; color: #334155; font: inherit; font-size: 12px; padding: 0 8px; text-align: left; cursor: pointer; }
+.dm-row-select-menu button:hover { background: #f1f5f9; }
+.dm-row-select-menu button:disabled { opacity: .45; cursor: not-allowed; }
 .dm-db-field-type { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 5px; border-radius: 4px; color: #64748b; background: #eef2f7; vertical-align: middle; }
 .dm-db-add-field { position: relative; min-width: 118px; }
 .dm-db-add-field button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: #64748b; font: inherit; font-size: 12px; cursor: pointer; }
@@ -4094,6 +4291,15 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 .dm-field-creator-actions { display: flex; justify-content: flex-end; gap: 8px; }
 .dm-db-empty-cell { background: #fbfdff; }
 .dm-db-new-row td { color: #64748b; background: #fbfdff; font-weight: 600; }
+.dm-pagination-bar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 8px 14px; background: #fff; color: #64748b; font-size: 12px; border-top: 1px solid #edf0f3; }
+.dm-pagination-summary { white-space: nowrap; }
+.dm-pagination-controls { display: inline-flex; align-items: center; gap: 8px; }
+.dm-page-size-control { display: inline-flex; align-items: center; gap: 6px; color: #64748b; }
+.dm-page-size-control select { height: 28px; border: 1px solid #dbe2ea; border-radius: 6px; background: #fff; color: #334155; font: inherit; font-size: 12px; padding: 0 22px 0 8px; }
+.dm-pagination-btn { height: 28px; border: 1px solid #dbe2ea; border-radius: 6px; background: #fff; color: #334155; font: inherit; font-size: 12px; padding: 0 10px; cursor: pointer; }
+.dm-pagination-btn:hover:not(:disabled) { background: #f8fafc; border-color: #cbd5e1; }
+.dm-pagination-btn:disabled { opacity: .45; cursor: not-allowed; }
+.dm-pagination-page { min-width: 44px; text-align: center; color: #64748b; }
 .dm-db-status { display: inline-flex; align-items: center; gap: 5px; height: 20px; border: 1px solid #e2e8f0; border-radius: 999px; padding: 0 8px; background: #f8fafc; color: #64748b; font-size: 11px; font-weight: 650; }
 .dm-db-status span { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }
 .dm-db-status.ok { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
@@ -4291,6 +4497,1159 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 .dm-resolver-no-targets { display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; font-size: 12px; color: #92400e; }
 .dm-detail-icon { color: #6b7280; }
 
+
+/* ─── Workspace Helper Sidecar ─────────────────────────────────────────────── */
+.dm-sidecar-backdrop { position: fixed; inset: 0; z-index: 79; }
+.dm-helper-sidecar { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; background: #fff; border-left: 1px solid #e5e7eb; box-shadow: -8px 0 40px rgba(15,23,42,.13); display: flex; flex-direction: column; min-width: 320px; max-width: 80vw; }
+.dm-sidecar-drag-handle { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 2; background: transparent; }
+.dm-sidecar-drag-handle:hover { background: rgba(63,104,255,.12); }
+.dm-sidecar-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 18px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
+.dm-sidecar-header-left { display: flex; align-items: center; gap: 8px; }
+.dm-sidecar-icon { color: #3f68ff; }
+.dm-sidecar-title { font-size: 14px; font-weight: 600; color: #111827; }
+/* Header-right action cluster — single source for gear (Setup toggle) and
+   close (X), replaces the old full-width Assistant/Setup tab strip. */
+.dm-sidecar-header-right {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.dm-sidecar-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #6b7280;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
+}
+.dm-sidecar-icon-btn:hover {
+  background: #fafafa;
+  border-color: #d1d5db;
+  color: #111827;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
+}
+/* No persistent active state — the icon itself swaps to ArrowLeft when
+   the Setup surface is open, which is the user's cue. */
+.dm-sidecar-icon-btn:focus-visible {
+  outline: 2px solid #bfdbfe;
+  outline-offset: 1px;
+}
+/* Legacy `.dm-sidecar-tabs` / `.dm-sidecar-tab` / `.dm-sidecar-close`
+   rules retired — the header cluster above owns both affordances now. */
+.dm-sidecar-body { flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 12px; align-content: start; }
+
+/* Streaming surface */
+.dm-helper-stream { padding: 12px 14px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; color: #374151; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
+@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
+.dm-stream-cursor { display: inline-block; width: 2px; height: 1em; background: #3f68ff; vertical-align: text-bottom; margin-left: 1px; animation: blink 1s step-end infinite; }
+
+/* Proposals */
+.dm-helper-result { display: grid; gap: 10px; }
+.dm-helper-summary { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; font-size: 13px; color: #1e40af; }
+.dm-helper-warnings { display: grid; gap: 4px; }
+.dm-helper-warning { display: flex; align-items: flex-start; gap: 6px; padding: 7px 10px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; font-size: 12px; color: #92400e; }
+.dm-helper-error { display: flex; align-items: flex-start; gap: 6px; padding: 9px 12px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 7px; font-size: 13px; color: #dc2626; margin-top: 4px; }
+.dm-helper-proposals-header { display: flex; align-items: center; justify-content: space-between; }
+.dm-helper-proposals { display: grid; gap: 6px; }
+.dm-helper-proposal { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .1s, background .1s; }
+.dm-helper-proposal:hover { background: #f9fafb; border-color: #d1d5db; }
+.dm-helper-proposal.accepted { border-color: #3f68ff; background: #eff6ff; }
+.dm-helper-proposal input[type=checkbox] { margin-top: 2px; flex-shrink: 0; accent-color: #3f68ff; }
+.dm-helper-proposal-body { display: grid; gap: 2px; }
+.dm-helper-proposal-type { font-size: 12px; font-weight: 600; color: #111827; font-family: monospace; }
+.dm-helper-proposal-field { font-size: 11px; color: #6b7280; }
+.dm-helper-proposal-rationale { margin: 0; font-size: 12px; color: #4b5563; line-height: 1.4; }
+.dm-helper-apply-result { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #d1fae5; background: #ecfdf5; border-radius: 8px; font-size: 13px; color: #065f46; }
+.dm-helper-apply-result.is-error { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
+.dm-helper-empty-hint { padding: 12px 14px; border: 1px dashed #e5e7eb; border-radius: 8px; background: #fafafa; color: #6b7280; font-size: 12px; line-height: 1.5; }
+.dm-helper-empty-hint p { margin: 0; }
+.dm-helper-proposal-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.dm-helper-proposal-payload { margin: 0; font-size: 11px; color: #374151; background: #f3f4f6; border-radius: 5px; padding: 3px 7px; display: inline-block; font-family: monospace; line-height: 1.4; word-break: break-all; }
+.dm-helper-proposal-confidence { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 99px; background: #eff6ff; border: 1px solid #bfdbfe; font-size: 11px; font-weight: 600; color: #1e40af; }
+.dm-helper-skipped { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid #fde68a; background: #fffbeb; border-radius: 8px; }
+.dm-helper-skipped-row { display: flex; align-items: baseline; gap: 6px; font-size: 11px; color: #92400e; }
+.dm-helper-skipped-reason { color: #b45309; }
+.dm-thread-open-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: #3f68ff; background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
+.dm-thread-open-link:hover { color: #1e40af; }
+.dm-thread-open-link:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 2px; border-radius: 3px; }
+
+/* Helper sidecar — intent pills (4 primary + More dropdown). Visible only
+   on a brand-new thread, before the user has sent any messages. */
+.dm-helper-intent-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+.dm-helper-pill { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 99px; border: 1px solid #e5e7eb; background: #fff; color: #374151; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .1s, border-color .1s, color .1s; }
+.dm-helper-pill:hover:not(:disabled) { background: #f9fafb; border-color: #d1d5db; }
+.dm-helper-pill.active { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
+.dm-helper-pill:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
+.dm-helper-pill:disabled { opacity: .55; cursor: not-allowed; }
+.dm-helper-pill-more-wrap { position: relative; display: inline-flex; }
+.dm-helper-pill-more { padding-right: 6px; }
+.dm-helper-pill-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 180px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); padding: 4px; display: flex; flex-direction: column; gap: 1px; z-index: 90; }
+.dm-helper-pill-menu-item { display: flex; align-items: center; height: 28px; padding: 0 10px; font-size: 12px; color: #374151; background: transparent; border: 0; border-radius: 5px; cursor: pointer; text-align: left; }
+.dm-helper-pill-menu-item:hover { background: #f9fafb; color: #111827; }
+.dm-helper-pill-menu-item.active { background: #eff6ff; color: #1e40af; }
+
+/* Active-mode indicator — shown after the thread has activated, replaces
+   the pill row. Compact, non-cluttering. */
+.dm-helper-mode-row { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: #f3f4f6; border: 1px solid #e5e7eb; align-self: flex-start; }
+.dm-helper-mode-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
+.dm-helper-mode-value { font-size: 12px; font-weight: 600; color: #111827; }
+
+/* Conversation list inside the sidecar. User turns right-aligned, assistant
+   turns left-aligned. Pending assistant turn uses the existing blink cursor. */
+/* Multi-turn conversation — ChatGPT-grade simple. User bubble on the
+   right (grey rounded chip, fits-content); assistant bubble on the left
+   as a transparent full-width markdown block. Subtle horizontal divider
+   between consecutive turns keeps the rhythm. */
+.dm-helper-messages { display: flex; flex-direction: column; gap: 0; }
+.dm-helper-turn {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 2px;
+  border-bottom: 1px solid #f3f4f6;
+}
+.dm-helper-turn:last-child { border-bottom: 0; }
+.dm-helper-turn.role-user { align-items: flex-end; }
+.dm-helper-turn.role-assistant { align-items: stretch; }
+.dm-helper-turn.role-system { align-items: stretch; }
+
+.dm-helper-bubble-user {
+  max-width: 88%;
+  padding: 7px 12px;
+  border-radius: 14px;
+  background: #f1f1f1;
+  color: #2c2c2c;
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.dm-helper-bubble-assistant {
+  width: 100%;
+  color: #1f2937;
+  font-size: 13.5px;
+  line-height: 1.55;
+  word-break: break-word;
+}
+.dm-helper-bubble-assistant > *:first-child { margin-top: 0; }
+.dm-helper-bubble-assistant > *:last-child { margin-bottom: 0; }
+.dm-helper-bubble-assistant p { margin: 0 0 8px; }
+.dm-helper-bubble-assistant h1,
+.dm-helper-bubble-assistant h2,
+.dm-helper-bubble-assistant h3,
+.dm-helper-bubble-assistant h4 {
+  margin: 14px 0 6px;
+  font-weight: 650;
+  color: #111827;
+  line-height: 1.3;
+}
+.dm-helper-bubble-assistant h1 { font-size: 16px; }
+.dm-helper-bubble-assistant h2 { font-size: 15px; }
+.dm-helper-bubble-assistant h3 { font-size: 14px; }
+.dm-helper-bubble-assistant h4 { font-size: 13px; }
+.dm-helper-bubble-assistant ul,
+.dm-helper-bubble-assistant ol { margin: 4px 0 8px; padding-left: 20px; }
+.dm-helper-bubble-assistant li { margin: 2px 0; }
+.dm-helper-bubble-assistant strong { font-weight: 650; color: #111827; }
+.dm-helper-bubble-assistant em { font-style: italic; }
+.dm-helper-bubble-assistant a { color: #1e40af; text-decoration: underline; text-underline-offset: 2px; }
+.dm-helper-bubble-assistant a:hover { color: #1e3a8a; }
+.dm-helper-bubble-assistant code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12.5px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: #f3f4f6;
+  color: #111827;
+}
+.dm-helper-bubble-assistant pre {
+  margin: 6px 0 10px;
+  padding: 10px 12px;
+  background: #0b1220;
+  color: #e5e7eb;
+  border-radius: 8px;
+  overflow-x: auto;
+  font-size: 12.5px;
+  line-height: 1.55;
+}
+.dm-helper-bubble-assistant pre code {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+}
+.dm-helper-bubble-assistant blockquote {
+  margin: 6px 0 10px;
+  padding: 4px 12px;
+  border-left: 3px solid #d1d5db;
+  color: #4b5563;
+  font-style: normal;
+}
+.dm-helper-bubble-assistant hr {
+  margin: 10px 0;
+  border: 0;
+  border-top: 1px solid #e5e7eb;
+}
+.dm-helper-bubble-assistant table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 6px 0 10px;
+  font-size: 12.5px;
+}
+.dm-helper-bubble-assistant th,
+.dm-helper-bubble-assistant td {
+  padding: 6px 8px;
+  border: 1px solid #e5e7eb;
+  text-align: left;
+  vertical-align: top;
+}
+.dm-helper-bubble-assistant th { background: #f9fafb; font-weight: 600; color: #111827; }
+
+.dm-helper-bubble-pending { color: #6b7280; font-style: normal; min-height: 24px; display: inline-flex; align-items: center; }
+
+/* Three-dot typing indicator used while the assistant is streaming. */
+/* Tool-call card — one per applied proposal. Thin agnostic component:
+   icon + dynamic title + chevron-accordion JSON + Open navigation.
+   Closes the no-code success loop in the user's mental model. */
+.dm-helper-toolcall-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 6px;
+}
+.dm-helper-toolcall {
+  width: 100%;
+  border: 1px solid #e5e7eb;
+  border-radius: 5px;
+  background: #ffffff;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  overflow: hidden;
+}
+.dm-helper-toolcall-row {
+  width: 100%;
+  min-height: 36px;
+  display: grid;
+  grid-template-columns: 20px 1fr auto;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  color: #111827;
+  transition: background .12s ease;
+}
+.dm-helper-toolcall-row:hover { background: #fafafa; }
+.dm-helper-toolcall-icon { color: #9ca3af; flex-shrink: 0; }
+.dm-helper-toolcall-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: #2c2c2c;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dm-helper-toolcall-chevron {
+  color: #9ca3af;
+  transition: transform .15s ease;
+  flex-shrink: 0;
+}
+.dm-helper-toolcall-chevron.is-open { transform: rotate(180deg); }
+.dm-helper-toolcall-body {
+  background: #f9fafb;
+  border-top: 1px solid #e5e7eb;
+  padding: 8px 10px;
+  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+.dm-helper-toolcall-content {
+  margin: 0 0 8px;
+  padding: 6px 8px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #4b5563;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 140px;
+  overflow-y: auto;
+}
+.dm-helper-toolcall-json {
+  margin: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11.5px;
+  line-height: 1.5;
+  color: #374151;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 240px;
+  overflow-y: auto;
+}
+.dm-helper-toolcall-open {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  padding: 0 9px;
+  margin: 6px 10px 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 5px;
+  background: #ffffff;
+  color: #2c2c2c;
+  font: inherit;
+  font-size: 11.5px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background .12s ease, border-color .12s ease;
+}
+.dm-helper-toolcall-open:hover {
+  background: #f5f5f5;
+  border-color: #9ca3af;
+}
+
+.dm-helper-typing {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 0;
+}
+.dm-helper-typing-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #9ca3af;
+  animation: dm-helper-typing-bounce 1.1s infinite ease-in-out both;
+}
+.dm-helper-typing-dot:nth-child(1) { animation-delay: -0.32s; }
+.dm-helper-typing-dot:nth-child(2) { animation-delay: -0.16s; }
+.dm-helper-typing-dot:nth-child(3) { animation-delay: 0s; }
+@keyframes dm-helper-typing-bounce {
+  0%, 80%, 100% { transform: scale(0.72); opacity: 0.55; }
+  40%           { transform: scale(1);    opacity: 1; }
+}
+
+.dm-helper-bubble-system {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 99px;
+  background: #f3f4f6;
+  color: #6b7280;
+  border: 1px solid #e5e7eb;
+  font-size: 11.5px;
+  font-weight: 500;
+}
+
+/* ─── HelperSidecar — Setup tab (state-driven, editable, ChatGPT-clean) ── */
+.dm-helper-setup-body {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 16px;
+  overflow-y: auto;
+}
+.dm-helper-setup-intro {
+  margin: 0;
+  font-size: 12.5px;
+  color: #6b7280;
+  line-height: 1.5;
+}
+
+.dm-helper-setup-status {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  background: #fafafa;
+  transition: background .12s ease, border-color .12s ease;
+}
+.dm-helper-setup-status.state-connected { background: #f0fdf4; border-color: #bbf7d0; }
+.dm-helper-setup-status.state-unreachable { background: #fffbeb; border-color: #fde68a; }
+.dm-helper-setup-status.state-unconfigured { background: #f5f3ff; border-color: #ddd6fe; }
+.dm-helper-setup-status.state-checking { background: #f9fafb; border-color: #e5e7eb; }
+
+.dm-helper-setup-status-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.dm-helper-setup-status-label {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 600;
+  color: #111827;
+}
+.dm-helper-setup-status-meta {
+  font-size: 12px;
+  color: #4b5563;
+  line-height: 1.5;
+  padding-left: 16px;
+}
+.dm-helper-setup-status.state-connected .dm-helper-setup-status-meta {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11.5px;
+  color: #15803d;
+}
+
+.dm-helper-setup-recheck {
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background: #fff;
+  color: #2c2c2c;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background .12s ease, border-color .12s ease;
+}
+.dm-helper-setup-recheck:hover:not(:disabled) {
+  background: #f9fafb;
+  border-color: #9ca3af;
+}
+.dm-helper-setup-recheck:disabled { opacity: .55; cursor: not-allowed; }
+
+.dm-helper-setup-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.dm-helper-setup-label {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: #374151;
+}
+.dm-helper-setup-input,
+.dm-helper-setup-select {
+  width: 100%;
+  height: 34px;
+  padding: 0 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 7px;
+  background: #ffffff;
+  color: #111827;
+  font: inherit;
+  font-size: 13px;
+  box-sizing: border-box;
+  transition: border-color .12s ease, box-shadow .12s ease;
+}
+.dm-helper-setup-input::placeholder { color: #9ca3af; }
+.dm-helper-setup-input:focus,
+.dm-helper-setup-select:focus {
+  outline: none;
+  border-color: #6b7280;
+  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
+}
+.dm-helper-setup-input:disabled,
+.dm-helper-setup-select:disabled {
+  background: #f9fafb;
+  color: #6b7280;
+  cursor: not-allowed;
+}
+.dm-helper-setup-select {
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 32px;
+}
+
+.dm-helper-setup-quick-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  margin-top: 2px;
+}
+.dm-helper-setup-quick-label {
+  font-size: 11px;
+  color: #6b7280;
+  margin-right: 4px;
+}
+.dm-helper-setup-quick-pill {
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid #e5e7eb;
+  border-radius: 99px;
+  background: #fff;
+  color: #4b5563;
+  font: inherit;
+  font-size: 11px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  cursor: pointer;
+  transition: background .12s ease, border-color .12s ease, color .12s ease;
+}
+.dm-helper-setup-quick-pill:hover {
+  background: #f9fafb;
+  border-color: #d1d5db;
+  color: #111827;
+}
+.dm-helper-setup-quick-pill.active {
+  background: #eef2ff;
+  border-color: #c7d2fe;
+  color: #1e3a8a;
+}
+
+.dm-helper-setup-helper-text {
+  font-size: 11.5px;
+  color: #6b7280;
+}
+.dm-helper-setup-helper-text strong { color: #111827; font-weight: 600; }
+
+.dm-helper-setup-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding-top: 2px;
+}
+.dm-helper-setup-save {
+  height: 34px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 7px;
+  background: #111827;
+  color: #fff;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background .12s ease, opacity .12s ease;
+}
+.dm-helper-setup-save:hover:not(:disabled) { background: #000; }
+.dm-helper-setup-save:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 2px; }
+.dm-helper-setup-save:disabled {
+  background: #d1d5db;
+  color: #fff;
+  cursor: not-allowed;
+}
+.dm-helper-setup-save-ok {
+  font-size: 12px;
+  color: #15803d;
+  font-weight: 500;
+}
+.dm-helper-setup-save-error {
+  font-size: 12px;
+  color: #b91c1c;
+}
+
+.dm-helper-setup-guide {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 4px;
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
+}
+.dm-helper-setup-command {
+  margin: 0;
+  padding: 10px 12px;
+  background: #0b1220;
+  color: #e5e7eb;
+  border-radius: 7px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12.5px;
+  overflow-x: auto;
+  white-space: pre;
+}
+.dm-helper-setup-copy {
+  align-self: flex-start;
+  height: 28px;
+  padding: 0 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background: #fff;
+  color: #2c2c2c;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background .12s ease, border-color .12s ease;
+}
+.dm-helper-setup-copy:hover {
+  background: #f9fafb;
+  border-color: #9ca3af;
+}
+
+/* Setup tab */
+.dm-helper-setup-section { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
+.dm-helper-setup-section:last-child { border-bottom: none; }
+.dm-helper-setup-value { display: block; font-size: 12px; color: #374151; background: #f3f4f6; border-radius: 5px; padding: 6px 10px; word-break: break-all; font-family: monospace; }
+.dm-helper-setup-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 99px; background: #f3f4f6; color: #374151; font-size: 12px; font-weight: 600; }
+.dm-helper-setup-command { margin: 0; padding: 10px 12px; background: #1e293b; color: #e2e8f0; border-radius: 8px; font-size: 13px; font-family: monospace; white-space: pre; }
+.dm-helper-connection-row { display: flex; align-items: center; gap: 8px; }
+.dm-helper-connection-label { font-size: 13px; color: #374151; flex: 1; }
+.dm-helper-recheck { font-size: 12px !important; padding: 3px 8px !important; height: 26px !important; }
+.dm-connection-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+.dm-connection-ok { background: #22c55e; }
+.dm-connection-amber { background: #f59e0b; }
+.dm-connection-checking { background: #d1d5db; animation: blink 1s step-end infinite; }
+
+/* NavRail helper toggle */
+/* Legacy rail-helper-toggle classes removed in the rail unification:
+   the Ask helper trigger now lives in the tab row as a pill that mirrors
+   Twenty's "+ New chat" pill. See `app/workspace-rail.jsx`. */
+
+/* ─── Workspace rail — top row (brand + utility actions) ─────────────── */
+.workspace-rail-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 32px;
+}
+.workspace-rail-brand-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px;
+  margin-left: -4px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 650;
+  cursor: pointer;
+  min-width: 0;
+}
+.workspace-rail-brand-button:hover { background: #f3f4f6; }
+.workspace-rail-brand-button .workspace-brand-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 130px;
+}
+.workspace-brand-caret { color: #9ca3af; flex-shrink: 0; }
+.workspace-rail-topbar-actions { display: inline-flex; gap: 2px; flex-shrink: 0; }
+.workspace-rail-icon-btn {
+  width: 26px;
+  height: 26px;
+  display: grid;
+  place-items: center;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  transition: background .12s ease, color .12s ease, border-color .12s ease;
+}
+.workspace-rail-icon-btn:hover { background: #f3f4f6; color: #111827; }
+.workspace-rail-icon-btn:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
+
+/* ─── Workspace rail — tab row (Home/Chat tabs + Ask helper pill) ────── */
+.workspace-rail-tabbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: -4px;
+}
+.workspace-rail-tabs {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border-radius: 8px;
+  background: transparent;
+}
+.workspace-rail-tab {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: #9ca3af;
+  cursor: pointer;
+  transition: background .12s ease, color .12s ease;
+}
+.workspace-rail-tab:hover { background: #f3f4f6; color: #374151; }
+.workspace-rail-tab.active {
+  background: #f1f1f1;
+  color: #111827;
+}
+.workspace-rail-tab:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
+
+.workspace-rail-helper-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 5px;
+  background: #fff;
+  color: #111827;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
+  flex-shrink: 0;
+}
+.workspace-rail-helper-pill:hover {
+  background: #fafafa;
+  border-color: #d1d5db;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
+}
+.workspace-rail-helper-pill.active {
+  background: #f3f4f6;
+  border-color: #d1d5db;
+}
+.workspace-rail-helper-pill:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
+.workspace-rail-helper-pill svg { color: #6b7280; }
+
+/* ─── Workspace rail — chat tab body (Latest + thread list) ──────────── */
+.workspace-rail-chat {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-height: 0;
+  flex: 1;
+}
+
+/* Chat search bar — sits above the Latest label. Light, compact, inline */
+.workspace-rail-chat-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid #e5e7eb;
+  border-radius: 7px;
+  background: #fafafa;
+  color: #6b7280;
+  margin: 2px 0 4px;
+}
+.workspace-rail-chat-search:focus-within {
+  background: #ffffff;
+  border-color: #9ca3af;
+  box-shadow: 0 0 0 3px rgba(0,0,0,.04);
+}
+.workspace-rail-chat-search-input {
+  flex: 1;
+  min-width: 0;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  outline: none;
+  color: #111827;
+  font: inherit;
+  font-size: 12.5px;
+}
+.workspace-rail-chat-search-input::placeholder { color: #9ca3af; }
+.workspace-rail-chat-search-clear {
+  width: 18px;
+  height: 18px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #9ca3af;
+  cursor: pointer;
+}
+.workspace-rail-chat-search-clear:hover { background: #ececec; color: #4b5563; }
+
+/* Truncated state: hug the 10 visible rows, no fade-mask, no scroll —
+   the "Show N more" pill is the affordance. Expanded state: bounded
+   height + auto scroll so the list never bleeds past the fold. */
+.workspace-rail-thread-scroll {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: calc(100vh - 260px);
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+.workspace-rail-thread-scroll.is-truncated {
+  flex: 0 0 auto;
+  max-height: none;
+  overflow: visible;
+  -webkit-mask-image: none;
+          mask-image: none;
+}
+.workspace-rail-chat-show-more {
+  align-self: center;
+  height: 22px;
+  padding: 0 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 99px;
+  background: #fff;
+  color: #4b5563;
+  font: inherit;
+  font-size: 11.5px;
+  cursor: pointer;
+  margin-top: 0;
+}
+.workspace-rail-chat-show-more:hover {
+  background: #fafafa;
+  border-color: #d1d5db;
+  color: #111827;
+}
+.workspace-rail-section-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: #9ca3af;
+  text-transform: none;
+  padding: 4px 8px 2px;
+}
+.workspace-rail-chat-empty {
+  margin: 0;
+  padding: 12px 10px;
+  font-size: 12px;
+  color: #6b7280;
+  line-height: 1.45;
+}
+.workspace-rail-thread-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  overflow-y: auto;
+}
+.workspace-rail-thread-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  transition: background .12s ease;
+}
+.workspace-rail-thread-row:hover { background: #f5f5f5; }
+.workspace-rail-thread-row:hover .workspace-rail-thread-menu-btn { opacity: 1; pointer-events: auto; }
+.workspace-rail-thread-row.is-active { background: #ececec; }
+
+.workspace-rail-thread-main {
+  flex: 1;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 8px 7px 9px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  min-width: 0;
+  border-radius: 6px;
+}
+.workspace-rail-thread-icon { color: #6b7280; flex-shrink: 0; }
+.workspace-rail-thread-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: #2c2c2c;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.workspace-rail-thread-time {
+  font-size: 11px;
+  color: #9ca3af;
+  flex-shrink: 0;
+  margin-right: 2px;
+}
+.workspace-rail-thread-rename {
+  flex: 1;
+  min-width: 0;
+  height: 22px;
+  padding: 0 6px;
+  border: 1px solid #d1d5db;
+  border-radius: 5px;
+  background: #fff;
+  color: #111827;
+  font: inherit;
+  font-size: 13px;
+  outline: none;
+}
+.workspace-rail-thread-rename:focus { border-color: #9ca3af; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
+
+.workspace-rail-thread-menu-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding-right: 4px;
+}
+.workspace-rail-thread-menu-btn {
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .12s ease, background .12s ease;
+}
+.workspace-rail-thread-menu-btn:hover { background: #e5e7eb; color: #111827; }
+.workspace-rail-thread-menu-btn:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid #bfdbfe; outline-offset: 1px; }
+
+.workspace-rail-thread-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 160px;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  z-index: 90;
+}
+.workspace-rail-thread-menu-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 30px;
+  padding: 0 10px;
+  font-size: 13px;
+  color: #2c2c2c;
+  background: transparent;
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  text-align: left;
+}
+.workspace-rail-thread-menu-item:hover { background: #f5f5f5; }
+.workspace-rail-thread-menu-item.is-destructive { color: #b91c1c; }
+.workspace-rail-thread-menu-item.is-destructive:hover { background: #fef2f2; }
+
+/* ─── HelperSidecar — clean light textarea (fix the dark-UA fallback) ─── */
+.dm-field-textarea {
+  width: 100%;
+  min-height: 72px;
+  padding: 8px 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 7px;
+  background: #ffffff;
+  color: #111827;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  resize: vertical;
+  box-sizing: border-box;
+  transition: border-color .12s ease, box-shadow .12s ease;
+}
+.dm-field-textarea::placeholder { color: #9ca3af; }
+.dm-field-textarea:focus {
+  outline: none;
+  border-color: #6b7280;
+  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
+}
+.dm-field-textarea:disabled {
+  background: #f9fafb;
+  color: #6b7280;
+  cursor: not-allowed;
+}
+
+/* ─── HelperSidecar — composer-at-bottom layout (Twenty Ask AI parity) ── */
+.dm-helper-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;     /* let the conversation scroll, not the body */
+}
+.dm-helper-conversation {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 16px;
+  min-height: 0;        /* unlocks flex children to scroll */
+  overflow-y: auto;     /* the canonical scroller for long threads */
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+.dm-helper-conversation:empty { padding: 0; }
+
+.dm-helper-composer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 14px 14px;
+  border-top: 1px solid #eaeaea;
+  background: #fcfcfc;
+  flex-shrink: 0;
+}
+.dm-helper-composer-prompt {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: #111827;
+}
+
+/* Empty-state chip stack — one chip per row, Twenty "Create a dashboard"
+   grammar (icon-left, plain label, full-width, light hover). */
+.dm-helper-chip-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 4px;
+}
+.dm-helper-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  height: 34px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  background: transparent;
+  color: #2c2c2c;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: left;
+  transition: background .12s ease, border-color .12s ease;
+}
+.dm-helper-chip:hover:not(:disabled) { background: #f3f4f6; }
+.dm-helper-chip.active { background: #eef2ff; border-color: #c7d2fe; color: #1e3a8a; }
+.dm-helper-chip:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
+.dm-helper-chip:disabled { opacity: .55; cursor: not-allowed; }
+.dm-helper-chip svg { color: #6b7280; flex-shrink: 0; }
+.dm-helper-chip.active svg { color: #1e40af; }
+
+.dm-helper-chip-more-wrap { position: relative; display: block; }
+.dm-helper-chip-more {
+  justify-content: space-between;
+}
+
+/* Composer input — textarea + bottom action row in one rounded container. */
+.dm-helper-composer-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  border: 1px solid #d1d5db;
+  border-radius: 10px;
+  background: #ffffff;
+  transition: border-color .12s ease, box-shadow .12s ease;
+}
+.dm-helper-composer-input:focus-within {
+  border-color: #9ca3af;
+  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
+}
+.dm-helper-composer-textarea {
+  width: 100%;
+  min-height: 56px;
+  padding: 10px 12px 6px;
+  border: 0;
+  border-radius: 10px 10px 0 0;
+  background: transparent;
+  color: #111827;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+  box-sizing: border-box;
+}
+.dm-helper-composer-textarea::placeholder { color: #9ca3af; }
+.dm-helper-composer-textarea:disabled { color: #6b7280; cursor: not-allowed; }
+
+.dm-helper-composer-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  padding: 6px 8px 8px;
+}
+.dm-helper-composer-actions-right {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.dm-helper-composer-attach {
+  width: 26px;
+  height: 26px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  transition: background .12s ease, color .12s ease;
+}
+.dm-helper-composer-attach:hover:not(:disabled) { background: #f3f4f6; color: #111827; }
+.dm-helper-composer-attach:disabled { opacity: .45; cursor: not-allowed; }
+
+.dm-helper-composer-mode-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid #e5e7eb;
+  border-radius: 99px;
+  background: #f9fafb;
+  color: #4b5563;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.dm-helper-composer-send {
+  width: 26px;
+  height: 26px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 6px;
+  background: #111827;
+  color: #ffffff;
+  cursor: pointer;
+  transition: background .12s ease, opacity .12s ease;
+}
+.dm-helper-composer-send:hover:not(:disabled) { background: #000000; }
+.dm-helper-composer-send:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
+.dm-helper-composer-send:disabled {
+  background: #d1d5db;
+  color: #ffffff;
+  cursor: not-allowed;
+}
+
+.dm-helper-composer-hint {
+  margin: 0;
+  font-size: 11px;
+  color: #6b7280;
+  line-height: 1.45;
+}
+
+/* data-helper-trigger button inside table header */
+.dm-detail-helper-trigger { display: flex; align-items: center; padding: 0 8px; }
+.dm-helper-row-btn { display: flex; align-items: center; gap: 5px; font-size: 12px !important; padding: 4px 10px !important; height: 28px !important; }
+.dm-page-empty-actions { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 4px; }
+
 @media (max-width: 900px) {
   .dm-layout-v2 { grid-template-columns: 1fr; }
   .dm-obj-col { border-right: 0; border-bottom: 1px solid #e5e7eb; }
@@ -4314,7 +5673,7 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 .source-dropdown-item .source-dropdown-item-live { color: #555; }
 .source-dropdown-integration-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 10px; font-weight: 700; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 4px; color: #374151; flex-shrink: 0; margin-left: auto; cursor: default; }
 .source-dropdown-empty { padding: 12px 8px 4px; font-size: 12px; color: #9ca3af; display: grid; gap: 4px; }
-.source-dropdown-hint { font-size: 11px; color: #c4b5fd; }
+.source-dropdown-hint { font-size: 11px; color: #9ca3af; }
 .source-dropdown-footer { display: flex; align-items: center; gap: 4px; padding: 8px 8px 6px; border-top: 1px solid #f1f5f9; margin-top: 4px; font-size: 11px; color: #9ca3af; }
 .source-dropdown-footer strong { color: #333; }
 
@@ -4324,7 +5683,7 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 .workspace-source-search-wrap:focus-within { border-color: #555; }
 .workspace-source-object-list { display: grid; gap: 2px; }
 .workspace-source-object-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 7px; cursor: pointer; text-align: left; font: inherit; }
-.workspace-source-object-row:hover { background: #f9fafb; border-color: #a5b4fc; }
+.workspace-source-object-row:hover { background: #f9fafb; border-color: #bfdbfe; }
 .workspace-source-object-row.active { background: #f0f0f0; border-color: #aaa; }
 .workspace-source-object-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #f3f4f6; color: #374151; flex-shrink: 0; }
 .workspace-source-object-row.active .workspace-source-object-icon { background: #e0e0e0; color: #222; }