@workerdeck/ui 0.23.0 → 1.0.0

package/src/components/agent/StatusBar.tsx

@@ -9,52 +9,25 @@ import { Tip } from '../ui/Tooltip.tsx'
 import { cn } from '../../lib/utils.ts'
 import { formatCost, formatCountdown, formatTokens } from '../../lib/format.ts'
 import { meterColorClass } from '../../lib/status.ts'
+import { cssColor } from '../../lib/css.ts'
 import { STATUS_META } from './status.ts'
 import { useTranscriptVariant } from './transcript-variant.tsx'
 
 export interface StatusBarProps {
   state: TranscriptState
-  /**
-   * Plan windows to draw, when they should not be the session's own. The panel
-   * hands over the gateway's per-profile state merged over this transcript's
-   * reading (`mergeUsage`): a session's own `rate_limit` readings arrive only at
-   * a turn's edges, so one idle since yesterday would otherwise render
-   * yesterday's number as current. Absent = `state.rateLimits`, which is what a
-   * bar composed by hand outside the panel gets.
-   */
   rateLimits?: Record<string, RateLimitInfo>
-  /** @deprecated Pass {@link StatusBarProps.connection}; kept so an embedder
-   * still handing over a boolean keeps working. */
+  /** @deprecated Pass {@link StatusBarProps.connection}. */
   connected?: boolean
-  /** How the client is doing at reaching the gateway. A dropped socket wins the
-   * status slot: the session status held over a dead socket is a stale reading,
-   * and presenting it as a live one is the thing worth avoiding. */
   connection?: ConnectionState
-  /**
-   * Where the gauges lead. Each one opens the panel that answers *its* question
-   * — the two meters measure different things, so sending both to one "details"
-   * list would be a detour every time. Omit a handler and that gauge stays a
-   * read-only tooltip.
-   */
   onOpenStatus?: () => void
   onOpenContext?: () => void
   onOpenUsage?: () => void
-  /**
-   * The session's own controls (model, permission mode), for
-   * `controlsSurface: 'status'`. They sit at the end of the readings cluster —
-   * status, context, usage, then what you can *change* — rather than out by the
-   * actions menu, because they belong with the session facts they act on.
-   */
   controls?: ReactNode
-  /** Trailing slot — the session-actions menu, at the bar's trailing edge. */
   actions?: ReactNode
-  /** Which edge the bar sits on, so its separating rule goes on the other side.
-   * Placement is the panel's decision; this only styles it. */
   placement?: 'top' | 'bottom'
   className?: string
 }
 
