@cueloop/client 0.1.0-alpha.4 → 0.1.0-alpha.41

package/src/components/agent-launcher.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { AgentLauncher } from "./agent-launcher";
+import { fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "AgentLauncher" };
+
+/** The launcher expects the rail's narrow, height-constrained column. */
+function RailFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box style={{ width: 40, height: 24, paddingLeft: 2, backgroundColor: DARK.panel }}>
+      {children}
+    </box>
+  );
+}
+
+export const Launcher: Story = {
+  render: () => (
+    <RailFrame>
+      <AgentLauncher session={fixturePlanSession()} onLaunchHarness={() => {}} theme={DARK} />
+    </RailFrame>
+  ),
+  expectedColors: [DARK.accent, "#cc785c"],
+  size: { width: 40, height: 24 },
+};

package/src/components/agent-launcher.test.tsx

@@ -0,0 +1,21 @@
+import { describe, expect, test } from "bun:test";
+import { HARNESS_LAUNCHERS, planHandoffBriefing } from "./agent-launcher";
+
+describe("planHandoffBriefing", () => {
+  test("references the session by id and directs the agent to read then annotate, not rewrite", () => {
+    // Act
+    const briefing = planHandoffBriefing("ses_42");
+
+    // Assert
+    expect(briefing).toContain("cueloop session get ses_42");
+    expect(briefing).toContain("cueloop session annotate ses_42");
+    expect(briefing).toContain("Do not rewrite the plan");
+  });
+});
+
+describe("HARNESS_LAUNCHERS", () => {
+  test("carries the three branded harnesses with their launch commands", () => {
+    // Assert
+    expect(HARNESS_LAUNCHERS.map((harness) => harness.command)).toEqual(["cc", "pi", "codex"]);
+  });
+});

package/src/components/agent-launcher.tsx

