clay-server 4.0.0-beta.8 → 4.0.0

package/lib/public/css/notifications-center.css

@@ -319,6 +319,73 @@
 .notif-banner-update-now:hover { opacity: 0.85; }
 .notif-banner-update-now:disabled { opacity: 0.6; cursor: default; }
 
+/* Snooze: the quiet sibling of "Update now". Same button metrics so the two
+   sit on one row, but a bordered surface instead of the accent fill, because
+   postponing should never read as the primary action. */
+.notif-banner-snooze { position: relative; display: inline-flex; }
+.notif-banner-snooze-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  border: 1px solid rgba(var(--overlay-rgb), 0.22);
+  background: transparent;
+  color: inherit;
+  opacity: 0.85;
+  transition: opacity 0.15s, border-color 0.15s;
+}
+.notif-banner-snooze-btn:hover { opacity: 1; border-color: rgba(var(--overlay-rgb), 0.4); }
+.notif-banner-snooze-btn:focus-visible {
+  outline: none;
+  opacity: 1;
+  border-color: var(--accent, #6c5ce7);
+  box-shadow: 0 0 0 2px rgba(var(--overlay-rgb), 0.18);
+}
+.notif-banner-snooze-btn .lucide { width: 11px; height: 11px; }
+
+.notif-banner-snooze-menu {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 0;
+  z-index: 5;
+  min-width: 116px;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  border-radius: 8px;
+  border: 1px solid rgba(var(--overlay-rgb), 0.16);
+  background: var(--bg-alt, #20201d);
+  box-shadow: 0 8px 22px rgba(var(--shadow-rgb), 0.32);
+}
+.notif-banner-snooze-item {
+  padding: 5px 8px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+}
+.notif-banner-snooze-item:hover { background: rgba(var(--overlay-rgb), 0.1); }
+.notif-banner-snooze-item:focus-visible {
+  outline: none;
+  background: rgba(var(--overlay-rgb), 0.14);
+  box-shadow: inset 0 0 0 1px var(--accent, #6c5ce7);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .notif-banner-snooze-btn { transition: none; }
+}
+
 .light-theme .notif-banner-clear-all {
   background:
     linear-gradient(180deg, rgba(255,255,255,0.54), rgba(255,255,255,0.28)),

package/lib/public/css/pane.css

@@ -104,6 +104,49 @@ body.pane-mode #input-area {
   flex-shrink: 0;
 }
 
+.split-pane-header.has-worker-runtime {
+  flex-wrap: nowrap;
+}
+
+.split-pane-header.has-worker-runtime .split-pane-context {
+  order: 1;
+}
+
+.split-pane-header.has-worker-runtime .split-pane-close {
+  order: 2;
+  flex-shrink: 0;
+}
+
+.split-worker-runtime {
+  flex: 0 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.split-worker-runtime-model {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+  font-weight: 600;
+}
+
+.split-worker-runtime-thinking {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: var(--bg-alt);
+  color: var(--text-secondary);
+}
+
 .split-pane-title {
   flex: 0 1 auto;
   max-width: 46%;
@@ -192,8 +235,7 @@ body.pane-mode #input-area {
 @keyframes pair-divider-flow-left { 0%, 100% { transform: translateX(3px); opacity: 0.65; } 50% { transform: translateX(-3px); opacity: 1; } }
 @keyframes pair-status-pulse { 50% { opacity: 0.55; } }
 
-/* Worker-pane composer notice: shown while this pane's session processes a
-   delegated turn. Informational only -- the composer stays enabled. */
+/* Worker activity notice shown while this pane processes a delegated task. */
 .pane-delegation-notice {
   display: none;
   align-items: center;
@@ -202,7 +244,7 @@ body.pane-mode #input-area {
   max-width: var(--content-width);
   margin: 0 auto;
   padding: 4px 10px;
-  border-radius: 8px 8px 0 0;
+  border-radius: 8px;
   background: color-mix(in srgb, var(--accent) 8%, var(--bg));
   color: var(--text-secondary);
   font-size: 11px;
@@ -210,13 +252,6 @@ body.pane-mode #input-area {
   transition: box-shadow 0.2s;
 }
 .pane-delegation-notice.visible { display: flex; }
-.pane-delegation-notice.visible:has(+ #input-wrapper #input-row:focus-within) {
-  box-shadow: 0 0 0 1px var(--border);
-  clip-path: inset(-1px -1px 0 -1px);
-}
-.pane-delegation-notice.visible + #input-wrapper #input-row {
-  border-radius: 0 0 8px 8px;
-}
 .pane-delegation-notice::before {
   content: "";
   width: 6px;
@@ -463,3 +498,55 @@ body.sticky-note-interacting .split-pane-frame {
   font-size: 13px;
   font-weight: 700;
 }
+
+/* Driver-operated Split Worker surface.
+   ------------------------------------------------------------------
+   The composer is gone, so the region needs to read as "execution
+   surface", not "chat with a broken input". The whole treatment is one
+   line in the composer's own footprint: same content width, same
+   horizontal rhythm, deliberately shorter than the input it replaces so
+   the transcript gains the space rather than a warning banner taking it.
+
+   Utilitarian on purpose. A hairline top rule and a small steady dot
+   carry the state; there is no panel, no card, no icon set, no colour
+   alarm. The dot does not pulse — a standing condition should not
+   animate. Muted text, uppercase micro-label with wide tracking: it
+   reads as instrumentation, which is what it is. */
+#input-area .worker-pane-status {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  width: 100%;
+  max-width: var(--content-width);
+  margin: 0 auto;
+  padding: 9px 12px calc(9px + var(--safe-bottom, 0px));
+  border-top: 1px solid var(--border-subtle);
+  color: var(--text-dimmer);
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  user-select: none;
+}
+#input-area .worker-pane-status.visible { display: flex; }
+
+.worker-pane-status-mark {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--text-dimmer);
+  /* A faint halo so the dot reads as a live indicator at 5px rather than
+     as a stray period, without becoming a status "light". */
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-dimmer) 14%, transparent);
+}
+
+/* The composer is hidden rather than removed, so the transcript keeps its
+   scroll container and nothing reflows when a pair dissolves. */
+body.worker-pane-locked #input-wrapper { display: none; }
+body.worker-pane-locked #input-area {
+  padding-top: 0;
+  background: transparent;
+}

