orynacode-ai 1.16.2

package/src/cli/cmd/tui/component/bg-pulse-render.ts

@@ -0,0 +1,436 @@
+import { OptimizedBuffer, RGBA, TextAttributes } from "@opentui/core"
+import { go } from "@/cli/logo"
+
+const PERIOD = 4600
+const RINGS = 3
+const WIDTH = 3.8
+const TAIL = 9.5
+const AMP = 0.55
+const TAIL_AMP = 0.16
+const BREATH_AMP = 0.05
+const BREATH_SPEED = 0.0008
+// Offset so the bg ring emits from the estimated GO center when the logo shimmer peaks.
+const PHASE_OFFSET = 0.29
+const LOGO_GAP = 1
+const LOGO_TOP_BIAS = -1
+const LOGO_LEFT_WIDTH = go.left[0]?.length ?? 0
+const LOGO_LINES = go.left.map((line, index) => line + " ".repeat(LOGO_GAP) + go.right[index])
+const LOGO_WIDTH = LOGO_LINES[0]?.length ?? 0
+const LOGO_HEIGHT = LOGO_LINES.length
+const SPACE = " ".codePointAt(0)!
+const TOP_HALF = "▀".codePointAt(0)!
+const FULL_BLOCK = "█".codePointAt(0)!
+const RING_SCALE = 1 / RINGS
+const TAIL_SCALE = 1 / TAIL
+const LOGO_REACH = Math.hypot(LOGO_WIDTH, LOGO_HEIGHT * 2) + 3
+
+const enum LogoCellKind {
+  Background,
+  Top,
+  ShadowTop,
+  Solid,
+  Char,
+}
+
+type LogoTemplateCell = {
+  x: number
+  y: number
+  kind: LogoCellKind
+  charCode: number
+  attributes: number
+  topDist: number
+  bottomDist: number
+}
+
+const LOGO_TEMPLATE: LogoTemplateCell[] = LOGO_LINES.flatMap((line, y) =>
+  Array.from(line)
+    .map((char, x) => {
+      if (char === " ") return
+      const kind =
+        char === "_"
+          ? LogoCellKind.Background
+          : char === "^"
+            ? LogoCellKind.Top
+            : char === "~"
+              ? LogoCellKind.ShadowTop
+              : char === "█"
+                ? LogoCellKind.Solid
+                : LogoCellKind.Char
+      return {
+        x,
+        y,
+        kind,
+        charCode: char.codePointAt(0) ?? SPACE,
+        attributes: x > LOGO_LEFT_WIDTH ? TextAttributes.BOLD : 0,
+        topDist: Math.hypot(x + 0.5 - LOGO_WIDTH / 2, y * 2 - LOGO_HEIGHT),
+        bottomDist: Math.hypot(x + 0.5 - LOGO_WIDTH / 2, y * 2 + 1 - LOGO_HEIGHT),
+      }
+    })
+    .filter((cell): cell is LogoTemplateCell => !!cell),
+)
+
+export type Rgb = [number, number, number]
+
+export type GoUpsellArtRenderOptions = {
+  deltaTime?: number
+  rgb?: boolean
+  cache?: boolean
+}
+
+const CACHE_FRAME_COUNT = Math.round(PERIOD / (1000 / 30))
+const CACHE_FRAMES_PER_RENDER = 1
+
+export function toRgb(color: RGBA): Rgb {
+  const [r, g, b] = color.toInts()
+  return [r, g, b]
+}
+
+function clamp(n: number) {
+  return Math.max(0, Math.min(1, n))
+}
+
+function writeRgb(buffer: Uint16Array, offset: number, r: number, g: number, b: number, a = 255) {
+  buffer[offset] = r
+  buffer[offset + 1] = g
+  buffer[offset + 2] = b
+  buffer[offset + 3] = a
+}
+
+function mixChannel(base: number, overlay: number, alpha: number) {
+  return Math.round(base + (overlay - base) * clamp(alpha))
+}
+
+function writeLogoTint(
+  buffer: Uint16Array,
+  offset: number,
+  base: Rgb,
+  primary: Rgb,
+  primaryMix: number,
+  peakMix: number,
+) {
+  const p = clamp(primaryMix)
+  const q = clamp(peakMix)
+  const r = mixChannel(mixChannel(base[0], primary[0], p), 255, q)
+  const g = mixChannel(mixChannel(base[1], primary[1], p), 255, q)
+  const b = mixChannel(mixChannel(base[2], primary[2], p), 255, q)
+  writeRgb(buffer, offset, r, g, b)
+}
+
+function sameRgb(a: Rgb, b: Rgb) {
+  return a[0] === b[0] && a[1] === b[1] && a[2] === b[2]
+}
+
+export class GoUpsellArtPainter {
+  private panelRgb: Rgb = [0, 0, 0]
+  private primaryRgb: Rgb = [255, 255, 255]
+  private logoBaseRgb: Rgb = [180, 180, 180]
+  private elapsed = 0
+  private distances = new Float32Array(0)
+  private edgeFalloff = new Float32Array(0)
+  private geometryWidth = 0
+  private geometryHeight = 0
+  private reach = 1
+  private logoX = 0
+  private logoY = 0
+  private logoIndexes = new Int32Array(0)
+  private logoRgb: boolean | undefined
+  private pulsePeak = 0
+  private pulsePrimary = 0
+  private cacheDirty = true
+  private frameCache: Array<{ fg: Uint16Array; bg: Uint16Array }> = []
+  private cacheBuildIndex = 0
+
+  setBackgroundPanel(value: RGBA | Rgb | undefined) {
+    if (!value) return false
+    const next = value instanceof RGBA ? toRgb(value) : value
+    if (sameRgb(this.panelRgb, next)) return false
+    this.panelRgb = next
+    this.invalidateCache()
+    return true
+  }
+
+  setLogoBase(value: RGBA | Rgb | undefined) {
+    if (!value) return false
+    const next = value instanceof RGBA ? toRgb(value) : value
+    if (sameRgb(this.logoBaseRgb, next)) return false
+    this.logoBaseRgb = next
+    this.invalidateCache()
+    return true
+  }
+
+  setPrimary(value: RGBA | Rgb | undefined) {
+    if (!value) return false
+    const next = value instanceof RGBA ? toRgb(value) : value
+    if (sameRgb(this.primaryRgb, next)) return false
+    this.primaryRgb = next
+    this.invalidateCache()
+    return true
+  }
+
+  render(frameBuffer: OptimizedBuffer, options: GoUpsellArtRenderOptions = {}) {
+    const rgb = options.rgb === true
+    this.elapsed = (this.elapsed + (options.deltaTime ?? 0)) % PERIOD
+    this.rebuildGeometry(frameBuffer, rgb)
+    if (options.cache !== false) {
+      this.drawCached(frameBuffer, rgb)
+      return
+    }
+    this.drawBackground(frameBuffer, this.elapsed)
+    this.drawLogo(frameBuffer, this.elapsed, rgb)
+  }
+
+  private invalidateCache() {
+    this.cacheDirty = true
+    this.cacheBuildIndex = 0
+    this.frameCache = []
+  }
+
+  private rebuildGeometry(frameBuffer: OptimizedBuffer, rgb: boolean) {
+    const width = frameBuffer.width
+    const height = frameBuffer.height
+    const geometryChanged = width !== this.geometryWidth || height !== this.geometryHeight
+    const logoTemplateChanged = this.logoRgb !== rgb
+    if (!geometryChanged && !logoTemplateChanged) return
+
+    if (geometryChanged) {
+      this.geometryWidth = width
+      this.geometryHeight = height
+      this.logoX = Math.max(0, Math.floor((width - LOGO_WIDTH) / 2))
+      this.logoY = Math.max(
+        0,
+        Math.min(Math.max(0, height - LOGO_HEIGHT), Math.round((height - LOGO_HEIGHT) / 2) + LOGO_TOP_BIAS),
+      )
+
+      const centerX = this.logoX + LOGO_WIDTH / 2
+      const centerY = this.logoY + LOGO_HEIGHT / 2
+      this.reach = Math.hypot(Math.max(centerX, width - centerX), Math.max(centerY, height - centerY) * 2) + TAIL
+      this.distances = new Float32Array(width * height)
+      this.edgeFalloff = new Float32Array(width * height)
+
+      for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+          const index = y * width + x
+          const dist = Math.hypot(x + 0.5 - centerX, (y + 0.5 - centerY) * 2)
+          this.distances[index] = dist
+          this.edgeFalloff[index] = Math.max(0, 1 - (dist / (this.reach * 0.85)) ** 2)
+        }
+      }
+    }
+
+    this.logoRgb = rgb
+    this.invalidateCache()
+    this.rebuildCellTemplate(frameBuffer, rgb)
+  }
+
+  private drawCached(frameBuffer: OptimizedBuffer, rgb: boolean) {
+    if (this.cacheDirty) this.startFrameCache(frameBuffer, rgb)
+    if (this.cacheBuildIndex < CACHE_FRAME_COUNT) {
+      this.buildFrameCache(frameBuffer, rgb)
+      this.drawBackground(frameBuffer, this.elapsed)
+      this.drawLogo(frameBuffer, this.elapsed, rgb)
+      return
+    }
+
+    const frame = this.frameCache[Math.floor((this.elapsed / PERIOD) * CACHE_FRAME_COUNT) % CACHE_FRAME_COUNT]
+    if (frame) {
+      frameBuffer.buffers.fg.set(frame.fg)
+      frameBuffer.buffers.bg.set(frame.bg)
+    }
+  }
+
+  private startFrameCache(frameBuffer: OptimizedBuffer, rgb: boolean) {
+    this.frameCache = []
+    this.cacheBuildIndex = 0
+    this.rebuildCellTemplate(frameBuffer, rgb)
+    this.cacheDirty = false
+  }
+
+  private buildFrameCache(frameBuffer: OptimizedBuffer, rgb: boolean) {
+    const end = Math.min(CACHE_FRAME_COUNT, this.cacheBuildIndex + CACHE_FRAMES_PER_RENDER)
+    for (; this.cacheBuildIndex < end; this.cacheBuildIndex++) {
+      const t = (this.cacheBuildIndex / CACHE_FRAME_COUNT) * PERIOD
+      this.drawBackground(frameBuffer, t)
+      this.drawLogo(frameBuffer, t, rgb)
+      this.frameCache.push({
+        fg: new Uint16Array(frameBuffer.buffers.fg),
+        bg: new Uint16Array(frameBuffer.buffers.bg),
+      })
+    }
+  }
+
+  private rebuildCellTemplate(frameBuffer: OptimizedBuffer, rgb: boolean) {
+    const buffers = frameBuffer.buffers
+    buffers.char.fill(SPACE)
+    buffers.attributes.fill(0)
+
+    if (this.geometryWidth < LOGO_WIDTH || this.geometryHeight < LOGO_HEIGHT) {
+      this.logoIndexes = new Int32Array(0)
+      return
+    }
+
+    this.logoIndexes = new Int32Array(LOGO_TEMPLATE.length)
+    for (let i = 0; i < LOGO_TEMPLATE.length; i++) {
+      const cell = LOGO_TEMPLATE[i]!
+      const index = (this.logoY + cell.y) * this.geometryWidth + this.logoX + cell.x
+      this.logoIndexes[i] = index
+      buffers.attributes[index] = cell.attributes
+      buffers.char[index] =
+        cell.kind === LogoCellKind.Background
+          ? SPACE
+          : cell.kind === LogoCellKind.Top || cell.kind === LogoCellKind.ShadowTop
+            ? TOP_HALF
+            : cell.kind === LogoCellKind.Solid
+              ? rgb
+                ? TOP_HALF
+                : FULL_BLOCK
+              : cell.charCode
+    }
+  }
+
+  private drawBackground(frameBuffer: OptimizedBuffer, t: number) {
+    const buffers = frameBuffer.buffers
+    const fg = buffers.fg
+    const bg = buffers.bg
+    const distances = this.distances
+    const edgeFalloff = this.edgeFalloff
+    const baseR = this.panelRgb[0]
+    const baseG = this.panelRgb[1]
+    const baseB = this.panelRgb[2]
+    const deltaR = this.primaryRgb[0] - baseR
+    const deltaG = this.primaryRgb[1] - baseG
+    const deltaB = this.primaryRgb[2] - baseB
+    const breath = (0.5 + 0.5 * Math.sin(t * BREATH_SPEED)) * BREATH_AMP
+
+    const phase0 = (t / PERIOD - PHASE_OFFSET + 1) % 1
+    const phase1 = (t / PERIOD + 1 / RINGS - PHASE_OFFSET + 1) % 1
+    const phase2 = (t / PERIOD + 2 / RINGS - PHASE_OFFSET + 1) % 1
+    const envelope0 = Math.sin(phase0 * Math.PI)
+    const envelope1 = Math.sin(phase1 * Math.PI)
+    const envelope2 = Math.sin(phase2 * Math.PI)
+    const eased0 = envelope0 * envelope0 * (3 - 2 * envelope0)
+    const eased1 = envelope1 * envelope1 * (3 - 2 * envelope1)
+    const eased2 = envelope2 * envelope2 * (3 - 2 * envelope2)
+    const head0 = phase0 * this.reach
+    const head1 = phase1 * this.reach
+    const head2 = phase2 * this.reach
+
+    for (let index = 0; index < distances.length; index++) {
+      const dist = distances[index]
+      const delta0 = dist - head0
+      const abs0 = delta0 < 0 ? -delta0 : delta0
+      const crest0 = abs0 < WIDTH ? 0.5 + 0.5 * Math.cos((delta0 / WIDTH) * Math.PI) : 0
+      const tail0 = delta0 < 0 && delta0 > -TAIL ? (1 + delta0 * TAIL_SCALE) ** 2.3 : 0
+
+      const delta1 = dist - head1
+      const abs1 = delta1 < 0 ? -delta1 : delta1
+      const crest1 = abs1 < WIDTH ? 0.5 + 0.5 * Math.cos((delta1 / WIDTH) * Math.PI) : 0
+      const tail1 = delta1 < 0 && delta1 > -TAIL ? (1 + delta1 * TAIL_SCALE) ** 2.3 : 0
+
+      const delta2 = dist - head2
+      const abs2 = delta2 < 0 ? -delta2 : delta2
+      const crest2 = abs2 < WIDTH ? 0.5 + 0.5 * Math.cos((delta2 / WIDTH) * Math.PI) : 0
+      const tail2 = delta2 < 0 && delta2 > -TAIL ? (1 + delta2 * TAIL_SCALE) ** 2.3 : 0
+
+      const level =
+        (crest0 * AMP + tail0 * TAIL_AMP) * eased0 +
+        (crest1 * AMP + tail1 * TAIL_AMP) * eased1 +
+        (crest2 * AMP + tail2 * TAIL_AMP) * eased2
+      const rawStrength = (level * RING_SCALE + breath) * edgeFalloff[index]
+      const strength = (rawStrength > 1 ? 1 : rawStrength) * 0.7
+      const offset = index * 4
+      const r = Math.round(baseR + deltaR * strength)
+      const g = Math.round(baseG + deltaG * strength)
+      const b = Math.round(baseB + deltaB * strength)
+      bg[offset] = fg[offset] = r
+      bg[offset + 1] = fg[offset + 1] = g
+      bg[offset + 2] = fg[offset + 2] = b
+      bg[offset + 3] = fg[offset + 3] = 255
+    }
+  }
+
+  private setLogoPulse(dist: number, head0: number, eased0: number, head1: number, eased1: number) {
+    let peak = 0.04
+    let primary = 0
+
+    const delta0 = dist - head0
+    const core0 = Math.exp(-(Math.abs(delta0 / 1.2) ** 1.8))
+    const soft0 = Math.exp(-(Math.abs(delta0 / 7) ** 1.6))
+    const tail0 = delta0 < 0 && delta0 > -7 ? (1 + delta0 / 7) ** 2.6 : 0
+    peak += core0 * 0.65 * eased0
+    primary += (soft0 * 0.16 + tail0 * 0.22) * eased0
+
+    const delta1 = dist - head1
+    const core1 = Math.exp(-(Math.abs(delta1 / 1.2) ** 1.8))
+    const soft1 = Math.exp(-(Math.abs(delta1 / 7) ** 1.6))
+    const tail1 = delta1 < 0 && delta1 > -7 ? (1 + delta1 / 7) ** 2.6 : 0
+    peak += core1 * 0.65 * eased1
+    primary += (soft1 * 0.16 + tail1 * 0.22) * eased1
+
+    this.pulsePeak = peak > 1 ? 1 : peak
+    this.pulsePrimary = primary > 1 ? 1 : primary
+  }
+
+  private drawLogo(frameBuffer: OptimizedBuffer, t: number, rgb: boolean) {
+    if (this.logoIndexes.length === 0) return
+
+    const buffers = frameBuffer.buffers
+    const fg = buffers.fg
+    const bg = buffers.bg
+    const shadow: Rgb = [
+      mixChannel(this.panelRgb[0], this.logoBaseRgb[0], 0.25),
+      mixChannel(this.panelRgb[1], this.logoBaseRgb[1], 0.25),
+      mixChannel(this.panelRgb[2], this.logoBaseRgb[2], 0.25),
+    ]
+    const phase0 = (t / PERIOD) % 1
+    const phase1 = (t / PERIOD + 0.5) % 1
+    const envelope0 = Math.sin(phase0 * Math.PI)
+    const envelope1 = Math.sin(phase1 * Math.PI)
+    const eased0 = envelope0 * envelope0 * (3 - 2 * envelope0)
+    const eased1 = envelope1 * envelope1 * (3 - 2 * envelope1)
+    const head0 = phase0 * LOGO_REACH
+    const head1 = phase1 * LOGO_REACH
+
+    for (let i = 0; i < LOGO_TEMPLATE.length; i++) {
+      const cell = LOGO_TEMPLATE[i]!
+      const index = this.logoIndexes[i]!
+      const offset = index * 4
+      this.setLogoPulse(cell.topDist, head0, eased0, head1, eased1)
+      const topPeak = this.pulsePeak
+      const topPrimary = this.pulsePrimary
+      this.setLogoPulse(cell.bottomDist, head0, eased0, head1, eased1)
+      const bottomPeak = this.pulsePeak
+      const bottomPrimary = this.pulsePrimary
+
+      if (cell.kind === LogoCellKind.Background) {
+        writeLogoTint(bg, offset, shadow, this.primaryRgb, 0, Math.max(topPeak, bottomPeak) * 0.18)
+        continue
+      }
+
+      if (cell.kind === LogoCellKind.Top) {
+        writeLogoTint(fg, offset, this.logoBaseRgb, this.primaryRgb, topPrimary, topPeak)
+        writeLogoTint(bg, offset, shadow, this.primaryRgb, 0, bottomPeak * 0.18)
+        continue
+      }
+
+      if (cell.kind === LogoCellKind.ShadowTop) {
+        writeLogoTint(fg, offset, shadow, this.primaryRgb, 0, topPeak * 0.18)
+        continue
+      }
+
+      if (cell.kind === LogoCellKind.Solid && rgb) {
+        writeLogoTint(fg, offset, this.logoBaseRgb, this.primaryRgb, topPrimary, topPeak)
+        writeLogoTint(bg, offset, this.logoBaseRgb, this.primaryRgb, bottomPrimary, bottomPeak)
+        continue
+      }
+
+      writeLogoTint(
+        fg,
+        offset,
+        this.logoBaseRgb,
+        this.primaryRgb,
+        (topPrimary + bottomPrimary) / 2,
+        (topPeak + bottomPeak) / 2,
+      )
+    }
+  }
+}

