@foae/opencode-timings 0.1.0 → 0.1.2

package/README.md

@@ -11,20 +11,25 @@ context-window pollution**.
 
 ```
 Timing
- API   6m31s  54%
- wall  12m04s
- turns 18 · avg 21s
- slow  1m12s
+api/wall ██████░░ 78%
+api 31s · wall 40s
+turns 4 · avg 8s
+slowest 19s
+per-turn ▄█▂▂
 ```
 
+Every row names itself, so there are no unlabeled numbers or glyphs to decode.
+
 ## Metrics
 
-| Row     | Meaning |
-|---------|---------|
-| `API`   | Total assistant inference time — the sum of `time.completed − time.created` over every completed assistant message — and its share of wall-clock. |
-| `wall`  | Span from the first to the last message timestamp. Includes the time you spend reading/typing between turns, so `API` is always a fraction of it. |
-| `turns` | Number of completed assistant messages, plus the average per-turn duration. |
-| `slow`  | The single slowest assistant message. |
+| Row        | Meaning |
+|------------|---------|
+| `api/wall` | How much of wall-clock was actual model inference, as a bar gauge and percent. |
+| `api`      | Total assistant inference time — the sum of `time.completed − time.created` over every completed assistant message. |
+| `wall`     | Span from the first to the last message timestamp. Includes the time you spend reading/typing between turns, so `api` is always a fraction of it. |
+| `turns`    | Number of completed assistant messages, plus the average per-turn duration. |
+| `slowest`  | The single slowest assistant message. |
+| `per-turn` | Sparkline of each recent turn's duration. |
 
 The panel is always shown; before the first turn its values read zero.
 
@@ -44,7 +49,30 @@ belongs in `tui.json`, not `opencode.json`:
 OpenCode installs the plugin and its dependencies with Bun at startup. Restart
 OpenCode and open the session sidebar to see the `Timing` panel.
 
-You can also pin a version, e.g. `@foae/opencode-timings@0.1.0`.
+You can also pin a version, e.g. `@foae/opencode-timings@0.1.2`.
+
+## Configuration
+
+Pass options using the tuple form (`[spec, options]`) in `tui.json`:
+
+```jsonc
+{
+  "$schema": "https://opencode.ai/tui.json",
+  "plugin": [
+    ["@foae/opencode-timings@latest", {
+      "mode": "fancy",
+      "fields": { "api": true, "wall": true, "turns": true, "avg": true, "slow": true, "sparkline": true }
+    }]
+  ]
+}
+```
+
+| Option   | Values | Default | Meaning |
+|----------|--------|---------|---------|
+| `mode`   | `"fancy"` \| `"simple"` | `"fancy"` | `fancy` draws a bar gauge for the API/wall ratio and a sparkline of recent turn durations; `simple` is plain labeled rows. |
+| `fields` | object of booleans | all `true` | Toggle individual values: `api`, `wall`, `turns`, `avg`, `slow`, `sparkline` (`sparkline` is fancy-only). |
+
+With no options (a plain `"@foae/opencode-timings@latest"` string), it defaults to `fancy` mode with all fields shown.
 
 ## Requirements
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foae/opencode-timings",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "OpenCode TUI sidebar panel showing per-session timing: total API/inference time, wall-clock, turns, average and slowest turn. Zero context-window pollution.",
   "license": "MIT",
   "author": "foae",

package/src/tui.tsx

@@ -7,16 +7,40 @@
  * state. Nothing is injected into the message stream, so there is zero
  * context-window pollution.
  *
+ * Fancy layout — every value names itself, all rows in the muted tone:
+ *
+ *   Timing
+ *   api/wall ███████░ 78%      gauge: how much of wall-clock was model inference
+ *   api 31s · wall 40s          the two raw times behind that ratio
+ *   turns 4 · avg 8s            completed assistant turns and their average
+ *   slowest 19s                 the single slowest turn
+ *   per-turn ▄█▂▂               sparkline of each recent turn's duration
+ *
  * Metrics (per session):
- *   - API    total assistant inference time = sum of (time.completed - time.created)
- *            over every completed assistant message, with its share of wall-clock.
- *   - wall   span from the first to the last message timestamp (includes the time
- *            you spend reading/typing between turns).
- *   - turns  number of completed assistant messages, plus the average duration.
- *   - slow   the single slowest assistant message.
+ *   - api      total assistant inference time = sum of (time.completed - time.created)
+ *              over every completed assistant message.
+ *   - wall     span from the first to the last message timestamp (includes the time
+ *              you spend reading/typing between turns), so api is a fraction of it.
+ *   - api/wall api's share of wall-clock, as a bar gauge and percent.
+ *   - turns    number of completed assistant messages, plus the average duration.
+ *   - slowest  the single slowest assistant message.
+ *   - per-turn sparkline of recent per-turn durations.
+ *
+ * Config — pass options via the tuple form in `tui.json`:
  *
