opencode-extended-sidebar 0.2.90

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

@@ -0,0 +1,339 @@
+/** @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>
+  )
+}

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

@@ -0,0 +1,144 @@
+/**
+ * pware.oc.ui.glyphs
+ *
+ * Domain glyph definitions (My work kinds, git letters, review lanes) that
+ * depend on opencode / omo / runtime types, so they cannot live in core. Each
+ * returns a complete `GlyphSpec` (char + tone). The pure mark/flow glyphs live
+ * in core (`pware.oc.core/pware.oc.core.glyph.ts`) and are re-exported here so
+ * every glyph resolves through this one module.
+ */
+import type { FileLetter } from "../pware.oc.opencode/pware.oc.opencode.files.js"
+import type { MyWorkKind } from "../pware.oc.runtime/pware.oc.runtime.mywork.js"
+import type { ReviewLane, ReviewState } from "../pware.oc.omo/resolver/pware.oc.omo.resolver.plan.js"
+import {
+  REVIEW_STATUS_APPROVED,
+  REVIEW_STATUS_CHANGES_REQUESTED,
+  REVIEW_STATUS_INCONCLUSIVE,
+  REVIEW_STATUS_PENDING,
+  ROUND_STATUS_ACTIVE,
+} from "../pware.oc.omo/constants/pware.oc.omo.constants.reviewStatus.js"
+import {
+  MY_WORK_GROUP_DISMISSED,
+  MY_WORK_GROUP_DRAFT_DOCS,
+  MY_WORK_GROUP_DRAFTING,
+  MY_WORK_GROUP_FINISHED,
+  MY_WORK_GROUP_PINNED,
+  MY_WORK_GROUP_PLANS,
+  MY_WORK_GROUP_READY_REVIEW,
+  MY_WORK_GROUP_READY_START,
+  MY_WORK_GROUP_SESSIONS,
+} from "../pware.oc.core/constants/pware.oc.core.constants.myWork.js"
+import {
+  QUESTION_KIND_ERROR,
+  QUESTION_KIND_INTERRUPTED,
+  QUESTION_KIND_QUESTION,
+} from "../pware.oc.opencode/constants/pware.oc.opencode.constants.questionKind.js"
+import type { GlyphSpec } from "../pware.oc.core/pware.oc.core.glyph.js"
+
+export { workStatusGlyph } from "../pware.oc.core/pware.oc.core.status.js"
+export {
+  SPINNER_FRAMES,
+  QUEUED_GLYPH,
+  ENGAGE_MIN_FRAMES,
+  ENGAGE_MAX_FRAMES,
+  spinnerFrame,
+  engageFill,
+  engageDone,
+  flowBlinkOn,
+  sinPulseAlpha,
+  type SinPulseAlphaOpts,
+  markTone,
+  stateGlyph,
+  directionGlyph,
+  defaultBodyTone,
+  type GlyphSpec,
+  type ToneKey,
+} from "../pware.oc.core/pware.oc.core.glyph.js"
+
+/** Group header before a clustered row list. */
+export const GROUP_GLYPH = "▾"
+/** Perf: a phase of the wall clock spent thinking. */
+export const THINK_GLYPH = "∴"
+
+/** The glyph for a My work kind — a complete spec; the tone says how urgent it is. */
+export function myWorkGlyph(kind: MyWorkKind): GlyphSpec {
+  if (kind === QUESTION_KIND_QUESTION) return { char: "?", tone: "warning" }
+  if (kind === QUESTION_KIND_INTERRUPTED) return { char: "⊘", tone: "textMuted" }
+  if (kind === QUESTION_KIND_ERROR) return { char: "×", tone: "error" }
+  if (kind === MY_WORK_GROUP_SESSIONS) return { char: "◔", tone: "primary" }
+  if (kind === MY_WORK_GROUP_PINNED) return { char: "P", tone: "primary" }
+  if (kind === MY_WORK_GROUP_READY_REVIEW) return { char: "!", tone: "warning" }
+  if (kind === MY_WORK_GROUP_DRAFTING) return { char: "…", tone: "textMuted" }
+  if (kind === MY_WORK_GROUP_DRAFT_DOCS) return { char: "•", tone: "textMuted" }
+  if (kind === MY_WORK_GROUP_PLANS) return { char: "▸", tone: "textMuted" }
+  if (kind === MY_WORK_GROUP_READY_START) return { char: "▶", tone: "primary" }
+  if (kind === MY_WORK_GROUP_FINISHED) return { char: "✓", tone: "success" }
+  if (kind === MY_WORK_GROUP_DISMISSED) return { char: "⊘", tone: "textMuted" }
+  return { char: "!", tone: "warning" }
+}
+
+/**
+ * Neutral tab-header light: a small muted bullet, shown when nothing is
+ * waiting on the user (and for every non-My-work tab).
+ */
+export const TAB_NEUTRAL_GLYPH: GlyphSpec = { char: "•", tone: "textMuted" }
+
+/** One item the My-work tab light reasons about. `ended` marks a terminated part. */
+export type TabAttentionItem = {
+  kind: MyWorkKind
+  /** True when the part already has a terminal end time — history, not live. */
+  ended?: boolean
+}
+
+/**
+ * The tab light's winner list, most urgent first. A live open question beats
+ * everything; an *ended* error is history (the panel still lists it in Errors)
+ * and never lights the tab; running/drafting/finished are not waiting on you.
+ */
+const TAB_ATTENTION_PRIORITY: readonly ((i: TabAttentionItem) => boolean)[] = [
+  (i) => i.kind === QUESTION_KIND_QUESTION,
+  (i) => i.kind === QUESTION_KIND_ERROR && !i.ended,
+  (i) => i.kind === MY_WORK_GROUP_READY_REVIEW,
+  (i) => i.kind === MY_WORK_GROUP_READY_START,
+  (i) => i.kind === QUESTION_KIND_INTERRUPTED && !i.ended,
+]
+
+/** The My-work tab light: the most urgent live waiting item, or a neutral bullet. */
+export function tabAttentionGlyph(items: readonly TabAttentionItem[]): GlyphSpec {
+  for (const match of TAB_ATTENTION_PRIORITY) {
+    for (const item of items) {
+      if (match(item)) return myWorkGlyph(item.kind)
+    }
+  }
+  return TAB_NEUTRAL_GLYPH
+}
+
+/** A git-status letter as a glyph: added green, deleted red, modified yellow, rest muted. */
+export function fileLetterGlyph(letter: FileLetter | null): GlyphSpec {
+  const char = letter ?? "•"
+  const tone =
+    letter === "A" ? "success" : letter === "D" ? "error" : letter === "M" ? "warning" : "textMuted"
+  return { char, tone }
+}
+
+/** One ulw-plan review lane: ✓ approved, ! changes, ? inconclusive, … live, · pending. */
+export function reviewLaneGlyph(lane: ReviewLane | null | undefined): GlyphSpec {
+  const s = lane?.status
+  if (s === REVIEW_STATUS_APPROVED) return { char: "✓", tone: "success" }
+  if (s === REVIEW_STATUS_CHANGES_REQUESTED) return { char: "!", tone: "warning" }
+  if (s === REVIEW_STATUS_INCONCLUSIVE) return { char: "?", tone: "warning" }
+  if (s === REVIEW_STATUS_PENDING || !s) return { char: "·", tone: "textMuted" }
+  return { char: "…", tone: "textMuted" }
+}
+
+/**
+ * Compact review state for a plan row: `R<round> <momus><independent>` while a
+ * round is recorded, otherwise just the two lanes. Null when no review exists.
+ */
+export function reviewStateSuffix(review: ReviewState | null | undefined): string | null {
+  if (!review || (!review.required && !review.roundId && !review.roundStatus)) return null
+  const lanes = `${reviewLaneGlyph(review.lanes.momus).char}${reviewLaneGlyph(review.lanes.independent).char}`
+  if (review.roundId) return `R${review.roundId} ${lanes}`
+  if (review.roundStatus === ROUND_STATUS_ACTIVE) return `R… ${lanes}`
+  return lanes
+}

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