@@ -0,0 +1,180 @@
+/**
+ * The Agent rail launcher: bring-your-own review harness. Branded claude code /
+ * pi / codex cards that, on click, run that harness in a herdr split beside the
+ * review (see launchHarnessInSplit) so a reviewer can ask an agent about the plan
+ * without leaving the tab. A plan-context toggle seeds a briefing into the split.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import type { ReviewSession } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
+import {
+  embeddedTerminalAvailable,
+  registerTerminalPane,
+  type TerminalPaneRenderable,
+} from "./terminal-pane";
+
+registerTerminalPane();
+
+/** A running in-tab agent terminal, handed to the app so it can route keys and detach. */
+export interface AgentTerminalHandle {
+  write: (data: string) => void;
+  detach: () => void;
+}
+
+/** One launchable harness: its rail command and the real logo, rendered as colored rows. */
+export interface HarnessLauncher {
+  id: string;
+  name: string;
+  /** The shell command that starts the harness, run in the split. */
+  command: string;
+  /** Brand color for the mark. */
+  color: string;
+  /** Multi-row mark rendered from the real logo. */
+  logo: string[];
+}
+
+/** Claude Code's brand coral - not a theme token, the mark keeps its own color. */
+const CLAUDE_CORAL = "#CC785C";
+
+/** The bring-your-own harnesses, with their real marks (finalized in the prototype). */
+export const HARNESS_LAUNCHERS: HarnessLauncher[] = [
+  {
+    id: "claude",
+    name: "claude code",
+    command: "cc",
+    color: CLAUDE_CORAL,
+    logo: [" ▛████▜", "▜██████▛", " ▝▝  ▝▝"],
+  },
+  { id: "pi", name: "pi", command: "pi", color: "#e4e6ec", logo: ["███ ", "█ █ ", "██ █", "█  █"] },
+  {
+    id: "codex",
+    name: "codex",
+    command: "codex",
+    color: "#e4e6ec",
+    logo: ["┌───┐", "│>_ │", "└───┘"],
+  },
+];
+
+/** The briefing typed into a launched harness when the plan-context toggle is on. */
+export function planHandoffBriefing(sessionId: string): string {
+  return `Review this cueloop plan: read it with 'cueloop session get ${sessionId}', then comment with 'cueloop session annotate ${sessionId} --author me --quote "<exact span>" --body "<comment>"'. Do not rewrite the plan.`;
+}
+
+function LogoMark({ harness }: { harness: HarnessLauncher }): React.ReactNode {
+  return (
+    <box style={{ width: 9, flexShrink: 0, flexDirection: "column", alignItems: "flex-start" }}>
+      {harness.logo.map((row) => (
+        <text key={row} fg={harness.color}>
+          {row}
+        </text>
+      ))}
+    </box>
+  );
+}
+
+/** Props for the Agent tab body: the session under review plus the launch callbacks. */
+export interface AgentLauncherProps {
+  session: ReviewSession;
+  /**
+   * Fallback launch when no embedded terminal ships for this platform: run the
+   * harness in a herdr split. seedText is the plan-context briefing.
+   */
+  onLaunchHarness: (command: string, seedText?: string) => void;
+  /** Notifies the app of the in-tab terminal handle (or null when detached) so it can route keys. */
+  onAgentTerminal?: (handle: AgentTerminalHandle | null) => void;
+  theme?: Theme;
+}
+
+/**
+ * The Agent tab body: branded launcher cards plus a plan-context toggle. Replaces
+ * the old dead agent/status/revision placeholder (now a dim footer line). When a
+ * prebuilt libghostty-vt ships for the platform, a picked harness runs embedded
+ * inside this tab; otherwise it falls back to a herdr split.
+ */
+export function AgentLauncher({
+  session,
+  onLaunchHarness,
+  onAgentTerminal,
+  theme,
+}: AgentLauncherProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const [seedContext, setSeedContext] = useState(true);
+  const [running, setRunning] = useState<{ harness: HarnessLauncher; seed?: string } | null>(null);
+  const paneRef = useRef<TerminalPaneRenderable | null>(null);
+
+  const launch = (harness: HarnessLauncher): void => {
+    const seed = seedContext ? planHandoffBriefing(session.id) : undefined;
+    if (embeddedTerminalAvailable()) setRunning({ harness, seed });
+    else onLaunchHarness(harness.command, seed);
+  };
+  const detach = (): void => setRunning(null);
+
+  useEffect(() => {
+    if (!running) return onAgentTerminal?.(null);
+    onAgentTerminal?.({ write: (data) => paneRef.current?.write(data), detach });
+    return () => onAgentTerminal?.(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [running]);
+
+  if (running) {
+    return (
+      <box style={{ flexDirection: "column", flexGrow: 1 }}>
+        <box style={{ flexDirection: "row" }} onMouseUp={detach}>
+          <text fg={running.harness.color}>{running.harness.name}</text>
+          <box style={{ flexGrow: 1 }} />
+          <text fg={tokens.textDim}>✕ detach (⌃])</text>
+        </box>
+        {React.createElement("terminalPane", {
+          ref: paneRef,
+          command: running.harness.command,
+          cwd: session.artifact.meta.cwd ?? process.cwd(),
+          seedText: running.seed,
+          onExit: detach,
+          style: { flexGrow: 1 },
+        })}
+      </box>
+    );
+  }
+
+  return (
+    <box style={{ flexDirection: "column", flexGrow: 1 }}>
+      <text fg={tokens.text}>Ask an agent about this plan</text>
+      <box style={{ height: 1 }} />
+      {HARNESS_LAUNCHERS.map((harness) => (
+        <box
+          key={harness.id}
+          style={{
+            flexDirection: "row",
+            height: harness.logo.length + 2,
+            border: true,
+            borderStyle: FRAME_BORDER_STYLE,
+            backgroundColor: "transparent",
+            borderColor: tokens.border,
+            marginBottom: 1,
+            paddingLeft: 1,
+            paddingRight: 1,
+          }}
+          onMouseUp={() => launch(harness)}
+        >
+          <LogoMark harness={harness} />
+          <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 1 }}>
+            <text fg={tokens.textMuted}>{harness.name}</text>
+            <text fg={tokens.textDim}>launch in rail ▸</text>
+          </box>
+        </box>
+      ))}
+      <box style={{ flexDirection: "row" }} onMouseUp={() => setSeedContext((on) => !on)}>
+        <text fg={tokens.textDim}>plan context: </text>
+        <text fg={tokens.accent}>{seedContext ? "seed the plan ▸" : "none ▸"}</text>
+      </box>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={tokens.textDim}>
+        {session.artifact.meta.agent ?? "unknown"} · {session.status} · rev{" "}
+        {session.revisions.length}
+      </text>
+    </box>
+  );
+}