package/src/cli/cmd/tui/component/bg-pulse.tsx

@@ -0,0 +1,99 @@
+import {
+  FrameBufferRenderable,
+  RGBA,
+  type OptimizedBuffer,
+  type RenderContext,
+  type RenderableOptions,
+} from "@opentui/core"
+import { extend, useRenderer } from "@opentui/solid"
+import { onCleanup, onMount } from "solid-js"
+import { tint, useTheme } from "@tui/context/theme"
+import { GoUpsellArtPainter } from "./bg-pulse-render"
+
+type GoUpsellArtOptions = RenderableOptions<FrameBufferRenderable> & {
+  backgroundPanel?: RGBA
+  primary?: RGBA
+  logoBase?: RGBA
+}
+
+class GoUpsellArtRenderable extends FrameBufferRenderable {
+  private painter = new GoUpsellArtPainter()
+
+  constructor(ctx: RenderContext, options: GoUpsellArtOptions = {}) {
+    const width = typeof options.width === "number" ? options.width : 1
+    const height = typeof options.height === "number" ? options.height : 1
+    super(ctx, {
+      ...options,
+      width,
+      height,
+      live: options.live ?? true,
+      respectAlpha: false,
+    })
+
+    if (options.width !== undefined && typeof options.width !== "number") this.width = options.width
+    if (options.height !== undefined && typeof options.height !== "number") this.height = options.height
+    this.painter.setBackgroundPanel(options.backgroundPanel)
+    this.painter.setPrimary(options.primary)
+    this.painter.setLogoBase(options.logoBase)
+  }
+
+  set backgroundPanel(value: RGBA | undefined) {
+    if (this.painter.setBackgroundPanel(value)) this.requestRender()
+  }
+
+  set logoBase(value: RGBA | undefined) {
+    if (this.painter.setLogoBase(value)) this.requestRender()
+  }
+
+  set primary(value: RGBA | undefined) {
+    if (this.painter.setPrimary(value)) this.requestRender()
+  }
+
+  protected override renderSelf(buffer: OptimizedBuffer, deltaTime = 0): void {
+    if (!this.visible || this.isDestroyed) return
+
+    this.painter.render(this.frameBuffer, {
+      deltaTime,
+      rgb: this._ctx.capabilities?.rgb === true,
+    })
+    super.renderSelf(buffer)
+  }
+}
+
+declare module "@opentui/solid" {
+  interface OpenTUIComponents {
+    go_upsell_art: typeof GoUpsellArtRenderable
+  }
+}
+
+extend({ go_upsell_art: GoUpsellArtRenderable })
+
+export function BgPulse() {
+  const { theme } = useTheme()
+  const renderer = useRenderer()
+  let targetFps = renderer.targetFps
+  let maxFps = renderer.maxFps
+
+  onMount(() => {
+    targetFps = renderer.targetFps
+    maxFps = renderer.maxFps
+    renderer.targetFps = 30
+    renderer.maxFps = 30
+  })
+
+  onCleanup(() => {
+    renderer.targetFps = targetFps
+    renderer.maxFps = maxFps
+  })
+
+  return (
+    <go_upsell_art
+      width="100%"
+      height="100%"
+      backgroundPanel={theme.backgroundPanel}
+      primary={theme.primary}
+      logoBase={tint(theme.background, theme.text, 0.62)}
+      live
+    />
+  )
+}

