@wolfx/opencode-magic-context 0.21.8-patch.1

package/src/tui/index.tsx

@@ -0,0 +1,692 @@
+/** @jsxImportSource @opentui/solid */
+// @ts-nocheck
+import { existsSync, mkdirSync, writeFileSync } from "node:fs"
+import { dirname, join } from "node:path"
+import { createMemo } from "solid-js"
+import type { TuiPlugin, TuiPluginApi, TuiThemeCurrent } from "@opencode-ai/plugin/tui"
+import { createSidebarContentSlot } from "./slots/sidebar-content"
+import packageJson from "../../package.json"
+import { closeRpc, consumeTuiMessages, getAnnouncement, getCompartmentCount, initRpcClient, loadStatusDetail, markAnnounced, requestRecomp, type StatusDetail } from "./data/context-db"
+import { formatThresholdPercent } from "../shared/format-threshold"
+import { detectConflicts } from "../shared/conflict-detector"
+import { fixConflicts } from "../shared/conflict-fixer"
+import { readJsoncFile } from "../shared/jsonc-parser"
+import { getOpenCodeConfigPaths } from "../shared/opencode-config-dir"
+
+const PLUGIN_NAME = "@wolfx/opencode-magic-context"
+
+function ensureParentDir(filePath: string) {
+    mkdirSync(dirname(filePath), { recursive: true })
+}
+
+function resolveTuiConfigPath() {
+    const configDir = getOpenCodeConfigPaths({ binary: "opencode" }).configDir
+    const jsoncPath = join(configDir, "tui.jsonc")
+    const jsonPath = join(configDir, "tui.json")
+
+    if (existsSync(jsoncPath)) {
+        return jsoncPath
+    }
+
+    if (existsSync(jsonPath)) {
+        return jsonPath
+    }
+
+    return jsonPath
+}
+
+function readTuiConfig(filePath: string): Record<string, unknown> | null {
+    if (!existsSync(filePath)) {
+        return {}
+    }
+
+    return readJsoncFile<Record<string, unknown>>(filePath)
+}
+
+function hasMagicContextTuiPlugin(): boolean {
+    const configPath = resolveTuiConfigPath()
+    const config = readTuiConfig(configPath)
+    if (!config) {
+        return false
+    }
+
+    const plugins = Array.isArray(config.plugin)
+        ? config.plugin.filter((plugin): plugin is string => typeof plugin === "string")
+        : []
+
+    return plugins.some((plugin) => plugin === PLUGIN_NAME || plugin.startsWith(`${PLUGIN_NAME}@`))
+}
+
+function addMagicContextTuiPlugin(): { ok: boolean; updated: boolean } {
+    const configPath = resolveTuiConfigPath()
+    const config = readTuiConfig(configPath)
+    if (!config) {
+        return { ok: false, updated: false }
+    }
+
+    const plugins = Array.isArray(config.plugin)
+        ? config.plugin.filter((plugin): plugin is string => typeof plugin === "string")
+        : []
+
+    if (plugins.some((plugin) => plugin === PLUGIN_NAME || plugin.startsWith(`${PLUGIN_NAME}@`))) {
+        return { ok: true, updated: false }
+    }
+
+    plugins.push(PLUGIN_NAME)
+    config.plugin = plugins
+
+    ensureParentDir(configPath)
+    writeFileSync(configPath, `${JSON.stringify(config, null, 2)}\n`)
+    return { ok: true, updated: true }
+}
+
+function showConflictDialog(api: TuiPluginApi, directory: string, reasons: string[], conflicts: ReturnType<typeof detectConflicts>["conflicts"]) {
+    api.ui.dialog.replace(() => (
+        <api.ui.DialogConfirm
+            title="⚠️ Magic Context Disabled"
+            message={`${reasons.join("\n")}\n\nFix these conflicts automatically?`}
+            onConfirm={() => {
+                const actions = fixConflicts(directory, conflicts)
+                const actionSummary = actions.length > 0
+                    ? actions.map(a => `• ${a}`).join("\n")
+                    : "No changes needed"
+                // DialogConfirm calls dialog.clear() after onConfirm, so defer the next dialog
+                setTimeout(() => {
+                    api.ui.dialog.replace(() => (
+                        <api.ui.DialogAlert
+                            title="✅ Configuration Fixed"
+                            message={`${actionSummary}\n\nPlease restart OpenCode for changes to take effect.`}
+                            onConfirm={() => {
+                                api.ui.toast({ message: "Restart OpenCode to enable Magic Context", variant: "warning", duration: 10000 })
+                            }}
+                        />
+                    ))
+                }, 50)
+            }}
+            onCancel={() => {
+                api.ui.toast({ message: "Magic Context remains disabled. Run: npx @wolfx/opencode-magic-context@latest doctor", variant: "warning", duration: 5000 })
+            }}
+        />
+    ))
+}
+
+function showTuiSetupDialog(api: TuiPluginApi) {
+    api.ui.dialog.replace(() => (
+        <api.ui.DialogConfirm
+            title="✨ Enable Magic Context Sidebar"
+            message={[
+                "Magic Context can show a sidebar with live context breakdown,",
+                "token usage, historian status, memory counts, and dreamer info.",
+                "",
+                "This requires adding the plugin to your tui.json config",
+                "(OpenCode's TUI plugin configuration file).",
+                "",
+                "Add it now?",
+            ].join("\n")}
+            onConfirm={() => {
+                const result = addMagicContextTuiPlugin()
+                if (!result.ok) {
+                    setTimeout(() => {
+                        api.ui.dialog.replace(() => (
+                            <api.ui.DialogAlert
+                                title="❌ Setup Failed"
+                                message={'Could not update tui.json automatically. Add the plugin manually:\n\n  { "plugin": ["@wolfx/opencode-magic-context"] }'}
+                                onConfirm={() => {
+                                    api.ui.toast({ message: "Add plugin to tui.json manually", variant: "warning", duration: 5000 })
+                                }}
+                            />
+                        ))
+                    }, 50)
+                    return
+                }
+
+                setTimeout(() => {
+                    api.ui.dialog.replace(() => (
+                        <api.ui.DialogAlert
+                            title="✅ Sidebar Enabled"
+                            message="tui.json updated with Magic Context plugin.\n\nPlease restart OpenCode to see the sidebar."
+                            onConfirm={() => {
+                                api.ui.toast({ message: "Restart OpenCode to see the sidebar", variant: "warning", duration: 10000 })
+                            }}
+                        />
+                    ))
+                }, 50)
+            }}
+            onCancel={() => {
+                api.ui.toast({ message: "You can add the sidebar later via: npx @wolfx/opencode-magic-context@latest doctor", variant: "info", duration: 5000 })
+            }}
+        />
+    ))
+}
+
+function fmt(n: number): string {
+    if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+    if (n >= 1_000) return `${Math.round(n / 1_000)}K`
+    return String(n)
+}
+
+function fmtBytes(n: number): string {
+    if (n >= 1_048_576) return `${(n / 1_048_576).toFixed(1)} MB`
+    if (n >= 1_024) return `${Math.round(n / 1_024)} KB`
+    return `${n} B`
+}
+
+function relTime(ms: number): string {
+    const d = Date.now() - ms
+    if (d < 60_000) return "just now"
+    if (d < 3_600_000) return `${Math.floor(d / 60_000)}m ago`
+    if (d < 86_400_000) return `${Math.floor(d / 3_600_000)}h ago`
+    return `${Math.floor(d / 86_400_000)}d ago`
+}
+
+function getSessionId(api: TuiPluginApi): string | null {
+    try {
+        const route = api.route.current
+        if (route?.name === "session" && route.params?.sessionID) {
+            return route.params.sessionID
+        }
+    } catch {
+        // ignore
+    }
+    return null
+}
+
+const R = (props: { t: TuiThemeCurrent; l: string; v: string; fg?: string }) => (
+    <box width="100%" flexDirection="row" justifyContent="space-between">
+        <text fg={props.t.textMuted}>{props.l}</text>
+        <text fg={props.fg ?? props.t.text}>{props.v}</text>
+    </box>
+)
+
+const StatusDialog = (props: { api: TuiPluginApi; s: StatusDetail }) => {
+    const theme = createMemo(() => (props.api as any).theme.current)
+    const t = () => theme()
+    const s = () => props.s
+
+    const contextLimit = () =>
+        s().usagePercentage > 0 ? Math.round(s().inputTokens / (s().usagePercentage / 100)) : 0
+
+    const elapsed = () => (s().lastResponseTime > 0 ? Date.now() - s().lastResponseTime : 0)
+
+    // Token breakdown segments — same colors as sidebar. Kept in sync with
+    // slots/sidebar-content.tsx so the status dialog and sidebar read identically.
+    const COLORS = {
+        // Cool / structured — injected by the plugin into message[0]
+        system: "#c084fc",
+        compartments: "#60a5fa",
+        facts: "#fbbf24",
+        memories: "#34d399",
+        // Warm / user-facing — chat and tool traffic
+        conversation: "#f87171",
+        toolCalls: "#fb923c",
+        toolDefs: "#f472b6",
+    }
+
+    const breakdownSegments = () => {
+        const d = s()
+        const total = d.inputTokens || 1
+        const segs: Array<{ label: string; tokens: number; color: string; detail?: string }> = []
+
+        if (d.systemPromptTokens > 0)
+            segs.push({ label: "System", tokens: d.systemPromptTokens, color: COLORS.system })
+        if (d.compartmentTokens > 0)
+            segs.push({
+                label: "Compartments",
+                tokens: d.compartmentTokens,
+                color: COLORS.compartments,
+                detail: `(${d.compartmentCount})`,
+            })
+        if (d.factTokens > 0)
+            segs.push({
+                label: "Facts",
+                tokens: d.factTokens,
+                color: COLORS.facts,
+                detail: `(${d.factCount})`,
+            })
+        if (d.memoryTokens > 0)
+            segs.push({
+                label: "Memories",
+                tokens: d.memoryTokens,
+                color: COLORS.memories,
+                detail: `(${d.memoryBlockCount})`,
+            })
+
+        if (d.conversationTokens > 0)
+            segs.push({ label: "Conversation", tokens: d.conversationTokens, color: COLORS.conversation })
+        if (d.toolCallTokens > 0)
+            segs.push({ label: "Tool Calls", tokens: d.toolCallTokens, color: COLORS.toolCalls })
+        if (d.toolDefinitionTokens > 0)
+            segs.push({ label: "Tool Defs", tokens: d.toolDefinitionTokens, color: COLORS.toolDefs })
+
+        return { segs, total }
+    }
+
+    // The status-dialog breakdown bar uses flex layout (same approach as the
+    // sidebar breakdown). Each segment becomes a colored box with
+    // flexGrow=tokens and flexBasis=0, parent has width="100%", so opentui
+    // distributes the dialog's full width proportionally regardless of the
+    // dialog's actual rendered width.
+    const barSegments = () => breakdownSegments().segs.filter((seg) => seg.tokens > 0)
+
+    return (
+        <box flexDirection="column" width="100%" paddingLeft={2} paddingRight={2} paddingTop={1} paddingBottom={1}>
+            {/* Title */}
+            <box justifyContent="center" width="100%" marginBottom={1} flexDirection="row" gap={2}>
+                <text fg={t().accent}><b>⚡ Magic Context Status</b></text>
+                <text fg={t().textMuted}>v{packageJson.version}</text>
+            </box>
+
+            {/* Context summary line. Mirrors the sidebar header layout
+                ("47.5% / 65%   475K / 1.0M") so users can recognize the
+                same shape in the status dialog. The execute threshold tells
+                them how close they are to compaction triggering. */}
+            <box flexDirection="row" justifyContent="space-between" width="100%">
+                <text fg={s().usagePercentage >= 80 ? t().error : s().usagePercentage >= 65 ? t().warning : t().accent}>
+                    <b>{s().usagePercentage.toFixed(1)}%</b> / {formatThresholdPercent(s().executeThreshold)}%
+                </text>
+                <text fg={s().usagePercentage >= 80 ? t().error : s().usagePercentage >= 65 ? t().warning : t().accent}>
+                    {fmt(s().inputTokens)} / {contextLimit() > 0 ? fmt(contextLimit()) : "?"} tokens
+                </text>
+            </box>
+
+            {/* Segmented breakdown bar: flex row of colored boxes filling
+                the dialog width. See barSegments comment above. */}
+            <box width="100%" flexDirection="row" height={1}>
+                {barSegments().map((seg) => (
+                    <box
+                        key={seg.label}
+                        flexGrow={Math.max(1, seg.tokens)}
+                        flexBasis={0}
+                        height={1}
+                        backgroundColor={seg.color}
+                    />
+                ))}
+            </box>
+
+            {/* Breakdown legend */}
+            <box flexDirection="column">
+                {breakdownSegments().segs.map((seg) => {
+                    const pct = ((seg.tokens / breakdownSegments().total) * 100).toFixed(1)
+                    return (
+                        <box key={seg.label} width="100%" flexDirection="row" justifyContent="space-between">
+                            <text fg={seg.color}>{seg.label} {seg.detail ?? ""}</text>
+                            <text fg={t().textMuted}>{fmt(seg.tokens)} ({pct}%)</text>
+                        </box>
+                    )
+                })}
+            </box>
+
+            {/* 2-column layout */}
+            <box flexDirection="row" width="100%" marginTop={1} gap={4}>
+                {/* Left column */}
+                <box flexDirection="column" flexGrow={1} flexBasis={0}>
+                    <text fg={t().text}><b>Tags</b></text>
+                    <R t={t()} l="Active" v={`${s().activeTags} (~${fmtBytes(s().activeBytes)})`} />
+                    <R t={t()} l="Dropped" v={String(s().droppedTags)} />
+                    <R t={t()} l="Total" v={String(s().totalTags)} fg={t().textMuted} />
+                    <box marginTop={1}>
+                        <text fg={t().text}><b>Pending Queue</b></text>
+                    </box>
+                    <R t={t()} l="Drops" v={String(s().pendingOpsCount)} fg={s().pendingOpsCount > 0 ? t().warning : t().textMuted} />
+                    <box marginTop={1}>
+                        <text fg={t().text}><b>Cache TTL</b></text>
+                    </box>
+                    <R t={t()} l="Configured" v={s().cacheTtl} />
+                    <R t={t()} l="Last response" v={s().lastResponseTime > 0 ? `${Math.round(elapsed() / 1000)}s ago` : "never"} />
+                    <R t={t()} l="Remaining" v={s().cacheExpired ? "expired" : `${Math.round(s().cacheRemainingMs / 1000)}s`} fg={s().cacheExpired ? t().warning : t().textMuted} />
+                    <R t={t()} l="Auto-execute" v={s().cacheExpired ? "yes (expired)" : `at TTL or ≥${formatThresholdPercent(s().executeThreshold)}%`} fg={t().textMuted} />
+                    <box marginTop={1}>
+                        <text fg={t().text}><b>Memory</b></text>
+                    </box>
+                    <R t={t()} l="Active" v={String(s().memoryCount)} fg={t().accent} />
+                    <R t={t()} l="Injected" v={String(s().memoryBlockCount)} fg={t().textMuted} />
+                </box>
+                {/* Right column */}
+                <box flexDirection="column" flexGrow={1} flexBasis={0}>
+                    <text fg={t().text}><b>Rolling Nudges</b></text>
+                    <R t={t()} l="Execute threshold" v={`${formatThresholdPercent(s().executeThreshold)}%`} />
+                    <R t={t()} l="Nudge anchor" v={`${fmt(s().lastNudgeTokens)} tok`} />
+                    <R t={t()} l="Interval" v={`${fmt(s().nudgeInterval)} tok`} fg={t().textMuted} />
+                    <R t={t()} l="Next nudge after" v={`${fmt(s().nextNudgeAfter)} tok`} />
+                    {s().lastNudgeBand ? <R t={t()} l="Current band" v={s().lastNudgeBand} /> : null}
+                    <box marginTop={1}>
+                        <text fg={t().text}><b>Context Details</b></text>
+                    </box>
+                    <R t={t()} l="Protected tags" v={String(s().protectedTagCount)} fg={t().textMuted} />
+                    <R t={t()} l="Subagent" v={s().isSubagent ? "yes" : "no"} fg={t().textMuted} />
+                    <box marginTop={1}>
+                        <text fg={t().text}><b>History Compression</b></text>
+                    </box>
+                    <R t={t()} l="History block" v={`~${fmt(s().historyBlockTokens)} tok`} />
+                    {s().compressionBudget != null && (
+                        <R t={t()} l="Budget" v={`~${fmt(s().compressionBudget!)} tok (${s().compressionUsage} used)`} />
+                    )}
+                    {s().lastDreamerRunAt && (
+                        <R t={t()} l="Dreamer" v={`last ${relTime(s().lastDreamerRunAt!)}`} fg={t().textMuted} />
+                    )}
+                </box>
+            </box>
+
+            {/* Error (full width, conditional) */}
+            {s().lastTransformError && (
+                <box marginTop={1} width="100%">
+                    <text fg={t().error}>⚠ {s().lastTransformError}</text>
+                </box>
+            )}
+
+            {/* Footer */}
+            <box marginTop={1} justifyContent="flex-end" width="100%">
+                <text fg={t().textMuted}>Esc to close</text>
+            </box>
+        </box>
+    )
+}
+
+function getModelKeyFromMessages(api: TuiPluginApi, sessionId: string): string | undefined {
+    try {
+        const msgs = api.state.session.messages(sessionId)
+        // Find the last assistant message with model info
+        // AssistantMessage has providerID/modelID as top-level fields
+        // UserMessage has model: { providerID, modelID }
+        for (let i = msgs.length - 1; i >= 0; i--) {
+            const msg = msgs[i] as Record<string, unknown>
+            if (msg.role === "assistant" && msg.providerID && msg.modelID) {
+                return `${msg.providerID}/${msg.modelID}`
+            }
+            if (msg.role === "user") {
+                const model = msg.model as Record<string, unknown> | undefined
+                if (model?.providerID && model?.modelID) {
+                    return `${model.providerID}/${model.modelID}`
+                }
+            }
+        }
+    } catch {
+        // messages not available
+    }
+    return undefined
+}
+
+function showRecompDialog(api: TuiPluginApi) {
+    const sessionId = getSessionId(api)
+    if (!sessionId) {
+        api.ui.toast({ message: "No active session", variant: "warning" })
+        return
+    }
+
+    void getCompartmentCount(sessionId).then((count) => {
+        api.ui.dialog.replace(() => (
+            <api.ui.DialogConfirm
+                title="⚠️ Recomp Confirmation"
+                message={[
+                    `You have ${count} compartments.`,
+                    "",
+                    "Recomp will regenerate all compartments and facts from raw history.",
+                    "This may take a long time and consume significant tokens.",
+                    "",
+                    "Proceed?",
+                ].join("\n")}
+                onConfirm={() => {
+                    void requestRecomp(sessionId)
+                    api.ui.toast({ message: "Recomp requested — historian will start shortly", variant: "info", duration: 5000 })
+                }}
+                onCancel={() => {
+                    api.ui.toast({ message: "Recomp cancelled", variant: "info", duration: 3000 })
+                }}
+            />
+        ))
+    })
+}
+
+function showStatusDialog(api: TuiPluginApi) {
+    const sessionId = getSessionId(api)
+    if (!sessionId) {
+        api.ui.toast({ message: "No active session", variant: "warning" })
+        return
+    }
+
+    const directory = api.state.path.directory ?? ""
+    const modelKey = getModelKeyFromMessages(api, sessionId)
+    void loadStatusDetail(sessionId, directory, modelKey).then((detail) => {
+        api.ui.dialog.replace(() => <StatusDialog api={api} s={detail} />)
+    })
+}
+
+/**
+ * Register Magic Context command palette entries, preferring the v1.14.42+
+ * `keymap.registerLayer` API and falling back to the legacy
+ * `api.command.register` for older hosts.
+ *
+ * The `keymap.registerLayer` shape uses `name`/`title`/`run`/`namespace`
+ * (see `@opencode-ai/plugin/tui` types) and is what the host's own legacy
+ * command-shim translates into. Calling it directly skips the deprecation
+ * warning and works without depending on the (now-deprecated) `api.command`
+ * namespace existing at all.
+ *
+ * Version coverage:
+ *   1.14.0–1.14.41 — `api.command.register` only
+ *   1.14.42–1.14.43 — both surfaces broken (api.command removed, keymap landed
+ *                     but with bugs); plugins crash on init either way
+ *   1.14.44+        — `api.keymap.registerLayer` canonical, `api.command` shim
+ */
+function registerCommandPaletteEntries(api: TuiPluginApi): void {
+    type ApiAny = {
+        keymap?: {
+            registerLayer?: (layer: {
+                commands: Array<Record<string, unknown>>
+                bindings: Array<Record<string, unknown>>
+            }) => unknown
+        }
+        command?: {
+            register?: (cb: () => Array<Record<string, unknown>>) => unknown
+        }
+    }
+    const apiAny = api as unknown as ApiAny
+
+    if (typeof apiAny.keymap?.registerLayer === "function") {
+        // Audit Finding #2 hardening: even when registerLayer exists as a
+        // function, the underlying keymap implementation in OpenCode TUI
+        // 1.14.42-1.14.43 can throw at call time. Without the try-catch the
+        // `return` below would propagate the throw and the legacy
+        // `command.register` fallback path (~20 lines down) would be
+        // unreachable. The cost is one debug log on the rare broken-TUI
+        // build; the benefit is that older command.register-only TUIs
+        // running alongside a partially-broken keymap surface still get
+        // their command palette entries.
+        try {
+            apiAny.keymap.registerLayer({
+                commands: [
+                    {
+                        namespace: "palette",
+                        name: "magic-context.status",
+                        title: "Magic Context: Status",
+                        category: "Magic Context",
+                        run() {
+                            showStatusDialog(api)
+                        },
+                    },
+                    {
+                        namespace: "palette",
+                        name: "magic-context.recomp",
+                        title: "Magic Context: Recomp",
+                        category: "Magic Context",
+                        run() {
+                            showRecompDialog(api)
+                        },
+                    },
+                ],
+                bindings: [],
+            })
+            return
+        } catch (err) {
+            console.debug(
+                "[magic-context-tui] keymap.registerLayer threw; falling back to command.register",
+                err,
+            )
+            // Fall through to legacy registration.
+        }
+    }
+
+    if (typeof apiAny.command?.register === "function") {
+        apiAny.command.register(() => [
+            {
+                title: "Magic Context: Status",
+                value: "magic-context.status",
+                category: "Magic Context",
+                onSelect() {
+                    showStatusDialog(api)
+                },
+            },
+            {
+                title: "Magic Context: Recomp",
+                value: "magic-context.recomp",
+                category: "Magic Context",
+                onSelect() {
+                    showRecompDialog(api)
+                },
+            },
+        ])
+        return
+    }
+
+    // Neither API surface is present. The TUI host can still load — we only
+    // lose the command palette entry points. The sidebar (registered above
+    // via api.slots.register) remains visible. Status/Recomp are still
+    // reachable through the server-side `/ctx-status` and `/ctx-recomp`
+    // slash commands, which the server handler bridges to the TUI dialogs
+    // via RPC.
+}
+
+/**
+ * Show the one-shot "What's new" dialog on TUI startup if the server tells us
+ * to. The server is the source of truth: it has the version + features
+ * constants AND owns the persistence file. We just render and report back.
+ *
+ * Failure-tolerant by design — if the server isn't ready or the RPC fails,
+ * we silently skip (the next TUI launch will retry).
+ */
+/**
+ * URLs render as plain text. Modern terminals (iTerm2, kitty, WezTerm, Ghostty,
+ * recent macOS Terminal) auto-detect URLs and let users Cmd-click; older
+ * terminals require manual copy. We tried opentui's `<a href>` JSX intrinsic
+ * for application-level OSC 8 clickability, but it's a span-like element that
+ * forced text out of opentui's word-wrap mode, causing bullets to bleed past
+ * the dialog border. Pure-string children of `<text>` wrap correctly, so the
+ * AFT-style DialogAlert + plain string is the right surface here.
+ */
+async function showStartupAnnouncement(api: TuiPluginApi): Promise<void> {
+    try {
+        const ann = await getAnnouncement()
+        if (!ann.show || !ann.version || !ann.features || ann.features.length === 0) return
+
+        const title = `Magic Context v${ann.version}`
+        const lines: string[] = [
+            "What's new:",
+            "",
+            ...ann.features.map((line) => `  • ${line}`),
+        ]
+        if (ann.footer && ann.footer.trim().length > 0) {
+            // Blank-line separator keeps the persistent footer (Discord invite,
+            // etc.) visually distinct from the version-specific bullets.
+            lines.push("", ann.footer)
+        }
+        const message = lines.join("\n")
+
+        api.ui.dialog.replace(
+            () => (
+                <api.ui.DialogAlert
+                    title={title}
+                    message={message}
+                    onConfirm={() => {
+                        void markAnnounced()
+                    }}
+                />
+            ),
+            () => {
+                // User dismissed via Escape rather than confirming. Mark
+                // dismissed anyway — they saw the dialog, that's the contract.
+                void markAnnounced()
+            },
+        )
+    } catch {
+        // RPC not ready yet (port file missing or transient HTTP failure) —
+        // silently skip. The next TUI start re-checks.
+    }
+}
+
+const tui: TuiPlugin = async (api, _options, meta) => {
+    // Initialize RPC client for server communication
+    const directory = api.state.path.directory ?? ""
+    initRpcClient(directory)
+
+    // Register sidebar slot
+    api.slots.register(createSidebarContentSlot(api))
+
+    // Register TUI command palette entries (no slash field — slash commands
+    // are registered server-side so there's only one /ctx-* registration).
+    // The server detects TUI mode and sends dialog requests via RPC instead
+    // of sendIgnoredMessage.
+    //
+    // OpenCode 1.14.42 removed `api.command.register` entirely
+    // (anomalyco/opencode#26053). A later patch (1.14.44+) reinstated it as
+    // a deprecated shim that translates to `api.keymap.registerLayer`. To
+    // work across all hosts (1.14.0–1.14.41 with command-only, the broken
+    // 1.14.42–1.14.43, and 1.14.44+ where both exist), we prefer
+    // `api.keymap.registerLayer` and fall back to `api.command.register`
+    // only when keymap is missing.
+    registerCommandPaletteEntries(api)
+
+    // Poll for server→TUI messages: toasts and dialog requests.
+    // Single poller because consumeTuiMessages() is destructive (deletes consumed rows).
+    const messagePoller = setInterval(() => {
+        void consumeTuiMessages().then((messages) => {
+            for (const msg of messages) {
+                if (msg.type === "toast") {
+                    const p = msg.payload
+                    api.ui.toast({
+                        message: String(p.message ?? ""),
+                        variant: (p.variant as "info" | "warning" | "error" | "success") ?? "info",
+                        duration: typeof p.duration === "number" ? p.duration : 5000,
+                    })
+                } else if (msg.type === "action") {
+                    const action = msg.payload?.action
+                    if (action === "show-status-dialog") {
+                        showStatusDialog(api)
+                    } else if (action === "show-recomp-dialog") {
+                        showRecompDialog(api)
+                    }
+                }
+            }
+        }).catch(() => {
+            // Intentional: message polling should never crash the TUI
+        })
+    }, 500)
+
+    // Clean up on dispose
+    api.lifecycle.onDispose(() => {
+        clearInterval(messagePoller)
+        closeRpc()
+    })
+
+    const conflictResult = detectConflicts(directory)
+    if (conflictResult.hasConflict) {
+        showConflictDialog(api, directory, conflictResult.reasons, conflictResult.conflicts)
+        return
+    }
+
+    // Show one-shot release announcement after conflict gate.
+    // Fire-and-forget: if the server isn't ready or RPC fails, the next TUI
+    // launch will retry. Dialog only appears once per ANNOUNCEMENT_VERSION
+    // (persisted via mark-announced RPC writing last_announced_version).
+    void showStartupAnnouncement(api)
+
+    // Note: if TUI plugin is loaded, tui.json already has our entry.
+    // But if the user added it manually and later removes it, or if they
+    // use setup/doctor which handles tui.json, this code is already running.
+}
+
+const id = "opencode-magic-context"
+
+export default {
+    id,
+    tui,
+}