opencode-timeline

An opencode TUI plugin that adds a live Agents panel and a high-level timeline to the session sidebar, and a live elapsed timer on the prompt box. The timeline shows the things that matter — your requests, when a todo list was written, and each sub-agent task with how long it ran — and hides the low-level noise (file reads/writes, bash, edits, internal reasoning). Every row shows an elapsed time, and clicking a row opens its full detail.

What it does

Agents panel

Above the timeline, a live view of the sub-agents the top-level agent spawned (via the task tool) — the current spawn round, so you can tell at a glance what is running and what finished. The header is always shown; with none it reads No subagents.

| Glyph | Status | |---|---| | ● | running | | ◷ | rate-limited (the sub-agent's session is retrying) | | ⊘ | interrupted (you cancelled it) | | ✕ | errored | | ✓ | completed |

Each row shows the sub-agent's who: description and its live elapsed time; clicking a row opens that sub-agent's session. The whole round stays visible until it finishes — completed sub-agents show as ✓ next to the still-running ones, and a round that ended with an interruption or error stays until the agent starts a new round (which resets the list).

Sidebar timeline

Rendered at the bottom of the session sidebar. Each row is a wall-clock time, a kind glyph, a label, and an elapsed time on the right:

| Glyph | Kind | Example | |---|---|---| | ◆ | your request (turn) | 00:17:09 ◆ List markdown files 2m 4s | | ☰ | todo list written (todowrite) | 00:35:38 ☰ Todos (6) 1m 8s | | ⚙ | sub-agent task, with run duration | 00:35:38 ⚙ explore: List files 16.7s | | ✓ | background sub-agent finished | 00:36:01 ✓ List files 완료 3.1s | | ⊘ | sub-agent task you cancelled (interrupted) | 00:41:10 ⊘ explore: Map files 2m 0s |

Every row shows an elapsed time. A sub-agent (⚙) or cancelled (⊘) row shows its real run duration; every other row shows the time until the next row; the most recent row ticks live while the agent works.

Granular tools (read/write/bash/edit/grep/…), assistant prose, and reasoning are intentionally omitted. System-injected messages (continuations, compaction artifacts) are filtered out; a [BACKGROUND TASK COMPLETED] reminder becomes a ✓ completion row instead of a fake request; only the first todo list per request is shown; and rows that would render 0.0s (events at the same instant, like several background tasks finishing in one reminder) are hidden.

The full session history is loaded (not just opencode's recent in-memory window), so even the oldest request stays visible. The list is uncapped by default — set maxRows to limit it, and the first request is always kept.

Click any row to open a dialog with its full, untruncated detail (Esc to close). Scrolling the mouse wheel over the timeline no longer scrolls the sidebar.

21:27:15 ◆ 이전에 stock prod 수집 상황 파악해줘    2m 38s
21:29:53 ☰ Todos (6)                             5m 45s
21:35:38 ⚙ plan: Plan 365d                      10m 46s
21:46:24 ⚙ oracle: Review                         2m 38s

Elapsed timer

A counter on the bottom-right of the prompt box. It measures elapsed time since your most recent request and resets when you send a new one. It ticks live while the agent works, and keeps showing the time since that request (dimmed) while the session is idle — so it always matches the timeline's latest row.

                                 ⏱ 1m 23s

Install

Paste below into your OpenCode.

Install and configure opencode-timeline by following the instructions here:
https://raw.githubusercontent.com/coin-seeker/opencode-timeline/refs/heads/main/docs/installation.md

Setup

One config file. Restart. Done.

~/.config/opencode/tui.json

{
  "$schema": "https://opencode.ai/tui.json",
  "plugin": [["opencode-timeline@latest", { "enabled": true }]]
}

opencode resolves the npm package on startup automatically. The config is not hot-reloaded, so restart opencode after editing.

Options

{
  "plugin": [["/absolute/path/to/opencode-timeline/src/tui.tsx", {
    "enabled": true,
    "clockFormat": "24h",
    "headerColor": "#E07A3A",
    "dimColor": "#546E7A",
    "showIdleDuration": true
  }]]
}

| Option | Default | Description | |---|---|---| | clockFormat | "24h" | "24h" or "12h" wall-clock format for timeline rows | | maxRows | uncapped | Max timeline rows kept (most recent); unset shows all. The first request is always kept | | headerColor | theme accent | Hex color for the "Timeline" header | | dimColor | theme muted | Hex color for clock and duration text | | turnColor | theme accent | Hex color for the request (◆) marker | | planColor | theme warning | Hex color for the plan (☰) marker | | taskColor | theme success | Hex color for the sub-agent (⚙ / ✓) marker | | timerGlyph | "⏱" | Glyph prefix for the elapsed timer | | showIdleDuration | true | When idle, keep showing the elapsed-since-request dimmed. Set to false to hide it |

How it works

The plugin registers two host slots: sidebar_content (the timeline, ordered below other sidebar panels) and session_prompt_right (the elapsed timer). Because api.state.session.messages only exposes opencode's recent ~100-message window, the plugin fetches the full history via api.client.session.messages, caches it per session, and keeps merging the live tail so nothing is lost as the window slides. A one-second tick refreshes running-task durations; the entry list rebuilds on message.updated, message.part.updated, session.status, and session.idle.

Requirements

• opencode with plugin support (@opencode-ai/plugin >= 1.17.0)

Manual Install

Copy the source files directly and register the local path.

mkdir -p ~/.config/opencode/plugins/opencode-timeline
cp src/*.ts* ~/.config/opencode/plugins/opencode-timeline/

Register in ~/.config/opencode/tui.json:

{
  "plugin": [["./plugins/opencode-timeline/tui.tsx", { "enabled": true }]]
}

Development

bun install
bun run test
bun run typecheck

Edit src/, restart opencode, see changes.

License

MIT — see LICENSE.