package/src/components/diff-sheet-layout.test.ts

@@ -0,0 +1,127 @@
+import { describe, expect, test } from "bun:test";
+import type { Annotation } from "@cueloop/schema";
+import type { DiffRow } from "../view-diff";
+import type { IntralineRun } from "../diff-intraline";
+import type { SyntaxSpan } from "../diff-syntax";
+import { DARK } from "../theme";
+import {
+  annotatedRowsByIndex,
+  coloredRowSpans,
+  rowContentOffsets,
+  rowLine,
+  segmentRows,
+} from "./diff-sheet-layout";
+
+function row(kind: DiffRow["kind"], text: string, extra: Partial<DiffRow> = {}): DiffRow {
+  return { kind, text, file: "a.ts", ...extra };
+}
+
+function annotation(quote: string): Annotation {
+  return {
+    id: "a1",
+    kind: "comment",
+    body: "note",
+    anchor: { quote, prefix: "", suffix: "" },
+    createdAt: "2026-01-01T00:00:00Z",
+  };
+}
+
+describe("rowLine", () => {
+  test("strips the trailing newline the patch carries", () => {
+    // Arrange / Act / Assert
+    expect(rowLine(row("add", "const x = 1;\n"))).toBe("const x = 1;");
+  });
+});
+
+describe("annotatedRowsByIndex", () => {
+  test("maps an annotation to the code row whose text matches its quote", () => {
+    // Arrange
+    const rows = [row("file", "a.ts"), row("ctx", "keep"), row("add", "new line")];
+
+    // Act
+    const byRow = annotatedRowsByIndex(rows, [annotation("new line")]);
+
+    // Assert
+    expect([...byRow.keys()]).toEqual([2]);
+  });
+});
+
+describe("segmentRows", () => {
+  test("splits header rows out and closes a chunk after an annotated row", () => {
+    // Arrange
+    const rows = [
+      row("file", "a.ts"),
+      row("hunk", "@@"),
+      row("ctx", "keep"),
+      row("add", "changed"),
+    ];
+    const annotatedByRow = new Map<number, Annotation>([[3, annotation("changed")]]);
+
+    // Act
+    const segments = segmentRows(rows, annotatedByRow);
+
+    // Assert
+    expect(segments.map((segment) => segment.kind)).toEqual(["header", "header", "chunk"]);
+    const chunk = segments[2];
+    expect(chunk?.kind).toBe("chunk");
+    if (chunk?.kind === "chunk") expect(chunk.annotation?.id).toBe("a1");
+  });
+
+  test("closes a chunk at the compose row so a draft card can follow it", () => {
+    // Arrange - two code rows, composing on the first
+    const rows = [row("add", "one"), row("add", "two")];
+
+    // Act
+    const segments = segmentRows(rows, new Map(), 0);
+
+    // Assert - the first row is its own chunk, the second a separate chunk
+    expect(segments).toHaveLength(2);
+    expect(segments.every((segment) => segment.kind === "chunk")).toBe(true);
+  });
+});
+
+describe("rowContentOffsets", () => {
+  test("counts one row per header and an extra row for a chunk's annotation card", () => {
+    // Arrange
+    const rows = [row("file", "a.ts"), row("add", "changed")];
+    const annotatedByRow = new Map<number, Annotation>([[1, annotation("changed")]]);
+    const segments = segmentRows(rows, annotatedByRow);
+
+    // Act
+    const offsets = rowContentOffsets(segments);
+
+    // Assert - header at y0, its chunk row at y1; the card would sit at y2
+    expect(offsets[0]).toBe(0);
+    expect(offsets[1]).toBe(1);
+  });
+});
+
+describe("coloredRowSpans", () => {
+  test("a changed word keeps the diff color while unchanged text dims", () => {
+    // Arrange - "old" is the change, " tail" unchanged, on a modified line
+    const runs: IntralineRun[] = [
+      { text: "old", changed: true },
+      { text: " tail", changed: false },
+    ];
+
+    // Act
+    const spans = coloredRowSpans("old tail", runs, undefined, DARK.deletedForeground, DARK);
+
+    // Assert
+    expect(spans).toEqual([
+      { text: "old", foreground: DARK.deletedForeground },
+      { text: " tail", foreground: DARK.textDim },
+    ]);
+  });
+
+  test("syntax color applies to unchanged text when there is no intra-line run", () => {
+    // Arrange - a keyword span over the whole word, no intra-line runs
+    const syntax: SyntaxSpan[] = [{ start: 0, end: 6, group: "keyword" }];
+
+    // Act
+    const spans = coloredRowSpans("return", undefined, syntax, DARK.textMuted, DARK);
+
+    // Assert
+    expect(spans).toEqual([{ text: "return", foreground: DARK.accent }]);
+  });
+});