package/lib/public/css/project-logs.css

@@ -0,0 +1,198 @@
+/* Project Logs — a restrained editorial ledger, designed for close reading. */
+
+/* Wide screens: bounded workbench window beside #app, matching the geometry of
+   the document viewer and the terminal. */
+@media (min-width: 1024px) {
+  #project-logs-panel {
+    width: 50%;
+    max-width: 720px;
+    min-width: 360px;
+    height: calc(100% - 16px);
+    min-height: 0;
+    align-self: center;
+    margin: 8px 8px 8px 10px;
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    background: var(--bg);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    flex-shrink: 0;
+    box-shadow:
+      4px 8px 18px rgba(var(--shadow-rgb), 0.14),
+      2px 2px 4px rgba(var(--shadow-rgb), 0.08),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    animation: workbench-panel-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
+    transition: max-width 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
+  }
+  #project-logs-panel.hidden { display: none; }
+  #project-logs-panel.project-logs-wide {
+    width: 70%;
+    max-width: 1200px;
+  }
+  #project-logs-panel.panel-fullscreen {
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+    height: 100%;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    animation: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #project-logs-panel { animation: none; }
+}
+
+/* Narrow screens: full overlay, like the other workbench tools. */
+@media (max-width: 1023px) {
+  #project-logs-panel {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding-top: var(--safe-top);
+    padding-bottom: var(--safe-bottom);
+    background: var(--bg);
+    z-index: 300;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  #project-logs-panel.hidden { display: none; }
+  /* Sizing controls are meaningless in the overlay presentation. */
+  #project-logs-wide,
+  #project-logs-fullscreen { display: none; }
+}
+.project-logs-topbar {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  flex: 0 0 auto;
+}
+.project-logs-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--text); }
+.project-logs-title .lucide { width: 15px; color: var(--accent); }
+.project-logs-subtitle { flex: 1; color: var(--text-dimmer); font-size: 12px; }
+.project-logs-icon-btn {
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--bg-alt);
+  color: var(--text-secondary);
+  font: inherit;
+  cursor: pointer;
+}
+.project-logs-icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
+.project-logs-icon-btn.hidden { display: none; }
+.project-logs-icon-btn .lucide { width: 15px; }
+.project-logs-icon-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
+.project-logs-icon-btn:disabled { opacity: 0.4; cursor: default; }
+.project-logs-window-actions { display: inline-flex; align-items: center; gap: 6px; }
+/* The explicit tool button is the only discovery affordance. */
+#project-logs-btn.project-logs-unread { color: var(--accent); }
+#project-logs-count { background: var(--accent); color: #fff; }
+
+/* --- Ledger toolbar --- */
+.project-logs-toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto; background: color-mix(in srgb, var(--bg-alt) 72%, transparent); }
+.project-logs-toolbar.hidden { display: none; }
+.project-logs-search { flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text-dimmer); }
+.project-logs-search .lucide { width: 14px; flex: 0 0 auto; }
+.project-logs-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; }
+.project-logs-search:focus-within, .project-logs-filter:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); }
+.project-logs-filter { height: 36px; max-width: 180px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; }
+.project-logs-context-filter { max-width: 148px; }
+.project-log-context-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; border-radius: 999px; background: var(--bg-alt); color: var(--text-secondary); font-size: 11px; font-weight: 600; }
+.project-log-context-chip[data-status="archived"] { opacity: .72; }
+.project-log-context-chip[data-status="merged"] { color: var(--success, #2f8f57); }
+
+/* --- Ledger list: full pane, chronological, commit-history feel --- */
+.project-logs-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0 18px; }
+.project-logs-list.hidden { display: none; }
+.project-log-row { width: 100%; display: block; padding: 15px 18px 14px; border: 0; border-bottom: 1px solid var(--border-subtle); border-left: 2px solid transparent; background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease; }
+.project-log-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); border-left-color: var(--accent); }
+.project-log-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
+.project-log-row:last-child { border-bottom: 0; }
+.project-log-row-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
+.project-log-row-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
+.project-log-row-summary { margin: 7px 0 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.55; }
+.project-log-row-meta { margin-top: 8px; color: var(--text-dimmer); font-size: 10.5px; font-family: var(--font-mono); }
+.project-logs-list-empty { max-width: 320px; margin: 54px auto; padding: 20px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--text-dimmer); font-size: 12px; text-align: center; line-height: 1.7; }
+.project-logs-list[aria-busy="true"] .project-logs-list-empty { color: var(--text-secondary); font-family: var(--font-mono); }
+
+/* Category chip and priority signal. Categories are project-defined, so the
+   chip is deliberately neutral: no per-category selectors and no exhaustive
+   class list, because the vocabulary is not known at build time. Priority
+   carries the only stable colour, since urgency is a fixed scale. */
+.project-log-chip { flex: 0 0 auto; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 7px; border-radius: 999px; background: rgba(var(--overlay-rgb), 0.08); color: var(--text-secondary); font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
+.project-log-priority { flex: 0 0 auto; padding: 2px 6px; border-radius: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
+.project-log-priority[data-priority="important"] { background: color-mix(in srgb, #f5a524 18%, transparent); color: #f5a524; }
+.project-log-priority[data-priority="urgent"] { background: color-mix(in srgb, #e5484d 20%, transparent); color: #e5484d; }
+
+/* --- Entry detail: full pane, replaces the list --- */
+.project-logs-detail { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }
+.project-logs-detail.hidden { display: none; }
+.project-log-document { max-width: 760px; margin: 0 auto; padding: 32px 28px 52px; }
+#project-logs-panel.panel-fullscreen .project-log-document { padding: clamp(28px, 5vw, 64px); }
+.project-log-doc-chips { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
+.project-log-document h1 { margin: 0 0 10px; color: var(--text); font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.025em; line-height: 1.12; }
+.project-log-doc-summary { margin: 0 0 13px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
+.project-log-byline { margin: 0 0 25px; padding-bottom: 18px; border-bottom: 2px solid var(--border-subtle); color: var(--text-dimmer); font-size: 11px; font-family: var(--font-mono); }
+.project-log-delete-button { display: inline-flex; align-items: center; gap: 6px; margin: -11px 0 24px; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); border-radius: 7px; background: transparent; color: var(--danger); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
+.project-log-delete-button .lucide { width: 13px; }
+.project-log-markdown { font-size: 14px; line-height: 1.75; }
+
+.project-log-delete-dialog { position: fixed; inset: 0; z-index: 420; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(var(--shadow-rgb), 0.5); }
+.project-log-delete-dialog.hidden { display: none; }
+.project-log-delete-dialog-card { width: min(420px, 100%); padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); box-shadow: 0 18px 50px rgba(var(--shadow-rgb), 0.3); }
+.project-log-delete-dialog-card h2 { margin: 0 0 9px; color: var(--text); font-family: var(--font-display); font-size: 18px; }
+.project-log-delete-dialog-card p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
+.project-log-delete-dialog-title { margin-top: 9px !important; color: var(--text) !important; font-weight: 700; overflow-wrap: anywhere; }
+.project-log-delete-dialog-status { min-height: 17px; margin-top: 11px !important; color: var(--danger) !important; font-size: 11px !important; }
+.project-log-delete-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
+.project-log-delete-dialog-actions button { padding: 7px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-alt); color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
+.project-log-delete-dialog-actions button.danger { border-color: var(--danger); background: var(--danger); color: #fff; }
+.project-log-delete-dialog-actions button:disabled { opacity: 0.5; cursor: default; }
+
+/* --- Discussion --- */
+.project-log-discussion { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border-subtle); }
+.project-log-discussion h2 { margin: 0 0 12px; color: var(--text); font-family: var(--font-display); font-size: 15px; }
+.project-log-discussion-empty { margin: 0; color: var(--text-dimmer); font-size: 12px; }
+.project-log-comment { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--bg-alt); }
+.project-log-comment-meta { margin: 0 0 5px; color: var(--text-dimmer); font-size: 10.5px; font-family: var(--font-mono); }
+.project-log-comment-body { margin: 0; color: var(--text); font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
+.project-log-comment-status-badge { display: inline-block; margin-top: 7px; padding: 2px 7px; border-radius: 999px; background: rgba(var(--overlay-rgb), 0.08); color: var(--text-dimmer); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
+.project-log-comment-status-badge[data-status="incorporated"] { background: color-mix(in srgb, var(--brand-green) 16%, transparent); color: var(--brand-green); }
+.project-log-comment-status-badge[data-status="clarification-needed"] { background: color-mix(in srgb, #f5a524 18%, transparent); color: #f5a524; }
+.project-log-comment-response { margin-top: 9px; padding: 8px 10px; border-left: 2px solid var(--accent); background: rgba(var(--overlay-rgb), 0.04); border-radius: 0 7px 7px 0; }
+.project-log-comment-response-meta { margin: 0 0 4px; color: var(--text-dimmer); font-size: 10.5px; font-family: var(--font-mono); }
+.project-log-comment-response-body { margin: 0; color: var(--text); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; }
+.project-log-history { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
+.project-log-history h2 { margin: 0 0 10px; color: var(--text); font-family: var(--font-display); font-size: 14px; }
+.project-log-history-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
+.project-log-history-row { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; }
+.project-log-history-label { flex: 0 0 auto; color: var(--text-dimmer); font-family: var(--font-mono); font-weight: 700; }
+.project-log-history-text { color: var(--text-secondary); }
+.project-log-history-reason { color: var(--text-dimmer); font-style: italic; }
+.project-log-comment-form { display: grid; gap: 8px; margin-top: 18px; }
+.project-log-comment-form label { color: var(--text-secondary); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
+.project-log-comment-form textarea { width: 100%; min-height: 80px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); color: var(--text); font: inherit; font-size: 13px; line-height: 1.55; resize: vertical; box-sizing: border-box; }
+.project-log-comment-form textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); }
+.project-log-comment-status { min-height: 16px; margin: 0; color: var(--text-dimmer); font-size: 11px; }
+.project-log-comment-actions { display: flex; justify-content: flex-end; }
+.project-log-comment-actions button { padding: 7px 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-alt); color: var(--text-secondary); font: inherit; font-weight: 700; font-size: 12px; cursor: pointer; }
+.project-log-comment-actions button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
+
+@media (max-width: 768px) {
+  .project-logs-subtitle { display: none; }
+  .project-logs-topbar { gap: 8px; padding: 0 12px; }
+  .project-logs-toolbar { padding: 10px 12px; }
+  .project-logs-filter { max-width: 42%; }
+  .project-log-row { padding: 14px 14px 13px; }
+  .project-log-document { padding: 24px 18px 38px; }
+}

package/lib/public/css/scheduler.css

@@ -6,7 +6,7 @@
 #scheduler-panel {
   position: absolute;
   inset: 0;
-  z-index: 40;
+  z-index: 240;
   background: var(--bg);
   display: flex;
   flex-direction: column;

package/lib/public/css/session-actions.css

@@ -1,119 +1,34 @@
-#header-session-actions-btn {
+.composer-session-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
-  width: auto;
-  height: 28px;
+  width: 36px;
+  height: 36px;
   margin: 0;
-  padding: 0 9px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--brand-indigo) 5%, var(--bg));
-  color: var(--text-secondary);
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--text-muted);
   cursor: pointer;
   flex-shrink: 0;
   font: inherit;
-  font-size: 11px;
-  font-weight: 650;
-  white-space: nowrap;
-  transition: color 0.15s, background 0.15s, border-color 0.15s;
+  transition: color 0.15s, background 0.15s, opacity 0.15s;
 }
 
-#header-session-actions-btn:hover,
-#header-session-actions-btn[aria-expanded="true"] {
+.composer-session-action:hover:not(:disabled) {
   color: var(--text);
-  background: color-mix(in srgb, var(--brand-indigo) 9%, var(--bg));
-  border-color: color-mix(in srgb, var(--brand-indigo) 32%, var(--border));
+  background: rgba(var(--overlay-rgb), 0.06);
 }
 
-#header-session-actions-btn:focus { outline: none; }
-#header-session-actions-btn:focus-visible {
-  border-color: color-mix(in srgb, var(--link) 48%, var(--border));
+.composer-session-action:focus { outline: none; }
+.composer-session-action:focus-visible {
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--link) 18%, transparent);
 }
 
-#header-session-actions-btn.hidden { display: none; }
-#header-session-actions-btn .lucide:first-child {
-  width: 14px;
-  height: 14px;
-  color: color-mix(in srgb, var(--brand-indigo) 78%, var(--text));
-}
-
-#header-session-actions-btn .session-actions-trigger-chevron {
-  width: 13px;
-  height: 13px;
-  transition: transform 0.16s ease;
-}
-
-#header-session-actions-btn[aria-expanded="true"] .session-actions-trigger-chevron {
-  transform: rotate(180deg);
-}
-
-.session-actions-menu {
-  position: fixed;
-  z-index: 10020;
-  width: min(300px, calc(100vw - 16px));
-  padding: 6px;
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  background: color-mix(in srgb, var(--bg) 96%, transparent);
-  box-shadow: 0 14px 38px rgba(var(--shadow-rgb), 0.32), 0 2px 8px rgba(var(--shadow-rgb), 0.2);
-  backdrop-filter: blur(18px);
-}
-
-.session-actions-row {
-  width: 100%;
-  border: 0;
-  background: transparent;
-  color: var(--text);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.session-actions-row {
-  display: grid;
-  grid-template-columns: 30px minmax(0, 1fr) 16px;
-  align-items: center;
-  gap: 8px;
-  min-height: 54px;
-  padding: 7px 8px;
-  border-radius: 8px;
-}
-
-.session-actions-row:hover { background: var(--bg-alt); }
-.session-actions-row.is-primary {
-  background: color-mix(in srgb, var(--brand-indigo) 6%, transparent);
-}
-.session-actions-row.is-primary:hover {
-  background: color-mix(in srgb, var(--brand-indigo) 10%, transparent);
-}
-.session-actions-row.is-primary .session-actions-row-icon {
-  border-color: transparent;
-  background: var(--brand-indigo);
-  color: var(--brand-paper);
-}
-.session-actions-row:disabled { cursor: default; opacity: 0.42; }
-.session-actions-row:disabled:hover { background: transparent; }
-
-.session-actions-row-icon {
-  display: grid;
-  place-items: center;
-  width: 28px;
-  height: 28px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: rgba(var(--overlay-rgb), 0.035);
-  color: color-mix(in srgb, var(--accent2) 38%, var(--text-secondary));
-}
-
-.session-actions-row-icon .lucide { width: 15px; height: 15px; }
-.session-actions-row-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
-.session-actions-row-copy strong { font-size: 12px; font-weight: 750; }
-.session-actions-row-copy > span { color: var(--text-muted); font-size: 11px; line-height: 1.35; }
-.session-actions-row-chevron { color: var(--text-muted); }
-.session-actions-row-chevron .lucide { width: 13px; height: 13px; }
+.composer-session-action.hidden { display: none; }
+.composer-session-action:disabled { cursor: default; opacity: 0.32; }
+.composer-session-action .lucide { width: 20px; height: 20px; }
 
 .handoff-modal { width: min(420px, calc(100vw - 32px)); }
 .handoff-modal-desc { margin: -10px 0 14px; color: var(--text-dimmer); font-size: 12px; line-height: 1.45; }

package/lib/public/css/sidebar.css

@@ -926,6 +926,109 @@
   transition: opacity 0.15s;
 }
 
