@cueloop/client 0.1.0-alpha.2 → 0.1.0-alpha.21

package/src/App.walk.test.tsx

@@ -0,0 +1,208 @@
+/**
+ * The guided walk in the virtual terminal: the wizard steps every
+ * changed file with a plain progress title, ] marks viewed and persists with
+ * the session, esc keeps progress, w resumes at the first unviewed file
+ * (across App instances - the daemon round-trip), the agent-note block
+ * renders only for files carrying a note, and the end card hands over to the
+ * submit confirm with the honest viewed count.
+ */
+
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { DaemonServer } from "@cueloop/daemon";
+import type { ReviewSession } from "@cueloop/schema";
+import { App } from "./App";
+import { DARK } from "./theme";
+import { press, waitForState, waitForText, waitForTextGone } from "./test-support";
+
+const PATCH = `diff --git a/src/a.ts b/src/a.ts
+index 111..222 100644
+--- a/src/a.ts
++++ b/src/a.ts
+@@ -1,2 +1,2 @@
+ export const a = 1;
+-export const b = 2;
++export const b = 3;
+diff --git a/src/b.ts b/src/b.ts
+index 333..444 100644
+--- a/src/b.ts
++++ b/src/b.ts
+@@ -1,2 +1,2 @@
+ // header
+-old line
++new line
+diff --git a/src/c.ts b/src/c.ts
+index 555..666 100644
+--- a/src/c.ts
++++ b/src/c.ts
+@@ -1,1 +1,2 @@
+ keep
++added tail
+`;
+
+let home: string;
+let server: DaemonServer;
+let session: ReviewSession;
+
+beforeEach(() => {
+  home = mkdtempSync(join(tmpdir(), "cueloop-walk-"));
+  server = new DaemonServer({ home, idleExitMs: 0 });
+  server.start();
+  session = server.core.sessionCreate({
+    workspace: { repoRoot: "/repo", branch: "main" },
+    artifact: { type: "diff", content: PATCH, meta: { title: "working tree" } },
+  });
+});
+afterEach(() => {
+  server.stop();
+  rmSync(home, { recursive: true, force: true });
+});
+
+async function renderApp() {
+  const setup = await testRender(<App home={home} sessionId={session.id} />, { width: 120, height: 34 });
+  // Wait for session content, not just the chrome: pressing w before the diff
+  // loads drops the walk intent (no session, no diff view) and hangs the test.
+  await waitForText(setup, "src/a.ts");
+  return setup;
+}
+
+type Setup = Awaited<ReturnType<typeof renderApp>>;
+
+/** Foreground colors (hex) of every styled span containing the needle. */
+function foregroundsOf(setup: Setup, needle: string): string[] {
+  const foregrounds: string[] = [];
+  for (const line of setup.captureSpans().lines) {
+    for (const span of line.spans) {
+      if (!span.text.includes(needle)) continue;
+      const [red, green, blue] = span.fg.toInts();
+      foregrounds.push("#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join(""));
+    }
+  }
+  return foregrounds;
+}
+
+describe("the guided walk", () => {
+  test("w walks all three files: progress title, persisted marks, end card, submit hand-over", async () => {
+    const setup = await renderApp();
+    await press(setup, "w");
+    await waitForText(setup, "file 1 of 3 · 0 viewed");
+    expect(setup.captureCharFrame()).toContain("src/a.ts");
+    expect(setup.captureCharFrame()).toContain("+1 -1");
+
+    await press(setup, "]");
+    await waitForText(setup, "file 2 of 3 · 1 viewed");
+    // the viewed mark rides the session record, not the client
+    await waitForState(setup, () => (server.core.sessionGet(session.id).viewedPaths ?? []).includes("src/a.ts"));
+
+    // [ steps back; the revisited card shows its viewed marker
+    await press(setup, "[");
+    await waitForText(setup, "file 1 of 3 · 1 viewed");
+    expect(setup.captureCharFrame()).toContain("· viewed");
+    await press(setup, "]");
+    await waitForText(setup, "file 2 of 3 · 1 viewed");
+
+    await press(setup, "]");
+    await waitForText(setup, "file 3 of 3 · 2 viewed");
+    await press(setup, "]");
+    await waitForText(setup, "walk complete");
+    expect(setup.captureCharFrame()).toContain("every file viewed (3/3)");
+    expect(server.core.sessionGet(session.id).viewedPaths).toEqual(["src/a.ts", "src/b.ts", "src/c.ts"]);
+
+    // the end card's return leaves the walk and opens the rail confirm
+    await press(setup, "enter");
+    await waitForText(setup, "submit review");
+    expect(setup.captureCharFrame()).toContain("3/3 files viewed");
+    await press(setup, "enter");
+    await waitForState(setup, () => server.core.sessionGet(session.id).status === "resolved");
+  });
+
+  test("esc keeps progress and w resumes at the first unviewed file", async () => {
+    const setup = await renderApp();
+    await press(setup, "w");
+    await waitForText(setup, "file 1 of 3 · 0 viewed");
+    await press(setup, "]");
+    await waitForText(setup, "file 2 of 3 · 1 viewed");
+
+    await press(setup, "escape");
+    await waitForTextGone(setup, "file 2 of 3");
+    // the sheet is back at full strength: no wizard card on screen
+    expect(setup.captureCharFrame()).not.toContain("· 1 viewed");
+
+    await press(setup, "w");
+    await waitForText(setup, "file 2 of 3 · 1 viewed");
+  });
+
+  test("a half-walked review resumes across App instances via the daemon", async () => {
+    const first = await renderApp();
+    await press(first, "w");
+    await waitForText(first, "file 1 of 3 · 0 viewed");
+    await press(first, "]");
+    await press(first, "]");
+    await waitForText(first, "file 3 of 3 · 2 viewed");
+    await waitForState(first, () => (server.core.sessionGet(session.id).viewedPaths ?? []).length === 2);
+    first.renderer.destroy();
+
+    // a fresh client reads the viewed set back from the session record
+    const second = await renderApp();
+    await press(second, "w");
+    await waitForText(second, "file 3 of 3 · 2 viewed");
+    expect(second.captureCharFrame()).toContain("src/c.ts");
+    // two full App boots with daemon round-trips need more than the default budget
+  }, 15_000);
+
+  test("the agent-note block renders only for files carrying a note", async () => {
+    server.core.sessionAnnotate(session.id, {
+      id: "note-b",
+      kind: "note",
+      anchor: { quote: "src/b.ts", prefix: "", suffix: "" },
+      body: "Swaps the stale line for the new constant.",
+    });
+    const setup = await renderApp();
+    await press(setup, "w");
+    await waitForText(setup, "file 1 of 3");
+    expect(setup.captureCharFrame()).not.toContain("agent note");
+
+    await press(setup, "]");
+    await waitForText(setup, "agent note");
+    expect(setup.captureCharFrame()).toContain("Swaps the stale line for the new constant.");
+
+    // a note is agent context, not reviewer feedback: it neither counts nor
+    // flips the default verdict, and never comes back in the feedback doc
+    await press(setup, "escape");
+    await waitForTextGone(setup, "agent note");
+    await press(setup, "enter");
+    await waitForText(setup, "0 annotations");
+    await press(setup, "enter");
+    await waitForState(setup, () => server.core.sessionGet(session.id).status === "resolved");
+    const resolved = server.core.sessionGet(session.id);
+    expect(resolved.verdict!.kind).toBe("approve");
+    expect(resolved.verdict!.feedback).not.toContain("Swaps the stale line");
+  });
+
+  test("the sheet dims behind the wizard; the preview keeps the diff colors", async () => {
+    const setup = await renderApp();
+    // before the walk the sheet's added line wears the insertion color
+    await waitForText(setup, "+new line");
+    expect(foregroundsOf(setup, "+new line")).toContain(DARK.insFg);
+
+    await press(setup, "w");
+    await waitForText(setup, "file 1 of 3 · 0 viewed");
+    // dimmed: the sheet line drops to the dim token...
+    expect(foregroundsOf(setup, "+new line")).toEqual([DARK.textDim]);
+    // ...while the wizard preview keeps the insertion color
+    expect(foregroundsOf(setup, "+export const b = 3;")).toContain(DARK.insFg);
+  });
+
+  test("walking a resolved review answers read-only", async () => {
+    server.core.sessionResolve(session.id, "approve", "");
+    const setup = await renderApp();
+    await waitForText(setup, "resolved");
+    await press(setup, "w");
+    await waitForText(setup, "review submitted - read-only");
+    expect(setup.captureCharFrame()).not.toContain("file 1 of 3");
+  });
+});

package/src/components/AnnotationCard.compose-rows.test.ts

@@ -0,0 +1,49 @@
+/**
+ * The composer's auto-grow row math as a pure function: hard newlines and soft
+ * wrapping both add rows, growth stops at the cap, and a non-positive width
+ * (before layout is known) degrades to a hard-newline count. The live textarea
+ * scrolls internally past the cap, so this only needs to get the growth curve
+ * and the ceiling right.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { COMPOSE_MAX_ROWS, composeRowCount } from "./AnnotationCard";
+
+describe("composeRowCount", () => {
+  const width = 10;
+
+  test("empty and short text are one row", () => {
+    expect(composeRowCount("", width)).toBe(1);
+    expect(composeRowCount("hi", width)).toBe(1);
+    expect(composeRowCount("exactly-10", width)).toBe(1); // length 10 / width 10
+  });
+
+  test("hard newlines add rows", () => {
+    expect(composeRowCount("a\nb", width)).toBe(2);
+    expect(composeRowCount("a\nb\nc", width)).toBe(3);
+    // a blank trailing line still occupies a row
+    expect(composeRowCount("a\n", width)).toBe(2);
+  });
+
+  test("a soft-wrapped long line grows the box", () => {
+    expect(composeRowCount("a".repeat(11), width)).toBe(2); // ceil(11/10)
+    expect(composeRowCount("a".repeat(25), width)).toBe(3); // ceil(25/10)
+  });
+
+  test("wrapping and hard newlines combine", () => {
+    // 1 row for "short" plus ceil(21/10)=3 rows for the long line
+    expect(composeRowCount("short\n" + "b".repeat(21), width)).toBe(4);
+  });
+
+  test("growth is capped", () => {
+    expect(composeRowCount("a".repeat(100), width)).toBe(COMPOSE_MAX_ROWS);
+    expect(composeRowCount("l\ni\nn\ne\ns\nx", width)).toBe(COMPOSE_MAX_ROWS);
+    expect(composeRowCount("a\nb", width, 1)).toBe(1); // custom cap
+  });
+
+  test("a non-positive width counts hard newlines only, never divides by zero", () => {
+    expect(composeRowCount("a".repeat(100), 0)).toBe(1);
+    expect(composeRowCount("a\nb\nc", 0)).toBe(3);
+    expect(composeRowCount("a".repeat(100), -5)).toBe(1);
+  });
+});

package/src/components/AnnotationCard.stories.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { AnnotationCard } from "./AnnotationCard";
+
+export const meta: StoryMeta = { title: "AnnotationCard" };
+
+const draftCallbacks = { onInput: () => {}, onSave: () => {}, onCancel: () => {} };
+
+export const CommentDraft: Story = {
+  render: () => (
+    <AnnotationCard kind="comment" quote="persists sessions" draft={{ text: "Which daemon?", ...draftCallbacks }} />
+  ),
+  expectedColors: [DARK.accent, DARK.elevated],
+};
+
+export const SuggestionDraft: Story = {
+  render: () => (
+    <AnnotationCard kind="suggestion" quote="move the store" draft={{ text: "", ...draftCallbacks }} />
+  ),
+  expectedColors: [DARK.green],
+};
+
+export const SavedSelected: Story = {
+  render: () => (
+    <AnnotationCard
+      kind="comment"
+      quote="persists sessions"
+      saved={{
+        body: "Which daemon owns this?",
+        isSelected: true,
+        isOrphan: false,
+        isBlocking: false,
+        editing: null,
+        onPress: () => {},
+      }}
+    />
+  ),
+  expectedColors: [DARK.elevated],
+};
+
+export const SavedOrphanBlocking: Story = {
+  render: () => (
+    <AnnotationCard
+      kind="comment"
+      quote="a removed passage"
+      saved={{
+        body: "The passage is gone.",
+        isSelected: false,
+        isOrphan: true,
+        isBlocking: true,
+        editing: null,
+        onPress: () => {},
+      }}
+    />
+  ),
+  expectedColors: [DARK.red],
+};
+
+export const SavedEditing: Story = {
+  render: () => (
+    <AnnotationCard
+      kind="suggestion"
+      quote="move the store"
+      saved={{
+        body: "old body",
+        isSelected: true,
+        isOrphan: false,
+        isBlocking: false,
+        editing: { text: "new body", ...draftCallbacks },
+        onPress: () => {},
+      }}
+    />
+  ),
+};

package/src/components/AnnotationCard.tsx

@@ -0,0 +1,189 @@
+/**
+ * One annotation component in three modes: a draft composer (bordered card
+ * inline in the document flow), a saved rail card, and the rail card editing
+ * its body in place. Compose, saved, and re-edit share this rendering path,
+ * so the kind-color and quote treatment can never drift between them.
+ *
+ * Bodies are multiline: the composer is a textarea (wrap, undo/redo). Plain ⏎
+ * stays the save key while ⌥/Alt+⏎ and shift+⏎ insert a new line (the Slack
+ * convention). The box auto-grows with the wrapped text up to a cap, then
+ * scrolls internally.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import type { KeyBinding, TextareaRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Card } from "./primitives/Card";
+import { Button } from "./primitives/Button";
+import { Toolbar } from "./primitives/Toolbar";
+import { truncateToSingleLine } from "./truncate-text";
+
+export interface AnnotationDraft {
+  text: string;
+  onInput: (text: string) => void;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+export interface AnnotationSaved {
+  body: string;
+  isSelected: boolean;
+  isOrphan: boolean;
+  isBlocking: boolean;
+  /** Non-null while the card body is being rewritten in place. */
+  editing: AnnotationDraft | null;
+  onPress: () => void;
+}
+
+export interface AnnotationCardProps {
+  id?: string;
+  kind: string;
+  quote: string;
+  draft?: AnnotationDraft;
+  saved?: AnnotationSaved;
+  theme?: Theme;
+}
+
+/**
+ * ⏎ submits (which keeps the textarea from inserting its default newline; the
+ * grammar owns the actual save). ⌥/Alt+⏎ and shift+⏎ insert a newline so the
+ * body can grow multiline without leaving the composer.
+ *
+ * Option/Alt reaches a binding as `meta`, not `option`: a binding key here is
+ * built from name+ctrl+shift+meta+super only, so the newline binding matches on
+ * `meta`. This also overrides the textarea default that maps meta+⏎ to submit.
+ */
+const COMPOSE_KEY_BINDINGS: KeyBinding[] = [
+  { name: "return", action: "submit" },
+  { name: "return", meta: true, action: "newline" },
+  { name: "return", shift: true, action: "newline" },
+];
+
+/** The composer never grows past this many rows; beyond it the textarea scrolls. */
+export const COMPOSE_MAX_ROWS = 4;
+
+/**
+ * Visible row count for the composer, so a soft-wrapped long line grows the box
+ * just like a hard newline does. Each logical line takes `ceil(length /
+ * contentWidth)` visual rows (at least one), summed over the hard-newline lines
+ * and capped. A non-positive width (before layout is known) counts hard
+ * newlines only. Beyond the cap the textarea scrolls internally and keeps the
+ * caret line in view.
+ */
+export function composeRowCount(text: string, contentWidth: number, cap: number = COMPOSE_MAX_ROWS): number {
+  const usableWidth = contentWidth > 0 ? contentWidth : Number.MAX_SAFE_INTEGER;
+  let visualRowCount = 0;
+  for (const line of text.split("\n")) {
+    visualRowCount += Math.max(1, Math.ceil(line.length / usableWidth));
+  }
+  return Math.min(cap, Math.max(1, visualRowCount));
+}
+
+function DraftEditor({
+  draft,
+  rows,
+  onRowsChange,
+  theme,
+}: {
+  draft: AnnotationDraft;
+  /** Current visible height in rows; owned by the parent so the card frame agrees. */
+  rows: number;
+  onRowsChange: (rows: number) => void;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const editorRef = useRef<TextareaRenderable | null>(null);
+  // re-edit opens with the caret after the existing body, like a text field
+  const initialTextLength = useRef(draft.text.length);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    editor.cursorOffset = initialTextLength.current;
+    // the box is laid out now, so its width is known: size to the wrapped body
+    onRowsChange(composeRowCount(editor.plainText, editor.width));
+  }, []);
+  return (
+    <>
+      <textarea
+        ref={editorRef}
+        focused
+        initialValue={draft.text}
+        placeholder="write a note..."
+        keyBindings={COMPOSE_KEY_BINDINGS}
+        onContentChange={() => {
+          const editor = editorRef.current;
+          if (!editor) return;
+          draft.onInput(editor.plainText);
+          onRowsChange(composeRowCount(editor.plainText, editor.width));
+        }}
+        style={{
+          height: rows,
+          backgroundColor: tokens.elevated,
+          focusedBackgroundColor: tokens.elevated,
+          textColor: tokens.text,
+          focusedTextColor: tokens.text,
+        }}
+      />
+      <Toolbar>
+        <Button variant="solid" marginRight={2} onPress={draft.onSave} theme={theme}>
+          {" Save ⏎ "}
+        </Button>
+        <Button onPress={draft.onCancel} theme={theme}>
+          {" Cancel esc "}
+        </Button>
+      </Toolbar>
+    </>
+  );
+}
+
+export function AnnotationCard({ id, kind, quote, draft, saved, theme }: AnnotationCardProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const kindColor = kind === "suggestion" ? tokens.green : tokens.accent;
+  const activeDraft = draft ?? saved?.editing ?? null;
+  // The composer's visible height, grown from the wrapped text. It is shared
+  // with the card frame (contentRows) so the border never clips the textarea
+  // or the toolbar. Seeded from hard newlines, then corrected once the mounted
+  // textarea reports its measured width.
+  const [editorRowCount, setEditorRowCount] = useState(() =>
+    // Width 0 is the "layout not known yet" contract: count hard newlines only,
+    // until the mounted textarea reports its measured width below.
+    composeRowCount(activeDraft?.text ?? "", 0),
+  );
+  if (draft) {
+    const verb = kind === "suggestion" ? "suggest replacement for" : "comment on";
+    return (
+      <Card
+        title={` ${verb} "${truncateToSingleLine(quote, 40)}" `}
+        contentRows={editorRowCount + 1}
+        borderColor={kindColor}
+        marginLeft={2}
+        marginRight={2}
+        theme={theme}
+      >
+        <DraftEditor draft={draft} rows={editorRowCount} onRowsChange={setEditorRowCount} theme={theme} />
+      </Card>
+    );
+  }
+  const card = saved!;
+  return (
+    <box
+      id={id}
+      style={{ flexDirection: "column", marginBottom: 1, backgroundColor: card.isSelected ? tokens.elevated : undefined }}
+      onMouseUp={card.onPress}
+    >
+      <text fg={card.isSelected ? tokens.text : kindColor}>
+        {card.isSelected ? "▸ " : "  "}
+        {kind.toUpperCase()}
+        {card.isBlocking ? <span fg={tokens.red}> · BLOCKING</span> : null}
+        <span fg={tokens.textDim}>{card.isOrphan ? " · ORPHANED" : " · pending"}</span>
+      </text>
+      <text fg={tokens.textDim}>  "{truncateToSingleLine(quote, 26)}"</text>
+      {card.editing ? (
+        <DraftEditor draft={card.editing} rows={editorRowCount} onRowsChange={setEditorRowCount} theme={theme} />
+      ) : (
+        <text fg={card.isOrphan ? tokens.textDim : tokens.textMuted}>  {truncateToSingleLine(card.body, 28)}</text>
+      )}
+    </box>
+  );
+}

