@workerdeck/ui 0.20.0 → 0.22.0

package/src/styles/theme.css

@@ -30,14 +30,48 @@
   --bg-code: #f5f5f5;
   --bg-elevated: #ffffffcc;
 
-  /* A list row's hover and selected fills. **Alpha, not a flat colour**, because
-     a row sits on whatever its host paints — `bg-sidebar` in the dashboard,
-     `--vscode-sideBar-background` in the extension — and a flat value tuned for
-     one of those is invisible on the others. `--bg-surface-hover` was exactly
-     that mistake: on the dark sidebar (#131313) it lands on #141414, one step
-     of 255 away, so the hover state did not exist. */
-  --row-hover: rgb(0 0 0 / 0.05);
+  /* A list row's fills.
+
+     `--row-hover` is the **flat** value the design specifies (VS Code's
+     `list.hoverBackground`), not the alpha it used to be. The alpha existed to
+     survive an unknown host surface, and it bought that at the cost of a hover
+     that read differently on every one of them; the design draws one hover, so
+     this is one colour. The hazard the alpha was guarding against is real and
+     has a name — `--bg-surface-hover` on the dark sidebar landed one step of
+     255 from the sidebar itself, so the state did not exist — and the guard
+     against it now is that both flat values are picked against the sidebar
+     fills we actually ship (`--sidebar`), and that the extension repoints all
+     three at `--vscode-list-*` rather than inheriting them.
+
+     `--row-active` stays alpha on purpose: it is the *other three* sidebars'
+     selected fill, and those still wear the accent-bar shape `rowShapeClass`
+     draws, where the fill is a tint under a bar and not the selection itself.
+
+     `--row-selected` is new and is the session list's own: a filled card, the
+     shape the design gives selection there. Light is a tint carrying dark text;
+     dark is VS Code's `list.activeSelectionBackground` carrying light text.
+
+     `--row-selected-weak` is the **secondary** selection — "this card holds what
+     you are looking at, but the thing you are looking at is one row inside it".
+     It exists because a session card and its sub-agents are two selections at
+     two grains, and the blue can only mean one of them: when a sub-agent is
+     open, the blue belongs to that step and the card drops to this. It is VS
+     Code's `list.inactiveSelectionBackground`, which is the same idea one
+     surface over — selected, but not the thing with focus. Distinct from
+     `--row-hover` on purpose: a card that answered the pointer and a card
+     holding the open agent are different claims, and a list that painted them
+     the same colour would be lying about one of them. */
+  --row-hover: #e8e8e8;
   --row-active: rgb(0 0 0 / 0.08);
+  --row-selected: #cfe4f7;
+  --row-selected-weak: #e4e6f1;
+
+  /* A count badge that is NOT an alert. The unread badge wears `--accent`
+     because unread is a call to look; a plain count (how many sub-agents, how
+     many tasks) wears this, because a blue pill that means nothing urgent
+     spends the accent on noise. VS Code's `badge.background`. */
+  --badge: #c4c4c4;
+  --badge-fg: #333333;
 
   /* ---------- Borders ---------- */
   --border: #ebebeb;
@@ -117,6 +151,10 @@
   --shine: #dcdcdc;
   --frame-shadow: var(--shadow-xs);
 
+  /* The overview rail's bookmark magenta — the app palette has no magenta,
+     and every other colour on the rail is already spoken for. */
+  --wd-scrub-bookmark: #8b3a8b;
+
   /* ---------- aliases (bridge for the @theme utilities) ---------- */
   --surface: var(--bg-surface);
   --sidebar: #f4f4f4;
@@ -138,8 +176,17 @@
   --bg-code: #141414;
   --bg-elevated: #0a0a0acc;
 
-  --row-hover: rgb(255 255 255 / 0.06);
+  /* See the light block for the whole argument. These two are VS Code's own
+     `list.hoverBackground` / `list.activeSelectionBackground`, which is what the
+     design was drawn against. */
+  --row-hover: #2a2d2e;
   --row-active: rgb(255 255 255 / 0.10);
+  --row-selected: #04395e;
+  --row-selected-weak: #37373d;
+
+  /* See the light block. */
+  --badge: #616161;
+  --badge-fg: #cccccc;
 
   /* ---------- Borders ---------- */
   --border: #1f1f1f;
