opencode-agent-dock 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Artem Bambalov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,103 @@
+# opencode-agent-dock
+
+> Status: **skeleton / work-in-progress**. Architecture and wiring are in place;
+> the verify-items below remain before it renders live subagents correctly.
+
+An [OpenCode](https://opencode.ai) **TUI plugin** that adds a **Claude-Code-style
+bottom panel** grouping the current session's **subagents** — with select,
+switch, and open-session. Not in the right sidebar: rendered in the `app_bottom`
+slot, which sits below the active route in the session view.
+
+```
+▸ ● general-purpose  Verify error-tile reactivity and guards   3m 25s
+  ○ explore          Audit round-3 test quality                 45s
+  ✓ librarian        Lookup JWT docs
+```
+
+## Why
+
+Subagents only surface inside the chat, and the chat scrolls away from where
+they were spawned. The existing opencode subagent plugins put their list in the
+**right sidebar** and are heavy. This plugin targets the **bottom** (like Claude
+Code's agent panel) and stays as a single lean plugin.
+
+## Install
+
+TUI plugins are configured in `tui.json`. Add the plugin, then restart OpenCode:
+
+```jsonc
+// ~/.config/opencode/tui.json
+{
+  "plugin": ["opencode-agent-dock"]
+}
+```
+
+Local development:
+
+```jsonc
+{
+  "plugin": [["file:///absolute/path/to/opencode-agent-dock/src/index.tsx"]]
+}
+```
+
+## Keybindings
+
+| Key | Action |
+| --- | --- |
+| `alt+a` | Focus the dock |
+| `k` / `j` | Previous / next subagent |
+| `enter` | Open the selected subagent's session |
+| `esc` | Leave the dock |
+
+## Architecture
+
+Clean Architecture, by analogy with
+[`opencode-auto-vision`](https://github.com/arttttt/opencode-auto-vision):
+dependencies point inward, the domain is pure, and the only thing that knows
+about the opencode SDK / TUI API is the composition root + adapters.
+
+```
+src/
+  domain.ts                              pure: Subagent, selection math, formatting
+  ports.ts                               SubagentStore, SessionNavigator, Logger
+  sdk.ts                                 SDK Session/SessionStatus -> domain Subagent
+  constants.ts                           plugin id, slot name, keybinds, limits
+  adapters/
+    opencode-subagent-store.ts           SubagentStore via client.session.children + events
+    opencode-navigator.ts                SessionNavigator via route.navigate
+    opencode-logger.ts                   Logger via client.app.log
+  view/
+    Dock.tsx                             Solid render into the app_bottom slot
+  index.tsx                              composition root + tui entry ({ id, tui })
+```
+
+### Data flow
+
+`api.route.current` resolves the active parent session →
+`client.session.children({ sessionID })` returns its child sessions → each is
+projected to a domain `Subagent` and status is read from
+`api.state.session.status(id)` → `Dock` renders rows in `app_bottom`.
+Selection is owned by the root; `enter` calls `route.navigate("session", …)`.
+
+## Verify before release
+
+- [ ] `client.session.children` response shape (`result.data`) and namespace.
+- [ ] `Session.time.created` field name for elapsed-time origin.
+- [ ] `app_bottom` slot `SolidPlugin` shape from `@opentui/solid` (cast today).
+- [ ] Focus handling: pushing `agent-dock` mode reliably captures `j/k/enter`.
+- [ ] Map terminal subagent states to `done` vs `error` (status `undefined` is
+      treated as `done` for now).
+
+## Develop
+
+```sh
+npm install
+npm run typecheck
+```
+
+OpenCode runs on Bun and loads `.ts`/`.tsx` natively, so there is no build step
+for local file-plugin use.
+
+## License
+
+MIT © Artem Bambalov

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "opencode-agent-dock",
+  "version": "0.1.0",
+  "description": "OpenCode TUI plugin — a Claude-Code-style bottom panel that groups the current session's subagents, with select / switch / open-session.",
+  "type": "module",
+  "exports": {
+    "./tui": {
+      "import": "./src/index.tsx"
+    }
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx}\""
+  },
+  "keywords": [
+    "opencode",
+    "opencode-plugin",
+    "tui",
+    "subagent",
+    "agents",
+    "panel",
+    "dock"
+  ],
+  "author": "Artem Bambalov <artem-bambalov@yandex.ru>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arttttt/opencode-agent-dock.git"
+  },
+  "homepage": "https://github.com/arttttt/opencode-agent-dock#readme",
+  "bugs": {
+    "url": "https://github.com/arttttt/opencode-agent-dock/issues"
+  },
+  "dependencies": {
+    "@opencode-ai/plugin": "^1.18.4",
+    "@opencode-ai/sdk": "^1.18.4"
+  },
+  "peerDependencies": {
+    "@opentui/core": ">=0.4.5",
+    "@opentui/keymap": ">=0.4.5",
+    "@opentui/solid": ">=0.4.5"
+  },
+  "peerDependenciesMeta": {
+    "@opentui/core": { "optional": true },
+    "@opentui/keymap": { "optional": true },
+    "@opentui/solid": { "optional": true }
+  },
+  "devDependencies": {
+    "@opencode-ai/plugin": "^1.18.4",
+    "@opencode-ai/sdk": "^1.18.4",
+    "@opentui/core": ">=0.4.5",
+    "@opentui/keymap": ">=0.4.5",
+    "@opentui/solid": ">=0.4.5",
+    "@types/bun": "latest",
+    "prettier": "^3.8.1",
+    "solid-js": "^1.9.0",
+    "typescript": "^5.7.0"
+  },
+  "engines": {
+    "opencode": "^1.18.0"
+  }
+}

