@workerdeck/ui 0.15.0 → 0.16.0

package/build/format.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"format.mjs","names":[],"sources":["../src/lib/status.ts"],"sourcesContent":["import type { ContextUsage, ModelOption, RateLimitInfo, SessionStatus } from '@workerdeck/protocol'\n\n/**\n * How a session's live readings become a status line — the pure half, so every\n * host spells \"Needs approval\", \"80% is a warning\" and \"which window is the\n * binding one\" the same way.\n *\n * Structurally typed against `SessionVitals` rather than importing it: this file\n * ships from the React-free `@workerdeck/ui/format` entry, and a host drawing\n * the readings outside React (the VS Code extension host in the window status\n * bar) must not pull a component graph in to do it. A real `SessionVitals`\n * satisfies every shape here.\n */\nexport type StatusSeverity = 'none' | 'warning' | 'error'\n\n/** What a status slot shows, before any host's icon vocabulary gets involved.\n * `icon` is a VS Code codicon name — the one host-shaped thing left, because the\n * alternative is a second mapping table in the only consumer. */\nexport type StatusPresentation = {\n  icon: string\n  label: string\n  severity: StatusSeverity\n}\n\nexport type StatusReadings = {\n  status: SessionStatus\n  /** `@workerdeck/react`'s `ConnectionState`, structurally — the link state wins\n   * the slot, so it has to be part of the reading. */\n  connection?: 'live' | 'reconnecting' | 'offline'\n}\n\nconst STATUS_META: Record<SessionStatus, StatusPresentation> = {\n  starting: { icon: 'loading~spin', label: 'Starting', severity: 'none' },\n  running: { icon: 'loading~spin', label: 'Running', severity: 'none' },\n  awaiting_approval: { icon: 'warning', label: 'Needs approval', severity: 'warning' },\n  idle: { icon: 'check', label: 'Idle', severity: 'none' },\n  parked: { icon: 'debug-pause', label: 'Parked', severity: 'none' },\n  failed: { icon: 'error', label: 'Failed', severity: 'error' },\n  closed: { icon: 'circle-slash', label: 'Closed', severity: 'none' },\n}\n\n/**\n * The status slot, connection first. A session status held over a dead socket is\n * the last thing we heard, not the current state — so a lost link takes the slot\n * rather than letting \"Running\" imply a turn is still streaming.\n */\nexport function statusPresentation(vitals: StatusReadings | undefined): StatusPresentation {\n  if (!vitals) return { icon: 'hubot', label: 'Connecting…', severity: 'none' }\n  if (vitals.connection === 'offline') {\n    return { icon: 'debug-disconnect', label: 'Offline', severity: 'error' }\n  }\n  if (vitals.connection === 'reconnecting') {\n    return { icon: 'sync~spin', label: 'Reconnecting…', severity: 'warning' }\n  }\n  return STATUS_META[vitals.status] ?? { icon: 'hubot', label: vitals.status, severity: 'none' }\n}\n\n/** 0–100 → the colour a meter wears. One pair of thresholds for every surface. */\nexport function meterSeverity(pct: number | undefined): StatusSeverity {\n  if (pct === undefined) return 'none'\n  if (pct >= 95) return 'error'\n  if (pct >= 80) return 'warning'\n  return 'none'\n}\n\n/** The rate-limit window that gets the one visible slot: whichever is fullest,\n * since the binding constraint is the one worth glancing at. */\nexport function tightestWindow(\n  rateLimits: Record<string, RateLimitInfo> | undefined,\n): { key: string; info: RateLimitInfo } | undefined {\n  const entries = Object.entries(rateLimits ?? {})\n  if (entries.length === 0) return undefined\n  let best: { key: string; info: RateLimitInfo } | undefined\n  for (const [key, info] of entries) {\n    // A rejected window outranks any utilization: it is the one actually blocking.\n    const rank = info.status === 'rejected' ? Number.POSITIVE_INFINITY : (info.utilization ?? -1)\n    const bestRank =\n      best === undefined\n        ? Number.NEGATIVE_INFINITY\n        : best.info.status === 'rejected'\n          ? Number.POSITIVE_INFINITY\n          : (best.info.utilization ?? -1)\n    if (rank > bestRank) best = { key, info }\n  }\n  return best\n}\n\n/** A rate-limit window's key, named for a human. */\nexport function windowLabel(key: string): string {\n  if (key === 'five_hour') return 'Session'\n  if (key === 'seven_day') return 'Weekly'\n  return key.replaceAll('_', ' ')\n}\n\nexport type ModelReadings = { model?: string; models: readonly ModelOption[] }\n\n/**\n * The catalog row a session is actually running, or `undefined` for a model the\n * list doesn't name. Matched leniently: a session reports the *resolved* id\n * (`claude-sonnet-5`) where the row may be keyed on the alias (`sonnet`), and\n * either can carry a `[1m]` context-window suffix.\n */\nexport function currentModel(vitals: ModelReadings | undefined): ModelOption | undefined {\n  const id = vitals?.model\n  if (!id) return undefined\n  const bare = (value: string) => value.replace(/\\[.*\\]$/, '')\n  const wanted = bare(id)\n  return vitals.models.find(\n    (m) => bare(m.value) === wanted || (m.resolvedModel && bare(m.resolvedModel) === wanted),\n  )\n}\n\n/** A session's model, named the way the picker names it. Falls back to the raw\n * id, and to \"Default\" while the session is on the CLI's own pick. */\nexport function modelLabel(vitals: ModelReadings | undefined): string {\n  if (!vitals?.model) return 'Default'\n  return currentModel(vitals)?.displayName ?? vitals.model\n}\n\n/** Context percentage as its meter severity — the reading and the colour come\n * from one place so a panel and a status bar never disagree. */\nexport function contextSeverity(usage: ContextUsage | undefined): StatusSeverity {\n  return meterSeverity(usage?.percentage)\n}\n"],"mappings":";;AA+BA,MAAM,cAAyD;CAC7D,UAAU;EAAE,MAAM;EAAgB,OAAO;EAAY,UAAU;EAAQ;CACvE,SAAS;EAAE,MAAM;EAAgB,OAAO;EAAW,UAAU;EAAQ;CACrE,mBAAmB;EAAE,MAAM;EAAW,OAAO;EAAkB,UAAU;EAAW;CACpF,MAAM;EAAE,MAAM;EAAS,OAAO;EAAQ,UAAU;EAAQ;CACxD,QAAQ;EAAE,MAAM;EAAe,OAAO;EAAU,UAAU;EAAQ;CAClE,QAAQ;EAAE,MAAM;EAAS,OAAO;EAAU,UAAU;EAAS;CAC7D,QAAQ;EAAE,MAAM;EAAgB,OAAO;EAAU,UAAU;EAAQ;CACpE;;;;;;AAOD,SAAgB,mBAAmB,QAAwD;AACzF,KAAI,CAAC,OAAQ,QAAO;EAAE,MAAM;EAAS,OAAO;EAAe,UAAU;EAAQ;AAC7E,KAAI,OAAO,eAAe,UACxB,QAAO;EAAE,MAAM;EAAoB,OAAO;EAAW,UAAU;EAAS;AAE1E,KAAI,OAAO,eAAe,eACxB,QAAO;EAAE,MAAM;EAAa,OAAO;EAAiB,UAAU;EAAW;AAE3E,QAAO,YAAY,OAAO,WAAW;EAAE,MAAM;EAAS,OAAO,OAAO;EAAQ,UAAU;EAAQ;;;AAIhG,SAAgB,cAAc,KAAyC;AACrE,KAAI,QAAQ,KAAA,EAAW,QAAO;AAC9B,KAAI,OAAO,GAAI,QAAO;AACtB,KAAI,OAAO,GAAI,QAAO;AACtB,QAAO;;;;AAKT,SAAgB,eACd,YACkD;CAClD,MAAM,UAAU,OAAO,QAAQ,cAAc,EAAE,CAAC;AAChD,KAAI,QAAQ,WAAW,EAAG,QAAO,KAAA;CACjC,IAAI;AACJ,MAAK,MAAM,CAAC,KAAK,SAAS,QASxB,MAPa,KAAK,WAAW,aAAa,OAAO,oBAAqB,KAAK,eAAe,OAExF,SAAS,KAAA,IACL,OAAO,oBACP,KAAK,KAAK,WAAW,aACnB,OAAO,oBACN,KAAK,KAAK,eAAe,IACb,QAAO;EAAE;EAAK;EAAM;AAE3C,QAAO;;;AAIT,SAAgB,YAAY,KAAqB;AAC/C,KAAI,QAAQ,YAAa,QAAO;AAChC,KAAI,QAAQ,YAAa,QAAO;AAChC,QAAO,IAAI,WAAW,KAAK,IAAI;;;;;;;;AAWjC,SAAgB,aAAa,QAA4D;CACvF,MAAM,KAAK,QAAQ;AACnB,KAAI,CAAC,GAAI,QAAO,KAAA;CAChB,MAAM,QAAQ,UAAkB,MAAM,QAAQ,WAAW,GAAG;CAC5D,MAAM,SAAS,KAAK,GAAG;AACvB,QAAO,OAAO,OAAO,MAClB,MAAM,KAAK,EAAE,MAAM,KAAK,UAAW,EAAE,iBAAiB,KAAK,EAAE,cAAc,KAAK,OAClF;;;;AAKH,SAAgB,WAAW,QAA2C;AACpE,KAAI,CAAC,QAAQ,MAAO,QAAO;AAC3B,QAAO,aAAa,OAAO,EAAE,eAAe,OAAO;;;;AAKrD,SAAgB,gBAAgB,OAAiD;AAC/E,QAAO,cAAc,OAAO,WAAW"}

