@mtayfur/opencode-cache-view 0.0.1

package/README.md

@@ -0,0 +1,95 @@
+# OpenCode Cache View
+
+`@mtayfur/opencode-cache-view` adds a compact sidebar to the OpenCode TUI for cache efficiency, estimated context usage, generation speed, and loaded skills.
+
+```text
+Cache View
+Hit [████████████████] 98.7% ↑0.8%
+Session Hit                96.0%
+Read                    8.0M tok
+Miss                    326K tok
+▼ Speed ─────────────────────
+Now                            —
+TTFT                       ~1.4 s
+Last                    ~37 tok/s
+Avg                     ~42 tok/s
+Trend                    ▂▅▄▇▆█
+▼ Estimated Tokens ──────────
+Prompt                  186K tok
+Tool Call                59K tok
+Tool Result              80K tok
+Agent Reasoning          14K tok
+Agent Output             21K tok
+Total                   326K tok
+▼ Loaded Skills (2) ─────────
+playwright-mcp-ops       2.4K tok
+customize-opencode       3.1K tok
+```
+
+## Metrics
+
+- **Cache:** `Hit` is `cache.read / (input + cache.read + cache.write)` for the latest regular LLM step. `Session Hit` is the aggregate OpenCode session ratio, including compaction calls. `Miss` combines uncached input and cache writes.
+- **Estimated Tokens:** Uses one character-based estimator for the visible system, user, tool, reasoning, and output content from the latest completed compaction summary, its preserved tail, and subsequent messages loaded in the TUI. Provider system prompts, tool schemas, and media tokens are not included.
+- **Speed:** `TTFT` estimates the time from assistant creation to the first reasoning or text block. `Now`, `Last`, and `Avg` use only visible reasoning and text content and the active duration of those blocks, excluding tool execution time. `Avg` covers the latest eight completed responses.
+- **Loaded Skills:** Shows active, non-compacted skill outputs and their estimated token counts. When a skill is loaded more than once, the latest load is shown.
+
+Rows and the cache-hit bar adapt to the available sidebar width. The arrow next to the hit rate compares the latest two LLM steps. Sections can be expanded or collapsed with the mouse.
+
+## Requirements
+
+- OpenCode `1.18.16` or a newer compatible 1.x release
+- Bun `1.3.14` or newer for local development
+
+## Installation
+
+Add the package to `~/.config/opencode/tui.json`:
+
+```json
+{
+  "plugin": ["@mtayfur/opencode-cache-view"]
+}
+```
+
+OpenCode installs package plugins automatically. Restart the TUI after changing the configuration.
+
+### Local checkout
+
+```sh
+bash ./install.sh
+```
+
+The installer resolves dependencies, builds `dist/index.js`, and adds its local `file://` URL to the TUI plugin configuration. Remove the local entry with:
+
+```sh
+bash ./install.sh --uninstall
+```
+
+Restart OpenCode after either operation.
+
+## Architecture
+
+```text
+src/
+├── index.tsx             Plugin entrypoint
+├── cache-view.tsx        Solid/OpenTUI view and event subscriptions
+├── format.ts             Display formatting
+├── token-estimator.ts    Cached character-based token estimation
+└── metrics/
+    ├── cache.ts          Cache usage and hit ratios
+    ├── context.ts        Active context, token, and skill calculations
+    ├── helpers.ts        Shared message and part helpers
+    ├── read.ts           Metric orchestration
+    ├── speed.ts          TTFT and generation speed
+    └── types.ts          Metric data contracts
+```
+
+Metric calculations are isolated from the TUI rendering layer. `read.ts` snapshots OpenCode state and coordinates the dedicated metric modules, while `cache-view.tsx` owns reactive updates and presentation.
+
+## Development
+
+```sh
+bun install --frozen-lockfile
+bun run typecheck
+bun run build
+npm pack --dry-run
+```

package/dist/index.js