- * Modelled on @slkiser/opencode-quota's sidebar plugin (the reference for the
- * sidebar_content slot mechanism on OpenCode 1.15.x).
+ *   "plugin": [
+ *     ["@foae/opencode-timings@latest", {
+ *       "mode": "fancy",            // "fancy" (default) | "simple"
+ *       "fields": {                  // every field defaults to true
+ *         "api": true, "wall": true, "turns": true,
+ *         "avg": true, "slow": true, "sparkline": true
+ *       }
+ *     }]
+ *   ]
+ *
+ * "fancy" draws a bar gauge for the api/wall ratio and a sparkline of recent
+ * turn durations; "simple" is plain labeled rows. The panel is always shown
+ * (values read zero before the first turn).
  */
 import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@opencode-ai/plugin/tui"
 import type { Message } from "@opencode-ai/sdk/v2"
@@ -32,24 +56,40 @@ const SIDEBAR_ORDER = 155
 // drive updates; this interval is just a low-frequency backstop.
 const REFRESH_INTERVAL_MS = 15_000
 
+// Narrower than the simple-mode rows so the "api/wall" label + gauge + percent
+// fit one sidebar line without wrapping.
+const BAR_WIDTH = 8
+const SPARK_POINTS = 12
+const SPARK_LEVELS = "▁▂▃▄▅▆▇█"
+
+type Mode = "fancy" | "simple"
+type Fields = {
+  api: boolean
+  wall: boolean
+  turns: boolean
+  avg: boolean
+  slow: boolean
+  sparkline: boolean
+}
+const DEFAULT_FIELDS: Fields = { api: true, wall: true, turns: true, avg: true, slow: true, sparkline: true }
+
 type Timing = {
-  ok: boolean
   apiMs: number
   wallMs: number
   turns: number
   avgMs: number
   slowestMs: number
   apiPct: number
+  durations: number[]
 }
-
-const EMPTY: Timing = { ok: false, apiMs: 0, wallMs: 0, turns: 0, avgMs: 0, slowestMs: 0, apiPct: 0 }
+const EMPTY: Timing = { apiMs: 0, wallMs: 0, turns: 0, avgMs: 0, slowestMs: 0, apiPct: 0, durations: [] }
 
 function computeTiming(messages: ReadonlyArray<Message>): Timing {
   let apiMs = 0
-  let turns = 0
   let slowestMs = 0
   let minTs = Number.POSITIVE_INFINITY
   let maxTs = 0
+  const durations: number[] = []
 
   for (const msg of messages) {
     const created = msg.time?.created
@@ -64,23 +104,24 @@ function computeTiming(messages: ReadonlyArray<Message>): Timing {
         const dur = completed - (typeof created === "number" ? created : completed)
         if (dur > 0) {
           apiMs += dur
-          turns += 1
+          durations.push(dur)
           if (dur > slowestMs) slowestMs = dur
         }
       }
     }
   }
 
+  const turns = durations.length
   if (turns === 0) return EMPTY
   const wallMs = minTs === Number.POSITIVE_INFINITY ? 0 : Math.max(0, maxTs - minTs)
   return {
-    ok: true,
     apiMs,
     wallMs,
     turns,
     avgMs: apiMs / turns,
     slowestMs,
     apiPct: wallMs > 0 ? Math.round((apiMs / wallMs) * 100) : 0,
+    durations,
   }
 }
 
@@ -95,7 +136,61 @@ function fmtDuration(ms: number): string {
   return `${hours}h${String(totalMin % 60).padStart(2, "0")}m`
 }
 