+.session-driver-hierarchy {
+  position: relative;
+}
+
+.session-driver-header {
+  display: flex;
+  align-items: center;
+}
+
+.session-driver-header > .session-item {
+  min-width: 0;
+  flex: 1;
+  padding-left: 0;
+}
+
+.session-driver-toggle {
+  width: 18px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--text-dimmer);
+  background: transparent;
+  cursor: pointer;
+}
+
+.session-driver-toggle:hover,
+.session-driver-toggle:focus-visible,
+.session-orphan-toggle:hover,
+.session-orphan-toggle:focus-visible {
+  color: var(--text);
+  background: rgba(var(--overlay-rgb), 0.05);
+  outline: none;
+}
+
+.session-driver-toggle .lucide,
+.session-orphan-toggle .lucide {
+  width: 13px;
+  height: 13px;
+  transition: transform 0.15s ease;
+}
+
+.session-driver-toggle[aria-expanded="true"] .lucide,
+.session-orphan-toggle[aria-expanded="true"] .lucide {
+  transform: rotate(90deg);
+}
+
+.session-worker-children {
+  margin-left: 17px;
+  padding-left: 8px;
+  border-left: 1px solid color-mix(in srgb, var(--text-dimmer) 22%, transparent);
+}
+
+.session-worker-item {
+  height: 33px;
+  border-radius: 7px;
+}
+
+.session-worker-generation,
+.session-worker-count {
+  flex-shrink: 0;
+  padding: 1px 5px;
+  border-radius: 999px;
+  color: var(--text-dimmer);
+  background: rgba(var(--overlay-rgb), 0.04);
+  font-size: 9px;
+  font-weight: 650;
+  letter-spacing: 0.02em;
+}
+
+.session-worker-generation.current {
+  color: var(--success);
+  background: color-mix(in srgb, var(--success) 10%, transparent);
+}
+
+.session-orphan-toggle {
+  width: 100%;
+  height: 32px;
+  padding: 0 9px 0 4px;
+  border: 0;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--text-dimmer);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+
+.session-orphan-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+}
+
 .split-group-text {
   display: flex;
   align-items: center;