@teamclaws/teamclaw 2026.3.26-2 → 2026.4.2-1

package/src/ui/style.css

@@ -41,6 +41,20 @@ body {
   border-bottom: 1px solid var(--border);
 }
 
+.header-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.header-logo {
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  object-fit: cover;
+  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.18);
+}
+
 .header-title {
   font-size: 18px;
   font-weight: 700;
@@ -55,6 +69,20 @@ body {
   color: var(--text-secondary);
 }
 
+.header-mini-btn {
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  padding: 6px 10px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.header-mini-btn:hover {
+  border-color: var(--accent);
+}
+
 .status-dot {
   width: 8px;
   height: 8px;
@@ -161,6 +189,9 @@ body {
 }
 
 .tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   padding: 10px 20px;
   background: none;
   border: none;
@@ -177,6 +208,19 @@ body {
   border-bottom-color: var(--accent);
 }
 
+.tab.has-active {
+  color: var(--text-primary);
+}
+
+.tab.has-attention {
+  color: #fbbf24;
+}
+
+.tab-label {
+  display: inline-flex;
+  align-items: center;
+}
+
 .tab-badge {
   display: inline-flex;
   align-items: center;
@@ -192,19 +236,127 @@ body {
   font-weight: 700;
 }
 
-.tab-badge.has-items {
+.tab-badge.tone-active {
+  background: #14532d;
+  color: #fff;
+}
+
+.tab-badge.tone-attention {
   background: var(--danger);
   color: #fff;
 }
 
+.tab-signal {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: transparent;
+  box-shadow: none;
+  transition: background 0.15s ease, box-shadow 0.15s ease;
+}
+
+.tab-signal.tone-active {
+  background: #34d399;
+  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
+}
+
+.tab-signal.tone-attention {
+  background: #f59e0b;
+  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
+}
+
 .tab-content {
   flex: 1;
   overflow-y: auto;
   padding: 16px 20px;
 }
 
+.worker-install-card {
+  margin: 16px 20px 0;
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-secondary);
+  box-shadow: var(--shadow);
+}
+
+.worker-install-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.worker-install-head h3 {
+  font-size: 15px;
+  margin: 0 0 4px;
+}
+
+.worker-install-copy {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.worker-install-copy:hover {
+  border-color: var(--accent);
+}
+
+.worker-install-subtitle,
+.worker-install-note {
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.worker-install-controls {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.worker-install-field label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.worker-install-field select {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  padding: 9px 10px;
+}
+
+.worker-install-command {
+  margin: 0 0 10px;
+  padding: 12px 14px;
+  border-radius: 6px;
+  background: #0b1220;
+  color: #dbeafe;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.worker-install-note.warning {
+  color: #facc15;
+}
+
 .tab-panel { display: none; }
 .tab-panel.active { display: block; }
+#tab-planning.active { display: flex; height: 100%; }
 
 .panel-note {
   margin-bottom: 14px;
@@ -217,6 +369,22 @@ body {
   line-height: 1.5;
 }
 
+.runtime-alert {
+  margin: 16px 20px 0;
+  padding: 12px 14px;
+  border: 1px solid rgba(234, 179, 8, 0.35);
+  border-left: 4px solid var(--warning);
+  border-radius: var(--radius);
+  background: rgba(234, 179, 8, 0.12);
+  color: #fef3c7;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.runtime-alert strong {
+  color: var(--text-primary);
+}
+
 .task-filters {
   display: flex;
   gap: 6px;
@@ -467,108 +635,588 @@ body {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  margin-bottom: 16px;
+  margin-bottom: 16px;
+}
+
+.controller-run-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.controller-run-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.controller-run-heading h3 {
+  margin: 0;
+  font-size: 15px;
+}
+
+.controller-run-kicker,
+.controller-run-meta,
+.controller-run-section-title,
+.controller-run-event-meta {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.controller-run-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.controller-run-status {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 4px 9px;
+  border-radius: 999px;
+}
+
+.controller-run-status.pending { background: var(--bg-tertiary); color: var(--text-secondary); }
+.controller-run-status.running { background: #422006; color: var(--warning); }
+.controller-run-status.completed { background: #14532d; color: var(--success); }
+.controller-run-status.failed { background: #450a0a; color: var(--danger); }
+
+.controller-run-created-tasks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.controller-run-task-link {
+  padding: 6px 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(96, 165, 250, 0.25);
+  background: rgba(96, 165, 250, 0.12);
+  color: var(--accent);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.controller-run-task-link:hover {
+  border-color: var(--accent);
+}
+
+.controller-run-events {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.controller-run-event {
+  border-left: 3px solid var(--accent);
+  background: var(--bg-tertiary);
+  border-radius: 10px;
+  padding: 10px 12px;
+}
+
+.controller-run-event-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 6px;
+}
+
+.controller-run-event-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.controller-run-event-body {
+  font-size: 13px;
+}
+
+/* Planning tab needs edge-to-edge layout (no padding from .tab-content) */
+#tab-planning {
+  margin: -16px -20px;
+  width: calc(100% + 40px);
+}
+
+/* ── Planning Tab ─────────────────────────────────────────────────────── */
+.planning-container {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+}
+
+.planning-sessions {
+  width: 260px;
+  min-width: 200px;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.planning-sessions-header {
+  padding: 12px 14px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border);
+}
+
+.planning-session-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px;
+  overflow-y: auto;
+}
+
+.planning-session-btn {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 10px 12px;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  background: none;
+  cursor: pointer;
+  color: var(--text-primary);
+  font-size: 13px;
+  transition: background 0.12s, border-color 0.12s;
+}
+
+.planning-session-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.planning-session-status {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  background: var(--text-muted);
+  flex: 0 0 auto;
+}
+
+.planning-session-status.completed {
+  background: #34d399;
+}
+
+.planning-session-status.failed,
+.planning-session-status.cancelled {
+  background: var(--danger);
+}
+
+.planning-session-status.pending,
+.planning-session-status.in_progress,
+.planning-session-status.active,
+.planning-session-status.running {
+  background: #f59e0b;
+  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
+}
+
+.planning-session-btn:hover {
+  background: var(--bg-tertiary);
+}
+
+.planning-session-btn.active {
+  background: var(--bg-tertiary);
+  border-color: #a78bfa;
+}
+
+.planning-session-title {
+  font-weight: 600;
+  line-height: 1.35;
+  margin-bottom: 3px;
+}
+
+.planning-session-meta {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.planning-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.planning-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 12px;
+  color: var(--text-muted);
+  text-align: center;
+  padding: 40px;
+}
+
+.planning-empty-icon {
+  font-size: 48px;
+  line-height: 1;
+}
+
+.planning-empty-state h3 {
+  margin: 0;
+  font-size: 18px;
+  color: var(--text-primary);
+}
+
+.planning-empty-state p {
+  margin: 0;
+  max-width: 400px;
+  line-height: 1.5;
+  font-size: 14px;
+}
+
+.planning-split {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.planning-pane {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.planning-pane-left {
+  flex: 2;
+  min-width: 0;
+}
+
+.planning-pane-right {
+  flex: 3;
+  min-width: 0;
+}
+
+.planning-divider {
+  width: 1px;
+  background: var(--border);
+  flex-shrink: 0;
+}
+
+.planning-pane-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-secondary);
+}
+
+.planning-pane-icon {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.planning-pane-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.planning-pane-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.planning-req-original {
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.planning-req-section {
+  margin-bottom: 16px;
+}
+
+.planning-req-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 8px;
+}
+
+.planning-req-body {
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.planning-task-list {
+  margin: 0;
+  padding-left: 18px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.7;
+}
+
+.planning-task-list.planning-deferred li {
+  color: var(--text-muted);
+}
+
+.planning-role-tag {
+  display: inline-block;
+  font-size: 11px;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  margin-left: 4px;
+  vertical-align: middle;
+}
+
+/* Kickoff content inside planning pane */
+.planning-pane-body .kickoff-stats-bar {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.kickoff-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.kickoff-stat-num {
+  font-size: 22px;
+  font-weight: 800;
+  color: var(--text-primary);
+}
+
+.kickoff-stat-ok .kickoff-stat-num {
+  color: var(--success);
+}
+
+.kickoff-stat-dim .kickoff-stat-num {
+  color: var(--text-muted);
+}
+
+.kickoff-stat-label {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* Collapsible sections */
+.kickoff-collapsible {
+  margin-top: 6px;
+}
+
+.kickoff-collapsible summary {
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+}
+
+.kickoff-collapsible summary::-webkit-details-marker {
+  display: none;
+}
+
+.kickoff-collapsible summary::before {
+  content: "▸ ";
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+.kickoff-collapsible[open] summary::before {
+  content: "▾ ";
+}
+
+/* ── Kickoff Meeting Panel (inside controller-run cards) ──────────────── */
+.kickoff-panel {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-left: 3px solid #a78bfa;
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.kickoff-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.kickoff-panel-icon {
+  font-size: 24px;
+  line-height: 1;
+}
+
+.kickoff-panel-heading h4 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.kickoff-panel-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+.kickoff-role-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 12px;
 }
 
-.controller-run-card {
+.kickoff-role-card {
   background: var(--bg-secondary);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 14px 16px;
+  border-radius: 10px;
+  padding: 14px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
+  transition: border-color 0.15s;
 }
 
-.controller-run-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
+.kickoff-role-card:hover {
+  border-color: #a78bfa;
 }
 
-.controller-run-heading h3 {
-  margin: 0;
-  font-size: 15px;
+.kickoff-role-card.kickoff-role-dismissed {
+  opacity: 0.55;
 }
 
-.controller-run-kicker,
-.controller-run-meta,
-.controller-run-section-title,
-.controller-run-event-meta {
-  color: var(--text-muted);
-  font-size: 12px;
+.kickoff-role-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.controller-run-section {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+.kickoff-role-icon {
+  font-size: 18px;
+  line-height: 1;
 }
 
-.controller-run-status {
+.kickoff-role-name {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-primary);
+  flex: 1;
+}
+
+.kickoff-role-badge {
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
-  padding: 4px 9px;
+  padding: 3px 8px;
   border-radius: 999px;
+  letter-spacing: 0.02em;
 }
 
-.controller-run-status.pending { background: var(--bg-tertiary); color: var(--text-secondary); }
-.controller-run-status.running { background: #422006; color: var(--warning); }
-.controller-run-status.completed { background: #14532d; color: var(--success); }
-.controller-run-status.failed { background: #450a0a; color: var(--danger); }
+.kickoff-role-badge.kickoff-role-needed {
+  background: #14532d;
+  color: var(--success);
+}
 
-.controller-run-created-tasks {
+.kickoff-role-badge.kickoff-role-dismissed {
+  background: var(--bg-tertiary);
+  color: var(--text-muted);
+}
+
+.kickoff-role-scope {
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.kickoff-role-scope .markdown-body {
+  font-size: 13px;
+}
+
+.kickoff-role-detail {
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+  flex-direction: column;
+  gap: 4px;
 }
 
-.controller-run-task-link {
-  padding: 6px 10px;
-  border-radius: 999px;
-  border: 1px solid rgba(96, 165, 250, 0.25);
-  background: rgba(96, 165, 250, 0.12);
-  color: var(--accent);
-  cursor: pointer;
+.kickoff-detail-label {
   font-size: 12px;
   font-weight: 600;
+  color: var(--text-muted);
 }
 
-.controller-run-task-link:hover {
-  border-color: var(--accent);
+.kickoff-detail-list {
+  margin: 0;
+  padding-left: 18px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.6;
 }
 
-.controller-run-events {
+.kickoff-detail-list.kickoff-risks li {
+  color: var(--warning);
+}
+
+.kickoff-deps {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  flex-wrap: wrap;
+  gap: 6px;
 }
 
-.controller-run-event {
-  border-left: 3px solid var(--accent);
+.kickoff-dep-chip {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 999px;
   background: var(--bg-tertiary);
-  border-radius: 10px;
-  padding: 10px 12px;
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
 }
 
-.controller-run-event-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 6px;
+.kickoff-summary {
+  border-top: 1px solid var(--border);
+  padding-top: 14px;
 }
 
-.controller-run-event-label {
+.kickoff-summary-label {
   font-size: 12px;
   font-weight: 700;
-  color: var(--text-primary);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 8px;
 }
 
-.controller-run-event-body {
+.kickoff-summary-body {
   font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.6;
 }
 
 .contract-card {
@@ -700,6 +1348,24 @@ body {
   color: var(--text-secondary);
 }
 
+.deliverable-live-link {
+  display: inline-block;
+  padding: 1px 8px;
+  margin-left: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent);
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  text-decoration: none;
+  vertical-align: middle;
+}
+
+.deliverable-live-link:hover {
+  background: var(--accent);
+  color: var(--bg-primary);
+}
+
 .messages-feed {
   display: flex;
   flex-direction: column;
@@ -879,7 +1545,7 @@ body {
   display: block;
 }
 
-.workspace-tree-summary,
+.workspace-tree-dir-toggle,
 .workspace-tree-file {
   width: 100%;
   min-height: 40px;
@@ -895,23 +1561,25 @@ body {
   text-align: left;
   cursor: pointer;
   transition: background 0.18s, border-color 0.18s, color 0.18s;
+  user-select: none;
 }
 
-.workspace-tree-summary {
-  list-style: none;
-}
-
-.workspace-tree-summary::-webkit-details-marker {
-  display: none;
+.workspace-tree-arrow {
+  flex-shrink: 0;
+  display: inline-block;
+  width: 12px;
+  font-size: 11px;
+  color: var(--text-secondary);
+  transition: transform 0.15s;
 }
 
-.workspace-tree-summary:hover,
+.workspace-tree-dir-toggle:hover,
 .workspace-tree-file:hover {
   background: var(--bg-tertiary);
   border-color: var(--border);
 }
 
-.workspace-tree-summary:focus-visible,
+.workspace-tree-dir-toggle:focus-visible,
 .workspace-tree-file:focus-visible,
 .workspace-view-tab:focus-visible {
   outline: 2px solid var(--accent-hover);
@@ -947,6 +1615,14 @@ body {
   border-left: 1px solid var(--border);
 }
 
+.workspace-tree-loading,
+.workspace-tree-empty {
+  padding: 6px 10px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
 .workspace-file-meta {
   margin-top: 6px;
   color: var(--text-secondary);
@@ -1221,6 +1897,66 @@ body {
   border-color: var(--warning);
 }
 
+.clarification-prompt-modal {
+  position: fixed;
+  inset: 0;
+  display: none;
+  z-index: 1100;
+}
+
+.clarification-prompt-modal.open {
+  display: block;
+}
+
+.clarification-prompt-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.clarification-prompt-panel {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  width: min(560px, calc(100vw - 48px));
+  max-height: calc(100vh - 48px);
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-secondary);
+  border: 1px solid rgba(245, 158, 11, 0.45);
+  border-radius: 16px;
+  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
+  overflow: hidden;
+}
+
+.clarification-prompt-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--border);
+}
+
+.clarification-prompt-kicker {
+  color: #f59e0b;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+}
+
+.clarification-prompt-header h2 {
+  margin: 0;
+  font-size: 22px;
+}
+
+.clarification-prompt-body {
+  padding: 18px;
+  overflow: auto;
+}
+
 .task-detail-modal {
   position: fixed;
   inset: 0;
@@ -1300,23 +2036,11 @@ body {
 .task-detail-toolbar {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   gap: 16px;
   background: rgba(255, 255, 255, 0.01);
 }
 
-.task-detail-follow {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: var(--text-secondary);
-}
-
-.task-detail-follow input {
-  accent-color: var(--accent);
-}
-
 .task-detail-live-badge {
   display: inline-flex;
   align-items: center;
@@ -1342,6 +2066,9 @@ body {
 }
 
 .task-detail-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   border: 1px solid var(--border);
   background: var(--bg-tertiary);
   color: var(--text-secondary);
@@ -1351,12 +2078,34 @@ body {
   font-size: 13px;
 }
 
+.task-detail-tab-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
+  background: transparent;
+  color: inherit;
+}
+
+.task-detail-tab-count.has-items {
+  background: rgba(255, 255, 255, 0.14);
+}
+
 .task-detail-tab.active {
   border-color: var(--accent);
   color: #fff;
   background: var(--accent);
 }
 
+.clarification-card-compact {
+  margin: 0;
+}
+
 .task-detail-body {
   flex: 1;
   min-height: 0;
@@ -1480,69 +2229,6 @@ body {
   margin-top: 10px;
 }
 
-.task-detail-output-stream {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.task-output-entry {
-  background: #0c0e14;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 14px 16px;
-}
-
-.task-output-entry.is-error {
-  border-left: 3px solid var(--danger);
-}
-
-.task-output-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 10px;
-}
-
-.task-output-label {
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: #c7d2fe;
-}
-
-.task-output-meta {
-  color: var(--text-muted);
-  font-size: 12px;
-}
-
-.task-output-body {
-  min-height: 100%;
-  font-size: 13px;
-  line-height: 1.7;
-  color: #d7def8;
-}
-
-.task-output-body.markdown-body p,
-.task-output-body.markdown-body li,
-.task-output-body.markdown-body blockquote,
-.task-output-body.markdown-body td,
-.task-output-body.markdown-body th,
-.task-output-body.markdown-body strong {
-  color: inherit;
-}
-
-.task-output-body.markdown-body a {
-  color: #93c5fd;
-}
-
-.task-output-body.markdown-body blockquote {
-  background: rgba(147, 197, 253, 0.08);
-  border-left-color: #60a5fa;
-}
-
 .task-detail-empty {
   border: 1px dashed var(--border);
   border-radius: var(--radius);