-/** Ticking clock for reset countdowns — rate_limit events are sparse, so tick locally. */
 function useNow(intervalMs = 30_000): number {
   const [now, setNow] = useState(() => Date.now())
   useEffect(() => {
@@ -64,44 +37,28 @@ function useNow(intervalMs = 30_000): number {
   return now
 }
 
-/** The shared ramp, aliased for the two call sites below — the thresholds live
- * in `lib/status.ts` beside the severity they mirror. */
-const utilizationColor = (pct: number) => meterColorClass(pct)
-
-/** The CLI reports category colors as its own theme token names ('inactive',
- * 'promptBorder', ...), not CSS colors — only pass through what CSS can render. */
-const cssColor = (color: string): string | undefined =>
-  typeof CSS !== 'undefined' && CSS.supports('color', color) ? color : undefined
-
 function ContextMeter({ usage }: { usage: ContextUsage }) {
   return (
     <Tip
       content={
-        <div className='flex min-w-44 flex-col gap-1 py-0.5'>
+        <div className="flex min-w-44 flex-col gap-1 py-0.5">
           {usage.categories.map((c) => (
-            <div key={c.name} className='flex items-center gap-2'>
-              <span
-                className='size-2 shrink-0 rounded-full bg-fg-4'
-                style={cssColor(c.color) ? { backgroundColor: c.color } : undefined}
-              />
-              <span className='flex-1'>{c.name}</span>
-              <span className='font-mono text-fg-3'>{formatTokens(c.tokens)}</span>
+            <div key={c.name} className="flex items-center gap-2">
+              <span className="size-2 shrink-0 rounded-full bg-fg-4" style={cssColor(c.color) ? { backgroundColor: c.color } : undefined} />
+              <span className="flex-1">{c.name}</span>
+              <span className="font-mono text-fg-3">{formatTokens(c.tokens)}</span>
             </div>
           ))}
-          <div className='mt-0.5 flex items-center justify-between gap-2 border-t border-border pt-1'>
+          <div className="mt-0.5 flex items-center justify-between gap-2 border-t border-border pt-1">
             <span>Total</span>
-            <span className='font-mono text-fg-3'>
-              {formatTokens(usage.totalTokens)} / {formatTokens(usage.maxTokens)} (
-              {usage.percentage.toFixed(0)}%)
+            <span className="font-mono text-fg-3">
+              {formatTokens(usage.totalTokens)} / {formatTokens(usage.maxTokens)} ({usage.percentage.toFixed(0)}%)
             </span>
           </div>
         </div>
-      }>
-      <span
-        className={cn(
-          'inline-flex cursor-default items-center gap-1 font-mono text-label',
-          utilizationColor(usage.percentage),
-        )}>
+      }
+    >
+      <span className={cn('inline-flex cursor-default items-center gap-1 font-mono text-label', meterColorClass(usage.percentage))}>
         Ctx {formatTokens(usage.totalTokens)}
       </span>
     </Tip>
@@ -109,69 +66,53 @@ function ContextMeter({ usage }: { usage: ContextUsage }) {
 }
 
 function RateLimitMeter({ label, info, now }: { label: string; info: RateLimitInfo; now: number }) {
-  // The CLI omits utilization on some updates — show the window without a made-up 0%.
   const pct = info.utilization
   const resetsAtMs = info.resetsAt !== undefined ? info.resetsAt * 1000 : undefined
   return (
     <Tip
       content={
-        <div className='flex min-w-36 flex-col gap-1 py-0.5'>
-          <div className='flex items-center justify-between gap-2'>
+        <div className="flex min-w-36 flex-col gap-1 py-0.5">
+          <div className="flex items-center justify-between gap-2">
             <span>{label} usage</span>
-            <span className='font-mono text-fg-3'>
-              {pct !== undefined ? `${pct.toFixed(1)}%` : '—'}
-            </span>
+            <span className="font-mono text-fg-3">{pct !== undefined ? `${pct.toFixed(1)}%` : '—'}</span>
           </div>
           {resetsAtMs !== undefined ? (
-            <div className='flex items-center justify-between gap-2'>
+            <div className="flex items-center justify-between gap-2">
               <span>Resets in</span>
-              <span className='font-mono text-fg-3'>{formatCountdown(resetsAtMs, now)}</span>
+              <span className="font-mono text-fg-3">{formatCountdown(resetsAtMs, now)}</span>
             </div>
           ) : null}
-          {info.isUsingOverage ? <div className='text-warning'>Using overage</div> : null}
-          {info.status === 'rejected' ? <div className='text-danger'>Limit reached</div> : null}
+          {info.isUsingOverage ? <div className="text-warning">Using overage</div> : null}
+          {info.status === 'rejected' ? <div className="text-danger">Limit reached</div> : null}
         </div>
-      }>
-      {/* Inline, not `inline-flex`: a flex container contributes its FIRST
-          item's baseline, and the first item here is the ring — so a flex
-          version hands the row a 13px circle's baseline instead of the number's,
-          and every reading beside it sits on a different line. Inline text has
-          only one baseline to give. `align-middle` centres the ring on the
-          x-height, which is where it looked right anyway. */}
+      }
+    >
       <span
         className={cn(
           'cursor-default font-mono text-label whitespace-nowrap',
-          info.status === 'rejected' ? 'text-danger' : utilizationColor(pct ?? 0),
-        )}>
-        <ProgressRing value={pct ?? 0} className='mr-1 inline-block align-middle' />
+          info.status === 'rejected' ? 'text-danger' : meterColorClass(pct ?? 0),
+        )}
+      >
+        <ProgressRing value={pct ?? 0} className="mr-1 inline-block align-middle" />
         {label}
         {pct !== undefined ? ` ${pct.toFixed(0)}%` : ''}
-        {resetsAtMs !== undefined ? (
-          <span className='text-fg-4'> · {formatCountdown(resetsAtMs, now)}</span>
-        ) : null}
+        {resetsAtMs !== undefined ? <span className="text-fg-4"> · {formatCountdown(resetsAtMs, now)}</span> : null}
       </span>
     </Tip>
   )
 }
 
-/** A gauge that leads somewhere. `undefined` handler leaves it inert, so an
- * embedder that mounts no panels doesn't get buttons that do nothing. */
 function Slot({ onClick, hint, children }: { onClick?: () => void; hint: string; children: ReactNode }) {
-  if (!onClick) return <>{children}</>
+  if (!onClick) {
+    return <>{children}</>
+  }
   return (
     <button
-      type='button'
+      type="button"
       onClick={onClick}
       aria-label={hint}
-      // `leading-4` matches the label metrics inside: a button's own line box is
-      // the page's 24px one, and the extra strut was padding the bar by 2.5px
-      // that nothing was using.
-      // No horizontal padding: the bar's own 6px is the inset, and a slot that
-      // added its own would start the first reading 10px in. The hover surface
-      // hugs the text instead, which is what a status line's items do anyway.
-      // `leading-4` matches the label metrics inside — a button's own line box
-      // is the page's 24px one, and the strut padded the bar with nothing.
-      className='rounded-md py-0.5 leading-4 transition-colors outline-none hover:bg-surface-hover focus-visible:bg-surface-hover'>
+      className="rounded-md py-0.5 leading-4 transition-colors outline-none hover:bg-surface-hover focus-visible:bg-surface-hover"
+    >
       {children}
     </button>
   )
@@ -199,73 +140,47 @@ export function StatusBar({
   const terminal = useTranscriptVariant() === 'terminal'
   return (
     <div
-      data-slot='status-bar'
+      data-slot="status-bar"
       className={cn(
-        // Baselines, not boxes. `items-center` centres each child's *box*, and
-        // this bar's children are boxes of different heights for reasons that
-        // have nothing to do with their text — a badge's pill padding, a ring
-        // beside a number, a select's border and chevron. Centring those lands
-        // their text on four slightly different lines. A flex item's baseline is
-        // its first line's baseline, so aligning on it puts every reading on one
-        // line by construction, whatever is drawn around it.
-        // One explicit height, shared with the docked composer above it (see
-        // `Composer.tsx`) — the two strips along the foot of the panel read as
-        // one piece of chrome, and a pixel of drift between them shows.
         'flex h-[var(--wd-status-bar-height)] items-baseline gap-2 border-border bg-surface p-1.5',
-        // The rule goes between the bar and the content, so which edge it sits
-        // on follows the placement — except under the terminal theme at the
-        // foot, where the composer directly above already closes itself with a
-        // rule of its own. Two adjacent 1px rules is a 2px rule with a seam in
-        // it, and it is off the line grid besides.
         placement === 'bottom' ? (terminal ? undefined : 'border-t') : 'border-b',
         className,
-      )}>
-      {/* One slot, two meanings: connection trouble wins it, because a session
-          status shown over a dead socket is a stale reading presented as a live
-          one. Tapping it opens the session's own facts — where it runs, on what,
-          with which credentials — which is the question a status prompts. */}
-      <Slot onClick={onOpenStatus} hint='Session info'>
+      )}
+    >
+      <Slot onClick={onOpenStatus} hint="Session info">
         {link === 'live' ? (
-          // `items-baseline` so the badge answers the row with its label's
-          // baseline rather than its pill's box; the dot and the spinner keep
-          // their own centring.
-          <Badge variant={meta.variant} dot={!meta.busy} className='items-baseline'>
-            {meta.busy ? <Spinner className='size-3 self-center text-current' /> : null}
+          <Badge variant={meta.variant} dot={!meta.busy} className="items-baseline">
+            {meta.busy ? <Spinner className="size-3 self-center text-current" /> : null}
             {meta.label}
           </Badge>
         ) : (
-          <Badge
-            variant={link === 'offline' ? 'danger' : 'warning'}
-            dot={false}
-            className='items-baseline'>
+          <Badge variant={link === 'offline' ? 'danger' : 'warning'} dot={false} className="items-baseline">
             {link === 'offline' ? (
-              <WifiOff className='size-3 self-center text-current' />
+              <WifiOff className="size-3 self-center text-current" />
             ) : (
-              <RefreshCw className='size-3 animate-spin self-center text-current' />
+              <RefreshCw className="size-3 animate-spin self-center text-current" />
             )}
             {link === 'offline' ? 'Offline' : 'Reconnecting…'}
           </Badge>
         )}
       </Slot>
-      {/* Never a 0% meter for an engine that doesn't measure: an absent reading
-          and a full window are not the same claim. */}
       {state.capabilities.contextUsage && state.contextUsage ? (
-        <Slot onClick={onOpenContext} hint='Context breakdown'>
+        <Slot onClick={onOpenContext} hint="Context breakdown">
           <ContextMeter usage={state.contextUsage} />
         </Slot>
       ) : null}
       {session || weekly ? (
-        <Slot onClick={onOpenUsage} hint='Plan usage'>
-          <span className='inline-flex items-baseline gap-2'>
-            {session ? <RateLimitMeter label='Session' info={session} now={now} /> : null}
-            {weekly ? <RateLimitMeter label='Weekly' info={weekly} now={now} /> : null}
+        <Slot onClick={onOpenUsage} hint="Plan usage">
+          <span className="inline-flex items-baseline gap-2">
+            {session ? <RateLimitMeter label="Session" info={session} now={now} /> : null}
+            {weekly ? <RateLimitMeter label="Weekly" info={weekly} now={now} /> : null}
           </span>
         </Slot>
       ) : null}
-      {controls ? <span className='self-center'>{controls}</span> : null}
-      <span className='flex-1' />
-      <span className='font-mono text-label text-fg-3'>{formatCost(state.totalCostUsd)}</span>
-      {actions ? <span className='self-center'>{actions}</span> : null}
+      {controls ? <span className="self-center">{controls}</span> : null}
+      <span className="flex-1" />
+      <span className="font-mono text-label text-fg-3">{formatCost(state.totalCostUsd)}</span>
+      {actions ? <span className="self-center">{actions}</span> : null}
     </div>
   )
 }

package/src/components/agent/SubagentStrip.tsx

@@ -10,25 +10,6 @@ import type { ToolCallItem } from '../terminal/blocks.ts'
 import { usePulse } from './pulse.tsx'
 import { useTicker } from '../terminal/items.tsx'
 
-/**
- * The one line above a sub-agent takeover: who this is, how it is doing, and the
- * way back.
- *
- * **It claims exactly what the `TaskRow` it was opened from claims** — the same
- * `taskBusy` / `taskFailed` / tool count over the same items — and deliberately
- * *not* `SubagentInfo.status`. Protocol documents those two as divergent on
- * purpose (`index.ts:1476-1487`), but that divergence is transcript-versus-*list*
- * and this surface **is** the transcript. The disagreement that must not exist
- * here is between a header and the rows directly beneath it.
- *
- * The rollup is still allowed one job — naming an agent whose `Task` call is not
- * in the transcript — because a label is not content, and `SessionInfo.subagents`
- * keeps only eight settled records (`SUBAGENT_HISTORY`), so it can never be the
- * source of what a frame *shows*.
- *
- * Both variants, because the panel has two and a strip that only existed in one
- * would make the takeover a terminal-theme feature rather than a session feature.
- */
 export function SubagentStrip({
   task,
   items,
@@ -38,12 +19,8 @@ export function SubagentStrip({
   fontSize,
   lineHeight,
 }: {
-  /** The spawning call. Absent when the transcript does not have it — the strip
-   *  still draws, because the way back must exist even when the content cannot. */
   task: ToolCallItem | undefined
-  /** The frame's items, for the busy reading and the tool count. */
   items: readonly TranscriptItem[]
-  /** Fallback name when there is no task item. */
   label: string
   onBack: () => void
   terminal: boolean
@@ -54,55 +31,22 @@ export function SubagentStrip({
   const failed = task ? taskFailed(task) : false
   const pulse = usePulse(busy)
   const tools = items.reduce((n, item) => n + (item.kind === 'tool_call' ? 1 : 0), 0)
-  // Ticks only while it works, off the same once-a-second clock the working
-  // line uses. A settled agent has no end timestamp to measure against, and
-  // "N tools" is the settled reading anyway — a frozen clock would read as a
-  // stall. Absent `ts` (an item from before the reducer stamped it) simply
-  // draws no elapsed rather than counting from the epoch.
   const startedAt = busy ? task?.ts : undefined
   const now = useTicker(startedAt !== undefined)
   const elapsed = startedAt === undefined ? undefined : formatDuration(now - startedAt)
 
   const name = task ? taskIdentity(task) : label
-  /**
-   * Running or finished, in the theme's own words rather than new ones:
-   * `taskSummary` already says `working…` and `done` for exactly this state one
-   * row over, and a header that said "running"/"completed" about the same agent
-   * would be a second vocabulary for one fact. The trailing ellipsis is the
-   * theme's in-flight signal; the pulse beside it is the beat.
-   *
-   * Unknown when the transcript has no `Task` call to read — better silent than
-   * confidently wrong about an agent we cannot see.
-   */
   const status = !task ? undefined : failed ? 'failed' : busy ? `${pulse} working…` : 'done'
-  const detail = [tools > 0 ? `${tools} tool${tools === 1 ? '' : 's'}` : undefined, elapsed]
-    .filter(Boolean)
-    .join(' · ')
+  const detail = [tools > 0 ? `${tools} tool${tools === 1 ? '' : 's'}` : undefined, elapsed].filter(Boolean).join(' · ')
 
   if (terminal) {
     return (
-      <TerminalSurface fontSize={fontSize} lineHeight={lineHeight} className='shrink-0'>
-        {/* A row on the grid, not a chrome bar: the takeover is a mode of the
-            transcript, and a toolbar in some other metric above it would read as
-            a different application's. The whole line is the target — there is
-            exactly one thing to do here. */}
-        <button
-          type='button'
-          onClick={onBack}
-          aria-label='Back to the session'
-          className='block w-full cursor-pointer text-left'>
-          {/* The arrow is in the gutter unconditionally. It used to give way to
-              the pulse while the agent worked, which put the way *out* of the
-              frame on a timer — the one control here should not come and go.
-              The beat moved into the status instead. `indent` because this is a
-              frame around the rows rather than one of them, and a marker flush
-              against the panel edge reads as a clipped row. */}
-          <Row glyph='←' glyphTone='dim' indent={1} tone={failed ? 'red' : 'green'}>
+      <TerminalSurface fontSize={fontSize} lineHeight={lineHeight} className="shrink-0">
+        <button type="button" onClick={onBack} aria-label="Back to the session" className="block w-full cursor-pointer text-left">
+          <Row glyph="←" glyphTone="dim" indent={1} tone={failed ? 'red' : 'green'}>
             {name}
-            {status ? (
-              <Ink tone={failed ? 'red' : busy ? 'mark' : 'dim'}> · {status}</Ink>
-            ) : null}
-            {detail ? <Ink tone='faint'> · {detail}</Ink> : null}
+            {status ? <Ink tone={failed ? 'red' : busy ? 'mark' : 'dim'}> · {status}</Ink> : null}
+            {detail ? <Ink tone="faint"> · {detail}</Ink> : null}
           </Row>
         </button>
       </TerminalSurface>
@@ -110,25 +54,16 @@ export function SubagentStrip({
   }
 
   return (
-    <div className='flex shrink-0 items-center gap-2 border-b border-border px-3 py-1.5'>
-      <Button variant='ghost' size='sm' onClick={onBack} className='h-6 gap-1 px-1.5'>
-        <ArrowLeft className='size-3.5' />
+    <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-1.5">
+      <Button variant="ghost" size="sm" onClick={onBack} className="h-6 gap-1 px-1.5">
+        <ArrowLeft className="size-3.5" />
         Back
       </Button>
-      <span
-        className={cn('min-w-0 flex-1 truncate text-body-sm', failed ? 'text-danger' : 'text-fg-2')}>
-        {name}
-      </span>
+      <span className={cn('min-w-0 flex-1 truncate text-body-sm', failed ? 'text-danger' : 'text-fg-2')}>{name}</span>
       {status ? (
-        <span
-          className={cn(
-            'shrink-0 text-label',
-            failed ? 'text-danger' : busy ? 'text-accent' : 'text-fg-3',
-          )}>
-          {status}
-        </span>
+        <span className={cn('shrink-0 text-label', failed ? 'text-danger' : busy ? 'text-accent' : 'text-fg-3')}>{status}</span>
       ) : null}
-      {detail ? <span className='shrink-0 text-label text-fg-4'>{detail}</span> : null}
+      {detail ? <span className="shrink-0 text-label text-fg-4">{detail}</span> : null}
     </div>
   )
 }