package/src/adapters/opencode-logger.ts

@@ -0,0 +1,18 @@
+// Adapter — Logger over the opencode client app log endpoint.
+
+import type { OpencodeClient } from "@opencode-ai/sdk/v2";
+import type { Logger } from "../ports.js";
+import { SERVICE } from "../constants.js";
+
+export function createLogger(client: OpencodeClient): Logger {
+  const write = (level: "info" | "warn" | "error", message: string): void => {
+    client.app
+      .log({ service: SERVICE, level, message })
+      .catch(() => {});
+  };
+  return {
+    info: (m) => write("info", m),
+    warn: (m) => write("warn", m),
+    error: (m) => write("error", m),
+  };
+}

package/src/adapters/opencode-subagent-store.ts

@@ -0,0 +1,127 @@
+// Adapter — SubagentStore backed by the opencode TUI state + client.
+//
+// Two regimes:
+//   - Parent session (route has no parentID): list its RUNNING children — the
+//     at-a-glance roster for the inline dock navigation.
+//   - Subagent session (route has parentID): keep the panel up with the ONE
+//     subagent currently in focus (so navigating into a subagent does not hide
+//     the panel; native left/right between siblings updates it). `activeId`
+//     exposes that focused id for highlighting.
+
+import type { Session } from "@opencode-ai/sdk/v2";
+import type { TuiPluginApi } from "@opencode-ai/plugin/tui";
+import type { Subagent } from "../domain.js";
+import { sortSubagents } from "../domain.js";
+import { projectSubagent } from "../sdk.js";
+import type { Logger, SubagentStore } from "../ports.js";
+import { LIMITS } from "../constants.js";
+
+type ChildrenClient = {
+  session: {
+    children(parameters: {
+      sessionID: string;
+      directory?: string;
+      workspace?: string;
+    }): Promise<unknown>;
+  };
+};
+
+function extractSessions(result: unknown): Session[] {
+  const data = (result as { data?: unknown } | null | undefined)?.data;
+  return Array.isArray(data) ? (data as Session[]) : [];
+}
+
+function isArchived(session: Session): boolean {
+  const archived = session.time.archived;
+  return typeof archived === "number" && archived > 0;
+}
+
+export function createSubagentStore(api: TuiPluginApi, log: Logger): SubagentStore {
+  const client = api.client as unknown as ChildrenClient;
+  const listeners = new Set<() => void>();
+  let cache: Subagent[] = [];
+  let activeId: string | undefined;
+
+  const emit = (): void => {
+    for (const handler of listeners) handler();
+  };
+
+  const resolveCurrent = (): string | undefined => {
+    const current = api.route.current as { name: string; params?: { sessionID?: string } };
+    return current.name === "session" ? current.params?.sessionID : undefined;
+  };
+
+  const refresh = async (): Promise<void> => {
+    const currentId = resolveCurrent();
+    if (!currentId) {
+      if (cache.length !== 0 || activeId !== undefined) {
+        cache = [];
+        activeId = undefined;
+        emit();
+      }
+      return;
+    }
+    const session = api.state.session.get(currentId);
+    if (!session) {
+      return;
+    }
+    try {
+      if (session.parentID) {
+        // Inside a subagent: pin the panel to the one in focus.
+        cache = [projectSubagent(session, api.state.session.status(currentId))];
+        activeId = currentId;
+      } else {
+        // Parent session: list running children.
+        const result = await client.session.children({ sessionID: currentId });
+        const sessions = extractSessions(result);
+        cache = sortSubagents(
+          sessions
+            .filter((item) => !isArchived(item))
+            .map((item) => projectSubagent(item, api.state.session.status(item.id)))
+            .filter((subagent) => subagent.status === "running"),
+        ).slice(0, LIMITS.maxRows);
+        activeId = undefined;
+      }
+      emit();
+    } catch (error) {
+      log.error(`dock refresh failed: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  };
+
+  void refresh();
+  const interval = setInterval(() => void refresh(), LIMITS.pollMs);
+
+  const subscribe = api.event.on as unknown as (
+    type: string,
+    handler: () => void,
+  ) => () => void;
+  const unsubs = [
+    subscribe("session.created", () => void refresh()),
+    subscribe("session.idle", () => void refresh()),
+    subscribe("session.updated", () => void refresh()),
+    subscribe("session.removed", () => void refresh()),
+  ];
+
+  api.lifecycle.onDispose(() => {
+    clearInterval(interval);
+    for (const unsub of unsubs) unsub();
+  });
+
+  return {
+    get parentSessionId(): string | undefined {
+      return resolveCurrent();
+    },
+    get activeId(): string | undefined {
+      return activeId;
+    },
+    snapshot(): Subagent[] {
+      return cache;
+    },
+    onChange(handler: () => void): () => void {
+      listeners.add(handler);
+      return () => {
+        listeners.delete(handler);
+      };
+    },
+  };
+}

package/src/constants.ts

@@ -0,0 +1,10 @@
+// Constants — plugin identity and tunable limits.
+
+export const PLUGIN_ID = "arttttt.agent-dock";
+export const SERVICE = "agent-dock";
+
+export const LIMITS = {
+  labelMax: 48,
+  maxRows: 50,
+  pollMs: 300,
+} as const;

package/src/domain.ts

@@ -0,0 +1,87 @@
+// Domain — pure policy. No IO, no SDK, no Solid. Fully unit-testable.
+
+export type SubagentStatus = "running" | "idle" | "done" | "error";
+
+/** Neutral projection of a child session. SDK-shape mapping lives in sdk.ts. */
+export type Subagent = {
+  id: string;
+  title: string;
+  status: SubagentStatus;
+  startedAt: number;
+  model?: string;
+  tokens?: number;
+};
+
+/** View-model row derived from a Subagent at a point in time. */
+export type DockRow = {
+  subagent: Subagent;
+  glyph: string;
+  label: string;
+  meta: string;
+};
+
+const STATUS_GLYPH: Record<SubagentStatus, string> = {
+  running: "●",
+  idle: "○",
+  done: "✓",
+  error: "✗",
+};
+
+const STATUS_RANK: Record<SubagentStatus, number> = {
+  running: 0,
+  idle: 1,
+  done: 2,
+  error: 3,
+};
+
+export function sortSubagents(list: readonly Subagent[]): Subagent[] {
+  return [...list].sort((a, b) => {
+    const r = STATUS_RANK[a.status] - STATUS_RANK[b.status];
+    return r !== 0 ? r : b.startedAt - a.startedAt;
+  });
+}
+
+export function clampSelection(index: number, length: number): number {
+  if (length <= 0) return 0;
+  if (index < 0) return 0;
+  if (index >= length) return length - 1;
+  return index;
+}
+
+export function formatElapsed(startedAt: number, now: number = Date.now()): string {
+  const seconds = Math.max(0, Math.floor((now - startedAt) / 1000));
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remSeconds = seconds % 60;
+  if (minutes < 60) return `${minutes}m ${String(remSeconds).padStart(2, "0")}s`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h ${String(minutes % 60).padStart(2, "0")}m`;
+}
+
+export function formatTokens(tokens: number | undefined): string {
+  if (tokens === undefined || tokens <= 0) return "";
+  if (tokens < 1000) return `${tokens}`;
+  return `${(tokens / 1000).toFixed(1)}k`;
+}
+
+export function truncate(text: string, max: number): string {
+  const trimmed = text.trim();
+  if (trimmed.length <= max) return trimmed;
+  return trimmed.slice(0, Math.max(0, max - 1)).trimEnd() + "…";
+}
+
+export function isTerminal(status: SubagentStatus): boolean {
+  return status === "done" || status === "error";
+}
+
+export function toRow(subagent: Subagent, now: number, labelMax: number): DockRow {
+  const meta: string[] = [];
+  if (!isTerminal(subagent.status)) meta.push(formatElapsed(subagent.startedAt, now));
+  if (subagent.tokens !== undefined) meta.push(formatTokens(subagent.tokens));
+  return {
+    subagent,
+    glyph: STATUS_GLYPH[subagent.status],
+    label: truncate(subagent.title || subagent.id, labelMax),
+    meta: meta.join(" \u00b7 "),
+  };
+}

package/src/index.tsx

@@ -0,0 +1,143 @@
+/** @jsxImportSource @opentui/solid */
+// Composition root.
+//
+// Persistent bottom panel (app_bottom slot) of running subagents + inline arrow
+// navigation. Why intercept instead of a dialog: the focused prompt textarea
+// captures arrow keys, so a plugin can't navigate an inline panel via normal
+// bindings. `api.keymap.intercept("key", ..., { priority })` runs BEFORE the
+// textarea (same mechanism opencode's util/selection.ts uses for copy-on-select),
+// so while the dock is focused we consume up/down/return + stopPropagation — the
+// prompt never sees them. This is the "lock the input, navigate the panel"
+// behavior. Escape is intentionally NOT intercepted (stays native = cancel).
+//
+// Toggle: `<leader>v` (ctrl+x then v) or `/subagents` — ctrl+x itself is left
+// untouched (it is opencode's leader key).
+
+import type { TuiPlugin, TuiPluginModule, TuiSlotPlugin } from "@opencode-ai/plugin/tui";
+import { createSignal } from "solid-js";
+import { PLUGIN_ID } from "./constants.js";
+import { clampSelection } from "./domain.js";
+import { createSubagentStore } from "./adapters/opencode-subagent-store.js";
+import { createLogger } from "./adapters/opencode-logger.js";
+import { Dock } from "./view/Dock.js";
+
+type InterceptEvent = {
+  name?: string;
+  ctrl?: boolean;
+  preventDefault: () => void;
+  stopPropagation: () => void;
+};
+
+const tui: TuiPlugin = async (api) => {
+  const log = createLogger(api.client);
+  const store = createSubagentStore(api, log);
+  log.info("agent-dock initialized");
+
+  const [selection, setSelection] = createSignal(0);
+  const [focused, setFocused] = createSignal(false);
+  const [activeId, setActiveId] = createSignal<string | undefined>(undefined);
+
+  // Mirror the store's active id + keep selection in range as rows change; leave
+  // the dock if the roster empties.
+  store.onChange(() => {
+    setActiveId(store.activeId);
+    const rows = store.snapshot();
+    if (rows.length === 0) {
+      if (focused()) setFocused(false);
+      return;
+    }
+    const clamped = clampSelection(selection(), rows.length);
+    if (clamped !== selection()) setSelection(clamped);
+  });
+
+  const slot: TuiSlotPlugin = {
+    slots: {
+      app_bottom: (ctx) => {
+        const tone = ctx.theme.current;
+        return (
+          <Dock
+            store={store}
+            selection={selection}
+            focused={focused}
+            activeId={activeId}
+            colors={{ text: tone.text, muted: tone.textMuted, accent: tone.primary }}
+          />
+        );
+      },
+    },
+  };
+  api.slots.register(slot);
+
+  const enterDock = () => {
+    if (store.snapshot().length === 0) return;
+    setSelection(0);
+    setFocused(true);
+  };
+  const exitDock = () => {
+    setFocused(false);
+  };
+
+  // Inline navigation: intercept arrows/enter while the dock is focused.
+  api.keymap.intercept(
+    "key",
+    ({ event }) => {
+      if (!focused()) return;
+      const ev = event as InterceptEvent;
+      const rows = store.snapshot();
+      if (rows.length === 0) {
+        exitDock();
+        return;
+      }
+      switch (ev.name) {
+        case "up":
+          if (selection() <= 0) exitDock();
+          else setSelection((current) => current - 1);
+          ev.preventDefault();
+          ev.stopPropagation();
+          break;
+        case "down":
+          setSelection((current) => clampSelection(current + 1, rows.length));
+          ev.preventDefault();
+          ev.stopPropagation();
+          break;
+        case "return": {
+          const target = rows[clampSelection(selection(), rows.length)];
+          if (target) {
+            exitDock();
+            api.route.navigate("session", { sessionID: target.id });
+          }
+          ev.preventDefault();
+          ev.stopPropagation();
+          break;
+        }
+      }
+    },
+    { priority: 1 },
+  );
+
+  api.keymap.registerLayer({
+    mode: "base",
+    commands: [
+      {
+        name: "agent-dock.toggle",
+        title: "Subagents",
+        category: "Plugin",
+        namespace: "palette",
+        slashName: "subagents",
+        desc: "Focus the subagent dock to navigate it",
+        run: () => {
+          if (focused()) exitDock();
+          else enterDock();
+        },
+      },
+    ],
+    bindings: [{ key: "<leader>v", cmd: "agent-dock.toggle", desc: "Navigate subagents" }],
+  });
+};
+
+const plugin: TuiPluginModule & { id: string } = {
+  id: PLUGIN_ID,
+  tui,
+};
+
+export default plugin;

package/src/ports.ts

@@ -0,0 +1,24 @@
+// Ports — abstractions the application layer depends on.
+// (Dependency Inversion: high-level policy depends on these contracts, not on
+// concrete IO or the opencode SDK. Adapters in src/adapters implement them.)
+
+import type { Subagent } from "./domain.js";
+
+/** Source of the current session's subagents. */
+export interface SubagentStore {
+  /** The session whose subagents we render (the active session route). */
+  readonly parentSessionId: string | undefined;
+  /** When the active route is a subagent session — its id, so the panel can
+   * highlight the one currently in focus. Undefined in the parent session. */
+  readonly activeId: string | undefined;
+  /** Snapshot of subagents, already sorted and capped for display. */
+  snapshot(): Subagent[];
+  /** Subscribe to store changes; returns an unsubscribe function. */
+  onChange(handler: () => void): () => void;
+}
+
+export interface Logger {
+  info(message: string): void;
+  warn(message: string): void;
+  error(message: string): void;
+}

package/src/sdk.ts

@@ -0,0 +1,34 @@
+// SDK boundary — the only place that knows about @opencode-ai/sdk shapes.
+// Projects SDK Session/SessionStatus into the neutral domain Subagent.
+
+import type { Session, SessionStatus } from "@opencode-ai/sdk/v2";
+import type { Subagent, SubagentStatus } from "./domain.js";
+
+export function statusFromSessionStatus(status: SessionStatus | undefined): SubagentStatus {
+  switch (status?.type) {
+    case "busy":
+    case "retry":
+      return "running";
+    case "idle":
+      return "idle";
+    default:
+      return "done";
+  }
+}
+
+function totalTokens(tokens: Session["tokens"] | undefined): number | undefined {
+  if (!tokens) return undefined;
+  const total = tokens.input + tokens.output + tokens.reasoning + tokens.cache.read + tokens.cache.write;
+  return total > 0 ? total : undefined;
+}
+
+export function projectSubagent(session: Session, status: SessionStatus | undefined): Subagent {
+  return {
+    id: session.id,
+    title: session.title || session.agent || "subagent",
+    status: statusFromSessionStatus(status),
+    startedAt: session.time.created,
+    model: session.model?.id,
+    tokens: totalTokens(session.tokens),
+  };
+}

package/src/view/Dock.tsx

@@ -0,0 +1,72 @@
+/** @jsxImportSource @opentui/solid */
+// View — the persistent bottom panel (app_bottom slot). Claude-Code-style:
+// plain text rows under the prompt, no panel chrome. Stays visible in both the
+// parent session (running subagents) and inside a subagent (the focused one,
+// highlighted via `activeId`). When the dock is focused for inline navigation,
+// the selected row gets a `▸` cursor.
+//
+// Reactivity: `selection`, `focused`, `activeId` are real Solid signals (owned
+// by the composition root), so per-row selected/active checks are tracked
+// directly — no signal-reading hacks. The rows memo additionally reads the
+// `version` signal (bumped on every store change) so elapsed times stay fresh.
+
+import { For, Show, createMemo, createSignal, onCleanup, type JSX } from "solid-js";
+import type { RGBA } from "@opentui/core";
+import type { SubagentStore } from "../ports.js";
+import { toRow } from "../domain.js";
+import { LIMITS } from "../constants.js";
+
+export type DockColors = {
+  text: RGBA | string;
+  muted: RGBA | string;
+  accent: RGBA | string;
+};
+
+export type DockProps = {
+  store: SubagentStore;
+  selection: () => number;
+  focused: () => boolean;
+  activeId: () => string | undefined;
+  colors: DockColors;
+};
+
+export function Dock(props: DockProps): JSX.Element {
+  // The store emits on every refresh (data change + elapsed tick), which bumps
+  // `version` and re-runs the rows memo. No separate timer needed here.
+  const [version, setVersion] = createSignal(0);
+  const unsubscribe = props.store.onChange(() => setVersion((value) => value + 1));
+  onCleanup(unsubscribe);
+
+  const rows = createMemo(() => {
+    version();
+    const now = Date.now();
+    return props.store.snapshot().map((subagent) => toRow(subagent, now, LIMITS.labelMax));
+  });
+
+  return (
+    <Show when={rows().length > 0}>
+      <box flexDirection="column" paddingLeft={2} paddingRight={2}>
+        <For each={rows()}>
+          {(row, index) => {
+            const selected = () => props.focused() && index() === props.selection();
+            const active = () => props.activeId() === row.subagent.id;
+            const hot = () => selected() || active();
+            return (
+              <text>
+                <span style={{ fg: hot() ? props.colors.accent : props.colors.muted }}>
+                  {selected() ? "\u25b8 " : "  "}
+                </span>
+                <span style={{ fg: row.subagent.status === "running" ? props.colors.accent : props.colors.muted }}>
+                  {row.glyph}
+                </span>
+                <span style={{ fg: hot() ? props.colors.text : props.colors.muted }}>
+                  {` ${row.label}${row.meta ? "  " + row.meta : ""}`}
+                </span>
+              </text>
+            );
+          }}
+        </For>
+      </box>
+    </Show>
+  );
+}