package/src/components/diff-sheet-layout.ts

@@ -0,0 +1,167 @@
+/**
+ * Pure layout logic for the diff review sheet, split out so it can be tested
+ * without rendering: grouping rows into chunks around headers and annotations,
+ * resolving each row's colored spans (syntax under the intra-line change color),
+ * mapping annotations to rows, and the content-y offset of each row for scroll.
+ * DiffSheet.tsx is the thin renderer over these.
+ */
+
+import type { Annotation } from "@cueloop/schema";
+import type { DiffRow } from "../view-diff";
+import type { Theme } from "../theme";
+import type { IntralineRun } from "../diff-intraline";
+import type { SyntaxSpan } from "../diff-syntax";
+import { colorForSyntaxGroup } from "./syntax-highlight";
+
+/** A header row rendered on its own line, or a contiguous run of code rows. */
+export type DiffSegment =
+  | { kind: "header"; rowIndex: number; row: DiffRow }
+  | { kind: "chunk"; firstRowIndex: number; rows: DiffRow[]; annotation: Annotation | null };
+
+/** One rendered span of a row: its text and its resolved foreground color. */
+export interface ColoredSpan {
+  text: string;
+  foreground: string;
+}
+
+/** Row text carries the patch's trailing newline; rendering strips it. */
+export function rowLine(row: DiffRow): string {
+  return row.text.replace(/\n$/, "");
+}
+
+/** The annotation anchored to each row, matched by its verbatim quote. */
+export function annotatedRowsByIndex(
+  rows: DiffRow[],
+  annotations: Annotation[],
+): Map<number, Annotation> {
+  const byRow = new Map<number, Annotation>();
+  for (const annotation of annotations) {
+    const rowIndex = rows.findIndex(
+      (row) =>
+        row.text === annotation.anchor.quote &&
+        (row.kind === "ctx" || row.kind === "add" || row.kind === "del"),
+    );
+    if (rowIndex !== -1) byRow.set(rowIndex, annotation);
+  }
+  return byRow;
+}
+
+/** Group rows into header segments and code chunks; a chunk closes after an
+ *  annotated or composed row so a card can render directly below that line. */
+export function segmentRows(
+  rows: DiffRow[],
+  annotatedByRow: Map<number, Annotation>,
+  composeRowIndex?: number,
+): DiffSegment[] {
+  const segments: DiffSegment[] = [];
+  let chunk: DiffRow[] = [];
+  let chunkStart = 0;
+
+  const closeChunk = (annotation: Annotation | null): void => {
+    if (chunk.length) {
+      segments.push({ kind: "chunk", firstRowIndex: chunkStart, rows: chunk, annotation });
+    }
+    chunk = [];
+  };
+
+  for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+    const row = rows[rowIndex]!;
+    if (row.kind === "file" || row.kind === "hunk") {
+      closeChunk(null);
+      segments.push({ kind: "header", rowIndex, row });
+      chunkStart = rowIndex + 1;
+      continue;
+    }
+    if (!chunk.length) chunkStart = rowIndex;
+    chunk.push(row);
+
+    const annotation = annotatedByRow.get(rowIndex);
+    if (annotation) {
+      closeChunk(annotation);
+      chunkStart = rowIndex + 1;
+    } else if (rowIndex === composeRowIndex) {
+      closeChunk(null);
+      chunkStart = rowIndex + 1;
+    }
+  }
+  closeChunk(null);
+  return segments;
+}
+
+/** The content-y offset of each row index, so the cursor can be scrolled into
+ *  view; a chunk's annotation adds one row for its card. */
+export function rowContentOffsets(segments: DiffSegment[]): number[] {
+  const offsets: number[] = [];
+  let contentY = 0;
+  for (const segment of segments) {
+    if (segment.kind === "header") {
+      offsets[segment.rowIndex] = contentY;
+      contentY += 1;
+    } else {
+      segment.rows.forEach((_, lineIndex) => {
+        offsets[segment.firstRowIndex + lineIndex] = contentY + lineIndex;
+      });
+      contentY += segment.rows.length + (segment.annotation ? 1 : 0);
+    }
+  }
+  return offsets;
+}
+
+/**
+ * Colored spans for one row, resolved per character: an intra-line changed word
+ * keeps the diff color, otherwise the syntax color applies, falling back to the
+ * dim token on the unchanged part of a modified line or the row's base color.
+ * Adjacent same-color characters coalesce so a row stays a few spans.
+ */
+export function coloredRowSpans(
+  text: string,
+  intralineRuns: IntralineRun[] | undefined,
+  syntaxSpans: SyntaxSpan[] | undefined,
+  baseColor: string,
+  tokens: Theme,
+): ColoredSpan[] {
+  const changed = changedColumns(text.length, intralineRuns);
+  const syntaxColorByColumn = syntaxColorColumns(text.length, syntaxSpans, tokens);
+  const isModifiedLine = intralineRuns !== undefined;
+
+  const spans: ColoredSpan[] = [];
+  for (let column = 0; column < text.length; column++) {
+    const color = changed[column]
+      ? baseColor
+      : (syntaxColorByColumn[column] ?? (isModifiedLine ? tokens.textDim : baseColor));
+    const previous = spans[spans.length - 1];
+    if (previous && previous.foreground === color) previous.text += text[column];
+    else spans.push({ text: text[column]!, foreground: color });
+  }
+  return spans;
+}
+
+/** Which columns are the intra-line change on a modified line. */
+function changedColumns(length: number, intralineRuns: IntralineRun[] | undefined): boolean[] {
+  const changed = Array.from({ length }, () => false);
+  if (!intralineRuns) return changed;
+  let offset = 0;
+  for (const run of intralineRuns) {
+    if (run.changed)
+      for (let index = 0; index < run.text.length; index++) changed[offset + index] = true;
+    offset += run.text.length;
+  }
+  return changed;
+}
+
+/** The syntax color per column, or undefined where a column has no token. */
+function syntaxColorColumns(
+  length: number,
+  syntaxSpans: SyntaxSpan[] | undefined,
+  tokens: Theme,
+): Array<string | undefined> {
+  const colors: Array<string | undefined> = Array.from({ length }, () => undefined);
+  for (const span of syntaxSpans ?? []) {
+    const color = colorForSyntaxGroup(span.group, tokens);
+    if (!color) continue;
+    for (let column = span.start; column < span.end && column < length; column++) {
+      colors[column] = color;
+    }
+  }
+  return colors;
+}

