@growthub/cli 0.9.8 → 0.9.10

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

@@ -358,6 +358,17 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   .sidebar { position: static; height: auto; }
   .primitive-grid, .primitive-grid.adapter, .capability-board, .primitive-columns, .contract-panel, .hero-grid, .grid, .adapter, .ops-strip, .setup-grid, .results-panel, .results-metrics { grid-template-columns: 1fr; }
   .quick-actions { position: static; width: auto; margin: 20px 30px; }
+  .workspace-settings-page {
+    grid-template-columns: 1fr;
+  }
+  .workspace-settings-page .workspace-rail {
+    min-height: auto;
+    border-right: 0;
+    border-bottom: 1px solid #e8e8e8;
+  }
+  .workspace-integration-summary {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 720px) {
@@ -366,6 +377,22 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   .utility-actions { margin-top: 10px; }
   .integration-card-top { grid-template-columns: 34px minmax(0, 1fr); }
   .integration-card-top .status { grid-column: 2; width: fit-content; }
+  .workspace-toolbar,
+  .workspace-integration-toolbar,
+  .workspace-integration-section-heading {
+    display: block;
+  }
+  .workspace-toolbar-actions {
+    justify-content: flex-start;
+    margin-top: 10px;
+  }
+  .workspace-integration-row {
+    grid-template-columns: 32px minmax(0, 1fr);
+  }
+  .workspace-integration-status {
+    grid-column: 2;
+    width: fit-content;
+  }
 }
 
 .workspace-builder {
@@ -375,6 +402,9 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   background: #fafafa;
   color: #252525;
 }
+.workspace-settings-page {
+  grid-template-columns: 220px minmax(0, 1fr);
+}
 .workspace-rail,
 .workspace-widget-panel {
   background: #ffffff;
@@ -409,18 +439,26 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   display: grid;
   gap: 2px;
 }
-.workspace-nav a {
+.workspace-nav a,
+.workspace-nav-static {
   border-radius: 6px;
   color: #686868;
   font-size: 13px;
   padding: 8px 9px;
   text-decoration: none;
 }
+.workspace-nav-static {
+  cursor: default;
+}
 .workspace-nav a.active,
 .workspace-nav a:hover {
   background: #f1f1f1;
   color: #2c2c2c;
 }
+.workspace-nav-button.active {
+  background: #f1f1f1;
+  color: #2c2c2c;
+}
 .workspace-rail-status {
   margin-top: auto;
   display: flex;
@@ -457,8 +495,23 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 }
 .workspace-toolbar-actions {
   display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
   gap: 8px;
 }
+.workspace-toolbar-actions a,
+.workspace-toolbar-actions span {
+  min-height: 30px;
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid #dedede;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #4f4f4f;
+  font-size: 12px;
+  padding: 0 10px;
+  text-decoration: none;
+}
 .workspace-toolbar-actions button,
 .workspace-tabs button,
 .workspace-widget-panel button,
@@ -483,8 +536,11 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 }
 .workspace-table {
   margin-bottom: 14px;
+  display: grid;
+  grid-template-columns: minmax(190px, 1.25fr) minmax(116px, 0.75fr) minmax(92px, 0.6fr) minmax(118px, 0.7fr) minmax(210px, 1fr);
 }
 .workspace-table-heading {
+  grid-column: 1 / -1;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -499,28 +555,33 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   font-size: 12px;
 }
 .workspace-table-row {
-  display: grid;
-  grid-template-columns: minmax(170px, 1.2fr) minmax(100px, 0.7fr) minmax(92px, 0.6fr) minmax(96px, 0.55fr) minmax(260px, 1.35fr);
-  align-items: center;
-  min-height: 34px;
-  border-bottom: 1px solid #f0f0f0;
-}
-.workspace-table-row:last-child {
-  border-bottom: 0;
+  display: contents;
 }
