@workerdeck/ui 0.11.0 → 0.13.0

package/src/format.ts

@@ -8,3 +8,4 @@
  * costs nothing and keeps one truth for what "45.2k" and "2h 10m" mean.
  */
 export * from './lib/format.ts'
+export * from './lib/status.ts'

package/src/index.ts

@@ -83,8 +83,11 @@ export {
 } from './components/agent/Conversation.tsx'
 export { Message, MessageContent, type MessageProps } from './components/agent/Message.tsx'
 export {
+  TranscriptDensityProvider,
   TranscriptVariantProvider,
+  useTranscriptDensity,
   useTranscriptVariant,
+  type TranscriptDensity,
   type TranscriptVariant,
 } from './components/agent/transcript-variant.tsx'
 export { Response, type ResponseProps } from './components/agent/Response.tsx'
@@ -133,6 +136,15 @@ export {
   type SessionListItemProps,
   type SessionListProps,
 } from './components/agent/SessionList.tsx'
+export {
+  SessionBrowser,
+  rowShapeClass,
+  type SessionBrowserProps,
+} from './components/agent/SessionBrowser.tsx'
+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 } from './components/agent/EngineIcon.tsx'
 export {
   SessionEmptyState,
   type SessionEmptyStateProps,

package/src/lib/status.ts

@@ -0,0 +1,124 @@
+import type { ContextUsage, ModelOption, RateLimitInfo, SessionStatus } from '@workerdeck/protocol'
+
+/**
+ * How a session's live readings become a status line — the pure half, so every
+ * host spells "Needs approval", "80% is a warning" and "which window is the
+ * binding one" the same way.
+ *
+ * Structurally typed against `SessionVitals` rather than importing it: this file
+ * ships from the React-free `@workerdeck/ui/format` entry, and a host drawing
+ * the readings outside React (the VS Code extension host in the window status
+ * bar) must not pull a component graph in to do it. A real `SessionVitals`
+ * satisfies every shape here.
+ */
+export type StatusSeverity = 'none' | 'warning' | 'error'
+
+/** What a status slot shows, before any host's icon vocabulary gets involved.
+ * `icon` is a VS Code codicon name — the one host-shaped thing left, because the
+ * alternative is a second mapping table in the only consumer. */
+export type StatusPresentation = {
+  icon: string
+  label: string
+  severity: StatusSeverity
+}
+
+export type StatusReadings = {
+  status: SessionStatus
+  /** `@workerdeck/react`'s `ConnectionState`, structurally — the link state wins
+   * the slot, so it has to be part of the reading. */
+  connection?: 'live' | 'reconnecting' | 'offline'
+}
+
+const STATUS_META: Record<SessionStatus, StatusPresentation> = {
+  starting: { icon: 'loading~spin', label: 'Starting', severity: 'none' },
+  running: { icon: 'loading~spin', label: 'Running', severity: 'none' },
+  awaiting_approval: { icon: 'warning', label: 'Needs approval', severity: 'warning' },
+  idle: { icon: 'check', label: 'Idle', severity: 'none' },
+  parked: { icon: 'debug-pause', label: 'Parked', severity: 'none' },
+  failed: { icon: 'error', label: 'Failed', severity: 'error' },
+  closed: { icon: 'circle-slash', label: 'Closed', severity: 'none' },
+}
+
+/**
+ * The status slot, connection first. A session status held over a dead socket is
+ * the last thing we heard, not the current state — so a lost link takes the slot
+ * rather than letting "Running" imply a turn is still streaming.
+ */
+export function statusPresentation(vitals: StatusReadings | undefined): StatusPresentation {
+  if (!vitals) return { icon: 'hubot', label: 'Connecting…', severity: 'none' }
+  if (vitals.connection === 'offline') {
+    return { icon: 'debug-disconnect', label: 'Offline', severity: 'error' }
+  }
+  if (vitals.connection === 'reconnecting') {
+    return { icon: 'sync~spin', label: 'Reconnecting…', severity: 'warning' }
+  }
+  return STATUS_META[vitals.status] ?? { icon: 'hubot', label: vitals.status, severity: 'none' }
+}
+
+/** 0–100 → the colour a meter wears. One pair of thresholds for every surface. */
+export function meterSeverity(pct: number | undefined): StatusSeverity {
+  if (pct === undefined) return 'none'
+  if (pct >= 95) return 'error'
+  if (pct >= 80) return 'warning'
+  return 'none'
+}
+
+/** The rate-limit window that gets the one visible slot: whichever is fullest,
+ * since the binding constraint is the one worth glancing at. */
+export function tightestWindow(
+  rateLimits: Record<string, RateLimitInfo> | undefined,
+): { key: string; info: RateLimitInfo } | undefined {
+  const entries = Object.entries(rateLimits ?? {})
+  if (entries.length === 0) return undefined
+  let best: { key: string; info: RateLimitInfo } | undefined
+  for (const [key, info] of entries) {
+    // A rejected window outranks any utilization: it is the one actually blocking.
+    const rank = info.status === 'rejected' ? Number.POSITIVE_INFINITY : (info.utilization ?? -1)
+    const bestRank =
+      best === undefined
+        ? Number.NEGATIVE_INFINITY
+        : best.info.status === 'rejected'
+          ? Number.POSITIVE_INFINITY
+          : (best.info.utilization ?? -1)
+    if (rank > bestRank) best = { key, info }
+  }
+  return best
+}
+
+/** A rate-limit window's key, named for a human. */
+export function windowLabel(key: string): string {
+  if (key === 'five_hour') return 'Session'
+  if (key === 'seven_day') return 'Weekly'
+  return key.replaceAll('_', ' ')
+}
+
+export type ModelReadings = { model?: string; models: readonly ModelOption[] }
+
+/**
+ * The catalog row a session is actually running, or `undefined` for a model the
+ * list doesn't name. Matched leniently: a session reports the *resolved* id
+ * (`claude-sonnet-5`) where the row may be keyed on the alias (`sonnet`), and
+ * either can carry a `[1m]` context-window suffix.
+ */
+export function currentModel(vitals: ModelReadings | undefined): ModelOption | undefined {
+  const id = vitals?.model
+  if (!id) return undefined
+  const bare = (value: string) => value.replace(/\[.*\]$/, '')
+  const wanted = bare(id)
+  return vitals.models.find(
+    (m) => bare(m.value) === wanted || (m.resolvedModel && bare(m.resolvedModel) === wanted),
+  )
+}
+
+/** A session's model, named the way the picker names it. Falls back to the raw
+ * id, and to "Default" while the session is on the CLI's own pick. */
+export function modelLabel(vitals: ModelReadings | undefined): string {
+  if (!vitals?.model) return 'Default'
+  return currentModel(vitals)?.displayName ?? vitals.model
+}
+
+/** 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 {
+  return meterSeverity(usage?.percentage)
+}

package/src/styles/theme.css

@@ -24,6 +24,15 @@
   --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);
+  --row-active: rgb(0 0 0 / 0.08);
+
   /* ---------- Borders ---------- */
   --border: #ebebeb;
   --border-light: #e0e0e0;
@@ -36,12 +45,19 @@
   --fg-4: #a1a1a1;
   --fg-disabled: #c9c9c9;
 
-  /* ---------- Accent = the inverse of the canvas ---------- */
-  --accent: #171717;
-  --accent-hover: #000000;
-  --accent-dim: #737373;
-  --accent-bg: #f2f2f2;
-  --accent-ring: #17171733;
+  /* ---------- 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
+   * from near-black to near-white is a contrast device, not a brand colour, and
+   * WorkerDeck now shares an editor's visual language.
+   *
+   * Not to be confused with the brand's live green (`docs/assets/BRAND.md`),
+   * which stays what it is — a *signal*, not a primary. */
+  --accent: #0078d4;
+  --accent-hover: #106ebe;
+  --accent-dim: #6ca9d8;
+  --accent-bg: #eff6fc;
+  --accent-ring: #0078d433;
 
   /* ---------- Semantic ---------- */
   --success: #0f7b4f;
@@ -72,7 +88,9 @@
   --accent-tint: var(--accent-bg);
   --accent-fg: #ffffff;
   --warn: var(--warning);
-  --ring: var(--fg-1);
+  /* Focus ring is the accent, as in an editor — the comment below already said
+   * "accent-derived"; before the blue it was indistinguishable from fg-1. */
+  --ring: var(--accent);
 }
 
 [data-theme='dark'] {
@@ -83,6 +101,9 @@
   --bg-code: #141414;
   --bg-elevated: #0a0a0acc;
 
+  --row-hover: rgb(255 255 255 / 0.06);
+  --row-active: rgb(255 255 255 / 0.10);
+
   /* ---------- Borders ---------- */
   --border: #1f1f1f;
   --border-light: #292929;
@@ -95,12 +116,16 @@
   --fg-4: #6e6e6e;
   --fg-disabled: #454545;
 
-  /* ---------- Accent = the inverse of the canvas ---------- */
-  --accent: #ededed;
-  --accent-hover: #ffffff;
-  --accent-dim: #8f8f8f;
-  --accent-bg: #1f1f1f;
-  --accent-ring: #ffffff3d;
+  /* ---------- 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
+   * 2.9:1. The bright one is the hover and the ring, where nothing sits on top
+   * of it and the extra lift is what a dark canvas needs. */
+  --accent: #0078d4;
+  --accent-hover: #3794ff;
+  --accent-dim: #4a7ba0;
+  --accent-bg: #12283c;
+  --accent-ring: #3794ff4d;
 
   /* ---------- Semantic ---------- */
   --success: #3ecf8e;
@@ -131,9 +156,12 @@
   --text: var(--fg-1);
   --text-muted: var(--fg-3);
   --accent-tint: var(--accent-bg);
-  --accent-fg: #0a0a0a;
+  /* White on the blue fill in both themes — the accent no longer inverts. */
+  --accent-fg: #ffffff;
   --warn: var(--warning);
-  --ring: var(--fg-1);
+  /* Focus ring is the accent, as in an editor — the comment below already said
+   * "accent-derived"; before the blue it was indistinguishable from fg-1. */
+  --ring: var(--accent);
 }
 
 /* Theme-independent tokens — type tracking, easing, fonts.
@@ -188,6 +216,8 @@
   --color-ring: var(--ring);
 
   --color-surface-hover: var(--bg-surface-hover);
+  --color-row-hover: var(--row-hover);
+  --color-row-active: var(--row-active);
   /* 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. */