package/src/cli/cmd/tui/component/border.tsx

@@ -0,0 +1,21 @@
+export const EmptyBorder = {
+  topLeft: "",
+  bottomLeft: "",
+  vertical: "",
+  topRight: "",
+  bottomRight: "",
+  horizontal: " ",
+  bottomT: "",
+  topT: "",
+  cross: "",
+  leftT: "",
+  rightT: "",
+}
+
+export const SplitBorder = {
+  border: ["left" as const, "right" as const],
+  customBorderChars: {
+    ...EmptyBorder,
+    vertical: "┃",
+  },
+}

package/src/cli/cmd/tui/component/command-palette.tsx

@@ -0,0 +1,79 @@
+import { createMemo } from "solid-js"
+import { DialogSelect, type DialogSelectRef } from "@tui/ui/dialog-select"
+import { type DialogContext } from "@tui/ui/dialog"
+import {
+  COMMAND_PALETTE_COMMAND,
+  formatKeyBindings,
+  type OpenTuiKeymap,
+  useKeymapSelector,
+  useOpencodeKeymap,
+} from "../keymap"
+import { useTuiConfig } from "../context/tui-config"
+
+type PaletteCommandEntry = ReturnType<OpenTuiKeymap["getCommandEntries"]>[number]
+
+function isVisiblePaletteCommand(command: PaletteCommandEntry["command"]) {
+  return command.hidden !== true && command.name !== COMMAND_PALETTE_COMMAND
+}
+
+function isSuggestedPaletteCommand(entry: PaletteCommandEntry) {
+  const suggested = entry.command.suggested
+  if (typeof suggested === "boolean") return suggested
+  if (typeof suggested === "function") return suggested() === true
+  return false
+}
+
+export function CommandPaletteDialog() {
+  const config = useTuiConfig()
+  const keymap = useOpencodeKeymap()
+  const entries = useKeymapSelector((keymap: OpenTuiKeymap) => {
+    const query = {
+      namespace: "palette",
+    }
+    const reachable = keymap.getCommandEntries({
+      ...query,
+      visibility: "reachable",
+      filter: isVisiblePaletteCommand,
+    })
+    const registeredBindings = keymap.getCommandBindings({
+      visibility: "registered",
+      commands: reachable.map((entry) => entry.command.name),
+    })
+
+    return reachable.map((entry) => ({
+      ...entry,
+      bindings: registeredBindings.get(entry.command.name) ?? entry.bindings,
+    }))
+  })
+  const options = createMemo(() =>
+    entries().map((entry) => ({
+      title: typeof entry.command.title === "string" ? entry.command.title : entry.command.name,
+      description: typeof entry.command.desc === "string" ? entry.command.desc : undefined,
+      category: typeof entry.command.category === "string" ? entry.command.category : undefined,
+      footer: formatKeyBindings(entry.bindings, config),
+      value: entry.command.name,
+      suggested: isSuggestedPaletteCommand(entry),
+      onSelect: (dialog: DialogContext) => {
+        dialog.clear()
+        keymap.dispatchCommand(entry.command.name)
+      },
+    })),
+  )
+
+  let ref: DialogSelectRef<string>
+  const list = () => {
+    if (ref?.filter) return options()
+    return [
+      ...options()
+        .filter((option) => option.suggested)
+        .map((option) => ({
+          ...option,
+          value: `suggested:${option.value}`,
+          category: "Suggested",
+        })),
+      ...options(),
+    ]
+  }
+
+  return <DialogSelect ref={(value) => (ref = value)} title="Commands" options={list()} />
+}

package/src/cli/cmd/tui/component/dialog-agent.tsx

@@ -0,0 +1,31 @@
+import { createMemo } from "solid-js"
+import { useLocal } from "@tui/context/local"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+
+export function DialogAgent() {
+  const local = useLocal()
+  const dialog = useDialog()
+
+  const options = createMemo(() =>
+    local.agent.list().map((item) => {
+      return {
+        value: item.name,
+        title: item.name,
+        description: item.native ? "native" : item.description,
+      }
+    }),
+  )
+
+  return (
+    <DialogSelect
+      title="Select agent"
+      current={local.agent.current()?.name}
+      options={options()}
+      onSelect={(option) => {
+        local.agent.set(option.value)
+        dialog.clear()
+      }}
+    />
+  )
+}