@serkanalgur/opencode-slim 1.2.0 → 1.4.0

package/README.md

@@ -1,15 +1,22 @@
 # opencode-slim
 
+[![npm version](https://img.shields.io/npm/v/@serkanalgur/opencode-slim.svg)](https://www.npmjs.com/package/@serkanalgur/opencode-slim)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
 Smart context management plugin for OpenCode. Optimizes token usage through semantic compression, cost-aware pruning, and adaptive thresholds.
 
 ## Features
 
+- **TUI Panel** - Rich context usage visualization with status indicators
+- **Enhanced Compress** - Auto/range/topic modes for flexible compression
 - **Semantic Compression** - Groups related tool calls and compresses them intelligently
 - **Cost-Aware Pruning** - Considers token pricing when deciding what to compress
 - **Adaptive Thresholds** - Learns from compression history to optimize timing
 - **Session Persistence** - Saves state across restarts
 - **Deduplication** - Removes repeated tool calls automatically
 - **Error Purging** - Cleans up failed tool call outputs after configurable turns
+- **Topic Extraction** - Identifies and tracks conversation topics
+- **Smart Recommendations** - Provides actionable suggestions for context optimization
 
 ## Installation
 
@@ -17,6 +24,51 @@ Smart context management plugin for OpenCode. Optimizes token usage through sema
 opencode plugin @serkanalgur/opencode-slim@latest --global
 ```
 
+This installs the plugin globally. The TUI features (panel, slash commands) are automatically loaded when OpenCode starts.
+
+### Manual Installation
+
+If the CLI command doesn't work, add to your `~/.config/opencode/opencode.json`:
+
+```json
+{
+  "plugins": ["@serkanalgur/opencode-slim"]
+}
+```
+
+## Usage
+
+### Slash Commands
+
+After installation, these slash commands are available in the TUI:
+
+- `/panel` — Opens the rich TUI panel with context usage, stats, and help
+- `/compress` — Shows instructions for using the compress tool
+
+### TUI Panel
+
+The panel provides a real-time overview of your context usage, including:
+- Token usage vs model limit with visual progress bar
+- Message breakdown by role (user/assistant/tools)
+- Compression history and savings
+- Cost estimation based on your model
+- Smart recommendations for optimization
+
+### Compress Tool
+
+The enhanced compress tool supports multiple modes:
+
+```typescript
+// Auto mode (default) - intelligently selects what to compress
+compress({ focus: "old exploration" })
+
+// Range mode - compress specific message range
+compress({ focus: "completed tasks", mode: "range", start: 0, end: 50 })
+
+// Topic mode - compress messages matching a topic
+compress({ focus: "database work", mode: "topic", topic: "database" })
+```
+
 ## Configuration
 
 Create `~/.config/opencode/slim.jsonc`:
@@ -62,6 +114,16 @@ Create `~/.config/opencode/slim.jsonc`:
 
 ## How It Works
 
+### TUI Panel
+
+The panel provides a real-time overview of your context usage, including:
+- Token usage vs model limit with visual progress bar
+- Message breakdown by role (user/assistant/tools)
+- Compression history and savings
+- Cost estimation based on your model
+- Topic distribution across the conversation
+- Smart recommendations for optimization
+
 ### Semantic Compression
 
 Unlike simple text truncation, slim analyzes the semantic content of messages and groups related tool calls together. This preserves context while removing redundancy.
@@ -80,19 +142,26 @@ State is saved to disk, so compression history and learning persist across resta
 
 ## Commands
 
-- `/slim` - Show current context stats and compression history
-- `/slim compress` - Manually trigger compression
-- `/slim reset` - Reset adaptive learning
+| Command | Description |
+|---------|-------------|
+| `/panel` | Open the Slim TUI panel with context usage, stats, and help |
+| `/compress` | Show instructions for using the compress tool |
+
+Note: Compression is performed by the AI assistant using the `compress` tool. The slash command provides guidance on usage.
 
 ## Comparison with DCP
 
 | Feature | slim | DCP |
 |---------|------|-----|
+| TUI Panel | ✅ | ✅ |
+| Slash Commands | ✅ `/panel` `/compress` | ✅ `/dcp` `/dcp-compress` |
+| Manual Compress | ✅ | ✅ |
 | Semantic grouping | ✅ | ❌ |
 | Cost awareness | ✅ | ❌ |
 | Adaptive thresholds | ✅ | ❌ |
 | Session persistence | ✅ | ❌ |
-| File count | ~8 | ~150 |
+| Topic extraction | ✅ | ❌ |
+| File count | ~10 | ~150 |
 | License | MIT | AGPL-3.0 |
 | Config complexity | Low | High |
 

package/dist/lib/tui/data.d.ts

@@ -0,0 +1,4 @@
+import type { TuiPluginApi } from "@opencode-ai/plugin/tui";
+import type { SlimConfig } from "../types";
+export declare function loadConfig(_api: TuiPluginApi): SlimConfig;
+//# sourceMappingURL=data.d.ts.map

package/dist/lib/tui/data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../lib/tui/data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AA2D1C,wBAAgB,UAAU,CAAC,IAAI,EAAE,YAAY,GAAG,UAAU,CA6BzD"}

package/dist/lib/tui/dialogs.d.ts

@@ -0,0 +1,8 @@
+/** @jsxImportSource @opentui/solid */
+import type { TuiPluginApi } from "@opencode-ai/plugin/tui";
+import type { SlimConfig } from "../types";
+export declare function PanelDialog(props: {
+    api: TuiPluginApi;
+    config: SlimConfig;
+}): any;
+//# sourceMappingURL=dialogs.d.ts.map

package/dist/lib/tui/dialogs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogs.d.ts","sourceRoot":"","sources":["../../../lib/tui/dialogs.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AAGtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AA0I1C,wBAAgB,WAAW,CAAC,KAAK,EAAE;IAAE,GAAG,EAAE,YAAY,CAAC;IAAC,MAAM,EAAE,UAAU,CAAA;CAAE,OA2E3E"}

package/dist/lib/tui/modals.d.ts

@@ -0,0 +1,5 @@
+/** @jsxImportSource @opentui/solid */
+import type { TuiPluginApi } from "@opencode-ai/plugin/tui";
+import type { SlimConfig } from "../types";
+export declare function openPanelModal(api: TuiPluginApi, config: SlimConfig): void;
+//# sourceMappingURL=modals.d.ts.map

package/dist/lib/tui/modals.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modals.d.ts","sourceRoot":"","sources":["../../../lib/tui/modals.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AAEtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG1C,wBAAgB,cAAc,CAAC,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,GAAG,IAAI,CAK1E"}

package/dist/tui.d.ts

@@ -0,0 +1,7 @@
+/** @jsxImportSource @opentui/solid */
+declare const _default: {
+    id: string;
+    tui: import("@opencode-ai/plugin/tui").TuiPlugin;
+};
+export default _default;
+//# sourceMappingURL=tui.d.ts.map

package/dist/tui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tui.d.ts","sourceRoot":"","sources":["../tui.tsx"],"names":[],"mappings":"AAAA,sCAAsC;;;;;AAsFtC,wBAG2B"}

package/lib/tui/data.ts

@@ -0,0 +1,90 @@
+import type { TuiPluginApi } from "@opencode-ai/plugin/tui"
+import type { SlimConfig } from "../types"
+import { readFileSync, existsSync } from "fs"
+import { join } from "path"
+import { homedir } from "os"
+import { parse } from "jsonc-parser/lib/esm/main.js"
+
+const DEFAULT_CONFIG: SlimConfig = {
+    enabled: true,
+    debug: false,
+    compress: {
+        enabled: true,
+        permission: "allow",
+        maxContextLimit: "80%",
+        minContextLimit: "40%",
+        nudgeFrequency: 5,
+        protectUserMessages: false,
+        protectedTools: ["task", "skill", "todowrite", "todoread"],
+    },
+    strategies: {
+        deduplication: {
+            enabled: true,
+            protectedTools: [],
+        },
+        purgeErrors: {
+            enabled: true,
+            turns: 4,
+            protectedTools: [],
+        },
+    },
+    adaptive: {
+        enabled: true,
+        learningRate: 0.1,
+        minCompressionRatio: 0.3,
+    },
+    costAware: {
+        enabled: true,
+        cacheBoostFactor: 0.5,
+    },
+    persistence: {
+        enabled: true,
+        directory: join(homedir(), ".config", "opencode", "slim"),
+    },
+}
+
+function deepMerge(base: SlimConfig, override: Partial<SlimConfig>): SlimConfig {
+    return {
+        ...base,
+        ...override,
+        compress: { ...base.compress, ...override.compress },
+        strategies: {
+            deduplication: { ...base.strategies.deduplication, ...override.strategies?.deduplication },
+            purgeErrors: { ...base.strategies.purgeErrors, ...override.strategies?.purgeErrors },
+        },
+        adaptive: { ...base.adaptive, ...override.adaptive },
+        costAware: { ...base.costAware, ...override.costAware },
+        persistence: { ...base.persistence, ...override.persistence },
+    }
+}
+
+export function loadConfig(_api: TuiPluginApi): SlimConfig {
+    let config = { ...DEFAULT_CONFIG }
+
+    const globalDir = process.env.XDG_CONFIG_HOME
+        ? join(process.env.XDG_CONFIG_HOME, "opencode")
+        : join(homedir(), ".config", "opencode")
+
+    const globalPath = join(globalDir, "slim.jsonc")
+    const globalPathJson = join(globalDir, "slim.json")
+
+    const configPath = existsSync(globalPath)
+        ? globalPath
+        : existsSync(globalPathJson)
+          ? globalPathJson
+          : null
+
+    if (configPath) {
+        try {
+            const content = readFileSync(configPath, "utf-8")
+            const parsed = parse(content)
+            if (parsed) {
+                config = deepMerge(config, parsed)
+            }
+        } catch {
+            // Use defaults
+        }
+    }
+
+    return config
+}

package/lib/tui/dialogs.tsx

@@ -0,0 +1,467 @@
+/** @jsxImportSource @opentui/solid */
+
+import { createSignal, onMount, For, Show } from "solid-js"
+import type { TuiPluginApi } from "@opencode-ai/plugin/tui"
+import type { SlimConfig } from "../types"
+import type { Message, Part, AssistantMessage } from "@opencode-ai/sdk/v2"
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+interface PanelData {
+    currentTokens: number
+    maxTokens: number
+    usagePercent: number
+    status: "healthy" | "warning" | "critical"
+    userMessages: number
+    assistantMessages: number
+    toolCalls: number
+    toolResults: number
+    compressionCount: number
+    averageRatio: number
+    totalTokensSaved: number
+    estimatedCost: number
+    costSaved: number
+    model: string
+    recommendations: string[]
+}
+
+// ─── UI Components ──────────────────────────────────────────────────────────
+
+function SlimFrame(props: {
+    api: TuiPluginApi
+    title: string
+    eyebrow: string
+    children: any
+    onBack?: () => void
+}) {
+    const theme = props.api.theme.current
+
+    return (
+        <box paddingLeft={3} paddingRight={3} paddingBottom={1} gap={1}>
+            <box flexDirection="row" justifyContent="space-between">
+                <box flexDirection="column">
+                    <text fg={theme.primary}>
+                        <b>{props.eyebrow}</b>
+                    </text>
+                    <text fg={theme.text}>
+                        <b>{props.title}</b>
+                    </text>
+                </box>
+                <text fg={theme.textMuted} onMouseUp={() => props.api.ui.dialog.clear()}>
+                    esc
+                </text>
+            </box>
+            <box height={1} border={["bottom"]} borderColor={theme.borderSubtle} />
+            {props.children}
+            <box flexDirection="row" justifyContent="flex-end" paddingTop={1}>
+                <box
+                    paddingLeft={2}
+                    paddingRight={2}
+                    backgroundColor={theme.primary}
+                    onMouseUp={() => props.api.ui.dialog.clear()}
+                >
+                    <text fg={theme.selectedListItemText}>close</text>
+                </box>
+            </box>
+        </box>
+    )
+}
+
+function Card(props: { theme: any; title: string; children: any }) {
+    const accent = props.theme.primary
+    return (
+        <box
+            flexDirection="column"
+            paddingLeft={2}
+            paddingRight={2}
+            paddingTop={1}
+            paddingBottom={1}
+            backgroundColor={props.theme.backgroundElement}
+            border={["left"]}
+            borderColor={accent}
+            gap={1}
+        >
+            <text fg={accent}>
+                <b>{props.title}</b>
+            </text>
+            {props.children}
+        </box>
+    )
+}
+
+function Metric(props: { theme: any; label: string; value: string; hint?: string }) {
+    return (
+        <box flexDirection="row" gap={2}>
+            <box width={24}>
+                <text fg={props.theme.textMuted}>{props.label}</text>
+            </box>
+            <box flexDirection="row" gap={1} flexGrow={1}>
+                <text fg={props.theme.text}>
+                    <b>{props.value}</b>
+                </text>
+                {props.hint ? <text fg={props.theme.textMuted}>{props.hint}</text> : null}
+            </box>
+        </box>
+    )
+}
+
+function Progress(props: {
+    theme: any
+    label: string
+    value: number
+    total: number
+    color: "primary" | "accent" | "success" | "warning" | "error"
+    detail: string
+}) {
+    const width = 32
+    const filled =
+        props.total > 0 ? Math.max(0, Math.round((props.value / props.total) * width)) : 0
+    const empty = Math.max(0, width - filled)
+    return (
+        <box flexDirection="column" gap={0}>
+            <box flexDirection="row" gap={2}>
+                <box width={20}>
+                    <text fg={props.theme.text}>{props.label}</text>
+                </box>
+                <box flexDirection="row" gap={1} flexGrow={1}>
+                    <text fg={props.theme.text}>
+                        <b>{props.total > 0 ? `${Math.round((props.value / props.total) * 100)}%` : "0%"}</b>
+                    </text>
+                    <text fg={props.theme.textMuted}>{props.detail}</text>
+                </box>
+            </box>
+            <box flexDirection="row">
+                <text fg={props.theme[props.color]}>{"█".repeat(filled)}</text>
+                <text fg={props.theme.borderSubtle}>{"░".repeat(empty)}</text>
+            </box>
+        </box>
+    )
+}
+
+// ─── Panel Dialog ───────────────────────────────────────────────────────────
+
+export function PanelDialog(props: { api: TuiPluginApi; config: SlimConfig }) {
+    const theme = props.api.theme.current
+    const [data, setData] = createSignal<PanelData | null>(null)
+    const [loading, setLoading] = createSignal(true)
+    const [activeTab, setActiveTab] = createSignal<"context" | "stats" | "help">("context")
+
+    onMount(async () => {
+        try {
+            const panelData = await fetchPanelData(props.api, props.config)
+            setData(panelData)
+        } catch (error) {
+            console.error("Failed to load panel data:", error)
+        } finally {
+            setLoading(false)
+        }
+    })
+
+    const formatTokens = (tokens: number): string => {
+        if (tokens >= 1000000) return `${(tokens / 1000000).toFixed(1)}M`
+        if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}K`
+        return String(tokens)
+    }
+
+    return (
+        <SlimFrame api={props.api} title="Context Panel" eyebrow="SLIM">
+            {/* Tab Navigation */}
+            <box flexDirection="row" gap={1} marginBottom={1}>
+                <TabButton
+                    theme={theme}
+                    label="Context"
+                    active={activeTab() === "context"}
+                    onClick={() => setActiveTab("context")}
+                />
+                <TabButton
+                    theme={theme}
+                    label="Stats"
+                    active={activeTab() === "stats"}
+                    onClick={() => setActiveTab("stats")}
+                />
+                <TabButton
+                    theme={theme}
+                    label="Help"
+                    active={activeTab() === "help"}
+                    onClick={() => setActiveTab("help")}
+                />
+            </box>
+
+            {/* Content */}
+            <Show
+                when={!loading()}
+                fallback={
+                    <box padding={2}>
+                        <text fg={theme.textMuted}>Loading...</text>
+                    </box>
+                }
+            >
+                <Show
+                    when={data()}
+                    fallback={
+                        <box padding={2}>
+                            <text fg={theme.error}>Failed to load panel data</text>
+                        </box>
+                    }
+                >
+                    {activeTab() === "context" && (
+                        <ContextTab data={data()!} theme={theme} formatTokens={formatTokens} />
+                    )}
+                    {activeTab() === "stats" && (
+                        <StatsTab data={data()!} theme={theme} formatTokens={formatTokens} />
+                    )}
+                    {activeTab() === "help" && <HelpTab theme={theme} />}
+                </Show>
+            </Show>
+        </SlimFrame>
+    )
+}
+
+// ─── Tab Button ─────────────────────────────────────────────────────────────
+
+function TabButton(props: {
+    theme: any
+    label: string
+    active: boolean
+    onClick: () => void
+}) {
+    return (
+        <box
+            paddingLeft={1}
+            paddingRight={1}
+            backgroundColor={props.active ? props.theme.primary : props.theme.backgroundElement}
+            onMouseUp={props.onClick}
+        >
+            <text fg={props.active ? props.theme.background : props.theme.text}>
+                {props.label}
+            </text>
+        </box>
+    )
+}
+
+// ─── Context Tab ────────────────────────────────────────────────────────────
+
+function ContextTab(props: { data: PanelData; theme: any; formatTokens: (n: number) => string }) {
+    const statusIcon = () =>
+        props.data.status === "healthy" ? "🟢" : props.data.status === "warning" ? "🟡" : "🔴"
+
+    const statusColor = () =>
+        props.data.status === "healthy"
+            ? props.theme.success
+            : props.data.status === "warning"
+              ? props.theme.warning
+              : props.theme.error
+
+    return (
+        <box flexDirection="column" gap={1}>
+            <Card theme={props.theme} title="Status">
+                <Metric
+                    theme={props.theme}
+                    label="Status"
+                    value={`${statusIcon()} ${props.data.status.toUpperCase()}`}
+                />
+                <Progress
+                    theme={props.theme}
+                    label="Context"
+                    value={props.data.currentTokens}
+                    total={props.data.maxTokens}
+                    color={props.data.status === "critical" ? "error" : props.data.status === "warning" ? "warning" : "primary"}
+                    detail={`${props.formatTokens(props.data.currentTokens)} / ${props.formatTokens(props.data.maxTokens)} tokens`}
+                />
+            </Card>
+
+            <Card theme={props.theme} title="Messages">
+                <Metric theme={props.theme} label="User" value={`${props.data.userMessages}`} />
+                <Metric theme={props.theme} label="Assistant" value={`${props.data.assistantMessages}`} />
+                <Metric theme={props.theme} label="Tool calls" value={`${props.data.toolCalls}`} />
+                <Metric theme={props.theme} label="Results" value={`${props.data.toolResults}`} />
+            </Card>
+
+            <Card theme={props.theme} title="Recommendations">
+                <box flexDirection="column">
+                    <For each={props.data.recommendations}>
+                        {(rec) => <text>• {rec}</text>}
+                    </For>
+                </box>
+            </Card>
+        </box>
+    )
+}
+
+// ─── Stats Tab ──────────────────────────────────────────────────────────────
+
+function StatsTab(props: { data: PanelData; theme: any; formatTokens: (n: number) => string }) {
+    return (
+        <box flexDirection="column" gap={1}>
+            <Card theme={props.theme} title="Compression">
+                <Metric theme={props.theme} label="Count" value={`${props.data.compressionCount}`} />
+                <Metric
+                    theme={props.theme}
+                    label="Avg ratio"
+                    value={`${(props.data.averageRatio * 100).toFixed(1)}%`}
+                />
+                <Metric
+                    theme={props.theme}
+                    label="Tokens saved"
+                    value={props.formatTokens(props.data.totalTokensSaved)}
+                />
+            </Card>
+
+            <Card theme={props.theme} title="Cost">
+                <Metric
+                    theme={props.theme}
+                    label="Current"
+                    value={`$${props.data.estimatedCost.toFixed(4)}`}
+                />
+                <Metric
+                    theme={props.theme}
+                    label="Saved"
+                    value={`$${props.data.costSaved.toFixed(4)}`}
+                />
+                <Metric theme={props.theme} label="Model" value={props.data.model} />
+            </Card>
+        </box>
+    )
+}
+
+// ─── Help Tab ───────────────────────────────────────────────────────────────
+
+function HelpTab(props: { theme: any }) {
+    return (
+        <box flexDirection="column" gap={1}>
+            <Card theme={props.theme} title="Commands">
+                <text>/panel - Open this panel</text>
+                <text>/compress [focus] - Run compression</text>
+            </Card>
+
+            <Card theme={props.theme} title="Tool Usage">
+                <text>compress({"{ focus: \"old exploration\" }"})</text>
+                <text>compress({"{ focus: \"tasks\", mode: \"range\", start: 0, end: 50 }"})</text>
+                <text>compress({"{ focus: \"database\", mode: \"topic\", topic: \"db\" }"})</text>
+            </Card>
+
+            <Card theme={props.theme} title="Configuration">
+                <text>~/.config/opencode/slim.jsonc</text>
+            </Card>
+        </box>
+    )
+}
+
+// ─── Data Fetching ──────────────────────────────────────────────────────────
+
+async function fetchPanelData(
+    api: TuiPluginApi,
+    config: SlimConfig,
+): Promise<PanelData> {
+    const currentRoute = api.route.current
+
+    let sessionId: string | undefined
+    if (currentRoute.name === "session") {
+        sessionId = currentRoute.params?.sessionID as string | undefined
+    }
+
+    if (!sessionId) {
+        return {
+            currentTokens: 0,
+            maxTokens: resolveTokenLimit(config.compress.maxContextLimit, 200000),
+            usagePercent: 0,
+            status: "healthy",
+            userMessages: 0,
+            assistantMessages: 0,
+            toolCalls: 0,
+            toolResults: 0,
+            compressionCount: 0,
+            averageRatio: 0,
+            totalTokensSaved: 0,
+            estimatedCost: 0,
+            costSaved: 0,
+            model: "unknown",
+            recommendations: ["No active session. Start a conversation to see context usage."],
+        }
+    }
+
+    const messages = api.state.session.messages(sessionId)
+
+    // Calculate token usage from messages
+    let currentTokens = 0
+    let userMessages = 0
+    let assistantMessages = 0
+    let toolCalls = 0
+    let toolResults = 0
+    let model = "unknown"
+
+    for (const msg of messages) {
+        // Get role from message
+        const role = msg.role
+        if (role === "user") {
+            userMessages++
+        } else if (role === "assistant") {
+            assistantMessages++
+            // Get model from assistant message
+            const assistantMsg = msg as AssistantMessage
+            if (assistantMsg.providerID && assistantMsg.modelID) {
+                model = `${assistantMsg.providerID}/${assistantMsg.modelID}`
+            }
+        }
+
+        // Get parts for this message
+        const parts = api.state.part(msg.id)
+
+        for (const part of parts) {
+            if (part.type === "text") {
+                const textPart = part as any
+                currentTokens += Math.ceil((textPart.text?.length || 0) / 4)
+            } else if (part.type === "tool") {
+                const toolPart = part as any
+                const status = toolPart.state?.type
+                if (status === "completed") {
+                    toolResults++
+                } else if (status === "pending" || status === "running") {
+                    toolCalls++
+                }
+            }
+        }
+    }
+
+    const maxTokens = resolveTokenLimit(config.compress.maxContextLimit, 200000)
+    const usagePercent = (currentTokens / maxTokens) * 100
+
+    let statusLevel: "healthy" | "warning" | "critical" = "healthy"
+    if (usagePercent > 90) statusLevel = "critical"
+    else if (usagePercent > 70) statusLevel = "warning"
+
+    const recommendations: string[] = []
+    if (usagePercent > 80) {
+        recommendations.push("Context usage is high. Consider compressing older messages.")
+    }
+    if (usagePercent > 90) {
+        recommendations.push("Context nearly full! Run compress immediately.")
+    }
+    if (recommendations.length === 0) {
+        recommendations.push("Context is healthy. No action needed.")
+    }
+
+    return {
+        currentTokens,
+        maxTokens,
+        usagePercent,
+        status: statusLevel,
+        userMessages,
+        assistantMessages,
+        toolCalls,
+        toolResults,
+        compressionCount: 0,
+        averageRatio: 0,
+        totalTokensSaved: 0,
+        estimatedCost: (currentTokens / 1000) * 0.003,
+        costSaved: 0,
+        model,
+        recommendations,
+    }
+}
+
+function resolveTokenLimit(value: number | string, contextLimit: number): number {
+    if (typeof value === "number") return value
+    const percent = parseFloat(value.replace("%", "")) / 100
+    return Math.floor(contextLimit * percent)
+}