-function SidebarTimingView(props: { api: TuiPluginApi; sessionID: string }) {
+function bar(pct: number, width: number): string {
+  const p = Math.max(0, Math.min(100, Number.isFinite(pct) ? pct : 0))
+  const filled = Math.round((p / 100) * width)
+  return "█".repeat(filled) + "░".repeat(Math.max(0, width - filled))
+}
+
+function sparkline(values: number[]): string {
+  if (values.length === 0) return ""
+  const points = values.slice(-SPARK_POINTS)
+  const max = Math.max(...points, 1)
+  return points
+    .map((v) => {
+      const idx = Math.round((v / max) * (SPARK_LEVELS.length - 1))
+      return SPARK_LEVELS[Math.min(SPARK_LEVELS.length - 1, Math.max(0, idx))]
+    })
+    .join("")
+}
+
+function turnsLine(t: Timing, fields: Fields): string {
+  if (fields.turns && fields.avg) return `turns ${t.turns} · avg ${fmtDuration(t.avgMs)}`
+  if (fields.turns) return `turns ${t.turns}`
+  if (fields.avg) return `avg ${fmtDuration(t.avgMs)}`
+  return ""
+}
+
+// Every row is a labeled string in the muted tone — no value relies on the
+// reader inferring what an unlabeled number or glyph means.
+function buildRows(t: Timing, mode: Mode, fields: Fields): string[] {
+  const rows: string[] = []
+  if (mode === "fancy") {
+    if (fields.api) rows.push(`api/wall ${bar(t.apiPct, BAR_WIDTH)} ${t.apiPct}%`)
+    if (fields.wall) rows.push(`api ${fmtDuration(t.apiMs)} · wall ${fmtDuration(t.wallMs)}`)
+    const ta = turnsLine(t, fields)
+    if (ta) rows.push(ta)
+    if (fields.slow) rows.push(`slowest ${fmtDuration(t.slowestMs)}`)
+    if (fields.sparkline) {
+      const spark = sparkline(t.durations)
+      if (spark) rows.push(`per-turn ${spark}`)
+    }
+  } else {
+    if (fields.api) rows.push(`api ${fmtDuration(t.apiMs)} · ${t.apiPct}% of wall`)
+    if (fields.wall) rows.push(`wall ${fmtDuration(t.wallMs)}`)
+    const ta = turnsLine(t, fields)
+    if (ta) rows.push(ta)
+    if (fields.slow) rows.push(`slowest ${fmtDuration(t.slowestMs)}`)
+  }
+  return rows
+}
+
+function SidebarTimingView(props: {
+  api: TuiPluginApi
+  sessionID: string
+  mode: Mode
+  fields: Fields
+}) {
   const read = (): Timing => computeTiming(props.api.state.session.messages(props.sessionID))
   const [timing, setTiming] = createSignal<Timing>(read())
   const refresh = () => setTiming(read())
@@ -126,27 +221,17 @@ function SidebarTimingView(props: { api: TuiPluginApi; sessionID: string }) {
     for (const unsubscribe of unsubscribers) unsubscribe()
   })
 
-  const lines = (): string[] => {
-    const t = timing()
-    return [
-      `API   ${fmtDuration(t.apiMs)}  ${t.apiPct}%`,
-      `wall  ${fmtDuration(t.wallMs)}`,
-      `turns ${t.turns} · avg ${fmtDuration(t.avgMs)}`,
-      `slow  ${fmtDuration(t.slowestMs)}`,
-    ]
-  }
+  const rows = (): string[] => buildRows(timing(), props.mode, props.fields)
 
-  // Always rendered (even before the first turn, showing zeros) so the panel
-  // is a permanent fixture of the sidebar.
   return (
     <box gap={0}>
       <text fg={props.api.theme.current.text}>
         <b>Timing</b>
       </text>
       <box gap={0}>
-        {lines().map((line) => (
+        {rows().map((row) => (
           <text fg={props.api.theme.current.textMuted} wrapMode="none">
-            {line || " "}
+            {row || " "}
           </text>
         ))}
       </box>
@@ -154,12 +239,27 @@ function SidebarTimingView(props: { api: TuiPluginApi; sessionID: string }) {
   )
 }
 
-const tui: TuiPlugin = async (api) => {
+function parseConfig(options: Record<string, unknown> | undefined): { mode: Mode; fields: Fields } {
+  const opts = options ?? {}
+  const mode: Mode = opts.mode === "simple" ? "simple" : "fancy"
+  const fields: Fields = { ...DEFAULT_FIELDS }
+  const raw = opts.fields
+  if (raw && typeof raw === "object") {
+    for (const key of Object.keys(DEFAULT_FIELDS) as (keyof Fields)[]) {
+      const value = (raw as Record<string, unknown>)[key]
+      if (typeof value === "boolean") fields[key] = value
+    }
+  }
+  return { mode, fields }
+}
+
+const tui: TuiPlugin = async (api, options) => {
+  const { mode, fields } = parseConfig(options)
   api.slots.register({
     order: SIDEBAR_ORDER,
     slots: {
       sidebar_content(_ctx, props: { session_id: string }) {
-        return <SidebarTimingView api={api} sessionID={props.session_id} />
+        return <SidebarTimingView api={api} sessionID={props.session_id} mode={mode} fields={fields} />
       },
     },
   })