opencode-extended-sidebar 0.2.90 → 0.2.91

package/src/pware.oc.ui/pware.oc.ui.chrome.tsx

@@ -1,339 +1,381 @@
-/** @jsxImportSource @opentui/solid */
-/** Shared sidebar chrome: brand tabs, theme colours, fold headers, diff stats, kv persistence. */
-import { createSignal, For, Show, type JSX } from "solid-js"
-import { TextAttributes } from "@opentui/core"
-import type { TuiPluginApi } from "@opencode-ai/plugin/tui"
-import type { GlyphSpec, ToneKey } from "../pware.oc.core/pware.oc.core.glyph.js"
-import { CONTEXT_ACTION_COL_WIDTH } from "../pware.oc.core/pware.oc.core.layout.js"
-import { formatDismissed, parseDismissed } from "../pware.oc.runtime/pware.oc.runtime.mywork.js"
-
-/** One clickable context action in the shared right rail. */
-export type ContextAction = {
-  label: string
-  onPick: () => void
-  bold?: boolean
-}
-
-/** OpenTUI has no bold/underline props on `<text>` — only the `attributes` bitmask. */
-export function textAttrs(bold?: boolean, underline?: boolean): number {
-  let a = 0
-  if (bold) a |= TextAttributes.BOLD
-  if (underline) a |= TextAttributes.UNDERLINE
-  return a
-}
-
-/**
- * Clickable label: underlined only while the pointer hovers it.
- * OpenTUI fires `over`/`out` on hit-test change, so the underline
- * tracks the mouse instead of being baked in. `underline` marks
- * clickability; without it the label never underlines.
- */
-export function ClickText(props: {
-  fg?: string
-  bold?: boolean
-  /** Clickable — the underline appears while the pointer is over the label. */
-  underline?: boolean
-  opacity?: number
-  onMouseUp?: () => void
-  children: JSX.Element
-}): JSX.Element {
-  const [hovered, setHovered] = createSignal(false)
-  return (
-    <text
-      fg={props.fg}
-      opacity={props.opacity}
-      attributes={textAttrs(Boolean(props.bold), Boolean(props.underline) && hovered())}
-      onMouseUp={props.onMouseUp}
-      onMouseOver={() => setHovered(true)}
-      onMouseOut={() => setHovered(false)}
-    >
-      {props.children}
-    </text>
-  )
-}
-
-export type ThemeColors = {
-  text: string
-  textMuted: string
-  success: string
-  primary?: string
-  warning?: string
-  error?: string
-  diffAdded?: string
-  diffRemoved?: string
-}
-
-export function kvRead(api: TuiPluginApi, key: string, fallback: boolean): boolean {
-  try {
-    const kv = (api as TuiPluginApi & { kv?: { get: (k: string, d?: boolean) => boolean } }).kv
-    return kv?.get(key, fallback) ?? fallback
-  } catch {
-    return fallback
-  }
-}
-
-export function kvWrite(api: TuiPluginApi, key: string, value: boolean): void {
-  try {
-    const kv = (api as TuiPluginApi & { kv?: { set: (k: string, v: boolean) => void } }).kv
-    kv?.set(key, value)
-  } catch {
-    // no kv in older hosts
-  }
-}
-
-/** Same store, string value. Anything outside `allowed` falls back. */
-export function kvReadOne<T extends string>(
-  api: TuiPluginApi,
-  key: string,
-  fallback: T,
-  allowed: readonly T[],
-): T {
-  try {
-    const kv = (api as TuiPluginApi & { kv?: { get: (k: string, d?: string) => unknown } }).kv
-    const raw = kv?.get(key, fallback)
-    return allowed.includes(raw as T) ? (raw as T) : fallback
-  } catch {
-    return fallback
-  }
-}
-
-export function kvWriteOne(api: TuiPluginApi, key: string, value: string): void {
-  try {
-    const kv = (api as TuiPluginApi & { kv?: { set: (k: string, v: string) => void } }).kv
-    kv?.set(key, value)
-  } catch {
-    // no kv in older hosts
-  }
-}
-
-const KV_DISMISSED_QUESTIONS = "oes.dismissed.questions"
-
-export function readDismissedQuestions(api: TuiPluginApi): ReadonlySet<string> {
-  try {
-    const kv = (api as TuiPluginApi & { kv?: { get: (k: string, d?: unknown) => unknown } }).kv
-    const raw = kv?.get(KV_DISMISSED_QUESTIONS, null)
-    return parseDismissed(typeof raw === "string" ? raw : null)
-  } catch {
-    return new Set()
-  }
-}
-
-export function dismissQuestion(api: TuiPluginApi, partId: string): void {
-  try {
-    const ids = new Set(readDismissedQuestions(api))
-    ids.add(partId)
-    const kv = (api as TuiPluginApi & { kv?: { set: (k: string, v: string) => void } }).kv
-    kv?.set(KV_DISMISSED_QUESTIONS, formatDismissed(ids))
-  } catch {
-    // no kv in older hosts
-  }
-}
-
-/** The single mapping from a semantic tone to a concrete theme colour. */
-export function toneColor(tone: ToneKey, colors: ThemeColors): string {
-  switch (tone) {
-    case "success":
-      return colors.success
-    case "warning":
-      return colors.warning || colors.text
-    case "primary":
-      return colors.primary || colors.text
-    case "error":
-      return colors.error || colors.text
-    case "text":
-      return colors.text
-    default:
-      return colors.textMuted
-  }
-}
-
-export function diffAddFg(colors: ThemeColors): string {
-  return colors.diffAdded || colors.success
-}
-
-export function diffDelFg(colors: ThemeColors): string {
-  return colors.diffRemoved || colors.error || colors.text
-}
-
-export function DiffStat(props: {
-  additions: number
-  deletions: number
-  colors: ThemeColors
-}): JSX.Element {
-  const lead = () => (props.additions > 0 && props.deletions > 0 ? " " : "")
-  return (
-    <box flexDirection="row">
-      <Show when={props.additions > 0}>
-        <text fg={diffAddFg(props.colors)}>{`+${props.additions}`}</text>
-      </Show>
-      <Show when={props.deletions > 0}>
-        <text fg={diffDelFg(props.colors)}>{`${lead()}−${props.deletions}`}</text>
-      </Show>
-    </box>
-  )
-}
-
-/**
- * Right-rail action labels — fold headers, realtime `F`, and any future row
- * actions share {@link CONTEXT_ACTION_COL_WIDTH} so the column lines up.
- */
-export function ContextActions(props: {
-  actions: readonly ContextAction[]
-  colors: ThemeColors
-  width?: number
-}): JSX.Element {
-  return (
-    <box
-      flexDirection="row"
-      width={props.width ?? CONTEXT_ACTION_COL_WIDTH}
-      justifyContent="flex-end"
-      flexShrink={0}
-    >
-      <For each={props.actions}>
-        {(action, i) => (
-          <>
-            <Show when={i() > 0}>
-              <text> </text>
-            </Show>
-            <ClickText
-              fg={props.colors.primary || props.colors.text}
-              bold={action.bold}
-              underline
-              onMouseUp={action.onPick}
-            >
-              {action.label}
-            </ClickText>
-          </>
-        )}
-      </For>
-    </box>
-  )
-}
-
-/** Header text for a fold row: title, optional `(N)` / `(live/N)` / `(countLabel)` parenthetical, optional suffix. */
-export function foldHeaderTitle(
-  title: string,
-  opts: { count?: number; live?: number; countLabel?: string; suffix?: string } = {},
-): string {
-  const { count, live = 0, countLabel, suffix } = opts
-  const stat = suffix ? ` ${suffix}` : ""
-  if (typeof count !== "number") return `${title}${stat}`
-  const extra = countLabel
-    ? ` (${countLabel})`
-    : live > 0
-      ? ` (${live}/${count})`
-      : ` (${count})`
-  return `${title}${extra}${stat}`
-}
-
-export function FoldHeader(props: {
-  title: string
-  open: boolean
-  count?: number
-  live?: number
-  /** Overrides the `(N)` / `(live/N)` parenthetical, e.g. `last 4`. */
-  countLabel?: string
-  suffix?: string
-  diff?: { additions: number; deletions: number }
-  colors: ThemeColors
-  onToggle: () => void
-  /** Title click opens a detail (fold stays on the chevron). */
-  onDetail?: () => void
-  /** Context actions in the shared right rail (`switch` / `new`, `view all`, …). */
-  actions?: readonly ContextAction[]
-}): JSX.Element {
-  const rest = () => foldHeaderTitle(props.title, props)
-  const hasDiff = () =>
-    Boolean(props.diff && (props.diff.additions > 0 || props.diff.deletions > 0))
-  const chevron = () => (props.open ? "▼" : "▶")
-  const actions = () => props.actions ?? []
-  const split = Boolean(props.onDetail || actions().length > 0)
-  return (
-    <box flexDirection="row" width="100%" onMouseUp={split ? undefined : props.onToggle}>
-      <box flexDirection="row" flexGrow={1} flexShrink={1} minWidth={0}>
-        <ClickText
-          fg={props.colors.text}
-          underline={!props.onDetail}
-          onMouseUp={split ? props.onToggle : undefined}
-        >
-          {props.onDetail ? `${chevron()} ` : `${chevron()} ${rest()}`}
-        </ClickText>
-        <Show when={props.onDetail}>
-          <ClickText fg={props.colors.text} underline onMouseUp={props.onDetail}>
-            {rest()}
-          </ClickText>
-        </Show>
-        <Show when={hasDiff()}>
-          <text> </text>
-          <DiffStat
-            additions={props.diff?.additions ?? 0}
-            deletions={props.diff?.deletions ?? 0}
-            colors={props.colors}
-          />
-        </Show>
-      </box>
-      <Show when={actions().length > 0}>
-        <ContextActions actions={actions()} colors={props.colors} />
-      </Show>
-    </box>
-  )
-}
-
-/**
- * Brand + clickable tabs. Active tab is bold + primary; clickable labels
- * underline on hover. `onBrand` makes the brand itself a control — the OMO
- * group folds on it.
- */
-export function BrandTabs(props: {
-  brand: string
-  tabs: readonly string[]
-  labels: Record<string, string>
-  active: string | null
-  colors: ThemeColors
-  onPick: (tab: string) => void
-  onBrand?: () => void
-  /**
-   * Per-tab leading glyph replacing the `|` separator between tabs — the tab's
-   * status light. The glyph doubles as spacing, so headers read `• My work • Session …`.
-   */
-  glyph?: (tab: string) => GlyphSpec
-}): JSX.Element {
-  const brand = () => props.colors.primary || props.colors.text
-  const tabFg = (tab: string) =>
-    props.active === tab ? props.colors.primary || props.colors.text : props.colors.textMuted
-  return (
-    <box flexDirection="row" gap={1}>
-      <Show when={props.brand}>
-        <box flexDirection="row" onMouseUp={props.onBrand}>
-          <ClickText fg={brand()} bold underline={Boolean(props.onBrand)}>
-            {props.brand}
-          </ClickText>
-        </box>
-      </Show>
-      <For each={props.tabs}>
-        {(tab: string, i) => {
-          // Read the glyph through an accessor invoked inside the JSX, never a
-          // plain body const: SolidJS only re-runs JSX expressions, so the
-          // My-work tab light (a live memo) updates only when it is read at the
-          // expression site. A body-level `const glyph = props.glyph(tab)` would
-          // freeze the header at its first render.
-          const glyph = () => (props.glyph ? props.glyph(tab) : null)
-          return (
-            <box flexDirection="row" gap={1} onMouseUp={() => props.onPick(tab)}>
-              {glyph() ? (
-                <text fg={toneColor(glyph()!.tone, props.colors)}>{`${glyph()!.char} `}</text>
-              ) : (
-                <Show when={Boolean(props.brand) || i() > 0}>
-                  <text fg={props.colors.textMuted}>|</text>
-                </Show>
-              )}
-              <ClickText fg={tabFg(tab)} bold={props.active === tab} underline>
-                {props.labels[tab] ?? tab}
-              </ClickText>
-            </box>
-          )
-        }}
-      </For>
-    </box>
-  )
-}
+/** @jsxImportSource @opentui/solid */
+/** Shared sidebar chrome: brand tabs, theme colours, fold headers, diff stats, kv persistence. */
+import { createSignal, For, Show, type JSX } from "solid-js"
+import { TextAttributes } from "@opentui/core"
+import type { TuiPluginApi } from "@opencode-ai/plugin/tui"
+import type { GlyphSpec, ToneKey } from "../pware.oc.core/pware.oc.core.glyph.js"
+import { CONTEXT_ACTION_COL_WIDTH } from "../pware.oc.core/pware.oc.core.layout.js"
+import {
+  emptyRuntimeConfig,
+  parseRuntimeConfig,
+  pinSession,
+  unpinSession,
+  type RuntimeConfigDto,
+} from "../pware.oc.core/pware.oc.core.runtimeConfig.js"
+import { formatDismissed, parseDismissed } from "../pware.oc.runtime/pware.oc.runtime.mywork.js"
+
+/** One clickable context action in the shared right rail. */
+export type ContextAction = {
+  label: string
+  onPick: () => void
+  bold?: boolean
+}
+
+/** OpenTUI has no bold/underline props on `<text>` — only the `attributes` bitmask. */
+export function textAttrs(bold?: boolean, underline?: boolean): number {
+  let a = 0
+  if (bold) a |= TextAttributes.BOLD
+  if (underline) a |= TextAttributes.UNDERLINE
+  return a
+}
+
+/**
+ * Clickable label: underlined only while the pointer hovers it.
+ * OpenTUI fires `over`/`out` on hit-test change, so the underline
+ * tracks the mouse instead of being baked in. `underline` marks
+ * clickability; without it the label never underlines.
+ */
+export function ClickText(props: {
+  fg?: string
+  bold?: boolean
+  /** Clickable — the underline appears while the pointer is over the label. */
+  underline?: boolean
+  opacity?: number
+  onMouseUp?: () => void
+  children: JSX.Element
+}): JSX.Element {
+  const [hovered, setHovered] = createSignal(false)
+  return (
+    <text
+      fg={props.fg}
+      opacity={props.opacity}
+      attributes={textAttrs(Boolean(props.bold), Boolean(props.underline) && hovered())}
+      onMouseUp={props.onMouseUp}
+      onMouseOver={() => setHovered(true)}
+      onMouseOut={() => setHovered(false)}
+    >
+      {props.children}
+    </text>
+  )
+}
+
+export type ThemeColors = {
+  text: string
+  textMuted: string
+  success: string
+  primary?: string
+  warning?: string
+  error?: string
+  diffAdded?: string
+  diffRemoved?: string
+}
+
+export function kvRead(api: TuiPluginApi, key: string, fallback: boolean): boolean {
+  try {
+    const kv = (api as TuiPluginApi & { kv?: { get: (k: string, d?: boolean) => boolean } }).kv
+    return kv?.get(key, fallback) ?? fallback
+  } catch {
+    return fallback
+  }
+}
+
+export function kvWrite(api: TuiPluginApi, key: string, value: boolean): void {
+  try {
+    const kv = (api as TuiPluginApi & { kv?: { set: (k: string, v: boolean) => void } }).kv
+    kv?.set(key, value)
+  } catch {
+    // no kv in older hosts
+  }
+}
+
+/** Same store, string value. Anything outside `allowed` falls back. */
+export function kvReadOne<T extends string>(
+  api: TuiPluginApi,
+  key: string,
+  fallback: T,
+  allowed: readonly T[],
+): T {
+  try {
+    const kv = (api as TuiPluginApi & { kv?: { get: (k: string, d?: string) => unknown } }).kv
+    const raw = kv?.get(key, fallback)
+    return allowed.includes(raw as T) ? (raw as T) : fallback
+  } catch {
+    return fallback
+  }
+}
+
+export function kvWriteOne(api: TuiPluginApi, key: string, value: string): void {
+  try {
+    const kv = (api as TuiPluginApi & { kv?: { set: (k: string, v: string) => void } }).kv
+    kv?.set(key, value)
+  } catch {
+    // no kv in older hosts
+  }
+}
+
+const KV_DISMISSED_QUESTIONS = "oes.dismissed.questions"
+
+export function readDismissedQuestions(api: TuiPluginApi): ReadonlySet<string> {
+  try {
+    const kv = (api as TuiPluginApi & { kv?: { get: (k: string, d?: unknown) => unknown } }).kv
+    const raw = kv?.get(KV_DISMISSED_QUESTIONS, null)
+    return parseDismissed(typeof raw === "string" ? raw : null)
+  } catch {
+    return new Set()
+  }
+}
+
+export function dismissQuestion(api: TuiPluginApi, partId: string): void {
+  try {
+    const ids = new Set(readDismissedQuestions(api))
+    ids.add(partId)
+    const kv = (api as TuiPluginApi & { kv?: { set: (k: string, v: string) => void } }).kv
+    kv?.set(KV_DISMISSED_QUESTIONS, formatDismissed(ids))
+  } catch {
+    // no kv in older hosts
+  }
+}
+
+const KV_RUNTIME_CONFIG = "oes.config"
+
+type TuiKv = {
+  get: <T>(key: string, fallback?: T) => T
+  set: (key: string, value: unknown) => void
+}
+
+/** Host kv-backed pinned-sessions manager: pin/unpin mutate the `oes.config` DTO. */
+export function createPinnedSessions(api: TuiPluginApi): {
+  list: () => string[]
+  pin: (sessionId: string) => void
+  unpin: (sessionId: string) => void
+} {
+  const kv = () => (api as TuiPluginApi & { kv?: TuiKv }).kv
+  const read = (): RuntimeConfigDto => {
+    try {
+      return parseRuntimeConfig(kv()?.get(KV_RUNTIME_CONFIG, undefined))
+    } catch {
+      return emptyRuntimeConfig()
+    }
+  }
+  const write = (config: RuntimeConfigDto): void => {
+    try {
+      kv()?.set(KV_RUNTIME_CONFIG, config)
+    } catch {
+      // no kv in older hosts
+    }
+  }
+  return {
+    list: () => read().pinned_sessions,
+    pin: (sessionId) => write(pinSession(read(), sessionId)),
+    unpin: (sessionId) => write(unpinSession(read(), sessionId)),
+  }
+}
+
+/** The single mapping from a semantic tone to a concrete theme colour. */
+export function toneColor(tone: ToneKey, colors: ThemeColors): string {
+  switch (tone) {
+    case "success":
+      return colors.success
+    case "warning":
+      return colors.warning || colors.text
+    case "primary":
+      return colors.primary || colors.text
+    case "error":
+      return colors.error || colors.text
+    case "text":
+      return colors.text
+    default:
+      return colors.textMuted
+  }
+}
+
+export function diffAddFg(colors: ThemeColors): string {
+  return colors.diffAdded || colors.success
+}
+
+export function diffDelFg(colors: ThemeColors): string {
+  return colors.diffRemoved || colors.error || colors.text
+}
+
+export function DiffStat(props: {
+  additions: number
+  deletions: number
+  colors: ThemeColors
+}): JSX.Element {
+  const lead = () => (props.additions > 0 && props.deletions > 0 ? " " : "")
+  return (
+    <box flexDirection="row">
+      <Show when={props.additions > 0}>
+        <text fg={diffAddFg(props.colors)}>{`+${props.additions}`}</text>
+      </Show>
+      <Show when={props.deletions > 0}>
+        <text fg={diffDelFg(props.colors)}>{`${lead()}−${props.deletions}`}</text>
+      </Show>
+    </box>
+  )
+}
+
+/**
+ * Right-rail action labels — fold headers, realtime `F`, and any future row
+ * actions share {@link CONTEXT_ACTION_COL_WIDTH} so the column lines up.
+ */
+export function ContextActions(props: {
+  actions: readonly ContextAction[]
+  colors: ThemeColors
+  width?: number
+}): JSX.Element {
+  return (
+    <box
+      flexDirection="row"
+      width={props.width ?? CONTEXT_ACTION_COL_WIDTH}
+      justifyContent="flex-end"
+      flexShrink={0}
+    >
+      <For each={props.actions}>
+        {(action, i) => (
+          <>
+            <Show when={i() > 0}>
+              <text> </text>
+            </Show>
+            <ClickText
+              fg={props.colors.primary || props.colors.text}
+              bold={action.bold}
+              underline
+              onMouseUp={action.onPick}
+            >
+              {action.label}
+            </ClickText>
+          </>
+        )}
+      </For>
+    </box>
+  )
+}
+
+/** Header text for a fold row: title, optional `(N)` / `(live/N)` / `(countLabel)` parenthetical, optional suffix. */
+export function foldHeaderTitle(
+  title: string,
+  opts: { count?: number; live?: number; countLabel?: string; suffix?: string } = {},
+): string {
+  const { count, live = 0, countLabel, suffix } = opts
+  const stat = suffix ? ` ${suffix}` : ""
+  if (typeof count !== "number") return `${title}${stat}`
+  const extra = countLabel
+    ? ` (${countLabel})`
+    : live > 0
+      ? ` (${live}/${count})`
+      : ` (${count})`
+  return `${title}${extra}${stat}`
+}
+
+export function FoldHeader(props: {
+  title: string
+  open: boolean
+  count?: number
+  live?: number
+  /** Overrides the `(N)` / `(live/N)` parenthetical, e.g. `last 4`. */
+  countLabel?: string
+  suffix?: string
+  diff?: { additions: number; deletions: number }
+  colors: ThemeColors
+  onToggle: () => void
+  /** Title click opens a detail (fold stays on the chevron). */
+  onDetail?: () => void
+  /** Context actions in the shared right rail (`switch` / `new`, `view all`, …). */
+  actions?: readonly ContextAction[]
+}): JSX.Element {
+  const rest = () => foldHeaderTitle(props.title, props)
+  const hasDiff = () =>
+    Boolean(props.diff && (props.diff.additions > 0 || props.diff.deletions > 0))
+  const chevron = () => (props.open ? "▼" : "▶")
+  const actions = () => props.actions ?? []
+  const split = Boolean(props.onDetail || actions().length > 0)
+  return (
+    <box flexDirection="row" width="100%" onMouseUp={split ? undefined : props.onToggle}>
+      <box flexDirection="row" flexGrow={1} flexShrink={1} minWidth={0}>
+        <ClickText
+          fg={props.colors.text}
+          underline={!props.onDetail}
+          onMouseUp={split ? props.onToggle : undefined}
+        >
+          {props.onDetail ? `${chevron()} ` : `${chevron()} ${rest()}`}
+        </ClickText>
+        <Show when={props.onDetail}>
+          <ClickText fg={props.colors.text} underline onMouseUp={props.onDetail}>
+            {rest()}
+          </ClickText>
+        </Show>
+        <Show when={hasDiff()}>
+          <text> </text>
+          <DiffStat
+            additions={props.diff?.additions ?? 0}
+            deletions={props.diff?.deletions ?? 0}
+            colors={props.colors}
+          />
+        </Show>
+      </box>
+      <Show when={actions().length > 0}>
+        <ContextActions actions={actions()} colors={props.colors} />
+      </Show>
+    </box>
+  )
+}
+
+/**
+ * Brand + clickable tabs. Active tab is bold + primary; clickable labels
+ * underline on hover. `onBrand` makes the brand itself a control — the OMO
+ * group folds on it.
+ */
+export function BrandTabs(props: {
+  brand: string
+  tabs: readonly string[]
+  labels: Record<string, string>
+  active: string | null
+  colors: ThemeColors
+  onPick: (tab: string) => void
+  onBrand?: () => void
+  /**
+   * Per-tab leading glyph replacing the `|` separator between tabs — the tab's
+   * status light. The glyph doubles as spacing, so headers read `• My work • Session …`.
+   */
+  glyph?: (tab: string) => GlyphSpec
+}): JSX.Element {
+  const brand = () => props.colors.primary || props.colors.text
+  const tabFg = (tab: string) =>
+    props.active === tab ? props.colors.primary || props.colors.text : props.colors.textMuted
+  return (
+    <box flexDirection="row" gap={1}>
+      <Show when={props.brand}>
+        <box flexDirection="row" onMouseUp={props.onBrand}>
+          <ClickText fg={brand()} bold underline={Boolean(props.onBrand)}>
+            {props.brand}
+          </ClickText>
+        </box>
+      </Show>
+      <For each={props.tabs}>
+        {(tab: string, i) => {
+          // Read the glyph through an accessor invoked inside the JSX, never a
+          // plain body const: SolidJS only re-runs JSX expressions, so the
+          // My-work tab light (a live memo) updates only when it is read at the
+          // expression site. A body-level `const glyph = props.glyph(tab)` would
+          // freeze the header at its first render.
+          const glyph = () => (props.glyph ? props.glyph(tab) : null)
+          return (
+            <box flexDirection="row" gap={1} onMouseUp={() => props.onPick(tab)}>
+              {glyph() ? (
+                <text fg={toneColor(glyph()!.tone, props.colors)}>{`${glyph()!.char} `}</text>
+              ) : (
+                <Show when={Boolean(props.brand) || i() > 0}>
+                  <text fg={props.colors.textMuted}>|</text>
+                </Show>
+              )}
+              <ClickText fg={tabFg(tab)} bold={props.active === tab} underline>
+                {props.labels[tab] ?? tab}
+              </ClickText>
+            </box>
+          )
+        }}
+      </For>
+    </box>
+  )
+}