package/src/components/Breadcrumb.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { Breadcrumb } from "./Breadcrumb";
+
+export const meta: StoryMeta = { title: "Breadcrumb" };
+
+export const SessionHeader: Story = {
+  render: () => (
+    <Breadcrumb
+      items={[
+        { label: "cueloop", tone: "accent" },
+        { label: "Migration Plan · rev 2", tone: "dim" },
+        { label: "resolved: approve", tone: "green" },
+      ]}
+    />
+  ),
+  expectedColors: [DARK.accent, DARK.green, DARK.panel],
+};

package/src/components/Breadcrumb.tsx

@@ -0,0 +1,38 @@
+/**
+ * One-row breadcrumb trail: toned segments joined by " · " on the panel
+ * surface. The app header is a breadcrumb (product · artifact · revision)
+ * followed by state badges; each item picks a semantic tone.
+ */
+
+import React from "react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+
+export type BreadcrumbTone = "accent" | "dim" | "text" | "green";
+
+export interface BreadcrumbItem {
+  label: string;
+  tone?: BreadcrumbTone;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  theme?: Theme;
+}
+
+export function Breadcrumb({ items, theme }: BreadcrumbProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const toneColor = (tone?: BreadcrumbTone): string =>
+    tone === "accent" ? tokens.accent : tone === "green" ? tokens.green : tone === "text" ? tokens.text : tokens.textDim;
+  return (
+    <box style={{ height: 1, backgroundColor: tokens.panel, paddingLeft: 1, flexDirection: "row" }}>
+      <text fg={tokens.text}>
+        {items.map((item, index) => (
+          <span key={index} fg={toneColor(item.tone)}>
+            {index === 0 ? item.label : ` · ${item.label}`}
+          </span>
+        ))}
+      </text>
+    </box>
+  );
+}

