@tangle-network/agent-app 0.60.177 → 0.60.179

package/dist/{chunk-LSUELMHY.js.map → chunk-LN5RBVGP.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/web-react/async/state.ts","../src/web-react/async/use-async-resource.ts","../src/web-react/async/use-confirmed-mutation.ts","../src/web-react/async/async-view.tsx"],"sourcesContent":["/**\n * The fetch-state contract: a failed load cannot render as empty data.\n *\n * Three shapes produce that defect, and two audited verticals shipped dozens of\n * each: a `catch` handler that only clears a loading flag, an early return on a\n * non-ok response, and a bare `null` returned while loading. All three end with\n * the same pixels a successful-but-empty load produces — \"No templates\n * available\", an empty member list, a blank conversation — so the reader cannot\n * tell \"we asked and there is nothing\" from \"we could not ask\", and the retry\n * that would fix it is never offered.\n *\n * `AsyncResourceState` makes the two outcomes separate variants: `error` is the\n * only one carrying a message and it is never reachable with a value, `empty` is\n * the only one carrying a resolved-but-empty value and it never carries a\n * message. A component rendering one is structurally not rendering the other.\n *\n * This file is React-free so the state model, the emptiness rule and the\n * Response readers can be unit-tested and reused outside a component.\n */\n\n/**\n * - `idle` — no load has been attempted (the hook is disabled, or its inputs\n *   are not resolved yet). Distinct from `loading`: nothing is in flight.\n * - `loading` — a load is in flight and no value is held.\n * - `error` — the load failed. Carries the message and never a value.\n * - `empty` — the load succeeded and the value is empty. Never carries a message.\n * - `ready` — the load succeeded and the value is non-empty.\n */\nexport type AsyncResourceStatus = 'idle' | 'loading' | 'error' | 'empty' | 'ready'\n\n/** Re-runs the load. Present on every variant so the error branch can never be\n *  rendered without the action that recovers from it. */\nexport interface AsyncRetryable {\n  readonly retry: () => void\n}\n\nexport type AsyncResourceState<T> =\n  | ({ readonly status: 'idle' } & AsyncRetryable)\n  | ({ readonly status: 'loading' } & AsyncRetryable)\n  | ({ readonly status: 'error'; readonly message: string; readonly error: unknown } & AsyncRetryable)\n  | ({ readonly status: 'empty'; readonly value: T } & AsyncRetryable)\n  | ({ readonly status: 'ready'; readonly value: T } & AsyncRetryable)\n\n/** The state model without the retry action — what a reducer produces. */\nexport type AsyncResolution<T> =\n  | { readonly status: 'idle' }\n  | { readonly status: 'loading' }\n  | { readonly status: 'error'; readonly message: string; readonly error: unknown }\n  | { readonly status: 'empty'; readonly value: T }\n  | { readonly status: 'ready'; readonly value: T }\n\nexport const DEFAULT_ASYNC_ERROR_MESSAGE = 'This did not load. Try again.'\n\n/**\n * Default emptiness rule: `null`/`undefined`, an empty array, an empty `Map` or\n * `Set`. A string, a number and a plain object are `ready` — `''` and `{}` are\n * legitimate values for the resources that produce them, and guessing otherwise\n * would route a real answer into the empty branch. Pass `isEmpty` for a shape\n * this cannot see into (`{ items: [] }`, a paged envelope, a count).\n */\nexport function defaultIsEmpty(value: unknown): boolean {\n  if (value === null || value === undefined) return true\n  if (Array.isArray(value)) return value.length === 0\n  if (value instanceof Map || value instanceof Set) return value.size === 0\n  return false\n}\n\nfunction hasMessage(value: object): value is { message: unknown } {\n  return 'message' in value\n}\n\n/** Best available human-readable message for a thrown value. Never returns an\n *  empty string — a blank error block reads as a rendering bug. */\nexport function asyncErrorMessage(error: unknown, fallback: string = DEFAULT_ASYNC_ERROR_MESSAGE): string {\n  if (typeof error === 'string' && error.trim() !== '') return error\n  if (typeof error === 'object' && error !== null && hasMessage(error)) {\n    const message = error.message\n    if (typeof message === 'string' && message.trim() !== '') return message\n  }\n  return fallback\n}\n\n/** Classifies a successfully loaded value into `ready` or `empty`. */\nexport function resolveAsyncValue<T>(value: T, isEmpty: (value: T) => boolean = defaultIsEmpty): AsyncResolution<T> {\n  return isEmpty(value) ? { status: 'empty', value } : { status: 'ready', value }\n}\n\n/**\n * A non-ok HTTP response, as a throwable. `requireOk`/`readOkJson` raise this so\n * a non-ok response reaches the `error` branch instead of an early `return` that\n * leaves the caller rendering the empty branch.\n */\nexport class AsyncRequestError extends Error {\n  readonly status: number\n  readonly statusText: string\n  readonly url: string\n  /** First 200 characters of the response body when it could be read, else `''`.\n   *  Kept off `message` so a server's HTML error page never becomes UI copy. */\n  readonly body: string\n\n  constructor(response: { status: number; statusText?: string; url?: string }, body = '') {\n    const statusText = response.statusText ?? ''\n    super(`Request failed (${response.status}${statusText ? ` ${statusText}` : ''})`)\n    this.name = 'AsyncRequestError'\n    this.status = response.status\n    this.statusText = statusText\n    this.url = response.url ?? ''\n    this.body = body\n  }\n}\n\nasync function readBodySnippet(response: Response): Promise<string> {\n  try {\n    return (await response.text()).slice(0, 200)\n  } catch {\n    // An already-consumed or unreadable body is a missing diagnostic, not a\n    // second failure — the status is what the error reports.\n    return ''\n  }\n}\n\n/** Returns the response when ok; throws `AsyncRequestError` otherwise. Reads the\n *  body only on the failure path, so the caller keeps an unconsumed stream. */\nexport async function requireOk(response: Response): Promise<Response> {\n  if (response.ok) return response\n  throw new AsyncRequestError(response, await readBodySnippet(response))\n}\n\n/**\n * `requireOk` + `response.json()`. Without `parse` the result is `unknown`, so a\n * caller narrows at the JSON boundary rather than inheriting an unchecked shape;\n * with `parse` the validator runs inside the load and a rejection lands in the\n * `error` branch.\n */\nexport async function readOkJson(response: Response): Promise<unknown>\nexport async function readOkJson<T>(response: Response, parse: (data: unknown) => T): Promise<T>\nexport async function readOkJson<T>(response: Response, parse?: (data: unknown) => T): Promise<T | unknown> {\n  await requireOk(response)\n  let data: unknown\n  try {\n    data = await response.json()\n  } catch (error) {\n    throw new Error('The response was not valid JSON.', { cause: error })\n  }\n  return parse ? parse(data) : data\n}\n","import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport {\n  asyncErrorMessage,\n  defaultIsEmpty,\n  resolveAsyncValue,\n  type AsyncResolution,\n  type AsyncResourceState,\n} from './state'\n\nexport interface AsyncLoadContext {\n  /** Aborted when the inputs change, a retry supersedes this load, or the\n   *  component unmounts. Forward it to `fetch` so a superseded request stops. */\n  readonly signal: AbortSignal\n}\n\nexport interface UseAsyncResourceOptions<T> {\n  /**\n   * The one load. Reject (or throw) to reach the `error` branch — a non-ok\n   * response must reject too, which is what `requireOk`/`readOkJson` are for.\n   * Read from a ref internally, so an inline arrow does not re-trigger; `deps`\n   * is what declares when the load must run again.\n   */\n  load: (context: AsyncLoadContext) => Promise<T>\n  /** Re-runs the load when any entry changes by `Object.is`, like `useEffect`. */\n  deps?: readonly unknown[]\n  /** `false` holds the resource at `idle` and runs nothing — for inputs that are\n   *  not resolved yet. Flipping it to `true` starts the load. */\n  enabled?: boolean\n  /** First-render seed (an SSR/loader page). The hook starts resolved and skips\n   *  the first load. Read once — later identity changes are ignored, so a\n   *  revalidating loader belongs in `deps`, not here. */\n  initialValue?: T\n  /** Splits a successful load into `empty` vs `ready`. Default: `defaultIsEmpty`. */\n  isEmpty?: (value: T) => boolean\n  /** Maps a thrown value to the message the `error` branch renders. */\n  errorMessage?: (error: unknown) => string\n}\n\n/** Bumps a token when any dependency changes identity, so the effect's own\n *  dependency list stays a fixed length whatever the caller passes. */\nfunction useChangeToken(deps: readonly unknown[]): number {\n  const ref = useRef<{ deps: readonly unknown[]; token: number }>({ deps, token: 0 })\n  const changed =\n    ref.current.deps.length !== deps.length || deps.some((dep, index) => !Object.is(dep, ref.current.deps[index]))\n  if (changed) ref.current = { deps, token: ref.current.token + 1 }\n  return ref.current.token\n}\n\nconst NO_DEPS: readonly unknown[] = []\n\n/**\n * The five-state fetch machine: `idle | loading | error | empty | ready`.\n *\n * What it guarantees, and what the hand-rolled versions it replaces did not:\n *\n * - a rejected load lands on `error` with a message and a `retry`, never on an\n *   empty list;\n * - `empty` is only reachable from a load that actually succeeded;\n * - a superseded load (inputs changed, retry pressed, component unmounted) is\n *   aborted and its late result is discarded; resolutions are bound to their\n *   input identity, including the render before the next effect runs.\n */\nexport function useAsyncResource<T>({\n  load,\n  deps = NO_DEPS,\n  enabled = true,\n  initialValue,\n  isEmpty,\n  errorMessage,\n}: UseAsyncResourceOptions<T>): AsyncResourceState<T> {\n  // Include enablement and retries in the identity: stale data must not be\n  // returned during the render before an effect clears the previous request.\n  const [reloadKey, setReloadKey] = useState(0)\n  const token = useChangeToken([enabled, reloadKey, ...deps])\n  const options = useRef({ load, isEmpty, errorMessage })\n  options.current = { load, isEmpty, errorMessage }\n  const [settled, setSettled] = useState<{ token: number; resolution: AsyncResolution<T> }>(() => ({\n    token,\n    resolution: initialValue === undefined\n      ? { status: 'loading' }\n      : resolveAsyncValue(initialValue, isEmpty ?? defaultIsEmpty),\n  }))\n  // A seed belongs only to its first identity. Effect replay does not consume\n  // it, but a dependency change, re-enable, or explicit retry does.\n  const seededToken = useRef(initialValue === undefined ? null : token)\n\n  useEffect(() => {\n    if (!enabled || seededToken.current === token) return\n    const controller = new AbortController()\n    const commit = (resolution: AsyncResolution<T>) => {\n      if (!controller.signal.aborted) setSettled({ token, resolution })\n    }\n    commit({ status: 'loading' })\n    void (async () => {\n      try {\n        const value = await options.current.load({ signal: controller.signal })\n        if (!controller.signal.aborted) commit(resolveAsyncValue(value, options.current.isEmpty ?? defaultIsEmpty))\n      } catch (error) {\n        if (!controller.signal.aborted) commit({\n          status: 'error',\n          message: options.current.errorMessage?.(error) ?? asyncErrorMessage(error),\n          error,\n        })\n      }\n    })()\n    return () => controller.abort()\n  }, [token, enabled])\n\n  const retry = useCallback(() => setReloadKey(key => key + 1), [])\n  return useMemo<AsyncResourceState<T>>(() => ({\n    ...(!enabled ? { status: 'idle' as const }\n      : settled.token === token ? settled.resolution : { status: 'loading' as const }),\n    retry,\n  }), [enabled, settled, token, retry])\n}\n","import { useCallback, useMemo, useRef, useState } from 'react'\n\nimport { asyncErrorMessage, readOkJson, requireOk } from './state'\nimport type { AsyncLoadContext } from './use-async-resource'\n\n/**\n * The brand that makes \"Saved\" unreachable without a confirmed write.\n *\n * A resolved promise is not a success: `fetch` resolves on a 404, and the\n * shipped defect this closes is a save button that rendered \"Saved\" because the\n * only thing awaited was that the request came back at all. The success variant\n * therefore carries a symbol no object literal can spell, so the only way into\n * `succeeded` is `confirmWrite` / `confirmResponse` / `confirmJson` — each of\n * which has already checked that the write landed.\n */\nexport const CONFIRMED_WRITE: unique symbol = Symbol('agent-app.confirmed-write')\n\nexport interface MutationConfirmed<T> {\n  readonly succeeded: true\n  readonly value: T\n  readonly [CONFIRMED_WRITE]: true\n}\n\nexport interface MutationRejected {\n  readonly succeeded: false\n  /** Safe to render: what the user is told the write did not do. */\n  readonly message: string\n  readonly error?: unknown\n}\n\nexport type MutationOutcome<T> = MutationConfirmed<T> | MutationRejected\n\n/** Confirms a write whose success is already established (an SDK call that\n *  throws on failure, a store returning its own typed outcome). The deliberate\n *  act is the point — this call is what an audit greps for. */\nexport function confirmWrite<T>(value: T): MutationConfirmed<T> {\n  return { succeeded: true, value, [CONFIRMED_WRITE]: true }\n}\n\n/** A write that did not land. Constructible by hand: failing loud is never the\n *  direction that needs guarding. */\nexport function rejectWrite(message: string, error?: unknown): MutationRejected {\n  return error === undefined ? { succeeded: false, message } : { succeeded: false, message, error }\n}\n\n/** Confirms only a 2xx response. A 404/500 becomes a rejection carrying the\n *  status — never a success, whatever the promise did. */\nexport async function confirmResponse(response: Response): Promise<MutationOutcome<Response>> {\n  try {\n    return confirmWrite(await requireOk(response))\n  } catch (error) {\n    return rejectWrite(asyncErrorMessage(error), error)\n  }\n}\n\n/** `confirmResponse` + a JSON body. A non-ok status, an unreadable body and a\n *  throwing `parse` are all rejections. */\nexport async function confirmJson<T>(response: Response, parse: (data: unknown) => T): Promise<MutationOutcome<T>> {\n  try {\n    return confirmWrite(await readOkJson(response, parse))\n  } catch (error) {\n    return rejectWrite(asyncErrorMessage(error), error)\n  }\n}\n\n/** True only for a value built by one of the confirm helpers. Takes `unknown`\n *  because an untyped consumer can return anything from `mutate`. */\nexport function isConfirmedWrite<T>(outcome: unknown): outcome is MutationConfirmed<T> {\n  if (typeof outcome !== 'object' || outcome === null) return false\n  return (outcome as { readonly [CONFIRMED_WRITE]?: unknown })[CONFIRMED_WRITE] === true\n}\n\nfunction asRejection(outcome: unknown): MutationRejected | null {\n  if (typeof outcome !== 'object' || outcome === null) return null\n  const candidate = outcome as { succeeded?: unknown; message?: unknown; error?: unknown }\n  if (candidate.succeeded !== false) return null\n  const message = typeof candidate.message === 'string' && candidate.message.trim() !== ''\n    ? candidate.message\n    : UNCONFIRMED_MESSAGE\n  return rejectWrite(message, candidate.error)\n}\n\nexport type MutationState<T> =\n  | { readonly status: 'idle' }\n  | { readonly status: 'pending' }\n  | { readonly status: 'succeeded'; readonly value: T }\n  | { readonly status: 'failed'; readonly message: string; readonly error: unknown }\n\nexport interface UseConfirmedMutationOptions<TInput, TValue> {\n  /** Default replaces the observed run. `reject` keeps the current request\n   *  and refuses another invocation before any second write can start. */\n  concurrency?: 'replace' | 'reject'\n  /**\n   * Performs the write and returns a confirmation. Anything else — including a\n   * hand-written `{ succeeded: true }` — is treated as a failed write, because\n   * an unbranded object is exactly the shape produced by code that never\n   * checked the response.\n   *\n   * The context signal aborts only when a later `run` supersedes this one. It is\n   * NOT aborted on unmount: a write the user asked for must not be cancelled by\n   * navigating away.\n   */\n  mutate: (input: TInput, context: AsyncLoadContext) => Promise<MutationOutcome<TValue>>\n  /** Fires after the state reaches `succeeded` (latest run only). */\n  onSucceeded?: (value: TValue) => void\n  /** Fires after the state reaches `failed` (latest run only). */\n  onFailed?: (message: string, error: unknown) => void\n  /** Maps a thrown value to the message the `failed` state renders. */\n  errorMessage?: (error: unknown) => string\n}\n\nexport interface ConfirmedMutation<TInput, TValue> {\n  readonly state: MutationState<TValue>\n  /** Runs the write. Never rejects — the outcome is returned and mirrored into\n   *  `state`. Concurrent runs are last-write-wins unless `concurrency: 'reject'`\n   *  is configured. Server-side idempotency is still required. */\n  readonly run: (input: TInput) => Promise<MutationOutcome<TValue>>\n  /** Back to `idle` (dismisses a \"Saved\" or error affordance). */\n  readonly reset: () => void\n}\n\nconst UNCONFIRMED_MESSAGE = 'The write could not be confirmed.'\n\nconst UNCONFIRMED_CONTRACT =\n  'mutate() resolved without a confirmation. Return confirmWrite(value), confirmResponse(response) or confirmJson(response, parse) so the success state proves the write landed.'\n\n/**\n * `idle | pending | succeeded | failed` over a write that must confirm itself.\n *\n * `succeeded` is reachable only through a branded confirmation, so the audited\n * \"Saved on a 404\" bug cannot be written with this hook: the 404 path produces\n * `failed` carrying the status, and a `mutate` that forgot to check produces\n * `failed` carrying the contract violation rather than a success it never\n * earned.\n */\nexport function useConfirmedMutation<TInput, TValue>({\n  mutate,\n  onSucceeded,\n  onFailed,\n  errorMessage,\n  concurrency = 'replace',\n}: UseConfirmedMutationOptions<TInput, TValue>): ConfirmedMutation<TInput, TValue> {\n  const options = useRef({ mutate, onSucceeded, onFailed, errorMessage, concurrency })\n  options.current = { mutate, onSucceeded, onFailed, errorMessage, concurrency }\n\n  const [state, setState] = useState<MutationState<TValue>>({ status: 'idle' })\n  const seqRef = useRef(0)\n  const inFlightRef = useRef<{ controller: AbortController; pending: boolean } | null>(null)\n\n  const run = useCallback(async (input: TInput): Promise<MutationOutcome<TValue>> => {\n    if (options.current.concurrency === 'reject' && inFlightRef.current?.pending)\n      return rejectWrite('Another operation is still in progress.')\n    inFlightRef.current?.controller.abort()\n    const controller = new AbortController()\n    inFlightRef.current = { controller, pending: true }\n    const seq = ++seqRef.current\n\n    setState({ status: 'pending' })\n\n    let outcome: MutationOutcome<TValue>\n    try {\n      const returned: unknown = await options.current.mutate(input, { signal: controller.signal })\n      outcome = isConfirmedWrite<TValue>(returned)\n        ? returned\n        : asRejection(returned) ?? rejectWrite(UNCONFIRMED_MESSAGE, new Error(UNCONFIRMED_CONTRACT))\n    } catch (error) {\n      outcome = rejectWrite(options.current.errorMessage?.(error) ?? asyncErrorMessage(error), error)\n    }\n\n    // A superseded run reports its own outcome to its own caller and never\n    // repaints the state a newer run owns.\n    if (seq !== seqRef.current) return outcome\n    if (inFlightRef.current) inFlightRef.current.pending = false\n\n    if (outcome.succeeded) {\n      setState({ status: 'succeeded', value: outcome.value })\n      options.current.onSucceeded?.(outcome.value)\n    } else {\n      setState({ status: 'failed', message: outcome.message, error: outcome.error })\n      options.current.onFailed?.(outcome.message, outcome.error)\n    }\n    return outcome\n  }, [])\n\n  const reset = useCallback(() => {\n    seqRef.current += 1\n    inFlightRef.current?.controller.abort()\n    inFlightRef.current = null\n    setState({ status: 'idle' })\n  }, [])\n\n  return useMemo(() => ({ state, run, reset }), [state, run, reset])\n}\n","import { isValidElement, type ReactElement, type ReactNode } from 'react'\n\nimport type { AsyncResourceState } from './state'\nimport type { MutationState } from './use-confirmed-mutation'\n\nexport interface AsyncEmptyAction {\n  label: string\n  onClick: () => void\n}\n\nexport interface AsyncEmptySpec {\n  /** What is not there, in the reader's words (\"No templates yet\"). Required:\n   *  an empty state with nothing to say is the state this module exists to\n   *  stop being mistaken for a failure. */\n  title: string\n  description?: string\n  /** The next action. An element is rendered as supplied (a link, a dialog\n   *  trigger); the object form renders the standard button. */\n  action?: AsyncEmptyAction | ReactElement\n}\n\nexport interface AsyncErrorRenderProps {\n  message: string\n  retry: () => void\n}\n\nexport interface AsyncViewProps<T> {\n  state: AsyncResourceState<T>\n  /** Rendered only for `ready`, with the loaded value — the branch cannot be\n   *  entered without one. */\n  children: (value: T) => ReactNode\n  /** Required: `empty` must name what is missing and what to do about it. */\n  empty: AsyncEmptySpec | ReactElement\n  /** Must return an element. Returning nothing is what produced the blank\n   *  screens this component replaces, so a nullish return falls back to the\n   *  built-in block rather than rendering nothing. */\n  renderLoading?: () => ReactElement\n  renderError?: (props: AsyncErrorRenderProps) => ReactElement\n  /** `idle` renders the loading block by default — from the reader's side,\n   *  \"not started\" and \"in flight\" are the same wait. */\n  renderIdle?: () => ReactElement\n  loadingLabel?: string\n  retryLabel?: string\n  /** Applied to the wrapper around the non-`ready` branches. `ready` renders the\n   *  children with no wrapper element, so grids and lists keep their layout. */\n  className?: string\n}\n\nconst BLOCK_CLASS = 'flex flex-col items-center justify-center gap-2 px-4 py-10 text-center'\n\n/**\n * Renders the branch the state is actually in.\n *\n * The three anti-patterns this replaces (`catch` that only clears a loading\n * flag, early return on a non-ok response, bare `null` while loading) all end at\n * the same rendered output as a successful-but-empty load. Here every branch is\n * reached from a different variant and each renders visibly: `loading` and\n * `idle` render a labelled busy block, `error` renders the message plus the\n * retry, `empty` renders the caller's copy and next action, and `ready` is the\n * only branch with a value to hand to `children`.\n */\nexport function AsyncView<T>({\n  state,\n  children,\n  empty,\n  renderLoading,\n  renderError,\n  renderIdle,\n  loadingLabel = 'Loading…',\n  retryLabel = 'Retry',\n  className,\n}: AsyncViewProps<T>): ReactElement {\n  if (state.status === 'ready') return <>{children(state.value)}</>\n\n  // Every `??` here is the guarantee: a custom renderer that returns nothing\n  // leaves the reader with the built-in block, never a blank region.\n  const branch = (): ReactNode => {\n    switch (state.status) {\n      case 'idle':\n        return renderIdle?.() ?? <LoadingBlock label={loadingLabel} />\n      case 'loading':\n        return renderLoading?.() ?? <LoadingBlock label={loadingLabel} />\n      case 'error':\n        return (\n          renderError?.({ message: state.message, retry: state.retry }) ?? (\n            <ErrorBlock message={state.message} retry={state.retry} retryLabel={retryLabel} />\n          )\n        )\n      case 'empty':\n        if (isValidElement(empty)) return empty\n        return typeof empty === 'object' && empty !== null && typeof empty.title === 'string' ? (\n          <EmptyBlock spec={empty} />\n        ) : (\n          <EmptyBlock spec={{ title: 'Nothing here yet.' }} />\n        )\n    }\n  }\n\n  // The busy signal lives on the WRAPPER, not inside the loading block, for the\n  // same reason every `??` above exists: `renderLoading` is an escape hatch, and\n  // a caller filling it with their own spinner would otherwise take the\n  // announcement with them — a screen reader would hear nothing for exactly the\n  // products that styled their wait state. The wrapper wraps every non-`ready`\n  // branch, so it cannot be opted out of.\n  //\n  // `aria-busy` is emitted in BOTH states rather than only while loading: a\n  // region that gains the attribute at the moment it goes busy, and drops it on\n  // arrival, gives assistive tech no transition to report. The `error` branch\n  // keeps its own `role=\"alert\"` and takes no live region here, because nesting\n  // one inside another is what produces a doubled announcement.\n  const busy = state.status === 'loading' || state.status === 'idle'\n  const failed = state.status === 'error'\n  return (\n    <div\n      data-async-state={state.status}\n      className={className}\n      role={failed ? undefined : 'status'}\n      aria-live={failed ? undefined : 'polite'}\n      aria-busy={busy}\n    >\n      {branch()}\n    </div>\n  )\n}\n\nfunction LoadingBlock({ label }: { label: string }): ReactElement {\n  return (\n    <div className={BLOCK_CLASS}>\n      {/* The ring is the brand colour, not `border-border`. A divider token is\n          tuned to be barely there, which is the opposite of what a busy\n          indicator needs: measured on this block it painted 1.10:1 in light and\n          1.20:1 in dark against its own panel — below the 3:1 a meaningful\n          graphic needs, and this spinner is the only signal that a fetch is in\n          flight. `border-primary` is also what the composer's send spinner\n          already uses, so this stops being the one that reads differently. */}\n      <span\n        className=\"h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent\"\n        aria-hidden=\"true\"\n      />\n      <span className=\"text-sm text-muted-foreground\">{label}</span>\n    </div>\n  )\n}\n\nfunction ErrorBlock({\n  message,\n  retry,\n  retryLabel,\n}: {\n  message: string\n  retry: () => void\n  retryLabel: string\n}): ReactElement {\n  return (\n    <div role=\"alert\" className={BLOCK_CLASS}>\n      <p className=\"max-w-md text-sm text-muted-foreground\">{message}</p>\n      <button\n        type=\"button\"\n        onClick={retry}\n        className=\"h-8 rounded-md border border-border px-3 text-xs font-medium text-foreground transition hover:bg-accent\"\n      >\n        {retryLabel}\n      </button>\n    </div>\n  )\n}\n\nfunction EmptyBlock({ spec }: { spec: AsyncEmptySpec }): ReactElement {\n  return (\n    <div className={BLOCK_CLASS}>\n      <p className=\"text-sm font-medium text-foreground\">{spec.title}</p>\n      {spec.description ? <p className=\"max-w-md text-sm text-muted-foreground\">{spec.description}</p> : null}\n      {spec.action ? (\n        isValidElement(spec.action) ? (\n          spec.action\n        ) : (\n          <button\n            type=\"button\"\n            onClick={(spec.action as AsyncEmptyAction).onClick}\n            className=\"h-8 rounded-md border border-border px-3 text-xs font-medium text-foreground transition hover:bg-accent\"\n          >\n            {(spec.action as AsyncEmptyAction).label}\n          </button>\n        )\n      ) : null}\n    </div>\n  )\n}\n\nexport interface MutationStatusLabels {\n  pending?: string\n  succeeded?: string\n}\n\nexport interface MutationStatusProps<T> {\n  state: MutationState<T>\n  labels?: MutationStatusLabels\n  className?: string\n}\n\n/**\n * The write's own status line. \"Saved\" renders only from `succeeded`, which\n * `useConfirmedMutation` can only reach through a confirmed write, so the label\n * cannot appear over a failed request.\n */\nexport function MutationStatus<T>({ state, labels, className }: MutationStatusProps<T>): ReactElement | null {\n  if (state.status === 'idle') return null\n  if (state.status === 'pending') {\n    return (\n      <span role=\"status\" aria-live=\"polite\" aria-busy={true} className={className ?? 'text-xs text-muted-foreground'}>\n        {labels?.pending ?? 'Saving…'}\n      </span>\n    )\n  }\n  if (state.status === 'succeeded') {\n    return (\n      <span role=\"status\" aria-live=\"polite\" aria-busy={false} className={className ?? 'text-xs text-muted-foreground'}>\n        {labels?.succeeded ?? 'Saved'}\n      </span>\n    )\n  }\n  return (\n    <span role=\"alert\" className={className ?? 'text-xs text-destructive'}>\n      {state.message}\n    </span>\n  )\n}\n"],"mappings":"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","names":["useCallback","useMemo","useRef","useState","useRef","useState","useCallback","useMemo"]}
+{"version":3,"sources":["../src/web-react/async/state.ts","../src/web-react/async/use-async-resource.ts","../src/web-react/async/use-confirmed-mutation.ts","../src/web-react/async/async-view.tsx"],"sourcesContent":["/**\n * The fetch-state contract: a failed load cannot render as empty data.\n *\n * Three shapes produce that defect, and two audited verticals shipped dozens of\n * each: a `catch` handler that only clears a loading flag, an early return on a\n * non-ok response, and a bare `null` returned while loading. All three end with\n * the same pixels a successful-but-empty load produces — \"No templates\n * available\", an empty member list, a blank conversation — so the reader cannot\n * tell \"we asked and there is nothing\" from \"we could not ask\", and the retry\n * that would fix it is never offered.\n *\n * `AsyncResourceState` makes the two outcomes separate variants: `error` is the\n * only one carrying a message and it is never reachable with a value, `empty` is\n * the only one carrying a resolved-but-empty value and it never carries a\n * message. A component rendering one is structurally not rendering the other.\n *\n * This file is React-free so the state model, the emptiness rule and the\n * Response readers can be unit-tested and reused outside a component.\n */\n\n/**\n * - `idle` — no load has been attempted (the hook is disabled, or its inputs\n *   are not resolved yet). Distinct from `loading`: nothing is in flight.\n * - `loading` — a load is in flight and no value is held.\n * - `error` — the load failed. Carries the message and never a value.\n * - `empty` — the load succeeded and the value is empty. Never carries a message.\n * - `ready` — the load succeeded and the value is non-empty.\n */\nexport type AsyncResourceStatus = 'idle' | 'loading' | 'error' | 'empty' | 'ready'\n\n/** Re-runs the load. Present on every variant so the error branch can never be\n *  rendered without the action that recovers from it. */\nexport interface AsyncRetryable {\n  readonly retry: () => void\n}\n\nexport type AsyncResourceState<T> =\n  | ({ readonly status: 'idle' } & AsyncRetryable)\n  | ({ readonly status: 'loading' } & AsyncRetryable)\n  | ({ readonly status: 'error'; readonly message: string; readonly error: unknown } & AsyncRetryable)\n  | ({ readonly status: 'empty'; readonly value: T } & AsyncRetryable)\n  | ({ readonly status: 'ready'; readonly value: T } & AsyncRetryable)\n\n/** The state model without the retry action — what a reducer produces. */\nexport type AsyncResolution<T> =\n  | { readonly status: 'idle' }\n  | { readonly status: 'loading' }\n  | { readonly status: 'error'; readonly message: string; readonly error: unknown }\n  | { readonly status: 'empty'; readonly value: T }\n  | { readonly status: 'ready'; readonly value: T }\n\nexport const DEFAULT_ASYNC_ERROR_MESSAGE = 'This did not load. Try again.'\n\n/**\n * Default emptiness rule: `null`/`undefined`, an empty array, an empty `Map` or\n * `Set`. A string, a number and a plain object are `ready` — `''` and `{}` are\n * legitimate values for the resources that produce them, and guessing otherwise\n * would route a real answer into the empty branch. Pass `isEmpty` for a shape\n * this cannot see into (`{ items: [] }`, a paged envelope, a count).\n */\nexport function defaultIsEmpty(value: unknown): boolean {\n  if (value === null || value === undefined) return true\n  if (Array.isArray(value)) return value.length === 0\n  if (value instanceof Map || value instanceof Set) return value.size === 0\n  return false\n}\n\nfunction hasMessage(value: object): value is { message: unknown } {\n  return 'message' in value\n}\n\n/** Best available human-readable message for a thrown value. Never returns an\n *  empty string — a blank error block reads as a rendering bug. */\nexport function asyncErrorMessage(error: unknown, fallback: string = DEFAULT_ASYNC_ERROR_MESSAGE): string {\n  if (typeof error === 'string' && error.trim() !== '') return error\n  if (typeof error === 'object' && error !== null && hasMessage(error)) {\n    const message = error.message\n    if (typeof message === 'string' && message.trim() !== '') return message\n  }\n  return fallback\n}\n\n/** Classifies a successfully loaded value into `ready` or `empty`. */\nexport function resolveAsyncValue<T>(value: T, isEmpty: (value: T) => boolean = defaultIsEmpty): AsyncResolution<T> {\n  return isEmpty(value) ? { status: 'empty', value } : { status: 'ready', value }\n}\n\n/**\n * A non-ok HTTP response, as a throwable. `requireOk`/`readOkJson` raise this so\n * a non-ok response reaches the `error` branch instead of an early `return` that\n * leaves the caller rendering the empty branch.\n */\nexport class AsyncRequestError extends Error {\n  readonly status: number\n  readonly statusText: string\n  readonly url: string\n  /** First 200 characters of the response body when it could be read, else `''`.\n   *  Kept off `message` so a server's HTML error page never becomes UI copy. */\n  readonly body: string\n\n  constructor(response: { status: number; statusText?: string; url?: string }, body = '') {\n    const statusText = response.statusText ?? ''\n    super(`Request failed (${response.status}${statusText ? ` ${statusText}` : ''})`)\n    this.name = 'AsyncRequestError'\n    this.status = response.status\n    this.statusText = statusText\n    this.url = response.url ?? ''\n    this.body = body\n  }\n}\n\nasync function readBodySnippet(response: Response): Promise<string> {\n  try {\n    return (await response.text()).slice(0, 200)\n  } catch {\n    // An already-consumed or unreadable body is a missing diagnostic, not a\n    // second failure — the status is what the error reports.\n    return ''\n  }\n}\n\n/** Returns the response when ok; throws `AsyncRequestError` otherwise. Reads the\n *  body only on the failure path, so the caller keeps an unconsumed stream. */\nexport async function requireOk(response: Response): Promise<Response> {\n  if (response.ok) return response\n  throw new AsyncRequestError(response, await readBodySnippet(response))\n}\n\n/**\n * `requireOk` + `response.json()`. Without `parse` the result is `unknown`, so a\n * caller narrows at the JSON boundary rather than inheriting an unchecked shape;\n * with `parse` the validator runs inside the load and a rejection lands in the\n * `error` branch.\n */\nexport async function readOkJson(response: Response): Promise<unknown>\nexport async function readOkJson<T>(response: Response, parse: (data: unknown) => T): Promise<T>\nexport async function readOkJson<T>(response: Response, parse?: (data: unknown) => T): Promise<T | unknown> {\n  await requireOk(response)\n  let data: unknown\n  try {\n    data = await response.json()\n  } catch (error) {\n    throw new Error('The response was not valid JSON.', { cause: error })\n  }\n  return parse ? parse(data) : data\n}\n","import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport {\n  asyncErrorMessage,\n  defaultIsEmpty,\n  resolveAsyncValue,\n  type AsyncResolution,\n  type AsyncResourceState,\n} from './state'\n\nexport interface AsyncLoadContext {\n  /** Aborted when the inputs change, a retry supersedes this load, or the\n   *  component unmounts. Forward it to `fetch` so a superseded request stops. */\n  readonly signal: AbortSignal\n}\n\nexport interface UseAsyncResourceOptions<T> {\n  /**\n   * The one load. Reject (or throw) to reach the `error` branch — a non-ok\n   * response must reject too, which is what `requireOk`/`readOkJson` are for.\n   * Read from a ref internally, so an inline arrow does not re-trigger; `deps`\n   * is what declares when the load must run again.\n   */\n  load: (context: AsyncLoadContext) => Promise<T>\n  /** Re-runs the load when any entry changes by `Object.is`, like `useEffect`. */\n  deps?: readonly unknown[]\n  /** `false` holds the resource at `idle` and runs nothing — for inputs that are\n   *  not resolved yet. Flipping it to `true` starts the load. */\n  enabled?: boolean\n  /** First-render seed (an SSR/loader page). The hook starts resolved and skips\n   *  the first load. Read once — later identity changes are ignored, so a\n   *  revalidating loader belongs in `deps`, not here. */\n  initialValue?: T\n  /** Splits a successful load into `empty` vs `ready`. Default: `defaultIsEmpty`. */\n  isEmpty?: (value: T) => boolean\n  /** Maps a thrown value to the message the `error` branch renders. */\n  errorMessage?: (error: unknown) => string\n}\n\n/** Bumps a token when any dependency changes identity, so the effect's own\n *  dependency list stays a fixed length whatever the caller passes. */\nfunction useChangeToken(deps: readonly unknown[]): number {\n  const ref = useRef<{ deps: readonly unknown[]; token: number }>({ deps, token: 0 })\n  const changed =\n    ref.current.deps.length !== deps.length || deps.some((dep, index) => !Object.is(dep, ref.current.deps[index]))\n  if (changed) ref.current = { deps, token: ref.current.token + 1 }\n  return ref.current.token\n}\n\nconst NO_DEPS: readonly unknown[] = []\n\n/**\n * The five-state fetch machine: `idle | loading | error | empty | ready`.\n *\n * What it guarantees, and what the hand-rolled versions it replaces did not:\n *\n * - a rejected load lands on `error` with a message and a `retry`, never on an\n *   empty list;\n * - `empty` is only reachable from a load that actually succeeded;\n * - a superseded load (inputs changed, retry pressed, component unmounted) is\n *   aborted and its late result is discarded; resolutions are bound to their\n *   input identity, including the render before the next effect runs.\n */\nexport function useAsyncResource<T>({\n  load,\n  deps = NO_DEPS,\n  enabled = true,\n  initialValue,\n  isEmpty,\n  errorMessage,\n}: UseAsyncResourceOptions<T>): AsyncResourceState<T> {\n  // Include enablement and retries in the identity: stale data must not be\n  // returned during the render before an effect clears the previous request.\n  const [reloadKey, setReloadKey] = useState(0)\n  const token = useChangeToken([enabled, reloadKey, ...deps])\n  const options = useRef({ load, isEmpty, errorMessage })\n  options.current = { load, isEmpty, errorMessage }\n  const [settled, setSettled] = useState<{ token: number; resolution: AsyncResolution<T> }>(() => ({\n    token,\n    resolution: initialValue === undefined\n      ? { status: 'loading' }\n      : resolveAsyncValue(initialValue, isEmpty ?? defaultIsEmpty),\n  }))\n  // A seed belongs only to its first identity. Effect replay does not consume\n  // it, but a dependency change, re-enable, or explicit retry does.\n  const seededToken = useRef(initialValue === undefined ? null : token)\n\n  useEffect(() => {\n    if (!enabled || seededToken.current === token) return\n    const controller = new AbortController()\n    const commit = (resolution: AsyncResolution<T>) => {\n      if (!controller.signal.aborted) setSettled({ token, resolution })\n    }\n    commit({ status: 'loading' })\n    void (async () => {\n      try {\n        const value = await options.current.load({ signal: controller.signal })\n        if (!controller.signal.aborted) commit(resolveAsyncValue(value, options.current.isEmpty ?? defaultIsEmpty))\n      } catch (error) {\n        if (!controller.signal.aborted) commit({\n          status: 'error',\n          message: options.current.errorMessage?.(error) ?? asyncErrorMessage(error),\n          error,\n        })\n      }\n    })()\n    return () => controller.abort()\n  }, [token, enabled])\n\n  const retry = useCallback(() => setReloadKey(key => key + 1), [])\n  return useMemo<AsyncResourceState<T>>(() => ({\n    ...(!enabled ? { status: 'idle' as const }\n      : settled.token === token ? settled.resolution : { status: 'loading' as const }),\n    retry,\n  }), [enabled, settled, token, retry])\n}\n","import { useCallback, useMemo, useRef, useState } from 'react'\n\nimport { asyncErrorMessage, readOkJson, requireOk } from './state'\nimport type { AsyncLoadContext } from './use-async-resource'\n\n/**\n * The brand that makes \"Saved\" unreachable without a confirmed write.\n *\n * A resolved promise is not a success: `fetch` resolves on a 404, and the\n * shipped defect this closes is a save button that rendered \"Saved\" because the\n * only thing awaited was that the request came back at all. The success variant\n * therefore carries a symbol no object literal can spell, so the only way into\n * `succeeded` is `confirmWrite` / `confirmResponse` / `confirmJson` — each of\n * which has already checked that the write landed.\n */\nexport const CONFIRMED_WRITE: unique symbol = Symbol('agent-app.confirmed-write')\n\nexport interface MutationConfirmed<T> {\n  readonly succeeded: true\n  readonly value: T\n  readonly [CONFIRMED_WRITE]: true\n}\n\nexport interface MutationRejected {\n  readonly succeeded: false\n  /** Safe to render: what the user is told the write did not do. */\n  readonly message: string\n  readonly error?: unknown\n}\n\nexport type MutationOutcome<T> = MutationConfirmed<T> | MutationRejected\n\n/** Confirms a write whose success is already established (an SDK call that\n *  throws on failure, a store returning its own typed outcome). The deliberate\n *  act is the point — this call is what an audit greps for. */\nexport function confirmWrite<T>(value: T): MutationConfirmed<T> {\n  return { succeeded: true, value, [CONFIRMED_WRITE]: true }\n}\n\n/** A write that did not land. Constructible by hand: failing loud is never the\n *  direction that needs guarding. */\nexport function rejectWrite(message: string, error?: unknown): MutationRejected {\n  return error === undefined ? { succeeded: false, message } : { succeeded: false, message, error }\n}\n\n/** Confirms only a 2xx response. A 404/500 becomes a rejection carrying the\n *  status — never a success, whatever the promise did. */\nexport async function confirmResponse(response: Response): Promise<MutationOutcome<Response>> {\n  try {\n    return confirmWrite(await requireOk(response))\n  } catch (error) {\n    return rejectWrite(asyncErrorMessage(error), error)\n  }\n}\n\n/** `confirmResponse` + a JSON body. A non-ok status, an unreadable body and a\n *  throwing `parse` are all rejections. */\nexport async function confirmJson<T>(response: Response, parse: (data: unknown) => T): Promise<MutationOutcome<T>> {\n  try {\n    return confirmWrite(await readOkJson(response, parse))\n  } catch (error) {\n    return rejectWrite(asyncErrorMessage(error), error)\n  }\n}\n\n/** True only for a value built by one of the confirm helpers. Takes `unknown`\n *  because an untyped consumer can return anything from `mutate`. */\nexport function isConfirmedWrite<T>(outcome: unknown): outcome is MutationConfirmed<T> {\n  if (typeof outcome !== 'object' || outcome === null) return false\n  return (outcome as { readonly [CONFIRMED_WRITE]?: unknown })[CONFIRMED_WRITE] === true\n}\n\nfunction asRejection(outcome: unknown): MutationRejected | null {\n  if (typeof outcome !== 'object' || outcome === null) return null\n  const candidate = outcome as { succeeded?: unknown; message?: unknown; error?: unknown }\n  if (candidate.succeeded !== false) return null\n  const message = typeof candidate.message === 'string' && candidate.message.trim() !== ''\n    ? candidate.message\n    : UNCONFIRMED_MESSAGE\n  return rejectWrite(message, candidate.error)\n}\n\nexport type MutationState<T> =\n  | { readonly status: 'idle' }\n  | { readonly status: 'pending' }\n  | { readonly status: 'succeeded'; readonly value: T }\n  | { readonly status: 'failed'; readonly message: string; readonly error: unknown }\n\nexport interface UseConfirmedMutationOptions<TInput, TValue> {\n  /** Default replaces the observed run. `reject` keeps the current request\n   *  and refuses another invocation before any second write can start. */\n  concurrency?: 'replace' | 'reject'\n  /**\n   * Performs the write and returns a confirmation. Anything else — including a\n   * hand-written `{ succeeded: true }` — is treated as a failed write, because\n   * an unbranded object is exactly the shape produced by code that never\n   * checked the response.\n   *\n   * The context signal aborts only when a later `run` supersedes this one. It is\n   * NOT aborted on unmount: a write the user asked for must not be cancelled by\n   * navigating away.\n   */\n  mutate: (input: TInput, context: AsyncLoadContext) => Promise<MutationOutcome<TValue>>\n  /** Fires after the state reaches `succeeded` (latest run only). */\n  onSucceeded?: (value: TValue) => void\n  /** Fires after the state reaches `failed` (latest run only). */\n  onFailed?: (message: string, error: unknown) => void\n  /** Maps a thrown value to the message the `failed` state renders. */\n  errorMessage?: (error: unknown) => string\n}\n\nexport interface ConfirmedMutation<TInput, TValue> {\n  readonly state: MutationState<TValue>\n  /** Runs the write. Never rejects — the outcome is returned and mirrored into\n   *  `state`. Concurrent runs are last-write-wins unless `concurrency: 'reject'`\n   *  is configured. Server-side idempotency is still required. */\n  readonly run: (input: TInput) => Promise<MutationOutcome<TValue>>\n  /** Back to `idle` (dismisses a \"Saved\" or error affordance). */\n  readonly reset: () => void\n}\n\nconst UNCONFIRMED_MESSAGE = 'The write could not be confirmed.'\n\nconst UNCONFIRMED_CONTRACT =\n  'mutate() resolved without a confirmation. Return confirmWrite(value), confirmResponse(response) or confirmJson(response, parse) so the success state proves the write landed.'\n\n/**\n * `idle | pending | succeeded | failed` over a write that must confirm itself.\n *\n * `succeeded` is reachable only through a branded confirmation, so the audited\n * \"Saved on a 404\" bug cannot be written with this hook: the 404 path produces\n * `failed` carrying the status, and a `mutate` that forgot to check produces\n * `failed` carrying the contract violation rather than a success it never\n * earned.\n */\nexport function useConfirmedMutation<TInput, TValue>({\n  mutate,\n  onSucceeded,\n  onFailed,\n  errorMessage,\n  concurrency = 'replace',\n}: UseConfirmedMutationOptions<TInput, TValue>): ConfirmedMutation<TInput, TValue> {\n  const options = useRef({ mutate, onSucceeded, onFailed, errorMessage, concurrency })\n  options.current = { mutate, onSucceeded, onFailed, errorMessage, concurrency }\n\n  const [state, setState] = useState<MutationState<TValue>>({ status: 'idle' })\n  const seqRef = useRef(0)\n  const inFlightRef = useRef<{ controller: AbortController; pending: boolean } | null>(null)\n\n  const run = useCallback(async (input: TInput): Promise<MutationOutcome<TValue>> => {\n    if (options.current.concurrency === 'reject' && inFlightRef.current?.pending)\n      return rejectWrite('Another operation is still in progress.')\n    inFlightRef.current?.controller.abort()\n    const controller = new AbortController()\n    inFlightRef.current = { controller, pending: true }\n    const seq = ++seqRef.current\n\n    setState({ status: 'pending' })\n\n    let outcome: MutationOutcome<TValue>\n    try {\n      const returned: unknown = await options.current.mutate(input, { signal: controller.signal })\n      outcome = isConfirmedWrite<TValue>(returned)\n        ? returned\n        : asRejection(returned) ?? rejectWrite(UNCONFIRMED_MESSAGE, new Error(UNCONFIRMED_CONTRACT))\n    } catch (error) {\n      outcome = rejectWrite(options.current.errorMessage?.(error) ?? asyncErrorMessage(error), error)\n    }\n\n    // A superseded run reports its own outcome to its own caller and never\n    // repaints the state a newer run owns.\n    if (seq !== seqRef.current) return outcome\n    if (inFlightRef.current) inFlightRef.current.pending = false\n\n    if (outcome.succeeded) {\n      setState({ status: 'succeeded', value: outcome.value })\n      options.current.onSucceeded?.(outcome.value)\n    } else {\n      setState({ status: 'failed', message: outcome.message, error: outcome.error })\n      options.current.onFailed?.(outcome.message, outcome.error)\n    }\n    return outcome\n  }, [])\n\n  const reset = useCallback(() => {\n    seqRef.current += 1\n    inFlightRef.current?.controller.abort()\n    inFlightRef.current = null\n    setState({ status: 'idle' })\n  }, [])\n\n  return useMemo(() => ({ state, run, reset }), [state, run, reset])\n}\n","import { isValidElement, type ReactElement, type ReactNode } from 'react'\n\nimport { Button, EmptyState } from '@tangle-network/ui/primitives'\n\nimport type { AsyncResourceState } from './state'\nimport type { MutationState } from './use-confirmed-mutation'\n\nexport interface AsyncEmptyAction {\n  label: string\n  onClick: () => void\n}\n\nexport interface AsyncEmptySpec {\n  /** What is not there, in the reader's words (\"No templates yet\"). Required:\n   *  an empty state with nothing to say is the state this module exists to\n   *  stop being mistaken for a failure. */\n  title: string\n  description?: string\n  /** The next action. An element is rendered as supplied (a link, a dialog\n   *  trigger); the object form renders the standard button. */\n  action?: AsyncEmptyAction | ReactElement\n}\n\nexport interface AsyncErrorRenderProps {\n  message: string\n  retry: () => void\n}\n\nexport interface AsyncViewProps<T> {\n  state: AsyncResourceState<T>\n  /** Rendered only for `ready`, with the loaded value — the branch cannot be\n   *  entered without one. */\n  children: (value: T) => ReactNode\n  /** Required: `empty` must name what is missing and what to do about it. */\n  empty: AsyncEmptySpec | ReactElement\n  /** Must return an element. Returning nothing is what produced the blank\n   *  screens this component replaces, so a nullish return falls back to the\n   *  built-in block rather than rendering nothing. */\n  renderLoading?: () => ReactElement\n  renderError?: (props: AsyncErrorRenderProps) => ReactElement\n  /** `idle` renders the loading block by default — from the reader's side,\n   *  \"not started\" and \"in flight\" are the same wait. */\n  renderIdle?: () => ReactElement\n  loadingLabel?: string\n  retryLabel?: string\n  /** Applied to the wrapper around the non-`ready` branches. `ready` renders the\n   *  children with no wrapper element, so grids and lists keep their layout. */\n  className?: string\n}\n\nconst BLOCK_CLASS = 'flex flex-col items-center justify-center gap-2 px-4 py-10 text-center'\n\n/**\n * Renders the branch the state is actually in.\n *\n * The three anti-patterns this replaces (`catch` that only clears a loading\n * flag, early return on a non-ok response, bare `null` while loading) all end at\n * the same rendered output as a successful-but-empty load. Here every branch is\n * reached from a different variant and each renders visibly: `loading` and\n * `idle` render a labelled busy block, `error` renders the message plus the\n * retry, `empty` renders the caller's copy and next action, and `ready` is the\n * only branch with a value to hand to `children`.\n */\nexport function AsyncView<T>({\n  state,\n  children,\n  empty,\n  renderLoading,\n  renderError,\n  renderIdle,\n  loadingLabel = 'Loading…',\n  retryLabel = 'Retry',\n  className,\n}: AsyncViewProps<T>): ReactElement {\n  if (state.status === 'ready') return <>{children(state.value)}</>\n\n  // Every `??` here is the guarantee: a custom renderer that returns nothing\n  // leaves the reader with the built-in block, never a blank region.\n  const branch = (): ReactNode => {\n    switch (state.status) {\n      case 'idle':\n        return renderIdle?.() ?? <LoadingBlock label={loadingLabel} />\n      case 'loading':\n        return renderLoading?.() ?? <LoadingBlock label={loadingLabel} />\n      case 'error':\n        return (\n          renderError?.({ message: state.message, retry: state.retry }) ?? (\n            <ErrorBlock message={state.message} retry={state.retry} retryLabel={retryLabel} />\n          )\n        )\n      case 'empty':\n        if (isValidElement(empty)) return empty\n        return typeof empty === 'object' && empty !== null && typeof empty.title === 'string' ? (\n          <EmptyBlock spec={empty} />\n        ) : (\n          <EmptyBlock spec={{ title: 'Nothing here yet.' }} />\n        )\n    }\n  }\n\n  // The busy signal lives on the WRAPPER, not inside the loading block, for the\n  // same reason every `??` above exists: `renderLoading` is an escape hatch, and\n  // a caller filling it with their own spinner would otherwise take the\n  // announcement with them — a screen reader would hear nothing for exactly the\n  // products that styled their wait state. The wrapper wraps every non-`ready`\n  // branch, so it cannot be opted out of.\n  //\n  // `aria-busy` is emitted in BOTH states rather than only while loading: a\n  // region that gains the attribute at the moment it goes busy, and drops it on\n  // arrival, gives assistive tech no transition to report. The `error` branch\n  // keeps its own `role=\"alert\"` and takes no live region here, because nesting\n  // one inside another is what produces a doubled announcement.\n  const busy = state.status === 'loading' || state.status === 'idle'\n  const failed = state.status === 'error'\n  return (\n    <div\n      data-async-state={state.status}\n      className={className}\n      role={failed ? undefined : 'status'}\n      aria-live={failed ? undefined : 'polite'}\n      aria-busy={busy}\n    >\n      {branch()}\n    </div>\n  )\n}\n\nfunction LoadingBlock({ label }: { label: string }): ReactElement {\n  return (\n    <div className={BLOCK_CLASS}>\n      <span className=\"text-sm text-muted-foreground\">{label}</span>\n    </div>\n  )\n}\n\nfunction ErrorBlock({\n  message,\n  retry,\n  retryLabel,\n}: {\n  message: string\n  retry: () => void\n  retryLabel: string\n}): ReactElement {\n  return (\n    <div role=\"alert\" className={BLOCK_CLASS}>\n      <p className=\"max-w-md text-sm text-muted-foreground\">{message}</p>\n      <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={retry}>{retryLabel}</Button>\n    </div>\n  )\n}\n\nfunction EmptyBlock({ spec }: { spec: AsyncEmptySpec }): ReactElement {\n  const action = spec.action\n  return <EmptyState title={spec.title} description={spec.description} action={\n    isValidElement(action) ? action : action ? <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={(action as AsyncEmptyAction).onClick}>{(action as AsyncEmptyAction).label}</Button> : undefined\n  } />\n}\n\nexport interface MutationStatusLabels {\n  pending?: string\n  succeeded?: string\n}\n\nexport interface MutationStatusProps<T> {\n  state: MutationState<T>\n  labels?: MutationStatusLabels\n  className?: string\n}\n\n/**\n * The write's own status line. \"Saved\" renders only from `succeeded`, which\n * `useConfirmedMutation` can only reach through a confirmed write, so the label\n * cannot appear over a failed request.\n */\nexport function MutationStatus<T>({ state, labels, className }: MutationStatusProps<T>): ReactElement | null {\n  if (state.status === 'idle') return null\n  if (state.status === 'pending') {\n    return (\n      <span role=\"status\" aria-live=\"polite\" aria-busy={true} className={className ?? 'text-xs text-muted-foreground'}>\n        {labels?.pending ?? 'Saving…'}\n      </span>\n    )\n  }\n  if (state.status === 'succeeded') {\n    return (\n      <span role=\"status\" aria-live=\"polite\" aria-busy={false} className={className ?? 'text-xs text-muted-foreground'}>\n        {labels?.succeeded ?? 'Saved'}\n      </span>\n    )\n  }\n  return (\n    <span role=\"alert\" className={className ?? 'text-xs text-destructive'}>\n      {state.message}\n    </span>\n  )\n}\n"],"mappings":"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","names":["useCallback","useMemo","useRef","useState","useRef","useState","useCallback","useMemo"]}

package/dist/{chunk-IAFPBYQQ.js → chunk-QGOGX3DL.js}

@@ -31,7 +31,7 @@ import {
 } from "./chunk-TJ4DYKF2.js";
 import {
   AsyncView
-} from "./chunk-LSUELMHY.js";
+} from "./chunk-LN5RBVGP.js";
 import {
   attachmentPartsFromMessageParts
 } from "./chunk-YR6TZ777.js";
@@ -60,6 +60,7 @@ import {
 // src/web-react/index.tsx
 import { useEffect as useEffect15, useMemo as useMemo8, useRef as useRef14, useState as useState21, memo } from "react";
 import { isViewerMessage, MessageAuthor, TRANSCRIPT_TEXT } from "@tangle-network/ui/chat";
+import { TerminalDisplay, TerminalLine } from "@tangle-network/ui/primitives";
 import { InlineToolItem } from "@tangle-network/ui/run";
 
 // src/web-react/smooth-text.ts
@@ -3501,6 +3502,7 @@ import {
   useRef as useRef10,
   useState as useState16
 } from "react";
+import { Button as Button3, EmptyState, Skeleton, Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell } from "@tangle-network/ui/primitives";
 
 // src/web-react/record-grid-model.ts
 function recordGridOk(value) {
@@ -4181,7 +4183,7 @@ function RecordGrid({
               "Loading ",
               caption
             ] }),
-            Array.from({ length: Math.max(1, loadingRowCount) }, (_, index) => /* @__PURE__ */ jsx14("div", { className: "h-8 animate-pulse rounded-md bg-secondary", "aria-hidden": true }, index))
+            Array.from({ length: Math.max(1, loadingRowCount) }, (_, index) => /* @__PURE__ */ jsx14(Skeleton, { className: "h-8", "aria-hidden": true }, index))
           ]
         }
       )