@@ -191,6 +238,9 @@
     0 4px 24px rgba(0, 0, 0, 0.55),
     0 2px 6px rgba(0, 0, 0, 0.45);
 
+  /* See the light block — lifted for the dark ground. */
+  --wd-scrub-bookmark: #c586c0;
+
   /* ---------- aliases ---------- */
   --surface: var(--bg-surface);
   --sidebar: #131313;
@@ -224,6 +274,12 @@
   --motion-base: 150ms;
   --motion-slow: 220ms;
 
+  /* ---------- Geometry (embedder-overridable layout knobs) ---------- */
+  --wd-status-bar-height: 38px;
+  --wd-composer-padding: 12px;
+  --wd-transcript-row-gap: 0px;
+  --wd-transcript-max-width: 48rem;
+
   /* Stock-name bridge → raw custom properties (shadcn idiom compatibility). */
   --primary: var(--accent);
   --primary-foreground: var(--accent-fg);
@@ -291,6 +347,10 @@
   --color-surface-hover: var(--bg-surface-hover);
   --color-row-hover: var(--row-hover);
   --color-row-active: var(--row-active);
+  --color-row-selected: var(--row-selected);
+  --color-row-selected-weak: var(--row-selected-weak);
+  --color-badge: var(--badge);
+  --color-badge-fg: var(--badge-fg);
   /* Named code-bg (not code) so it can't shadow the --text-code font-size token:
      with a --color-code defined, `text-code` would resolve to the color namespace
      and paint text in the code *background* color — invisible in both themes. */
@@ -358,6 +418,14 @@
   --text-label: 0.75rem;
   --text-label--line-height: 1rem;
   --text-label--letter-spacing: 0.02em;
+  /* 11px. The step rows under a session card, and nothing else yet — a size
+     below `label` exists so a list *inside* a row can be visibly subordinate to
+     it without dropping to a weight nobody can read. Tracking goes NEGATIVE
+     here where `label` goes positive: `label` is a small-caps-ish UI word that
+     wants air, this is a sentence-shaped run that wants to hold together. */
+  --text-micro: 0.6875rem;
+  --text-micro--line-height: 0.875rem;
+  --text-micro--letter-spacing: -0.005em;
   --text-code: 0.84375rem;
   --text-code--line-height: 1.375rem;
 
@@ -556,3 +624,150 @@
     transition: none !important;
   }
 }
