opencode-context-tree 0.1.1 → 0.2.0

package/docs/USAGE.md

@@ -34,9 +34,10 @@ or `"global"` (OpenCode's state dir); `jumpSummary` `"ask"` (default, Pi behavio
 transcript shows `[Old tool result content cleared]` (reversible by undo, but it touches
 OpenCode storage — off by default); `keybinds` overrides any route key by command name,
 e.g. `{ "keybinds": { "open": "ctrl+t", "up": "k,up", "copy": "none" } }` — names are
-`open up down jump_up jump_down first last prev_branch next_branch fold unfold toggle go
-branch label filter search back crop crop_toggle_mode mark auto undo merge inspector
-consumers copy mode_duration mode_turns mode_calls decisions export help`.
+`open up down jump_up jump_down half_up half_down first last prev_branch next_branch fold
+unfold toggle go branch label filter_pick filter_prev search search_next search_prev back
+crop crop_toggle_mode mark auto undo merge inspector consumers copy mode_duration mode_turns
+mode_calls lanes_off decisions export help`.
 
 ## The loop
 
@@ -50,7 +51,7 @@ consumers copy mode_duration mode_turns mode_calls decisions export help`.
 /tree              see where you are, what it costs, and jump anywhere
 c … space … ⏎      crop a fat tool result (double space for protected ones) → the model
                    sees "[cropped: bash …]" from the next turn; the transcript keeps the text
-x                  undo the last crop / branch / merge on this path
+u                  undo the last crop / branch / merge on this path (alias x)
 ```
 
 `/merge` asks how to close the branch:
@@ -69,26 +70,28 @@ appended to the trunk as a normal message.*
 
 | key | action |
 |---|---|
-| `↑↓` `j k` · `J K` (20) · `g G` | move |
+| `↑↓` `j k` · `J K` (20) · `ctrl+d` `ctrl+u` · `gg` `G` | move · half page · top / bottom |
 | `[` `]` | previous / next branch row |
-| `← →` `h l` `e` | fold / unfold a branch inline |
-| `⏎` | go here: switch to a branch tip, or fork (a user turn = redo with the text pre-filled; a step = continue from there). Asks "Summarize the branch you are leaving?" (Pi) |
+| `← →` `h l` · `Tab` (or `e`) | fold / unfold a branch inline |
+| `⏎` | go here — the footer names what it will do for the row you are on: switch to a `⎇` branch, fork & prefill a user turn, fork after a step. Confirms first, then asks "Summarize the branch you are leaving?" (Pi); `u` undoes it |
 | `b` | branch here: name it, then "Model for this branch" (Enter keeps the current one) |
 | `m` | merge: Squash / Squash without LLM / Discard / Tournament (siblings only) |
-| `c` `space` `a` `t` `⏎` | crop mode: mark, auto-mark (≥10k tokens, older than 2 turns), result⇄turn, apply |
-| `x` | undo |
+| `c` `space` `a` `t` `⏎` | crop mode: mark (`space` alone enters it on a croppable row), auto-mark (≥10k tokens, older than 2 turns), result⇄turn, apply |
+| `u` (`x`) | undo |
 | `D` `E` | decisions panel, export `ctree-decisions.md` |
-| `u` | consumers: what is filling the context |
+| `s` | consumers: what is filling the context (`⏎` opens a bucket, `space` marks one entry for crop) |
 | `i` | inspector pane on/off (auto-hidden under 110 columns) |
-| `1 2 3` | minimap lanes by duration / turns / tool calls |
+| `1 2 3` `0` | timeline lanes by duration / turns / tool calls; `0` off |
 | `L` | label the selected message |
-| `f` `/` | filter cycle (default → no-tools → user-only → labeled → all), search |
-| `y` | save the selected text to `.opencode/context-tree/last-copy.txt` |
-| `?` | help overlay: how to read the screen + every key (`?` or `esc` closes) |
-| `q` `esc` | back (esc leaves crop mode / panels first) |
+| `f` `F` | filter picker (default → no-tools → user-only → labeled → all); `F` steps back |
+| `/` `n` `N` | live search: typing re-filters the rows, `⏎` keeps the filter, `esc` clears; `n` `N` next / previous match |
+| `y` | copy the selected text — the terminal's clipboard when it allows it, else `.opencode/context-tree/last-copy.txt` |
+| `?` | help pane under the tree: how to read the screen + every key (`?` or `esc` closes) |
+| `q` `esc` | back (esc leaves crop mode / a panel / a search first) |
 
-The footer only lists the six you need — `⏎ go  b branch  m merge  c crop  x undo  ? help
-q back`; the rest live behind `?`.
+The footer follows the panel and the row under the cursor — on the tree `⏎ fork & prefill
+this turn  b branch  m merge  c crop  u undo  s consumers  ? help  q back`; the rest live
+behind `?`.
 
 Palette: **Context tree**, **Branch here**, **Merge branch**, **Decisions**, **Label this point**.
 `ctrl+q` opens the tree.
@@ -96,8 +99,8 @@ Palette: **Context tree**, **Branch here**, **Merge branch**, **Decisions**, **L
 ## Reading the screen
 
 ```
-┌ Context tree · Fix flaky test · trunk                        ctx ~46k/200k · filling
-│ filter: default 24 rows
+┌ Context tree · Fix flaky test · trunk                  ctx ▓▓░░░ ~46k/200k · filling
+│ filter: default   4/24 rows
 │ ● user: build yourself a tool that reads the context window…              ~1.2k
 │ ○ assistant: I'll start by inspecting my environment…                      0.3k
 │ ⚙ [bash $ ls -la ~/Documents/] → total 744 …                              ~2.1k
@@ -107,7 +110,7 @@ Palette: **Context tree**, **Branch here**, **Merge branch**, **Decisions**, **L
 │ │ ● user: the bun test is flaky, find the race                            ~0.4k
 │ │ ⚙ [bash $ bun test src/foo.test.ts] ⚠                                    ~4.7k
 │ ◆ Decision: try-redis · Outcome: switched to a write-through cache…        ~0.9k
-└ ⏎ go  b branch  m merge  c crop  i inspector  1·2·3 lanes  x undo  ? help  q back
+└ ⏎ fork & prefill this turn  b branch  m merge  c crop  u undo  s consumers  ? help  q back
 ```
 
 - `/tree` is an outline of the *whole* tree: one content-forward row per message (`● user:` /
@@ -115,13 +118,17 @@ Palette: **Context tree**, **Branch here**, **Merge branch**, **Decisions**, **L
   whole tree — your branch open with `← here`, the rest folded to their `⎇` header (`→` opens one).
 - The Input/Model/Tools lanes and the right-hand inspector (DeepSeek-Harness trajectory) are OFF by
   default so the first screen is the clean outline; `1/2/3` bring in the lanes, `i` the inspector.
+  The lanes are an event strip — one `▬` pill per prompt / model step / tool call on a shared time
+  axis, coloured by lane (nothing is scaled by tokens); the row you are on draws inverted.
 - The header's context string is the same one the prompt gauge shows, character for
   character. The lanes only appear once there are three turns to plot; a session with no
   messages says so instead of drawing an empty frame.
 - `⎇` rows hang off the message they were forked from. Colours: open green, squashed blue,
   rejected red, abandoned/deleted grey.
 - From inside a branch, its own `⎇` row is drawn at the fork point with `← here`; the rows
-  below it are the branch's own turns.
+  below it are the branch's own turns. The header reads `⎇ <branch> ← <trunk title>`.
+- Rows the model is not shown — an ancestor's turns past the point where your path forked — are
+  dimmed, under a `── not in this branch's context ──` line.
 - `┆⎇` rows at the bottom are branches you cannot reach on the active path (siblings, or the
   trunk continuing past your fork point); `⏎` switches to them, `→` expands them.
 - Sessions made with OpenCode's own `/fork` are adopted into the tree automatically (matched
@@ -162,3 +169,15 @@ a model (`provider/model`): `/ctree branch fix flaky test` names the branch "fix
   storage is never rewritten. `/undo` appends, never deletes.
 - Decision records are ordinary user messages (`noReply`) tagged in part metadata; they are
   re-injected verbatim when OpenCode compacts.
+
+## Releasing (maintainers)
+
+GitHub → Actions → **Release** → *Run workflow*: pick `patch` / `minor` / `major` (relative to
+the latest `v*` tag) or type an exact version. The workflow runs typecheck and tests, tags the
+current `main` as `vX.Y.Z`, creates the GitHub Release with generated notes, and dispatches the
+publish workflow on that tag, which publishes to npm through trusted publishing (OIDC, no token).
+Tick *dry run* to see the version it would cut without doing anything.
+
+The tag is the version: `package.json` on `main` says `0.0.0-dev` and is stamped from the tag at
+publish time, so no commit ever has to land on the protected branch. Keep `CHANGELOG.md` by hand
+(the workflow warns when the section for the new version is missing).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-context-tree",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "private": false,
   "type": "module",
   "description": "Pi-style context tree for OpenCode: branch, merge (human-confirmed decision records), crop, undo, plus a DeepSeek-Harness-style trajectory view",

package/src/core/actions.ts

@@ -32,6 +32,7 @@ export type JumpPlan =
  * - the **last message of the current session** → noop, "already here".
  */
 export function planJump(row: Row, ctx: { transcripts: Record<string, Transcript>; currentSessionID: string }): JumpPlan {
+  if (row.kind === "separator") return { kind: "noop", reason: "nothing to go to" }
   if (row.kind === "branch") return row.sessionID === ctx.currentSessionID ? { kind: "noop", reason: "you are here" } : { kind: "switch", sessionID: row.sessionID }
   const tr = ctx.transcripts[row.sessionID]
   if (!tr) return { kind: "noop", reason: "that session is not loaded" }

package/src/core/consumers.ts

@@ -3,34 +3,76 @@
  * current session's context. Pure.
  */
 import { estimateTokens } from "./tokens.js"
-import type { Transcript } from "./transcript.js"
+import { partPreview, type StepPart, type Transcript, type TranscriptMessage } from "./transcript.js"
 
-export type Consumer = { source: string; kind: "tool" | "assistant" | "user" | "decision" | "summary" | "reasoning"; tokens: number; count: number; share: number }
+/** One part inside a bucket, so the route can drill in and crop it in place. */
+export type ConsumerEntry = {
+  messageID: string
+  partID?: string
+  tokens: number
+  preview: string
+  /** only a completed tool result can be stubbed by crop's result mode (core/crop.ts) */
+  croppable: boolean
+}
+
+export type Consumer = {
+  source: string
+  kind: "tool" | "assistant" | "user" | "decision" | "summary" | "reasoning"
+  tokens: number
+  count: number
+  /** share of this transcript's own total */
+  share: number
+  /** share of the model's context window, when a limit is known */
+  shareOfWindow?: number
+  /** biggest first */
+  entries: ConsumerEntry[]
+  /** why this bucket cannot be acted on, when it cannot */
+  note?: string
+}
+
+const THINKING = "(thinking)"
+const THINKING_NOTE = "provider reasoning · not croppable"
 
-export function consumers(transcript: Transcript, opts: { cropped?: Set<string> } = {}): Consumer[] {
+export function consumers(transcript: Transcript, opts: { cropped?: Set<string>; limit?: number } = {}): Consumer[] {
   const acc = new Map<string, Consumer>()
-  const add = (source: string, kind: Consumer["kind"], tokens: number) => {
-    const c = acc.get(source) ?? { source, kind, tokens: 0, count: 0, share: 0 }
+  const add = (source: string, kind: Consumer["kind"], tokens: number, message: TranscriptMessage, part: StepPart) => {
+    const c = acc.get(source) ?? { source, kind, tokens: 0, count: 0, share: 0, entries: [] }
     c.tokens += tokens
     c.count += 1
+    c.entries.push({
+      messageID: message.id,
+      partID: part.id,
+      tokens,
+      preview: partPreview(part),
+      croppable: part.type === "tool" && part.state?.status === "completed",
+    })
     acc.set(source, c)
   }
   for (const m of transcript.messages) {
     for (const p of m.parts) {
       if (opts.cropped?.has(p.id)) continue
-      if (p.type === "tool") add(p.tool ?? "tool", "tool", estimateTokens(p.state?.output ?? "") + estimateTokens(JSON.stringify(p.state?.input ?? "")))
+      if (p.type === "tool") add(p.tool ?? "tool", "tool", estimateTokens(p.state?.output ?? "") + estimateTokens(JSON.stringify(p.state?.input ?? "")), m, p)
       else if (p.type === "text") {
         const kind = (p.metadata?.["ctree"] as { kind?: string } | undefined)?.kind
-        if (kind === "decision") add("◆ decisions", "decision", estimateTokens(p.text ?? ""))
-        else if (kind === "summary") add("◇ branch summaries", "summary", estimateTokens(p.text ?? ""))
-        else if (m.role === "user") add("● user prompts", "user", estimateTokens(p.text ?? ""))
-        else if (m.summary) add("◇ compaction summaries", "summary", estimateTokens(p.text ?? ""))
-        else add("○ assistant text", "assistant", estimateTokens(p.text ?? ""))
-      } else if (p.type === "reasoning") add("(thinking)", "reasoning", estimateTokens(p.text ?? ""))
+        if (kind === "decision") add("◆ decisions", "decision", estimateTokens(p.text ?? ""), m, p)
+        else if (kind === "summary") add("◇ branch summaries", "summary", estimateTokens(p.text ?? ""), m, p)
+        else if (m.role === "user") add("● user prompts", "user", estimateTokens(p.text ?? ""), m, p)
+        else if (m.summary) add("◇ compaction summaries", "summary", estimateTokens(p.text ?? ""), m, p)
+        else add("○ assistant text", "assistant", estimateTokens(p.text ?? ""), m, p)
+      } else if (p.type === "reasoning") add(THINKING, "reasoning", estimateTokens(p.text ?? ""), m, p)
     }
   }
   const total = [...acc.values()].reduce((s, c) => s + c.tokens, 0) || 1
-  return [...acc.values()].map((c) => ({ ...c, share: c.tokens / total })).sort((a, b) => b.tokens - a.tokens)
+  const limit = opts.limit !== undefined && opts.limit > 0 ? opts.limit : undefined
+  return [...acc.values()]
+    .map((c) => ({
+      ...c,
+      share: c.tokens / total,
+      ...(limit === undefined ? {} : { shareOfWindow: c.tokens / limit }),
+      ...(c.kind === "reasoning" ? { note: THINKING_NOTE } : {}),
+      entries: c.entries.sort((a, b) => b.tokens - a.tokens),
+    }))
+    .sort((a, b) => b.tokens - a.tokens)
 }
 
 export function bar(share: number, width: number): string {

package/src/core/decision.ts

@@ -75,6 +75,68 @@ export function decisionMessageText(record: string, branchName: string): string
   return body.startsWith("## Decision:") ? `◆ ${body}` : `◆ ## Decision: ${branchName}\n${body}`
 }
 
+// ---------------------------------------------------------------------------
+// Rendering a record in the TUI (DESIGN.md §7.4's ◆ cards).
+// ---------------------------------------------------------------------------
+
+const BULLET = /^(\s*)[-*•]\s+/
+/** the `◆` a landed record carries survives; the `#` markers do not */
+const HEADING = /^(\s*(?:◆\s*)?)#{1,6}\s*/
+
+/** Markdown emphasis is noise in a terminal; bullets and blank lines are structure. */
+function stripMarkdown(text: string): string {
+  return text.replace(/[*`]/g, "")
+}
+
+function wrapLine(body: string, width: number, marker: string): string[] {
+  const room = Math.max(1, width - marker.length)
+  const indent = " ".repeat(marker.length)
+  const lines: string[] = []
+  let current = ""
+  for (const raw of body.split(/\s+/).filter(Boolean)) {
+    // the only mid-word cut: one token that cannot fit on a line of its own
+    const word = raw.length > room ? `${raw.slice(0, Math.max(1, room - 1))}…` : raw
+    if (current === "") current = word
+    else if (current.length + 1 + word.length <= room) current += ` ${word}`
+    else {
+      lines.push(current)
+      current = word
+    }
+  }
+  lines.push(current)
+  return lines.map((line, i) => `${i === 0 ? marker : indent}${line}`.trimEnd())
+}
+
+/** A decision record as terminal lines: emphasis and heading markers gone, list bullets and
+ *  paragraph breaks kept, every line word-wrapped to `width` with a hanging indent. */
+export function renderDecision(text: string, width: number): string[] {
+  const out: string[] = []
+  for (const raw of text.replace(/\r/g, "").trim().split("\n")) {
+    const line = raw.trimEnd()
+    if (line.trim() === "") {
+      if (out.length > 0 && out[out.length - 1] !== "") out.push("")
+      continue
+    }
+    const bullet = BULLET.exec(line)
+    const marker = bullet ? `${bullet[1]}- ` : ""
+    const body = stripMarkdown(bullet ? line.slice(bullet[0].length) : line.replace(HEADING, "$1"))
+    out.push(...wrapLine(body, width, marker))
+  }
+  return out
+}
+
+/** The one-line form of a record: its `## Decision: <name>` title and `Outcome:` line. */
+export function decisionSummary(text: string): { title: string; outcome?: string } {
+  const lines = text
+    .replace(/\r/g, "")
+    .split("\n")
+    .map((l) => stripMarkdown(l.replace(/^\s*◆\s*/, "").replace(HEADING, "$1").replace(BULLET, "")).trim())
+  const heading = lines.find((l) => /^Decision:\s*\S/i.test(l))
+  const title = heading ? heading.replace(/^Decision:\s*/i, "").trim() : (lines.find((l) => l !== "") ?? "")
+  const outcome = lines.find((l) => /^Outcome:\s*\S/i.test(l))?.replace(/^Outcome:\s*/i, "").trim()
+  return outcome ? { title, outcome } : { title }
+}
+
 /** Open sibling branches forked from the same point (tournament, DESIGN.md §6.4). */
 export function openSiblings(state: TreeState, sessionID: string): string[] {
   const me = state.sessions[sessionID]

package/src/core/lanes.ts

@@ -1,11 +1,11 @@
 /**
- * DSH-style timeline lanes (DESIGN.md §7.1, §7.3): one column per unit of the
- * chosen mode, three series — Input (context size at each assistant turn), Model
- * (output tokens per assistant step), Tools (result size per tool call, errors
- * flagged). Pure.
+ * DSH-style timeline lanes (DESIGN.md §7.1, §7.3): three series — Input, Model,
+ * Tools — over the chosen mode's x-axis. Two models live here: the original
+ * magnitude columns (`buildLanes` + `sparkline`) and the event strip
+ * (`buildEventStrip`), which is what the DSH bar actually draws. Pure.
  */
 import { estimateTokens } from "./tokens.js"
-import type { Transcript, TranscriptMessage } from "./transcript.js"
+import { stepKind, type StepPart, type Transcript, type TranscriptMessage } from "./transcript.js"
 
 export type LaneMode = "turns" | "calls" | "duration"
 
@@ -147,3 +147,164 @@ export function columnFor(lanes: Lanes, messageID: string, partID?: string): num
   const i = lanes.columns.findIndex((c) => c.messageID === messageID || c.userMessageID === messageID)
   return i >= 0 ? i : -1
 }
+
+/* ── Event strip (DESIGN.md §7.1's DSH trajectory bar) ────────────────────────
+ * The strip is an *event* timeline, not a histogram: one small pill per event on
+ * one shared axis across the three lanes, gap between neighbours, width = duration
+ * in Duration mode. Colour is categorical (per lane), so nothing here scales by
+ * tokens — `tokens` rides along only for the inspector.
+ */
+
+export type LaneEvent = {
+  lane: "input" | "model" | "tools"
+  /** `context` = compaction/branch summary: machine-written context, not the human prompting */
+  kind: "user" | "context" | "text" | "reasoning" | "tool"
+  messageID: string
+  partID?: string
+  turn: number
+  startMs?: number
+  durationMs?: number
+  error?: boolean
+  tokens: number
+}
+
+/** One terminal cell of one lane. */
+export type StripCell = { lane: LaneEvent["lane"]; eventIndex: number; glyph: string; error?: boolean }
+
+export type EventStrip = {
+  /** time order; only the events that fit — see `truncatedLeft` */
+  events: LaneEvent[]
+  width: number
+  /** `width` cells each; null = gap/empty */
+  lanes: Record<LaneEvent["lane"], (StripCell | null)[]>
+  /** cell index range [start, end) of `events[i]`, for cursor/scroll mapping */
+  spans: { start: number; end: number }[]
+  /** lane has no events in the strip (render "no tool calls" etc.) */
+  empty: Record<LaneEvent["lane"], boolean>
+  /** older events dropped off the left because they did not fit */
+  truncatedLeft: number
+}
+
+const EVENT_GLYPH = "▬"
+
+function ctreeKindOf(message: TranscriptMessage): string | undefined {
+  for (const p of message.parts) {
+    const ctree = p.metadata?.["ctree"] as { kind?: string } | undefined
+    if (ctree?.kind) return ctree.kind
+  }
+  return undefined
+}
+
+function isContextMessage(message: TranscriptMessage): boolean {
+  return message.summary === true || ctreeKindOf(message) === "summary"
+}
+
+/** A whole message as one pill: user prompts and summaries read as single events. */
+function messageEvent(message: TranscriptMessage, turn: number): LaneEvent {
+  const ms = spanOf(message)
+  return {
+    lane: "input",
+    kind: isContextMessage(message) ? "context" : "user",
+    messageID: message.id,
+    turn,
+    startMs: message.time.created,
+    ...(ms > 0 ? { durationMs: ms } : {}),
+    tokens: message.parts.reduce((s, p) => s + estimateTokens(p.text ?? ""), 0),
+  }
+}
+
+function partEvent(message: TranscriptMessage, part: StepPart, turn: number): LaneEvent {
+  const t = part.state?.time ?? part.time
+  const base = {
+    messageID: message.id,
+    partID: part.id,
+    turn,
+    startMs: t?.start ?? message.time.created,
+    ...(t?.start !== undefined && t?.end !== undefined ? { durationMs: Math.max(0, t.end - t.start) } : {}),
+  }
+  if (part.type === "tool")
+    return { ...base, lane: "tools", kind: "tool", error: part.state?.status === "error", tokens: estimateTokens(part.state?.output ?? "") + estimateTokens(JSON.stringify(part.state?.input ?? "")) }
+  return { ...base, lane: "model", kind: part.type === "reasoning" ? "reasoning" : "text", tokens: estimateTokens(part.text ?? "") }
+}
+
+function eventsOf(transcript: Transcript): LaneEvent[] {
+  const out: LaneEvent[] = []
+  for (const turn of turnsOf(transcript.messages)) {
+    if (turn.user) out.push(messageEvent(turn.user, turn.index))
+    for (const m of turn.assistants) {
+      const context = isContextMessage(m)
+      if (context) out.push(messageEvent(m, turn.index))
+      for (const p of m.parts) {
+        const kind = stepKind(p)
+        // a summary's prose is already the context pill above; a tool call it made is still a tool call
+        if (kind === "other" || (context && kind !== "tool")) continue
+        out.push(partEvent(m, p, turn.index))
+      }
+    }
+  }
+  return out
+}
+
+/** Turns mode groups by turn, so a turn boundary breaks wider than a step boundary. */
+function gapBefore(events: LaneEvent[], i: number, mode: LaneMode): number {
+  return mode === "turns" && events[i]!.turn !== events[i - 1]!.turn ? 2 : 1
+}
+
+/** Index of the oldest event that still fits at one cell each — everything before it is dropped. */
+function firstFitting(events: LaneEvent[], mode: LaneMode, width: number): number {
+  let cells = 0
+  for (let i = events.length - 1; i >= 0; i--) {
+    const next = cells === 0 ? 1 : cells + 1 + gapBefore(events, i + 1, mode)
+    if (next > width) return i + 1
+    cells = next
+  }
+  return 0
+}
+
+function durationWidths(events: LaneEvent[], budget: number): number[] {
+  const total = events.reduce((s, e) => s + Math.max(0, e.durationMs ?? 0), 0)
+  if (total <= 0) return events.map(() => 1) // no timing data: read as the calls layout
+  const widths = events.map((e) => Math.max(1, Math.round((Math.max(0, e.durationMs ?? 0) / total) * budget)))
+  let over = widths.reduce((s, v) => s + v, 0) - budget
+  while (over > 0) {
+    let widest = -1
+    for (let i = 0; i < widths.length; i++) if ((widths[i] ?? 0) > 1 && (widest < 0 || (widths[i] ?? 0) > (widths[widest] ?? 0))) widest = i
+    if (widest < 0) break // every event is already down to its one cell
+    widths[widest] = (widths[widest] ?? 1) - 1
+    over--
+  }
+  return widths
+}
+
+export function buildEventStrip(transcript: Transcript, mode: LaneMode, width: number): EventStrip {
+  const w = Math.max(0, Math.floor(width))
+  const all = eventsOf(transcript)
+  const truncatedLeft = firstFitting(all, mode, w)
+  const events = all.slice(truncatedLeft)
+  const gaps = events.map((_, i) => (i === 0 ? 0 : gapBefore(events, i, mode)))
+  const widths = mode === "duration" ? durationWidths(events, w - gaps.reduce((s, g) => s + g, 0)) : events.map(() => 1)
+
+  const blank = (): (StripCell | null)[] => Array.from({ length: w }, () => null)
+  const lanes: EventStrip["lanes"] = { input: blank(), model: blank(), tools: blank() }
+  const empty: EventStrip["empty"] = { input: true, model: true, tools: true }
+  const spans: { start: number; end: number }[] = []
+  let cursor = 0
+  events.forEach((e, i) => {
+    const start = cursor + (gaps[i] ?? 0)
+    const end = Math.min(w, start + (widths[i] ?? 1))
+    for (let c = start; c < end; c++) lanes[e.lane][c] = { lane: e.lane, eventIndex: i, glyph: EVENT_GLYPH, ...(e.error ? { error: true } : {}) }
+    spans.push({ start, end })
+    empty[e.lane] = false
+    cursor = start + (widths[i] ?? 1)
+  })
+  return { events, width: w, lanes, spans, empty, truncatedLeft }
+}
+
+/** Index into `strip.events` of the event a message/part belongs to (-1 if it is not on the strip). */
+export function stripIndexFor(strip: EventStrip, messageID: string, partID?: string): number {
+  if (partID) {
+    const byPart = strip.events.findIndex((e) => e.partID === partID)
+    if (byPart >= 0) return byPart
+  }
+  return strip.events.findIndex((e) => e.messageID === messageID)
+}

package/src/core/navigation.ts

@@ -6,14 +6,37 @@
  */
 import type { Filter, Row, TreeView } from "./tree.js"
 
-/** Move the selection by `delta` rows, clamped to the row list's bounds.
+/** First row at or after `index` scanning in `dir` that the cursor may sit on — separator rows
+ *  are decoration (`── not in this branch's context ──`). -1 when there is none. */
+function scan(rows: Row[], index: number, dir: 1 | -1): number {
+  for (let i = index; i >= 0 && i < rows.length; i += dir) if (rows[i]!.kind !== "separator") return i
+  return -1
+}
+
+/** Move the selection by `delta` selectable rows, clamped to the row list's bounds.
  *  Returns -1 for an empty row list. */
 export function moveSelection(rows: Row[], index: number, delta: number): number {
   if (rows.length === 0) return -1
-  const next = index + delta
-  if (next < 0) return 0
-  if (next > rows.length - 1) return rows.length - 1
-  return next
+  const dir: 1 | -1 = delta < 0 ? -1 : 1
+  let i = Math.min(Math.max(index, 0), rows.length - 1)
+  for (let step = Math.abs(delta); step > 0; step--) {
+    const next = scan(rows, i + dir, dir)
+    if (next === -1) break
+    i = next
+  }
+  if (rows[i]!.kind !== "separator") return i
+  // the cursor started on a separator (a rebuilt view moved it there): step off it either way
+  const ahead = scan(rows, i, dir)
+  return ahead === -1 ? scan(rows, i, dir === 1 ? -1 : 1) : ahead
+}
+
+/** First / last selectable row (`g` / `G`). -1 when there is none. */
+export function firstIndex(rows: Row[]): number {
+  return scan(rows, 0, 1)
+}
+
+export function lastIndex(rows: Row[]): number {
+  return scan(rows, rows.length - 1, -1)
 }
 
 /** The next/previous `branch` row from `index` in direction `dir` (DESIGN.md §7.2's
@@ -65,31 +88,37 @@ export function resolveSelection(
   previousIndex?: number,
 ): number {
   if (view.rows.length === 0) return -1
+  // the cursor never rests on a separator: take the next real row, else the previous one
+  const land = (i: number) => {
+    const ahead = scan(view.rows, i, 1)
+    return ahead === -1 ? scan(view.rows, i, -1) : ahead
+  }
 
   if (preferredId !== undefined) {
     const exact = view.indexById[preferredId]
-    if (exact !== undefined) return exact
+    if (exact !== undefined) return land(exact)
 
     const owner = preferredId.split(":").slice(0, 2).join(":")
     for (let i = 0; i < view.rows.length; i++) {
       const row = view.rows[i]!
+      if (row.kind === "separator") continue
       const rowOwner = row.kind === "branch" ? row.id : `${row.sessionID}:${row.messageID}`
       if (rowOwner === owner) return i
     }
   }
 
   // 2b. the row that now sits where the old selection was (filter/fold changed the list)
-  if (previousIndex !== undefined && previousIndex >= 0) return Math.min(previousIndex, view.rows.length - 1)
+  if (previousIndex !== undefined && previousIndex >= 0) return land(Math.min(previousIndex, view.rows.length - 1))
 
   if (currentRowId !== undefined) {
     const idx = view.indexById[currentRowId]
-    if (idx !== undefined) return idx
+    if (idx !== undefined) return land(idx)
   }
 
   if (view.currentRowId !== undefined) {
     const idx = view.indexById[view.currentRowId]
-    if (idx !== undefined) return idx
+    if (idx !== undefined) return land(idx)
   }
 
-  return 0
+  return land(0)
 }

package/src/core/tokens.ts

@@ -84,14 +84,30 @@ export function contextSizeOf(messages: MinimalMessage[]): { tokens: number; est
 
 export type ContextBand = "low" | "healthy" | "filling" | "red"
 
-/** Absolute bands from DESIGN.md §6.7: <8k low · 8-32k healthy · 32-64k filling · >=64k red. */
-export function bandFor(tokens: number): ContextBand {
+/** Bands relative to the model's window when it is known (<25% low · <60% healthy · <85%
+ *  filling · else red); DESIGN.md §6.7's absolute 8k/32k/64k bands only as the fallback,
+ *  since 30k is "healthy" on a 200k model and one prompt from compaction on a 32k one. */
+export function bandFor(tokens: number, limit?: number): ContextBand {
+  if (limit && limit > 0) {
+    const r = tokens / limit
+    if (r < 0.25) return "low"
+    if (r < 0.6) return "healthy"
+    if (r < 0.85) return "filling"
+    return "red"
+  }
   if (tokens < 8_000) return "low"
   if (tokens < 32_000) return "healthy"
   if (tokens < 64_000) return "filling"
   return "red"
 }
 
+/** `▓▓▓░░`: `cells` wide, filled by tokens/limit, always at least one cell once anything is used. */
+export function contextBar(tokens: number, limit: number, cells = 5): string {
+  if (!(limit > 0)) return ""
+  const filled = tokens <= 0 ? 0 : Math.min(cells, Math.max(1, Math.round((tokens / limit) * cells)))
+  return "▓".repeat(filled) + "░".repeat(cells - filled)
+}
+
 /** `12345` → `12.3k`, `800` → `800`. */
 export function formatK(tokens: number): string {
   if (tokens < 1000) return String(tokens)
@@ -99,7 +115,9 @@ export function formatK(tokens: number): string {
   return `${k.endsWith(".0") ? k.slice(0, -2) : k}k`
 }
 
-/** The one context string every surface shows: `ctx ~2.3k/32.8k · low` (`~` when estimated). */
+/** The one context string every surface shows: `ctx ▓▓░░░ ~2.3k/32.8k · low` (`~` when
+ *  estimated; the bar and the `/limit` only when the model's window is known). */
 export function formatContext(size: { tokens: number; estimated: boolean }, limit?: number): string {
-  return `ctx ${size.estimated ? "~" : ""}${formatK(size.tokens)}${limit ? `/${formatK(limit)}` : ""} · ${bandFor(size.tokens)}`
+  const bar = limit ? `${contextBar(size.tokens, limit)} ` : ""
+  return `ctx ${bar}${size.estimated ? "~" : ""}${formatK(size.tokens)}${limit ? `/${formatK(limit)}` : ""} · ${bandFor(size.tokens, limit)}`
 }