@@ -4225,30 +4227,18 @@ function RecordGrid({
   if (visibleRows.length === 0 && !reviewing) {
     return /* @__PURE__ */ jsxs12("div", { className: `space-y-3 ${className ?? ""}`, children: [
       toolbar,
-      addForm ?? /* @__PURE__ */ jsxs12("div", { className: "rounded-xl border border-dashed border-border px-6 py-10 text-center", children: [
-        /* @__PURE__ */ jsx14("p", { className: "text-sm font-medium text-foreground", children: empty.title }),
-        empty.description && /* @__PURE__ */ jsx14("p", { className: "mx-auto mt-1 max-w-md text-sm text-muted-foreground", children: empty.description }),
-        /* @__PURE__ */ jsxs12("div", { className: "mt-4 flex flex-wrap items-center justify-center gap-2", children: [
-          empty.action && (isValidElement(empty.action) ? empty.action : /* @__PURE__ */ jsx14(
-            "button",
-            {
-              type: "button",
-              onClick: empty.action.onClick,
-              className: "rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition hover:bg-accent",
-              children: empty.action.label
-            }
-          )),
-          onCreate && /* @__PURE__ */ jsx14(
-            "button",
-            {
-              type: "button",
-              onClick: openAdd,
-              className: "rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition hover:bg-accent",
-              children: addLabel
-            }
-          )
-        ] })
-      ] })
+      addForm ?? /* @__PURE__ */ jsx14(
+        EmptyState,
+        {
+          title: empty.title,
+          description: empty.description,
+          className: "rounded-xl border border-dashed border-border",
+          action: /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+            empty.action && (isValidElement(empty.action) ? empty.action : /* @__PURE__ */ jsx14(Button3, { type: "button", variant: "outline", size: "sm", onClick: empty.action.onClick, children: empty.action.label })),
+            onCreate && /* @__PURE__ */ jsx14(Button3, { type: "button", variant: "outline", size: "sm", onClick: openAdd, children: addLabel })
+          ] })
+        }
+      )
     ] });
   }
   const hasFooter = columns.some((column) => column.footerValue !== void 0);
