claude-maestro 0.1.16

package/out/renderer/assets/index-BJ7HHtlW.css

@@ -0,0 +1,4015 @@
+:root {
+  --bg: #16171a;
+  --panel: #1d1e23;
+  --panel-2: #222329;
+  --border: #2a2c33;
+  --text: #d7d8db;
+  --dim: #8b8d94;
+  --accent: #d97757;
+  --attention: #e2b93d;
+  --working: #58a6ff;
+  --error: #e5484d;
+  --green: #4cc38a;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  font-size: 13px;
+  user-select: none;
+}
+
+.app {
+  display: flex;
+  height: 100%;
+  position: relative;
+  /* own stacking context so .app-bg's z-index:-1 stays inside the app */
+  isolation: isolate;
+}
+
+/* Custom background image layer — sits behind every panel and the terminal. */
+.app-bg {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background-size: cover;
+  background-position: center;
+  pointer-events: none;
+}
+
+/*
+ * With a background image set, the surfaces painted from these variables turn
+ * translucent so the image shows through everywhere — sidebar, tabs, explorer
+ * and the terminal (xterm itself goes transparent in TerminalHost).
+ */
+.app.has-bg {
+  --bg: rgba(22, 23, 26, 0.82);
+  --panel: rgba(29, 30, 35, 0.82);
+  --panel-2: rgba(34, 35, 41, 0.82);
+}
+
+.app.loading {
+  align-items: center;
+  justify-content: center;
+  color: var(--dim);
+}
+
+.btn {
+  background: var(--panel-2);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 4px 10px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.btn:hover {
+  border-color: var(--dim);
+}
+
+.btn.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+  font-weight: 600;
+}
+
+.btn.ghost {
+  background: transparent;
+  border: none;
+  color: var(--dim);
+  padding: 2px 6px;
+}
+
+.btn.ghost:hover {
+  color: var(--text);
+}
+
+.btn.ghost.on {
+  color: var(--accent);
+}
+
+.row {
+  display: flex;
+  gap: 8px;
+}
+
+/* ---------- sidebar ---------- */
+
+.sidebar {
+  width: 220px;
+  min-width: 220px;
+  background: var(--panel);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+
+.sidebar-list {
+  overflow-y: auto;
+  flex: 1;
+}
+
+.session-entry {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 8px 7px 10px;
+  border-left: 3px solid transparent;
+  cursor: pointer;
+}
+
+.session-entry:hover {
+  background: var(--panel-2);
+}
+
+.session-entry.active {
+  background: var(--panel-2);
+  border-left-color: var(--accent);
+}
+
+.session-entry .close {
+  visibility: hidden;
+}
+
+.session-entry:hover .close {
+  visibility: visible;
+}
+
+.session-meta {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.session-name {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.session-folder {
+  font-size: 11px;
+  color: var(--dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: rtl;
+  text-align: left;
+}
+
+.rename-input {
+  background: var(--bg);
+  border: 1px solid var(--accent);
+  border-radius: 3px;
+  color: var(--text);
+  font-size: 13px;
+  padding: 1px 4px;
+  width: 100%;
+}
+
+.glyph {
+  width: 14px;
+  text-align: center;
+  font-size: 13px;
+}
+
+.glyph.status-working {
+  color: var(--working);
+  animation: spin 1.2s linear infinite;
+  display: inline-block;
+}
+
+/* Blocked on the user — the only nagging signal: amber, breathing pulse. */
+.glyph.status-needs-attention {
+  color: var(--attention);
+  display: inline-block;
+  animation: pulse 1.4s ease-in-out infinite;
+}
+
+/* Finished a turn — your turn now: green check that pops in once, then rests. */
+.glyph.status-done {
+  color: var(--green);
+  font-weight: 700;
+  display: inline-block;
+  animation: done-pop 0.5s ease-out;
+}
+
+.glyph.status-idle,
+.glyph.status-starting {
+  color: var(--dim);
+}
+
+.glyph.status-exited,
+.glyph.status-error {
+  color: var(--error);
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.45;
+    transform: scale(0.8);
+  }
+}
+
+@keyframes done-pop {
+  0% {
+    transform: scale(0.3);
+    opacity: 0;
+  }
+  55% {
+    transform: scale(1.4);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Time-based watchdog badge — distinct from the instantaneous status glyph. */
+.watchdog-badge {
+  flex: none;
+  width: 14px;
+  text-align: center;
+  font-size: 12px;
+  line-height: 14px;
+  cursor: help;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.watchdog-badge.stalled {
+  color: var(--working);
+}
+
+.watchdog-badge.unanswered {
+  color: var(--attention);
+}
+
+/* ---------- usage widget ---------- */
+
+.usage-widget {
+  border-top: 1px solid var(--border);
+  background: var(--panel);
+  flex: none;
+}
+
+.usage-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px 6px;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.usage-bar:hover {
+  background: var(--panel-2);
+}
+
+.usage-coin {
+  color: var(--green);
+  font-size: 11px;
+}
+
+.usage-today {
+  font-weight: 600;
+}
+
+.usage-dim {
+  color: var(--dim);
+}
+
+.usage-chevron {
+  margin-left: auto;
+  color: var(--dim);
+  font-size: 10px;
+}
+
+/* Full-width second line of the collapsed bar with the burn-rate verdict. */
+.usage-runout {
+  flex-basis: 100%;
+  font-size: 11px;
+  color: var(--dim);
+}
+
+.usage-warn {
+  color: var(--attention);
+}
+
+.usage-window {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 11px;
+}
+
+/* Transparent click-away layer behind the usage popup. */
+.usage-popup-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+}
+
+.usage-popup {
+  position: fixed;
+  width: 380px;
+  max-width: calc(100vw - 24px);
+  max-height: 70vh;
+  overflow-y: auto;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 12px 14px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.usage-summary {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.usage-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.usage-stat-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--green);
+}
+
+.usage-stat-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--dim);
+}
+
+.usage-tokens {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  font-size: 10px;
+  color: var(--dim);
+  font-family: 'Cascadia Mono', Consolas, monospace;
+}
+
+.usage-section {
+  margin-top: 2px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+
+.usage-rows {
+  display: flex;
+  flex-direction: column;
+}
+
+.usage-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 0;
+  font-size: 11px;
+}
+
+.usage-row.dim {
+  color: var(--dim);
+}
+
+.usage-row.head {
+  color: var(--dim);
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.usage-row-name {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.usage-row-name.live {
+  font-weight: 600;
+}
+
+.usage-live-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--green);
+  flex: none;
+}
+
+.usage-row-today {
+  width: 52px;
+  text-align: right;
+  color: var(--dim);
+  flex: none;
+}
+
+.usage-row-total {
+  width: 56px;
+  text-align: right;
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.usage-row-pct {
+  width: 40px;
+  text-align: right;
+  color: var(--dim);
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------- plan limit bars (subscription session/weekly utilization) ---------- */
+
+.usage-limits {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.usage-limit {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.usage-limit-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.usage-limit-pct {
+  flex: none;
+  color: var(--dim);
+  font-variant-numeric: tabular-nums;
+}
+
+.usage-limit-track {
+  height: 6px;
+  border-radius: 3px;
+  background: var(--border);
+  overflow: hidden;
+}
+
+.usage-limit-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+
+.usage-limit-reset {
+  font-size: 10px;
+  color: var(--dim);
+}
+
+/* ---------- explorer ---------- */
+
+.explorer {
+  width: 240px;
+  min-width: 240px;
+  background: var(--panel);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.explorer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+
+.explorer-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.explorer-tree {
+  flex: 1;
+  overflow: auto;
+  padding-bottom: 8px;
+}
+
+.tree-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.tree-row:hover {
+  background: var(--panel-2);
+}
+
+.tree-row .chevron {
+  width: 12px;
+  color: var(--dim);
+  font-size: 10px;
+}
+
+.tree-row.file {
+  padding-left: 20px;
+}
+
+.tree-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tree-row.dir .tree-name {
+  color: #b9bcc4;
+  font-weight: 500;
+}
+
+.tree-row.flash {
+  background: rgba(217, 119, 87, 0.16);
+}
+
+.flash-dot {
+  font-size: 10px;
+  color: var(--attention);
+}
+
+.tree-loading {
+  color: var(--dim);
+  padding: 2px 8px;
+}
+
+.recent {
+  border-top: 1px solid var(--border);
+  max-height: 200px;
+  overflow-y: auto;
+  padding-bottom: 6px;
+}
+
+.recent-header {
+  padding: 8px 12px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+
+.recent-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 12px;
+  cursor: pointer;
+}
+
+.recent-row:hover {
+  background: var(--panel-2);
+}
+
+.recent-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.recent-age {
+  color: var(--dim);
+  font-size: 11px;
+}
+
+/* ---------- git panel (status + history, below the file tree) ---------- */
+
+.git-panel {
+  border-top: 1px solid var(--border);
+  max-height: 280px;
+  overflow-y: auto;
+  padding-bottom: 6px;
+}
+
+.git-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px 0 12px;
+}
+
+.git-title-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--dim);
+  cursor: pointer;
+}
+
+.git-chevron {
+  font-size: 10px;
+}
+
+.git-empty {
+  padding: 4px 12px 6px;
+  font-size: 11px;
+  color: var(--dim);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+.git-empty-text {
+  line-height: 1.4;
+}
+
+.git-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 12px 6px;
+}
+
+.git-branch {
+  font-family: 'Cascadia Mono', Consolas, monospace;
+  font-size: 11px;
+  color: var(--text);
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.git-branch.detached {
+  color: var(--attention);
+}
+
+.git-chip {
+  font-size: 10px;
+  padding: 0 5px;
+  border-radius: 8px;
+  background: var(--panel-2);
+  color: var(--dim);
+  white-space: nowrap;
+}
+
+.git-chip.staged { color: var(--green); }
+.git-chip.unstaged { color: var(--attention); }
+.git-chip.untracked { color: var(--working); }
+.git-chip.clean { color: var(--green); }
+
+.git-files {
+  display: flex;
+  flex-direction: column;
+  max-height: 160px;
+  overflow-y: auto;
+  margin-bottom: 4px;
+}
+
+.git-file {
+  display: flex;
+  align-items: baseline;
+  gap: 7px;
+  padding: 2px 12px;
+  cursor: pointer;
+}
+
+.git-file:hover {
+  background: var(--panel-2);
+}
+
+.git-file-status {
+  flex: none;
+  min-width: 14px;
+  font-family: 'Cascadia Mono', Consolas, monospace;
+  font-size: 10px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.git-file-status.s-m { color: var(--attention); }
+.git-file-status.s-a { color: var(--green); }
+.git-file-status.s-d { color: var(--error); }
+.git-file-status.s-r,
+.git-file-status.s-c { color: var(--accent); }
+.git-file-status.s-u { color: var(--error); }
+.git-file-status.s-untracked { color: var(--working); }
+
+.git-file-path {
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl; /* ellipsis on the left so the file name stays visible */
+  text-align: left;
+}
+
+.git-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.git-subhead {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--dim);
+  padding: 4px 12px 2px;
+}
+
+.git-checkpoints {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--border);
+  margin-top: 2px;
+}
+
+.git-checkpoint {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  padding: 2px 8px 2px 12px;
+}
+
+.git-checkpoint:hover {
+  background: var(--panel-2);
+}
+
+.git-checkpoint-body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.git-checkpoint-label {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.git-checkpoint-meta {
+  font-size: 10px;
+  color: var(--dim);
+}
+
+.git-checkpoint-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: none;
+}
+
+.git-checkpoint-actions .btn.ghost {
+  font-size: 11px;
+  padding: 1px 6px;
+}
+
+.git-history {
+  display: flex;
+  flex-direction: column;
+}
+
+.git-commit {
+  display: flex;
+  gap: 7px;
+  padding: 3px 12px;
+  cursor: default;
+}
+
+.git-commit:hover {
+  background: var(--panel-2);
+}
+
+.git-commit-hash {
+  flex: none;
+  font-family: 'Cascadia Mono', Consolas, monospace;
+  font-size: 10px;
+  color: var(--accent);
+  padding-top: 1px;
+}
+
+.git-commit-body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.git-commit-subject {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.git-commit-meta {
+  font-size: 10px;
+  color: var(--dim);
+}
+
+.git-ref {
+  font-size: 9px;
+  font-weight: 600;
+  padding: 0 4px;
+  margin-right: 4px;
+  border-radius: 6px;
+  background: rgba(88, 166, 255, 0.18);
+  color: var(--working);
+  vertical-align: middle;
+}
+
+.git-ref.tag {
+  background: rgba(226, 185, 61, 0.18);
+  color: var(--attention);
+}
+
+/* ---------- reusable actions (below the file tree) ---------- */
+
+.actions {
+  border-top: 1px solid var(--border);
+  max-height: 180px;
+  overflow-y: auto;
+  padding-bottom: 6px;
+}
+
+.actions-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px 0 12px;
+}
+
+.actions-header span {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+
+.actions-empty {
+  padding: 2px 12px 4px;
+  font-size: 11px;
+  color: var(--dim);
+  line-height: 1.4;
+}
+
+.action-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 8px 2px 12px;
+  cursor: pointer;
+}
+
+.action-row:hover {
+  background: var(--panel-2);
+}
+
+.action-run {
+  color: var(--accent);
+  font-size: 10px;
+}
+
+.action-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.action-row .action-edit {
+  visibility: hidden;
+}
+
+.action-row:hover .action-edit {
+  visibility: visible;
+}
+
+/* ---------- attached-image history (below the file tree) ---------- */
+
+.attachments {
+  border-top: 1px solid var(--border);
+  max-height: 190px;
+  overflow-y: auto;
+  padding-bottom: 8px;
+}
+
+.attachments-header {
+  padding: 8px 12px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+
+.attachments-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 2px 12px;
+}
+
+.attachment-thumb {
+  position: relative;
+  height: 48px;
+  min-width: 48px;
+  max-width: 96px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
+  background: var(--panel-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.attachment-thumb:hover {
+  border-color: var(--accent);
+}
+
+.attachment-thumb img {
+  height: 100%;
+  object-fit: cover;
+}
+
+.attachment-broken {
+  color: var(--dim);
+  font-size: 18px;
+  padding: 0 14px;
+}
+
+.attachment-age {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  font-size: 9px;
+  line-height: 1;
+  color: var(--text);
+  background: rgba(22, 23, 26, 0.8);
+  border-radius: 3px;
+  padding: 2px 3px;
+  pointer-events: none;
+}
+
+.attachment-lightbox {
+  position: fixed;
+  inset: 0;
+  background: rgba(22, 23, 26, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+
+.attachment-lightbox-card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  max-width: 80vw;
+  max-height: 85vh;
+}
+
+.attachment-lightbox-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  min-width: 200px;
+  min-height: 120px;
+}
+
+.attachment-lightbox-img img {
+  max-width: 76vw;
+  max-height: 65vh;
+  object-fit: contain;
+}
+
+.attachment-lightbox-meta {
+  font-size: 11px;
+  color: var(--dim);
+  max-width: 76vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.context-menu {
+  position: fixed;
+  z-index: 100;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 4px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  min-width: 170px;
+}
+
+.context-menu button {
+  background: none;
+  border: none;
+  color: var(--text);
+  text-align: left;
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.context-menu button:hover {
+  background: var(--accent);
+  color: #fff;
+}
+
+/* ---------- main area ---------- */
+
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.welcome {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+}
+
+.welcome h1 {
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.welcome p {
+  color: var(--dim);
+}
+
+.welcome .hint {
+  font-size: 12px;
+}
+
+.tabstrip {
+  display: flex;
+  background: var(--panel);
+  border-bottom: 1px solid var(--border);
+  overflow-x: auto;
+  min-height: 34px;
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 12px;
+  border-right: 1px solid var(--border);
+  cursor: pointer;
+  color: var(--dim);
+  white-space: nowrap;
+}
+
+.tab:hover {
+  color: var(--text);
+}
+
+.tab.active {
+  background: var(--bg);
+  color: var(--text);
+}
+
+.tab-icon {
+  font-size: 11px;
+  color: var(--accent);
+}
+
+.tab .close {
+  visibility: hidden;
+  font-size: 10px;
+}
+
+.tab:hover .close {
+  visibility: visible;
+}
+
+.tab-kind {
+  font-size: 11px;
+  color: var(--accent);
+}
+
+.term-tab .tab-name {
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.term-tab .rename-input {
+  width: 90px;
+}
+
+/* Per-claude-tab model switcher */
+.tab-model {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  color: var(--dim);
+  font-size: 10px;
+  padding: 0 2px;
+  max-width: 74px;
+  cursor: pointer;
+}
+
+.tab-model:hover {
+  color: var(--text);
+  border-color: var(--accent);
+}
+
+/* Add-terminal dropdown */
+.tab-add {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.tab-add-btn {
+  background: none;
+  border: none;
+  border-right: 1px solid var(--border);
+  color: var(--dim);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.tab-add-btn:hover {
+  color: var(--text);
+}
+
+.tab-add-menu {
+  position: fixed;
+  z-index: 100;
+  min-width: 150px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 4px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
+}
+
+.tab-add-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  background: none;
+  border: none;
+  border-radius: 3px;
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.tab-add-item:hover {
+  background: var(--accent);
+}
+
+.session-termcount {
+  font-size: 11px;
+  color: var(--dim);
+}
+
+.session-sub {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 2px;
+}
+
+.session-category {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--dim);
+}
+
+.session-category select {
+  background: transparent;
+  border: none;
+  color: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  max-width: 120px;
+  padding: 0;
+}
+
+.session-category select:hover {
+  text-decoration: underline;
+}
+
+.cat-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: none;
+}
+
+/* ---------- worktree (parallel task) sessions ---------- */
+
+.session-entry .fork {
+  visibility: hidden;
+}
+
+.session-entry:hover .fork {
+  visibility: visible;
+}
+
+/* Indent worktree tasks under their parent, with a connector tick. */
+.session-entry.worktree {
+  padding-left: 22px;
+  position: relative;
+}
+
+.session-entry.worktree::before {
+  content: '↳';
+  position: absolute;
+  left: 9px;
+  color: var(--dim);
+  font-size: 12px;
+}
+
+.worktree-mark {
+  color: var(--dim);
+}
+
+.worktree-branch {
+  font-size: 11px;
+  color: var(--dim);
+  font-family: 'Cascadia Mono', Consolas, monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+}
+
+.merge-btn {
+  font-size: 11px;
+  padding: 1px 7px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}
+
+.merge-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* Merge-readiness badge: the Merge button's predicted outcome, at a glance. */
+.merge-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex: none;
+  font-size: 10px;
+  line-height: 15px;
+  padding: 0 6px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dim);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.merge-badge.clean {
+  color: var(--green);
+  border-color: rgba(76, 195, 138, 0.45);
+}
+
+.merge-badge.conflicts {
+  color: var(--attention);
+  border-color: rgba(226, 185, 61, 0.45);
+}
+
+/* 'no commits' and 'unknown' stay muted; 'unknown' a notch dimmer. */
+.merge-badge.unknown {
+  opacity: 0.65;
+}
+
+/* A (re-)check is in flight — pulse until the fresh result lands. */
+.merge-badge.checking {
+  animation: merge-badge-pulse 1s ease-in-out infinite;
+}
+
+@keyframes merge-badge-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+/* Dirty marker: uncommitted files would need a commit-first merge. */
+.merge-badge-dirty {
+  color: var(--attention);
+  font-size: 12px;
+  line-height: 15px;
+}
+
+/* ---------- prompt queue ---------- */
+
+.session-entry .queue-btn {
+  visibility: hidden;
+  position: relative;
+}
+
+/* With queued prompts, the button (and its count badge) is always visible. */
+.session-entry:hover .queue-btn,
+.session-entry .queue-btn.has-items {
+  visibility: visible;
+}
+
+.queue-badge {
+  position: absolute;
+  top: -5px;
+  right: -7px;
+  min-width: 14px;
+  height: 14px;
+  padding: 0 3px;
+  border-radius: 7px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 14px;
+  text-align: center;
+  pointer-events: none;
+}
+
+.queue-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 300;
+  cursor: default;
+}
+
+.queue-popover {
+  position: fixed;
+  width: 340px;
+  max-width: calc(100vw - 24px);
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
+}
+
+.queue-popover-title {
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.queue-popover-hint {
+  font-size: 11px;
+  color: var(--dim);
+  line-height: 1.4;
+}
+
+.queue-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.queue-empty {
+  font-size: 12px;
+  color: var(--dim);
+  padding: 4px 0;
+}
+
+.queue-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 0;
+}
+
+.queue-item-pos {
+  font-size: 11px;
+  color: var(--dim);
+  flex: none;
+}
+
+.queue-item-text {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+}
+
+.queue-item .btn {
+  flex: none;
+  font-size: 11px;
+}
+
+.queue-item .btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.queue-add-row {
+  display: flex;
+  gap: 6px;
+}
+
+.queue-add-row input {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-size: 12px;
+  padding: 5px 8px;
+  outline: none;
+}
+
+.queue-add-row input:focus {
+  border-color: var(--accent);
+}
+
+.queue-add-row .btn {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 2px 10px;
+  font-size: 12px;
+}
+
+.queue-add-row .btn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* ---------- modals ---------- */
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 18px 20px;
+  width: 420px;
+  max-width: 90vw;
+  max-height: 88vh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
+}
+
+.modal-wide {
+  width: 720px;
+}
+
+.modal h2 {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.modal-folder {
+  font-family: 'Cascadia Mono', Consolas, monospace;
+  font-size: 11px;
+  color: var(--dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.field.grow {
+  flex: 1;
+}
+
+.field > span {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+
+.field input,
+.field select,
+.field textarea {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-size: 13px;
+  padding: 5px 8px;
+  outline: none;
+  font-family: inherit;
+}
+
+.field input:focus,
+.field select:focus,
+.field textarea:focus {
+  border-color: var(--accent);
+}
+
+.field-hint {
+  font-size: 11px;
+  color: var(--dim);
+  line-height: 1.4;
+}
+
+/* A checkbox + label row inside a .field (e.g. the PR / auto-complete options). */
+.check-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+  cursor: pointer;
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: 400;
+  font-size: 13px;
+  color: var(--text);
+}
+
+.check-row input[type='checkbox'] {
+  width: auto;
+  margin-top: 2px;
+  padding: 0;
+  flex: none;
+  cursor: pointer;
+}
+
+.check-row > span {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.check-hint {
+  font-size: 11px;
+  color: var(--dim);
+  line-height: 1.4;
+}
+
+.swatches {
+  display: flex;
+  gap: 6px;
+}
+
+.swatch {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  padding: 0;
+}
+
+.swatch.sel {
+  border-color: var(--text);
+}
+
+.swatch.none {
+  background: var(--panel-2);
+  position: relative;
+}
+
+.swatch.none::after {
+  content: '∅';
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--dim);
+  font-size: 12px;
+}
+
+.bg-preview {
+  height: 140px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background-size: cover;
+  background-position: center;
+  background-color: var(--bg);
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bg-preview.empty span {
+  color: var(--dim);
+  font-size: 12px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.modal-error {
+  background: rgba(229, 72, 77, 0.15);
+  color: var(--error);
+  border-radius: 4px;
+  padding: 6px 10px;
+  font-size: 12px;
+}
+
+/* ---------- broadcast-prompt dialog ---------- */
+
+.broadcast-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.broadcast-list-header .btn {
+  font-size: 11px;
+  padding: 1px 6px;
+  text-transform: none;
+  letter-spacing: normal;
+}
+
+.broadcast-list {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.broadcast-empty {
+  padding: 10px;
+  font-size: 12px;
+  color: var(--dim);
+}
+
+.broadcast-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 8px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.broadcast-row:hover {
+  background: var(--panel-2);
+}
+
+.broadcast-row input[type='checkbox'] {
+  margin: 0;
+}
+
+.broadcast-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.broadcast-sub {
+  font-size: 11px;
+  color: var(--dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: auto;
+  padding-left: 8px;
+}
+
+/* ---------- global search palette ---------- */
+
+.gs-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 10vh;
+}
+
+.gs-palette {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  width: 640px;
+  max-width: 90vw;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.gs-input-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.gs-input-row input {
+  flex: 1;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  font-size: 14px;
+  padding: 7px 10px;
+  outline: none;
+}
+
+.gs-input-row input:focus {
+  border-color: var(--accent);
+}
+
+.gs-count {
+  flex: none;
+  font-size: 11px;
+  color: var(--dim);
+  white-space: nowrap;
+}
+
+.gs-results {
+  max-height: 50vh;
+  overflow-y: auto;
+  padding: 6px 0;
+}
+
+.gs-group-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px 3px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+
+.gs-group-count {
+  font-weight: 400;
+  opacity: 0.8;
+}
+
+.gs-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: none;
+}
+
+.gs-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 12px 4px 26px;
+  cursor: pointer;
+  font-family: 'Cascadia Mono', Consolas, monospace;
+  font-size: 12px;
+  overflow: hidden;
+}
+
+.gs-row.sel {
+  background: var(--panel-2);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+
+.gs-term {
+  flex: none;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  font-size: 10px;
+  color: var(--dim);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 0 4px;
+}
+
+.gs-snippet {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text);
+}
+
+.gs-snippet mark {
+  background: rgba(217, 119, 87, 0.35);
+  color: var(--text);
+  border-radius: 2px;
+}
+
+.gs-empty {
+  padding: 18px 12px;
+  text-align: center;
+  color: var(--dim);
+  font-size: 12px;
+}
+
+.gs-hint {
+  padding: 6px 12px;
+  border-top: 1px solid var(--border);
+  font-size: 11px;
+  color: var(--dim);
+}
+
+/* ---------- command palette (Ctrl+K) ---------- */
+
+.palette-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 300;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 12vh;
+}
+
+.palette {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  width: 560px;
+  max-width: 90vw;
+  max-height: 60vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
+}
+
+.palette-input {
+  background: var(--bg);
+  border: none;
+  border-bottom: 1px solid var(--border);
+  border-radius: 0;
+  color: var(--text);
+  font-size: 14px;
+  padding: 10px 14px;
+  outline: none;
+}
+
+.palette-list {
+  overflow-y: auto;
+  padding: 4px 0 6px;
+}
+
+.palette-section-title {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--dim);
+  padding: 8px 14px 2px;
+}
+
+.palette-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 14px;
+  font-size: 13px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.palette-item .palette-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.palette-item.sel,
+.palette-item:hover {
+  background: var(--panel-2);
+}
+
+.palette-sub {
+  color: var(--dim);
+  font-size: 11px;
+  margin-left: auto;
+  padding-left: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.palette-empty {
+  color: var(--dim);
+  font-size: 13px;
+  padding: 16px 14px;
+  text-align: center;
+}
+
+/* ---------- categories dialog ---------- */
+
+.cat-layout {
+  display: flex;
+  gap: 14px;
+  min-height: 360px;
+}
+
+.cat-list {
+  width: 180px;
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-right: 1px solid var(--border);
+  padding-right: 8px;
+}
+
+.cat-list-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  color: var(--text);
+  text-align: left;
+  padding: 6px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.cat-list-item:hover {
+  background: var(--panel-2);
+}
+
+.cat-list-item.active {
+  background: var(--panel-2);
+}
+
+.cat-list-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cat-add {
+  margin-top: 6px;
+  text-align: left;
+}
+
+.cat-editor {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+}
+
+.cat-edit-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.cat-delete {
+  color: var(--error);
+}
+
+.skill-list {
+  max-height: 160px;
+  overflow-y: auto;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+}
+
+.skill-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 3px 4px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.skill-row:hover {
+  background: var(--panel-2);
+}
+
+.skill-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.skill-src {
+  font-size: 10px;
+  color: var(--dim);
+}
+
+.mcp-row {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 6px;
+  margin-bottom: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.mcp-row-head {
+  display: flex;
+  gap: 6px;
+}
+
+.mcp-name {
+  flex: 1;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-size: 13px;
+  padding: 4px 8px;
+  outline: none;
+}
+
+.mcp-config {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-family: 'Cascadia Mono', Consolas, monospace;
+  font-size: 12px;
+  padding: 6px 8px;
+  outline: none;
+  resize: vertical;
+}
+
+.mcp-add {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.content {
+  flex: 1;
+  position: relative;
+  min-height: 0;
+}
+
+/* ---------- terminal ---------- */
+
+.term-wrap {
+  position: absolute;
+  inset: 0;
+}
+
+.term-wrap.drag-over .term-container {
+  outline: 2px dashed var(--accent);
+  outline-offset: -2px;
+}
+
+.term-drop-hint {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--panel-2);
+  border: 1px solid var(--accent);
+  color: var(--text);
+  border-radius: 6px;
+  padding: 4px 12px;
+  font-size: 12px;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.term-drop-hint.path {
+  border-color: var(--green);
+  color: var(--green);
+}
+
+.term-container {
+  width: 100%;
+  height: 100%;
+  padding: 6px 0 0 8px;
+  background: var(--bg);
+}
+
+.term-container .xterm {
+  height: 100%;
+}
+
+.term-search {
+  position: absolute;
+  top: 8px;
+  right: 16px;
+  display: flex;
+  gap: 4px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 4px;
+  z-index: 10;
+}
+
+.term-search input {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  padding: 3px 8px;
+  width: 200px;
+  outline: none;
+}
+
+.term-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(22, 23, 26, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 5;
+}
+
+.term-overlay-card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 18px 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+}
+
+/* ---------- viewer ---------- */
+
+.viewer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  z-index: 2;
+}
+
+.viewer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+
+.viewer-path {
+  font-family: 'Cascadia Mono', Consolas, monospace;
+  font-size: 12px;
+  color: var(--dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.viewer-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.viewer-banner {
+  padding: 4px 12px;
+  background: rgba(226, 185, 61, 0.12);
+  color: var(--attention);
+  font-size: 12px;
+}
+
+.viewer-editor {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.viewer-editor .cm-editor {
+  height: 100%;
+}
+
+.viewer-editor .cm-scroller {
+  font-family: 'Cascadia Mono', Consolas, monospace;
+  font-size: 13px;
+}
+
+/* ---------- diff viewer ---------- */
+
+.diff-label {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 0 5px;
+  margin-right: 7px;
+  border-radius: 6px;
+  background: rgba(217, 119, 87, 0.18);
+  color: var(--accent);
+  vertical-align: middle;
+}
+
+.tab.diff-tab .tab-diff-badge {
+  flex: none;
+  font-weight: 700;
+  color: var(--accent);
+}
+
+.viewer-editor .cm-diff-added {
+  background: rgba(76, 195, 138, 0.14);
+}
+
+.viewer-editor .cm-diff-removed {
+  background: rgba(229, 72, 77, 0.14);
+}
+
+.viewer-editor .cm-diff-hunk {
+  background: rgba(88, 166, 255, 0.12);
+  color: var(--working);
+}
+
+.viewer-editor .cm-diff-meta {
+  color: var(--dim);
+}
+
+.viewer-image {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  padding: 20px;
+}
+
+.viewer-image img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.viewer-msg {
+  padding: 24px;
+  color: var(--dim);
+}
+
+.viewer-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.viewer-toggle {
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+
+.viewer-toggle .btn.ghost {
+  border: none;
+  padding: 2px 10px;
+}
+
+.viewer-markdown {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px 28px 40px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--text);
+}
+
+.viewer-markdown h1,
+.viewer-markdown h2,
+.viewer-markdown h3,
+.viewer-markdown h4,
+.viewer-markdown h5,
+.viewer-markdown h6 {
+  margin: 1.2em 0 0.5em;
+  line-height: 1.3;
+}
+
+.viewer-markdown h1 {
+  font-size: 1.7em;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 0.3em;
+}
+
+.viewer-markdown h2 {
+  font-size: 1.4em;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 0.3em;
+}
+
+.viewer-markdown h3 {
+  font-size: 1.15em;
+}
+
+.viewer-markdown p,
+.viewer-markdown ul,
+.viewer-markdown ol,
+.viewer-markdown blockquote,
+.viewer-markdown table,
+.viewer-markdown pre {
+  margin: 0.6em 0;
+}
+
+.viewer-markdown ul,
+.viewer-markdown ol {
+  padding-left: 1.6em;
+}
+
+.viewer-markdown li + li {
+  margin-top: 0.2em;
+}
+
+.viewer-markdown a {
+  color: var(--working);
+  text-decoration: none;
+}
+
+.viewer-markdown a:hover {
+  text-decoration: underline;
+}
+
+.viewer-markdown code {
+  font-family: 'Cascadia Mono', Consolas, monospace;
+  font-size: 0.9em;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1px 5px;
+}
+
+.viewer-markdown pre {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 10px 14px;
+  overflow-x: auto;
+}
+
+.viewer-markdown pre code {
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.viewer-markdown blockquote {
+  border-left: 3px solid var(--border);
+  padding-left: 12px;
+  color: var(--dim);
+}
+
+.viewer-markdown table {
+  border-collapse: collapse;
+}
+
+.viewer-markdown th,
+.viewer-markdown td {
+  border: 1px solid var(--border);
+  padding: 4px 10px;
+}
+
+.viewer-markdown th {
+  background: var(--panel);
+}
+
+.viewer-markdown hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 1.2em 0;
+}
+
+.viewer-markdown img {
+  max-width: 100%;
+}
+
+/* ---------- status bar ---------- */
+
+.statusbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 4px 12px;
+  border-top: 1px solid var(--border);
+  background: var(--panel);
+  font-size: 11px;
+  color: var(--dim);
+}
+
+.status-pill {
+  padding: 1px 8px;
+  border-radius: 8px;
+  font-weight: 600;
+}
+
+.status-pill.status-working {
+  background: rgba(88, 166, 255, 0.15);
+  color: var(--working);
+}
+
+.status-pill.status-needs-attention {
+  background: rgba(226, 185, 61, 0.15);
+  color: var(--attention);
+}
+
+.status-pill.status-done {
+  background: rgba(76, 195, 138, 0.15);
+  color: var(--green);
+}
+
+.status-pill.status-idle,
+.status-pill.status-starting {
+  background: var(--panel-2);
+}
+
+.status-pill.status-exited,
+.status-pill.status-error {
+  background: rgba(229, 72, 77, 0.15);
+  color: var(--error);
+}
+
+.statusbar-folder {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.statusbar-attention {
+  border: none;
+  padding: 1px 8px;
+  border-radius: 8px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  background: rgba(226, 185, 61, 0.15);
+  color: var(--attention);
+}
+
+.statusbar-attention:hover {
+  background: rgba(226, 185, 61, 0.3);
+}
+
+.statusbar-age {
+  margin-left: auto;
+}
+
+/* ---------- crash screen ---------- */
+
+.crash {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 24px;
+}
+
+.crash pre {
+  max-width: 80%;
+  max-height: 50%;
+  overflow: auto;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px;
+  font-size: 11px;
+  color: var(--error);
+  user-select: text;
+}
+
+/* scrollbars */
+
+::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #34363e;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #44464f;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* ---------- sentinels (background watcher agents) ---------- */
+
+.sentinels {
+  border-top: 1px solid var(--border);
+  max-height: 260px;
+  overflow-y: auto;
+  padding-bottom: 6px;
+}
+
+.sentinels-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px 0 12px;
+}
+
+.sentinels-header span {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+
+.sentinels-empty {
+  padding: 2px 12px 4px;
+  font-size: 11px;
+  color: var(--dim);
+  line-height: 1.4;
+}
+
+.sentinel-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 8px 2px 12px;
+  cursor: pointer;
+}
+
+.sentinel-row:hover {
+  background: var(--panel-2);
+}
+
+.sentinel-glyph {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.sentinel-glyph.idle { color: var(--dim); }
+.sentinel-glyph.off { color: var(--dim); }
+.sentinel-glyph.ok { color: var(--green); }
+.sentinel-glyph.error { color: var(--error); }
+.sentinel-glyph.running {
+  color: var(--working);
+  animation: sentinel-spin 1.2s linear infinite;
+}
+
+@keyframes sentinel-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* findings-count badge, tinted by the worst severity in the run */
+.sentinel-glyph.sev-info { background: rgba(88, 166, 255, 0.2); color: var(--working); }
+.sentinel-glyph.sev-warning { background: rgba(226, 185, 61, 0.2); color: var(--attention); }
+.sentinel-glyph.sev-critical { background: rgba(229, 72, 77, 0.2); color: var(--error); }
+
+.sentinel-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sentinel-trigger {
+  font-size: 10px;
+  color: var(--dim);
+  white-space: nowrap;
+}
+
+.sentinel-row .sentinel-btn {
+  visibility: hidden;
+}
+
+.sentinel-row:hover .sentinel-btn {
+  visibility: visible;
+}
+
+.sentinel-chevron {
+  color: var(--dim);
+  font-size: 10px;
+}
+
+.sentinel-run {
+  padding: 2px 12px 6px 24px;
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.sentinel-run-meta {
+  color: var(--dim);
+  font-size: 10px;
+}
+
+.sentinel-summary {
+  margin-top: 2px;
+  color: var(--text);
+}
+
+.sentinel-summary.error {
+  color: var(--error);
+}
+
+.sentinel-finding {
+  margin-top: 6px;
+  padding: 4px 8px;
+  border-left: 2px solid var(--border);
+  background: var(--panel-2);
+  border-radius: 0 4px 4px 0;
+}
+
+.sentinel-finding.sev-info { border-left-color: var(--working); }
+.sentinel-finding.sev-warning { border-left-color: var(--attention); }
+.sentinel-finding.sev-critical { border-left-color: var(--error); }
+
+.sentinel-finding-title {
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.sentinel-finding .sev-dot {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+}
+
+.sentinel-finding.sev-info .sev-dot { background: var(--working); }
+.sentinel-finding.sev-warning .sev-dot { background: var(--attention); }
+.sentinel-finding.sev-critical .sev-dot { background: var(--error); }
+
+.sentinel-finding-detail {
+  color: var(--dim);
+}
+
+.sentinel-finding-file {
+  margin-top: 2px;
+  font-family: 'Cascadia Mono', Consolas, monospace;
+  font-size: 10px;
+  color: var(--accent);
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sentinel-finding-file:hover {
+  text-decoration: underline;
+}
+
+/* sentinel dialog */
+.sentinel-prompt {
+  resize: vertical;
+  min-height: 90px;
+  font-family: inherit;
+}
+
+.field-row {
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+}
+
+.field-row .field {
+  flex: 1;
+}
+
+.checkbox-field {
+  flex: none !important;
+}
+
+.checkbox-field input {
+  width: 16px;
+  height: 16px;
+  margin: 6px 0;
+}
+
+/* ---- features & specs dialog ---- */
+.new-feature-btn {
+  align-self: flex-start;
+}
+
+.new-feature-row {
+  display: flex;
+  gap: 8px;
+}
+
+.new-feature-row input {
+  flex: 1;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-size: 13px;
+  padding: 5px 8px;
+  outline: none;
+}
+
+.new-feature-row input:focus {
+  border-color: var(--accent);
+}
+
+.feature-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.feature-empty {
+  color: var(--dim);
+  font-size: 13px;
+  padding: 8px 0;
+}
+
+.feature-card {
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--dim);
+  border-radius: 8px;
+  background: var(--panel-2);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.feature-card.status-implementing {
+  border-left-color: var(--working);
+}
+
+.feature-card.status-merged {
+  border-left-color: var(--green);
+}
+
+.feature-card-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.feature-title {
+  flex: 1;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 600;
+  padding: 5px 8px;
+  outline: none;
+}
+
+.feature-title:focus {
+  border-color: var(--accent);
+}
+
+.feature-status {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  padding: 2px 8px;
+  border-radius: 10px;
+  color: var(--dim);
+  background: var(--bg);
+  white-space: nowrap;
+}
+
+.feature-status.status-implementing {
+  color: var(--working);
+}
+
+.feature-status.status-merged {
+  color: var(--green);
+}
+
+.feature-desc {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-size: 13px;
+  padding: 5px 8px;
+  outline: none;
+  font-family: inherit;
+  resize: vertical;
+}
+
+.feature-desc:focus {
+  border-color: var(--accent);
+}
+
+.spec-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.spec-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.spec-row input[type='checkbox'] {
+  width: 15px;
+  height: 15px;
+  flex: none;
+}
+
+.spec-text {
+  flex: 1;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-size: 13px;
+  padding: 4px 8px;
+  outline: none;
+}
+
+.spec-text:focus {
+  border-color: var(--accent);
+}
+
+.spec-add {
+  align-self: flex-start;
+  font-size: 12px;
+  color: var(--accent);
+}
+
+.feature-pr-options {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 0;
+  border-top: 1px solid var(--border);
+}
+
+/* ---------- per-session environment variables ---------- */
+
+.env-row .env-key,
+.env-row .env-value {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-family: 'Cascadia Mono', Consolas, monospace;
+  font-size: 12px;
+  padding: 5px 8px;
+  outline: none;
+}
+
+.env-row .env-key {
+  flex: 0 0 40%;
+}
+
+.env-row .env-value {
+  flex: 1;
+  min-width: 0;
+}
+
+.env-row .env-key:focus,
+.env-row .env-value:focus {
+  border-color: var(--accent);
+}
+
+.env-row .env-eq {
+  color: var(--dim);
+  flex: none;
+}
+
+.feature-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 2px;
+}
+
+.btn.ghost.danger {
+  color: var(--error);
+}
+
+/* ---------- auto-expand (self-expanding features) ---------- */
+
+.autoexpand-runs {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 40vh;
+  overflow-y: auto;
+  margin-top: 4px;
+}
+
+.autoexpand-run {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--panel);
+}
+
+.autoexpand-run-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.autoexpand-status {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 1px 6px;
+  border-radius: 8px;
+  background: var(--border);
+  color: var(--dim);
+  flex-shrink: 0;
+}
+
+.autoexpand-status.run-running {
+  background: rgba(59, 130, 246, 0.2);
+  color: #60a5fa;
+}
+
+.autoexpand-status.run-done {
+  background: rgba(34, 197, 94, 0.18);
+  color: #4ade80;
+}
+
+.autoexpand-status.run-error {
+  background: rgba(229, 72, 77, 0.18);
+  color: var(--error);
+}
+
+.autoexpand-run-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.autoexpand-run-meta {
+  color: var(--dim);
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
+.autoexpand-run-body {
+  padding: 0 10px 8px;
+  font-size: 12px;
+  line-height: 1.45;
+  border-top: 1px solid var(--border);
+}
+
+.autoexpand-verdict {
+  margin-top: 6px;
+  color: var(--text);
+}
+
+.autoexpand-verdict.error {
+  color: var(--error);
+}
+
+.autoexpand-ideas {
+  margin: 6px 0;
+  padding-left: 18px;
+  color: var(--dim);
+}
+
+.autoexpand-ideas li {
+  margin-top: 3px;
+}
+
+.autoexpand-ideas li.chosen {
+  color: var(--text);
+}
+
+/* ---------- app notice (brief auto-dismissing confirmation) ---------- */
+
+.app-notice {
+  position: fixed;
+  bottom: 36px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 400;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 12px;
+  color: var(--text);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
+  pointer-events: none;
+  animation: notice-in 0.15s ease-out;
+}
+
+@keyframes notice-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+/* ---------- feature rail (right-edge icon bar for feature-linked tasks) ---------- */
+
+.feature-rail {
+  flex: none;
+  width: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 0;
+  background: var(--panel);
+  border-left: 1px solid var(--border);
+}
+
+.feature-rail-btn {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--accent);
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.feature-rail-btn:hover {
+  border-color: var(--dim);
+}
+
+.feature-rail-btn.on {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+}
+
+.feature-flyout-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 300;
+  cursor: default;
+}
+
+.feature-flyout {
+  position: fixed;
+  width: 340px;
+  max-width: calc(100vw - 56px);
+  max-height: calc(100vh - 16px);
+  overflow-y: auto;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--dim);
+  border-radius: 8px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
+}
+
+.feature-flyout.status-implementing {
+  border-left-color: var(--working);
+}
+
+.feature-flyout.status-merged {
+  border-left-color: var(--green);
+}
+
+.feature-flyout-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.feature-flyout-title {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.feature-flyout-desc {
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--text);
+  white-space: pre-wrap;
+}
+
+.feature-flyout .dim {
+  color: var(--dim);
+}
+
+.feature-flyout-specs-head {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--dim);
+  margin-top: 2px;
+}
+
+.feature-flyout-specs {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.feature-flyout-spec {
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.feature-flyout-check {
+  flex: none;
+  color: var(--dim);
+}
+
+.feature-flyout-spec.done .feature-flyout-check {
+  color: var(--green);
+}
+
+.feature-flyout-spec.done .feature-flyout-spec-text {
+  color: var(--dim);
+  text-decoration: line-through;
+}
+
+.feature-flyout-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 2px;
+}
+
+/* ---------- conductor (app-level AI chat) ---------- */
+
+/* The pinned Maestro row uses the accent as its tag colour. */
+.conductor-entry {
+  border-left-color: var(--accent);
+}
+.conductor-entry.active {
+  background: var(--panel-2);
+}
+.conductor-entry .glyph {
+  color: var(--accent);
+}
+
+.conductor-pane {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+}
+
+.conductor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--border);
+}
+.conductor-title {
+  font-weight: 600;
+  color: var(--text);
+}
+
+/* Focus ("tag") picker in the conductor header. */
+.conductor-focus {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--panel-2);
+}
+.conductor-focus-mark {
+  opacity: 0.8;
+  font-size: 12px;
+}
+.conductor-focus-select {
+  border: none;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  max-width: 180px;
+}
+.conductor-focus-select:focus {
+  outline: none;
+}
+
+.conductor-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.conductor-empty {
+  color: var(--dim);
+  max-width: 640px;
+  margin: auto;
+  text-align: center;
+}
+.conductor-empty ul {
+  text-align: left;
+  margin-top: 12px;
+  padding-left: 18px;
+  line-height: 1.7;
+}
+
+.conductor-msg {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 820px;
+  width: 100%;
+}
+.conductor-msg.role-user {
+  align-self: flex-end;
+  align-items: flex-end;
+}
+.conductor-msg-role {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--dim);
+}
+.conductor-msg-body {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px 12px;
+}
+.conductor-msg.role-user .conductor-msg-body {
+  background: var(--panel-2);
+  border-color: var(--accent);
+}
+.conductor-usertext {
+  white-space: pre-wrap;
+}
+.conductor-thinking {
+  color: var(--dim);
+  font-style: italic;
+}
+.conductor-error {
+  margin-top: 8px;
+  color: var(--error);
+  font-size: 13px;
+  white-space: pre-wrap;
+}
+
+/* markdown inside an assistant turn — keep it compact */
+.conductor-msg-body .md > :first-child {
+  margin-top: 0;
+}
+.conductor-msg-body .md > :last-child {
+  margin-bottom: 0;
+}
+.conductor-msg-body .md pre {
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 10px;
+  overflow-x: auto;
+}
+.conductor-msg-body .md code {
+  font-family: var(--mono, 'Cascadia Mono', Consolas, monospace);
+}
+
+.conductor-actions {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.conductor-action {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 10px;
+  background: var(--panel-2);
+}
+.conductor-action.risk-destructive {
+  border-color: var(--error);
+}
+.conductor-action.status-rejected,
+.conductor-action.status-done {
+  opacity: 0.7;
+}
+.conductor-action-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.conductor-action-kind {
+  font-size: 12px;
+  color: var(--dim);
+}
+.risk-chip {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 1px 6px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  color: var(--dim);
+}
+.risk-chip.risk-write {
+  color: var(--working);
+  border-color: var(--working);
+}
+.risk-chip.risk-destructive {
+  color: var(--error);
+  border-color: var(--error);
+}
+.conductor-action-status {
+  margin-left: auto;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+.conductor-action-status.status-done {
+  color: var(--green);
+}
+.conductor-action-status.status-error {
+  color: var(--error);
+}
+.conductor-action-status.status-running {
+  color: var(--working);
+}
+.conductor-action-summary {
+  margin-top: 4px;
+}
+.conductor-action-result {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--dim);
+  white-space: pre-wrap;
+}
+.conductor-action-buttons {
+  margin-top: 8px;
+  display: flex;
+  gap: 8px;
+}
+
+.conductor-composer {
+  display: flex;
+  gap: 8px;
+  padding: 12px 14px;
+  border-top: 1px solid var(--border);
+}
+.conductor-input {
+  flex: 1;
+  resize: none;
+  min-height: 44px;
+  max-height: 160px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  padding: 10px 12px;
+  font-family: inherit;
+  font-size: 14px;
+}
+.conductor-input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+/* ---------- settings dialog tabs ---------- */
+.settings-tabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--border);
+  margin: 4px 0 12px;
+}
+.settings-tab {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--dim);
+  padding: 6px 10px;
+  font: inherit;
+  cursor: pointer;
+}
+.settings-tab.active {
+  color: var(--text);
+  border-bottom-color: var(--accent);
+}
+
+/* ---------- agent & skill factory ---------- */
+.factory-pane {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+}
+.factory-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--border);
+}
+.factory-title {
+  font-weight: 600;
+}
+.factory-scanbar {
+  display: flex;
+  gap: 8px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+}
+.factory-source-select {
+  flex: 0 0 auto;
+  max-width: 240px;
+}
+.factory-guidance {
+  flex: 1;
+}
+.factory-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+.factory-note {
+  color: var(--dim);
+  font-size: 13px;
+}
+.factory-section h3 {
+  margin: 0 0 10px;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--dim);
+}
+.factory-empty-row {
+  color: var(--dim);
+  font-size: 13px;
+  padding: 6px 0;
+}
+
+/* kind chips (skill vs agent) */
+.kind-chip {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 1px 6px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  color: var(--dim);
+}
+.kind-chip.kind-skill {
+  color: #3b82f6;
+  border-color: #3b82f6;
+}
+.kind-chip.kind-agent {
+  color: #a855f7;
+  border-color: #a855f7;
+}
+
+/* scan runs + candidates */
+.factory-run {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 12px;
+  background: var(--panel);
+}
+.factory-run-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.factory-run-source {
+  font-weight: 600;
+}
+.factory-run-guidance {
+  color: var(--dim);
+  font-size: 12px;
+  font-style: italic;
+}
+.factory-run-phase {
+  margin-left: auto;
+  color: var(--working);
+  font-size: 12px;
+}
+.factory-run-summary {
+  color: var(--text);
+  font-size: 13px;
+  margin: 8px 0;
+}
+.factory-candidates {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 10px;
+}
+.factory-candidate {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 10px;
+  background: var(--panel-2);
+}
+.factory-candidate.status-active {
+  border-color: var(--done);
+}
+.factory-candidate.status-error {
+  border-color: var(--error);
+}
+.factory-candidate.status-rejected {
+  opacity: 0.5;
+}
+.factory-candidate-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.factory-candidate-name {
+  font-weight: 600;
+  font-family: var(--mono, monospace);
+}
+.factory-enrich {
+  font-size: 11px;
+  color: var(--accent);
+}
+.factory-cand-status {
+  margin-left: auto;
+  font-size: 11px;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+.factory-candidate-desc {
+  font-size: 13px;
+  margin: 6px 0;
+}
+.factory-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin: 6px 0;
+}
+.factory-tag {
+  font-size: 11px;
+  color: var(--dim);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1px 6px;
+}
+.factory-rationale {
+  font-size: 12px;
+  color: var(--dim);
+}
+.factory-candidate-result {
+  font-size: 12px;
+  margin-top: 6px;
+  color: var(--dim);
+  word-break: break-all;
+}
+.factory-candidate-buttons {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+/* registry artifacts */
+.factory-artifact {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 4px;
+  border-bottom: 1px solid var(--border);
+}
+.factory-artifact-main {
+  flex: 1;
+  min-width: 0;
+}
+.factory-artifact-name {
+  font-weight: 600;
+  font-family: var(--mono, monospace);
+}
+.factory-artifact-desc {
+  font-size: 12px;
+  color: var(--dim);
+}
+.factory-artifact-related {
+  font-size: 11px;
+  color: var(--dim);
+  margin-top: 2px;
+}
+
+/* backlog + lessons */
+.factory-topic,
+.factory-lesson {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 4px;
+  border-bottom: 1px solid var(--border);
+}
+.factory-topic-main {
+  flex: 1;
+  min-width: 0;
+}
+.factory-topic-title {
+  font-weight: 600;
+  font-size: 13px;
+}
+.factory-topic-note {
+  font-size: 12px;
+  color: var(--dim);
+}
+.factory-lesson-text {
+  flex: 1;
+  font-size: 13px;
+}
+.factory-lesson-add {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.factory-lesson-add input {
+  flex: 1;
+}
+/**
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+ * https://github.com/chjj/term.js
+ * @license MIT
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * Originally forked from (with the author's permission):
+ *   Fabrice Bellard's javascript vt100 for jslinux:
+ *   http://bellard.org/jslinux/
+ *   Copyright (c) 2011 Fabrice Bellard
+ *   The original design remains. The terminal itself
+ *   has been extended to include xterm CSI codes, among
+ *   other features.
+ */
+
+/**
+ *  Default styles for xterm.js
+ */
+
+.xterm {
+    cursor: text;
+    position: relative;
+    user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+}
+
+.xterm.focus,
+.xterm:focus {
+    outline: none;
+}
+
+.xterm .xterm-helpers {
+    position: absolute;
+    top: 0;
+    /**
+     * The z-index of the helpers must be higher than the canvases in order for
+     * IMEs to appear on top.
+     */
+    z-index: 5;
+}
+
+.xterm .xterm-helper-textarea {
+    padding: 0;
+    border: 0;
+    margin: 0;
+    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
+    position: absolute;
+    opacity: 0;
+    left: -9999em;
+    top: 0;
+    width: 0;
+    height: 0;
+    z-index: -5;
+    /** Prevent wrapping so the IME appears against the textarea at the correct position */
+    white-space: nowrap;
+    overflow: hidden;
+    resize: none;
+}
+
+.xterm .composition-view {
+    /* TODO: Composition position got messed up somewhere */
+    background: #000;
+    color: #FFF;
+    display: none;
+    position: absolute;
+    white-space: nowrap;
+    z-index: 1;
+}
+
+.xterm .composition-view.active {
+    display: block;
+}
+
+.xterm .xterm-viewport {
+    /* On OS X this is required in order for the scroll bar to appear fully opaque */
+    background-color: #000;
+    overflow-y: scroll;
+    cursor: default;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.xterm .xterm-screen {
+    position: relative;
+}
+
+.xterm .xterm-screen canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.xterm .xterm-scroll-area {
+    visibility: hidden;
+}
+
+.xterm-char-measure-element {
+    display: inline-block;
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: -9999em;
+    line-height: normal;
+}
+
+.xterm.enable-mouse-events {
+    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
+    cursor: default;
+}
+
+.xterm.xterm-cursor-pointer,
+.xterm .xterm-cursor-pointer {
+    cursor: pointer;
+}
+
+.xterm.column-select.focus {
+    /* Column selection mode */
+    cursor: crosshair;
+}
+
+.xterm .xterm-accessibility:not(.debug),
+.xterm .xterm-message {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    color: transparent;
+    pointer-events: none;
+}
+
+.xterm .xterm-accessibility-tree:not(.debug) *::selection {
+  color: transparent;
+}
+
+.xterm .xterm-accessibility-tree {
+  user-select: text;
+  white-space: pre;
+}
+
+.xterm .live-region {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+.xterm-dim {
+    /* Dim should not apply to background, so the opacity of the foreground color is applied
+     * explicitly in the generated class and reset to 1 here */
+    opacity: 1 !important;
+}
+
+.xterm-underline-1 { text-decoration: underline; }
+.xterm-underline-2 { text-decoration: double underline; }
+.xterm-underline-3 { text-decoration: wavy underline; }
+.xterm-underline-4 { text-decoration: dotted underline; }
+.xterm-underline-5 { text-decoration: dashed underline; }
+
+.xterm-overline {
+    text-decoration: overline;
+}
+
+.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
+.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }
+.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }
+.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }
+.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }
+
+.xterm-strikethrough {
+    text-decoration: line-through;
+}
+
+.xterm-screen .xterm-decoration-container .xterm-decoration {
+	z-index: 6;
+	position: absolute;
+}
+
+.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
+	z-index: 7;
+}
+
+.xterm-decoration-overview-ruler {
+    z-index: 8;
+    position: absolute;
+    top: 0;
+    right: 0;
+    pointer-events: none;
+}
+
+.xterm-decoration-top {
+    z-index: 2;
+    position: relative;
+}