@cueloop/client 0.1.0-alpha.6 → 0.1.0-alpha.61

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],
+  size: { width: 40, height: 24 },
+};

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

@@ -0,0 +1,50 @@
+import { describe, expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { DARK } from "../theme";
+import { fixturePlanSession } from "./story-fixtures";
+import { waitForText } from "../test-support";
+import { AgentLauncher, 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 harnesses with real binary commands (never the `cc` alias)", () => {
+    // Assert - `cc` resolves to the system C compiler when spawned on a PTY, so
+    // the Claude harness must run `claude`, the real binary, not the shell alias
+    expect(HARNESS_LAUNCHERS.map((harness) => harness.command)).toEqual(["claude", "pi", "codex"]);
+  });
+});
+
+describe("AgentLauncher", () => {
+  test("renders a button for every harness, in order", async () => {
+    // Arrange
+    const setup = await testRender(
+      <box style={{ width: 44, height: 20, flexDirection: "column" }}>
+        <AgentLauncher session={fixturePlanSession()} onLaunchHarness={() => {}} theme={DARK} />
+      </box>,
+      { width: 44, height: 20 },
+    );
+
+    // Act
+    await waitForText(setup, "Claude Code");
+    const frame = setup.captureCharFrame();
+
+    // Assert - all three launcher names present, in launch order
+    const names = HARNESS_LAUNCHERS.map((harness) => harness.name);
+    const positions = names.map((name) => frame.indexOf(name));
+
+    expect(positions.every((position) => position >= 0)).toBe(true);
+    expect(positions).toEqual(positions.toSorted((left, right) => left - right));
+  });
+});

package/src/components/agent-launcher.tsx