package/src/components/CodeBlock.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { CodeBlock } from "./CodeBlock";
+
+export const meta: StoryMeta = { title: "CodeBlock" };
+
+const SNIPPET = `export function gate(full: number) {
+  // threshold
+  return full < 0.6 ? "blocked" : "clear";
+}`;
+
+export const Typescript: Story = {
+  render: () => <CodeBlock language="ts" content={SNIPPET} />,
+  expectedColors: [DARK.elevated],
+};
+
+export const CursorAnnotatedEdited: Story = {
+  render: () => <CodeBlock language="ts" content={SNIPPET} isCursor isAnnotated changeTag="edited" marginTop={1} />,
+  expectedColors: [DARK.accent],
+};
+
+export const UnknownLanguage: Story = {
+  render: () => <CodeBlock language="brainfog" content={"plain verbatim lines\n  with indentation"} />,
+};

package/src/components/CodeBlock.tsx

@@ -0,0 +1,68 @@
+/**
+ * Fenced code block: verbatim lines in a contained elevated box, highlighted
+ * by the native code renderable (tree-sitter). Unstyled text draws first, so
+ * the content never flashes empty while highlights resolve; unknown languages
+ * stay unstyled.
+ */
+
+import React from "react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { filetypeFor, syntaxStyleFor } from "./syntax-highlight";
+
+export interface CodeBlockProps {
+  id?: string;
+  /** Markdown fence info string ("tsx", "python", ...). */
+  language?: string;
+  content: string;
+  isCursor?: boolean;
+  /** Vertical rhythm above the block. */
+  marginTop?: number;
+  isAnnotated?: boolean;
+  /** Working-copy change tag rendered after the language label. */
+  changeTag?: "cut" | "new" | "edited";
+  theme?: Theme;
+}
+
+export function CodeBlock({
+  id,
+  language,
+  content,
+  isCursor = false,
+  marginTop = 0,
+  isAnnotated = false,
+  changeTag,
+  theme,
+}: CodeBlockProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const tagColor = changeTag === "cut" ? tokens.red : changeTag === "new" ? tokens.green : tokens.accent;
+  return (
+    <box id={id} style={{ flexDirection: "column", marginTop }}>
+      <text>
+        <span fg={isCursor ? tokens.accent : tokens.textDim}>{isCursor ? "▎ " : "  "}</span>
+        <span fg={tokens.textDim}>{language ?? "code"}</span>
+        {isAnnotated ? <span fg={tokens.accent}> ◆</span> : null}
+        {changeTag ? <span fg={tagColor}> [{changeTag}]</span> : null}
+      </text>
+      <box
+        style={{
+          flexDirection: "column",
+          backgroundColor: tokens.elevated,
+          paddingLeft: 2,
+          paddingRight: 2,
+          paddingTop: 1,
+          paddingBottom: 1,
+          marginLeft: 2,
+        }}
+      >
+        <code
+          content={content}
+          filetype={filetypeFor(language)}
+          syntaxStyle={syntaxStyleFor(tokens)}
+          selectable={false}
+          style={{ wrapMode: "none", fg: tokens.textMuted, bg: tokens.elevated }}
+        />
+      </box>
+    </box>
+  );
+}