-.workspace-table-row span,
-.workspace-table-row code {
+.workspace-table-row > span,
+.workspace-table-row > code {
+  display: flex;
+  align-items: center;
   min-width: 0;
+  min-height: 48px;
+  border-bottom: 1px solid #f0f0f0;
   border-right: 1px solid #f0f0f0;
   color: #555;
   font-size: 12px;
   padding: 7px 10px;
 }
-.workspace-table-row span:last-child,
-.workspace-table-row code:last-child {
+.workspace-table-head > span {
+  min-height: 36px;
+  background: #fbfbfb;
+}
+.workspace-table-row:last-child > span,
+.workspace-table-row:last-child > code {
+  border-bottom: 0;
+}
+.workspace-table-row > span:last-child,
+.workspace-table-row > code:last-child {
   border-right: 0;
 }
-.workspace-table-head span {
+.workspace-table-head > span {
   color: #929292;
   font-weight: 600;
 }
@@ -535,6 +596,9 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   align-items: center;
   gap: 6px;
 }
+.workspace-dashboard-title {
+  min-width: 0;
+}
 .workspace-dashboard-title button {
   min-width: 0;
   border: 0;
@@ -562,8 +626,33 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   font: inherit;
   padding: 5px 7px;
 }
+.workspace-dashboard-title-editor {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 32px;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+}
+.workspace-dashboard-title-editor input {
+  min-height: 30px;
+}
+.workspace-dashboard-title-confirm {
+  min-height: 30px;
+  border: 1px solid #b8e0c2;
+  border-radius: 6px;
+  background: #ecfdf3;
+  color: #15803d;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 800;
+  padding: 0;
+}
+.workspace-dashboard-title-confirm:hover {
+  background: #dcfce7;
+}
 .workspace-dashboard-actions {
   flex-wrap: wrap;
+  justify-content: flex-start;
 }
 .workspace-dashboard-actions button {
   border: 1px solid #e1e1e1;
@@ -578,6 +667,149 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 .workspace-dashboard-actions button:hover {
   background: #f0f0f0;
 }
+.workspace-integration-summary {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 14px;
+}
+.workspace-integration-summary article,
+.workspace-integration-toolbar,
+.workspace-integration-section,
+.workspace-integration-row {
+  border: 1px solid #e7e7e7;
+  border-radius: 8px;
+  background: #ffffff;
+}
+.workspace-integration-summary article {
+  min-height: 118px;
+  padding: 14px;
+}
+.workspace-integration-summary span,
+.workspace-integration-section-heading > span {
+  color: #888;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.workspace-integration-summary strong {
+  display: block;
+  margin: 10px 0 12px;
+  color: #252525;
+  font-size: 20px;
+  line-height: 1.1;
+}
+.workspace-integration-summary div,
+.workspace-integration-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.workspace-integration-summary code,
+.workspace-integration-meta span {
+  border: 1px solid #e1e1e1;
+  border-radius: 999px;
+  background: #fafafa;
+  color: #666;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  padding: 4px 7px;
+}
+.workspace-integration-toolbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 14px;
+  padding: 13px 14px;
+}
+.workspace-integration-toolbar strong {
+  display: block;
+  color: #252525;
+  font-size: 13px;
+}
+.workspace-integration-toolbar p,
+.workspace-integration-section-heading p,
+.workspace-integration-main p {
+  margin: 4px 0 0;
+  color: #777;
+  font-size: 12px;
+  line-height: 1.45;
+}
+.workspace-integration-board {
+  display: grid;
+  gap: 14px;
+}
+.workspace-integration-section {
+  overflow: hidden;
+}
+.workspace-integration-section-heading {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: flex-start;
+  border-bottom: 1px solid #ececec;
+  padding: 13px 14px;
+}
+.workspace-integration-section-heading h2 {
+  margin: 0;
+  color: #252525;
+  font-size: 15px;
+}
+.workspace-integration-list {
+  display: grid;
+}
+.workspace-integration-row {
+  display: grid;
+  grid-template-columns: 38px minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: flex-start;
+  border-width: 0 0 1px;
+  border-radius: 0;
+  padding: 12px 14px;
+}
+.workspace-integration-row:last-child {
+  border-bottom: 0;
+}
+.workspace-provider-mark {
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  border: 1px solid #dedede;
+  border-radius: 6px;
+  background: #f7f7f7;
+  color: #555;
+  font-size: 12px;
+  font-weight: 800;
+}
+.workspace-integration-main {
+  min-width: 0;
+}
+.workspace-integration-main strong {
+  display: block;
+  color: #303030;
+  font-size: 13px;
+}
+.workspace-integration-status {
+  white-space: nowrap;
+  border: 1px solid #e1e1e1;
+  border-radius: 999px;
+  background: #fafafa;
+  color: #777;
+  font-size: 11px;
+  padding: 4px 8px;
+}
+.workspace-integration-status.connected {
+  border-color: #b8e0c2;
+  background: #ecfdf3;
+  color: #15803d;
+}
+.workspace-integration-status.needs-connection {
+  border-color: #f6d58e;
+  background: #fff7e6;
+  color: #9a5b00;
+}
 .workspace-tabs {
   display: flex;
   align-items: center;
@@ -626,11 +858,6 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 .workspace-hidden-input {
   display: none;
 }
-.workspace-config-message {
-  margin: -8px 0 10px;
-  color: #777;
-  font-size: 12px;
-}
 .workspace-grid {
   position: relative;
   display: grid;
@@ -699,6 +926,9 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   cursor: pointer;
   overflow: hidden;
 }
+.workspace-grid.moving-widget .workspace-widget-preview {
+  cursor: grabbing;
+}
 .workspace-widget-preview.selected {
   border-color: #3f68ff;
   box-shadow: inset 0 0 0 1px rgba(63, 104, 255, 0.45);
@@ -745,6 +975,13 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   color: #888;
   font-size: 11px;
 }
+.workspace-widget-drag-handle {
+  cursor: grab;
+  user-select: none;
+}
+.workspace-grid.moving-widget .workspace-widget-drag-handle {
+  cursor: grabbing;
+}
 .workspace-widget-preview-title strong {
   min-width: 0;
   flex: 1;
@@ -1162,6 +1399,15 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 .template-card-actions button:hover {
   background: #f7f7f7;
 }
+.template-card-actions button.primary {
+  border-color: #c7d2fe;
+  background: #eef2ff;
+  color: #273b8f;
+  font-weight: 700;
+}
+.template-card-actions button.primary:hover {
+  background: #e0e7ff;
+}
 .template-gallery-footer {
   display: flex;
   flex-direction: column;
@@ -1191,3 +1437,1002 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
     grid-template-columns: 1fr;
   }
 }
+
+/*
+ * Widget panel — Twenty-style action row, empty state, inline field hints.
+ * Additive to the existing .workspace-widget-* vocabulary.
+ */
+.workspace-widget-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ececec;
+}
+.workspace-widget-actions button {
+  flex: 1;
+  min-height: 30px;
+  border: 1px solid #dedede;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #3d3d3d;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  padding: 0 8px;
+}
+.workspace-widget-actions button:hover {
+  background: #f7f7f7;
+}
+.workspace-widget-actions button.danger {
+  color: #b3261e;
+  border-color: #f0c5c2;
+  background: #fff7f6;
+}
+.workspace-widget-actions button.danger:hover {
+  background: #fdeae8;
+}
+.workspace-widget-empty {
+  display: grid;
+  gap: 6px;
+  margin-top: 14px;
+  padding: 12px;
+  border: 1px dashed #d8d8d8;
+  border-radius: 8px;
+  background: #fafafa;
+}
+.workspace-widget-empty strong {
+  color: #2c2c2c;
+  font-size: 13px;
+}
+.workspace-widget-empty p {
+  margin: 0;
+  color: #666;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.workspace-field-with-hint {
+  position: relative;
+}
+.workspace-field-hint {
+  display: block;
+  margin-top: 4px;
+  color: #888;
+  font-size: 11px;
+  font-style: normal;
+}
+.workspace-field-hint.good {
+  color: #15803d;
+}
+.workspace-field-hint.warn {
+  color: #92400e;
+}
+
+/*
+ * Workspace Settings + Management overlays.
+ * Inspect-only panels sourced from GET /api/workspace + describePersistenceMode().
+ * Visual vocabulary mirrors .template-gallery (modal + backdrop + white panel)
+ * and .workspace-* (light theme, thin borders, subtle muted text).
+ */
+.workspace-nav-button {
+  display: block;
+  width: 100%;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #686868;
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  padding: 8px 9px;
+  text-align: left;
+  text-decoration: none;
+}
+.workspace-nav-button:hover,
+.workspace-nav-button:focus {
+  background: #f1f1f1;
+  color: #2c2c2c;
+  outline: none;
+}
+.workspace-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+}
+.workspace-overlay-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 15, 15, 0.42);
+}
+.workspace-overlay-panel {
+  position: relative;
+  margin: 32px auto;
+  width: min(960px, calc(100vw - 32px));
+  max-height: calc(100vh - 64px);
+  overflow: auto;
+  background: #ffffff;
+  border: 1px solid #e3e3e3;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(15, 15, 15, 0.18);
+  padding: 18px 18px 14px;
+}
+.workspace-overlay-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+.workspace-overlay-header p {
+  margin: 0 0 2px;
+  color: #888;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.workspace-overlay-header h2 {
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.2;
+}
+.workspace-overlay-header button {
+  min-height: 30px;
+  min-width: 30px;
+  border: 1px solid #dedede;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #4f4f4f;
+  font: inherit;
+  cursor: pointer;
+}
+.workspace-overlay-note {
+  margin: 0 0 16px;
+  padding: 10px 12px;
+  border: 1px dashed #d8d8d8;
+  border-radius: 8px;
+  background: #fafafa;
+  color: #555;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.workspace-overlay-note code {
+  background: #f4f4f4;
+  border-radius: 4px;
+  color: #444;
+  font-size: 11px;
+  padding: 1px 5px;
+}
+.workspace-readiness {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+.workspace-readiness-section {
+  display: grid;
+  align-content: start;
+  gap: 6px;
+  border: 1px solid #e7e7e7;
+  border-radius: 10px;
+  background: #fcfcfc;
+  padding: 14px;
+}
+.workspace-readiness-section h3 {
+  margin: 0 0 4px;
+  color: #333;
+  font-size: 13px;
+  font-weight: 700;
+}
+.workspace-readiness-row {
+  display: grid;
+  grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+  min-height: 28px;
+  border-top: 1px solid #f0f0f0;
+  padding: 6px 0;
+}
+.workspace-readiness-row:first-of-type {
+  border-top: 0;
+  padding-top: 0;
+}
+.workspace-readiness-row > span:first-child {
+  color: #999;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.workspace-readiness-row strong {
+  min-width: 0;
+  color: #2c2c2c;
+  font-size: 13px;
+  font-weight: 600;
+  word-break: break-word;
+}
+.workspace-readiness-row em {
+  min-width: 0;
+  color: #666;
+  font-size: 12px;
+  font-style: normal;
+  line-height: 1.45;
+  word-break: break-word;
+}
+.workspace-readiness-row code {
+  min-width: 0;
+  background: #f4f4f4;
+  border-radius: 4px;
+  color: #555;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  padding: 2px 6px;
+  word-break: break-word;
+}
+.workspace-readiness-empty {
+  grid-template-columns: 1fr;
+}
+.workspace-readiness-empty em {
+  color: #888;
+}
+.workspace-readiness-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #e1e1e1;
+  border-radius: 999px;
+  background: #f5f5f5;
+  color: #444;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 3px 9px;
+  white-space: nowrap;
+}
+.workspace-readiness-badge.good {
+  background: rgba(34, 197, 94, 0.12);
+  border-color: rgba(34, 197, 94, 0.45);
+  color: #15803d;
+}
+.workspace-readiness-badge.warn {
+  background: rgba(245, 158, 11, 0.12);
+  border-color: rgba(245, 158, 11, 0.45);
+  color: #92400e;
+}
+.workspace-readiness-badge.mode-filesystem {
+  background: rgba(34, 197, 94, 0.12);
+  border-color: rgba(34, 197, 94, 0.45);
+  color: #15803d;
+}
+.workspace-readiness-badge.mode-read-only {
+  background: rgba(245, 158, 11, 0.12);
+  border-color: rgba(245, 158, 11, 0.45);
+  color: #92400e;
+}
+.workspace-readiness-badge.mode-database {
+  background: rgba(56, 189, 248, 0.12);
+  border-color: rgba(56, 189, 248, 0.5);
+  color: #075985;
+}
+
+@media (max-width: 720px) {
+  .workspace-overlay-panel {
+    margin: 16px;
+    width: calc(100vw - 32px);
+    padding: 14px;
+  }
+  .workspace-readiness {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* === V1.1 builder extensions: sub-panel navigation, source/fields/sort/filter, chart, command palette === */
+
+.workspace-widget-subpanel {
+  display: grid;
+  gap: 12px;
+  padding-top: 8px;
+}
+.workspace-widget-subpanel-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 0 8px;
+  border-bottom: 1px solid #ececec;
+}
+.workspace-widget-subpanel-header div {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.workspace-widget-subpanel-header p {
+  margin: 0;
+  font-size: 11px;
+  color: #999;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.workspace-widget-subpanel-header strong {
+  font-size: 14px;
+  color: #444;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.workspace-widget-subpanel-back {
+  width: 26px;
+  height: 26px;
+  display: grid;
+  place-items: center;
+  border: 1px solid #e8e8e8;
+  border-radius: 6px;
+  background: #fff;
+  color: #666;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+}
+.workspace-widget-subpanel-back:hover {
+  background: #f3f3f3;
+}
+
+.workspace-panel-hint {
+  margin: 2px 0 0;
+  color: #999;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+/* Settings row buttons (replace bare div on the root inspector list) */
+.workspace-settings-list .workspace-settings-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 34px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: #666;
+  font: inherit;
+  font-size: 13px;
+  padding: 0 8px;
+  text-align: left;
+  cursor: pointer;
+}
+.workspace-settings-list .workspace-settings-row:hover:not([disabled]) {
+  background: #f3f3f3;
+}
+.workspace-settings-list .workspace-settings-row[disabled] {
+  cursor: default;
+  color: #888;
+}
+.workspace-settings-list .workspace-settings-row code {
+  color: #888;
+  background: transparent;
+}
+
+/* Source picker */
+.workspace-source-list {
+  display: grid;
+  gap: 4px;
+}
+.workspace-source-controls {
+  display: grid;
+  gap: 8px;
+  margin-top: 8px;
+}
+.workspace-source-controls label {
+  min-width: 0;
+  min-height: 34px;
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #e5e5e5;
+  border-radius: 7px;
+  background: #ffffff;
+  color: #777;
+  padding: 0 9px;
+  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04);
+}
+.workspace-source-controls input,
+.workspace-source-controls select {
+  width: 100%;
+  min-width: 0;
+  height: 32px;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: #333;
+  font: inherit;
+  font-size: 13px;
+  padding: 0;
+}
+.workspace-source-controls select {
+  appearance: none;
+  cursor: pointer;
+}
+.workspace-source-controls label:focus-within {
+  border-color: #8fb4ff;
+  box-shadow: 0 0 0 2px rgba(63, 104, 255, 0.12);
+}
+.workspace-source-row {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 28px 1fr auto;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border: 1px solid #ececec;
+  border-radius: 6px;
+  background: #fff;
+  color: #555;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+}
+.workspace-source-row:hover {
+  border-color: #d0d0d0;
+  background: #fafafa;
+}
+.workspace-source-row.active {
+  border-color: #38bdf8;
+  background: rgba(56, 189, 248, 0.06);
+}
+.workspace-source-icon {
+  width: 26px;
+  height: 26px;
+  display: grid;
+  place-items: center;
+  border: 1px solid #e0e0e0;
+  border-radius: 5px;
+  background: #fafafa;
+  color: #666;
+  font-size: 13px;
+  font-weight: 600;
+}
+.workspace-source-meta {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.workspace-source-meta strong {
+  color: #333;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.workspace-source-meta em {
+  color: #999;
+  font-size: 11px;
+  font-style: normal;
+}
+.workspace-source-tick {
+  color: #38bdf8;
+  font-weight: 700;
+}
+
+/* Fields manager */
+.workspace-field-rows {
+  display: grid;
+  gap: 3px;
+}
+.workspace-field-row {
+  display: grid;
+  grid-template-columns: 18px 22px 1fr auto;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px;
+  border-radius: 5px;
+  font-size: 13px;
+  color: #444;
+}
+.workspace-field-row:hover {
+  background: #f6f6f6;
+}
+.workspace-field-row-hidden {
+  grid-template-columns: 22px 1fr auto;
+  color: #999;
+}
+.workspace-field-row-handle {
+  cursor: grab;
+  color: #bbb;
+  font-weight: 700;
+  user-select: none;
+}
+.workspace-field-row-icon {
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  color: #777;
+}
+.workspace-field-row-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.workspace-field-row-actions {
+  display: inline-flex;
+  gap: 2px;
+}
+.workspace-field-row-actions button {
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: #999;
+  cursor: pointer;
+  font-size: 12px;
+}
+.workspace-field-row-actions button:hover:not([disabled]) {
+  background: #ececec;
+  color: #444;
+}
+.workspace-field-row-actions button[disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.workspace-hidden-fields-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 6px;
+  border: 0;
+  border-top: 1px solid #ececec;
+  background: transparent;
+  color: #666;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  margin-top: 4px;
+}
+.workspace-hidden-fields-toggle:hover {
+  background: #f6f6f6;
+}
+.workspace-hidden-fields {
+  border-top: 0;
+}
+.workspace-field-add {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 6px;
+  padding-top: 6px;
+  border-top: 1px solid #ececec;
+}
+.workspace-field-add input {
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  background: #fafafa;
+  font: inherit;
+  padding: 7px 9px;
+}
+.workspace-field-add button {
+  border: 1px solid #d8d8d8;
+  background: #fff;
+  border-radius: 6px;
+  padding: 0 12px;
+  cursor: pointer;
+  color: #444;
+  font-size: 13px;
+}
+.workspace-field-add button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Sort + Filter */
+.workspace-sort-list,
+.workspace-filter-list {
+  display: grid;
+  gap: 6px;
+}
+.workspace-sort-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  gap: 6px;
+  align-items: center;
+}
+.workspace-filter-clause {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
+  gap: 6px;
+  align-items: center;
+}
+.workspace-filter-clause-empty {
+  color: #bbb;
+  text-align: center;
+}
+.workspace-sort-row select,
+.workspace-filter-clause select,
+.workspace-filter-clause input {
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  background: #fafafa;
+  color: #444;
+  font: inherit;
+  padding: 6px 8px;
+}
+.workspace-sort-row button,
+.workspace-filter-clause button {
+  width: 26px;
+  height: 26px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: #999;
+  cursor: pointer;
+}
+.workspace-sort-row button:hover,
+.workspace-filter-clause button:hover {
+  background: #ececec;
+  color: #444;
+}
+.workspace-add-clause {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px dashed #d8d8d8;
+  background: #fafafa;
+  color: #555;
+  border-radius: 6px;
+  padding: 6px 10px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+}
+.workspace-add-clause:hover:not(:disabled) {
+  border-color: #38bdf8;
+  color: #075985;
+  background: rgba(56, 189, 248, 0.06);
+}
+.workspace-add-clause:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.workspace-filter-op-toggle {
+  display: inline-flex;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  overflow: hidden;
+  width: fit-content;
+  background: #fafafa;
+}
+.workspace-filter-op-toggle button {
+  border: 0;
+  background: transparent;
+  color: #666;
+  padding: 5px 12px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+.workspace-filter-op-toggle button.active {
+  background: #fff;
+  color: #075985;
+  box-shadow: inset 0 0 0 1px #38bdf8;
+}
+
+/* Chart config */
+.workspace-chart-config {
+  display: grid;
+  gap: 12px;
+}
+.workspace-chart-type-tabs {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 2px;
+  border: 1px solid #ececec;
+  border-radius: 8px;
+  padding: 3px;
+  background: #fafafa;
+}
+.workspace-chart-type-tabs button {
+  display: grid;
+  place-items: center;
+  gap: 2px;
+  padding: 6px 4px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: #888;
+  font: inherit;
+  cursor: pointer;
+}
+.workspace-chart-type-tabs button em {
+  font-style: normal;
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #999;
+}
+.workspace-chart-type-tabs button:hover {
+  background: #fff;
+}
+.workspace-chart-type-tabs button.active {
+  background: #fff;
+  color: #075985;
+  box-shadow: 0 0 0 1px #38bdf8;
+}
+.workspace-chart-type-tabs button.active em {
+  color: #075985;
+}
+.workspace-axis-range {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.workspace-toggle-row {
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row !important;
+  padding: 4px 0;
+}
+.workspace-toggle-row span {
+  color: #666 !important;
+  font-size: 13px !important;
+  font-weight: 500 !important;
+  text-transform: none !important;
+}
+.workspace-toggle-row input[type="checkbox"] {
+  width: 36px;
+  height: 20px;
+  appearance: none;
+  border-radius: 999px;
+  background: #d8d8d8;
+  position: relative;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+.workspace-toggle-row input[type="checkbox"]::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
+  transition: left 0.15s ease;
+}
+.workspace-toggle-row input[type="checkbox"]:checked {
+  background: #38bdf8;
+}
+.workspace-toggle-row input[type="checkbox"]:checked::after {
+  left: 18px;
+}
+
+/* Chart preview kind variants */
+.workspace-chart-preview.kind-bar-horizontal {
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: 4px;
+  padding: 8px;
+}
+.workspace-chart-preview .workspace-chart-bar-h {
+  height: 12px;
+  background: #38bdf8;
+  border-radius: 3px;
+  position: relative;
+}
+.workspace-chart-preview .workspace-chart-bar-h em {
+  position: absolute;
+  right: 4px;
+  top: -2px;
+  font-size: 10px;
+  font-style: normal;
+  color: #075985;
+}
+.workspace-chart-preview.kind-pie {
+  display: grid;
+  place-items: center;
+}
+.workspace-chart-preview .workspace-chart-pie {
+  width: 60%;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: conic-gradient(#38bdf8 0 60%, #93c5fd 60% 85%, #cffafe 85% 100%);
+}
+.workspace-chart-preview.kind-line {
+  display: grid;
+  place-items: center;
+  padding: 8px;
+}
+.workspace-chart-preview .workspace-chart-line {
+  width: 90%;
+  height: 60%;
+  background: linear-gradient(180deg, transparent 0, transparent 100%);
+  border-bottom: 2px solid #38bdf8;
+  position: relative;
+}
+.workspace-chart-preview .workspace-chart-line::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, transparent 30%, rgba(56,189,248,0.18) 60%, transparent 90%);
+}
+.workspace-chart-preview.kind-sum {
+  display: grid;
+  place-items: center;
+}
+.workspace-chart-preview .workspace-chart-sum {
+  font-size: 28px;
+  font-weight: 700;
+  color: #075985;
+  letter-spacing: -0.02em;
+}
+.workspace-chart-preview.kind-gauge {
+  display: grid;
+  place-items: center;
+}
+.workspace-chart-preview .workspace-chart-gauge {
+  width: 72%;
+  height: 36%;
+  border-radius: 999px 999px 0 0;
+  background:
+    radial-gradient(circle at 50% 100%, transparent 56%, #38bdf8 56%, #38bdf8 var(--gauge-fill, 70%), #e5e5e5 var(--gauge-fill, 70%));
+  position: relative;
+}
+.workspace-chart-preview span em {
+  display: block;
+  font-style: normal;
+  text-align: center;
+  font-size: 10px;
+  color: #075985;
+}
+
+/* Command palette */
+.workspace-command-palette {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: grid;
+  place-items: start center;
+  padding-top: 12vh;
+}
+.workspace-command-palette .workspace-overlay-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(8, 11, 18, 0.32);
+  backdrop-filter: blur(2px);
+}
+.workspace-command-palette-panel {
+  position: relative;
+  width: min(540px, 92vw);
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 12px;
+  box-shadow: 0 24px 48px rgba(8, 11, 18, 0.18);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.workspace-command-palette-input {
+  display: grid;
+  grid-template-columns: 24px 1fr auto;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-bottom: 1px solid #ececec;
+}
+.workspace-command-palette-input span {
+  color: #888;
+  font-size: 14px;
+}
+.workspace-command-palette-input input {
+  border: 0;
+  outline: 0;
+  font: inherit;
+  font-size: 14px;
+  color: #333;
+  background: transparent;
+  width: 100%;
+}
+.workspace-command-palette-input kbd {
+  font-size: 10px;
+  font-family: inherit;
+  background: #f3f3f3;
+  border: 1px solid #e5e5e5;
+  color: #888;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+.workspace-command-palette-list {
+  max-height: min(60vh, 480px);
+  overflow-y: auto;
+  padding: 6px;
+}
+.workspace-command-palette-group {
+  padding: 4px 0;
+}
+.workspace-command-palette-group .workspace-panel-label {
+  margin: 6px 8px;
+  color: #aaa;
+  font-size: 10px;
+}
+.workspace-command-palette-item {
+  display: grid;
+  grid-template-columns: 22px 1fr auto;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: #444;
+  font: inherit;
+  font-size: 13px;
+  padding: 7px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: left;
+}
+.workspace-command-palette-item span:first-child {
+  font-size: 14px;
+  color: #888;
+}
+.workspace-command-palette-item.active {
+  background: rgba(56, 189, 248, 0.1);
+  color: #075985;
+}
+.workspace-command-palette-item.disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.workspace-command-palette-item kbd {
+  font-size: 10px;
+  font-family: inherit;
+  background: #f3f3f3;
+  border: 1px solid #e5e5e5;
+  color: #888;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+.workspace-command-palette-footer {
+  display: flex;
+  gap: 12px;
+  padding: 6px 12px;
+  border-top: 1px solid #ececec;
+  color: #aaa;
+  font-size: 11px;
+}
+
+/* Template gallery filters */
+.template-gallery-filters {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 8px;
+  padding: 0 16px 12px;
+  border-bottom: 1px solid #ececec;
+}
+.template-gallery-filters input,
+.template-gallery-filters select {
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  background: #fafafa;
+  font: inherit;
+  font-size: 13px;
+  padding: 7px 9px;
+  color: #444;
+}
+
+@media (max-width: 720px) {
+  .workspace-chart-type-tabs {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .template-gallery-filters {
+    grid-template-columns: 1fr;
+  }
+}