package/src/components/primitives/Button.stories.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { Button } from "./Button";
+import { Toolbar } from "./Toolbar";
+
+export const meta: StoryMeta = { title: "primitives/Button" };
+
+export const Variants: Story = {
+  render: () => (
+    <Toolbar>
+      <Button variant="solid" marginRight={2} onPress={() => {}}>
+        {" Save "}
+      </Button>
+      <Button marginRight={2} onPress={() => {}}>
+        {" Cancel esc "}
+      </Button>
+      <Button variant="accent-text" onPress={() => {}}>
+        {"Submit review"}
+      </Button>
+    </Toolbar>
+  ),
+  expectedColors: [DARK.accent, DARK.accentInk, DARK.textDim],
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Button isDisabled onPress={() => {}}>
+      {" Edit "}
+    </Button>
+  ),
+};

package/src/components/primitives/Button.tsx

@@ -0,0 +1,48 @@
+/**
+ * Word-button: a pressable label. `onPress` unifies mouse and (future)
+ * keyboard activation; `isDisabled` swallows presses without changing the
+ * rendered label, so read-only affordances keep their place in the layout.
+ */
+
+import React from "react";
+import type { Theme } from "../../theme";
+import { useComponentTheme } from "../theme-context";
+
+export interface ButtonProps {
+  /** Unified activation: mouse release today, keyboard activation tomorrow. */
+  onPress: () => void;
+  isDisabled?: boolean;
+  /** solid = accent-filled call to action; plain = quiet word-button. */
+  variant?: "solid" | "plain" | "accent-text";
+  marginRight?: number;
+  theme?: Theme;
+  children: string;
+}
+
+export function Button({
+  onPress,
+  isDisabled = false,
+  variant = "plain",
+  marginRight,
+  theme,
+  children,
+}: ButtonProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const backgroundColor = variant === "solid" ? tokens.accent : undefined;
+  const foreground =
+    variant === "solid"
+      ? tokens.accentInk
+      : variant === "accent-text"
+        ? tokens.accent
+        : tokens.textDim;
+  return (
+    <box
+      style={{ backgroundColor, marginRight }}
+      onMouseUp={() => {
+        if (!isDisabled) onPress();
+      }}
+    >
+      <text fg={foreground}>{children}</text>
+    </box>
+  );
+}

