@glaicer/supercode-token-usage-panel 0.1.4 → 1.0.1

package/README.md

@@ -9,29 +9,29 @@ An OpenCode plugin that adds a collapsible `Token Usage` section to the TUI sess
 
 Totals fold in the whole session family: the parent session plus all subagent descendants, from OpenCode's own `session.tokens` / `session.cost` aggregates. When descendants contribute, their usage sums up with parent agent usage.
 
+Requires OpenCode v2 (`>=2.0.0`). On OpenCode v1 stay on `@glaicer/supercode-token-usage-panel@0.1.4`.
+
 ## Install
 
-Install with the OpenCode CLI — it detects the TUI target and registers the plugin in `tui.json` for you:
+Install with the OpenCode CLI — it installs the package and registers the plugin in the global CLI configuration (`~/.config/opencode/cli.json`):
 
 ```bash
-opencode plugin @glaicer/supercode-token-usage-panel
+opencode plugin add @glaicer/supercode-token-usage-panel
 ```
 
-- `--global` installs into the global config (`~/.config/opencode`); default is local (`.opencode` in the current project).
-- `--force` replaces an already-installed version.
-- Restart OpenCode after installing.
+Restart OpenCode after installing.
+
+> [!IMPORTANT]
+> **The first OpenCode load after installing this plugin may be slow.** That's OpenCode downloading the plugin's packages and managed tools into its cache — it happens once. Every subsequent start is fast.
 
-Manual install also works: add the package to the `plugin` array in `tui.json` (global `~/.config/opencode/tui.json` or local `<project>/.opencode/tui.json`):
+Manual install also works: add the package to the `plugins` array in `~/.config/opencode/cli.json`:
 
 ```jsonc
 {
-  "plugin": ["@glaicer/supercode-token-usage-panel"]
+  "plugins": ["@glaicer/supercode-token-usage-panel"]
 }
 ```
 