@@ -0,0 +1,111 @@
+import type { TuiKeymap, TuiPluginApi } from "@opencode-ai/plugin/tui"
+import { profileAsync } from "../pware.oc.core/pware.oc.core.debug.js"
+import { PART_TYPE_TEXT } from "../pware.oc.core/constants/pware.oc.core.constants.partType.js"
+import {
+  START_WORK_MAKE_PR,
+  START_WORK_SHIP,
+} from "../pware.oc.omo/constants/pware.oc.omo.constants.startWork.js"
+import { startWorkCommand, type StartWorkMode } from "../pware.oc.runtime/pware.oc.runtime.mywork.js"
+
+export function selectSession(api: TuiPluginApi, sessionId: string | null | undefined): void {
+  if (!sessionId) return
+  const tui = (api as TuiPluginApi & {
+    client?: {
+      tui?: {
+        selectSession?: (arg: unknown) => Promise<unknown> | unknown
+        publish?: (arg: unknown) => Promise<unknown> | unknown
+      }
+    }
+  }).client?.tui
+  if (!tui) return
+  const go = async () => {
+    try {
+      if (typeof tui.selectSession === "function") {
+        await tui.selectSession({ sessionID: sessionId })
+        return
+      }
+    } catch {
+      try {
+        await tui.selectSession?.(sessionId)
+        return
+      } catch {
+      }
+    }
+    try {
+      await tui.publish?.({
+        type: "tui.session.select",
+        properties: { sessionID: sessionId },
+      })
+    } catch {
+    }
+  }
+  void profileAsync("rpc.selectSession", go)
+}
+
+export function openSessionSwitcher(api: TuiPluginApi): void {
+  try {
+    const dispatch = (api.keymap as TuiKeymap & { dispatchCommand?: (name: string) => void })
+      .dispatchCommand
+    if (typeof dispatch === "function") {
+      dispatch("session.list")
+      return
+    }
+  } catch {
+  }
+  try {
+    api.command?.show()
+  } catch {
+  }
+}
+
+export function openNewSessionPrompt(api: TuiPluginApi): void {
+  try {
+    api.route.navigate("home")
+  } catch {
+  }
+}
+
+export function runStartWork(
+  api: TuiPluginApi,
+  sessionId: string,
+  mode: StartWorkMode,
+  planName: string,
+): void {
+  const client = api.client
+  const text = startWorkCommand(mode, planName)
+  const flag = mode === START_WORK_MAKE_PR ? "--make-pr" : mode === START_WORK_SHIP ? "--ship" : ""
+  const args = [planName, flag].map((s) => s.trim()).filter(Boolean).join(" ") || ""
+  const go = async () => {
+    try {
+      const res = await client.session.command({
+        sessionID: sessionId,
+        command: "start-work",
+        arguments: args,
+      })
+      if (res && !res.error) return
+    } catch {
+    }
+    try {
+      await client.session.promptAsync({
+        sessionID: sessionId,
+        parts: [{ type: PART_TYPE_TEXT, text }],
+      })
+    } catch {
+    }
+  }
+  void profileAsync("rpc.startWork", go)
+}
+
+export function approvePlan(api: TuiPluginApi, sessionId: string): void {
+  const client = api.client
+  const go = async () => {
+    try {
+      await client.session.promptAsync({
+        sessionID: sessionId,
+        parts: [{ type: PART_TYPE_TEXT, text: "ok" }],
+      })
+    } catch {
+    }
+  }
+  void profileAsync("rpc.approve", go)
+}

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