package/src/components/agent/line-prompt.tsx

@@ -1,249 +0,0 @@
-import { useEffect, useRef, type ReactNode } from 'react'
-import { cn } from '../../lib/utils.ts'
-import { Response } from './Response.tsx'
-import { LineGlyph } from './transcript-variant.tsx'
-
-/**
- * The parts a terminal-shaped prompt is built from.
- *
- * The `lines` transcript answers a question the `cards` one does not have to:
- * an approval and a question are *interactive*, so "no boxes" has to be paid for
- * by something else carrying the affordance. That something is the keyboard —
- * a roving `❯` marker, numbered rows, and a hint line — which is what a terminal
- * would do anyway, and what makes the prompt answerable without reaching for the
- * mouse in a dock where the rows are two lines tall.
- *
- * Everything here indents to the same gutter as every other line item, so an
- * approval reads as one more row in the run rather than a dialog dropped on top
- * of it.
- */
-
-/** The left inset that lines up body text with a `LineGlyph`'d row above it. */
-export const LINE_INDENT = 'pl-[calc(0.875rem+0.5rem)]'
-
-export type LineChoice = {
-  key: string
-  label: string
-  description?: string
-  /**
-   * Rendered under the row, outside the button — a preview, an input. The caller
-   * decides when it exists (focused, checked); a button may not contain one.
-   */
-  detail?: ReactNode
-  /**
-   * Present → the row carries a selection state and draws it. `marker` says in
-   * which idiom: a checkbox for a multi-select, a radio for a one-of. Absent →
-   * the row is an action (allow, deny), which has no state to show.
-   */
-  checked?: boolean
-  marker?: 'check' | 'radio'
-  danger?: boolean
-}
-
-/** The two-state glyph pairs, in the character forms a terminal would use. */
-const MARKERS = {
-  check: ['[ ]', '[x]'],
-  radio: ['( )', '(•)'],
-} as const
-
-export interface LineOptionListProps {
-  options: LineChoice[]
-  /** Roving index: the one row that is tab-reachable and wears the marker. */
-  focused: number
-  onFocus: (index: number) => void
-  onChoose: (index: number) => void
-  /**
-   * Own the DOM focus, moving it with the roving index. False while something
-   * else inside the prompt holds it (a reason input, another question's list) —
-   * two lists both chasing `focused` would tear the caret back and forth.
-   */
-  active?: boolean
-  label: string
-  className?: string
-}
-
-/**
- * A keyboard-first list of choices as line items: `↑`/`↓` move, `1`–`9` pick
- * directly, `Enter`/`Space` take the focused one (the button does that itself).
- */
-export function LineOptionList({
-  options,
-  focused,
-  onFocus,
-  onChoose,
-  active = true,
-  label,
-  className,
-}: LineOptionListProps) {
-  const refs = useRef<Array<HTMLButtonElement | null>>([])
-
-  useEffect(() => {
-    if (active) refs.current[focused]?.focus()
-  }, [active, focused])
-
-  const move = (delta: number) => {
-    if (options.length > 0) onFocus((focused + delta + options.length) % options.length)
-  }
-
-  return (
-    <div
-      role='group'
-      aria-label={label}
-      className={cn('flex flex-col', className)}
-      onKeyDown={(event) => {
-        if (event.key === 'ArrowDown') {
-          move(1)
-          event.preventDefault()
-          return
-        }
-        if (event.key === 'ArrowUp') {
-          move(-1)
-          event.preventDefault()
-          return
-        }
-        // Digits are the whole point of numbering the rows — but only up to the
-        // rows that exist, so `9` on a three-option prompt stays a no-op rather
-        // than a silent miss.
-        const digit = Number(event.key)
-        if (Number.isInteger(digit) && digit >= 1 && digit <= Math.min(options.length, 9)) {
-          onFocus(digit - 1)
-          onChoose(digit - 1)
-          event.preventDefault()
-        }
-      }}>
-      {options.map((option, index) => {
-        const isFocused = index === focused
-        return (
-          <div key={option.key} className='flex flex-col'>
-            <button
-              ref={(element) => {
-                refs.current[index] = element
-              }}
-              type='button'
-              tabIndex={isFocused ? 0 : -1}
-              aria-pressed={option.checked}
-              onFocus={() => onFocus(index)}
-              onClick={() => onChoose(index)}
-              className={cn(
-                'flex w-full items-baseline gap-2 text-left outline-none',
-                isFocused ? 'bg-surface-hover' : 'hover:bg-surface-hover/60',
-              )}>
-              <LineGlyph className={isFocused ? 'text-fg-1' : undefined}>
-                {isFocused ? '❯' : ' '}
-              </LineGlyph>
-              <span className='shrink-0 font-mono text-label leading-5 text-fg-4'>{index + 1}</span>
-              {option.checked !== undefined ? (
-                <span
-                  className={cn(
-                    'shrink-0 font-mono text-label leading-5',
-                    option.checked ? 'text-accent' : 'text-fg-4',
-                  )}>
-                  {MARKERS[option.marker ?? 'check'][option.checked ? 1 : 0]}
-                </span>
-              ) : null}
-              <span
-                className={cn(
-                  'min-w-0 flex-1 text-body-sm leading-5',
-                  option.danger ? 'text-danger' : 'text-fg-1',
-                )}>
-                {option.label}
-                {option.description ? (
-                  <span className='text-fg-4'> — {option.description}</span>
-                ) : null}
-              </span>
-            </button>
-            {option.detail ? <div className={LINE_INDENT}>{option.detail}</div> : null}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-/** The dim key legend under a prompt. Separated by `·`, like a status line. */
-export function LineHint({ children }: { children: ReactNode }) {
-  return (
-    <div className={cn(LINE_INDENT, 'text-label leading-5 text-fg-4')}>{children}</div>
-  )
-}
-
-/** A single-line text field in the terminal idiom: a caret glyph and a rule,
- * no box. `Enter` commits, `Escape` backs out — the caller says what those mean. */
-export function LineInput({
-  value,
-  onChange,
-  onSubmit,
-  onCancel,
-  placeholder,
-}: {
-  value: string
-  onChange: (value: string) => void
-  onSubmit: () => void
-  onCancel: () => void
-  placeholder?: string
-}) {
-  return (
-    <div className='flex items-baseline gap-2'>
-      <LineGlyph className='text-fg-3'>›</LineGlyph>
-      <input
-        autoFocus
-        value={value}
-        placeholder={placeholder}
-        onChange={(event) => onChange(event.target.value)}
-        onKeyDown={(event) => {
-          if (event.key === 'Enter') {
-            event.preventDefault()
-            onSubmit()
-          }
-          if (event.key === 'Escape') {
-            // The prompt's own Escape means "deny"/"dismiss"; inside the field it
-            // only closes the field, so it must not travel further.
-            event.stopPropagation()
-            onCancel()
-          }
-        }}
-        className='min-w-0 flex-1 border-b border-border bg-transparent text-body-sm leading-5 text-fg-1 outline-none placeholder:text-fg-4 focus:border-accent'
-      />
-    </div>
-  )
-}
-
-/**
- * A payload in the terminal idiom: a dim label line over a **highlighted** band.
- *
- * Highlighting goes through `Response` — the markdown renderer already carries
- * shiki, so wrapping the text in a fence costs no new dependency, no second
- * highlighter and no second theme to keep in sync, and it inherits the terminal
- * flattening plus the hover copy/download the renderer draws for every code
- * block. Text with no language still goes through it, as an unlabelled fence:
- * same band, same grid, no grammar guessed.
- */
-export function LinePayload({
-  code,
-  label,
-  language,
-  className,
-}: {
-  code: string
-  label: string
-  language?: string
-  className?: string
-}) {
-  return (
-    <div className={cn('min-w-0', className)}>
-      <span className='block truncate text-label leading-5 text-fg-4'>{label}</span>
-      <Response>{fence(code, language)}</Response>
-    </div>
-  )
-}
-
-/**
- * Wrap text as a markdown code fence, with a fence long enough to survive the
- * content: a payload containing ``` would otherwise close the block early and
- * spill the rest of it into the transcript as markdown.
- */
-export function fence(code: string, language?: string): string {
-  const longest = Math.max(0, ...[...code.matchAll(/`+/g)].map((match) => match[0].length))
-  const ticks = '`'.repeat(Math.max(3, longest + 1))
-  return `${ticks}${language ?? ''}\n${code}\n${ticks}`
-}