@mtayfur/opencode-cache-view 0.0.1 → 0.0.3

package/README.md

@@ -1,6 +1,6 @@
 # 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.
+`@mtayfur/opencode-cache-view` adds a compact sidebar to the OpenCode TUI for cache efficiency, estimated context usage, generation speed, and loaded skills. The latest cache-hit ratio and trend also remain visible in the prompt status row.
 
 ```text
 Cache View
@@ -9,10 +9,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
+TPS                       47 tok/s
 Trend                    ▂▅▄▇▆█
 ▼ Estimated Tokens ──────────
 Prompt                  186K tok
@@ -30,11 +28,13 @@ customize-opencode       3.1K tok
 
 - **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.
+- **Speed:** `TPS` is calculated when an LLM step finishes as `(output + reasoning) / step duration`, using OpenCode's exact provider token totals. It therefore includes hidden reasoning without estimating from exposed reasoning summaries. While a step is running, the value is shown as `… tok/s`; tool execution between steps is excluded. `TTFT` retains the estimated delay to the first visible reasoning or text block, and `Trend` shows the latest eight completed-step TPS values.
 - **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.
 
+The prompt status indicator uses the composable `session_prompt_right` slot, so it does not replace the prompt or conflict with plugins that customize prompt behavior. It shows the same completed-step TPS as the sidebar, followed by a single separator and the cache ratio; only the cache trend is color-coded.
+
 ## Requirements
 
 - OpenCode `1.18.16` or a newer compatible 1.x release
@@ -71,6 +71,7 @@ Restart OpenCode after either operation.
 ```text
 src/
 ├── index.tsx             Plugin entrypoint
+├── cache-status.tsx      Prompt status-row cache ratio
 ├── cache-view.tsx        Solid/OpenTUI view and event subscriptions
 ├── format.ts             Display formatting
 ├── token-estimator.ts    Cached character-based token estimation
@@ -79,7 +80,7 @@ src/
     ├── 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