@@ -0,0 +1,737 @@
+// @bun
+// src/index.tsx
+import { createComponent as _$createComponent2 } from "@opentui/solid";
+import { memo as _$memo2 } from "@opentui/solid";
+
+// src/cache-view.tsx
+import { memo as _$memo } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { use as _$use } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+import { createMemo, createSignal, onCleanup, onMount } from "solid-js";
+
+// src/format.ts
+function formatCompact(value) {
+  if (value >= 1e6)
+    return `${(value / 1e6).toFixed(1)}M`;
+  if (value >= 1e4)
+    return `${(value / 1000).toFixed(1)}K`;
+  return Math.round(value).toLocaleString("en-US");
+}
+function formatPercent(value) {
+  return value === undefined ? "\u2014" : `${value.toFixed(1)}%`;
+}
+function formatSpeed(value, estimated = false) {
+  if (value === undefined)
+    return "\u2014";
+  return `${estimated ? "~" : ""}${Math.round(value)} tok/s`;
+}
+function formatDuration(value, estimated = false) {
+  if (value === undefined)
+    return "\u2014";
+  const prefix = estimated ? "~" : "";
+  if (value < 1000)
+    return `${prefix}${Math.round(value)} ms`;
+  if (value < 1e4)
+    return `${prefix}${(value / 1000).toFixed(2)} s`;
+  return `${prefix}${(value / 1000).toFixed(1)} s`;
+}
+function formatHitTrend(value) {
+  if (value === undefined)
+    return "\u2014";
+  if (Math.abs(value) < 0.05)
+    return "-";
+  return `${value > 0 ? "\u2191" : "\u2193"}${Math.abs(value).toFixed(1)}%`;
+}
+function progressBar(percent, width) {
+  const filled = percent === undefined ? 0 : Math.round(Math.max(0, Math.min(100, percent)) / 100 * width);
+  return "\u2588".repeat(filled) + "\u2591".repeat(width - filled);
+}
+function sparkline(values) {
+  if (values.length === 0)
+    return "\u2014";
+  if (values.length === 1)
+    return "\u2585";
+  const bars = ["\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  if (min === max)
+    return "\u2585".repeat(values.length);
+  return values.map((value) => bars[Math.round((value - min) / (max - min) * (bars.length - 1))]).join("");
+}
+function row(label, value, width) {
+  return label + " ".repeat(Math.max(1, width - label.length - value.length)) + value;
+}
+function skillRow(skill, width) {
+  const value = `${formatCompact(skill.tokens)} tok`;
+  const maxName = Math.max(4, width - value.length - 1);
+  const name = skill.name.length > maxName ? `${skill.name.slice(0, maxName - 1)}\u2026` : skill.name;
+  return row(name, value, width);
+}
+
+// src/metrics/helpers.ts
+function finite(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+function partsFor(parts, messageID) {
+  return parts.get(messageID) ?? [];
+}
+function assistantMessages(messages, includeSummaries) {
+  return messages.filter((message) => message.role === "assistant" && (includeSummaries || !message.summary));
+}
+function serializedInput(part) {
+  if (part.state.status === "pending" && part.state.raw)
+    return part.state.raw;
+  try {
+    return JSON.stringify(part.state.input);
+  } catch {
+    return "";
+  }
+}
+
+// src/metrics/cache.ts
+function usageSamples(assistants, parts) {
+  const samples = [];
+  for (const message of assistants) {
+    const finishes = partsFor(parts, message.id).filter((part) => part.type === "step-finish");
+    if (finishes.length > 0) {
+      for (const finish of finishes)
+        samples.push({ tokens: finish.tokens });
+      continue;
+    }
+    const tokens = message.tokens;
+    const total = finite(tokens.input) + finite(tokens.output) + finite(tokens.reasoning) + finite(tokens.cache.read) + finite(tokens.cache.write);
+    if (message.time.completed && total > 0)
+      samples.push({ tokens });
+  }
+  return samples;
+}
+function sumUsage(samples) {
+  const result = {
+    input: 0,
+    output: 0,
+    reasoning: 0,
+    cache: { read: 0, write: 0 }
+  };
+  for (const sample of samples) {
+    result.input += finite(sample.tokens.input);
+    result.output += finite(sample.tokens.output);
+    result.reasoning += finite(sample.tokens.reasoning);
+    result.cache.read += finite(sample.tokens.cache.read);
+    result.cache.write += finite(sample.tokens.cache.write);
+  }
+  return result;
+}
+function promptTokens(tokens) {
+  return finite(tokens.input) + finite(tokens.cache.read) + finite(tokens.cache.write);
+}
+function cacheMetrics(sessionTokens, normalUsage, allUsage) {
+  const hitRates = [];
+  for (const sample of normalUsage) {
+    const tokens = sample.tokens;
+    const read2 = finite(tokens.cache?.read);
+    const prompt2 = promptTokens(tokens);
+    if (prompt2 > 0)
+      hitRates.push(read2 / prompt2 * 100);
+  }
+  const latestHit = hitRates.at(-1);
+  const previousHit = hitRates.at(-2);
+  const aggregate = sessionTokens ?? sumUsage(allUsage);
+  const input = finite(aggregate.input);
+  const read = finite(aggregate.cache.read);
+  const write = finite(aggregate.cache.write);
+  const prompt = input + read + write;
+  return {
+    latestHit,
+    trend: latestHit !== undefined && previousHit !== undefined ? latestHit - previousHit : undefined,
+    totalHit: prompt > 0 ? read / prompt * 100 : undefined,
+    read,
+    miss: input + write
+  };
+}
+
+// src/metrics/context.ts
+function estimateSessionTokens(messages, parts, activeStart, session, config, estimator) {
+  const agentConfig = config;
+  const agentName = session?.agent ?? agentConfig.default_agent;
+  const agentPrompt = agentName ? agentConfig.agent?.[agentName]?.prompt ?? "" : "";
+  const result = {
+    system: estimator.count(`agent:${agentName ?? "default"}:prompt`, agentPrompt),
+    user: 0,
+    agent: 0,
+    toolCall: 0,
+    toolResult: 0,
+    output: 0,
+    reasoning: 0,
+    total: 0
+  };
+  for (let index = activeStart;index < messages.length; index++) {
+    const message = messages[index];
+    if (message.role === "user") {
+      result.system += estimator.count(`message:${message.id}:system`, message.system ?? "");
+    }
+    for (const part of partsFor(parts, message.id)) {
+      if (message.role === "user" && part.type === "text" && !part.ignored) {
+        result.user += estimator.count(`part:${part.id}:text`, part.text);
+      } else if (message.role === "user" && part.type === "compaction") {
+        result.user += estimator.count(`part:${part.id}:compaction`, "What did we do so far?");
+      } else if (message.role === "assistant" && part.type === "text") {
+        result.output += estimator.count(`part:${part.id}:text`, part.text);
+      } else if (message.role === "assistant" && part.type === "reasoning") {
+        result.reasoning += estimator.count(`part:${part.id}:text`, part.text);
+      } else if (message.role === "assistant" && part.type === "tool") {
+        const input = estimator.count(`part:${part.id}:input`, serializedInput(part));
+        if (part.tool === "task")
+          result.agent += input;
+        else
+          result.toolCall += input;
+        if (part.state.status === "completed") {
+          const output = part.state.time.compacted ? "[Old tool result content cleared]" : part.state.output;
+          result.toolResult += estimator.count(`part:${part.id}:output`, output);
+        } else if (part.state.status === "error") {
+          result.toolResult += estimator.count(`part:${part.id}:error`, part.state.error);
+        }
+      } else if (part.type === "subtask") {
+        result.agent += estimator.count(`part:${part.id}:subtask`, part.prompt || part.description);
+      } else if (part.type === "agent") {
+        result.agent += estimator.count(`part:${part.id}:agent`, part.source?.value ?? "");
+      }
+    }
+  }
+  result.total = result.system + result.user + result.agent + result.toolCall + result.toolResult + result.output + result.reasoning;
+  return result;
+}
+function activeContextStart(messages, parts) {
+  const messageIndex = new Map(messages.map((message, index) => [message.id, index]));
+  for (let index = messages.length - 1;index >= 0; index--) {
+    const summary = messages[index];
+    if (summary.role !== "assistant" || !summary.summary || !summary.finish || summary.error !== undefined) {
+      continue;
+    }
+    const compactionIndex = messageIndex.get(summary.parentID);
+    if (compactionIndex === undefined)
+      continue;
+    const compaction = partsFor(parts, summary.parentID).find((part) => part.type === "compaction");
+    if (!compaction)
+      continue;
+    const tailIndex = compaction.tail_start_id ? messageIndex.get(compaction.tail_start_id) : undefined;
+    return tailIndex !== undefined && tailIndex < compactionIndex ? tailIndex : compactionIndex;
+  }
+  return 0;
+}
+function skillName(part) {
+  const metadataName = "metadata" in part.state ? part.state.metadata?.name : undefined;
+  if (typeof metadataName === "string" && metadataName)
+    return metadataName;
+  const output = part.state.status === "completed" ? part.state.output : undefined;
+  const outputMatch = output?.match(/^#{1,2}\s*Skill:\s*(.+)$/m);
+  if (outputMatch?.[1])
+    return outputMatch[1].trim();
+  const input = part.state.input;
+  if (typeof input === "object" && input !== null && "name" in input) {
+    const inputName = input.name;
+    if (typeof inputName === "string" && inputName)
+      return inputName;
+  }
+  return;
+}
+function loadedSkills(messages, parts, activeStart, estimator) {
+  const skills = new Map;
+  for (let index = activeStart;index < messages.length; index++) {
+    const message = messages[index];
+    if (message.role !== "assistant")
+      continue;
+    for (const part of partsFor(parts, message.id)) {
+      if (part.type !== "tool" || part.tool !== "skill" || part.state.status !== "completed") {
+        continue;
+      }
+      if (part.state.time.compacted)
+        continue;
+      const name = skillName(part);
+      if (!name)
+        continue;
+      const tokens = estimator.count(`part:${part.id}:output`, part.state.output);
+      skills.set(name, { name, tokens });
+    }
+  }
+  return [...skills.values()];
+}
+
+// src/metrics/speed.ts
+function firstTokenTime(parts, message) {
+  let first = Number.POSITIVE_INFINITY;
+  for (const part of partsFor(parts, message.id)) {
+    if (part.type !== "text" && part.type !== "reasoning")
+      continue;
+    const start = part.time?.start;
+    if (typeof start === "number" && start < first)
+      first = start;
+  }
+  return Number.isFinite(first) ? first : undefined;
+}
+function timeToFirstToken(parts, message) {
+  if (!message)
+    return;
+  const first = firstTokenTime(parts, message);
+  if (first === undefined || first < message.time.created)
+    return;
+  return first - message.time.created;
+}
+function generationSample(message, parts, estimator) {
+  let tokens = 0;
+  let duration = 0;
+  for (const part of partsFor(parts, message.id)) {
+    if (part.type !== "text" && part.type !== "reasoning")
+      continue;
+    const start = part.time?.start;
+    const end = part.time?.end;
+    if (typeof start !== "number" || typeof end !== "number" || end <= start)
+      continue;
+    tokens += estimator.count(`part:${part.id}:text`, part.text);
+    duration += end - start;
+  }
+  if (tokens === 0 || duration < 500)
+    return;
+  return { speed: tokens / duration * 1000, tokens, duration };
+}
+function streamingSpeed(message, parts, estimator, now) {
+  if (!message || message.time.completed)
+    return;
+  let tokens = 0;
+  let duration = 0;
+  for (const part of partsFor(parts, message.id)) {
+    if (part.type !== "text" && part.type !== "reasoning")
+      continue;
+    const start = part.time?.start;
+    if (part.time?.end !== undefined || typeof start !== "number" || now <= start)
+      continue;
+    tokens += estimator.count(`part:${part.id}:text`, part.text);
+    duration += now - start;
+  }
+  if (tokens === 0 || duration < 500)
+    return;
+  return tokens / duration * 1000;
+}
+function speedMetrics(assistants, parts, estimator, now) {
+  const samples = assistants.filter((message) => message.time.completed !== undefined).map((message) => generationSample(message, parts, estimator)).filter((sample) => sample !== undefined);
+  const recent = samples.slice(-8);
+  const totalTokens = recent.reduce((sum, sample) => sum + sample.tokens, 0);
+  const totalDuration = recent.reduce((sum, sample) => sum + sample.duration, 0);
+  return {
+    ttft: timeToFirstToken(parts, assistants.at(-1)),
+    now: streamingSpeed(assistants.at(-1), parts, estimator, now),
+    last: samples.at(-1)?.speed,
+    average: totalDuration > 0 ? totalTokens / totalDuration * 1000 : undefined,
+    trend: recent.map((sample) => sample.speed)
+  };
+}
+
+// src/metrics/read.ts
+function emptyTokenEstimate() {
+  return {
+    system: 0,
+    user: 0,
+    agent: 0,
+    toolCall: 0,
+    toolResult: 0,
+    output: 0,
+    reasoning: 0,
+    total: 0
+  };
+}
+function readMetrics(api, sessionID, now, estimator) {
+  if (!sessionID) {
+    return {
+      cache: { read: 0, miss: 0 },
+      tokens: emptyTokenEstimate(),
+      skills: [],
+      speed: { trend: [] }
+    };
+  }
+  const messages = api.state.session.messages(sessionID);
+  const parts = new Map;
+  for (const message of messages)
+    parts.set(message.id, api.state.part(message.id));
+  const allAssistants = assistantMessages(messages, true);
+  const assistants = assistantMessages(messages, false);
+  const allUsage = usageSamples(allAssistants, parts);
+  const normalUsage = usageSamples(assistants, parts);
+  const activeStart = activeContextStart(messages, parts);
+  const session = api.state.session.get(sessionID);
+  return {
+    cache: cacheMetrics(session?.tokens, normalUsage, allUsage),
+    tokens: estimateSessionTokens(messages, parts, activeStart, session, api.state.config, estimator),
+    skills: loadedSkills(messages, parts, activeStart, estimator),
+    speed: speedMetrics(assistants, parts, estimator, now)
+  };
+}
+
+// src/token-estimator.ts
+function estimateTokenUnits(text) {
+  let units = 0;
+  for (const char of text) {
+    const code = char.codePointAt(0) ?? 0;
+    const isWide = code >= 11904 && code <= 40959 || code >= 44032 && code <= 55203 || code >= 63744 && code <= 64255;
+    units += isWide ? 4 : 1;
+  }
+  return units;
+}
+
+class TokenEstimator {
+  cache = new Map;
+  count(key, text) {
+    const cached = this.cache.get(key);
+    if (cached?.text === text)
+      return cached.tokens;
+    const units = estimateTokenUnits(text);
+    const tokens = Math.ceil(units / 4);
+    this.cache.set(key, { text, units, tokens });
+    return tokens;
+  }
+  append(key, delta) {
+    const cached = this.cache.get(key);
+    if (!cached)
+      return;
+    const units = cached.units + estimateTokenUnits(delta);
+    this.cache.set(key, {
+      text: cached.text + delta,
+      units,
+      tokens: Math.ceil(units / 4)
+    });
+  }
+  clear() {
+    this.cache.clear();
+  }
+}
+
+// src/cache-view.tsx
+var DEFAULT_CONTENT_WIDTH = 29;
+var MIN_CONTENT_WIDTH = 20;
+function SectionHeader(props) {
+  const prefix = `${props.open ? "\u25BC" : "\u25B6"} ${props.title}`;
+  return (() => {
+    var _el$ = _$createElement("text"), _el$2 = _$createElement("span"), _el$3 = _$createElement("b"), _el$4 = _$createElement("span");
+    _$insertNode(_el$, _el$2);
+    _$insertNode(_el$, _el$4);
+    _$insertNode(_el$2, _el$3);
+    _$insert(_el$3, prefix);
+    _$insert(_el$4, () => "\u2500".repeat(Math.max(1, props.width - prefix.length)));
+    _$effect((_p$) => {
+      var _v$ = props.toggle, _v$2 = {
+        fg: props.theme.text
+      }, _v$3 = {
+        fg: props.theme.border
+      };
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$, "onMouseUp", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$2, "style", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp(_el$4, "style", _v$3, _p$.a));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$;
+  })();
+}
+function CacheView(props) {
+  const estimator = new TokenEstimator;
+  const [refresh, setRefresh] = createSignal(0);
+  const [tokensOpen, setTokensOpen] = createSignal(true);
+  const [skillsOpen, setSkillsOpen] = createSignal(true);
+  const [speedOpen, setSpeedOpen] = createSignal(true);
+  const [contentWidth, setContentWidth] = createSignal(DEFAULT_CONTENT_WIDTH);
+  let estimatorSession = "";
+  let boxElement;
+  const metrics = createMemo(() => {
+    refresh();
+    if (estimatorSession !== props.sessionID) {
+      estimator.clear();
+      estimatorSession = props.sessionID;
+    }
+    return readMetrics(props.api, props.sessionID, Date.now(), estimator);
+  });
+  const hitColor = createMemo(() => {
+    const hit = metrics().cache.latestHit;
+    if (hit === undefined)
+      return props.theme.textMuted;
+    if (hit >= 85)
+      return props.theme.success;
+    if (hit >= 60)
+      return props.theme.warning;
+    return props.theme.error;
+  });
+  const trendColor = createMemo(() => {
+    const trend = metrics().cache.trend;
+    if (trend === undefined || Math.abs(trend) < 0.05)
+      return props.theme.textMuted;
+    return trend > 0 ? props.theme.success : props.theme.error;
+  });
+  const hitBarWidth = createMemo(() => {
+    const percent = formatPercent(metrics().cache.latestHit);
+    const trend = formatHitTrend(metrics().cache.trend);
+    const fixedWidth = "Hit ".length + 2 + 1 + percent.length + 1 + trend.length;
+    return Math.max(3, contentWidth() - fixedWidth);
+  });
+  onMount(() => {
+    let refreshTimer;
+    const matches = (event) => event.properties.sessionID === props.sessionID;
+    const bump = () => setRefresh((value) => value + 1);
+    const scheduleRefresh = (event) => {
+      if (!matches(event) || refreshTimer !== undefined)
+        return;
+      refreshTimer = setTimeout(() => {
+        refreshTimer = undefined;
+        bump();
+      }, 100);
+    };
+    const message = props.api.event.on("message.updated", scheduleRefresh);
+    const messageRemoved = props.api.event.on("message.removed", (event) => {
+      if (!matches(event))
+        return;
+      estimator.clear();
+      scheduleRefresh(event);
+    });
+    const part = props.api.event.on("message.part.updated", scheduleRefresh);
+    const partRemoved = props.api.event.on("message.part.removed", (event) => {
+      if (!matches(event))
+        return;
+      estimator.clear();
+      scheduleRefresh(event);
+    });
+    const delta = props.api.event.on("message.part.delta", (event) => {
+      if (!matches(event))
+        return;
+      if (event.properties.field === "text") {
+        estimator.append(`part:${event.properties.partID}:text`, event.properties.delta);
+      }
+      scheduleRefresh(event);
+    });
+    const session = props.api.event.on("session.updated", scheduleRefresh);
+    const compacted = props.api.event.on("session.compacted", scheduleRefresh);
+    onCleanup(() => {
+      if (refreshTimer !== undefined)
+        clearTimeout(refreshTimer);
+      message();
+      messageRemoved();
+      part();
+      partRemoved();
+      delta();
+      session();
+      compacted();
+    });
+  });
+  return (() => {
+    var _el$5 = _$createElement("box"), _el$6 = _$createElement("text"), _el$7 = _$createElement("span"), _el$8 = _$createElement("b"), _el$0 = _$createElement("text"), _el$1 = _$createElement("span"), _el$11 = _$createElement("span"), _el$12 = _$createTextNode(`[`), _el$13 = _$createTextNode(`]`), _el$14 = _$createElement("span"), _el$15 = _$createTextNode(` `), _el$16 = _$createElement("span"), _el$17 = _$createTextNode(` `), _el$18 = _$createElement("text"), _el$19 = _$createElement("text"), _el$20 = _$createElement("text");
+    _$insertNode(_el$5, _el$6);
+    _$insertNode(_el$5, _el$0);
+    _$insertNode(_el$5, _el$18);
+    _$insertNode(_el$5, _el$19);
+    _$insertNode(_el$5, _el$20);
+    _$use((element) => {
+      boxElement = element;
+    }, _el$5);
+    _$setProp(_el$5, "flexDirection", "column");
+    _$setProp(_el$5, "onSizeChange", () => {
+      const width = boxElement?.width;
+      if (typeof width === "number" && width > 0) {
+        setContentWidth(Math.max(MIN_CONTENT_WIDTH, width));
+      }
+    });
+    _$insertNode(_el$6, _el$7);
+    _$insertNode(_el$7, _el$8);
+    _$insertNode(_el$8, _$createTextNode(`Cache View`));
+    _$insertNode(_el$0, _el$1);
+    _$insertNode(_el$0, _el$11);
+    _$insertNode(_el$0, _el$14);
+    _$insertNode(_el$0, _el$16);
+    _$insertNode(_el$1, _$createTextNode(`Hit `));
+    _$insertNode(_el$11, _el$12);
+    _$insertNode(_el$11, _el$13);
+    _$insert(_el$11, () => progressBar(metrics().cache.latestHit, hitBarWidth()), _el$13);
+    _$insertNode(_el$14, _el$15);
+    _$insert(_el$14, () => formatPercent(metrics().cache.latestHit), null);
+    _$insertNode(_el$16, _el$17);
+    _$insert(_el$16, () => formatHitTrend(metrics().cache.trend), null);
+    _$insert(_el$18, () => row("Session Hit", formatPercent(metrics().cache.totalHit), contentWidth()));
+    _$insert(_el$19, () => row("Read", `${formatCompact(metrics().cache.read)} tok`, contentWidth()));
+    _$insert(_el$20, () => row("Miss", `${formatCompact(metrics().cache.miss)} tok`, contentWidth()));
+    _$insert(_el$5, _$createComponent(SectionHeader, {
+      title: "Speed",
+      get open() {
+        return speedOpen();
+      },
+      get width() {
+        return contentWidth();
+      },
+      get theme() {
+        return props.theme;
+      },
+      toggle: () => setSpeedOpen((value) => !value)
+    }), null);
+    _$insert(_el$5, (() => {
+      var _c$ = _$memo(() => !!speedOpen());
+      return () => _c$() && [(() => {
+        var _el$21 = _$createElement("text");
+        _$insert(_el$21, () => row("Now", formatSpeed(metrics().speed.now, true), contentWidth()));
+        _$effect((_$p) => _$setProp(_el$21, "fg", props.theme.textMuted, _$p));
+        return _el$21;
+      })(), (() => {
+        var _el$22 = _$createElement("text");
+        _$insert(_el$22, () => row("TTFT", formatDuration(metrics().speed.ttft, true), contentWidth()));
+        _$effect((_$p) => _$setProp(_el$22, "fg", props.theme.textMuted, _$p));
+        return _el$22;
+      })(), (() => {
+        var _el$23 = _$createElement("text");
+        _$insert(_el$23, () => row("Last", formatSpeed(metrics().speed.last, true), contentWidth()));
+        _$effect((_$p) => _$setProp(_el$23, "fg", props.theme.textMuted, _$p));
+        return _el$23;
+      })(), (() => {
+        var _el$24 = _$createElement("text");
+        _$insert(_el$24, () => row("Avg", formatSpeed(metrics().speed.average, true), contentWidth()));
+        _$effect((_$p) => _$setProp(_el$24, "fg", props.theme.textMuted, _$p));
+        return _el$24;
+      })(), (() => {
+        var _el$25 = _$createElement("text");
+        _$insert(_el$25, () => row("Trend", sparkline(metrics().speed.trend), contentWidth()));
+        _$effect((_$p) => _$setProp(_el$25, "fg", props.theme.textMuted, _$p));
+        return _el$25;
+      })()];
+    })(), null);
+    _$insert(_el$5, _$createComponent(SectionHeader, {
+      title: "Estimated Tokens",
+      get open() {
+        return tokensOpen();
+      },
+      get width() {
+        return contentWidth();
+      },
+      get theme() {
+        return props.theme;
+      },
+      toggle: () => setTokensOpen((value) => !value)
+    }), null);
+    _$insert(_el$5, (() => {
+      var _c$2 = _$memo(() => !!tokensOpen());
+      return () => _c$2() && [(() => {
+        var _el$26 = _$createElement("text");
+        _$insert(_el$26, () => row("Prompt", `${formatCompact(metrics().tokens.system + metrics().tokens.user + metrics().tokens.agent)} tok`, contentWidth()));
+        _$effect((_$p) => _$setProp(_el$26, "fg", props.theme.textMuted, _$p));
+        return _el$26;
+      })(), (() => {
+        var _el$27 = _$createElement("text");
+        _$insert(_el$27, () => row("Tool Call", `${formatCompact(metrics().tokens.toolCall)} tok`, contentWidth()));
+        _$effect((_$p) => _$setProp(_el$27, "fg", props.theme.textMuted, _$p));
+        return _el$27;
+      })(), (() => {
+        var _el$28 = _$createElement("text");
+        _$insert(_el$28, () => row("Tool Result", `${formatCompact(metrics().tokens.toolResult)} tok`, contentWidth()));
+        _$effect((_$p) => _$setProp(_el$28, "fg", props.theme.textMuted, _$p));
+        return _el$28;
+      })(), (() => {
+        var _el$29 = _$createElement("text");
+        _$insert(_el$29, () => row("Agent Reasoning", `${formatCompact(metrics().tokens.reasoning)} tok`, contentWidth()));
+        _$effect((_$p) => _$setProp(_el$29, "fg", props.theme.textMuted, _$p));
+        return _el$29;
+      })(), (() => {
+        var _el$30 = _$createElement("text");
+        _$insert(_el$30, () => row("Agent Output", `${formatCompact(metrics().tokens.output)} tok`, contentWidth()));
+        _$effect((_$p) => _$setProp(_el$30, "fg", props.theme.textMuted, _$p));
+        return _el$30;
+      })(), (() => {
+        var _el$31 = _$createElement("text");
+        _$insert(_el$31, () => row("Total", `${formatCompact(metrics().tokens.total)} tok`, contentWidth()));
+        _$effect((_$p) => _$setProp(_el$31, "fg", props.theme.text, _$p));
+        return _el$31;
+      })()];
+    })(), null);
+    _$insert(_el$5, (() => {
+      var _c$3 = _$memo(() => metrics().skills.length > 0);
+      return () => _c$3() && [_$createComponent(SectionHeader, {
+        get title() {
+          return `Loaded Skills (${metrics().skills.length})`;
+        },
+        get open() {
+          return skillsOpen();
+        },
+        get width() {
+          return contentWidth();
+        },
+        get theme() {
+          return props.theme;
+        },
+        toggle: () => setSkillsOpen((value) => !value)
+      }), _$memo(() => _$memo(() => !!skillsOpen())() && metrics().skills.map((skill) => (() => {
+        var _el$32 = _$createElement("text");
+        _$insert(_el$32, () => skillRow(skill, contentWidth()));
+        _$effect((_$p) => _$setProp(_el$32, "fg", props.theme.textMuted, _$p));
+        return _el$32;
+      })()))];
+    })(), null);
+    _$effect((_p$) => {
+      var _v$4 = {
+        fg: props.theme.text
+      }, _v$5 = {
+        fg: props.theme.text
+      }, _v$6 = {
+        fg: hitColor()
+      }, _v$7 = {
+        fg: props.theme.text
+      }, _v$8 = {
+        fg: trendColor()
+      }, _v$9 = props.theme.textMuted, _v$0 = props.theme.textMuted, _v$1 = props.theme.textMuted;
+      _v$4 !== _p$.e && (_p$.e = _$setProp(_el$7, "style", _v$4, _p$.e));
+      _v$5 !== _p$.t && (_p$.t = _$setProp(_el$1, "style", _v$5, _p$.t));
+      _v$6 !== _p$.a && (_p$.a = _$setProp(_el$11, "style", _v$6, _p$.a));
+      _v$7 !== _p$.o && (_p$.o = _$setProp(_el$14, "style", _v$7, _p$.o));
+      _v$8 !== _p$.i && (_p$.i = _$setProp(_el$16, "style", _v$8, _p$.i));
+      _v$9 !== _p$.n && (_p$.n = _$setProp(_el$18, "fg", _v$9, _p$.n));
+      _v$0 !== _p$.s && (_p$.s = _$setProp(_el$19, "fg", _v$0, _p$.s));
+      _v$1 !== _p$.h && (_p$.h = _$setProp(_el$20, "fg", _v$1, _p$.h));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined
+    });
+    return _el$5;
+  })();
+}
+
+// src/index.tsx
+var tui = async (api) => {
+  api.slots.register({
+    order: 56,
+    slots: {
+      sidebar_content(ctx, props) {
+        return _$createComponent2(CacheView, {
+          api,
+          get sessionID() {
+            return props.session_id ?? "";
+          },
+          get theme() {
+            return ctx.theme.current;
+          }
+        });
+      }
+    }
+  });
+};
+var plugin = {
+  id: "opencode-cache-view",
+  tui
+};
+var src_default = plugin;
+export {
+  src_default as default
+};

package/package.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "name": "@mtayfur/opencode-cache-view",
+  "version": "0.0.1",
+  "description": "Minimal OpenCode TUI sidebar for cache hit, estimated tokens, and generation speed.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mtayfur/opencode-cache-view.git"
+  },
+  "bugs": {
+    "url": "https://github.com/mtayfur/opencode-cache-view/issues"
+  },
+  "homepage": "https://github.com/mtayfur/opencode-cache-view#readme",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    "./tui": "./dist/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "bun run scripts/build.ts",
+    "setup": "bash ./install.sh",
+    "setup:uninstall": "bash ./install.sh --uninstall",
+    "typecheck": "tsc --noEmit",
+    "prepack": "bun run build"
+  },
+  "dependencies": {
+    "solid-js": "^1.9.0"
+  },
+  "peerDependencies": {
+    "@opencode-ai/plugin": ">=1.14.0",
+    "@opencode-ai/sdk": ">=1.14.0",
+    "@opentui/core": ">=0.2.0",
+    "@opentui/solid": ">=0.2.0"
+  },
+  "devDependencies": {
+    "@opencode-ai/plugin": "^1.18.16",
+    "@opencode-ai/sdk": "^1.18.16",
+    "@opentui/core": "^0.5.1",
+    "@opentui/solid": "^0.5.1",
+    "jsonc-parser": "^3.3.1",
+    "typescript": "^5.8.0"
+  },
+  "engines": {
+    "bun": ">=1.3.14",
+    "opencode": ">=1.18.16 <2"
+  },
+  "keywords": [
+    "opencode",
+    "plugin",
+    "cache",
+    "tokens",
+    "tui"
+  ],
+  "packageManager": "bun@1.3.14"
+}