@@ -0,0 +1,82 @@
+import type { TuiPluginApi } from "@opencode-ai/plugin/tui"
+import type { PwareEventBus } from "../pware.oc.core/pware.oc.core.bus.js"
+import { eventType, shouldRefreshDb } from "../pware.oc.core/pware.oc.core.events.js"
+import {
+  EVENT_TUI_SESSION_SELECT,
+  PANEL_HOST_TYPES,
+} from "../pware.oc.core/constants/pware.oc.core.constants.eventType.js"
+import {
+  EV_OES_QUESTION_HINT,
+  EV_OES_REFRESH_HINT,
+  EV_OES_SESSION_SELECT,
+} from "../pware.oc.core/constants/pware.oc.core.constants.eventName.js"
+import { profile } from "../pware.oc.core/pware.oc.core.debug.js"
+import {
+  hostEventToOcEvents,
+  questionSessionFromEvent,
+} from "../pware.oc.opencode/pware.oc.opencode.events.js"
+
+export type HostEventBridgeOptions = {
+  api: TuiPluginApi
+  bus: PwareEventBus
+  sessionId: () => string
+  projectRoot: () => string | null
+  onRender: () => void
+}
+
+function normalizeEvent(type: string, raw: unknown): unknown {
+  if (raw && typeof raw === "object") {
+    const obj = raw as Record<string, unknown>
+    if (typeof obj.type === "string" && obj.type) return raw
+    return { type, properties: raw }
+  }
+  return { type, properties: raw ?? {} }
+}
+
+export function startHostEventBridge(opts: HostEventBridgeOptions): { stop: () => void } {
+  const offs: Array<() => void> = []
+  const on = opts.api.event.on as (name: string, cb: (...args: unknown[]) => void) => unknown
+
+  for (const type of PANEL_HOST_TYPES) {
+    try {
+      const off = on(type, (...args: unknown[]) => {
+        profile(
+          "event",
+          () => {
+            const evt = normalizeEvent(type, args[0])
+            for (const e of hostEventToOcEvents(evt, {
+              sessionId: opts.sessionId(),
+              projectRoot: opts.projectRoot(),
+            })) {
+              opts.bus.emit(e)
+            }
+            const qsid = questionSessionFromEvent(evt)
+            if (qsid) {
+              opts.bus.emit({ type: EV_OES_QUESTION_HINT, ts: Date.now(), data: { sessionId: qsid } })
+            }
+            if (shouldRefreshDb(eventType(evt))) {
+              opts.bus.emit({ type: EV_OES_REFRESH_HINT, ts: Date.now(), data: {} })
+            }
+            if (type === EVENT_TUI_SESSION_SELECT) {
+              opts.bus.emit({
+                type: EV_OES_SESSION_SELECT,
+                ts: Date.now(),
+                data: { sessionId: opts.sessionId() },
+              })
+            }
+            queueMicrotask(opts.onRender)
+          },
+          { type: eventType(args[0]) || undefined },
+        )
+      })
+      if (typeof off === "function") offs.push(off as () => void)
+    } catch {
+    }
+  }
+
+  return {
+    stop: () => {
+      for (const off of offs) off()
+    },
+  }
+}