package/lib/tui/modals.tsx

@@ -0,0 +1,12 @@
+/** @jsxImportSource @opentui/solid */
+
+import type { TuiPluginApi } from "@opencode-ai/plugin/tui"
+import type { SlimConfig } from "../types"
+import { PanelDialog } from "./dialogs"
+
+export function openPanelModal(api: TuiPluginApi, config: SlimConfig): void {
+    api.ui.dialog.setSize("xlarge")
+    api.ui.dialog.replace(() => (
+        <PanelDialog api={api} config={config} />
+    ))
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@serkanalgur/opencode-slim",
-    "version": "1.2.0",
+    "version": "1.4.0",
     "description": "Smart context management plugin for OpenCode - semantic compression, cost-aware pruning, adaptive thresholds",
     "keywords": [
         "opencode",
@@ -26,6 +26,10 @@
         ".": {
             "types": "./dist/index.d.ts",
             "import": "./dist/index.js"
+        },
+        "./tui": {
+            "types": "./dist/tui.d.ts",
+            "import": "./tui.tsx"
         }
     },
     "main": "./dist/index.js",
@@ -36,6 +40,8 @@
     },
     "files": [
         "dist/",
+        "tui.tsx",
+        "lib/tui/",
         "README.md",
         "LICENSE"
     ],
