@workerdeck/ui 0.17.0 → 0.18.0

package/src/components/terminal/tool-run.ts

@@ -117,14 +117,58 @@ const trimmed = (value: unknown): string | undefined =>
  * emptier than a plain tool row's.
  */
 export function taskLabel(task: ToolCallItem): string {
+  return `${task.name}(${taskIdentity(task)})`
+}
+
+/**
+ * The inner half of {@link taskLabel} — `Explore · find the auth check` — without
+ * the `Task(…)` wrapper.
+ *
+ * Split out for the sub-agent takeover's header, which names the agent it is
+ * showing and has no room (or reason) to repeat the tool's own name: the whole
+ * surface *is* that Task. Extracted rather than re-spelled so the header and the
+ * row it was opened from cannot drift, and so both keep matching protocol's
+ * `subagentLabel`, which reads the same two input fields for the sessions list.
+ */
+export function taskIdentity(task: ToolCallItem): string {
   const input = task.input as { description?: unknown; subagent_type?: unknown } | null
   const description = trimmed(input?.description)
   const agent = trimmed(input?.subagent_type)
-  const inner =
-    agent && description
-      ? `${agent} · ${clip(description)}`
-      : (agent ?? (description ? clip(description) : toolInputPreview(task.input)))
-  return `${task.name}(${inner})`
+  return agent && description
+    ? `${agent} · ${clip(description)}`
+    : (agent ?? (description ? clip(description) : toolInputPreview(task.input)))
+}
+
+/**
+ * **What this agent was actually asked** — the sub-agent's brief, or undefined
+ * when the engine did not give us one.
+ *
+ * Measured against a live session rather than assumed: the Agent SDK's call
+ * carries `{description, subagent_type, run_in_background, prompt}`, and
+ * `prompt` is the instruction.
+ *
+ * **Whether it also arrives in the stream depends on the agent.** A foreground
+ * `Task` forwards its brief as a real nested `user_message` (that is what
+ * `forwardSubagentText` buys and what the reducer stamps a `parentToolUseId`
+ * on), so `subagentItems` picks it up and the frame already has it. A
+ * **background** agent does not: measured on a session with eight of them,
+ * zero items carried a `parentToolUseId` on a `user` kind. Those runs are
+ * exactly the ones you open a takeover on — an agent working while you read
+ * something else — and their brief was nowhere at all.
+ *
+ * So this is the *fallback*, not the source: the callers splice it in only when
+ * the frame carries no brief of its own, or the same instruction would be drawn
+ * twice.
+ *
+ * `description` is deliberately not a fallback: it is the 3–5 word label the
+ * header already prints, and repeating it as a brief would claim we know the
+ * instruction when we do not. **Codex genuinely has none** — its `spawn_agent`
+ * message is an encrypted blob on the wire — so on that engine this is
+ * undefined and the row is not drawn, rather than drawn empty.
+ */
+export function taskBrief(task: ToolCallItem): string | undefined {
+  const input = task.input as { prompt?: unknown } | null
+  return trimmed(input?.prompt)
 }
 
 const callBusy = (call: ToolCallItem): boolean =>

package/src/index.ts