-> [!IMPORTANT]
-> **The first OpenCode load after installing this plugin may be slow.** That's OpenCode downloading the plugin's packages and managed tools into its cache — it happens once. Every subsequent start is fast.
-
 ## Development
 
 ```bash

package/dist/usage-model.js

@@ -4,6 +4,11 @@
  * Reads OpenCode's authoritative session aggregate and family message history,
  * folds completed steps/speed/TTFT, and estimates the current visible stream from
  * deltas. Exposes only ready-to-render rows plus a state flag.
+ *
+ * OpenCode v2 shape: one assistant message = one model step, so per-step tokens
+ * live on `message.tokens` (there are no `step-finish` parts). `time.streamed`
+ * marks the end of the provider stream; first output comes from content-start
+ * events or the timestamp of the first reasoning/tool content item.
  */
 
 export const USAGE_SECTION_TITLE = "Token Usage";
@@ -18,6 +23,13 @@ export const USAGE_STATUS_TEXT = {
 
 /** Placeholder for missing values: never render NaN/Infinity as a number. */
 export const USAGE_DASH = "–";
+
+/**
+ * The slice of the TUI plugin context the model reads. The panel passes the
+ * real `Plugin.Context` (typecheck at the call site keeps this slice honest);
+ * tests fake exactly this surface.
+ */
+
 function emptyMetrics() {
   return {
     generated: 0,
@@ -34,17 +46,20 @@ function allZero(totals) {
 function safe(value) {
   return Number.isFinite(value) ? Math.max(0, value ?? 0) : 0;
 }
-function totalsFromSession(session) {
-  if (!session?.tokens) return undefined;
+function totalsFromUsage(tokens, cost) {
   return {
-    input: safe(session.tokens.input),
-    output: safe(session.tokens.output),
-    reasoning: safe(session.tokens.reasoning),
-    cacheRead: safe(session.tokens.cache.read),
-    cacheWrite: safe(session.tokens.cache.write),
-    cost: safe(session.cost)
+    input: safe(tokens?.input),
+    output: safe(tokens?.output),
+    reasoning: safe(tokens?.reasoning),
+    cacheRead: safe(tokens?.cache.read),
+    cacheWrite: safe(tokens?.cache.write),
+    cost: safe(cost)
   };
 }
+function totalsFromSession(session) {
+  if (!session?.tokens) return undefined;
+  return totalsFromUsage(session.tokens, session.cost);
+}
 function groupDigits(value) {
   return String(Math.trunc(value)).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
@@ -115,7 +130,7 @@ function buildUsageRows(totals, metrics) {
   }];
 }
 function formatLiveSpeed(live) {
-  if (!live.hasTicked) return `${USAGE_DASH}`;
+  if (!live.hasTicked) return USAGE_DASH;
   const elapsed = (live.now - live.startedAt) / 1_000;
   const value = live.displayedChars / live.charsPerToken / elapsed;
   const rounded = Math.round(value);
@@ -138,7 +153,7 @@ function codePoints(value) {
   return Array.from(value).length;
 }
 function modelKey(message) {
-  return JSON.stringify([message.providerID, message.modelID]);
+  return JSON.stringify([message.model.providerID, message.model.id]);
 }
 function addCalibration(calibrations, key, chars, tokens) {
   if (!positive(chars) || !positive(tokens)) return;
@@ -158,56 +173,41 @@ function addTotals(target, source) {
   target.cacheWrite += source.cacheWrite;
   target.cost += source.cost;
 }
-function completedMetrics(messages) {
+
+/** Minimal identity of a session announced by an event; totals arrive via fetch. */
+
+/** A step is finished once its tokens or completion time is recorded. */
+function finishedStep(message) {
+  return message.tokens !== undefined || message.time.completed !== undefined;
+}
+function completedMetrics(messages, firstOutputs) {
   const result = emptyMetrics();
-  for (const {
-    info,
-    parts
-  } of messages) {
-    if (info.role !== "assistant") continue;
-    for (const part of parts) {
-      if (part.type === "step-finish") result.steps++;
-    }
-    const message = info;
-    if (!positive(message.time.completed ?? 0)) continue;
+  for (const info of messages) {
+    if (info.type !== "assistant") continue;
+    if (finishedStep(info)) result.steps++;
+    if (!positive(info.time.completed ?? 0)) continue;
     let stepChars = 0;
     let stepHasTool = false;
-    for (const part of parts) {
-      if (part.type === "text" || part.type === "reasoning") {
-        if (positive(part.time?.end ?? 0)) stepChars += codePoints(part.text);
-        continue;
-      }
-      if (part.type === "tool") {
-        stepHasTool = true;
+    for (const item of info.content) {
+      if (item.type === "text" || item.type === "reasoning") {
+        stepChars += codePoints(item.text);
         continue;
       }
-      if (part.type !== "step-finish") continue;
-      const tokens = part.tokens.output + part.tokens.reasoning;
-      if (!stepHasTool) addCalibration(result.calibrations, modelKey(message), stepChars, tokens);
-      stepChars = 0;
-      stepHasTool = false;
+      if (item.type === "tool") stepHasTool = true;
     }
-    const visibleStarts = parts.flatMap(part => {
-      if (part.type !== "text" && part.type !== "reasoning") return [];
-      if (!part.time || !positive(part.time.start) || !positive(part.time.end ?? 0)) return [];
-      return [part.time.start];
-    });
-    if (visibleStarts.length === 0) continue;
-    const firstVisibleAt = Math.min(...visibleStarts);
-    const ttft = firstVisibleAt - message.time.created;
-    if (!positive(ttft)) continue;
+    if (info.tokens && !stepHasTool) {
+      addCalibration(result.calibrations, modelKey(info), stepChars, info.tokens.output + info.tokens.reasoning);
+    }
+    const streamed = info.time.streamed;
+    if (!positive(streamed ?? 0)) continue;
+    const head = info.content[0];
+    const first = firstOutputs.get(info.id) ?? (head && head.type !== "text" ? head.time?.created : undefined);
+    if (first === undefined || first < info.time.created || first > streamed) continue;
+    const ttft = first - info.time.created;
     result.ttftMs += ttft;
     result.ttftCount++;
-    const generated = parts.reduce((sum, part) => {
-      if (part.type !== "step-finish") return sum;
-      return sum + part.tokens.output + part.tokens.reasoning;
-    }, 0);
-    const tools = parts.reduce((sum, part) => {
-      if (part.type !== "tool" || part.state.status !== "completed") return sum;
-      const duration = part.state.time.end - part.state.time.start;
-      return positive(duration) ? sum + duration : sum;
-    }, 0);
-    const decode = message.time.completed - message.time.created - ttft - tools;
+    const generated = info.tokens ? info.tokens.output + info.tokens.reasoning : 0;
+    const decode = streamed - first;
     if (!positive(generated) || !positive(decode)) continue;
     result.generated += generated;
     result.decodeMs += decode;
@@ -259,15 +259,25 @@ function aggregateContributions(contributions, incompleteBranches = new Set(), v
     incompleteBranches
   };
 }
-async function fetchContribution(client, session) {
+async function listAllMessages(client, sessionID) {
+  const collected = [];
+  let cursor;
+  do {
+    const page = await client.message.list({
+      sessionID,
+      ...(cursor ? {
+        cursor
+      } : {})
+    });
+    collected.push(...page.data);
+    cursor = page.cursor?.next ?? undefined;
+  } while (cursor);
+  return collected.sort((a, b) => (a.time.created ?? 0) - (b.time.created ?? 0));
+}
+async function fetchContribution(client, session, firstOutputs) {
   let metrics = emptyMetrics();
   try {
-    const messages = (await client.session.messages({
-      sessionID: session.id
-    }, {
-      throwOnError: true
-    })).data;
-    metrics = completedMetrics(messages);
+    metrics = completedMetrics(await listAllMessages(client, session.id), firstOutputs);
   } catch {
     // Totals stay usable when diagnostic history cannot be read.
   }
@@ -279,7 +289,7 @@ async function fetchContribution(client, session) {
     } : {})
   };
 }
-async function fetchBranch(client, root) {
+async function fetchBranch(client, root, firstOutputs) {
   const contributions = new Map();
   const incompleteBranches = new Set();
   const queue = [root];
@@ -288,12 +298,10 @@ async function fetchBranch(client, root) {
     const session = queue.shift();
     if (visited.has(session.id)) continue;
     visited.add(session.id);
-    contributions.set(session.id, await fetchContribution(client, session));
+    contributions.set(session.id, await fetchContribution(client, session, firstOutputs));
     try {
-      const children = (await client.session.children({
-        sessionID: session.id
-      }, {
-        throwOnError: true
+      const children = (await client.session.list({
+        parentID: session.id
       })).data;
       for (const child of children) {
         if (child && !visited.has(child.id)) queue.push(child);
@@ -322,29 +330,25 @@ function belongsToBranch(sessionID, rootID, contributions) {
 }
 
 /**
- * Totals cover the current session plus all of its descendants (subagents).
- * The walk counts each session once and keeps resolved aggregates when a
- * branch fails to resolve.
+ * Totals cover the whole family resolved from the root: the root session plus
+ * all descendants (subagents). The walk counts each session once and keeps
+ * resolved aggregates when a branch fails to resolve.
  */
-async function fetchFamily(client, sessionID) {
-  let root = (await client.session.get({
+async function fetchFamily(client, sessionID, firstOutputs) {
+  let root = await client.session.get({
     sessionID
-  }, {
-    throwOnError: true
-  })).data;
+  });
   if (!root) throw new Error("session unavailable");
   const ancestors = new Set([root.id]);
   while (root.parentID && !ancestors.has(root.parentID)) {
     ancestors.add(root.parentID);
-    const parent = (await client.session.get({
+    const parent = await client.session.get({
       sessionID: root.parentID
-    }, {
-      throwOnError: true
-    })).data;
+    });
     if (!parent) throw new Error("parent session unavailable");
     root = parent;
   }
-  return fetchBranch(client, root);
+  return fetchBranch(client, root, firstOutputs);
 }
 
 /**
@@ -359,9 +363,9 @@ async function fetchFamily(client, sessionID) {
  */
 
 /**
- * Usage Model over OpenCode's session aggregate. Totals cover the current
- * session plus all of its descendants (subagents); request sequencing keeps
- * slower responses from overwriting newer ones.
+ * Usage Model over OpenCode's session aggregate. Totals cover the whole family
+ * resolved from the root (the session plus all subagent descendants); request
+ * sequencing keeps slower responses from overwriting newer ones.
  */
 export function createUsageModel(api, sessionId, solid) {
   const [remote, setRemote] = solid.createSignal();
@@ -375,10 +379,15 @@ export function createUsageModel(api, sessionId, solid) {
   const contributionRevisions = new Map();
   const pendingBranches = new Map();
   const failedMembers = new Set();
+  /** Parent links announced by events, for contributions created before any fetch lands. */
+  const parents = new Map();
   /** Deleted session ids; a full refresh must never resurrect their totals. */
   const tombstones = new Set();
+  /** Content items whose stream already ended; stale deltas must not restart them. */
+  const endedParts = new Set();
+  const firstOutputs = new Map();
   let timer;
-  let ttftTurns = new Set();
+  let ttftTurnShown = false;
   let members = new Set();
   const isAttachable = session => !!session.parentID && members.has(session.parentID) && !members.has(session.id);
   const captureFreshness = () => ({
@@ -396,6 +405,9 @@ export function createUsageModel(api, sessionId, solid) {
   const publishFamily = (sessionID, contributions, incompleteBranches) => {
     const aggregate = aggregateContributions(contributions, incompleteBranches, sessionID);
     members = aggregate.members;
+    for (const [id, contribution] of contributions) {
+      if (contribution.parentID) parents.set(id, contribution.parentID);
+    }
     return {
       sessionID,
       totals: aggregate.totals,
@@ -442,16 +454,37 @@ export function createUsageModel(api, sessionId, solid) {
     if (timer) clearInterval(timer);
     timer = undefined;
   };
-  const completedTurns = sessionID => {
-    const turns = new Set();
+
+  /**
+   * Live TTFT belongs to the first assistant step of a turn only; later steps
+   * follow tool calls and would report tool latency as "time to first token".
+   * A turn is the run of assistant messages after the last non-assistant
+   * message; it is already spoken for when any of its steps finished. When the
+   * panel mounts mid-first-step the seeded measurement keeps the elapsed time
+   * visible from the step's start.
+   */
+  const scanTurnState = sessionID => {
     try {
-      for (const message of api.state.session.messages(sessionID)) {
-        if (message.role !== "assistant") continue;
-        const hasFinishedStep = api.state.part(message.id).some(part => part.type === "step-finish");
-        if (message.time.completed !== undefined || hasFinishedStep) turns.add(message.parentID);
+      const messages = api.data.session.message.list(sessionID);
+      const run = [];
+      for (let index = messages.length - 1; index >= 0; index--) {
+        const message = messages[index];
+        if (!message || message.type !== "assistant") break;
+        run.unshift(message);
       }
-    } catch {}
-    return turns;
+      const shown = run.some(finishedStep);
+      const seed = !shown ? run[0] : undefined;
+      return {
+        shown,
+        ...(seed ? {
+          seed
+        } : {})
+      };
+    } catch {
+      return {
+        shown: false
+      };
+    }
   };
   const refresh = sessionID => {
     const freshness = {
@@ -459,7 +492,7 @@ export function createUsageModel(api, sessionId, solid) {
       sessionID,
       startRevision: appliedRevision
     };
-    void fetchFamily(api.client, sessionID).then(family => {
+    void fetchFamily(api.client, sessionID, firstOutputs).then(family => {
       if (!isFresh(freshness)) return;
       setRemote(previous => {
         const contributions = new Map(family.contributions);
@@ -496,7 +529,7 @@ export function createUsageModel(api, sessionId, solid) {
           }
           if (!isAttachable(session)) continue;
           deferred.splice(i, 1);
-          refreshBranch(session, true);
+          refreshBranch(session.id, true);
           progressed = true;
         }
       }
@@ -523,9 +556,21 @@ export function createUsageModel(api, sessionId, solid) {
     pendingBranches.clear();
     failedMembers.clear();
     tombstones.clear();
+    endedParts.clear();
+    firstOutputs.clear();
     setRemote(undefined);
     solid.untrack(() => {
-      ttftTurns = completedTurns(sessionID);
+      const turn = scanTurnState(sessionID);
+      ttftTurnShown = turn.shown;
+      if (turn.seed) {
+        ttftTurnShown = true;
+        setLiveTtft({
+          messageID: turn.seed.id,
+          createdAt: turn.seed.time.created,
+          now: Date.now()
+        });
+        ensureTimer();
+      }
       refresh(sessionID);
     });
   });
@@ -547,13 +592,9 @@ export function createUsageModel(api, sessionId, solid) {
     memberRequests.set(memberID, memberRequest);
     void api.client.session.get({
       sessionID: memberID
-    }, {
-      throwOnError: true
-    }).then(({
-      data
-    }) => {
+    }).then(data => {
       if (!data) throw new Error("session unavailable");
-      return fetchContribution(api.client, data);
+      return fetchContribution(api.client, data, firstOutputs);
     }).then(contribution => {
       if (memberRequests.get(memberID) !== memberRequest) return;
       mergeContributions(new Map([[memberID, contribution]]), freshness);
@@ -563,20 +604,25 @@ export function createUsageModel(api, sessionId, solid) {
       failedMembers.add(memberID);
     });
   };
-  const refreshBranch = (session, isNew) => {
-    if (isNew) members = new Set([...members, session.id]);
+  const refreshBranch = (branchID, isNew) => {
+    if (isNew) members = new Set([...members, branchID]);
     const freshness = captureFreshness();
     const branchRequest = ++nextAsyncRequest;
-    branchRequests.set(session.id, branchRequest);
-    void fetchBranch(api.client, session).then(branch => {
+    branchRequests.set(branchID, branchRequest);
+    void api.client.session.get({
+      sessionID: branchID
+    }).then(root => {
+      if (!root) throw new Error("session unavailable");
+      return fetchBranch(api.client, root, firstOutputs);
+    }).then(branch => {
       setRemote(previous => {
-        if (!isCurrent(previous, freshness) || branchRequests.get(session.id) !== branchRequest || !previous.contributions) {
+        if (!isCurrent(previous, freshness) || branchRequests.get(branchID) !== branchRequest || !previous.contributions) {
           return previous;
         }
         const contributions = new Map(previous.contributions);
         const changedIds = new Set();
         for (const id of previous.contributions.keys()) {
-          if (belongsToBranch(id, session.id, previous.contributions) && !branch.contributions.has(id) && !belongsToIncompleteBranch(id, branch.incompleteBranches, previous.contributions) && !hasNewerIncremental(id, freshness)) {
+          if (belongsToBranch(id, branchID, previous.contributions) && !branch.contributions.has(id) && !belongsToIncompleteBranch(id, branch.incompleteBranches, previous.contributions) && !hasNewerIncremental(id, freshness)) {
             contributions.delete(id);
             changedIds.add(id);
           }
@@ -589,7 +635,7 @@ export function createUsageModel(api, sessionId, solid) {
         }
         const incompleteBranches = new Set(previous.incompleteBranches);
         for (const id of incompleteBranches) {
-          if (belongsToBranch(id, session.id, previous.contributions)) {
+          if (belongsToBranch(id, branchID, previous.contributions)) {
             incompleteBranches.delete(id);
           }
         }
@@ -599,20 +645,12 @@ export function createUsageModel(api, sessionId, solid) {
         return publishFamily(freshness.sessionID, contributions, incompleteBranches);
       });
     }).catch(() => {
-      if (isNew) members = new Set([...members].filter(id => id !== session.id));
+      if (isNew) members = new Set([...members].filter(id => id !== branchID));
     });
   };
   const retryIncompleteBranches = () => {
-    for (const sessionID of remote()?.incompleteBranches ?? []) {
-      void api.client.session.get({
-        sessionID
-      }, {
-        throwOnError: true
-      }).then(({
-        data
-      }) => {
-        if (data) refreshBranch(data, false);
-      }).catch(() => {});
+    for (const branchID of remote()?.incompleteBranches ?? []) {
+      refreshBranch(branchID, false);
     }
     for (const memberID of failedMembers) {
       if (!members.has(memberID)) {
@@ -623,6 +661,7 @@ export function createUsageModel(api, sessionId, solid) {
     }
   };
   const addBranch = session => {
+    if (session.parentID) parents.set(session.id, session.parentID);
     if (members.has(session.id)) return;
     if (!session.parentID) return;
     if (!remote()?.contributions) {
@@ -631,13 +670,18 @@ export function createUsageModel(api, sessionId, solid) {
       return;
     }
     if (!isAttachable(session)) return;
-    refreshBranch(session, true);
+    refreshBranch(session.id, true);
   };
-  const offSessionCreated = api.event.on("session.created", event => {
-    addBranch(event.properties.info);
+  const offSessionCreated = api.data.on("session.created", event => {
+    addBranch({
+      id: event.data.sessionID,
+      ...(event.data.parentID ? {
+        parentID: event.data.parentID
+      } : {})
+    });
   });
-  const offSessionDeleted = api.event.on("session.deleted", event => {
-    const deletedID = event.properties.sessionID;
+  const offSessionDeleted = api.data.on("session.deleted", event => {
+    const deletedID = event.data.sessionID;
     const tracked = deletedID === sessionId() || members.has(deletedID) || pendingBranches.has(deletedID);
     const pruned = new Set([deletedID]);
     let expanded = true;
@@ -672,103 +716,122 @@ export function createUsageModel(api, sessionId, solid) {
       refresh(sessionId());
     }
   });
-  const offPartUpdated = api.event.on("message.part.updated", event => {
-    const part = event.properties.part;
-    if (part.sessionID === sessionId() && (part.type === "text" || part.type === "reasoning") && part.time?.end !== undefined && liveSpeed()?.partID === part.id) {
-      clearLiveSpeed();
-    }
-    if (event.properties.part.type === "step-finish") {
-      if (event.properties.part.sessionID === sessionId() && liveTtft()?.messageID === event.properties.part.messageID) {
-        clearLiveTtft();
-      }
-      if (event.properties.part.sessionID === sessionId()) {
-        const message = api.state.session.messages(sessionId()).find(candidate => candidate.id === event.properties.part.messageID);
-        if (message?.role === "assistant") ttftTurns.add(message.parentID);
-      }
-      refreshMember(event.properties.part.sessionID);
-      retryIncompleteBranches();
-    }
+  const offUsageUpdated = api.data.on("session.usage.updated", event => {
+    const {
+      sessionID,
+      cost,
+      tokens
+    } = event.data;
+    if (pendingBranches.has(sessionID)) return;
+    if (!members.has(sessionID)) return;
+    const freshness = captureFreshness();
+    setRemote(previous => {
+      if (!isCurrent(previous, freshness) || !previous.contributions) return previous;
+      const prior = previous.contributions.get(sessionID);
+      const parentID = prior?.parentID ?? parents.get(sessionID);
+      const contributions = new Map(previous.contributions);
+      contributions.set(sessionID, {
+        ...(prior ?? {
+          metrics: emptyMetrics()
+        }),
+        totals: totalsFromUsage(tokens, cost),
+        ...(parentID ? {
+          parentID
+        } : {})
+      });
+      markRevised([sessionID]);
+      failedMembers.delete(sessionID);
+      return publishFamily(freshness.sessionID, contributions, previous.incompleteBranches);
+    });
+    retryIncompleteBranches();
   });
-  const offPartRemoved = api.event.on("message.part.removed", event => {
-    if (event.properties.sessionID === sessionId()) clearProvisional();
-    if (members.has(event.properties.sessionID)) refresh(sessionId());
+  const offStepStarted = api.data.on("session.step.started", event => {
+    const {
+      sessionID,
+      assistantMessageID,
+      started
+    } = event.data;
+    if (members.has(sessionID)) firstOutputs.delete(assistantMessageID);
+    if (sessionID !== sessionId()) return;
+    if (ttftTurnShown) return;
+    ttftTurnShown = true;
+    setLiveTtft({
+      messageID: assistantMessageID,
+      createdAt: started,
+      now: Date.now()
+    });
+    ensureTimer();
   });
-  const offMessageRemoved = api.event.on("message.removed", event => {
-    if (event.properties.sessionID === sessionId()) clearProvisional();
-    if (members.has(event.properties.sessionID)) refresh(sessionId());
+  const offExecutionStarted = api.data.on("session.execution.started", event => {
+    if (event.data.sessionID !== sessionId()) return;
+    ttftTurnShown = false;
   });
-  const offSessionUpdated = api.event.on("session.updated", event => {
-    if (pendingBranches.has(event.properties.info.id)) {
-      pendingBranches.set(event.properties.info.id, event.properties.info);
-      return;
-    }
-    if (members.has(event.properties.info.id)) {
-      refreshMember(event.properties.info.id);
-      retryIncompleteBranches();
-      return;
-    }
-    addBranch(event.properties.info);
+  const offStepStreamed = api.data.on("session.step.streamed", event => {
+    const {
+      sessionID,
+      assistantMessageID
+    } = event.data;
+    if (sessionID !== sessionId()) return;
+    if (liveTtft()?.messageID === assistantMessageID) clearLiveTtft();
   });
-  const offMessageUpdated = api.event.on("message.updated", event => {
-    const message = event.properties.info;
-    if (!members.has(event.properties.sessionID) || message.role !== "assistant") return;
-    if (event.properties.sessionID !== sessionId()) {
-      if (message.time.completed !== undefined) {
-        refreshMember(event.properties.sessionID);
-        retryIncompleteBranches();
-      }
-      return;
-    }
-    if (message.time.completed !== undefined) {
-      ttftTurns.add(message.parentID);
-      if (liveTtft()?.messageID === message.id) clearLiveTtft();
-      refreshMember(event.properties.sessionID);
-      return;
+  const onOutputStarted = event => {
+    const {
+      sessionID,
+      assistantMessageID
+    } = event.data;
+    if (!members.has(sessionID)) return;
+    if (!firstOutputs.has(assistantMessageID)) firstOutputs.set(assistantMessageID, event.created);
+    if (sessionID === sessionId() && liveTtft()?.messageID === assistantMessageID) clearLiveTtft();
+  };
+  const offTextStarted = api.data.on("session.text.started", onOutputStarted);
+  const offReasoningStarted = api.data.on("session.reasoning.started", onOutputStarted);
+  const offToolInputStarted = api.data.on("session.tool.input.started", onOutputStarted);
+  const onStepSettled = (sessionID, assistantMessageID) => {
+    if (sessionID === sessionId()) {
+      if (liveTtft()?.messageID === assistantMessageID) clearLiveTtft();
+      ttftTurnShown = true;
     }
-    if (ttftTurns.has(message.parentID)) return;
-    ttftTurns.add(message.parentID);
-    const now = Date.now();
-    setLiveTtft({
-      messageID: message.id,
-      createdAt: message.time.created,
-      now
-    });
-    ensureTimer();
+    refreshMember(sessionID);
+    retryIncompleteBranches();
+  };
+  const offStepEnded = api.data.on("session.step.ended", event => {
+    onStepSettled(event.data.sessionID, event.data.assistantMessageID);
+  });
+  const offStepFailed = api.data.on("session.step.failed", event => {
+    onStepSettled(event.data.sessionID, event.data.assistantMessageID);
   });
-  const offPartDelta = api.event.on("message.part.delta", event => {
+  const onStreamDelta = (kind, stream) => {
     const {
       sessionID,
-      messageID,
-      partID,
-      field,
+      assistantMessageID,
+      ordinal,
       delta
-    } = event.properties;
-    if (sessionID !== sessionId() || field !== "text") return;
-    let part;
+    } = stream;
+    if (sessionID !== sessionId()) return;
+    const partKey = `${kind}:${assistantMessageID}:${ordinal}`;
+    if (endedParts.has(partKey)) return;
     let message;
     try {
-      part = api.state.part(messageID).find(candidate => candidate.id === partID);
-      message = api.state.session.messages(sessionID).find(candidate => candidate.id === messageID);
+      message = api.data.session.message.list(sessionID).find(candidate => candidate.id === assistantMessageID);
     } catch {
       return;
     }
-    if (part?.type !== "text" && part?.type !== "reasoning" || part.time?.end !== undefined || message?.role !== "assistant") {
-      return;
-    }
+    if (message?.type !== "assistant" || message.time.completed !== undefined) return;
+    const streaming = message;
     const now = Date.now();
     const chars = codePoints(delta);
     setLiveSpeed(current => {
-      if (current?.partID === partID && current.messageID === messageID) {
+      if (current?.partKey === partKey) {
         return {
           ...current,
           chars: current.chars + chars
         };
       }
-      const calibration = remote()?.metrics?.calibrations.get(modelKey(message));
+      const calibration = remote()?.metrics?.calibrations.get(modelKey(streaming));
       const charsPerToken = (400 + (calibration?.chars ?? 0)) / (100 + (calibration?.tokens ?? 0));
       return {
-        messageID,
-        partID,
+        messageID: assistantMessageID,
+        partKey,
         startedAt: now,
         now,
         chars,
@@ -777,32 +840,67 @@ export function createUsageModel(api, sessionId, solid) {
         hasTicked: false
       };
     });
-    if (liveTtft()?.messageID === messageID) clearLiveTtft();
+    if (liveTtft()?.messageID === assistantMessageID) clearLiveTtft();
     ensureTimer();
+  };
+  const offTextDelta = api.data.on("session.text.delta", event => {
+    onStreamDelta("text", event.data);
+  });
+  const offReasoningDelta = api.data.on("session.reasoning.delta", event => {
+    onStreamDelta("reasoning", event.data);
+  });
+  const onStreamEnded = (kind, end) => {
+    const {
+      sessionID,
+      assistantMessageID,
+      ordinal
+    } = end;
+    if (sessionID !== sessionId()) return;
+    const partKey = `${kind}:${assistantMessageID}:${ordinal}`;
+    endedParts.add(partKey);
+    if (liveSpeed()?.partKey === partKey) clearLiveSpeed();
+  };
+  const offTextEnded = api.data.on("session.text.ended", event => {
+    onStreamEnded("text", event.data);
+  });
+  const offReasoningEnded = api.data.on("session.reasoning.ended", event => {
+    onStreamEnded("reasoning", event.data);
+  });
+  const offContentUpdated = api.data.on("session.revert.committed", event => {
+    if (event.data.sessionID === sessionId()) clearProvisional();
+    if (members.has(event.data.sessionID)) refresh(sessionId());
   });
-  const offServerConnected = api.event.on("server.connected", () => {
+  const offServerConnected = api.data.on("server.connected", () => {
     clearProvisional();
     refresh(sessionId());
   });
-  const offSessionError = api.event.on("session.error", event => {
-    if (!event.properties.sessionID || event.properties.sessionID === sessionId()) clearProvisional();
+  const offExecutionFailed = api.data.on("session.execution.failed", event => {
+    if (!event.data.sessionID || event.data.sessionID === sessionId()) clearProvisional();
   });
-  const offSessionIdle = api.event.on("session.idle", event => {
-    if (event.properties.sessionID === sessionId()) clearProvisional();
+  const offSessionIdle = api.data.on("session.idle", event => {
+    if (event.data.sessionID === sessionId()) clearProvisional();
   });
   solid.onCleanup(() => {
     request++;
     clearProvisional();
     offSessionCreated();
     offSessionDeleted();
-    offPartUpdated();
-    offPartRemoved();
-    offMessageRemoved();
-    offSessionUpdated();
-    offMessageUpdated();
-    offPartDelta();
+    offUsageUpdated();
+    offStepStarted();
+    offExecutionStarted();
+    offStepStreamed();
+    offTextStarted();
+    offReasoningStarted();
+    offToolInputStarted();
+    offStepEnded();
+    offStepFailed();
+    offTextDelta();
+    offReasoningDelta();
+    offTextEnded();
+    offReasoningEnded();
+    offContentUpdated();
     offServerConnected();
-    offSessionError();
+    offExecutionFailed();
     offSessionIdle();
   });
   const snapshot = solid.createMemo(() => {
@@ -819,7 +917,7 @@ export function createUsageModel(api, sessionId, solid) {
           hasDescendants: false
         };
       }
-      const totals = loaded?.sessionID === sessionID && loaded.totals ? loaded.totals : totalsFromSession(api.state.session.get(sessionID));
+      const totals = loaded?.sessionID === sessionID && loaded.totals ? loaded.totals : totalsFromSession(api.data.session.get(sessionID));
       const hasDescendants = loaded?.sessionID === sessionID ? loaded.hasDescendants : false;
       if (!totals) {
         const speed = liveSpeed();

package/dist/usage-panel.js

@@ -22,6 +22,7 @@ import { createElement as _$createElement } from "@opentui/solid";
  */
 /** @jsxImportSource @opentui/solid */
 import { createEffect, createMemo, createSignal, For, onCleanup, Show, untrack } from "solid-js";
+import { Plugin } from "@opencode/plugin/tui";
 import { USAGE_SECTION_TITLE, USAGE_SECTION_TITLE_WITH_SUBAGENTS, USAGE_STATUS_TEXT, createUsageModel } from "./usage-model.js";
 
 /**
@@ -38,9 +39,9 @@ const solid = {
   untrack
 };
 function Section(props) {
-  const theme = () => props.api.theme.current;
+  const theme = () => props.context.theme;
   const [collapsed, setCollapsed] = createSignal(false);
-  const model = createUsageModel(props.api, () => props.session_id, solid);
+  const model = createUsageModel(props.context, () => props.sessionID, solid);
   return (() => {
     var _el$ = _$createElement("box"),
       _el$2 = _$createElement("box"),
@@ -68,7 +69,7 @@ function Section(props) {
           get children() {
             var _el$6 = _$createElement("text");
             _$insert(_el$6, () => USAGE_STATUS_TEXT[model.status()]);
-            _$effect(_$p => _$setProp(_el$6, "fg", theme().textMuted, _$p));
+            _$effect(_$p => _$setProp(_el$6, "fg", theme().text.muted, _$p));
             return _el$6;
           }
         }), _$createComponent(For, {
@@ -86,8 +87,8 @@ function Section(props) {
             _$insert(_el$8, () => row.label);
             _$insert(_el$9, () => row.value);
             _$effect(_p$ => {
-              var _v$3 = theme().textMuted,
-                _v$4 = theme().text;
+              var _v$3 = theme().text.muted,
+                _v$4 = theme().text.base;
               _v$3 !== _p$.e && (_p$.e = _$setProp(_el$8, "fg", _v$3, _p$.e));
               _v$4 !== _p$.t && (_p$.t = _$setProp(_el$9, "fg", _v$4, _p$.t));
               return _p$;
@@ -101,8 +102,8 @@ function Section(props) {
       }
     }), null);
     _$effect(_p$ => {
-      var _v$ = theme().text,
-        _v$2 = theme().text;
+      var _v$ = theme().text.base,
+        _v$2 = theme().text.base;
       _v$ !== _p$.e && (_p$.e = _$setProp(_el$3, "fg", _v$, _p$.e));
       _v$2 !== _p$.t && (_p$.t = _$setProp(_el$4, "fg", _v$2, _p$.t));
       return _p$;
@@ -113,25 +114,21 @@ function Section(props) {
     return _el$;
   })();
 }
-const tui = async api => {
-  // Order 150: internal sidebar sections sit at 100/200/300/400/500, so this
-  // lands right after the first block without moving any existing section.
-  api.slots.register({
-    order: 150,
-    slots: {
-      sidebar_content(_ctx, props) {
-        return _$createComponent(Section, {
-          api: api,
-          get session_id() {
-            return props.session_id;
-          }
-        });
-      }
-    }
-  });
-};
-const plugin = {
+export default Plugin.define({
   id: "supercode.token-usage",
-  tui
-};
-export default plugin;
+  setup(context) {
+    // `after`, not `append`: a replace takeover of this path (e.g.
+    // context-progress-bar's hideMcp) suppresses every append/prepend claim
+    // on it, while before/after claims render as siblings around the
+    // boundary. Content still lands below the built-in sidebar sections.
+    context.ui.slot({
+      after: "sidebar.content",
+      render: props => _$createComponent(Section, {
+        context: context,
+        get sessionID() {
+          return props.sessionID;
+        }
+      })
+    });
+  }
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@glaicer/supercode-token-usage-panel",
-  "version": "0.1.4",
+  "version": "1.0.1",
   "description": "OpenCode TUI sidebar section: cumulative token usage and cost of the current session family.",
   "type": "module",
   "license": "MIT",
@@ -37,21 +37,26 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opencode-ai/plugin": ">=1.18.21",
-    "@opentui/core": ">=0.4.5",
-    "@opentui/solid": ">=0.4.5",
-    "solid-js": "1.9.12"
+    "@opencode/plugin": ">=2.0.16"
+  },
+  "peerDependencies": {
+    "@opentui/core": ">=0.5.10",
+    "@opentui/solid": ">=0.5.10",
+    "solid-js": ">=1.9.0"
   },
   "devDependencies": {
     "@babel/core": "7.28.0",
     "@babel/preset-typescript": "7.27.1",
-    "@opencode-ai/sdk": "1.18.21",
+    "@opencode/client": "2.0.16",
+    "@opentui/core": "0.5.12",
+    "@opentui/solid": "0.5.12",
     "@types/node": "24.13.3",
     "babel-preset-solid": "1.9.12",
+    "solid-js": "1.9.12",
     "typescript": "5.8.2"
   },
   "engines": {
     "node": ">=24",
-    "opencode": ">=1.18.21"
+    "opencode": ">=2.0.0"
   }
 }