@@ -54,14 +60,39 @@
     },
     "devDependencies": {
         "@opencode-ai/plugin": "^1.18.29",
+        "@opentui/core": "^0.4.5",
+        "@opentui/keymap": "^0.4.5",
+        "@opentui/solid": "^0.4.5",
         "@types/node": "^22.0.0",
         "prettier": "^3.4.0",
+        "solid-js": "1.9.12",
         "tsup": "^8.3.0",
         "tsx": "^4.19.0",
         "typescript": "^5.7.0"
     },
     "peerDependencies": {
-        "@opencode-ai/plugin": ">=1.18.29"
+        "@opencode-ai/plugin": ">=1.18.29",
+        "@opentui/core": ">=0.4.5",
+        "@opentui/keymap": ">=0.4.5",
+        "@opentui/solid": ">=0.4.5",
+        "solid-js": ">=1.0.0"
     },
-    "$schema": "https://json.schemastore.org/package.json"
+    "peerDependenciesMeta": {
+        "@opentui/core": {
+            "optional": true
+        },
+        "@opentui/keymap": {
+            "optional": true
+        },
+        "@opentui/solid": {
+            "optional": true
+        },
+        "solid-js": {
+            "optional": true
+        }
+    },
+    "$schema": "https://json.schemastore.org/package.json",
+    "optionalDependencies": {
+        "solid-js": "^1.9.15"
+    }
 }

