@adea-ai/ui 0.140.0 → 0.142.0

package/src/components/ui/code-block/code-block.tsx

@@ -1,7 +1,11 @@
 import {
+  createEffect,
   createMemo,
   createSignal,
   For,
+  on,
+  onCleanup,
+  onMount,
   Show,
   splitProps,
   type ComponentProps,
@@ -38,8 +42,9 @@ import { cn } from '#lib/utils'
  * **The scroller is focusable and named.** A horizontally scrollable region has
  * to be reachable by keyboard — this is axe's `scrollable-region-focusable`, and
  * a region that scrolls but cannot be focused is a WCAG 2.1.1 failure. It is a
- * `region` with a label rather than a bare `tabindex`, so the tab stop announces
- * what it is.
+ * labelled `group` rather than a bare `tabindex`, so the tab stop announces what
+ * it is. It is deliberately not a `region` landmark: a transcript holds many
+ * blocks, often in one language, and repeated landmarks of one name are noise.
  *
  * **Resolving a streaming block must not move the reader.** When `complete` is
  * false the block shows the code it has plus a generating indicator; the
@@ -47,8 +52,35 @@ import { cn } from '#lib/utils'
  * block that grows the moment its content resolves shifts everything below it.
  * If a caller's `highlight` changes the line box, that is the caller's height to
  * hold — `lineHeight` is a prop for exactly that reason.
+ *
+ * ## Output, not only source
+ *
+ * The same surface carries terminal output, logs and diffs inside an agent's
+ * activity, so it also:
+ *
+ * - **loads its highlighter lazily** (`loadHighlight`). The grammar is fetched
+ *   only for a block that is complete and has a language, the block renders plain
+ *   until it arrives, and a loader that returns nothing — an unknown language, a
+ *   failed fetch — leaves the plain text in place without an error. Highlighting
+ *   a block on every streamed delta would re-tokenise the whole thing per token,
+ *   so a streaming block stays plain until `complete`.
+ * - **marks lines** (`lineMarks`) as added, removed, highlighted or failed. A mark
+ *   is carried by a gutter glyph and by `<ins>`/`<del>` for the two that change
+ *   text, never by colour alone, and the glyph is not selectable so a copied
+ *   selection stays the source.
+ * - **copies the source exactly.** The copy button writes `code` as given: no
+ *   trailing-newline trimming, no line numbers, no gutter glyphs, and the whole
+ *   block even when only part of it is rendered (`lineLimit`).
+ * - **bounds a large render.** Past `lineLimit` lines the per-line renderer and a
+ *   highlighted render show the first lines and a control to show the rest,
+ *   because tens of thousands of row elements, or a tokenizer run over all of
+ *   them, are a freeze, not a transcript. Which renderer is in use is decided
+ *   at the time, so a highlighter that loads late takes over the bound from the
+ *   per-line rows and the note below the block always describes what is drawn.
+ *   The plain renderer is a single text node and needs no limit.
+ * - **comes in a small size** (`size="sm"`) for tool output inside a Trace line.
  */
-export type CodeBlockProps = Omit<ComponentProps<'div'>, 'children'> & {
+export type CodeBlockProps = Omit<ComponentProps<'div'>, 'children' | 'onCopy'> & {
   code: string
   /** The language, shown in the header and used as the region's label. */
   language?: string
@@ -82,8 +114,35 @@ export type CodeBlockProps = Omit<ComponentProps<'div'>, 'children'> & {
    * any `pre` inside `highlight` output; line numbers stay on the first visual line.
    */
   wrap?: boolean
+  /** `sm` is the compact chrome for output nested inside a Trace line. */
+  size?: 'default' | 'sm'
+  /**
+   * Marks on 1-based line numbers. Applies to the per-line renderer, which is
+   * used whenever marks or line numbers are present and no highlighter is in use,
+   * given as `highlight` or loaded by `loadHighlight`: a highlighter replaces the
+   * rows, so the marks and the gutter go with them.
+   */
+  lineMarks?: Readonly<Record<number, CodeLineMark>>
+  /**
+   * Resolve a highlighter for the block's language. Called once the block is
+   * complete; resolving to `undefined` (or rejecting) keeps the plain rendering.
+   */
+  loadHighlight?: (language: string | undefined) => Promise<CodeHighlighter | undefined>
+  /**
+   * Lines the per-line and the highlighted renderer show before offering the
+   * rest. Default 2000. The plain renderer is one text node and is not limited.
+   */
+  lineLimit?: number
+  /** Called after each copy attempt with whether the clipboard accepted it. */
+  onCopy?: (ok: boolean) => void
 }
 
+export type CodeLineMark = 'add' | 'remove' | 'highlight' | 'error'
+export type CodeHighlighter = (code: string) => JSX.Element
+
+/** Lines the per-line renderer shows before it offers the rest. */
+export const CODE_BLOCK_LINE_LIMIT = 2_000
+
 /** The height a block must exceed before its actions are repeated. */
 export const TALL_CODE_BLOCK_PX = 480
 
@@ -118,6 +177,11 @@ export function CodeBlock(props: CodeBlockProps) {
     'tallThreshold',
     'maxHeight',
     'wrap',
+    'size',
+    'lineMarks',
+    'loadHighlight',
+    'lineLimit',
+    'onCopy',
     'class',
     'ref',
   ])
@@ -126,9 +190,52 @@ export function CodeBlock(props: CodeBlockProps) {
   const [failed, setFailed] = createSignal(false)
   const [tall, setTall] = createSignal(false)
 
-  const label = () => local.title ?? local.language ?? 'code'
-  const regionLabel = () => (local.language ? `${local.language} code` : 'code')
+  const [loaded, setLoaded] = createSignal<CodeHighlighter>()
+  const [showAll, setShowAll] = createSignal(false)
+  let bodyElement: HTMLDivElement | undefined
+
+  // A language string can come from untrusted model output. It is rendered as
+  // text, so it cannot inject markup; the cap keeps a pathological one from
+  // swallowing the header.
+  const language = () => local.language?.trim().slice(0, 40) || undefined
+  const label = () => local.title ?? language() ?? 'code'
+  const groupLabel = () => (language() ? `${language()} code` : 'code')
+  const small = () => local.size === 'sm'
   const lines = createMemo(() => local.code.replace(/\n$/, '').split('\n'))
+  const lineLimit = () => local.lineLimit ?? CODE_BLOCK_LINE_LIMIT
+  const visibleLines = createMemo(() => (showAll() ? lines() : lines().slice(0, lineLimit())))
+  const hiddenLines = () => lines().length - visibleLines().length
+
+  // Load once the block has stopped changing. `on` keys the effect to the
+  // language and completion, not to every streamed character, and a stale
+  // resolution (the language changed while the grammar was in flight) is dropped.
+  createEffect(
+    on(
+      () => [local.complete, language(), local.loadHighlight] as const,
+      ([complete, lang, load]) => {
+        setLoaded(undefined)
+        if (!complete || !load || local.highlight) return
+        let current = true
+        onCleanup(() => (current = false))
+        // Wrapped, not called bare: a loader that throws before it returns a promise
+        // (a bad import path, a missing grammar table) must degrade to plain text
+        // like one that rejects, not tear down the tree from inside this effect.
+        new Promise<CodeHighlighter | undefined>((resolve) => resolve(load(lang))).then(
+          (highlighter) => {
+            if (current && highlighter) setLoaded(() => highlighter)
+          },
+          () => undefined
+        )
+      }
+    )
+  )
+  const highlighter = (): CodeHighlighter | undefined => local.highlight ?? loaded()
+  // The renderer in use decides everything about the limit, not the props alone:
+  // a highlighter that has loaded since the first render replaces the per-line
+  // rows, so what is drawn, and what the footer may say, follows `highlighter()`.
+  const perLine = () =>
+    highlighter() === undefined && (local.showLineNumbers === true || local.lineMarks !== undefined)
+  const truncated = () => hiddenLines() > 0 && (highlighter() !== undefined || perLine())
   const maxHeight = () =>
     typeof local.maxHeight === 'number' ? `${local.maxHeight}px` : local.maxHeight
 
@@ -136,15 +243,17 @@ export function CodeBlock(props: CodeBlockProps) {
     const ok = await copyText(local.code)
     setCopied(ok)
     setFailed(!ok)
+    local.onCopy?.(ok)
     if (ok) setTimeout(() => setCopied(false), 1500)
   }
 
   const Actions = () => (
-    <div class="flex items-center gap-1 opacity-0 transition-opacity group-focus-within/code:opacity-100 group-hover/code:opacity-100">
+    <div class="flex items-center gap-1 opacity-0 transition-opacity group-focus-within/code:opacity-100 group-hover/code:opacity-100 [@media(hover:none)]:opacity-100">
       {local.actions}
       <Button
         variant="ghost"
         size="icon-2xs"
+        touchTarget="comfortable"
         aria-label={copied() ? (local.copiedLabel ?? 'Copied') : (local.copyLabel ?? 'Copy code')}
         title={failed() ? 'Copying is unavailable in this context' : undefined}
         onClick={() => void copy()}
@@ -158,7 +267,13 @@ export function CodeBlock(props: CodeBlockProps) {
 
   return (
     <div
-      class={cn('group/code overflow-hidden rounded-xl border border-border bg-card', local.class)}
+      data-slot="code-block"
+      data-size={local.size ?? 'default'}
+      class={cn(
+        'group/code overflow-hidden border border-border bg-card',
+        small() ? 'rounded-lg' : 'rounded-xl',
+        local.class
+      )}
       {...rest}
       ref={(element) => {
         // Composed rather than replaced: a caller's ref must survive.
@@ -166,17 +281,33 @@ export function CodeBlock(props: CodeBlockProps) {
         else if (local.ref) local.ref = element
         // Measured rather than assumed: the caller controls the content, so only
         // the rendered box can say whether the action row has scrolled away.
+        // The body is what is watched, not the block: the repeated action row is
+        // added to the block, so watching the block made this callback resize the
+        // very element it observes, which is a ResizeObserver loop (WebKit reports
+        // it as an uncaught "loop completed with undelivered notifications" error).
+        // The footer's own height is left out of the measure for the same reason: a
+        // block is tall by its content, not by the row that tallness adds.
         const observer = new ResizeObserver(() => {
-          setTall(element.offsetHeight > (local.tallThreshold ?? TALL_CODE_BLOCK_PX))
+          const footer = element.querySelector<HTMLElement>('[data-code-block-footer]')
+          setTall(
+            element.offsetHeight - (footer?.offsetHeight ?? 0) >
+              (local.tallThreshold ?? TALL_CODE_BLOCK_PX)
+          )
+        })
+        onMount(() => {
+          if (bodyElement) observer.observe(bodyElement)
         })
-        observer.observe(element)
+        onCleanup(() => observer.disconnect())
       }}
     >
-      <div class="flex items-center justify-between gap-2 px-3 py-1">
+      <div
+        class={cn('flex items-center justify-between gap-2', small() ? 'px-2 py-0.5' : 'px-3 py-1')}
+      >
         <span class="truncate font-code text-code text-muted-foreground">{label()}</span>
         <Actions />
       </div>
       <div
+        ref={(element) => (bodyElement = element)}
         data-slot="code-block-body"
         data-wrap={local.wrap ? '' : undefined}
         class={cn('scroll-fade overflow-x-auto', {
@@ -187,27 +318,31 @@ export function CodeBlock(props: CodeBlockProps) {
         })}
         style={maxHeight() === undefined ? undefined : { 'max-height': maxHeight() }}
         // A region that scrolls must be focusable, and a tab stop needs a name.
+        // A `group`, not a `region`: a landmark with the same role and name as the
+        // next block's ("ts code" twice) is a duplicate in the screen reader's
+        // landmark list, and a long answer would fill that list with code blocks.
         tabindex="0"
-        role="region"
-        aria-label={regionLabel()}
+        role="group"
+        aria-label={groupLabel()}
       >
         <Show
-          when={local.highlight}
+          when={highlighter()}
           fallback={
-            <pre class="m-0 px-3 py-2" style={{ 'line-height': local.lineHeight ?? '1.5' }}>
+            <pre
+              class={cn('m-0', small() ? 'px-2 py-1.5' : 'px-3 py-2')}
+              style={{ 'line-height': local.lineHeight ?? '1.5' }}
+            >
               <code class="font-code text-code">
-                <Show when={local.showLineNumbers} fallback={local.code.replace(/\n$/, '')}>
-                  <For each={lines()}>
+                <Show when={perLine()} fallback={local.code.replace(/\n$/, '')}>
+                  <For each={visibleLines()}>
                     {(line, index) => (
-                      <span class="grid grid-cols-[3ch_1fr] gap-3">
-                        <span
-                          class="text-right text-muted-foreground select-none"
-                          aria-hidden="true"
-                        >
-                          {index() + 1}
-                        </span>
-                        <span class={cn({ 'min-w-0': local.wrap })}>{line || ' '}</span>
-                      </span>
+                      <CodeLine
+                        line={line}
+                        number={index() + 1}
+                        numbered={local.showLineNumbers === true}
+                        mark={local.lineMarks?.[index() + 1]}
+                        wrap={local.wrap === true}
+                      />
                     )}
                   </For>
                 </Show>
@@ -215,7 +350,31 @@ export function CodeBlock(props: CodeBlockProps) {
             </pre>
           }
         >
-          {(highlight) => <div class="px-3 py-2">{highlight()(local.code)}</div>}
+          {(highlight) => (
+            <div class={small() ? 'px-2 py-1.5' : 'px-3 py-2'}>
+              {highlight()(hiddenLines() > 0 ? visibleLines().join('\n') : local.code)}
+            </div>
+          )}
+        </Show>
+        <Show when={truncated()}>
+          <div class="flex items-center gap-2 border-t border-border px-3 py-1 text-xs text-muted-foreground">
+            <span>
+              Showing the first {visibleLines().length.toLocaleString()} of{' '}
+              {lines().length.toLocaleString()} lines.
+            </span>
+            <Button
+              variant="ghost"
+              size="2xs"
+              onClick={() => {
+                setShowAll(true)
+                // This button leaves the document with the click; the scroller
+                // is the nearest place focus can stay, so a keyboard user keeps their place.
+                bodyElement?.focus({ preventScroll: true })
+              }}
+            >
+              Show all {lines().length.toLocaleString()} lines
+            </Button>
+          </div>
         </Show>
         {/*
           In the scroller's box, and a single line: the indicator must not add
@@ -238,6 +397,77 @@ export function CodeBlock(props: CodeBlockProps) {
   )
 }
 
+const MARK_GLYPH: Readonly<Record<CodeLineMark, string>> = {
+  add: '+',
+  remove: '−',
+  highlight: '',
+  error: '!',
+}
+
+/**
+ * One rendered line. The gutter glyph and the element (`ins`/`del`) carry what a
+ * mark means so it survives greyscale and a screen reader; both gutters are
+ * unselectable so dragging across the block and copying yields only source.
+ */
+function CodeLine(props: {
+  line: string
+  number: number
+  numbered: boolean
+  mark?: CodeLineMark
+  wrap: boolean
+}) {
+  const content = () => (
+    <>
+      <Show when={props.numbered}>
+        <span class="text-right text-muted-foreground select-none" aria-hidden="true">
+          {props.number}
+        </span>
+      </Show>
+      <span
+        class="w-[1ch] text-center text-muted-foreground select-none"
+        aria-hidden="true"
+        data-slot="code-line-mark"
+      >
+        {props.mark ? MARK_GLYPH[props.mark] : ''}
+      </span>
+      <span class={cn({ 'min-w-0': props.wrap })}>{props.line || ' '}</span>
+    </>
+  )
+  const rowClass = () =>
+    cn(
+      'grid gap-3 no-underline',
+      props.numbered ? 'grid-cols-[3ch_1ch_1fr]' : 'grid-cols-[1ch_1fr]',
+      {
+        'bg-success-subtle': props.mark === 'add',
+        'bg-destructive-subtle': props.mark === 'remove' || props.mark === 'error',
+        'bg-primary-subtle': props.mark === 'highlight',
+      }
+    )
+  return (
+    <Show
+      when={props.mark === 'add' || props.mark === 'remove'}
+      fallback={
+        <span data-mark={props.mark} class={rowClass()}>
+          {content()}
+        </span>
+      }
+    >
+      <Show
+        when={props.mark === 'add'}
+        fallback={
+          <del data-mark="remove" class={rowClass()}>
+            {content()}
+          </del>
+        }
+      >
+        <ins data-mark="add" class={rowClass()}>
+          {content()}
+        </ins>
+      </Show>
+    </Show>
+  )
+}
+
 /**
  * InlineCode.
  *

package/src/components/ui/code-block/index.ts

@@ -1 +1,9 @@
-export { CodeBlock, InlineCode, TALL_CODE_BLOCK_PX, type CodeBlockProps } from './code-block'
+export {
+  CODE_BLOCK_LINE_LIMIT,
+  CodeBlock,
+  InlineCode,
+  TALL_CODE_BLOCK_PX,
+  type CodeBlockProps,
+  type CodeHighlighter,
+  type CodeLineMark,
+} from './code-block'

package/src/components/ui/field/number-field.tsx

@@ -2,10 +2,9 @@ import { createEffect, createSignal, type JSX } from 'solid-js'
 import { FormField } from './field'
 import { Input } from '../input/input'
 
-export type NumberFieldProps = {
+type NumberFieldBaseProps = {
   label: string
   hint?: string
-  value: number
   min: number
   max: number
   /**
@@ -23,20 +22,44 @@ export type NumberFieldProps = {
    * `integer={false}`, and `min={0.5} step={1}` accepts 0.5, 1.5, 2.5.
    */
   integer?: boolean
-  onChange: (value: number) => void
+  /** Locks the input; a locked field keeps its value and reports nothing. */
+  disabled?: boolean
   class?: string
   onBlur?: JSX.EventHandler<HTMLInputElement, FocusEvent>
 }
 
+export type NumberFieldProps = NumberFieldBaseProps &
+  (
+    | {
+        optional?: false
+        value: number
+        onChange: (value: number) => void
+      }
+    | {
+        /**
+         * Lets the field be left blank: a blank field is valid and reports `null`,
+         * and a `null` value shows a blank field. Use it for a limit that falls
+         * back to a default when unset, so a caller never maps `''` to
+         * `undefined` of its own.
+         */
+        optional: true
+        value: number | null
+        onChange: (value: number | null) => void
+      }
+  )
+
+const text = (value: number | null) => (value === null ? '' : String(value))
+
 /**
  * A controlled numeric field that keeps an editable draft while validating
  * range, integer and step constraints. Invalid drafts are announced and restored
  * to the latest controlled value when focus leaves the input, so `onChange`
  * only ever receives a value the field accepts — a caller never needs a
- * `Number(value) || fallback` of its own.
+ * `Number(value) || fallback` of its own. With `optional`, blank is accepted and
+ * reported as `null`.
  */
 export function NumberField(props: NumberFieldProps) {
-  const [draft, setDraft] = createSignal(String(props.value))
+  const [draft, setDraft] = createSignal(text(props.value))
   const [error, setError] = createSignal('')
   // Whole numbers only when nothing on the grid is fractional: a whole step from
   // a fractional `min` (0.5, 1.5, 2.5) puts the spinner's own values off the
@@ -46,11 +69,15 @@ export function NumberField(props: NumberFieldProps) {
     (props.step === undefined || (Number.isInteger(props.step) && Number.isInteger(props.min)))
 
   createEffect(() => {
-    setDraft(String(props.value))
+    setDraft(text(props.value))
   })
 
-  const validate = (raw: string) => {
-    if (!raw) return `${props.label} is required.`
+  // A number input reports '' both when it is empty and when it holds text it cannot parse
+  // ("abc", "-", "1e"); only `validity.badInput` tells them apart, and a bad draft must never
+  // count as blank (it would report `null` and clear the limit).
+  const validate = (raw: string, badInput: boolean) => {
+    if (badInput) return `${props.label} must be a valid number.`
+    if (!raw) return props.optional ? '' : `${props.label} is required.`
     const next = Number(raw)
     if (!Number.isFinite(next)) return `${props.label} must be a valid number.`
     if (integer() && !Number.isInteger(next)) {
@@ -80,19 +107,29 @@ export function NumberField(props: NumberFieldProps) {
         min={props.min}
         max={props.max}
         step={props.step ?? (integer() ? 1 : 'any')}
-        required
+        required={!props.optional}
+        disabled={props.disabled}
         onInput={(event) => {
           const raw = event.currentTarget.value
-          setDraft(raw)
-          const nextError = validate(raw)
+          // Read before touching the draft: writing '' back to the input would clear the entry and
+          // with it `badInput`. An unparsable entry keeps the last draft and the text on screen, so
+          // the user can correct it; blur restores the last good value.
+          const badInput = event.currentTarget.validity.badInput
+          if (!badInput) setDraft(raw)
+          const nextError = validate(raw, badInput)
           setError(nextError)
-          if (!nextError) props.onChange(Number(raw))
+          if (nextError) return
+          // `optional` narrows the callback to `number | null`; a required field never sees `''`.
+          ;(props.onChange as (value: number | null) => void)(raw ? Number(raw) : null)
         }}
         onBlur={(event) => {
-          const nextError = validate(draft())
+          const nextError = validate(draft(), event.currentTarget.validity.badInput)
           if (nextError) {
-            setDraft(String(props.value))
+            setDraft(text(props.value))
             setError('')
+            // The draft of an unparsable entry is '' and so is the restored blank value: the signal
+            // does not change, so the DOM has to be reset by hand to drop the leftover text.
+            event.currentTarget.value = text(props.value)
           }
           props.onBlur?.(event)
         }}

package/src/components/ui/marker/index.ts

@@ -0,0 +1 @@
+export { Marker, markerVariants, type MarkerProps } from './marker'

package/src/components/ui/marker/marker.tsx

@@ -0,0 +1,90 @@
+import { Show, splitProps, type ComponentProps, type JSX } from 'solid-js'
+import { cn } from '#lib/utils'
+import { cva, type VariantProps } from '#lib/variants'
+
+/**
+ * Marker.
+ *
+ * A note or divider *between* turns: a day change, a reconnect, a cancelled run,
+ * an event the transcript does not recognise. It is deliberately the quietest
+ * element in the column — a hairline with a label — because the transcript has
+ * dozens of these and any one that shouts teaches the reader to stop looking.
+ *
+ * `variant="rule"` draws the hairline either side (a boundary: "Today",
+ * "Reconnected"); `variant="note"` is a bare line of text with its mark (an
+ * observation that sits inside the flow). `tone` colours the mark and label and
+ * is never the only signal — the `label` always says it in words.
+ *
+ * A marker is static by default. Pass `live` for one that reports a change the
+ * reader must not miss (connection lost): it becomes a status region (`polite`)
+ * or an alert (`assertive`). A divider is not an ARIA separator, because
+ * `separator` is defined to carry no content.
+ */
+export const markerVariants = cva('flex min-w-0 items-center gap-3 text-xs', {
+  variants: {
+    tone: {
+      neutral: 'text-muted-foreground',
+      info: 'text-info',
+      success: 'text-success',
+      warning: 'text-warning',
+      danger: 'text-destructive',
+    },
+    variant: {
+      rule: 'w-full',
+      note: 'w-full justify-start',
+    },
+  },
+  defaultVariants: { tone: 'neutral', variant: 'rule' },
+})
+
+export type MarkerProps = Omit<ComponentProps<'div'>, 'children'> &
+  VariantProps<typeof markerVariants> & {
+    label: JSX.Element
+    icon?: JSX.Element
+    /** Secondary text after the label: a time, a count. */
+    description?: JSX.Element
+    /** A control that belongs to the note: Retry, Reconnect. */
+    action?: JSX.Element
+    live?: 'polite' | 'assertive'
+  }
+
+export function Marker(props: MarkerProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'tone',
+    'variant',
+    'label',
+    'icon',
+    'description',
+    'action',
+    'live',
+  ])
+  const rule = () => (local.variant ?? 'rule') === 'rule'
+  return (
+    <div
+      data-slot="marker"
+      role={local.live === 'assertive' ? 'alert' : local.live === 'polite' ? 'status' : undefined}
+      class={cn(markerVariants({ tone: local.tone, variant: local.variant }), local.class)}
+      {...rest}
+    >
+      <Show when={rule()}>
+        <span aria-hidden="true" class="h-px min-w-4 flex-1 bg-border" />
+      </Show>
+      <span class="flex min-w-0 items-center gap-1.5">
+        <Show when={local.icon}>
+          <span aria-hidden="true" class="grid shrink-0 place-items-center [&_svg]:size-3.5">
+            {local.icon}
+          </span>
+        </Show>
+        <span class="font-medium [overflow-wrap:anywhere]">{local.label}</span>
+        <Show when={local.description}>
+          <span class="text-muted-foreground [overflow-wrap:anywhere]">{local.description}</span>
+        </Show>
+        <Show when={local.action}>{local.action}</Show>
+      </span>
+      <Show when={rule()}>
+        <span aria-hidden="true" class="h-px min-w-4 flex-1 bg-border" />
+      </Show>
+    </div>
+  )
+}