@@ -180,7 +180,24 @@ export {
 export { SessionStatusIcon } from './components/agent/SessionBrowser.tsx'
 // Lifted out of the VS Code sidebar once the dashboard grew a collapsed rail
 // that needs the same glyph — two copies of a trademark set is one too many.
-export { EngineIcon, engineMark } from './components/agent/EngineIcon.tsx'
+export {
+  EngineIcon,
+  engineMark,
+  vendorMarkClass,
+  vendorTextClass,
+} from './components/agent/EngineIcon.tsx'
+// Lifted out of the sidebar for the same reason: the work under a row is a
+// protocol fact, so every list annotates it with one component.
+export {
+  type Step,
+  StepRow,
+  StepToggle,
+  runningSteps,
+  sessionSteps,
+} from './components/agent/SessionSteps.tsx'
+// The sub-agent takeover's one line. Exported for hosts that draw their own
+// panel chrome; the panel raises it itself.
+export { SubagentStrip } from './components/agent/SubagentStrip.tsx'
 export { ProjectIcon } from './components/agent/ProjectIcon.tsx'
 export {
   SessionEmptyState,
@@ -188,6 +205,7 @@ export {
 } from './components/agent/SessionEmptyState.tsx'
 export { PromptTokenText } from './components/agent/PromptTokenText.tsx'
 export { STATUS_META } from './components/agent/status.ts'
+export { ContextRing } from './components/agent/ContextRing.tsx'
 
 // Utilities
 export { cn } from './lib/utils.ts'

package/src/lib/status.ts

@@ -1,4 +1,4 @@
-import type { ContextUsage, ModelOption, RateLimitInfo, SessionStatus } from '@workerdeck/protocol'
+import type { ModelOption, RateLimitInfo, SessionStatus } from '@workerdeck/protocol'
 
 /**
  * How a session's live readings become a status line — the pure half, so every
@@ -174,7 +174,20 @@ export function modelLabel(vitals: ModelReadings | undefined): string {
 }
 
 /** Context percentage as its meter severity — the reading and the colour come
- * from one place so a panel and a status bar never disagree. */
-export function contextSeverity(usage: ContextUsage | undefined): StatusSeverity {
+ * from one place so a panel and a status bar never disagree.
+ *
+ * Takes only the number it reads, so the compact `ContextReading` that rides
+ * the sessions list and the full `ContextUsage` on the event stream are coloured
+ * by one rule rather than two. */
+export function contextSeverity(usage: { percentage: number } | undefined): StatusSeverity {
   return meterSeverity(usage?.percentage)
 }
+
+/** {@link meterSeverity} as a text colour class. Here rather than beside each
+ * meter because the status bar, the context dialog and a sessions-list row all
+ * paint the same reading, and a fourth copy of the thresholds is a fourth
+ * chance for one surface to call 81% orange and another call it grey. */
+export function meterColorClass(pct: number | undefined): string {
+  const severity = meterSeverity(pct)
+  return severity === 'error' ? 'text-danger' : severity === 'warning' ? 'text-warning' : 'text-fg-3'
+}

package/src/styles/terminal.css

@@ -1032,6 +1032,16 @@
   pointer-events: none;
   z-index: 11;
 }
+/* The sub-agent's brief, collapsed: clipped on the same wrapped lines
+   `briefPx` counts, so the height the virtualizer reserved and the height the
+   row draws cannot disagree. The count itself comes from the component
+   (`BRIEF_LINES`), one number rather than one here and one there. */
+.term-brief-clip {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 .term-scrubber .term-scrub-ex {
   display: -webkit-box;
   -webkit-line-clamp: 4;

package/src/styles/theme.css

@@ -51,6 +51,37 @@
   --fg-4: #a1a1a1;
   --fg-disabled: #c9c9c9;
 
+  /* ---------- Vendor ----------
+   * The engine's own colour, worn by its mark and (where the brand allows) by
+   * the model name beside it in a sessions list. Nowhere else.
+   *
+   * This is the one place a brand colour is allowed in the product, and it earns
+   * it by doing a job nothing else on the row does: the list already spends blue
+   * on running, amber on waiting, red on failed and muted on idle, so none of
+   * those can also say *whose engine this is* — and the mark alone is a 12px
+   * silhouette.
+   *
+   * Two values per vendor, because that glyph has to hold against both grounds:
+   * the dark-ground value is lifted and the light-ground one darkened.
+   *
+   * **OpenAI's is monochrome, and that is their rule rather than our taste**:
+   * their guidelines forbid adding colour to the mark, so it is pure white on
+   * dark and a near-black on light — both sanctioned, and the only kind of pair
+   * legible on both grounds. A green was tried first and is wrong, however well
+   * it reads. Near-black rather than `#000` because pure black would sit *harder*
+   * than the session title above it, so the mark would out-weigh the name it is
+   * labelling.
+   *
+   * That makes the two vendors asymmetric, which is the honest outcome: coral is
+   * Anthropic's brand and monochrome is OpenAI's, so a rule that gave both an
+   * accent would misrepresent one of them. It also means OpenAI's token is at
+   * full contrast, which is why only the **mark** wears it — see
+   * `vendorTextClass` in `EngineIcon.tsx`.
+   *
+   * A third vendor is two declarations here and one map entry there. */
+  --vendor-claude: #b3573a;
+  --vendor-openai: #373737;
+
   /* ---------- Accent ----------
    * VS Code blue (`#0078d4`) — the product's primary. It is the *same* hue in
    * both themes rather than the inverse of the canvas: a primary that flips
@@ -122,6 +153,10 @@
   --fg-4: #6e6e6e;
   --fg-disabled: #454545;
 
+  /* ---------- Vendor ---------- (see the light block for the whole argument) */
+  --vendor-claude: #cc7c5e;
+  --vendor-openai: #ffffff;
+
   /* ---------- Accent ----------
    * The same blue as light. `--accent` stays `#0078d4` because it is a *fill*
    * carrying white text (4.6:1) — the brighter `#3794ff` would drop that to
@@ -275,6 +310,13 @@
   --color-info: var(--info);
   --color-info-bg: var(--info-bg);
 
+  /* Vendor colours as real utilities (`text-vendor-claude`), not hand-written
+     classes: `cn`'s tailwind-merge only knows to *replace* a colour it can parse,
+     and `EngineIcon` ships its own `text-fg-3` that the vendor class has to win
+     against rather than merely follow in source order. */
+  --color-vendor-claude: var(--vendor-claude);
+  --color-vendor-openai: var(--vendor-openai);
+
   /* Stock-name bridge → utilities (bg-primary / text-muted-foreground / ...). */
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);