package/src/components/primitives/Card.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { Card } from "./Card";
+
+export const meta: StoryMeta = { title: "primitives/Card" };
+
+export const Titled: Story = {
+  render: () => (
+    <Card title=" a titled card " contentRows={2}>
+      <text>first content row</text>
+      <text>second content row</text>
+    </Card>
+  ),
+  expectedColors: [DARK.border, DARK.elevated],
+};
+
+export const AccentBorder: Story = {
+  render: () => (
+    <Card title=" accented " contentRows={1} borderColor={DARK.accent}>
+      <text>content</text>
+    </Card>
+  ),
+  expectedColors: [DARK.accent],
+};

package/src/components/primitives/Card.tsx

@@ -0,0 +1,59 @@
+/**
+ * Bordered rounded box with an optional title. The card owns the
+ * height-derivation rule: its height is always the declared content row
+ * count plus the two border rows, so layout math and the mounted box can
+ * never drift apart - border-collapse bugs die here.
+ */
+
+import React from "react";
+import type { Theme } from "../../theme";
+import { useComponentTheme } from "../theme-context";
+import { FRAME_BORDER_STYLE } from "./frame";
+
+export interface CardProps {
+  title?: string;
+  /** Number of content rows inside the border; the box adds the two border rows. */
+  contentRows: number;
+  borderColor?: string;
+  backgroundColor?: string;
+  marginLeft?: number;
+  marginRight?: number;
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+/** The one height rule: content rows plus the top and bottom border rows. */
+export function cardHeight(contentRows: number): number {
+  return contentRows + 2;
+}
+
+export function Card({
+  title,
+  contentRows,
+  borderColor,
+  backgroundColor,
+  marginLeft,
+  marginRight,
+  theme,
+  children,
+}: CardProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  return (
+    <box
+      style={{
+        height: cardHeight(contentRows),
+        marginLeft,
+        marginRight,
+        border: true,
+        borderStyle: FRAME_BORDER_STYLE,
+        borderColor: borderColor ?? tokens.border,
+        backgroundColor: backgroundColor ?? tokens.elevated,
+        flexDirection: "column",
+        paddingLeft: 1,
+      }}
+      title={title}
+    >
+      {children}
+    </box>
+  );
+}