+    ├── speed.ts          Completed-step generation speed
     └── types.ts          Metric data contracts
 ```
 

package/dist/index.js

@@ -3,13 +3,10 @@
 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";
+// src/cache-status.tsx
 import { setProp as _$setProp } from "@opentui/solid";
 import { effect as _$effect } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
 import { insertNode as _$insertNode } from "@opentui/solid";
 import { insert as _$insert } from "@opentui/solid";
 import { createElement as _$createElement } from "@opentui/solid";
@@ -155,6 +152,110 @@ function cacheMetrics(sessionTokens, normalUsage, allUsage) {
   };
 }
 
+// src/cache-status.tsx
+function CacheStatus(props) {
+  const [refresh, setRefresh] = createSignal(0);
+  const metrics = createMemo(() => {
+    refresh();
+    const messages = props.api.state.session.messages(props.sessionID);
+    const parts = new Map;
+    for (const message of messages)
+      parts.set(message.id, props.api.state.part(message.id));
+    const assistants = assistantMessages(messages, false);
+    const allUsage = usageSamples(assistantMessages(messages, true), parts);
+    const normalUsage = usageSamples(assistants, parts);
+    return {
+      cache: cacheMetrics(props.api.state.session.get(props.sessionID)?.tokens, normalUsage, allUsage),
+      speed: props.speed.get(props.sessionID)
+    };
+  });
+  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 speedValue = createMemo(() => {
+    const speed = metrics().speed;
+    return speed.active ? "\u2026 tok/s" : formatSpeed(speed.value);
+  });
+  onMount(() => {
+    let refreshTimer;
+    const scheduleRefresh = (event) => {
+      if (event.properties.sessionID !== props.sessionID || refreshTimer !== undefined)
+        return;
+      refreshTimer = setTimeout(() => {
+        refreshTimer = undefined;
+        setRefresh((value) => value + 1);
+      }, 100);
+    };
+    const message = props.api.event.on("message.updated", scheduleRefresh);
+    const messageRemoved = props.api.event.on("message.removed", scheduleRefresh);
+    const part = props.api.event.on("message.part.updated", scheduleRefresh);
+    const delta = props.api.event.on("message.part.delta", scheduleRefresh);
+    const partRemoved = props.api.event.on("message.part.removed", scheduleRefresh);
+    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();
+      delta();
+      partRemoved();
+      session();
+      compacted();
+    });
+  });
+  return (() => {
+    var _el$ = _$createElement("text"), _el$2 = _$createElement("span"), _el$3 = _$createElement("span"), _el$5 = _$createElement("span"), _el$6 = _$createElement("span"), _el$7 = _$createTextNode(` `);
+    _$insertNode(_el$, _el$2);
+    _$insertNode(_el$, _el$3);
+    _$insertNode(_el$, _el$5);
+    _$insertNode(_el$, _el$6);
+    _$insert(_el$2, speedValue);
+    _$insertNode(_el$3, _$createTextNode(` \u2502 `));
+    _$insert(_el$5, () => formatPercent(metrics().cache.latestHit));
+    _$insertNode(_el$6, _el$7);
+    _$insert(_el$6, () => formatHitTrend(metrics().cache.trend), null);
+    _$effect((_p$) => {
+      var _v$ = {
+        fg: props.theme.text
+      }, _v$2 = {
+        fg: props.theme.textMuted
+      }, _v$3 = {
+        fg: props.theme.text
+      }, _v$4 = {
+        fg: trendColor()
+      };
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$2, "style", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$3, "style", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp(_el$5, "style", _v$3, _p$.a));
+      _v$4 !== _p$.o && (_p$.o = _$setProp(_el$6, "style", _v$4, _p$.o));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$;
+  })();
+}
+
+// src/cache-view.tsx
+import { memo as _$memo } from "@opentui/solid";
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { createTextNode as _$createTextNode2 } from "@opentui/solid";
+import { use as _$use } from "@opentui/solid";
+import { setProp as _$setProp2 } from "@opentui/solid";
+import { effect as _$effect2 } from "@opentui/solid";
+import { insertNode as _$insertNode2 } from "@opentui/solid";
+import { insert as _$insert2 } from "@opentui/solid";
+import { createElement as _$createElement2 } from "@opentui/solid";
+import { createMemo as createMemo2, createSignal as createSignal2, onCleanup as onCleanup2, onMount as onMount2 } from "solid-js";
+
 // src/metrics/context.ts
 function estimateSessionTokens(messages, parts, activeStart, session, config, estimator) {
   const agentConfig = config;
@@ -263,72 +364,94 @@ function loadedSkills(messages, parts, activeStart, estimator) {
 }
 
 // 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 createSpeedTracker(api) {
+  const starts = new Map;
+  const latest = new Map;
+  const trends = new Map;
+  const part = api.event.on("message.part.updated", (event) => {
+    const value = event.properties.part;
+    if (value.type === "step-start") {
+      if (!starts.has(value.messageID)) {
+        starts.set(value.messageID, {
+          sessionID: event.properties.sessionID,
+          time: event.properties.time
+        });
+      }
+      return;
+    }
+    if (value.type !== "step-finish")
+      return;
+    const start = starts.get(value.messageID);
+    starts.delete(value.messageID);
+    if (!start || start.sessionID !== event.properties.sessionID)
+      return;
+    const duration = event.properties.time - start.time;
+    const tokens = value.tokens.output + value.tokens.reasoning;
+    if (duration <= 0 || tokens <= 0)
+      return;
+    const speed = tokens / duration * 1000;
+    latest.set(start.sessionID, speed);
+    trends.set(start.sessionID, [...trends.get(start.sessionID) ?? [], speed].slice(-8));
+  });
+  const message = api.event.on("message.updated", (event) => {
+    if (event.properties.info.role !== "assistant")
+      return;
+    if (event.properties.info.time.completed === undefined && event.properties.info.error === undefined)
+      return;
+    starts.delete(event.properties.info.id);
+  });
+  const messageRemoved = api.event.on("message.removed", (event) => {
+    starts.delete(event.properties.messageID);
+  });
+  const sessionDeleted = api.event.on("session.deleted", (event) => {
+    latest.delete(event.properties.sessionID);
+    trends.delete(event.properties.sessionID);
+    for (const [messageID, start] of starts) {
+      if (start.sessionID === event.properties.sessionID)
+        starts.delete(messageID);
+    }
+  });
+  return {
+    get(sessionID) {
+      let active = false;
+      for (const start of starts.values()) {
+        if (start.sessionID === sessionID) {
+          active = true;
+          break;
+        }
+      }
+      return { active, value: latest.get(sessionID), trend: trends.get(sessionID) ?? [] };
+    },
+    dispose() {
+      part();
+      message();
+      messageRemoved();
+      sessionDeleted();
+      starts.clear();
+      latest.clear();
+      trends.clear();
+    }
+  };
+}
+function isObservablePart(part) {
+  if (part.type === "reasoning")
+    return part.text.length > 0;
+  return part.type === "text" && !part.synthetic && !part.ignored && part.text.length > 0;
 }
 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;
+  let first = Number.POSITIVE_INFINITY;
   for (const part of partsFor(parts, message.id)) {
-    if (part.type !== "text" && part.type !== "reasoning")
+    if (!isObservablePart(part))
       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 (typeof start === "number" && start < first)
+      first = start;
   }
-  if (tokens === 0 || duration < 500)
+  if (!Number.isFinite(first) || first < message.time.created)
     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)
-  };
+  return first - message.time.created;
 }
 
 // src/metrics/read.ts
@@ -344,13 +467,13 @@ function emptyTokenEstimate() {
     total: 0
   };
 }
-function readMetrics(api, sessionID, now, estimator) {
+function readMetrics(api, sessionID, estimator, speed) {
   if (!sessionID) {
     return {
       cache: { read: 0, miss: 0 },
       tokens: emptyTokenEstimate(),
       skills: [],
-      speed: { trend: [] }
+      speed
     };
   }
   const messages = api.state.session.messages(sessionID);
@@ -367,7 +490,7 @@ function readMetrics(api, sessionID, now, estimator) {
     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)
+    speed: { ...speed, ttft: timeToFirstToken(parts, assistants.at(-1)) }
   };
 }
 
@@ -415,21 +538,21 @@ 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 _el$ = _$createElement2("text"), _el$2 = _$createElement2("span"), _el$3 = _$createElement2("b"), _el$4 = _$createElement2("span");
+    _$insertNode2(_el$, _el$2);
+    _$insertNode2(_el$, _el$4);
+    _$insertNode2(_el$2, _el$3);
+    _$insert2(_el$3, prefix);
+    _$insert2(_el$4, () => "\u2500".repeat(Math.max(1, props.width - prefix.length)));
+    _$effect2((_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));
+      _v$ !== _p$.e && (_p$.e = _$setProp2(_el$, "onMouseUp", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp2(_el$2, "style", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp2(_el$4, "style", _v$3, _p$.a));
       return _p$;
     }, {
       e: undefined,
@@ -441,22 +564,22 @@ function SectionHeader(props) {
 }
 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);
+  const [refresh, setRefresh] = createSignal2(0);
+  const [tokensOpen, setTokensOpen] = createSignal2(true);
+  const [skillsOpen, setSkillsOpen] = createSignal2(true);
+  const [speedOpen, setSpeedOpen] = createSignal2(true);
+  const [contentWidth, setContentWidth] = createSignal2(DEFAULT_CONTENT_WIDTH);
   let estimatorSession = "";
   let boxElement;
-  const metrics = createMemo(() => {
+  const metrics = createMemo2(() => {
     refresh();
     if (estimatorSession !== props.sessionID) {
       estimator.clear();
       estimatorSession = props.sessionID;
     }
-    return readMetrics(props.api, props.sessionID, Date.now(), estimator);
+    return readMetrics(props.api, props.sessionID, estimator, props.speed.get(props.sessionID));
   });
-  const hitColor = createMemo(() => {
+  const hitColor = createMemo2(() => {
     const hit = metrics().cache.latestHit;
     if (hit === undefined)
       return props.theme.textMuted;
@@ -466,19 +589,19 @@ function CacheView(props) {
       return props.theme.warning;
     return props.theme.error;
   });
-  const trendColor = createMemo(() => {
+  const trendColor = createMemo2(() => {
     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 hitBarWidth = createMemo2(() => {
     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(() => {
+  onMount2(() => {
     let refreshTimer;
     const matches = (event) => event.properties.sessionID === props.sessionID;
     const bump = () => setRefresh((value) => value + 1);
@@ -514,7 +637,7 @@ function CacheView(props) {
     });
     const session = props.api.event.on("session.updated", scheduleRefresh);
     const compacted = props.api.event.on("session.compacted", scheduleRefresh);
-    onCleanup(() => {
+    onCleanup2(() => {
       if (refreshTimer !== undefined)
         clearTimeout(refreshTimer);
       message();
@@ -527,41 +650,41 @@ function CacheView(props) {
     });
   });
   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);
+    var _el$5 = _$createElement2("box"), _el$6 = _$createElement2("text"), _el$7 = _$createElement2("span"), _el$8 = _$createElement2("b"), _el$0 = _$createElement2("text"), _el$1 = _$createElement2("span"), _el$11 = _$createElement2("span"), _el$12 = _$createTextNode2(`[`), _el$13 = _$createTextNode2(`]`), _el$14 = _$createElement2("span"), _el$15 = _$createTextNode2(` `), _el$16 = _$createElement2("span"), _el$17 = _$createTextNode2(` `), _el$18 = _$createElement2("text"), _el$19 = _$createElement2("text"), _el$20 = _$createElement2("text");
+    _$insertNode2(_el$5, _el$6);
+    _$insertNode2(_el$5, _el$0);
+    _$insertNode2(_el$5, _el$18);
+    _$insertNode2(_el$5, _el$19);
+    _$insertNode2(_el$5, _el$20);
     _$use((element) => {
       boxElement = element;
     }, _el$5);
-    _$setProp(_el$5, "flexDirection", "column");
-    _$setProp(_el$5, "onSizeChange", () => {
+    _$setProp2(_el$5, "flexDirection", "column");
+    _$setProp2(_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, {
+    _$insertNode2(_el$6, _el$7);
+    _$insertNode2(_el$7, _el$8);
+    _$insertNode2(_el$8, _$createTextNode2(`Cache View`));
+    _$insertNode2(_el$0, _el$1);
+    _$insertNode2(_el$0, _el$11);
+    _$insertNode2(_el$0, _el$14);
+    _$insertNode2(_el$0, _el$16);
+    _$insertNode2(_el$1, _$createTextNode2(`Hit `));
+    _$insertNode2(_el$11, _el$12);
+    _$insertNode2(_el$11, _el$13);
+    _$insert2(_el$11, () => progressBar(metrics().cache.latestHit, hitBarWidth()), _el$13);
+    _$insertNode2(_el$14, _el$15);
+    _$insert2(_el$14, () => formatPercent(metrics().cache.latestHit), null);
+    _$insertNode2(_el$16, _el$17);
+    _$insert2(_el$16, () => formatHitTrend(metrics().cache.trend), null);
+    _$insert2(_el$18, () => row("Session Hit", formatPercent(metrics().cache.totalHit), contentWidth()));
+    _$insert2(_el$19, () => row("Read", `${formatCompact(metrics().cache.read)} tok`, contentWidth()));
+    _$insert2(_el$20, () => row("Miss", `${formatCompact(metrics().cache.miss)} tok`, contentWidth()));
+    _$insert2(_el$5, _$createComponent(SectionHeader, {
       title: "Speed",
       get open() {
         return speedOpen();
@@ -574,36 +697,26 @@ function CacheView(props) {
       },
       toggle: () => setSpeedOpen((value) => !value)
     }), null);
-    _$insert(_el$5, (() => {
+    _$insert2(_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));
+        var _el$21 = _$createElement2("text");
+        _$insert2(_el$21, () => row("TTFT", formatDuration(metrics().speed.ttft, true), contentWidth()));
+        _$effect2((_$p) => _$setProp2(_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));
+        var _el$22 = _$createElement2("text");
+        _$insert2(_el$22, () => row("TPS", metrics().speed.active ? "\u2026 tok/s" : formatSpeed(metrics().speed.value), contentWidth()));
+        _$effect2((_$p) => _$setProp2(_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));
+        var _el$23 = _$createElement2("text");
+        _$insert2(_el$23, () => row("Trend", sparkline(metrics().speed.trend), contentWidth()));
+        _$effect2((_$p) => _$setProp2(_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, {
+    _$insert2(_el$5, _$createComponent(SectionHeader, {
       title: "Estimated Tokens",
       get open() {
         return tokensOpen();
@@ -616,41 +729,41 @@ function CacheView(props) {
       },
       toggle: () => setTokensOpen((value) => !value)
     }), null);
-    _$insert(_el$5, (() => {
+    _$insert2(_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));
+        var _el$24 = _$createElement2("text");
+        _$insert2(_el$24, () => row("Prompt", `${formatCompact(metrics().tokens.system + metrics().tokens.user + metrics().tokens.agent)} tok`, contentWidth()));
+        _$effect2((_$p) => _$setProp2(_el$24, "fg", props.theme.textMuted, _$p));
+        return _el$24;
+      })(), (() => {
+        var _el$25 = _$createElement2("text");
+        _$insert2(_el$25, () => row("Tool Call", `${formatCompact(metrics().tokens.toolCall)} tok`, contentWidth()));
+        _$effect2((_$p) => _$setProp2(_el$25, "fg", props.theme.textMuted, _$p));
+        return _el$25;
+      })(), (() => {
+        var _el$26 = _$createElement2("text");
+        _$insert2(_el$26, () => row("Tool Result", `${formatCompact(metrics().tokens.toolResult)} tok`, contentWidth()));
+        _$effect2((_$p) => _$setProp2(_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));
+        var _el$27 = _$createElement2("text");
+        _$insert2(_el$27, () => row("Agent Reasoning", `${formatCompact(metrics().tokens.reasoning)} tok`, contentWidth()));
+        _$effect2((_$p) => _$setProp2(_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));
+        var _el$28 = _$createElement2("text");
+        _$insert2(_el$28, () => row("Agent Output", `${formatCompact(metrics().tokens.output)} tok`, contentWidth()));
+        _$effect2((_$p) => _$setProp2(_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));
+        var _el$29 = _$createElement2("text");
+        _$insert2(_el$29, () => row("Total", `${formatCompact(metrics().tokens.total)} tok`, contentWidth()));
+        _$effect2((_$p) => _$setProp2(_el$29, "fg", props.theme.text, _$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, (() => {
+    _$insert2(_el$5, (() => {
       var _c$3 = _$memo(() => metrics().skills.length > 0);
       return () => _c$3() && [_$createComponent(SectionHeader, {
         get title() {
@@ -667,13 +780,13 @@ function CacheView(props) {
         },
         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;
+        var _el$30 = _$createElement2("text");
+        _$insert2(_el$30, () => skillRow(skill, contentWidth()));
+        _$effect2((_$p) => _$setProp2(_el$30, "fg", props.theme.textMuted, _$p));
+        return _el$30;
       })()))];
     })(), null);
-    _$effect((_p$) => {
+    _$effect2((_p$) => {
       var _v$4 = {
         fg: props.theme.text
       }, _v$5 = {
@@ -685,14 +798,14 @@ function CacheView(props) {
       }, _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));
+      _v$4 !== _p$.e && (_p$.e = _$setProp2(_el$7, "style", _v$4, _p$.e));
+      _v$5 !== _p$.t && (_p$.t = _$setProp2(_el$1, "style", _v$5, _p$.t));
+      _v$6 !== _p$.a && (_p$.a = _$setProp2(_el$11, "style", _v$6, _p$.a));
+      _v$7 !== _p$.o && (_p$.o = _$setProp2(_el$14, "style", _v$7, _p$.o));
+      _v$8 !== _p$.i && (_p$.i = _$setProp2(_el$16, "style", _v$8, _p$.i));
+      _v$9 !== _p$.n && (_p$.n = _$setProp2(_el$18, "fg", _v$9, _p$.n));
+      _v$0 !== _p$.s && (_p$.s = _$setProp2(_el$19, "fg", _v$0, _p$.s));
+      _v$1 !== _p$.h && (_p$.h = _$setProp2(_el$20, "fg", _v$1, _p$.h));
       return _p$;
     }, {
       e: undefined,
@@ -710,6 +823,8 @@ function CacheView(props) {
 
 // src/index.tsx
 var tui = async (api) => {
+  const speed = createSpeedTracker(api);
+  api.lifecycle.onDispose(speed.dispose);
   api.slots.register({
     order: 56,
     slots: {
@@ -719,6 +834,19 @@ var tui = async (api) => {
           get sessionID() {
             return props.session_id ?? "";
           },
+          speed,
+          get theme() {
+            return ctx.theme.current;
+          }
+        });
+      },
+      session_prompt_right(ctx, props) {
+        return _$createComponent2(CacheStatus, {
+          api,
+          get sessionID() {
+            return props.session_id;
+          },
+          speed,
           get theme() {
             return ctx.theme.current;
           }

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@mtayfur/opencode-cache-view",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Minimal OpenCode TUI sidebar for cache hit, estimated tokens, and generation speed.",
   "repository": {
     "type": "git",