@workerdeck/ui 0.13.0 → 0.16.0

package/src/components/agent/StatusBar.tsx

@@ -9,9 +9,19 @@ import { Tip } from '../ui/Tooltip.tsx'
 import { cn } from '../../lib/utils.ts'
 import { formatCost, formatCountdown, formatTokens } from '../../lib/format.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. */
   connected?: boolean
@@ -28,6 +38,13 @@ export interface StatusBarProps {
   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.
@@ -113,16 +130,22 @@ function RateLimitMeter({ label, info, now }: { label: string; info: RateLimitIn
           {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(
-          'inline-flex cursor-default items-center gap-1 font-mono text-label',
+          'cursor-default font-mono text-label whitespace-nowrap',
           info.status === 'rejected' ? 'text-danger' : utilizationColor(pct ?? 0),
         )}>
-        <ProgressRing value={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>
+          <span className='text-fg-4'> · {formatCountdown(resetsAtMs, now)}</span>
         ) : null}
       </span>
     </Tip>
@@ -138,7 +161,15 @@ function Slot({ onClick, hint, children }: { onClick?: () => void; hint: string;
       type='button'
       onClick={onClick}
       aria-label={hint}
-      className='rounded-md px-1 py-0.5 transition-colors outline-none hover:bg-surface-hover focus-visible:bg-surface-hover'>
+      // `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'>
       {children}
     </button>
   )
@@ -146,28 +177,45 @@ function Slot({ onClick, hint, children }: { onClick?: () => void; hint: string;
 
 export function StatusBar({
   state,
+  rateLimits,
   connected,
   connection,
   onOpenStatus,
   onOpenContext,
   onOpenUsage,
+  controls,
   actions,
   placement = 'top',
   className,
 }: StatusBarProps) {
   const meta = STATUS_META[state.status]
   const now = useNow()
-  const session = state.rateLimits?.five_hour
-  const weekly = state.rateLimits?.seven_day
+  const windows = rateLimits ?? state.rateLimits
+  const session = windows?.five_hour
+  const weekly = windows?.seven_day
   const link: ConnectionState = connection ?? (connected === false ? 'reconnecting' : 'live')
+  const terminal = useTranscriptVariant() === 'terminal'
   return (
     <div
       data-slot='status-bar'
       className={cn(
-        'flex items-center gap-2 border-border bg-surface px-3 py-1.5',
+        // 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-[38px] 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.
-        placement === 'bottom' ? 'border-t' : 'border-b',
+        // 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
@@ -176,16 +224,22 @@ export function StatusBar({
           with which credentials — which is the question a status prompts. */}
       <Slot onClick={onOpenStatus} hint='Session info'>
         {link === 'live' ? (
-          <Badge variant={meta.variant} dot={!meta.busy}>
-            {meta.busy ? <Spinner className='size-3 text-current' /> : null}
+          // `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}
             {meta.label}
           </Badge>
         ) : (
-          <Badge variant={link === 'offline' ? 'danger' : 'warning'} dot={false}>
+          <Badge
+            variant={link === 'offline' ? 'danger' : 'warning'}
+            dot={false}
+            className='items-baseline'>
             {link === 'offline' ? (
-              <WifiOff className='size-3 text-current' />
+              <WifiOff className='size-3 self-center text-current' />
             ) : (
-              <RefreshCw className='size-3 animate-spin text-current' />
+              <RefreshCw className='size-3 animate-spin self-center text-current' />
             )}
             {link === 'offline' ? 'Offline' : 'Reconnecting…'}
           </Badge>
@@ -200,12 +254,13 @@ export function StatusBar({
       ) : null}
       {session || weekly ? (
         <Slot onClick={onOpenUsage} hint='Plan usage'>
-          <span className='inline-flex items-center gap-2'>
+          <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='flex-1' />
       <span className='font-mono text-label text-fg-3'>{formatCost(state.totalCostUsd)}</span>
       {actions}

package/src/components/agent/ToolCallCard.tsx

@@ -6,10 +6,7 @@ import { CodeBlock } from '../ui/CodeBlock.tsx'
 import { Spinner } from '../ui/Spinner.tsx'
 import { cn } from '../../lib/utils.ts'
 import { toolInputPreview } from '../../lib/format.ts'
-import { isMutatingTool, toolIcon } from '../../lib/tool-icon.ts'
-import { LINE_INDENT, LinePayload } from './line-prompt.tsx'
-import { usePulse } from './pulse.tsx'
-import { LineGlyph, useLines } from './transcript-variant.tsx'
+import { toolIcon } from '../../lib/tool-icon.ts'
 
 export type ToolCallItem = Extract<TranscriptItem, { kind: 'tool_call' }>
 
@@ -51,15 +48,6 @@ const STATE_BADGE = {
   failed: { label: 'Error', variant: 'danger', busy: false },
 } as const
 
-/** The gutter dot's colour in `lines`: the state, said without a badge. */
-const STATE_GLYPH = {
-  running: 'text-info',
-  pending: 'text-info',
-  deferred: 'text-accent',
-  settled: 'text-fg-4',
-  failed: 'text-danger',
-} as const
-
 /**
  * The language to highlight a payload as.
  *
@@ -91,47 +79,35 @@ function resultLanguage(item: ToolCallItem): string | undefined {
 type Status = keyof typeof STATE_BADGE
 
 export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps) {
-  const lines = useLines()
   const [open, setOpen] = useState(false)
   const [fullResult, setFullResult] = useState(false)
   const imagePath = imagePathOf(item)
   const status: Status = item.status ?? (item.result === undefined ? 'running' : 'settled')
   const badge = STATE_BADGE[status]
   const isError = status === 'failed' || item.result?.isError === true
-  // Ticks only while this row is actually running, and only in the variant with a
-  // gutter to pulse in — an idle transcript of a hundred settled tools starts no
-  // timers at all.
-  const pulse = usePulse(lines && badge.busy)
   const Icon = toolIcon(item.name)
 
   const resultText = item.result?.text ?? ''
   const truncated = !fullResult && resultText.length > RESULT_PREVIEW_CHARS
   const shownResult = truncated ? resultText.slice(0, RESULT_PREVIEW_CHARS) : resultText
 
-  // In `lines` the payloads are dim label + highlighted band, not framed cards:
-  // a tool call is already one row, and boxing what it expands into puts back
-  // the chrome the variant exists to remove.
-  const blockVariant = lines ? 'plain' : 'panel'
-  const Payload = lines ? HighlightedPayload : PlainPayload
   const details = open ? (
-    <div className={cn('flex flex-col', lines ? 'gap-1 py-1' : 'gap-2 border-t border-border p-2.5')}>
-      <Payload
+    <div className='flex flex-col gap-2 border-t border-border p-2.5'>
+      <PlainPayload
         code={JSON.stringify(item.input, null, 2)}
         language='json'
         label='Parameters'
-        variant={blockVariant}
       />
       {item.logs?.length ? (
-        <Payload code={item.logs.join('\n')} label='Logs' variant={blockVariant} />
+        <PlainPayload code={item.logs.join('\n')} label='Logs'/>
       ) : null}
       {item.result !== undefined ? (
         <div>
-          <Payload
+          <PlainPayload
             code={shownResult || '(empty result)'}
             language={resultLanguage(item)}
             label={isError ? 'Error' : 'Result'}
-            variant={blockVariant}
-            className={cn(isError && (lines ? '[&_pre]:text-danger' : 'border-danger/40 [&_pre]:text-danger'))}
+                className={cn(isError && 'border-danger/40 [&_pre]:text-danger')}
           />
           {truncated ? (
             <button
@@ -148,63 +124,7 @@ export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps)
 
   // The picture is the point of the call — shown without expanding, the way the
   // tool's own output would be if the engine had sent bytes.
-  const image = imagePath && hostImage ? <HostImage path={imagePath} load={hostImage} lines={lines} /> : null
-
-  if (lines) {
-    return (
-      <div data-slot='tool-call' data-state={status} className={cn('w-full', className)}>
-        <button
-          type='button'
-          onClick={() => setOpen((v) => !v)}
-          className='flex w-full items-baseline gap-2 text-left outline-none'>
-          <LineGlyph
-            className={
-              // A settled write is green: skimming a run, "what did it change"
-              // is the question you come back to, and it is the one you might
-              // need to undo. Every other state keeps its own colour — a failed
-              // write is a failure first.
-              status === 'settled' && !isError && isMutatingTool(item.name)
-                ? 'text-success'
-                : STATE_GLYPH[status]
-            }>
-            {/* Running: the mark's own pulse, so a working tool row and the
-                transcript's working line beat together. Settled: a plain dot,
-                which reads as "done" precisely by not moving. */}
-            {badge.busy ? pulse : '●'}
-          </LineGlyph>
-          <span className='min-w-0 flex-1 truncate text-body-sm leading-5 text-fg-3'>
-            <span className='font-medium text-fg-1'>{item.name}</span>
-            <span className='text-fg-4'>({toolInputPreview(item.input)})</span>
-          </span>
-          {item.backend && item.backend !== 'server' ? (
-            <span className='shrink-0 text-label text-fg-4'>{item.backend}</span>
-          ) : null}
-          {/* No Spinner here: the gutter glyph animates now, and two spinners on
-              one row is one too many. `cards` keeps its own — it has no gutter. */}
-          {status === 'deferred' ? <Clock className='size-3 shrink-0 self-center text-fg-4' /> : null}
-          {isError && !badge.busy ? (
-            <span className='shrink-0 text-label text-danger'>error</span>
-          ) : null}
-        </button>
-        {/* Collapsed, the first line of the output is the whole story most of
-            the time — a summary line costs one row and saves an expand. */}
-        {!open && resultText ? (
-          <div className='flex items-baseline gap-2'>
-            <LineGlyph className='text-fg-4'>⎿</LineGlyph>
-            <span
-              className={cn(
-                'min-w-0 flex-1 truncate text-label leading-5',
-                isError ? 'text-danger' : 'text-fg-4',
-              )}>
-              {resultSummary(resultText)}
-            </span>
-          </div>
-        ) : null}
-        {image}
-        {details ? <div className={LINE_INDENT}>{details}</div> : null}
-      </div>
-    )
-  }
+  const image = imagePath && hostImage ? <HostImage path={imagePath} load={hostImage} /> : null
 
   return (
     <div
@@ -243,31 +163,19 @@ export function ToolCallCard({ item, hostImage, className }: ToolCallCardProps)
   )
 }
 
-/** The first line worth showing of a tool result, for the collapsed summary. */
-function resultSummary(text: string): string {
-  const first = text.split('\n').find((line) => line.trim() !== '') ?? ''
-  const rest = text.trimEnd().split('\n').length - 1
-  const trimmed = first.trim()
-  return rest > 0 ? `${trimmed} (+${rest} lines)` : trimmed
-}
-
-type PayloadProps = {
+/** The framed card the `cards` transcript expands into. Unhighlighted by
+ * design: it is structured data in a panel, not a file. */
+function PlainPayload({
+  code,
+  label,
+  className,
+}: {
   code: string
   label: string
   language?: string
-  variant: 'panel' | 'plain'
   className?: string
-}
-
-/** The framed card, for the `cards` transcript. Unhighlighted by design: it is
- * structured data in a panel, not a file. */
-function PlainPayload({ code, label, variant, className }: PayloadProps) {
-  return <CodeBlock code={code} label={label} variant={variant} className={className} />
-}
-
-/** The terminal payload — shared with the line-shaped prompts. */
-function HighlightedPayload({ code, label, language, className }: PayloadProps) {
-  return <LinePayload code={code} label={label} language={language} className={className} />
+}) {
+  return <CodeBlock code={code} label={label} variant='panel' className={className} />
 }
 
 /**
@@ -282,11 +190,9 @@ function HighlightedPayload({ code, label, language, className }: PayloadProps)
 function HostImage({
   path,
   load,
-  lines,
 }: {
   path: string
   load: (path: string) => Promise<string | undefined>
-  lines?: boolean
 }) {
   const [src, setSrc] = useState<string | undefined>()
   useEffect(() => {
@@ -305,7 +211,7 @@ function HostImage({
   }, [path, load])
   if (!src) return null
   return (
-    <div className={cn(lines ? cn('py-1', LINE_INDENT) : 'border-t border-border p-2.5')}>
+    <div className='border-t border-border p-2.5'>
       <img
         src={src}
         alt={path.split('/').pop() ?? 'Generated image'}