package/tui.tsx

@@ -0,0 +1,90 @@
+/** @jsxImportSource @opentui/solid */
+
+import type { TuiPluginModule, TuiPluginApi } from "@opencode-ai/plugin/tui"
+import type { SlimConfig } from "./lib/types"
+import { loadConfig } from "./lib/tui/data"
+import { openPanelModal } from "./lib/tui/modals"
+
+/**
+ * Register slash commands using the appropriate API version.
+ * - v2 (1.18.29+): keymap.registerLayer
+ * - v1 (legacy): api.command.register
+ */
+function registerSlashCommands(api: TuiPluginApi, config: SlimConfig): void {
+    // v2 way: keymap.registerLayer
+    if (api.keymap && typeof api.keymap.registerLayer === "function") {
+        api.keymap.registerLayer({
+            mode: "global",
+            priority: 10,
+            commands: [
+                {
+                    name: "slim.panel",
+                    title: "Open Slim Panel",
+                    group: "Slim",
+                    slash: { name: "panel" },
+                    enabled: () => true,
+                    suggested: true,
+                    run: () => {
+                        openPanelModal(api, config)
+                    },
+                },
+                {
+                    name: "slim.compress",
+                    title: "Compress Context",
+                    group: "Slim",
+                    slash: { name: "compress" },
+                    enabled: () => true,
+                    suggested: true,
+                    run: () => {
+                        api.ui.toast({
+                            title: "Slim",
+                            message: "Use the compress tool: compress({ focus: 'your focus' })",
+                            variant: "info",
+                        })
+                    },
+                },
+            ],
+        })
+        return
+    }
+
+    // v1 fallback: api.command.register
+    if (api.command && typeof api.command.register === "function") {
+        api.command.register(() => [
+            {
+                title: "Slim",
+                value: "slim.panel",
+                description: "Open Slim context panel",
+                category: "Slim",
+                slash: { name: "panel" },
+                onSelect: () => openPanelModal(api, config),
+            },
+            {
+                title: "Compress",
+                value: "slim.compress",
+                description: "Compress context (use compress tool)",
+                category: "Slim",
+                slash: { name: "compress" },
+                onSelect: () => {
+                    api.ui.toast({
+                        title: "Slim",
+                        message: "Use the compress tool: compress({ focus: 'your focus' })",
+                        variant: "info",
+                    })
+                },
+            },
+        ])
+    }
+}
+
+const tui: TuiPluginModule["tui"] = async (api) => {
+    const config = loadConfig(api)
+    if (!config.enabled) return
+
+    registerSlashCommands(api, config)
+}
+
+export default {
+    id: "opencode-slim",
+    tui,
+} satisfies TuiPluginModule