openclacky 1.5.21 → 1.5.22

data/lib/clacky/web/app.css

@@ -466,6 +466,18 @@ input[type="checkbox"] { accent-color: var(--color-accent-primary); }
 
 
 
+.theme-switching *,
+.theme-switching *::before,
+.theme-switching *::after {
+  transition: none !important;
+}
+
+::view-transition-group(root),
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 600ms;
+}
+
 body {
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   background: var(--color-bg-primary);
@@ -1816,6 +1828,14 @@ body {
   -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1rem), transparent);
   mask-image: linear-gradient(to right, #000 calc(100% - 1rem), transparent);
 }
+/* A sliding title needs a fade on its leading edge too, or the glyphs are
+   guillotined at the viewport once they travel left. The class is added by JS
+   only after the slide's 0.3s delay, so the first glyph is not dimmed while the
+   text is still standing; a CSS-only swap would also linger on the way back. */
+.session-item.session-name-leading-fade:not(.group-item) .session-name .session-name__text {
+  -webkit-mask-image: linear-gradient(to right, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
+  mask-image: linear-gradient(to right, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
+}
 .session-name__content {
   display: inline-block;
   min-width: max-content;
@@ -2352,8 +2372,10 @@ body {
   display: flex;
   flex-direction: column;
   padding: 1.75rem 2.25rem;
-  gap: 1.25rem;
 }
+/* Spacing is per block rather than one flex gap: the tabs belong to their list
+   more than to the header above them. */
+#task-detail-body > .task-page-header { margin-bottom: 1.25rem; }
 
 /* ── Task Page Header ───────────────────────────────────────────────────── */
 .task-page-header {
@@ -2466,8 +2488,8 @@ body {
   transition: color .15s, background .15s;
 }
 .page-tab:hover:not(.active) {
-  background: var(--color-bg-hover);
-  color: var(--color-text-primary);
+  background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
+  color: var(--color-accent-primary);
 }
 .page-tab.active { color: var(--color-accent-primary); }
 .page-tab.active::after {
@@ -2517,16 +2539,15 @@ body {
 .tasks-search:focus { border-color: var(--color-accent-primary); }
 .tasks-search::placeholder { color: var(--color-text-tertiary); }
 
-/* ── Task rows ───────────────────────────────────────────────────────────── */
+/* ── Task rows (run history) ─────────────────────────────────────────────── */
 .task-section-label {
   display: flex;
   align-items: center;
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--color-text-tertiary);
-  padding: 1.5rem 0.25rem 0.5rem;
+  padding: 1rem 0.25rem 0.5rem;
 }
-.task-section-label:first-child { padding-top: 0.375rem; }
 .cron-row {
   border-radius: 10px;
   background: var(--color-bg-secondary);
@@ -2557,32 +2578,7 @@ body {
   font-weight: 500;
   color: var(--color-text-primary);
 }
-.cron-row-paused .cron-row-name,
-.cron-row-paused .cron-row-cron { color: var(--color-text-tertiary); }
-.cron-row-paused .cron-row-preview { color: var(--color-text-muted); }
-.cron-row-preview {
-  flex: 0 1 auto;
-  max-width: 28rem;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--color-text-tertiary);
-}
-.cron-row-cron {
-  flex-shrink: 0;
-  white-space: nowrap;
-  color: var(--color-text-secondary);
-}
-.cron-row-cron-manual { color: var(--color-text-tertiary); }
 .cron-row-spacer { flex: 1; }
-.task-section-empty {
-  padding: 0.75rem 0.875rem;
-  border: 1px dashed var(--color-border-primary);
-  border-radius: 8px;
-  font-size: 0.8125rem;
-  color: var(--color-text-tertiary);
-}
 .cron-row-end {
   position: relative;
   display: flex;
@@ -2634,21 +2630,167 @@ body {
   background: color-mix(in srgb, var(--color-bg-hover) 92%, var(--color-text-primary));
   color: var(--color-text-secondary);
 }
-.cron-row-detail { padding: 0 0.625rem 0.75rem; }
-.task-card-detail-content {
-  padding: 0.75rem 1rem;
-  font-size: 0.8125rem;
+
+/* ── Task filter bar ────────────────────────────────────────────────────── */
+/* Visuals come from the shared .segmented-control block; only the placement
+   inside the scrolling list is task-specific. */
+#task-list-table > .segmented-control {
+  align-self: flex-start;
+  flex-shrink: 0;
+  margin: 0.95rem 0 0.75rem;
+}
+
+/* ── Task cards ──────────────────────────────────────────────────────────── */
+.task-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
+  align-items: start;
+  gap: 0.75rem;
+  padding-bottom: 0.5rem;
+}
+.task-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-height: 8.75rem;
+  padding: 1.125rem 1.25rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-lg);
+  background: var(--color-bg-card);
+  cursor: pointer;
+  transition: border-color .15s, box-shadow .15s, background .15s;
+}
+/* Hover is a nudge, not a state change: full --color-bg-hover reads as pressed.
+   Mix it down toward the card's resting fill. */
+.task-card:hover {
+  background: color-mix(in srgb, var(--color-bg-hover) 55%, var(--color-bg-card));
+  border-color: var(--color-border-secondary);
+}
+/* Paused cards recede: shell-toned fill, muted text. */
+.task-card.is-paused {
+  background: var(--color-bg-primary);
+  border-color: var(--color-border-secondary);
+}
+.task-card.is-paused:hover,
+.task-card.is-paused.is-menu-open {
+  background: color-mix(in srgb, var(--color-bg-hover) 55%, var(--color-bg-primary));
+}
+.task-card-head {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 1.5rem;
+}
+.task-card-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.task-card.is-paused .task-card-title { color: var(--color-text-tertiary); }
+/* Actions sit in the header row, right of the title, and stay visible so the
+   card is operable without a hover state (touch, keyboard, dark screens). */
+.task-card-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+/* Hover-revealed: the row keeps its space (opacity, not display) so the title
+   never reflows as the pointer enters. Touch devices show it outright. */
+.task-card-tools {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .15s;
+}
+.task-card:hover .task-card-tools,
+.task-card:focus-within .task-card-tools,
+.task-card.is-menu-open .task-card-tools {
+  opacity: 1;
+  pointer-events: auto;
+}
+@media (hover: none) {
+  .task-card-tools { opacity: 1; pointer-events: auto; }
+}
+.task-card-toggle { flex-shrink: 0; }
+.task-card-tool {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.625rem;
+  height: 1.625rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
   color: var(--color-text-secondary);
-  line-height: 1.65;
+  cursor: pointer;
+  transition: background .15s, color .15s;
+}
+.task-card.is-paused .task-card-tool { color: var(--color-text-tertiary); }
+.task-card-tool:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+.task-card-desc {
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: 1.7;
+  color: var(--color-text-tertiary);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
   word-break: break-word;
-  max-height: 20rem;
+}
+.task-card.is-paused .task-card-desc { color: var(--color-text-muted); }
+.task-card-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-top: auto;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--color-border-secondary);
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--color-text-tertiary);
+}
+.task-card-sched {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3125rem;
+  min-width: 0;
+}
+.task-card-clock { flex-shrink: 0; opacity: 0.75; }
+.task-card-sched-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.task-card-next { flex-shrink: 0; white-space: nowrap; }
+.task-card.is-paused .task-card-next { color: var(--color-text-muted); }
+/* ── Task detail modal (reuses shared .modal-box / .modal-body) ──────────── */
+.task-detail-modal {
+  display: flex;
+  flex-direction: column;
+  max-height: min(80vh, 46rem);
+}
+.task-detail-modal .modal-body {
+  flex: 1;
+  min-height: 0;
   overflow-y: auto;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 6px;
 }
