Activity

Thoughts, file reads and tool calls from the OpenCode activity stream.

import { OpencodeActivity } from "../components/opencode-activity";
import { OpencodeWindow } from "../components/opencode-window";
import { OPENCODE_DEMO_ACTIVITIES } from "../constants/opencode-demo";

export default function OpencodeActivityExample() {
  const [thought, ...tools] = OPENCODE_DEMO_ACTIVITIES;

  return (
    <div className="w-full p-6">
      <OpencodeWindow className="gap-[1lh] px-[2ch] py-[1lh]">
        {thought && (
          <OpencodeActivity duration={thought.duration} kind={thought.kind}>
            {thought.body}
          </OpencodeActivity>
        )}
        <div>
          {tools.map(({ body, id, ...activity }) => (
            <OpencodeActivity key={id} {...activity}>
              {body}
            </OpencodeActivity>
          ))}
        </div>
        <OpencodeActivity kind="thought" pending />
      </OpencodeWindow>
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/opencode-activity

OpencodeActivity is a shadcn Collapsible. Each kind has its own line:

thought renders an orange Thought · 1.4s line. With pending it becomes a spinning Thinking line.
read renders a muted → Read path line.
search renders a muted ◈ Web Search "query" line.
tool, the default, renders a muted ⚙ name [args] line.

Pass children as the step’s body, like reasoning or tool output. The body is collapsed and opens when you click the line. Stack consecutive tool lines in one wrapper and put a line of space around thoughts to match the TUI.

Prop	Default	Description
`kind`	`tool`	`thought`, `read`, `search` or `tool`.
`label`	by kind	Replaces `Thought`, `Read`, `Web Search` or the tool name.
`detail`		Arguments after the label, like a path or a query.
`duration`		Shown after a dot, like `1.4s`.
`pending`	`false`	Shows the animated `Thinking` line for a running thought.
`reducedMotion`	user preference	Freezes the spinner.
`children`		The collapsed body. Without it the line isn’t expandable.
`open`, `defaultOpen`, `onOpenChange`	`defaultOpen={false}`	Collapsible state.

Used in

OpenCode

A recreation of an OpenCode terminal session with a transcript, the prompt and the sidebar.