@cortexkit/opencode-magic-context 0.4.2 → 0.5.0

package/src/tui/slots/sidebar-content.tsx

@@ -0,0 +1,422 @@
+/** @jsxImportSource @opentui/solid */
+import { createEffect, createMemo, createSignal, on, onCleanup } from "solid-js"
+import type { TuiSlotPlugin, TuiPluginApi, TuiThemeCurrent } from "@opencode-ai/plugin/tui"
+import { loadSidebarSnapshot, type SidebarSnapshot } from "../data/context-db"
+
+const SINGLE_BORDER = { type: "single" } as any
+const REFRESH_DEBOUNCE_MS = 150
+
+function compactTokens(value: number): string {
+    if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
+    if (value >= 1_000) return `${(value / 1_000).toFixed(0)}K`
+    return String(value)
+}
+
+function relativeTime(ms: number): string {
+    const diff = Date.now() - ms
+    if (diff < 60_000) return "just now"
+    if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`
+    if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`
+    return `${Math.floor(diff / 86_400_000)}d ago`
+}
+
+// Token breakdown segment colors (hardcoded hex values)
+const COLORS = {
+    system: "#c084fc",    // Purple-ish
+    compartments: "#60a5fa", // Blue-ish
+    facts: "#fbbf24",     // Yellow/orange
+    memories: "#34d399",  // Green
+    conversation: "#9ca3af", // Gray (will use theme.textMuted)
+}
+
+interface TokenSegment {
+    key: string
+    tokens: number
+    color: string
+    label: string
+}
+
+// Segmented token breakdown bar with legend
+const TokenBreakdown = (props: {
+    theme: TuiThemeCurrent
+    snapshot: SidebarSnapshot
+}) => {
+    const barWidth = 36
+
+    const segments = createMemo<TokenSegment[]>(() => {
+        const s = props.snapshot
+        const total = s.inputTokens || 1
+        const result: TokenSegment[] = []
+
+        // System Prompt (purple)
+        if (s.systemPromptTokens > 0) {
+            result.push({
+                key: "sys",
+                tokens: s.systemPromptTokens,
+                color: COLORS.system,
+                label: "System",
+            })
+        }
+
+        // Compartments (blue)
+        if (s.compartmentTokens > 0) {
+            result.push({
+                key: "comp",
+                tokens: s.compartmentTokens,
+                color: COLORS.compartments,
+                label: "Compartments",
+            })
+        }
+
+        // Facts (yellow/orange)
+        if (s.factTokens > 0) {
+            result.push({
+                key: "fact",
+                tokens: s.factTokens,
+                color: COLORS.facts,
+                label: "Facts",
+            })
+        }
+
+        // Memories (green)
+        if (s.memoryTokens > 0) {
+            result.push({
+                key: "mem",
+                tokens: s.memoryTokens,
+                color: COLORS.memories,
+                label: "Memories",
+            })
+        }
+
+        // Conversation = remaining tokens (gray)
+        const used = s.systemPromptTokens + s.compartmentTokens + s.factTokens + s.memoryTokens
+        const convTokens = Math.max(0, s.inputTokens - used)
+        if (convTokens > 0) {
+            result.push({
+                key: "conv",
+                tokens: convTokens,
+                color: props.theme.textMuted,
+                label: "Conversation",
+            })
+        }
+
+        return result
+    })
+
+    const totalTokens = createMemo(() => props.snapshot.inputTokens || 1)
+
+    // Calculate proportional widths for each segment
+    const segmentWidths = createMemo(() => {
+        const total = totalTokens()
+        const segs = segments()
+        if (segs.length === 0) return []
+
+        // Calculate raw proportions
+        const proportions = segs.map((seg) => seg.tokens / total)
+
+        // Convert to character widths (minimum 1 char if tokens > 0)
+        let widths = proportions.map((p) => Math.max(1, Math.round(p * barWidth)))
+
+        // Adjust to exactly barWidth
+        const sum = widths.reduce((a, b) => a + b, 0)
+        if (sum > barWidth) {
+            // Shrink from the largest segments
+            let excess = sum - barWidth
+            while (excess > 0) {
+                const maxIdx = widths.indexOf(Math.max(...widths))
+                if (widths[maxIdx] > 1) {
+                    widths[maxIdx]--
+                    excess--
+                } else {
+                    break
+                }
+            }
+        } else if (sum < barWidth) {
+            // Expand the largest segments
+            let deficit = barWidth - sum
+            while (deficit > 0) {
+                const maxIdx = widths.indexOf(Math.max(...widths))
+                widths[maxIdx]++
+                deficit--
+            }
+        }
+
+        return widths
+    })
+
+    const barSegments = createMemo(() => {
+        const segs = segments()
+        const widths = segmentWidths()
+        return segs.map((seg, i) => ({
+            chars: "█".repeat(widths[i] || 0),
+            color: seg.color,
+        }))
+    })
+
+    return (
+        <box width="100%" flexDirection="column">
+            {/* Segmented bar */}
+            <box flexDirection="row">
+                {barSegments().map((seg, i) => (
+                    <text key={i} fg={seg.color}>{seg.chars}</text>
+                ))}
+            </box>
+
+            {/* Legend rows */}
+            <box flexDirection="column" marginTop={0}>
+                {segments().map((seg) => {
+                    const pct = ((seg.tokens / totalTokens()) * 100).toFixed(0)
+                    return (
+                        <box
+                            key={seg.key}
+                            width="100%"
+                            flexDirection="row"
+                            justifyContent="space-between"
+                        >
+                            <text fg={seg.color}>{seg.label}</text>
+                            <text fg={props.theme.textMuted}>
+                                {compactTokens(seg.tokens)} ({pct}%)
+                            </text>
+                        </box>
+                    )
+                })}
+            </box>
+        </box>
+    )
+}
+
+const StatRow = (props: {
+    theme: TuiThemeCurrent
+    label: string
+    value: string
+    accent?: boolean
+    warning?: boolean
+    dim?: boolean
+}) => {
+    const fg = createMemo(() => {
+        if (props.warning) return props.theme.warning
+        if (props.accent) return props.theme.accent
+        if (props.dim) return props.theme.textMuted
+        return props.theme.text
+    })
+
+    return (
+        <box width="100%" flexDirection="row" justifyContent="space-between">
+            <text fg={props.theme.textMuted}>{props.label}</text>
+            <text fg={fg()}>
+                <b>{props.value}</b>
+            </text>
+        </box>
+    )
+}
+
+const SectionHeader = (props: { theme: TuiThemeCurrent; title: string }) => (
+    <box width="100%" marginTop={1}>
+        <text fg={props.theme.text}>
+            <b>{props.title}</b>
+        </text>
+    </box>
+)
+
+const SidebarContent = (props: {
+    api: TuiPluginApi
+    sessionID: () => string
+    theme: TuiThemeCurrent
+}) => {
+    const [snapshot, setSnapshot] = createSignal<SidebarSnapshot | null>(null)
+    let refreshTimer: ReturnType<typeof setTimeout> | undefined
+
+    const refresh = () => {
+        const sid = props.sessionID()
+        if (!sid) return
+        const directory = props.api.state.path.directory ?? ""
+        const data = loadSidebarSnapshot(sid, directory)
+        setSnapshot(data)
+        try {
+            props.api.renderer.requestRender()
+        } catch {
+            // Ignore render errors
+        }
+    }
+
+    const scheduleRefresh = () => {
+        if (refreshTimer) clearTimeout(refreshTimer)
+        refreshTimer = setTimeout(() => {
+            refreshTimer = undefined
+            refresh()
+        }, REFRESH_DEBOUNCE_MS)
+    }
+
+    onCleanup(() => {
+        if (refreshTimer) clearTimeout(refreshTimer)
+    })
+
+    // Refresh on session change
+    createEffect(
+        on(props.sessionID, () => {
+            refresh()
+        }),
+    )
+
+    // Subscribe to events for live updates
+    createEffect(
+        on(
+            props.sessionID,
+            (sessionID) => {
+                const unsubs = [
+                    props.api.event.on("message.updated", (event) => {
+                        if (event.properties.info.sessionID !== sessionID) return
+                        scheduleRefresh()
+                    }),
+                    props.api.event.on("session.updated", (event) => {
+                        if (event.properties.info.id !== sessionID) return
+                        scheduleRefresh()
+                    }),
+                    props.api.event.on("message.removed", (event) => {
+                        if (event.properties.sessionID !== sessionID) return
+                        scheduleRefresh()
+                    }),
+                ]
+
+                onCleanup(() => {
+                    for (const unsub of unsubs) unsub()
+                })
+            },
+            { defer: false },
+        ),
+    )
+
+    const s = createMemo(() => snapshot())
+
+    return (
+        <box
+            width="100%"
+            flexDirection="column"
+            border={SINGLE_BORDER}
+            borderColor={props.theme.borderActive}
+            paddingTop={1}
+            paddingBottom={1}
+            paddingLeft={1}
+            paddingRight={1}
+        >
+            {/* Header */}
+            <box flexDirection="row" justifyContent="space-between" alignItems="center">
+                <box paddingLeft={1} paddingRight={1} backgroundColor={props.theme.accent}>
+                    <text fg={props.theme.background}>
+                        <b>Magic CTX</b>
+                    </text>
+                </box>
+                <text fg={props.theme.success}>active</text>
+            </box>
+
+            {/* Token breakdown bar */}
+            {s() && s()!.inputTokens > 0 && (
+                <box marginTop={1}>
+                    <TokenBreakdown theme={props.theme} snapshot={s()!} />
+                </box>
+            )}
+
+            {/* Historian section */}
+            <box width="100%" marginTop={1} flexDirection="row" justifyContent="space-between">
+                <text fg={props.theme.text}>
+                    <b>Historian</b>
+                </text>
+                {s()?.historianRunning ? (
+                    <text fg={props.theme.warning}>compacting ⟳</text>
+                ) : (
+                    <text fg={props.theme.textMuted}>idle</text>
+                )}
+            </box>
+            <StatRow
+                theme={props.theme}
+                label="Compartments"
+                value={String(s()?.compartmentCount ?? 0)}
+            />
+            <StatRow
+                theme={props.theme}
+                label="Facts"
+                value={String(s()?.factCount ?? 0)}
+            />
+
+            {/* Memory section */}
+            <SectionHeader theme={props.theme} title="Memory" />
+            <StatRow
+                theme={props.theme}
+                label="Memories"
+                value={String(s()?.memoryCount ?? 0)}
+                accent
+            />
+            {(s()?.memoryBlockCount ?? 0) > 0 && (
+                <StatRow
+                    theme={props.theme}
+                    label="Injected"
+                    value={String(s()!.memoryBlockCount)}
+                    dim
+                />
+            )}
+
+            {/* Queue & Status */}
+            {((s()?.pendingOpsCount ?? 0) > 0 ||
+                (s()?.sessionNoteCount ?? 0) > 0 ||
+                (s()?.readySmartNoteCount ?? 0) > 0) && (
+                <>
+                    <SectionHeader theme={props.theme} title="Status" />
+                    {(s()?.pendingOpsCount ?? 0) > 0 && (
+                        <StatRow
+                            theme={props.theme}
+                            label="Queue"
+                            value={`${s()!.pendingOpsCount} pending`}
+                            warning
+                        />
+                    )}
+                    {(s()?.sessionNoteCount ?? 0) > 0 && (
+                        <StatRow
+                            theme={props.theme}
+                            label="Notes"
+                            value={String(s()!.sessionNoteCount)}
+                        />
+                    )}
+                    {(s()?.readySmartNoteCount ?? 0) > 0 && (
+                        <StatRow
+                            theme={props.theme}
+                            label="Smart Notes"
+                            value={`${s()!.readySmartNoteCount} ready`}
+                            accent
+                        />
+                    )}
+                </>
+            )}
+
+            {/* Dreamer */}
+            {s()?.lastDreamerRunAt && (
+                <>
+                    <SectionHeader theme={props.theme} title="Dreamer" />
+                    <StatRow
+                        theme={props.theme}
+                        label="Last run"
+                        value={relativeTime(s()!.lastDreamerRunAt!)}
+                        dim
+                    />
+                </>
+            )}
+        </box>
+    )
+}
+
+export function createSidebarContentSlot(api: TuiPluginApi): TuiSlotPlugin {
+    return {
+        order: 150,
+        slots: {
+            sidebar_content: (ctx, value) => {
+                const theme = createMemo(() => ctx.theme.current)
+                return (
+                    <SidebarContent
+                        api={api}
+                        sessionID={() => value.session_id}
+                        theme={theme()}
+                    />
+                )
+            },
+        },
+    }
+}