-.task-card-detail-content > :first-child { margin-top: 0; }
-.task-card-detail-content > :last-child  { margin-bottom: 0; }
 
 /* ── Run history ─────────────────────────────────────────────────────────── */
 .task-run-row .cron-row-main { cursor: default; }
@@ -2969,10 +3111,9 @@ body {
   color: var(--color-accent-primary);
   background: var(--color-accent-soft);
 }
-.new-session-composer-btn > span {
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1;
+.new-session-composer-btn svg {
+  width: 1.125rem;
+  height: 1.125rem;
 }
 .new-session-textarea {
   flex: 1;
@@ -3140,6 +3281,10 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+/* `hidden` alone loses to the inline-flex above, and hiding must not leave a gap. */
+.ns-ctx-chip[hidden] {
+  display: none;
+}
 .ns-ctx-chip:hover {
   color: var(--color-text-primary);
   background: var(--color-bg-hover);
@@ -3158,6 +3303,10 @@ body {
   flex-shrink: 0;
   opacity: 0.7;
 }
+/* Vendor badges bring their own colors, so they skip the 0.7 icon opacity. */
+.ns-ctx-chip-icon--badge {
+  opacity: 1;
+}
 .ns-ctx-chip-label {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3225,6 +3374,193 @@ body {
   color: var(--color-text-tertiary);
 }
 
+/* Branch picker — search pinned on top, list scrolls, footer pinned below.
+   Drops the popover's own padding/scroll so the three zones stay put while
+   the branch list is long. */
+.ns-ctx-popover.ns-branch-pop {
+  padding: 0;
+  min-width: 15rem;
+  max-width: 19rem;
+  max-height: 20rem;
+  overflow: hidden;
+}
+.ns-branch-search {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+  position: relative;
+  padding: 0.75rem 0.625rem 0.5rem;
+  color: var(--color-text-tertiary);
+}
+/* The divider is inset instead of full-bleed so it reads as part of the list
+   rather than as an extra border hugging the popover frame. The search row has
+   none: it sits right under the popover's own top edge. */
+.ns-branch-foot::before {
+  content: "";
+  position: absolute;
+  left: 0.5rem;
+  right: 0.5rem;
+  height: 1px;
+  background: var(--color-border-primary);
+}
+.ns-branch-search-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--color-text-primary);
+  font-size: 0.8125rem;
+  font-family: inherit;
+}
+.ns-branch-search-input::placeholder {
+  color: var(--color-text-tertiary);
+}
+.ns-branch-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex: 1;
+  min-height: 0;
+  padding: 0.25rem;
+  overflow-y: auto;
+}
+/* Long branch lists must scroll, not squeeze: flex children shrink by default,
+   which flattened every row to a few pixels once the list overflowed. */
+.ns-branch-list > * {
+  flex-shrink: 0;
+}
+.ns-branch-list.is-busy {
+  opacity: 0.55;
+  pointer-events: none;
+}
+.ns-branch-group {
+  padding: 0.375rem 0.625rem 0.1875rem;
+  font-size: 0.6875rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+.ns-branch-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4375rem 0.625rem;
+}
+.ns-branch-item-icon,
+.ns-branch-item-check {
+  display: flex;
+  flex-shrink: 0;
+}
+.ns-branch-item-icon {
+  opacity: 0.75;
+}
+.ns-branch-item-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+}
+.ns-branch-item.is-remote .ns-branch-item-label {
+  opacity: 0.75;
+}
+.ns-branch-foot {
+  position: relative;
+  flex-shrink: 0;
+  padding: 0.25rem;
+}
+.ns-branch-foot::before {
+  top: 0;
+}
+.ns-branch-create {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+}
+/* Create-branch modal */
+.ns-branch-field-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+.ns-branch-prefix-btn {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-accent-primary);
+  font-size: 0.75rem;
+  font-family: inherit;
+  cursor: pointer;
+}
+.ns-branch-prefix-btn:hover {
+  text-decoration: underline;
+}
+.ns-branch-prefix-btn:disabled {
+  color: var(--color-text-muted);
+  cursor: default;
+  text-decoration: none;
+}
+.ns-branch-name-row {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0 0.75rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-input);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+.ns-branch-name-row:hover {
+  border-color: var(--color-border-strong);
+}
+.ns-branch-name-row:focus-within {
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
+}
+.ns-branch-name-row.is-invalid {
+  border-color: var(--color-error);
+}
+.ns-branch-name-row .ns-branch-name-input {
+  flex: 1;
+  min-width: 0;
+  padding: 0.5625rem 0;
+  border: none;
+  background: transparent;
+  color: var(--color-text-primary);
+  font-size: 0.8125rem;
+  font-family: inherit;
+  outline: none;
+  box-shadow: none;
+}
+.ns-branch-name-row .ns-branch-name-input::placeholder {
+  color: var(--color-text-muted);
+}
+.ns-branch-prefix-chip {
+  flex-shrink: 0;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  background: var(--color-bg-hover);
+  color: var(--color-text-tertiary);
+  font-size: 0.75rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  white-space: nowrap;
+}
+.ns-branch-prefix-chip[hidden] {
+  display: none;
+}
+.ns-branch-modal-error {
+  font-size: 0.75rem;
+  line-height: 1.5;
+  color: var(--color-error);
+  word-break: break-word;
+}
+.ns-branch-modal-error[hidden] {
+  display: none;
+}
+
 /* Dir popover layout */
 
 .new-session-advanced {
@@ -3411,6 +3747,16 @@ body {
 }
 #chat-panel.aside-fullscreen .session-aside-resize { display: none; }
 
+/* Too narrow to split: the aside crossed the chat column's floor, so it takes
+   the workspace and the resize handle moves inside the window edge to drag
+   the split back. */
+#chat-panel.chat-collapsed #chat-main { display: none; }
+#chat-panel.chat-collapsed #session-aside {
+  width: 100%;
+  border-left: none;
+}
+#chat-panel.chat-collapsed .session-aside-resize { left: 0; }
+
 .session-aside-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
 
 /* Tab bar (rendered by Clacky.ext). Neutral edge fades reveal when more tabs
@@ -3661,6 +4007,41 @@ body {
 }
 .wt-error { color: var(--color-error); }
 
+/* A working dir can vanish under a session (deleted clone, renamed folder).
+   Spell out the cause and offer the picker instead of a bare "load failed". */
+.wt-error-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  margin: 0.5rem 0.375rem;
+  padding: 0.75rem;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-tertiary);
+}
+.wt-error-card-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+.wt-error-card-desc {
+  font-size: 0.6875rem;
+  line-height: 1.5;
+  color: var(--color-text-secondary);
+}
+.wt-error-card-path {
+  padding: 0.25rem 0.375rem;
+  border-radius: var(--radius-xs);
+  background: var(--color-bg-secondary);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  color: var(--color-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.wt-error-card-action { align-self: flex-start; }
+
 /* ── Workspace viewer (file tree + tabbed preview, inside the Files tab) ── */
 .wv-root { flex: 1; min-height: 0; display: flex; }
 .wv-tree-pane {
@@ -5275,6 +5656,12 @@ body {
   transition-delay: 0.3s;
   transition-timing-function: linear;
 }
+/* Same leading fade as the session rows: without it the sliding text is cut
+   flat at the left edge. Added by JS after the slide's 0.3s delay. */
+.todo-item.todo-text-leading-fade .todo-text {
+  -webkit-mask-image: linear-gradient(to right, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
+  mask-image: linear-gradient(to right, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
+}
 
 @media (prefers-reduced-motion: reduce) {
   .todo-trigger,
@@ -5646,6 +6033,8 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
+  touch-action: none;
   cursor: zoom-out;
   animation: lb-fade-in 0.15s ease;
 }
@@ -5654,13 +6043,19 @@ body {
   to   { opacity: 1; }
 }
 .img-lightbox img {
-  max-width: 90vw;
-  max-height: 90vh;
+  flex: none;
+  max-width: none;
+  max-height: none;
   border-radius: 8px;
   object-fit: contain;
+  transform-origin: center center;
+  will-change: transform;
   box-shadow: 0 8px 40px rgba(0,0,0,0.6);
-  cursor: default;
+  cursor: grab;
+  user-select: none;
+  -webkit-user-drag: none;
 }
+.img-lightbox.is-panning img { cursor: grabbing; }
 .img-lightbox-close {
   position: absolute;
   top: 1rem;
@@ -5671,8 +6066,53 @@ body {
   cursor: pointer;
   opacity: 0.8;
   user-select: none;
+  z-index: 1;
 }
 .img-lightbox-close:hover { opacity: 1; }
+.img-lightbox-toolbar {
+  position: absolute;
+  left: 50%;
+  bottom: 1rem;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.25rem;
+  border: 1px solid rgba(255,255,255,0.18);
+  border-radius: 9px;
+  background: rgba(24,24,27,0.78);
+  color: #fff;
+  transform: translateX(-50%);
+  backdrop-filter: blur(8px);
+}
+.img-lightbox-zoom-btn {
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font-size: 1rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.img-lightbox-zoom-btn:hover { background: rgba(255,255,255,0.14); }
+.img-lightbox-zoom-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+  background: transparent;
+}
+.img-lightbox-zoom-level {
+  min-width: 2.75rem;
+  text-align: center;
+  color: rgba(255,255,255,0.82);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+}
 
 .msg-pdf-badge {
   display: inline-flex;
@@ -5687,12 +6127,27 @@ body {
   min-width: 6.25rem;
   vertical-align: middle;
 }
+.msg-file-open {
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.msg-file-open:hover {
+  background: var(--color-bg-hover);
+  border-color: var(--color-border-secondary);
+}
+.msg-file-open:focus-visible {
+  outline: 2px solid var(--color-accent-primary);
+  outline-offset: 2px;
+}
 .msg-pdf-badge-icon {
   display: flex;
   align-items: center;
   color: var(--color-text-secondary);
   flex-shrink: 0;
 }
+.msg-pdf-badge-icon svg { width: 20px; height: 20px; }
 .msg-pdf-badge-info {
   display: flex;
   flex-direction: column;
@@ -6620,7 +7075,7 @@ body {
   font-weight: 700;
   letter-spacing: 0.02em;
   line-height: 1;
-  color: #fff;
+  color: var(--vendor-ink, #fff);
   background: var(--vendor-color, #7A8B99);
   border: 1px solid rgba(127, 127, 127, 0.25);
   user-select: none;
@@ -6794,8 +7249,9 @@ body {
   display: none;
 }
 
-/* Page-level drop target for session references and file attachments. */
-#chat-panel.drag-over,
+/* Drop target for session references and file attachments. Scoped to the
+   chat column so the session aside never flashes a drop outline. */
+#chat-main.drag-over,
 #welcome.drag-over {
   outline: 2px dashed var(--color-accent-primary);
   outline-offset: -5px;
@@ -6861,12 +7317,42 @@ body {
   min-width: 7.5rem;
   box-sizing: border-box;
 }
+.pdf-preview-item--clickable {
+  padding-left: 0;
+}
+.pdf-preview-item--clickable:hover {
+  background: var(--color-bg-hover);
+}
+.pdf-preview-open {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  padding: 0 0 0 0.625rem;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.pdf-preview-open:hover {
+  background: transparent;
+}
+.pdf-preview-open:focus-visible {
+  outline: 2px solid var(--color-accent-primary);
+  outline-offset: -2px;
+}
 .pdf-preview-icon {
   display: flex;
   align-items: center;
   color: var(--color-text-secondary);
   flex-shrink: 0;
 }
+.pdf-preview-icon svg { width: 24px; height: 24px; }
 .pdf-preview-info {
   display: flex;
   flex-direction: column;
@@ -6902,6 +7388,7 @@ body {
   text-align: center;
   cursor: pointer;
   padding: 0;
+  z-index: 1;
 }
 .pdf-preview-remove:hover { background: var(--color-error); }
 
@@ -7197,12 +7684,11 @@ body {
   display: grid;
   place-items: center;
   border-radius: 8px;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
   transition: background .12s, color .12s;
 }
-#btn-slash span {
-  font-size: 0.875rem;
-  font-weight: 400;
+#btn-slash svg {
+  width: 1.125rem;
+  height: 1.125rem;
 }
 #btn-slash:hover {
   color: var(--color-text-primary);
@@ -7761,9 +8247,9 @@ body {
   transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
 .btn-backup-action:hover:not(:disabled) {
-  background: var(--color-bg-hover);
-  border-color: var(--color-text-muted);
-  color: var(--color-text-primary);
+  background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
+  border-color: var(--color-accent-primary);
+  color: var(--color-accent-primary);
 }
 .btn-backup-action:disabled {
   opacity: 0.5;
@@ -8145,7 +8631,7 @@ body {
   transition: border-color 0.15s ease;
 }
 .custom-select-trigger:hover {
-  border-color: var(--color-text-muted);
+  border-color: var(--color-accent-primary);
 }
 /* Focus: same accent border as `.open` so users see "this is where to start"
    without the dropdown auto-expanding. Used by onboard step 2 and the
@@ -8225,10 +8711,10 @@ body {
   text-overflow: ellipsis;
 }
 .custom-select-option:hover {
-  background: var(--color-bg-hover);
+  background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
 }
 .custom-select-option.selected {
-  background: var(--color-bg-hover);
+  background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent);
   color: var(--color-accent-primary);
 }
 /* "Custom" entry lives in a fixed footer area outside the panel's own
@@ -8423,6 +8909,46 @@ body {
   gap: 0.375rem;
   min-height: 80px;
 }
+.model-card-grid-head {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+}
+.model-card-grid-head-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+.model-card-grid-head > .btn-card-grid-action {
+  align-self: flex-start;
+  flex-shrink: 0;
+}
+/* Neutral tile so brand color lives in the mark, not in a loud swatch. */
+.model-card-grid-head .sib-vendor-badge {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 10px;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  color: var(--vendor-tint, var(--color-text-primary));
+}
+.model-card-grid-head .sib-vendor-badge:not(.is-brand):not(:has(svg)) {
+  color: var(--color-text-tertiary);
+}
+.model-card-grid-head .sib-vendor-badge svg {
+  width: 1.375rem;
+  height: 1.375rem;
+}
+/* Some brand artwork (e.g. Kimi) has white shapes drawn for a dark tile. */
+.model-card-grid-head .sib-vendor-badge.is-brand:not(.is-light) {
+  background: var(--vendor-color);
+  border-color: transparent;
+}
 .model-card-grid-name-row {
   display: flex;
   align-items: center;
@@ -10802,7 +11328,7 @@ button:focus-visible { outline: 2px solid var(--color-accent-primary); outline-o
 .extension-row-name { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
 .extension-row-desc {
   font-size: 0.75rem;
-  color: var(--color-text-secondary);
+  color: var(--color-text-tertiary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -13987,17 +14513,10 @@ body.setup-mode {
 }
 
 .trash-tab-content {
-  flex: 1;
-  overflow-y: auto;
-  /* The list scrolls on its own so the toolbar above it stays put. Pulling the
-     box out into #trash-body's right padding leaves the cards where they are and
-     parks the scrollbar in that gutter instead of against the cards — the same
-     trick the tasks and skills lists use. */
-  margin-right: -2.25rem;
-  padding-right: 2.25rem;
-  /* #trash-body's section gap is meant for the stacked heading blocks above; the
-     toolbar and the list are one block, so halve it and let the strip sit exactly
-     one card-gap above the list instead of floating over a band of empty space. */
+  /* #trash-scroll's gap is meant for the stacked heading blocks above; the
+     toolbar and the list are one block, so halve it and let the strip sit
+     exactly one card-gap above the list instead of floating over a band of
+     empty space. */
   margin-top: -0.625rem;
 }
 
@@ -14102,9 +14621,9 @@ body.setup-mode {
 }
 .btn-trash-restore:hover:not(:disabled),
 .btn-trash-session-restore:hover:not(:disabled) {
-  background: var(--color-bg-hover, rgba(127,127,127,.08));
-  border-color: var(--color-text-muted);
-  color: var(--color-text-primary);
+  background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
+  border-color: var(--color-accent-primary);
+  color: var(--color-accent-primary);
 }
 .btn-trash-delete:hover:not(:disabled),
 .btn-trash-session-delete:hover:not(:disabled) {
@@ -14148,7 +14667,10 @@ body.setup-mode {
   border-radius: 6px;
 }
 .trash-session-hint {
-  margin: -0.25rem 0;
+  /* Only the bottom gap is tightened — the room under the pills comes from
+     #trash-scroll's padding, which the files tab needs just as much. A negative
+     top margin here would simply be clipped by the scroller. */
+  margin: 0 0 -0.25rem;
   font-size: 0.75rem;
   color: var(--color-text-secondary);
 }
@@ -14181,9 +14703,9 @@ body.setup-mode {
 }
 .trash-filter-project-wrap:hover,
 .btn-trash-action:hover:not(:disabled) {
-  background: var(--color-bg-hover);
-  border-color: var(--color-text-muted);
-  color: var(--color-text-primary);
+  background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
+  border-color: var(--color-accent-primary);
+  color: var(--color-accent-primary);
 }
 /* Project filter dropdown */
 .trash-filter-project-wrap {
@@ -14317,7 +14839,7 @@ body.setup-mode {
 #archive-body {
   flex: 1;
   overflow-y: auto;
-  padding: 1.75rem 2.25rem;
+  padding: 1.25rem 2.25rem;
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
@@ -14411,9 +14933,9 @@ body.setup-mode {
   transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
 .btn-archive-unarchive:hover:not(:disabled) {
-  background: var(--color-bg-hover);
-  border-color: var(--color-text-muted);
-  color: var(--color-text-primary);
+  background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
+  border-color: var(--color-accent-primary);
+  color: var(--color-accent-primary);
 }
 .btn-archive-delete {
   width: 1.75rem;
@@ -14483,7 +15005,7 @@ body.setup-mode {
 #backup-body {
   flex: 1;
   overflow-y: auto;
-  padding: 1.75rem 2.25rem;
+  padding: 1.25rem 2.25rem;
 }
 #backup-content {
   max-width: 920px;
@@ -14501,8 +15023,24 @@ body.setup-mode {
 }
 #trash-body {
   flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 1.25rem 2.25rem;
+  display: flex;
+  flex-direction: column;
+}
+/* The hint, the toolbar and the list share one viewport, so the tab strip above
+   stays put while the rest of the page moves. Pulling the box out into
+   #trash-body's right padding parks the scrollbar in that gutter instead of
+   against the cards — the same trick the tasks and skills lists use. */
+#trash-scroll {
+  flex: 1;
+  min-height: 0;
   overflow-y: auto;
-  padding: 1.75rem 2.25rem;
+  margin-right: -2.25rem;
+  /* The top padding is the breathing room under the pills; it lives here so
+     both tabs get it, including the files tab whose first row is the toolbar. */
+  padding: 0.5rem 2.25rem 0 0;
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
@@ -14570,6 +15108,15 @@ body.setup-mode {
   background: color-mix(in srgb, var(--color-text-primary) 2%, var(--color-bg-hover));
 }
 
+/* Count badge for filter buttons — sits inside the button so label and count
+   stay one hit area. */
+.segmented-control__count {
+  margin-left: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: var(--color-text-tertiary);
+}
+
 /* ═════════════════════════════════════════════════════════════════════════
  * BILLING PANEL
  * ═════════════════════════════════════════════════════════════════════════ */
@@ -14643,10 +15190,11 @@ body.setup-mode {
 }
 .billing-controls .segmented-control {
   flex: 0 0 auto;
+  padding: 4px;
 }
 .billing-controls .segmented-control,
 .billing-model-filter {
-  height: 2rem;
+  height: 2.25rem;
 }
 
 /* ── Disclaimer notice ──────────────────────────────────────────────── */
@@ -16588,6 +17136,10 @@ body.setup-mode {
     padding: 0px 12px 12px;
   }
 
+  #input-queue {
+    padding-inline: 12px;
+  }
+
   #skill-autocomplete {
     left: 12px;
     right: 12px;
@@ -16605,7 +17157,6 @@ body.setup-mode {
   }
   #btn-slash {
     padding: 0.25rem 0.375rem;
-    font-size: 0.875rem;
   }
 
   /* Textarea: prevent iOS auto-zoom (must be ≥1rem) */
@@ -16637,13 +17188,13 @@ body.setup-mode {
   }
   #task-detail-body {
     padding: 1rem 1rem 5rem;
-    gap: 0.75rem;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
     flex: 1;
     min-height: 0;
   }
+  #task-detail-body > .task-page-header { margin-bottom: 0.75rem; }
   /* btn-create-task: move below title instead of absolute top-right */
   .task-page-header {
     flex-direction: column;
@@ -16654,8 +17205,9 @@ body.setup-mode {
     align-self: flex-start;
     margin-top: 0.25rem;
   }
-  /* Task rows: drop the prompt preview and keep actions visible (no hover on touch) */
-  .cron-row-preview { display: none; }
+  /* Task cards: the toolbar already lives in the header row, so only the
+     touch target needs enlarging on narrow screens. */
+  .task-card-tool { width: 2rem; height: 2rem; }
   .cron-row-end { gap: 0.5rem; }
   .cron-row-actions { position: static; transform: none; opacity: 1; pointer-events: auto; }
   .cron-row:hover .cron-row-meta { opacity: 1; }
@@ -16821,7 +17373,7 @@ body.setup-mode {
   /* ── Billing / Trash / Archive / Backup pages ── */
   #billing-body { padding: 1rem 1rem 1rem; }
   #trash-body   { padding: 1rem 1rem 1rem; }
-  .trash-tab-content { margin-right: -1rem; padding-right: 1rem; }
+  #trash-scroll { margin-right: -1rem; padding-right: 1rem; }
   #archive-body { padding: 1rem 1rem 1rem; }
   #backup-body  { padding: 1rem 1rem 1rem; }
   #data-management-header { padding: 1rem 1rem 0; }
@@ -17261,8 +17813,9 @@ body.setup-mode {
   padding-left: 2.2rem;
 }
 
+/* Translucent so the drop-target frame and tint show through, like the session list. */
 .project-session-group .session-item.active {
-  background: var(--color-bg-hover);
+  background: color-mix(in srgb, var(--color-text-primary) 5%, transparent);
 }
 
 .project-session-group .session-item.active::before {
@@ -17748,9 +18301,10 @@ body.setup-mode {
 #input-behavior-menu [aria-checked="true"] .input-behavior-check { visibility: visible; }
 @media (max-width: 768px) { #input-behavior-menu button { min-height: 56px; } }
 
-/* Pending guidance: single-line previews and always-visible actions. */
+/* Pending guidance: single-line previews and always-visible actions.
+   Sits between the message stream and the session info bar. */
 #input-queue[hidden] { display: none; }
-#input-queue { max-height: 220px; overflow-y: auto; padding: 0 0 8px; }
+#input-queue { flex-shrink: 0; max-height: 220px; overflow-y: auto; padding: 6px 1.5rem 0; }
 .input-queue-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 10px; border: 1px solid var(--color-border-primary); border-radius: 10px; background: var(--color-bg-primary); }
 .input-queue-body { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
 .input-queue-status { flex-shrink: 0; white-space: nowrap; font-size: 11px; line-height: 1.5; color: var(--color-text-tertiary); }