@@ -4302,27 +4292,28 @@ function RecordGrid({
     toolbar,
     reviewBar,
     /* @__PURE__ */ jsx14("div", { className: "overflow-x-auto rounded-xl border border-card-edge bg-card", children: /* @__PURE__ */ jsxs12(
-      "table",
+      Table,
       {
+        wrapper: false,
         role: "grid",
         "aria-label": caption,
-        className: "w-full border-collapse text-left text-sm",
+        className: "border-collapse text-left",
         onKeyDown: handleGridKeyDown,
         children: [
-          /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsxs12("tr", { role: "row", className: "border-b border-border text-xs uppercase tracking-[0.05em] text-muted-foreground", children: [
+          /* @__PURE__ */ jsx14(TableHeader, { children: /* @__PURE__ */ jsxs12(TableRow, { role: "row", className: "text-xs uppercase tracking-[0.05em] text-muted-foreground", children: [
             columns.map((column) => /* @__PURE__ */ jsx14(
-              "th",
+              TableHead,
               {
                 role: "columnheader",
                 scope: "col",
-                className: `px-3 py-2 font-medium ${alignmentClass(column)}`,
+                className: `h-auto px-3 py-2 ${alignmentClass(column)}`,
                 children: column.header
               },
               column.id
             )),
-            showActionsColumn && /* @__PURE__ */ jsx14("th", { role: "columnheader", scope: "col", className: "w-px px-3 py-2 font-medium", children: /* @__PURE__ */ jsx14("span", { className: "sr-only", children: reviewing ? "Review" : "Row actions" }) })
+            showActionsColumn && /* @__PURE__ */ jsx14(TableHead, { role: "columnheader", scope: "col", className: "h-auto w-px px-3 py-2", children: /* @__PURE__ */ jsx14("span", { className: "sr-only", children: reviewing ? "Review" : "Row actions" }) })
           ] }) }),
-          /* @__PURE__ */ jsxs12("tbody", { children: [
+          /* @__PURE__ */ jsxs12(TableBody, { children: [
             visibleRows.map((row) => {
               const rowLabel = recordGridRowLabel(columns, row);
               const pending = row.id in pendingRows;
@@ -4331,12 +4322,12 @@ function RecordGrid({
               const removedRow = rowDiff?.kind === "removed";
               return /* @__PURE__ */ jsxs12(Fragment4, { children: [
                 /* @__PURE__ */ jsxs12(
-                  "tr",
+                  TableRow,
                   {
                     role: "row",
                     "aria-busy": pending,
                     "data-record-grid-diff": rowDiff?.kind,
-                    className: `border-b border-border ${pending ? "opacity-60" : ""} ${removedRow ? "bg-destructive/[0.06]" : ""}`,
+                    className: `${pending ? "opacity-60" : ""} ${removedRow ? "bg-destructive/[0.06]" : ""}`,
                     children: [
                       columns.map((column) => {
                         const key = cellKey(row.id, column.id);
@@ -4350,7 +4341,7 @@ function RecordGrid({
                         const errorId = `${fieldPrefix}-cell-error-${row.id}-${column.id}`;
                         const cellDiff = rowDiff?.kind === "changed" ? diffCellByKey.get(key) : void 0;
                         if (isEditing && editable) {
-                          return /* @__PURE__ */ jsxs12("td", { role: "gridcell", className: `px-3 py-1.5 ${alignmentClass(column)}`, children: [
+                          return /* @__PURE__ */ jsxs12(TableCell, { role: "gridcell", className: `px-3 py-1.5 ${alignmentClass(column)}`, children: [
                             /* @__PURE__ */ jsx14(
                               CellEditor,
                               {
@@ -4368,7 +4359,7 @@ function RecordGrid({
                           ] }, column.id);
                         }
                         if (column.kind === "boolean" && editable) {
-                          return /* @__PURE__ */ jsx14("td", { role: "gridcell", className: `px-3 py-2 ${alignmentClass(column)}`, children: /* @__PURE__ */ jsx14(
+                          return /* @__PURE__ */ jsx14(TableCell, { role: "gridcell", className: `px-3 py-2 ${alignmentClass(column)}`, children: /* @__PURE__ */ jsx14(
                             "input",
                             {
                               type: "checkbox",
@@ -4388,7 +4379,7 @@ function RecordGrid({
                         }
                         const display = applicable ? formatRecordGridValue(column, value, locale) : "";
                         return /* @__PURE__ */ jsx14(
-                          "td",
+                          TableCell,
                           {
                             role: "gridcell",
                             "aria-readonly": editable ? void 0 : true,
@@ -4434,7 +4425,7 @@ function RecordGrid({
                           column.id
                         );
                       }),
-                      showActionsColumn && /* @__PURE__ */ jsx14("td", { role: "gridcell", className: "px-3 py-2 text-right", children: reviewing ? rowDiff && /* @__PURE__ */ jsx14(
+                      showActionsColumn && /* @__PURE__ */ jsx14(TableCell, { role: "gridcell", className: "px-3 py-2 text-right", children: reviewing ? rowDiff && /* @__PURE__ */ jsx14(
                         ReviewActions,
                         {
                           rowId: row.id,
@@ -4493,23 +4484,23 @@ function RecordGrid({
                     ]
                   }
                 ),
-                rowError !== void 0 && /* @__PURE__ */ jsx14("tr", { role: "row", className: "border-b border-border", children: /* @__PURE__ */ jsx14("td", { role: "gridcell", colSpan: columnSpan, className: "px-3 pb-2", children: /* @__PURE__ */ jsx14("p", { role: "alert", className: "rounded-md bg-destructive/10 px-2.5 py-1.5 text-xs text-destructive", children: rowError }) }) })
+                rowError !== void 0 && /* @__PURE__ */ jsx14(TableRow, { role: "row", children: /* @__PURE__ */ jsx14(TableCell, { role: "gridcell", colSpan: columnSpan, className: "px-3 pb-2", children: /* @__PURE__ */ jsx14("p", { role: "alert", className: "rounded-md bg-destructive/10 px-2.5 py-1.5 text-xs text-destructive", children: rowError }) }) })
               ] }, row.id);
             }),
             reviewing && addedRows.map((row) => {
               const rowLabel = recordGridRowLabel(columns, row);
               return /* @__PURE__ */ jsxs12(
-                "tr",
+                TableRow,
                 {
                   role: "row",
                   "data-record-grid-diff": "added",
-                  className: "border-b border-border bg-success/[0.06]",
+                  className: "bg-success/[0.06]",
                   children: [
                     columns.map((column, columnIndex) => {
                       const applicable = isRecordGridCellApplicable(column, row.values);
                       const value = row.values[column.id] ?? null;
                       const display = applicable ? formatRecordGridValue(column, value, locale) : "";
-                      return /* @__PURE__ */ jsx14("td", { role: "gridcell", className: `px-3 py-2 ${alignmentClass(column)}`, children: /* @__PURE__ */ jsxs12("span", { className: "inline-flex max-w-full items-center gap-1.5", children: [
+                      return /* @__PURE__ */ jsx14(TableCell, { role: "gridcell", className: `px-3 py-2 ${alignmentClass(column)}`, children: /* @__PURE__ */ jsxs12("span", { className: "inline-flex max-w-full items-center gap-1.5", children: [
                         columnIndex === 0 && /* @__PURE__ */ jsx14("span", { className: "inline-flex shrink-0 rounded border border-success/60 px-1 py-px text-[11px] font-semibold uppercase tracking-[0.05em] text-success", children: "New" }),
                         /* @__PURE__ */ jsx14(
                           "span",
@@ -4520,7 +4511,7 @@ function RecordGrid({
                         )
                       ] }) }, column.id);
                     }),
-                    /* @__PURE__ */ jsx14("td", { role: "gridcell", className: "px-3 py-2 text-right", children: /* @__PURE__ */ jsx14(
+                    /* @__PURE__ */ jsx14(TableCell, { role: "gridcell", className: "px-3 py-2 text-right", children: /* @__PURE__ */ jsx14(
                       ReviewActions,
                       {
                         rowId: row.id,
@@ -4536,9 +4527,9 @@ function RecordGrid({
               );
             })
           ] }),
-          hasFooter && /* @__PURE__ */ jsx14("tfoot", { children: /* @__PURE__ */ jsxs12("tr", { role: "row", className: "border-t-2 border-border", children: [
+          hasFooter && /* @__PURE__ */ jsx14(TableFooter, { children: /* @__PURE__ */ jsxs12(TableRow, { role: "row", className: "border-t-2 border-border", children: [
             columns.map((column) => /* @__PURE__ */ jsx14(
-              "td",
+              TableCell,
               {
                 role: "gridcell",
                 className: `px-3 py-2 text-sm font-semibold text-foreground ${alignmentClass(column)}`,
@@ -4546,7 +4537,7 @@ function RecordGrid({
               },
               column.id
             )),
-            showActionsColumn && /* @__PURE__ */ jsx14("td", { role: "gridcell" })
+            showActionsColumn && /* @__PURE__ */ jsx14(TableCell, { role: "gridcell" })
           ] }) })
         ]
       }
@@ -5682,12 +5673,9 @@ function PagerButton({
 
 // src/web-react/api-access-panel.tsx
 import { useEffect as useEffect14, useRef as useRef13, useState as useState19 } from "react";
-import { PageHeader } from "@tangle-network/ui/primitives";
+import { Button as Button4, Input, PageHeader } from "@tangle-network/ui/primitives";
 import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 var defaultExpiryChoices = [1, 7, 30];
-var inputClass = "h-11 w-full rounded-lg border border-input bg-background px-3 text-sm text-foreground";
-var buttonClass = "inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground disabled:opacity-50";
-var outlineClass = "inline-flex items-center justify-center rounded-lg border border-input bg-background px-3 py-2 text-sm font-medium text-foreground disabled:opacity-50";
 function pruneScopes(scopes, access) {
   const offered = new Map(access.map((option) => [option.scope, option]));
   const selected = new Set(scopes.filter((scope) => offered.has(scope)));
@@ -5825,8 +5813,8 @@ function ApiAccessPanel({
       /* @__PURE__ */ jsx18("h2", { ref: keyHeading, tabIndex: -1, id: "save-api-key", className: "font-medium outline-none", children: "Save your key" }),
       /* @__PURE__ */ jsx18("p", { className: "text-sm text-muted-foreground", children: "Copy it directly into your client\u2019s secret storage. It is shown only now. Keep it out of chat messages and prompts." }),
       /* @__PURE__ */ jsxs16("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx18("input", { "aria-label": "New API key", type: "password", value: created.key, readOnly: true, autoComplete: "off", className: `${inputClass} min-w-0 font-mono` }),
-        /* @__PURE__ */ jsx18("button", { className: buttonClass, onClick: async () => {
+        /* @__PURE__ */ jsx18(Input, { size: "lg", "aria-label": "New API key", type: "password", value: created.key, readOnly: true, autoComplete: "off", className: "min-w-0 font-mono" }),
+        /* @__PURE__ */ jsx18(Button4, { onClick: async () => {
           try {
             await navigator.clipboard.writeText(created.key);
             setNotice("Key copied");
@@ -5835,7 +5823,7 @@ function ApiAccessPanel({
           }
         }, children: "Copy key" })
       ] }),
-      /* @__PURE__ */ jsx18("button", { className: outlineClass, onClick: () => {
+      /* @__PURE__ */ jsx18(Button4, { variant: "outline", onClick: () => {
         setCreated(null);
         setNotice(null);
       }, children: "I\u2019ve saved it" })
@@ -5844,7 +5832,7 @@ function ApiAccessPanel({
       /* @__PURE__ */ jsxs16("div", { className: "grid gap-4 sm:grid-cols-[1fr_10rem]", children: [
         /* @__PURE__ */ jsxs16("div", { className: "space-y-1.5", children: [
           /* @__PURE__ */ jsx18("label", { className: "text-sm font-medium", htmlFor: "key-name", children: "Name" }),
-          /* @__PURE__ */ jsx18("input", { ref: nameInput, id: "key-name", className: inputClass, value: name, onChange: (event) => setName(event.target.value), placeholder: "Client on my server", maxLength: 100, required: true, autoComplete: "off" })
+          /* @__PURE__ */ jsx18(Input, { size: "lg", ref: nameInput, id: "key-name", value: name, onChange: (event) => setName(event.target.value), placeholder: "Client on my server", maxLength: 100, required: true, autoComplete: "off" })
         ] }),
         /* @__PURE__ */ jsxs16("div", { className: "space-y-1.5", children: [
           /* @__PURE__ */ jsx18("label", { className: "text-sm font-medium", htmlFor: "key-expiry", children: "Expires in" }),
@@ -5893,7 +5881,7 @@ function ApiAccessPanel({
         })
       ] }),
       limitsDescription && /* @__PURE__ */ jsx18("p", { className: "text-sm text-muted-foreground", children: limitsDescription }),
-      /* @__PURE__ */ jsx18("button", { className: buttonClass, type: "submit", disabled: creating || !name.trim() || !selectedScopes.length || selectedDays === void 0, children: creating ? "Creating\u2026" : "Create key" })
+      /* @__PURE__ */ jsx18(Button4, { type: "submit", disabled: creating || !name.trim() || !selectedScopes.length || selectedDays === void 0, children: creating ? "Creating\u2026" : "Create key" })
     ] }),
     /* @__PURE__ */ jsxs16("section", { "aria-labelledby": "existing-keys", className: "space-y-3", children: [
       /* @__PURE__ */ jsx18("h2", { id: "existing-keys", className: "font-medium", children: "Your keys" }),
@@ -5904,7 +5892,7 @@ function ApiAccessPanel({
           /* @__PURE__ */ jsx18("p", { className: "text-sm text-muted-foreground", children: key.scopes.map((scope) => access.find((access2) => access2.scope === scope)?.label ?? scope).join(" \xB7 ") }),
           workspaces && /* @__PURE__ */ jsx18("p", { className: "text-sm text-muted-foreground", children: key.workspaceIds?.length ? `Only ${key.workspaceIds.map(workspaceName).join(", ")}` : `All ${workspaceNoun.plural}` })
         ] }),
-        /* @__PURE__ */ jsx18("button", { className: outlineClass, disabled: revoking !== null, onClick: () => revokeKey(key.id), "aria-label": `Revoke ${key.name}`, children: revoking === key.id ? "Revoking\u2026" : "Revoke" })
+        /* @__PURE__ */ jsx18(Button4, { variant: "outline", disabled: revoking !== null, onClick: () => revokeKey(key.id), "aria-label": `Revoke ${key.name}`, children: revoking === key.id ? "Revoking\u2026" : "Revoke" })
       ] }, key.id)) })
     ] }),
     /* @__PURE__ */ jsxs16("p", { className: "text-sm text-muted-foreground", children: [
@@ -6242,16 +6230,13 @@ function KvRows({ data }) {
 function ShellDetail({ call }) {
   const outcome = toolOutcomeOf(call);
   const r = outcome?.result ?? {};
-  return /* @__PURE__ */ jsxs19("div", { className: "overflow-hidden rounded-md bg-zinc-900 font-mono text-xs leading-relaxed", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2 px-3 pt-2 text-zinc-400", children: [
-      /* @__PURE__ */ jsx22("span", { className: "select-none text-zinc-500", children: "$" }),
-      /* @__PURE__ */ jsx22("span", { className: "min-w-0 flex-1 truncate text-zinc-200", children: String(call.args?.command ?? "") }),
-      r.exitCode != null && /* @__PURE__ */ jsxs19("span", { className: r.exitCode === 0 ? "text-success" : "text-destructive", children: [
-        "exit ",
-        r.exitCode
-      ] })
+  return /* @__PURE__ */ jsxs19(TerminalDisplay, { showHeader: false, autoScroll: false, maxHeight: "14rem", className: "text-xs", children: [
+    /* @__PURE__ */ jsx22(TerminalLine, { type: "command", children: String(call.args?.command ?? "") }),
+    r.exitCode != null && /* @__PURE__ */ jsxs19(TerminalLine, { type: r.exitCode === 0 ? "success" : "error", children: [
+      "exit ",
+      r.exitCode
     ] }),
-    /* @__PURE__ */ jsx22("pre", { className: "max-h-56 overflow-auto whitespace-pre-wrap px-3 pb-2.5 pt-1.5 text-zinc-300", children: outcome?.ok === false ? outcome.message ?? "failed" : [r.stdout, r.stderr].filter(Boolean).join("\n") || "(no output)" })
+    /* @__PURE__ */ jsx22(TerminalLine, { type: outcome?.ok === false ? "error" : "output", children: outcome?.ok === false ? outcome.message ?? "failed" : [r.stdout, r.stderr].filter(Boolean).join("\n") || "(no output)" })
   ] });
 }
 function DefaultToolDetail({ call }) {
@@ -7016,4 +7001,4 @@ export {
   useThinkingSeconds,
   ChatMessages
 };
-//# sourceMappingURL=chunk-IAFPBYQQ.js.map
+//# sourceMappingURL=chunk-QGOGX3DL.js.map