@@ -0,0 +1,149 @@
+/**
+ * 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 display name and the rail command. */
+export interface HarnessLauncher {
+  id: string;
+  name: string;
+  /** The shell command that starts the harness, run in the split. */
+  command: string;
+}
+
+/** Off-white for the running-terminal header, shared by every harness. */
+const HARNESS_HEADER_COLOR = "#e4e6ec";
+
+/** The bring-your-own harnesses, in launch order. The command is the real binary
+ *  name spawned on a PTY (not a shell alias, so `claude` - never `cc`, which is
+ *  the system C compiler). */
+export const HARNESS_LAUNCHERS: HarnessLauncher[] = [
+  { id: "claude", name: "Claude Code", command: "claude" },
+  { id: "pi", name: "Pi", command: "pi" },
+  { id: "codex", name: "OpenAI Codex", command: "codex" },
+];
+
+/** 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.`;
+}
+
+/** 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 => {
+    // The reconciler's removeChild detaches the pane without destroying it, so
+    // kill the child + free the VT here or they leak. shutdown() is idempotent.
+    paneRef.current?.shutdown();
+    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={HARNESS_HEADER_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 }}>
+      {HARNESS_LAUNCHERS.map((harness) => (
+        <box
+          key={harness.id}
+          style={{
+            flexDirection: "row",
+            height: 3,
+            border: true,
+            borderStyle: FRAME_BORDER_STYLE,
+            backgroundColor: "transparent",
+            borderColor: tokens.text,
+            paddingLeft: 1,
+            paddingRight: 1,
+          }}
+          onMouseUp={() => launch(harness)}
+        >
+          <text fg={tokens.textMuted}>{harness.name}</text>
+        </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>
+  );
+}

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

@@ -0,0 +1,128 @@
+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,184 @@
+/**
+ * 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/plan-sheet-run-style.ts

@@ -0,0 +1,90 @@
+import { createTextAttributes } from "@opentui/core";
+import type { DisplayBlock, StyleRun } from "../view-plan";
+import type { Theme } from "../theme";
+
+/** A cut block reads as removed: struck through and grayed, never red. */
+const CUT_ATTRIBUTES = createTextAttributes({ strikethrough: true, dim: true });
+
+/** Inline-emphasis attributes, reused per run so the render loop allocates none. */
+const STRONG_ATTRIBUTES = createTextAttributes({ bold: true });
+const EM_ATTRIBUTES = createTextAttributes({ italic: true });
+const STRIKE_ATTRIBUTES = createTextAttributes({ strikethrough: true });
+const LINK_ATTRIBUTES = createTextAttributes({ underline: true });
+/** Block-level base attributes: headings read bold, blockquotes read italic. */
+const HEADING_ATTRIBUTES = createTextAttributes({ bold: true });
+const QUOTE_ATTRIBUTES = createTextAttributes({ italic: true });
+
+interface BlockBaseStyle {
+  baseFg: string;
+  baseAttributes: number;
+}
+
+function isHeadingBlock(block: DisplayBlock): boolean {
+  return block.kind === "h1" || block.kind === "h2" || block.kind === "h3";
+}
+
+// headings are all bold; level reads from descending brightness alone (a
+// terminal cannot scale font size), leaving the salmon accent to annotations
+function headingForeground(block: DisplayBlock, tokens: Theme): string | undefined {
+  if (block.kind === "h1") return tokens.text;
+  if (block.kind === "h2") return tokens.textMuted;
+  if (block.kind === "h3") return tokens.textDim;
+
+  return undefined;
+}
+
+function blockBaseStyle(block: DisplayBlock, tokens: Theme): BlockBaseStyle {
+  const isHeading = isHeadingBlock(block);
+  const isQuote = block.kind === "quote";
+  const headingFg = headingForeground(block, tokens);
+  // block-level base: headings bold, quotes muted italic; inline roles compose on top
+  const baseFg = headingFg ?? (isQuote ? tokens.textMuted : tokens.text);
+  const baseAttributes = (isHeading ? HEADING_ATTRIBUTES : 0) | (isQuote ? QUOTE_ATTRIBUTES : 0);
+
+  return { baseFg, baseAttributes };
+}
+
+function inlineRoleStyle(
+  run: StyleRun,
+  base: BlockBaseStyle,
+  tokens: Theme,
+): { fg?: string; bg?: string; attributes?: number } {
+  const { baseFg, baseAttributes } = base;
+  const withBase = (roleAttributes: number): number => baseAttributes | roleAttributes;
+
+  switch (run.role) {
+    case "ins":
+      return { fg: tokens.insertedForeground, attributes: baseAttributes || undefined };
+    case "del":
+      return { fg: tokens.deletedForeground };
+    case "mark-comment":
+      return { fg: tokens.text, bg: tokens.markCommentBackground };
+    case "mark-focus":
+      return { fg: tokens.accentInk, bg: tokens.accent };
+    case "kspan":
+      return { fg: tokens.accentInk, bg: tokens.accent };
+    case "strong":
+      return { fg: baseFg, attributes: withBase(STRONG_ATTRIBUTES) };
+    case "em":
+      return { fg: baseFg, attributes: withBase(EM_ATTRIBUTES) };
+    case "code":
+      return { fg: tokens.text, bg: tokens.elevated };
+    case "strike":
+      return { fg: tokens.textMuted, attributes: withBase(STRIKE_ATTRIBUTES) };
+    case "link":
+      return { fg: tokens.blue, attributes: withBase(LINK_ATTRIBUTES) };
+    default:
+      return { fg: baseFg, attributes: baseAttributes || undefined };
+  }
+}
+
+export function runStyle(
+  run: StyleRun,
+  block: DisplayBlock,
+  tokens: Theme,
+): { fg?: string; bg?: string; attributes?: number } {
+  // a cut block reads as removed: every run struck through and grayed, never red
+  if (block.type === "del") return { fg: tokens.textDim, attributes: CUT_ATTRIBUTES };
+
+  return inlineRoleStyle(run, blockBaseStyle(block, tokens), tokens);
+}

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>
+  ),
+};