package/src/tui/types/opencode-plugin-tui.d.ts

@@ -0,0 +1,232 @@
+// Type declarations for @opencode-ai/plugin/tui
+// These types are not yet exported by the installed @opencode-ai/plugin package
+
+declare module "@opencode-ai/plugin/tui" {
+    import type {
+        createOpencodeClient as createOpencodeClientV2,
+        Event as TuiEvent,
+        Message,
+        Part,
+        Provider,
+        Config as SdkConfig,
+    } from "@opencode-ai/sdk/v2";
+
+    import type { CliRenderer, RGBA } from "@opentui/core";
+    import type { JSX, SolidPlugin } from "@opentui/solid";
+
+    type PluginOptions = Record<string, unknown>;
+
+    export type { CliRenderer };
+
+    export type TuiThemeCurrent = {
+        readonly primary: RGBA;
+        readonly secondary: RGBA;
+        readonly accent: RGBA;
+        readonly error: RGBA;
+        readonly warning: RGBA;
+        readonly success: RGBA;
+        readonly info: RGBA;
+        readonly text: RGBA;
+        readonly textMuted: RGBA;
+        readonly background: RGBA;
+        readonly backgroundPanel: RGBA;
+        readonly backgroundElement: RGBA;
+        readonly backgroundMenu: RGBA;
+        readonly border: RGBA;
+        readonly borderActive: RGBA;
+        readonly borderSubtle: RGBA;
+        [key: string]: unknown;
+    };
+
+    export type TuiTheme = {
+        readonly current: TuiThemeCurrent;
+        has: (name: string) => boolean;
+        set: (name: string) => boolean;
+        mode: () => "dark" | "light";
+        readonly ready: boolean;
+    };
+
+    export type TuiSlotMap = {
+        app: Record<string, never>;
+        home_logo: Record<string, never>;
+        home_bottom: Record<string, never>;
+        sidebar_title: {
+            session_id: string;
+            title: string;
+            share_url?: string;
+        };
+        sidebar_content: {
+            session_id: string;
+        };
+        sidebar_footer: {
+            session_id: string;
+        };
+    };
+
+    export type TuiSlotContext = {
+        theme: TuiTheme;
+    };
+
+    export type TuiSlotPlugin = Omit<SolidPlugin<TuiSlotMap, TuiSlotContext>, "id"> & {
+        id?: never;
+    };
+
+    export type TuiToast = {
+        variant?: "info" | "success" | "warning" | "error";
+        title?: string;
+        message: string;
+        duration?: number;
+    };
+
+    export type TuiDialogStack = {
+        replace: (render: () => JSX.Element, onClose?: () => void) => void;
+        clear: () => void;
+        setSize: (size: "medium" | "large" | "xlarge") => void;
+        readonly size: "medium" | "large" | "xlarge";
+        readonly depth: number;
+        readonly open: boolean;
+    };
+
+    export type TuiDialogAlertProps = {
+        title: string;
+        message: string;
+        onConfirm?: () => void;
+    };
+
+    export type TuiDialogConfirmProps = {
+        title: string;
+        message: string;
+        onConfirm?: () => void;
+        onCancel?: () => void;
+    };
+
+    export type TuiDialogPromptProps = {
+        title: string;
+        description?: () => JSX.Element;
+        placeholder?: string;
+        value?: string;
+        busy?: boolean;
+        busyText?: string;
+        onConfirm?: (value: string) => void;
+        onCancel?: () => void;
+    };
+
+    export type TuiDialogSelectOption<Value = unknown> = {
+        title: string;
+        value: Value;
+        description?: string;
+        footer?: JSX.Element | string;
+        category?: string;
+        disabled?: boolean;
+        onSelect?: () => void;
+    };
+
+    export type TuiDialogSelectProps<Value = unknown> = {
+        title: string;
+        placeholder?: string;
+        options: TuiDialogSelectOption<Value>[];
+        flat?: boolean;
+        onMove?: (option: TuiDialogSelectOption<Value>) => void;
+        onFilter?: (query: string) => void;
+        onSelect?: (option: TuiDialogSelectOption<Value>) => void;
+        skipFilter?: boolean;
+        current?: Value;
+    };
+
+    export type TuiState = {
+        readonly ready: boolean;
+        readonly config: SdkConfig;
+        readonly provider: ReadonlyArray<Provider>;
+        readonly path: {
+            state: string;
+            config: string;
+            worktree: string;
+            directory: string;
+        };
+        session: {
+            count: () => number;
+            messages: (sessionID: string) => ReadonlyArray<Message>;
+        };
+        part: (messageID: string) => ReadonlyArray<Part>;
+    };
+
+    export type TuiEventBus = {
+        on: <Type extends TuiEvent["type"]>(
+            type: Type,
+            handler: (event: Extract<TuiEvent, { type: Type }>) => void,
+        ) => () => void;
+    };
+
+    export type TuiLifecycle = {
+        readonly signal: AbortSignal;
+        onDispose: (fn: () => void | Promise<void>) => () => void;
+    };
+
+    export type TuiPluginApi = {
+        app: { readonly version: string };
+        command: {
+            register: (
+                cb: () => Array<{
+                    title: string;
+                    value: string;
+                    description?: string;
+                    category?: string;
+                    keybind?: string;
+                    suggested?: boolean;
+                    hidden?: boolean;
+                    enabled?: boolean;
+                    slash?: {
+                        name: string;
+                        aliases?: string[];
+                    };
+                    onSelect?: () => void;
+                }>,
+            ) => () => void;
+            trigger: (value: string) => void;
+        };
+        route: {
+            register: (
+                routes: Array<{
+                    name: string;
+                    render: (input: { params?: Record<string, unknown> }) => JSX.Element;
+                }>,
+            ) => () => void;
+            navigate: (name: string, params?: Record<string, unknown>) => void;
+            readonly current:
+                | { name: "home" }
+                | { name: "session"; params: { sessionID: string; initialPrompt?: unknown } }
+                | { name: string; params?: Record<string, unknown> };
+        };
+        ui: {
+            DialogAlert: (props: TuiDialogAlertProps) => JSX.Element;
+            DialogConfirm: (props: TuiDialogConfirmProps) => JSX.Element;
+            DialogPrompt: (props: TuiDialogPromptProps) => JSX.Element;
+            DialogSelect: <Value = unknown>(props: TuiDialogSelectProps<Value>) => JSX.Element;
+            toast: (input: TuiToast) => void;
+            dialog: TuiDialogStack;
+        };
+        state: TuiState;
+        theme: TuiTheme;
+        client: ReturnType<typeof createOpencodeClientV2>;
+        event: TuiEventBus;
+        renderer: CliRenderer;
+        slots: {
+            register: (plugin: TuiSlotPlugin) => string;
+        };
+        lifecycle: TuiLifecycle;
+    };
+
+    export type TuiPluginMeta = {
+        state: "first" | "updated" | "same";
+        id: string;
+        source: "file" | "npm" | "internal";
+        spec: string;
+        target: string;
+    };
+
+    export type TuiPlugin = (
+        api: TuiPluginApi,
+        options: PluginOptions | undefined,
+        meta: TuiPluginMeta,
+    ) => Promise<void>;
+}