# OpenCode

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

A shadcn/ui block from the [@notra](https://ui.usenotra.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/notra/opencode).

- Page, with a live preview: https://shadcn.exchange/r/notra/opencode
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/notra/opencode-light-01e6bfb74c1915a3.png
- Registry item: https://ui.usenotra.com/r/opencode.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.usenotra.com/r/opencode.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@base-ui/react`, `cn`
- Registry items: `button`, `card`, `collapsible`, `input-group`, `kbd`

## Files

### `registry/notra/opencode/components/opencode-window.tsx`

```tsx
import { cn } from "cn";

import { Card } from "@/components/ui/card";

import type { OpencodeWindowProps } from "../types/opencode";

export const OpencodeWindow = ({
  className,
  ...props
}: OpencodeWindowProps) => (
  <Card
    className={cn(
      "border-opencode-subtle bg-opencode-bg font-opencode text-opencode-fg flex w-full flex-col gap-0 overflow-hidden rounded-xl border py-0 text-[0.8125rem] leading-5 antialiased ring-0",
      className
    )}
    data-slot="opencode-window"
    {...props}
  />
);
```

### `registry/notra/opencode/types/opencode.ts`

```ts
import type { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
import type { ComponentProps, ReactNode } from "react";

import type { Collapsible } from "@/components/ui/collapsible";

export type OpencodeActivityKind = "thought" | "read" | "search" | "tool";

export type OpencodeMessageAuthor = "user" | "assistant";

export type OpencodeMcpStatus = "Connected" | "Disconnected" | "Failed";

export type OpencodeWindowProps = ComponentProps<"div">;

export type OpencodeScrollAreaProps = ScrollAreaPrimitive.Root.Props;

export interface OpencodeLogoProps extends Omit<
  ComponentProps<"svg">,
  "height" | "width"
> {
  /** Multiplies the 234 by 42 base size. */
  scale?: number;
}

export interface OpencodeMessageProps extends ComponentProps<"div"> {
  /** Rendered under an assistant reply. */
  actions?: ReactNode;
  from?: OpencodeMessageAuthor;
  /** Rendered above an assistant reply, usually `OpencodeSources`. */
  search?: ReactNode;
}

export interface OpencodeTurnFooterProps extends ComponentProps<"div"> {
  agent?: string;
  /** Marks a turn that was stopped with Escape. */
  interrupted?: boolean;
  /** Wall time of the turn. Omit it while the turn is still running. */
  duration?: string;
  model?: string;
}

export interface OpencodeActivityProps extends ComponentProps<
  typeof Collapsible
> {
  /** Arguments after the label, like a path or a query. */
  detail?: string;
  /** Shown after a dot, like `1.4s`. */
  duration?: string;
  kind?: OpencodeActivityKind;
  /** Defaults to `Thought`, `Read` or `Web Search` by kind. */
  label?: string;
  /** Renders a running thought as an animated `Thinking` line. */
  pending?: boolean;
  /** Freezes the thinking spinner. Defaults to the user's preference. */
  reducedMotion?: boolean;
}

export interface OpencodeProgressProps extends ComponentProps<"span"> {
  /** Animates the scanner. When false every cell rests as a dot. */
  active?: boolean;
  /** Freezes the scanner. Defaults to the user's preference. */
  reducedMotion?: boolean;
}

export interface OpencodeComposerProps extends Omit<
  ComponentProps<"input">,
  "children" | "className" | "type"
> {
  agent?: string;
  /**
   * Shows the scanner and `esc interrupt` instead of the cwd. Enter does not
   * send while busy and Escape calls `onStop`.
   */
  busy?: boolean;
  className?: string;
  /** Context usage on the status row, like `63.4K (6%)`. */
  context?: string;
  /** Working directory shown on the status row while idle. */
  cwd?: string;
  effort?: string;
  inputClassName?: string;
  model?: string;
  /**
   * Called with the trimmed text on Enter. An uncontrolled composer clears
   * afterwards; with `value`, clear it yourself here.
   */
  onSend?: (text: string) => void;
  /** Called on Escape while `busy`, to interrupt the running turn. */
  onStop?: () => void;
  provider?: string;
}

export interface OpencodeMcpServer {
  name: string;
  status?: OpencodeMcpStatus;
}

export interface OpencodeSidebarProps extends Omit<
  ComponentProps<"aside">,
  "title"
> {
  /** Git branch appended to the cwd. Its last segment is highlighted. */
  branch?: string;
  cwd?: string;
  lsp?: ReactNode;
  mcpOpen?: ComponentProps<typeof Collapsible>["open"];
  onMcpOpenChange?: ComponentProps<typeof Collapsible>["onOpenChange"];
  servers?: OpencodeMcpServer[];
  spent?: string;
  title?: ReactNode;
  tokens?: string;
  used?: string;
  version?: string;
}

export interface OpencodeSource {
  domain: string;
  title: string;
  url?: string;
}

export interface OpencodeSourcesLabels {
  citedSources: (count: number) => string;
  openSource: (title: string, domain: string) => string;
}

export interface OpencodeSourcesProps extends Omit<
  ComponentProps<typeof Collapsible>,
  "children"
> {
  labels?: OpencodeSourcesLabels;
  queries?: readonly string[];
  reducedMotion?: boolean;
  sequential?: boolean;
  sources: readonly OpencodeSource[];
}

export interface OpencodeDemoActivity {
  body?: string;
  detail?: string;
  duration?: string;
  id: string;
  kind: OpencodeActivityKind;
  label?: string;
}

/** A run of reply text: plain, `code` (green) or strong (orange). */
export type OpencodeDemoSpan = string | { code: string } | { strong: string };

export interface OpencodeDemoListItem {
  id: string;
  spans: OpencodeDemoSpan[];
}

export type OpencodeDemoBlock =
  | { heading: string; id: string }
  | { id: string; items: OpencodeDemoListItem[] }
  | { id: string; text: OpencodeDemoSpan[] };

export interface OpencodeDemoTurn {
  activities: OpencodeDemoActivity[];
  duration?: string;
  id: string;
  prompt: string;
  reply: OpencodeDemoBlock[];
}

export interface OpencodeDemoSession {
  agent: string;
  branch: string;
  context: string;
  cwd: string;
  effort: string;
  model: string;
  provider: string;
  servers: OpencodeMcpServer[];
  spent: string;
  title: string;
  tokens: string;
  used: string;
  version: string;
}

export type OpencodeTurnStatus =
  | "working"
  | "streaming"
  | "done"
  | "interrupted";

/** A scripted answer the demo plays back when you send a prompt. */
export interface OpencodeReply {
  /** Thoughts and tool calls, played in order before the reply. */
  activities: OpencodeDemoActivity[];
  reply: OpencodeDemoBlock[];
}

export interface OpencodeChatActivity extends OpencodeDemoActivity {
  /** A thought still thinking, shown with the spinner. */
  pending?: boolean;
  /** Still playing back. Dropped from the transcript when interrupted. */
  running?: boolean;
}

export interface OpencodeChatTurn {
  activities: OpencodeChatActivity[];
  duration?: string;
  id: string;
  prompt: string;
  reply: OpencodeDemoBlock[];
  status: OpencodeTurnStatus;
}

export interface OpencodeChat {
  busy: boolean;
  send: (text: string) => Promise<void>;
  stop: () => void;
  turns: OpencodeChatTurn[];
}
```

### `registry/notra/opencode/components/opencode-logo.tsx`

```tsx
import { cn } from "cn";

import { OPENCODE_LOGO_CELL, OPENCODE_LOGO_ROWS } from "../constants/opencode";
import type { OpencodeLogoProps } from "../types/opencode";

const COLUMNS = OPENCODE_LOGO_ROWS[0].length;
const WIDTH = COLUMNS * OPENCODE_LOGO_CELL;
const HEIGHT = OPENCODE_LOGO_ROWS.length * OPENCODE_LOGO_CELL;

const CELL_FILL: Record<string, string> = {
  "+": "fill-opencode-logo-fill",
  c: "fill-opencode-logo-code",
  o: "fill-opencode-logo-open",
};

const LOGO_CELLS = OPENCODE_LOGO_ROWS.flatMap((row, y) =>
  [...row].flatMap((cell, x) =>
    cell in CELL_FILL
      ? [
          {
            className: CELL_FILL[cell],
            key: `${x}-${y}`,
            x: x * OPENCODE_LOGO_CELL,
            y: y * OPENCODE_LOGO_CELL,
          },
        ]
      : []
  )
);

export const OpencodeLogo = ({
  "aria-label": ariaLabel = "OpenCode",
  className,
  scale = 1,
  ...props
}: OpencodeLogoProps) => (
  <svg
    aria-label={ariaLabel}
    className={cn("block", className)}
    data-slot="opencode-logo"
    height={HEIGHT * scale}
    role="img"
    shapeRendering="crispEdges"
    viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
    width={WIDTH * scale}
    {...props}
  >
    {LOGO_CELLS.map((cell) => (
      <rect
        className={cell.className}
        height={OPENCODE_LOGO_CELL}
        key={cell.key}
        width={OPENCODE_LOGO_CELL}
        x={cell.x}
        y={cell.y}
      />
    ))}
  </svg>
);
```

### `registry/notra/opencode/components/opencode-message.tsx`

```tsx
import { cn } from "cn";

import type { OpencodeMessageProps } from "../types/opencode";

/**
 * Colors markup inside a reply the way the TUI renders markdown: headings
 * and strong text in orange, inline code in green, orange list dashes.
 */
const REPLY_MARKUP_CLASS =
  "[&_:is(h1,h2,h3,h4)]:text-opencode-orange [&_:is(h1,h2,h3,h4)]:text-[length:inherit] [&_:is(h1,h2,h3,h4)]:font-bold [&_code]:text-opencode-green [&_code]:font-[inherit] [&_code]:text-[length:inherit] [&_li]:ps-[2ch] [&_li]:before:-ms-[2ch] [&_li]:before:inline-block [&_li]:before:w-[2ch] [&_li]:before:text-opencode-orange [&_li]:before:content-['-'] [&_ol]:list-none [&_strong]:text-opencode-orange [&_strong]:font-bold [&_ul]:list-none [&>*+*]:mt-[1lh]";

export const OpencodeMessage = ({
  actions,
  children,
  className,
  from = "assistant",
  search,
  ...props
}: OpencodeMessageProps) => {
  if (from === "user") {
    return (
      <div
        className={cn(
          "border-opencode-blue bg-opencode-panel text-opencode-fg border-s-2 py-[1lh] ps-[calc(3ch-2px)] pe-[2ch] wrap-break-word whitespace-pre-wrap",
          className
        )}
        data-from="user"
        data-slot="opencode-message"
        {...props}
      >
        {children}
      </div>
    );
  }

  return (
    <div
      className={cn("flex w-full min-w-0 flex-col gap-[1lh]", className)}
      data-from="assistant"
      data-slot="opencode-message"
      {...props}
    >
      {search}
      <div
        className={cn(
          "text-opencode-fg max-w-full ps-[3ch] wrap-break-word",
          REPLY_MARKUP_CLASS
        )}
      >
        {children}
      </div>
      {actions}
    </div>
  );
};
```

### `registry/notra/opencode/components/opencode-turn-footer.tsx`

```tsx
import { cn } from "cn";

import {
  OPENCODE_DEFAULT_AGENT,
  OPENCODE_DEFAULT_MODEL,
} from "../constants/opencode";
import type { OpencodeTurnFooterProps } from "../types/opencode";

export const OpencodeTurnFooter = ({
  agent = OPENCODE_DEFAULT_AGENT,
  className,
  duration,
  interrupted = false,
  model = OPENCODE_DEFAULT_MODEL,
  ...props
}: OpencodeTurnFooterProps) => (
  <div
    className={cn(
      "text-opencode-muted flex min-w-0 items-center gap-[1ch] ps-[3ch]",
      className
    )}
    data-slot="opencode-turn-footer"
    {...props}
  >
    <span
      aria-hidden="true"
      className="border-opencode-blue grid size-[1.1em] shrink-0 place-items-center border-[1.5px]"
    >
      <span className="bg-opencode-blue size-[0.5em]" />
    </span>
    <span className="text-opencode-fg">{agent}</span>
    <span aria-hidden="true">·</span>
    <span className="min-w-0 truncate">{model}</span>
    {duration && (
      <>
        <span aria-hidden="true">·</span>
        <span className="shrink-0 tabular-nums">{duration}</span>
      </>
    )}
    {interrupted && (
      <>
        <span aria-hidden="true">·</span>
        <span className="text-opencode-orange shrink-0">interrupted</span>
      </>
    )}
  </div>
);
```

### `registry/notra/opencode/components/opencode-activity.tsx`

```tsx
"use client";

import { cn } from "cn";

import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

import {
  OPENCODE_ACTIVITY_GLYPH,
  OPENCODE_ACTIVITY_LABEL,
  OPENCODE_THINKING_FRAME_MS,
  OPENCODE_THINKING_FRAMES,
} from "../constants/opencode";
import { useOpencodeFrame } from "../hooks/use-opencode-frame";
import { useOpencodeReducedMotion } from "../hooks/use-opencode-reduced-motion";
import type { OpencodeActivityProps } from "../types/opencode";

const TRIGGER_CLASS =
  "focus-visible:ring-opencode-blue h-auto justify-start gap-0 rounded-none p-0 text-start text-[length:inherit] leading-[inherit] font-normal whitespace-normal text-current hover:bg-transparent hover:text-current focus-visible:border-transparent focus-visible:ring-1 active:not-aria-[haspopup]:translate-y-0 aria-expanded:bg-transparent aria-expanded:text-current dark:hover:bg-transparent";

const ThinkingGlyph = ({ reducedMotion }: { reducedMotion?: boolean }) => {
  const reduced = useOpencodeReducedMotion(reducedMotion);
  const frame = useOpencodeFrame(
    OPENCODE_THINKING_FRAMES.length,
    OPENCODE_THINKING_FRAME_MS,
    !reduced
  );
  return (
    <span aria-hidden="true" className="inline-block w-[2ch] shrink-0">
      {OPENCODE_THINKING_FRAMES[frame]}
    </span>
  );
};

export const OpencodeActivity = ({
  children,
  className,
  defaultOpen = false,
  detail,
  duration,
  kind = "tool",
  label,
  pending = false,
  reducedMotion,
  ...props
}: OpencodeActivityProps) => {
  const isThought = kind === "thought";
  const glyph = OPENCODE_ACTIVITY_GLYPH[kind];
  const name = label ?? OPENCODE_ACTIVITY_LABEL[kind];

  const summary =
    isThought && pending ? (
      <>
        <ThinkingGlyph reducedMotion={reducedMotion} />
        <span>Thinking</span>
      </>
    ) : (
      <>
        {glyph && (
          <span aria-hidden="true" className="inline-block w-[2ch] shrink-0">
            {glyph}
          </span>
        )}
        <span className="min-w-0 wrap-break-word">
          {name}
          {detail && <> {detail}</>}
          {duration && <> · {duration}</>}
        </span>
      </>
    );

  return (
    <Collapsible
      className={cn(
        "ps-[3ch]",
        isThought ? "text-opencode-orange" : "text-opencode-muted",
        className
      )}
      data-kind={kind}
      data-slot="opencode-activity"
      defaultOpen={defaultOpen}
      {...props}
    >
      {children ? (
        <CollapsibleTrigger
          render={<Button className={TRIGGER_CLASS} variant="ghost" />}
        >
          <span className="flex min-w-0">{summary}</span>
        </CollapsibleTrigger>
      ) : (
        <div className="flex min-w-0">{summary}</div>
      )}
      {children && (
        <CollapsibleContent>
          <div
            className={cn(
              "text-opencode-muted mt-[1lh] whitespace-pre-wrap",
              isThought ? "italic" : "ps-[2ch]"
            )}
          >
            {children}
          </div>
        </CollapsibleContent>
      )}
    </Collapsible>
  );
};
```

### `registry/notra/opencode/components/opencode-sources.tsx`

```tsx
"use client";

import { cn } from "cn";
import type { CSSProperties } from "react";

import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

import { OPENCODE_SEARCH_STAGGER_MS } from "../constants/opencode";
import { useOpencodeReducedMotion } from "../hooks/use-opencode-reduced-motion";
import { useOpencodeSourcesSequence } from "../hooks/use-opencode-sources-sequence";
import type {
  OpencodeSource,
  OpencodeSourcesLabels,
  OpencodeSourcesProps,
} from "../types/opencode";
import { OpencodeActivity } from "./opencode-activity";

const TRAILING_MARKDOWN_PATTERN = /\)\*+$/u;
const NO_QUERIES: readonly string[] = [];

const REVEAL_CLASS =
  "opacity-100 transition-opacity duration-200 ease-out delay-(--opencode-delay) starting:opacity-0 motion-reduce:transition-none";

const DEFAULT_LABELS: OpencodeSourcesLabels = {
  citedSources: (count) =>
    count === 1 ? "1 cited source" : `${count} cited sources`,
  openSource: (title, domain) => `Open ${title} on ${domain}`,
};

const cleanUrl = (url: string) => url.replace(TRAILING_MARKDOWN_PATTERN, "");

const safeHref = (url: string | undefined) => {
  if (!url) {
    return null;
  }
  try {
    const parsed = new URL(cleanUrl(url));
    return parsed.protocol === "http:" || parsed.protocol === "https:"
      ? parsed.href
      : null;
  } catch {
    return null;
  }
};

const SourceLine = ({
  delayMs,
  openLabel,
  source,
}: {
  delayMs?: number;
  openLabel: OpencodeSourcesLabels["openSource"];
  source: OpencodeSource;
}) => {
  const href = safeHref(source.url);
  const style =
    delayMs === undefined
      ? undefined
      : ({ "--opencode-delay": `${delayMs}ms` } as CSSProperties);
  const content = (
    <>
      <span className="text-opencode-fg truncate">{source.domain}</span>
      <span className="text-opencode-muted truncate">
        {source.url ? cleanUrl(source.url) : source.title}
      </span>
    </>
  );
  const lineClass = cn(
    "grid grid-cols-[minmax(0,18ch)_minmax(0,1fr)] gap-[2ch]",
    delayMs !== undefined && REVEAL_CLASS
  );

  return (
    <li className={lineClass} style={style}>
      {href ? (
        <a
          aria-label={openLabel(source.title, source.domain)}
          className="focus-visible:ring-opencode-blue col-span-2 grid grid-cols-subgrid outline-none hover:underline focus-visible:ring-1"
          href={href}
          rel="noopener noreferrer"
          target="_blank"
        >
          {content}
        </a>
      ) : (
        content
      )}
    </li>
  );
};

export const OpencodeSources = ({
  className,
  defaultOpen = false,
  labels = DEFAULT_LABELS,
  queries = NO_QUERIES,
  reducedMotion,
  sequential = false,
  sources,
  ...props
}: OpencodeSourcesProps) => {
  const reduced = useOpencodeReducedMotion(reducedMotion);
  const staged = sequential && !reduced;
  const progress = useOpencodeSourcesSequence(
    staged,
    queries.length,
    sources.length
  );

  if (sources.length === 0 && queries.length === 0) {
    return null;
  }

  const shownQueries = staged ? queries.slice(0, progress.queries) : queries;
  const showSources = staged ? progress.sources : sources.length > 0;

  return (
    <Collapsible
      aria-live={staged ? "polite" : undefined}
      className={cn("flex w-full min-w-0 flex-col", className)}
      data-slot="opencode-sources"
      defaultOpen={defaultOpen}
      {...props}
    >
      {shownQueries.map((query) => (
        <OpencodeActivity
          className={cn(staged && REVEAL_CLASS)}
          detail={`"${query}"`}
          key={query}
          kind="search"
        />
      ))}
      {showSources && (
        <div className={cn("ps-[5ch]", staged && REVEAL_CLASS)}>
          <CollapsibleTrigger
            render={
              <Button
                className="group/sources text-opencode-muted hover:text-opencode-fg aria-expanded:text-opencode-muted focus-visible:ring-opencode-blue h-auto gap-[1ch] rounded-none p-0 text-[length:inherit] leading-[inherit] font-normal hover:bg-transparent focus-visible:border-transparent focus-visible:ring-1 active:not-aria-[haspopup]:translate-y-0 aria-expanded:bg-transparent dark:hover:bg-transparent"
                variant="ghost"
              />
            }
          >
            <span
              aria-hidden="true"
              className="inline-block w-[1ch] text-[0.75em] transition-transform duration-150 group-aria-expanded/sources:rotate-90 motion-reduce:transition-none"
            >
              ▶
            </span>
            {labels.citedSources(sources.length)}
          </CollapsibleTrigger>
          <CollapsibleContent>
            <ul className="ps-[2ch]">
              {sources.map((source, index) => (
                <SourceLine
                  delayMs={
                    staged
                      ? (index + 1) * OPENCODE_SEARCH_STAGGER_MS
                      : undefined
                  }
                  key={source.url ?? `${source.domain}-${source.title}`}
                  openLabel={labels.openSource}
                  source={source}
                />
              ))}
            </ul>
          </CollapsibleContent>
        </div>
      )}
    </Collapsible>
  );
};
```

### `registry/notra/opencode/components/opencode-progress.tsx`

```tsx
"use client";

import { cn } from "cn";
import type { CSSProperties } from "react";

import {
  OPENCODE_PROGRESS_CELLS,
  OPENCODE_PROGRESS_FRAME_MS,
  OPENCODE_PROGRESS_TRAIL,
} from "../constants/opencode";
import { useOpencodeFrame } from "../hooks/use-opencode-frame";
import { useOpencodeReducedMotion } from "../hooks/use-opencode-reduced-motion";
import type { OpencodeProgressProps } from "../types/opencode";

const LAST_CELL = OPENCODE_PROGRESS_CELLS - 1;
const TRAIL_LENGTH = OPENCODE_PROGRESS_TRAIL.length;
/**
 * The head sweeps from the first cell to the last and back to the first,
 * then keeps moving off the left edge so the trail drains into cell 0.
 */
const SWEEP_FRAMES = LAST_CELL * 2 + TRAIL_LENGTH;
/** The sweep, then the same number of frames at rest as the trail is long. */
const FRAME_COUNT = SWEEP_FRAMES + TRAIL_LENGTH;
const CELLS = Array.from(
  { length: OPENCODE_PROGRESS_CELLS },
  (_, cell) => cell
);

/** Opacity of `cell` on `frame`, or null when the cell rests as a dot. */
const cellOpacity = (cell: number, frame: number): number | null => {
  if (frame >= SWEEP_FRAMES) {
    return null;
  }
  const forward = frame <= LAST_CELL;
  const head = forward ? frame : LAST_CELL * 2 - frame;
  const behind = forward ? head - cell : cell - head;
  return OPENCODE_PROGRESS_TRAIL[behind] ?? null;
};

export const OpencodeProgress = ({
  active = true,
  className,
  reducedMotion,
  ...props
}: OpencodeProgressProps) => {
  const reduced = useOpencodeReducedMotion(reducedMotion);
  const animate = active && !reduced;
  const frame = useOpencodeFrame(
    FRAME_COUNT,
    OPENCODE_PROGRESS_FRAME_MS,
    animate
  );

  return (
    <span
      aria-hidden="true"
      className={cn("inline-flex h-[1lh] shrink-0 items-center", className)}
      data-slot="opencode-progress"
      {...props}
    >
      {CELLS.map((cell) => {
        const opacity = animate ? cellOpacity(cell, frame) : null;
        return (
          <span
            className="grid h-[0.9em] w-[1ch] place-items-center"
            key={cell}
          >
            {opacity === null ? (
              <span className="bg-opencode-blue size-0.5 opacity-40" />
            ) : (
              <span
                className="bg-opencode-blue size-full opacity-(--opencode-cell)"
                style={{ "--opencode-cell": opacity } as CSSProperties}
              />
            )}
          </span>
        );
      })}
    </span>
  );
};
```

### `registry/notra/opencode/components/opencode-composer.tsx`

```tsx
"use client";

import { cn } from "cn";
import { useState } from "react";
import type { ChangeEvent, FormEvent, KeyboardEvent } from "react";

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Kbd } from "@/components/ui/kbd";

import {
  OPENCODE_DEFAULT_AGENT,
  OPENCODE_DEFAULT_EFFORT,
  OPENCODE_DEFAULT_MODEL,
  OPENCODE_DEFAULT_PLACEHOLDER,
  OPENCODE_DEFAULT_PROVIDER,
} from "../constants/opencode";
import type { OpencodeComposerProps } from "../types/opencode";
import { OpencodeProgress } from "./opencode-progress";

const KBD_CLASS =
  "text-opencode-fg font-opencode h-auto min-w-0 rounded-none bg-transparent p-0 text-[length:inherit] font-normal";

export const OpencodeComposer = ({
  agent = OPENCODE_DEFAULT_AGENT,
  "aria-label": ariaLabel = "Prompt",
  busy = false,
  className,
  context,
  cwd,
  defaultValue,
  effort = OPENCODE_DEFAULT_EFFORT,
  inputClassName,
  model = OPENCODE_DEFAULT_MODEL,
  onChange,
  onKeyDown,
  onSend,
  onStop,
  placeholder = OPENCODE_DEFAULT_PLACEHOLDER,
  provider = OPENCODE_DEFAULT_PROVIDER,
  value,
  ...props
}: OpencodeComposerProps) => {
  const [draft, setDraft] = useState(String(defaultValue ?? ""));
  const isControlled = value !== undefined;
  const text = isControlled ? String(value) : draft;

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setDraft(event.target.value);
    onChange?.(event);
  };

  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
    if (event.key === "Escape" && busy && onStop) {
      event.preventDefault();
      onStop();
    }
    onKeyDown?.(event);
  };

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const message = text.trim();
    if (!message || busy || !onSend) {
      return;
    }
    onSend(message);
    if (!isControlled) {
      setDraft("");
    }
  };

  return (
    <form
      className={cn("flex min-w-0 flex-col gap-[1lh]", className)}
      data-slot="opencode-composer"
      onSubmit={handleSubmit}
    >
      <InputGroup className="border-opencode-blue bg-opencode-panel dark:bg-opencode-panel has-[[data-slot=input-group-control]:focus-visible]:border-opencode-blue h-auto flex-col items-stretch gap-[0.5lh] rounded-none border-0 border-s-2 py-[0.5lh] ps-[calc(3ch-2px)] pe-[2ch] has-[[data-slot=input-group-control]:focus-visible]:ring-0 has-[>[data-align=block-end]]:[&>input]:pt-0">
        <InputGroupInput
          aria-label={ariaLabel}
          className={cn(
            "peer text-opencode-fg caret-opencode-fg placeholder:text-opencode-muted h-[1lh] px-0 py-0 text-[length:inherit] leading-[inherit] md:text-[length:inherit] [&:placeholder-shown:not(:focus)]:indent-[1ch]",
            inputClassName
          )}
          autoComplete="off"
          enterKeyHint="send"
          onChange={handleChange}
          onKeyDown={handleKeyDown}
          placeholder={placeholder}
          type="text"
          value={text}
          {...props}
        />
        <span
          aria-hidden="true"
          className="bg-opencode-fg pointer-events-none absolute start-[calc(3ch-2px)] top-[0.5lh] hidden h-[1lh] w-[1ch] peer-[:placeholder-shown:not(:focus)]:block"
        />
        <InputGroupAddon
          align="block-end"
          className="min-w-0 cursor-default flex-wrap justify-start gap-x-[1ch] gap-y-0 p-0 text-[length:inherit] leading-[inherit] font-normal group-has-[>input]/input-group:pb-0"
        >
          <span className="text-opencode-blue">{agent}</span>
          <span aria-hidden="true" className="text-opencode-muted">
            ·
          </span>
          <span className="text-opencode-fg">{model}</span>
          <span className="text-opencode-muted">{provider}</span>
          <span aria-hidden="true" className="text-opencode-muted">
            ·
          </span>
          <span className="text-opencode-orange font-bold">{effort}</span>
        </InputGroupAddon>
      </InputGroup>
      <div className="text-opencode-muted flex min-w-0 items-center justify-between gap-[2ch] ps-[1ch]">
        {busy ? (
          <span className="flex min-w-0 items-center gap-[2ch]">
            <OpencodeProgress />
            <span>
              <Kbd className={KBD_CLASS}>esc</Kbd> interrupt
            </span>
          </span>
        ) : (
          <span className="min-w-0 truncate">{cwd}</span>
        )}
        <span className="flex shrink-0 items-center gap-[2ch]">
          {context ? (
            <span className="tabular-nums">{context}</span>
          ) : (
            <span>
              <Kbd className={KBD_CLASS}>tab</Kbd> agents
            </span>
          )}
          <span>
            <Kbd className={KBD_CLASS}>ctrl+p</Kbd> commands
          </span>
        </span>
      </div>
    </form>
  );
};
```

### `registry/notra/opencode/components/opencode-scroll-area.tsx`

```tsx
"use client";

import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
import { cn } from "cn";

import type { OpencodeScrollAreaProps } from "../types/opencode";

/** A scroll area with OpenCode's square, one-cell terminal scrollbar. */
export const OpencodeScrollArea = ({
  children,
  className,
  ...props
}: OpencodeScrollAreaProps) => (
  <ScrollAreaPrimitive.Root
    className={cn("relative", className)}
    data-slot="opencode-scroll-area"
    {...props}
  >
    <ScrollAreaPrimitive.Viewport
      className="focus-visible:outline-opencode-blue size-full outline-none focus-visible:outline-1 focus-visible:-outline-offset-1"
      data-slot="opencode-scroll-area-viewport"
    >
      {children}
    </ScrollAreaPrimitive.Viewport>
    {/* The track is a wider hit area, the thumb only paints its right edge. */}
    <ScrollAreaPrimitive.Scrollbar
      className="flex w-[1.5ch] touch-none select-none"
      orientation="vertical"
    >
      <ScrollAreaPrimitive.Thumb className="before:bg-opencode-subtle hover:before:bg-opencode-muted relative w-full before:absolute before:inset-y-0 before:right-0 before:w-[0.5ch] before:transition-colors" />
    </ScrollAreaPrimitive.Scrollbar>
  </ScrollAreaPrimitive.Root>
);
```

### `registry/notra/opencode/components/opencode-sidebar.tsx`

```tsx
"use client";

import { cn } from "cn";

import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

import {
  OPENCODE_DEFAULT_CWD,
  OPENCODE_DEFAULT_SERVERS,
  OPENCODE_DEFAULT_VERSION,
  OPENCODE_MCP_STATUS_CLASS,
} from "../constants/opencode";
import type { OpencodeSidebarProps } from "../types/opencode";
import { OpencodeScrollArea } from "./opencode-scroll-area";

const splitBranch = (branch: string) => {
  const cut = branch.lastIndexOf("/") + 1;
  return { head: branch.slice(cut), prefix: branch.slice(0, cut) };
};

const SidebarLocation = ({ branch, cwd }: { branch?: string; cwd: string }) => {
  if (!branch) {
    return <div className="text-opencode-muted break-all">{cwd}</div>;
  }
  const { head, prefix } = splitBranch(branch);
  return (
    <div className="break-all">
      <span className="text-opencode-muted">
        {cwd}:{prefix}
      </span>
      <span className="text-opencode-fg">{head}</span>
    </div>
  );
};

export const OpencodeSidebar = ({
  branch,
  className,
  cwd = OPENCODE_DEFAULT_CWD,
  lsp = "LSPs are disabled",
  mcpOpen,
  onMcpOpenChange,
  servers = OPENCODE_DEFAULT_SERVERS,
  spent = "$0.00 spent",
  title = "New session",
  tokens = "0 tokens",
  used = "0% used",
  version = OPENCODE_DEFAULT_VERSION,
  ...props
}: OpencodeSidebarProps) => (
  <aside
    className={cn(
      "bg-opencode-sidebar text-opencode-fg flex min-h-0 flex-col",
      className
    )}
    data-slot="opencode-sidebar"
    {...props}
  >
    <OpencodeScrollArea className="min-h-0 flex-1 [&>[data-slot=opencode-scroll-area-viewport]>div]:min-h-full">
      <div className="flex min-h-full flex-col gap-[1lh] px-[2ch] py-[1lh]">
        <h2 className="text-[length:inherit] leading-[inherit] font-bold wrap-break-word">
          {title}
        </h2>

        <section>
          <h3 className="text-[length:inherit] leading-[inherit] font-bold">
            Context
          </h3>
          <p className="text-opencode-muted tabular-nums">{tokens}</p>
          <p className="text-opencode-muted tabular-nums">{used}</p>
          <p className="text-opencode-muted tabular-nums">{spent}</p>
        </section>

        <Collapsible defaultOpen onOpenChange={onMcpOpenChange} open={mcpOpen}>
          <CollapsibleTrigger
            render={
              <Button
                className="group/mcp text-opencode-fg hover:text-opencode-fg aria-expanded:text-opencode-fg focus-visible:ring-opencode-blue h-auto gap-[1ch] rounded-none p-0 text-[length:inherit] leading-[inherit] font-bold hover:bg-transparent focus-visible:border-transparent focus-visible:ring-1 active:not-aria-[haspopup]:translate-y-0 aria-expanded:bg-transparent dark:hover:bg-transparent"
                variant="ghost"
              />
            }
          >
            <span
              aria-hidden="true"
              className="inline-block w-[1ch] text-[0.75em] transition-transform duration-150 group-aria-expanded/mcp:rotate-90 motion-reduce:transition-none"
            >
              ▶
            </span>
            MCP
          </CollapsibleTrigger>
          <CollapsibleContent>
            <ul>
              {servers.map((server) => {
                const status = server.status ?? "Connected";
                return (
                  <li className="flex min-w-0 gap-[1ch]" key={server.name}>
                    <span
                      aria-hidden="true"
                      className={OPENCODE_MCP_STATUS_CLASS[status]}
                    >
                      •
                    </span>
                    <span className="min-w-0 truncate">
                      {server.name}{" "}
                      <span className="text-opencode-muted">{status}</span>
                    </span>
                  </li>
                );
              })}
            </ul>
          </CollapsibleContent>
        </Collapsible>

        <section>
          <h3 className="text-[length:inherit] leading-[inherit] font-bold">
            LSP
          </h3>
          <p className="text-opencode-muted">{lsp}</p>
        </section>

        <div className="mt-auto flex flex-col gap-[1lh] pt-[1lh]">
          <SidebarLocation branch={branch} cwd={cwd} />
          <p className="flex gap-[1ch]">
            <span aria-hidden="true" className="text-opencode-green">
              •
            </span>
            <span className="font-bold">
              <span className="text-opencode-muted">Open</span>Code
            </span>
            <span className="text-opencode-muted tabular-nums">{version}</span>
          </p>
        </div>
      </div>
    </OpencodeScrollArea>
  </aside>
);
```

### `registry/notra/opencode/constants/opencode.ts`

```ts
import type {
  OpencodeActivityKind,
  OpencodeMcpServer,
  OpencodeMcpStatus,
} from "../types/opencode";

export const OPENCODE_DEFAULT_AGENT = "Build";

export const OPENCODE_DEFAULT_MODEL = "Writer 0.1";

export const OPENCODE_DEFAULT_PROVIDER = "Notra";

export const OPENCODE_DEFAULT_EFFORT = "high";

export const OPENCODE_DEFAULT_PLACEHOLDER =
  'Ask anything... "Draft this week\'s changelog"';

export const OPENCODE_DEFAULT_VERSION = "1.18.33";

export const OPENCODE_DEFAULT_CWD = "~/acme/web";

export const OPENCODE_DEFAULT_SERVERS: OpencodeMcpServer[] = [
  { name: "notra", status: "Connected" },
  { name: "github", status: "Connected" },
  { name: "linear", status: "Connected" },
];

export const OPENCODE_MCP_STATUS_CLASS: Record<OpencodeMcpStatus, string> = {
  Connected: "text-opencode-green",
  Disconnected: "text-opencode-muted",
  Failed: "text-opencode-orange",
};

/** Glyph in front of each activity line, by kind. Thoughts have none. */
export const OPENCODE_ACTIVITY_GLYPH: Record<OpencodeActivityKind, string> = {
  read: "→",
  search: "◈",
  thought: "",
  tool: "⚙",
};

export const OPENCODE_ACTIVITY_LABEL: Record<OpencodeActivityKind, string> = {
  read: "Read",
  search: "Web Search",
  thought: "Thought",
  tool: "Tool",
};

/** Braille frames of the `Thinking` spinner. */
export const OPENCODE_THINKING_FRAMES = [
  "⠋",
  "⠙",
  "⠹",
  "⠸",
  "⠼",
  "⠴",
  "⠦",
  "⠧",
  "⠇",
  "⠏",
] as const;

export const OPENCODE_THINKING_FRAME_MS = 80;

/** Cells in the status-row scanner. */
export const OPENCODE_PROGRESS_CELLS = 8;

export const OPENCODE_PROGRESS_FRAME_MS = 90;

/** Opacity of the head and the cells trailing behind it. */
export const OPENCODE_PROGRESS_TRAIL = [1, 0.55, 0.32, 0.18] as const;

/** Beat before the first search line during a replay. */
export const OPENCODE_SEARCH_HEADER_MS = 140;

/** Cadence between sequential search lines. */
export const OPENCODE_SEARCH_QUERY_MS = 280;

/** Delay between cited-source rows. */
export const OPENCODE_SEARCH_STAGGER_MS = 56;

/** Pause after the last query before the sources block. */
export const OPENCODE_SEARCH_SOURCES_MS = 160;

/** Pacing of a played-back turn in the demo chat. */
export const OPENCODE_CHAT_TIMING = {
  /** How long a thought shows the Thinking spinner. */
  thinkMs: 1300,
  /** Beat after each tool line. */
  toolMs: 600,
  /** Delay between reply blocks as they render. */
  blockMs: 260,
  /** Cap on every delay when the user prefers reduced motion. */
  reducedMaxMs: 60,
} as const;

export const OPENCODE_REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";

/**
 * The wordmark on a 39 by 7 cell grid, one string per row.
 * `o` paints the dim "open" half, `c` the bright "code" half and `+` the
 * shaded counters inside the letters.
 */
export const OPENCODE_LOGO_ROWS = [
  ".................................c.....",
  "oooo.oooo.oooo.ooo..cccc.cccc.cccc.cccc",
  "o++o.o++o.o++o.o..o.c....c++c.c++c.c++c",
  "o++o.o++o.oooo.o..o.c....c++c.c++c.cccc",
  "o++o.oooo.o....o..o.c....c++c.c++c.c...",
  "oooo.o....oooo.o..o.cccc.cccc.cccc.cccc",
  ".....o.................................",
] as const;

/** Size of one logo cell in SVG units. */
export const OPENCODE_LOGO_CELL = 6;
```

### `registry/notra/opencode/constants/opencode-demo.ts`

```ts
import type {
  OpencodeDemoActivity,
  OpencodeDemoSession,
  OpencodeDemoTurn,
  OpencodeReply,
  OpencodeSource,
} from "../types/opencode";

export const OPENCODE_DEMO_SESSION: OpencodeDemoSession = {
  agent: "Build",
  branch: "feat/changelog-week-39",
  context: "41.2K (4%)",
  cwd: "~/acme/web",
  effort: "high",
  model: "Writer 0.1",
  provider: "Notra",
  servers: [
    { name: "notra", status: "Connected" },
    { name: "github", status: "Connected" },
    { name: "linear", status: "Connected" },
    { name: "vercel", status: "Disconnected" },
  ],
  spent: "$0.18 spent",
  title: "Weekly changelog draft",
  tokens: "41,207 tokens",
  used: "4% used",
  version: "1.18.33",
};

export const OPENCODE_DEMO_TURNS: OpencodeDemoTurn[] = [
  {
    activities: [{ duration: "1.1s", id: "t1-thought", kind: "thought" }],
    duration: "4.2s",
    id: "greeting",
    prompt: "is the notra mcp connected?",
    reply: [
      {
        id: "greeting-reply",
        text: [
          "Yes. ",
          { code: "notra" },
          " is connected, so I can read this week's events and publish posts.",
        ],
      },
    ],
  },
  {
    activities: [
      { duration: "1.4s", id: "t2-thought", kind: "thought" },
      { detail: "CHANGELOG.md", id: "t2-read-changelog", kind: "read" },
      { detail: "brand-voice.md", id: "t2-read-voice", kind: "read" },
      {
        detail: "[range=week]",
        id: "t2-events",
        kind: "tool",
        label: "notra_list_events",
      },
      { duration: "2.0s", id: "t2-thought-2", kind: "thought" },
    ],
    duration: "17.8s",
    id: "changelog",
    prompt: "draft this week's changelog from the merged PRs",
    reply: [
      {
        id: "changelog-intro",
        text: [
          "Drafted ",
          { strong: "Acme v2.4" },
          " from 14 merged PRs, grouped by area and written in your brand voice.",
        ],
      },
      { heading: "Features:", id: "changelog-features" },
      {
        id: "changelog-feature-list",
        items: [
          {
            id: "scheduler",
            spans: [
              { code: "apps/scheduler" },
              " - Scheduled posts now publish on every plan",
            ],
          },
          {
            id: "geo",
            spans: [
              { code: "apps/geo" },
              " - Share-of-voice chart per AI engine",
            ],
          },
          {
            id: "api",
            spans: [
              { code: "apps/api" },
              ", ",
              { code: "packages/sdk" },
              " - Webhooks for published posts",
            ],
          },
        ],
      },
      { heading: "Fixes:", id: "changelog-fixes" },
      {
        id: "changelog-fix-list",
        items: [
          {
            id: "editor",
            spans: [
              { code: "apps/editor" },
              " - Image uploads no longer drop alt text",
            ],
          },
          {
            id: "billing",
            spans: [
              { code: "packages/billing" },
              " - Seat counts update right after an invite",
            ],
          },
        ],
      },
      {
        id: "changelog-next",
        text: [
          "Saved as a draft in Notra. Run ",
          { code: "notra_publish_post" },
          " when you're ready to ship it.",
        ],
      },
    ],
  },
];

export const OPENCODE_DEMO_ACTIVITIES: OpencodeDemoActivity[] = [
  {
    body: "The user wants the week's changes. Read the brand voice first, then pull merged PRs from Notra.",
    duration: "1.4s",
    id: "thought",
    kind: "thought",
  },
  { detail: "CHANGELOG.md", id: "read-changelog", kind: "read" },
  { detail: "brand-voice.md", id: "read-voice", kind: "read" },
  {
    body: "14 merged PRs, 2 releases",
    detail: "[range=week]",
    id: "tool",
    kind: "tool",
    label: "notra_list_events",
  },
  {
    detail: '"AI changelog tools 2026"',
    id: "search",
    kind: "search",
  },
];

export const OPENCODE_DEMO_SOURCES: OpencodeSource[] = [
  {
    domain: "usenotra.com",
    title: "Notra changelog",
    url: "https://usenotra.com/changelog",
  },
  {
    domain: "keepachangelog.com",
    title: "Keep a Changelog",
    url: "https://keepachangelog.com/",
  },
  {
    domain: "github.blog",
    title: "GitHub changelog",
    url: "https://github.blog/changelog/",
  },
  {
    domain: "linear.app",
    title: "Linear changelog",
    url: "https://linear.app/changelog",
  },
];

export const OPENCODE_DEMO_QUERIES: string[] = [
  "best AI changelog tools 2026",
  "how teams write release notes",
];

/** Answers the demo plays back, one per prompt you send, in order. */
export const OPENCODE_REPLIES: OpencodeReply[] = [
  {
    activities: [
      { id: "thought", kind: "thought" },
      {
        detail: "[id=changelog-week-39]",
        id: "publish",
        kind: "tool",
        label: "notra_publish_post",
      },
    ],
    reply: [
      {
        id: "published",
        text: [
          "Published ",
          { strong: "Acme v2.4" },
          ". It's live at ",
          { code: "acme.com/changelog/v2-4" },
          " and the RSS feed picked it up.",
        ],
      },
      {
        id: "next",
        text: ["Want a short LinkedIn post for the release as well?"],
      },
    ],
  },
  {
    activities: [
      { id: "thought", kind: "thought" },
      { detail: "apps/scheduler/src/publish.ts", id: "read", kind: "read" },
    ],
    reply: [
      {
        id: "retry",
        text: [
          "Failed publish jobs retry three times with backoff in ",
          { code: "apps/scheduler/src/publish.ts" },
          ".",
        ],
      },
      { heading: "Covered by:", id: "tests-heading" },
      {
        id: "tests",
        items: [
          {
            id: "retry-test",
            spans: [{ code: "publish.test.ts" }, " - retries a failed publish"],
          },
          {
            id: "fail-test",
            spans: [
              { code: "publish.test.ts" },
              " - surfaces the error after the last attempt",
            ],
          },
        ],
      },
    ],
  },
  {
    activities: [
      { id: "thought", kind: "thought" },
      {
        detail: "bun run test",
        id: "tests",
        kind: "tool",
        label: "bash",
      },
    ],
    reply: [
      {
        id: "green",
        text: [
          "All ",
          { strong: "212 tests" },
          " pass. Nothing is blocking the release.",
        ],
      },
    ],
  },
];
```

### `registry/notra/opencode/hooks/use-opencode-chat.ts`

```ts
"use client";

import { useCallback, useEffect, useRef, useState } from "react";

import {
  OPENCODE_CHAT_TIMING,
  OPENCODE_REDUCED_MOTION_QUERY,
} from "../constants/opencode";
import type {
  OpencodeChat,
  OpencodeChatTurn,
  OpencodeDemoTurn,
  OpencodeReply,
} from "../types/opencode";

const wait = (ms: number) =>
  new Promise<void>((resolve) => {
    window.setTimeout(resolve, ms);
  });

const formatSeconds = (ms: number) => `${(ms / 1000).toFixed(1)}s`;

const settle = (turn: OpencodeDemoTurn): OpencodeChatTurn => ({
  ...turn,
  status: "done",
});

/**
 * Runs the demo conversation: `send` appends your prompt, thinks, plays the
 * reply's tool lines and renders the answer block by block. `stop` interrupts
 * the running turn like Escape does.
 */
export const useOpencodeChat = (
  history: readonly OpencodeDemoTurn[],
  replies: readonly OpencodeReply[]
): OpencodeChat => {
  const [turns, setTurns] = useState<OpencodeChatTurn[]>(() =>
    history.map(settle)
  );
  const [activeId, setActiveId] = useState<string | null>(null);
  const runRef = useRef(0);
  const activeRef = useRef<string | null>(null);
  const replyRef = useRef(0);

  useEffect(
    () => () => {
      runRef.current += 1;
    },
    []
  );

  const patch = useCallback(
    (
      id: string,
      next: (turn: OpencodeChatTurn) => Partial<OpencodeChatTurn>
    ) => {
      setTurns((current) =>
        current.map((turn) =>
          turn.id === id ? { ...turn, ...next(turn) } : turn
        )
      );
    },
    []
  );

  const finish = useCallback(() => {
    activeRef.current = null;
    setActiveId(null);
  }, []);

  const stop = useCallback(() => {
    const id = activeRef.current;
    if (!id) {
      return;
    }
    runRef.current += 1;
    patch(id, (turn) => ({
      activities: turn.activities.filter((activity) => !activity.running),
      status: "interrupted",
    }));
    finish();
  }, [finish, patch]);

  const send = useCallback(
    async (text: string) => {
      const reply = replies[replyRef.current % replies.length];
      if (activeRef.current || !reply) {
        return;
      }
      replyRef.current += 1;
      const run = runRef.current + 1;
      runRef.current = run;
      const alive = () => runRef.current === run;
      const reduced = window.matchMedia(OPENCODE_REDUCED_MOTION_QUERY).matches;
      const delay = (ms: number) =>
        wait(reduced ? Math.min(ms, OPENCODE_CHAT_TIMING.reducedMaxMs) : ms);
      const start = Date.now();
      const id = `turn-${start}`;

      activeRef.current = id;
      setActiveId(id);
      setTurns((current) => [
        ...current,
        { activities: [], id, prompt: text, reply: [], status: "working" },
      ]);

      for (const activity of reply.activities) {
        if (!alive()) {
          return;
        }
        const activityId = `${id}-${activity.id}`;
        const isThought = activity.kind === "thought";
        const thoughtStart = Date.now();
        patch(id, (turn) => ({
          activities: [
            ...turn.activities,
            { ...activity, id: activityId, pending: isThought, running: true },
          ],
        }));
        // react-doctor-disable-next-line react-doctor/async-await-in-loop -- activity lines play one after another
        await delay(
          isThought ? OPENCODE_CHAT_TIMING.thinkMs : OPENCODE_CHAT_TIMING.toolMs
        );
        if (!alive()) {
          return;
        }
        const duration = isThought
          ? formatSeconds(Date.now() - thoughtStart)
          : activity.duration;
        patch(id, (turn) => ({
          activities: turn.activities.map((item) =>
            item.id === activityId
              ? { ...item, duration, pending: false, running: false }
              : item
          ),
        }));
      }

      if (!alive()) {
        return;
      }
      patch(id, () => ({ status: "streaming" }));

      for (const block of reply.reply) {
        if (!alive()) {
          return;
        }
        patch(id, (turn) => ({ reply: [...turn.reply, block] }));
        // react-doctor-disable-next-line react-doctor/async-await-in-loop -- blocks render in order
        await delay(OPENCODE_CHAT_TIMING.blockMs);
      }

      if (!alive()) {
        return;
      }
      patch(id, () => ({
        duration: formatSeconds(Date.now() - start),
        status: "done",
      }));
      finish();
    },
    [finish, patch, replies]
  );

  return { busy: activeId !== null, send, stop, turns };
};
```

### `registry/notra/opencode/examples/opencode-demo.tsx`

```tsx
"use client";

import { Fragment, useEffect, useLayoutEffect, useRef } from "react";

import { OpencodeActivity } from "../components/opencode-activity";
import { OpencodeComposer } from "../components/opencode-composer";
import { OpencodeMessage } from "../components/opencode-message";
import { OpencodeScrollArea } from "../components/opencode-scroll-area";
import { OpencodeSidebar } from "../components/opencode-sidebar";
import { OpencodeTurnFooter } from "../components/opencode-turn-footer";
import { OpencodeWindow } from "../components/opencode-window";
import {
  OPENCODE_DEMO_SESSION,
  OPENCODE_DEMO_TURNS,
  OPENCODE_REPLIES,
} from "../constants/opencode-demo";
import { useOpencodeChat } from "../hooks/use-opencode-chat";
import type {
  OpencodeChatActivity,
  OpencodeDemoBlock,
  OpencodeDemoSpan,
} from "../types/opencode";

const spanKey = (span: OpencodeDemoSpan, index: number) =>
  `${index}-${typeof span === "string" ? span : Object.values(span)[0]}`;

const Spans = ({ spans }: { spans: OpencodeDemoSpan[] }) =>
  spans.map((span, index) => {
    const key = spanKey(span, index);
    if (typeof span === "string") {
      return <Fragment key={key}>{span}</Fragment>;
    }
    if ("code" in span) {
      return <code key={key}>{span.code}</code>;
    }
    return <strong key={key}>{span.strong}</strong>;
  });

const ReplyBlock = ({ block }: { block: OpencodeDemoBlock }) => {
  if ("heading" in block) {
    return <h3>{block.heading}</h3>;
  }
  if ("items" in block) {
    return (
      <ul>
        {block.items.map((item) => (
          <li key={item.id}>
            <Spans spans={item.spans} />
          </li>
        ))}
      </ul>
    );
  }
  return (
    <p>
      <Spans spans={block.text} />
    </p>
  );
};

/** How close to the bottom still counts as following the transcript. */
const FOLLOW_THRESHOLD_PX = 48;

/** Consecutive tool lines stack without a gap, thoughts stand alone. */
const groupActivities = (activities: OpencodeChatActivity[]) =>
  activities.reduce<OpencodeChatActivity[][]>((groups, activity) => {
    const last = groups.at(-1);
    const stacks =
      last && activity.kind !== "thought" && last[0]?.kind !== "thought";
    if (stacks) {
      last.push(activity);
    } else {
      groups.push([activity]);
    }
    return groups;
  }, []);

export default function OpencodeDemo() {
  const session = OPENCODE_DEMO_SESSION;
  const chat = useOpencodeChat(OPENCODE_DEMO_TURNS, OPENCODE_REPLIES);
  const scrollRef = useRef<HTMLDivElement>(null);
  const followRef = useRef(true);

  const viewportOf = () =>
    scrollRef.current?.querySelector<HTMLElement>(
      '[data-slot="opencode-scroll-area-viewport"]'
    );

  // Open on the latest turn like a terminal. Scrolling the viewport directly
  // keeps the host page from jumping.
  useLayoutEffect(() => {
    const viewport = viewportOf();
    viewport?.scrollTo({ top: viewport.scrollHeight });
  }, []);

  // Follow new output only while the reader sits at the bottom, so scrolling
  // up to reread a turn is not undone by the next reply block. Sending always
  // jumps back down.
  useEffect(() => {
    const viewport = viewportOf();
    if (!viewport) {
      return;
    }
    const handleScroll = () => {
      followRef.current =
        viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight <
        FOLLOW_THRESHOLD_PX;
    };
    viewport.addEventListener("scroll", handleScroll, { passive: true });
    return () => viewport.removeEventListener("scroll", handleScroll);
  }, []);

  useEffect(() => {
    if (!followRef.current) {
      return;
    }
    const viewport = viewportOf();
    viewport?.scrollTo({ top: viewport.scrollHeight });
  }, [chat.turns]);

  const handleSend = (text: string) => {
    followRef.current = true;
    return chat.send(text);
  };

  return (
    <OpencodeWindow className="h-150">
      <div className="grid min-h-0 flex-1 md:grid-cols-[minmax(0,1fr)_minmax(16rem,30%)]">
        <div className="flex min-h-0 min-w-0 flex-col gap-[1lh] px-[2ch] pt-[1lh] pb-[0.5lh]">
          <OpencodeScrollArea className="min-h-0 flex-1" ref={scrollRef}>
            <div className="flex flex-col gap-[1lh] pr-[1.5ch]">
              {chat.turns.map((turn) => (
                <Fragment key={turn.id}>
                  <OpencodeMessage from="user">{turn.prompt}</OpencodeMessage>
                  {groupActivities(turn.activities).map((group) => (
                    <div key={group[0]?.id}>
                      {group.map(
                        ({ body, id, running: _running, ...activity }) => (
                          <OpencodeActivity key={id} {...activity}>
                            {body}
                          </OpencodeActivity>
                        )
                      )}
                    </div>
                  ))}
                  {turn.reply.length > 0 && (
                    <OpencodeMessage>
                      {turn.reply.map((block) => (
                        <ReplyBlock block={block} key={block.id} />
                      ))}
                    </OpencodeMessage>
                  )}
                  {(turn.status === "done" ||
                    turn.status === "interrupted") && (
                    <OpencodeTurnFooter
                      agent={session.agent}
                      duration={turn.duration}
                      interrupted={turn.status === "interrupted"}
                      model={session.model}
                    />
                  )}
                </Fragment>
              ))}
            </div>
          </OpencodeScrollArea>
          <OpencodeComposer
            agent={session.agent}
            busy={chat.busy}
            context={session.context}
            cwd={session.cwd}
            effort={session.effort}
            model={session.model}
            onSend={handleSend}
            onStop={chat.stop}
            placeholder=""
            provider={session.provider}
          />
        </div>
        <OpencodeSidebar
          branch={session.branch}
          className="hidden md:flex"
          cwd={session.cwd}
          servers={session.servers}
          spent={session.spent}
          title={session.title}
          tokens={session.tokens}
          used={session.used}
          version={session.version}
        />
      </div>
    </OpencodeWindow>
  );
}
```

### `registry/notra/opencode/hooks/use-opencode-frame.ts`

```ts
"use client";

import { useEffect, useState } from "react";

/**
 * Steps through `frameCount` animation frames every `intervalMs` while
 * `active`. Returns frame 0 when inactive, so paused animations rest.
 */
export const useOpencodeFrame = (
  frameCount: number,
  intervalMs: number,
  active: boolean
): number => {
  const [frame, setFrame] = useState(0);

  useEffect(() => {
    if (!active || frameCount < 2) {
      return;
    }
    const timer = window.setInterval(() => {
      setFrame((current) => (current + 1) % frameCount);
    }, intervalMs);
    return () => {
      window.clearInterval(timer);
      setFrame(0);
    };
  }, [active, frameCount, intervalMs]);

  return active ? frame : 0;
};
```

### `registry/notra/opencode/hooks/use-opencode-reduced-motion.ts`

```ts
"use client";

import { useSyncExternalStore } from "react";

import { OPENCODE_REDUCED_MOTION_QUERY } from "../constants/opencode";

const subscribe = (onChange: () => void) => {
  const media = window.matchMedia(OPENCODE_REDUCED_MOTION_QUERY);
  media.addEventListener("change", onChange);
  return () => media.removeEventListener("change", onChange);
};

const readPreference = () =>
  window.matchMedia(OPENCODE_REDUCED_MOTION_QUERY).matches;

const readServerPreference = () => false;

/** The user's reduced-motion preference, unless `override` is set. */
export const useOpencodeReducedMotion = (override?: boolean): boolean => {
  const prefersReduced = useSyncExternalStore(
    subscribe,
    readPreference,
    readServerPreference
  );
  return override ?? prefersReduced;
};
```

### `registry/notra/opencode/hooks/use-opencode-sources-sequence.ts`

```ts
"use client";

import { useEffect, useState } from "react";

import {
  OPENCODE_SEARCH_HEADER_MS,
  OPENCODE_SEARCH_QUERY_MS,
  OPENCODE_SEARCH_SOURCES_MS,
} from "../constants/opencode";

interface OpencodeSourcesSequence {
  queries: number;
  sources: boolean;
}

const HIDDEN: OpencodeSourcesSequence = { queries: 0, sources: false };

/** Reveals the search lines one at a time, then the cited sources. */
export const useOpencodeSourcesSequence = (
  enabled: boolean,
  queryCount: number,
  sourceCount: number
): OpencodeSourcesSequence => {
  const [sequence, setSequence] = useState(HIDDEN);

  useEffect(() => {
    if (!enabled) {
      return;
    }
    const timers: number[] = [];
    const schedule = (at: number, next: Partial<OpencodeSourcesSequence>) => {
      timers.push(
        window.setTimeout(() => {
          setSequence((current) => ({ ...current, ...next }));
        }, at)
      );
    };

    let at = OPENCODE_SEARCH_HEADER_MS;
    for (let shown = 1; shown <= queryCount; shown += 1) {
      schedule(at, { queries: shown });
      at += OPENCODE_SEARCH_QUERY_MS;
    }
    if (sourceCount > 0) {
      schedule(at + OPENCODE_SEARCH_SOURCES_MS, { sources: true });
    }

    return () => {
      for (const timer of timers) {
        window.clearTimeout(timer);
      }
      setSequence(HIDDEN);
    };
  }, [enabled, queryCount, sourceCount]);

  return sequence;
};
```