+
+/* ── Sticky prompt (cards variant) ─────────────────────────────────────────
+ *
+ * The same lane/head/sentinel mechanism as the terminal theme's pinned prompt
+ * (terminal.css scopes its rules under `[data-terminal]`; these key on the
+ * lane's own `data-sticky-lane='cards'` value) — but the head's CONTENT is
+ * different in kind, and that is the whole design. The terminal head is the
+ * row rendered again, clipped to one line — exact, because that theme is a
+ * monospace grid. A proportional message card clipped by height is a sliced
+ * bubble, so the cards head never renders the Message component at all:
+ * `StickyPromptLane` (Transcript.tsx) hands it the prompt as one run of plain
+ * text, and these rules only draw a bar. Nothing to flatten, nothing to
+ * un-style, nothing to `!important` over.
+ *
+ * Alignment is by construction, not restatement: the lane sits inside
+ * ConversationContent's centred, padded column (`max-w` + `mx-auto` + `px-4`)
+ * and spans it edge to edge, so the bar's text starts on the same left edge
+ * as the response paragraphs and the ellipsis lands on the column's right
+ * edge — no max-width or inline padding repeated here. The bar carries no
+ * gap class either (the measured row keeps it): it is not an overlay of the
+ * row's first line, so it has no in-flow y to match, and the 1st prompt (no
+ * gap) and every later one (pt-4/pt-2) share these rules unchanged. */
+[data-slot='transcript-rows'] > [data-sticky-lane='cards'] {
+  z-index: 3;
+  pointer-events: none;
+}
+
+/* The head's own strip: the full lane, out of flow — see terminal.css for why
+   sticky confinement wants the border box, not a cancelled margin box. */
+[data-sticky-lane='cards'] > [data-sticky-headlane] {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+/* The bar: ~28px, one line centred by its own line-height, truncated at the
+   column's right edge, on a frosted ground so the rows passing beneath read
+   as beneath. Hidden until actually stuck (`data-stuck`, set by the lane's
+   sentinel observer): unstuck it sits at the lane's top, over the real
+   bubble. */
+[data-sticky-lane='cards'] > [data-sticky-headlane] > [data-sticky-head] {
+  position: sticky;
+  top: 0;
+  height: 1.75rem;
+  line-height: 1.75rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: var(--text-body-sm);
+  color: var(--fg-2);
+  background: color-mix(in srgb, var(--bg) 88%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border);
+  user-select: none;
+  visibility: hidden;
+}
+
+[data-sticky-lane='cards'] > [data-sticky-headlane] > [data-sticky-head][data-stuck] {
+  visibility: visible;
+}
+
+/* ── Overview scrubber (cards variant) ──────────────────────────────────────
+ *
+ * The proportional rail (`components/agent/Scrubber.tsx`): same geometry as the
+ * terminal rail — 12px, two 6px lanes plus full width — and the same palette
+ * mapped onto the app tokens. It is an annotation rail, never a scrollbar: the
+ * container takes no pointer events, so the native scrollbar keeps working
+ * straight through the paint. */
+.wd-scrubber {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 12px;
+  z-index: 10;
+  pointer-events: none;
+}
+.wd-scrubber .wd-scrub-mark {
+  position: absolute;
+  min-height: 2px;
+}
+.wd-scrubber[data-interactive] .wd-scrub-mark {
+  pointer-events: auto;
+  cursor: pointer;
+}
+.wd-scrubber[data-interactive] .wd-scrub-mark:hover {
+  outline: 1px solid color-mix(in srgb, var(--fg-1) 40%, transparent);
+}
+.wd-scrubber .wd-scrub-mark[data-lane='l'] { left: 0; width: 6px; }
+.wd-scrubber .wd-scrub-mark[data-lane='r'] { left: 6px; width: 6px; }
+.wd-scrubber .wd-scrub-mark[data-lane='f'] { left: 0; width: 12px; }
+.wd-scrubber .wd-scrub-mark[data-kind='user'] { background: var(--accent); }
+.wd-scrubber .wd-scrub-mark[data-kind='subagent'] { background: var(--success); }
+.wd-scrubber .wd-scrub-mark[data-kind='turn'] { background: var(--fg-3); }
+.wd-scrubber .wd-scrub-mark[data-kind='turnFailed'] { background: var(--danger); }
+.wd-scrubber .wd-scrub-mark[data-kind='error'] { background: var(--danger); }
+.wd-scrubber .wd-scrub-mark[data-kind='toolFailed'] {
+  background: color-mix(in srgb, var(--danger) 55%, transparent);
+}
+.wd-scrubber .wd-scrub-mark[data-kind='bookmark'] { background: var(--wd-scrub-bookmark); }
+.wd-scrubber .wd-scrub-mark[data-kind='approval'] {
+  background: var(--warning);
+  animation: wd-scrub-pulse 1.2s infinite;
+}
+.wd-scrubber .wd-scrub-mark[data-kind='recap'] {
+  background: repeating-linear-gradient(to right, var(--fg-4) 0 3px, transparent 3px 6px)
+    left center / 100% 1px no-repeat;
+}
+@keyframes wd-scrub-pulse {
+  50% { opacity: 0.3; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .wd-scrubber .wd-scrub-mark[data-kind='approval'] {
+    animation: none;
+  }
+}
+
+.wd-scrubber .wd-scrub-peek {
+  position: absolute;
+  right: calc(100% + 6px);
+  width: 320px;
+  max-width: 60vw;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-md, 6px);
+  background: var(--bg);
+  box-shadow: var(--shadow-md);
+  font-family: var(--cw-font-sans);
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--fg-1);
+  pointer-events: none;
+  z-index: 11;
+}
+.wd-scrubber .wd-scrub-peek [data-tone='muted'] { color: var(--fg-3); }
+.wd-scrubber .wd-scrub-peek [data-tone='danger'] { color: var(--danger); }
+.wd-scrubber .wd-scrub-ex {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}