@cueloop/client 0.1.0-alpha.78 → 0.1.0-alpha.79

package/src/App.walk.test.tsx

@@ -12,6 +12,7 @@ import { DARK } from "./theme";
 import {
   isolateUserConfig,
   press,
+  navCommand,
   pressKey,
   renderReadyApp,
   waitForState,
@@ -104,7 +105,7 @@ describe("the guided walk", () => {
     const setup = await renderApp();
 
     // Act
-    await pressKey(setup, "k", { meta: true });
+    await navCommand(setup, "k");
 
     // Assert
     await waitForText(setup, "file 1 of 3 · 0 viewed");
@@ -172,7 +173,7 @@ describe("the guided walk", () => {
     // Arrange
     const setup = await renderApp();
 
-    await pressKey(setup, "k", { meta: true });
+    await navCommand(setup, "k");
     await waitForText(setup, "file 1 of 3 · 0 viewed");
     await press(setup, "]");
     await waitForText(setup, "file 2 of 3 · 1 viewed");
@@ -186,7 +187,7 @@ describe("the guided walk", () => {
     expect(setup.captureCharFrame()).not.toContain("· 1 viewed");
 
     // Act
-    await pressKey(setup, "k", { meta: true });
+    await navCommand(setup, "k");
 
     // Assert
     await waitForText(setup, "file 2 of 3 · 1 viewed");
@@ -196,7 +197,7 @@ describe("the guided walk", () => {
     // Arrange
     const first = await renderApp();
 
-    await pressKey(first, "k", { meta: true });
+    await navCommand(first, "k");
     await waitForText(first, "file 1 of 3 · 0 viewed");
     await press(first, "]");
     await press(first, "]");
@@ -211,7 +212,7 @@ describe("the guided walk", () => {
     // a fresh client reads the viewed set back from the session record
     const second = await renderApp();
 
-    await pressKey(second, "k", { meta: true });
+    await navCommand(second, "k");
 
     // Assert
     await waitForText(second, "file 3 of 3 · 2 viewed");
@@ -232,7 +233,7 @@ describe("the guided walk", () => {
     const setup = await renderApp();
 
     // Act
-    await pressKey(setup, "k", { meta: true });
+    await navCommand(setup, "k");
 
     // Assert
     await waitForText(setup, "file 1 of 3");
@@ -273,7 +274,7 @@ describe("the guided walk", () => {
     expect(foregroundsOf(setup, "new")).toContain(DARK.insertedForeground);
 
     // Act
-    await pressKey(setup, "k", { meta: true });
+    await navCommand(setup, "k");
 
     // Assert
     await waitForText(setup, "file 1 of 3 · 0 viewed");
@@ -289,7 +290,7 @@ describe("the guided walk", () => {
     const setup = await renderApp();
 
     // Act - renderApp already waited for the diff to load; the session is resolved
-    await pressKey(setup, "k", { meta: true });
+    await navCommand(setup, "k");
 
     // Assert
     await waitForText(setup, "review submitted - read-only");

package/src/App.workbench.test.tsx

@@ -21,10 +21,12 @@ import {
   dragText,
   isolateUserConfig,
   locateText,
+  press,
   pressKey,
   typeText,
   waitForState,
   waitForText,
+  waitForTextGone,
   renderReadyApp,
 } from "./test-support";
 import { NERD } from "./components/primitives/icons";
@@ -98,6 +100,7 @@ type Setup = Awaited<ReturnType<typeof renderApp>>;
 
 /** The header controls sit on the top content row of the compact header. */
 const HEADER_ROW = 0;
+const BARE_NAV_HINT = "c comment · z fold · type to leave";
 
 /** Column of a Project-header toggle, located by its own glyph so spacing changes never break the click. */
 function toggleColumn(setup: Setup, glyph: string): number {
@@ -496,6 +499,89 @@ describe("the bare-launch welcome shell", () => {
     expect(frame).toContain("edited in the working tree");
   });
 
+  test("nav mode on the Welcome tab offers only comment and fold; a diff letter types", async () => {
+    const setup = await renderReadyApp(
+      <App home={welcomeHome} sessionId={undefined} cwd={welcomeRepo} />,
+      { width: 160, height: 28 },
+    );
+    await waitForText(setup, "quick brown fox");
+    const line = locateText(setup, "quick brown fox");
+    await setup.mockMouse.click(line.column, line.row);
+
+    // esc enters nav; the footer names what this surface can do, not the diff commands
+    await press(setup, "escape");
+    await waitForText(setup, BARE_NAV_HINT);
+    expect(setup.captureCharFrame()).not.toContain("x reject");
+
+    // a diff letter has no command here, so it leaves nav and types, as the footer says
+    await pressKey(setup, "d");
+    await waitForText(setup, "● d");
+    await press(setup, "escape");
+    await waitForTextGone(setup, "● d");
+
+    // c opens a comment on the caret word; z folds the saved card
+    await press(setup, "escape");
+    await waitForText(setup, BARE_NAV_HINT);
+    await pressKey(setup, "c");
+    await typeText(setup, "note");
+    await waitForText(setup, "● note");
+    await pressKey(setup, "RETURN", { meta: true });
+    await waitForText(setup, "note");
+    await press(setup, "escape");
+    await waitForText(setup, BARE_NAV_HINT);
+    await pressKey(setup, "z");
+    await waitForText(setup, "○ 1 comment ›");
+
+    setup.renderer.destroy();
+  });
+
+  test("nav mode on a bare changed-file diff has no reject or walk; x types instead", async () => {
+    const setup = await renderReadyApp(
+      <App home={welcomeHome} sessionId={undefined} cwd={welcomeRepo} />,
+      { width: 160, height: 28 },
+    );
+    await waitForText(setup, "README.md");
+    const readme = locateText(setup, "README.md");
+    await setup.mockMouse.click(readme.column, readme.row);
+    await waitForText(setup, "edited in the working tree");
+    const line = locateText(setup, "edited in the working tree");
+    await setup.mockMouse.click(line.column, line.row);
+
+    await press(setup, "escape");
+    await waitForText(setup, BARE_NAV_HINT);
+    expect(setup.captureCharFrame()).not.toContain("x reject");
+    await pressKey(setup, "x");
+    await waitForText(setup, "● x");
+    const frame = setup.captureCharFrame();
+    expect(frame).toContain("edited in the working tree");
+    expect(frame).not.toContain("change rejected");
+
+    setup.renderer.destroy();
+  });
+
+  test("nav mode on a project file offers only comment and fold", async () => {
+    const setup = await renderReadyApp(
+      <App home={welcomeHome} sessionId={undefined} cwd={welcomeRepo} />,
+      { width: 160, height: 28 },
+    );
+    await waitForText(setup, "README.md");
+    await setup.mockMouse.click(treeToggleColumn(setup), HEADER_ROW);
+    await waitForText(setup, "README.md");
+    const readme = locateText(setup, "README.md");
+    await setup.mockMouse.click(readme.column, readme.row);
+    await waitForText(setup, "edited in the working tree");
+    const line = locateText(setup, "edited in the working tree");
+    await setup.mockMouse.click(line.column, line.row);
+
+    await press(setup, "escape");
+    await waitForText(setup, BARE_NAV_HINT);
+    expect(setup.captureCharFrame()).not.toContain("x reject");
+    await pressKey(setup, "d");
+    await waitForText(setup, "● d");
+
+    setup.renderer.destroy();
+  });
+
   test("a bare launch rides a Welcome tab in the editor while the Thread pane waits empty", async () => {
     const setup = await renderWelcome();
 

package/src/annotation-palette.ts

@@ -11,6 +11,7 @@ import type { Theme } from "./theme";
 export const UNDERLINE = createTextAttributes({ underline: true });
 export const CUT = createTextAttributes({ strikethrough: true, dim: true });
 export const BOLD = createTextAttributes({ bold: true });
+export const ITALIC = createTextAttributes({ italic: true });
 
 /** The marked-words treatment: a violet backdrop under an underline. */
 const MARK_BACKDROP_DARK = "#463852";

package/src/app-screens.tsx

@@ -371,12 +371,8 @@ export function NoThreadShell(props: {
           {menuChrome}
           <ConfirmDialog
             isOpen={confirming !== null}
-            title=" Delete plan "
-            message={
-              confirming
-                ? `Delete "${confirming.title}"? This removes the plan and its review.`
-                : ""
-            }
+            title=" delete thread "
+            message={confirming ? `Delete "${confirming.title}"? This removes the thread.` : ""}
             onConfirm={() => {
               if (confirming) controller.deleteSession(confirming.sessionId);
               setMode({ type: "normal" });
@@ -523,6 +519,16 @@ export function TrailingOverlays(props: {
           theme={theme}
         />
       ) : null}
+      {mode.type === "confirmDelete" ? (
+        <ConfirmDialog
+          isOpen
+          title=" delete thread "
+          message={`Delete "${mode.title}"? This removes the thread.`}
+          onConfirm={() => dispatch({ type: "confirmDialog" })}
+          onCancel={() => setMode({ type: "normal" })}
+          theme={theme}
+        />
+      ) : null}
       {mode.type === "nameSelf" ? (
         <PromptDialog
           isOpen

package/src/app-view-model.ts

@@ -58,7 +58,6 @@ export function resolveOverlay(
     mode.type === "treePrompt"
   )
     return "prompt";
-  if (mode.type === "shareChoice") return "shareChoice";
   if (mode.type === "spanActions") return "spanActions";
   if (completionPhase === "prompt") return "completion-prompt";
   if (completionPhase === "counting") return "completion-counting";

package/src/components/ConfirmDialog.stories.tsx

@@ -7,12 +7,12 @@ export const meta: StoryMeta = { title: "Overlays/ConfirmDialog" };
 
 const callbacks = { onConfirm: () => {}, onCancel: () => {} };
 
-export const DeletePlan: Story = {
+export const DeleteThread: Story = {
   render: () => (
     <ConfirmDialog
       isOpen
-      title=" Delete plan "
-      message={'Delete "Auth rollout"? This removes the plan and its review.'}
+      title=" delete thread "
+      message={'Delete "Auth rollout"? This removes the thread.'}
       {...callbacks}
     />
   ),

package/src/components/DiffContentView.tsx

@@ -26,6 +26,7 @@ import { lineMarkRanges, runsFor, wrapLines, type MarkRange } from "../mark-runs
 import { useFrameMeasure } from "../use-frame-measure";
 import { useTerminalVirtualizer } from "../use-terminal-virtualizer";
 import { useAnnotationSurface, type LineSource } from "../use-annotation-surface";
+import { NavModeHint } from "./NavModeHint";
 import { DiscussionMarkerRail } from "./DiscussionMarkerRail";
 import { coloredRowSpans } from "./diff-content-view-layout";
 
@@ -97,8 +98,7 @@ export interface DiffContentViewProps {
   onUpdateAnnotation: (id: string, body: string) => void;
   /** The author's display name for a comment's hover tooltip. */
   resolveAuthorLabel?: (annotation: Annotation) => string | undefined;
-  leaderCombos?: readonly string[];
-  onLeaderCommand?: (key: KeyEvent) => void;
+  onNavCommand?: (key: KeyEvent) => boolean;
   onExit: () => void;
   /** Row indices the owner rejected during curation; drawn struck through. */
   rejectedRows?: Set<number>;
@@ -385,7 +385,8 @@ function foregroundColumns(
   const columns: string[] = [];
 
   for (const span of coloredRowSpans(text, intraline, syntax, baseColor, tokens)) {
-    for (let index = 0; index < span.text.length; index++) columns.push(span.foreground);
+    // one color per code unit, matching the column model that indexes text by .length
+    columns.push(...Array.from({ length: span.text.length }, () => span.foreground));
   }
 
   return columns;
@@ -492,8 +493,7 @@ export function DiffContentView({
   onReply,
   onUpdateAnnotation,
   resolveAuthorLabel,
-  leaderCombos,
-  onLeaderCommand,
+  onNavCommand,
   onExit,
   rejectedRows = EMPTY_REJECTED,
   fold,
@@ -528,8 +528,7 @@ export function DiffContentView({
     onReply,
     onUpdateAnnotation,
     resolveAuthorLabel,
-    leaderCombos,
-    onLeaderCommand,
+    onNavCommand,
     onExit,
   });
   const { palette } = surface;
@@ -856,10 +855,18 @@ export function DiffContentView({
         >
           {materialized}
         </scrollbox>
+        {suspended ? null : (
+          <NavModeHint
+            navMode={surface.navMode}
+            surface={onNavCommand ? "diff" : "bare"}
+            theme={tokens}
+          />
+        )}
       </box>
       <DiscussionMarkerRail
         discussions={surface.discussions}
         spanQuote={surface.spanQuote}
+        focusedKey={surface.focusedDiscussion}
         onJump={surface.jumpToDiscussion}
         scrollbox={scrollRef}
         theme={theme}

package/src/components/DiscussionMarkerRail.tsx

@@ -25,12 +25,14 @@ interface HoveredMarker {
 function ScrollMarkers({
   discussions,
   hovered,
+  focused,
   tokens,
   onHover,
   onJump,
 }: {
   discussions: Discussion[];
   hovered: string | null;
+  focused: string | null;
   tokens: Theme;
   onHover: (marker: HoveredMarker | null) => void;
   onJump: (key: string) => void;
@@ -50,8 +52,10 @@ function ScrollMarkers({
     return index >= 0 && index < discussions.length ? index : null;
   };
   const hoveredIndex = discussions.findIndex((discussion) => discussion.key === hovered);
+  const focusedIndex = discussions.findIndex((discussion) => discussion.key === focused);
+  const isActive = (index: number): boolean => index === hoveredIndex || index === focusedIndex;
   const colorFor = (index: number): string => {
-    if (index === hoveredIndex) return tokens.text;
+    if (isActive(index)) return tokens.text;
     if (hoveredIndex >= 0 && discussions.length >= 5 && Math.abs(index - hoveredIndex) === 1) {
       return tokens.textMuted;
     }
@@ -92,7 +96,7 @@ function ScrollMarkers({
           style={{ position: "absolute", top: rowFor(index), left: 0 }}
           fg={colorFor(index)}
         >
-          {(index === hoveredIndex ? "●" : "○").padStart(2)}
+          {(isActive(index) ? "●" : "○").padStart(2)}
         </text>
       ))}
     </box>
@@ -101,10 +105,9 @@ function ScrollMarkers({
 
 export interface DiscussionMarkerRailProps {
   discussions: Discussion[];
-  /** The text a discussion's span covers, for the hover preview. */
   spanQuote: (span: TextSpan) => string;
+  focusedKey?: string | null;
   onJump: (key: string) => void;
-  /** The surface's scrollbox; when given, its scrollbar draws past the dots as the panel's rightmost column. */
   scrollbox?: RefObject<ScrollBoxRenderable | null>;
   theme?: Theme;
 }
@@ -112,6 +115,7 @@ export interface DiscussionMarkerRailProps {
 export function DiscussionMarkerRail({
   discussions,
   spanQuote,
+  focusedKey = null,
   onJump,
   scrollbox,
   theme,
@@ -171,6 +175,7 @@ export function DiscussionMarkerRail({
       <ScrollMarkers
         discussions={discussions}
         hovered={hovered?.key ?? null}
+        focused={focusedKey}
         tokens={tokens}
         onHover={setHovered}
         onJump={onJump}

package/src/components/GridTabContent.tsx

@@ -35,8 +35,7 @@ export type DiffSurfaceProps = Pick<
   | "onReply"
   | "onUpdateAnnotation"
   | "resolveAuthorLabel"
-  | "leaderCombos"
-  | "onLeaderCommand"
+  | "onNavCommand"
   | "onExit"
 >;
 
@@ -49,6 +48,8 @@ export function ChangesTabBody(props: {
   fileStats?: ReadonlyMap<string, { additions: number; deletions: number }>;
   split?: boolean;
   dimmed: boolean;
+  /** Rows the sibling Thread pane spends on its footer, so this empty hint centers level with it. */
+  emptyBottomPadding?: number;
   theme: Theme;
 }): React.ReactNode {
   const session = props.surface.session;
@@ -65,6 +66,7 @@ export function ChangesTabBody(props: {
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
+          paddingBottom: props.emptyBottomPadding,
         }}
       >
         <text fg={props.theme.textDim}>No changes</text>
@@ -99,6 +101,8 @@ export function GridTabContent(props: {
   readFile: (path: string) => Promise<string | null>;
   /** Persist a comment on a project file; the file view built the anchor against its own lines. */
   onAddFileComment: (path: string, anchor: Anchor, body: string) => void;
+  /** Rows the sibling Thread pane spends on its footer, so the empty hint centers level with it. */
+  emptyBottomPadding?: number;
   theme: Theme;
 }): React.ReactNode {
   const { tab } = props;
@@ -138,6 +142,7 @@ export function GridTabContent(props: {
         fileStats={props.fileStats}
         split={props.split}
         dimmed={props.dimmed}
+        emptyBottomPadding={props.emptyBottomPadding}
         theme={props.theme}
       />
     );
@@ -170,6 +175,7 @@ export function GridTabContent(props: {
       fileStats={props.fileStats}
       split={props.split}
       dimmed={props.dimmed}
+      emptyBottomPadding={props.emptyBottomPadding}
       theme={props.theme}
     />
   );

package/src/components/HandleChipsInput.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { HandleChipsInput } from "./HandleChipsInput";
+
+export const meta: StoryMeta = { title: "Inputs/HandleChips" };
+
+export const WithHandles: Story = {
+  render: () => (
+    <box style={{ padding: 1, backgroundColor: DARK.elevated }}>
+      <HandleChipsInput logins={["octocat", "hubot"]} onChange={() => {}} theme={DARK} />
+    </box>
+  ),
+  size: { width: 48, height: 6 },
+};
+
+export const Empty: Story = {
+  render: () => (
+    <box style={{ padding: 1, backgroundColor: DARK.elevated }}>
+      <HandleChipsInput logins={[]} onChange={() => {}} theme={DARK} />
+    </box>
+  ),
+  size: { width: 48, height: 6 },
+};

package/src/components/HandleChipsInput.test.tsx

@@ -0,0 +1,35 @@
+/** Backspace on the empty field pulls the last chip back in to edit, rather than deleting it. */
+
+import React, { useState } from "react";
+import { describe, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import { DARK } from "../theme";
+import { press, settle } from "../test-support";
+import { HandleChipsInput } from "./HandleChipsInput";
+
+/** A controlled host so onChange edits flow back into the rendered list, like the wizard. */
+function Harness({ initial }: { initial: string[] }): React.ReactNode {
+  const [logins, setLogins] = useState(initial);
+
+  return <HandleChipsInput logins={logins} onChange={setLogins} theme={DARK} />;
+}
+
+describe("HandleChipsInput", () => {
+  test("backspace on the empty field restores the last chip as editable text", async () => {
+    // Arrange - one committed chip and an empty input showing its placeholder
+    const setup = await testRender(<Harness initial={["octocat"]} />, { width: 48, height: 6 });
+
+    await settle(setup);
+    expect(setup.captureCharFrame()).toContain("handle");
+
+    // Act - backspace with the input empty
+    await press(setup, "backspace");
+
+    // Assert - the handle is back in the field (placeholder gone), not deleted
+    const frame = setup.captureCharFrame();
+
+    expect(frame).toContain("octocat");
+    expect(frame).not.toContain("handle");
+    setup.renderer.destroy();
+  });
+});

package/src/components/HandleChipsInput.tsx

@@ -0,0 +1,145 @@
+/**
+ * A tag-style input for GitHub logins: each added handle is an inline chip with
+ * a hover × to remove, and a trailing one-line field where enter adds the next
+ * and backspace on an empty field drops the last. Controlled - the caller owns
+ * the list and receives every change.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import type { KeyBinding, TextareaRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { NERD } from "./primitives/icons";
+
+// enter adds the handle rather than inserting a newline into the one-line field
+const ADD_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }];
+
+function HandleChip({
+  login,
+  onRemove,
+  tokens,
+}: {
+  login: string;
+  onRemove: () => void;
+  tokens: Theme;
+}): React.ReactNode {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <box
+      onMouseOver={() => setHovered(true)}
+      onMouseOut={() => setHovered(false)}
+      style={{
+        flexDirection: "row",
+        flexShrink: 0,
+        marginRight: 2,
+        paddingLeft: 1,
+        backgroundColor: tokens.border,
+      }}
+    >
+      <text fg={tokens.text} style={{ wrapMode: "none" }}>{`@${login}`}</text>
+      <box
+        onMouseUp={(event) => {
+          event.stopPropagation();
+          onRemove();
+        }}
+        style={{ paddingLeft: 1, paddingRight: 1 }}
+      >
+        <text fg={tokens.textDim}>{hovered ? NERD.close : " "}</text>
+      </box>
+    </box>
+  );
+}
+
+export interface HandleChipsInputProps {
+  logins: string[];
+  onChange: (logins: string[]) => void;
+  /** Whether this field owns the cursor and backspace; false shows the chips without a blinking caret. */
+  focused?: boolean;
+  /** Fired on backspace when the field is empty and no chips remain, so the caller can collapse the section. */
+  onEmptyBackspace?: () => void;
+  theme?: Theme;
+}
+
+export function HandleChipsInput({
+  logins,
+  onChange,
+  focused = true,
+  onEmptyBackspace,
+  theme,
+}: HandleChipsInputProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const inputRef = useRef<TextareaRenderable | null>(null);
+  // the text the current field generation mounts with; a remount reseeds it
+  const [seed, setSeed] = useState("");
+  const [inputGeneration, setInputGeneration] = useState(0);
+
+  useEffect(() => {
+    const input = inputRef.current;
+
+    if (!input || !focused) return;
+    input.focus();
+    input.cursorOffset = seed.length; // land the caret at the end of the seeded text
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputGeneration, focused]);
+
+  const reseed = (text: string): void => {
+    setSeed(text);
+    setInputGeneration((generation) => generation + 1);
+  };
+
+  const addDraft = (): void => {
+    const handle = (inputRef.current?.plainText ?? "").trim().replace(/^@/, "").toLowerCase();
+
+    if (handle && !logins.includes(handle)) onChange([...logins, handle]);
+    reseed("");
+  };
+
+  useKeyboard((key) => {
+    if (!focused) return;
+    if (key.name !== "backspace" || (inputRef.current?.plainText ?? "").length > 0) return;
+    // backspace on an empty field pulls the last chip back in to edit; with none left, collapse
+    if (logins.length > 0) {
+      const last = logins[logins.length - 1]!;
+
+      onChange(logins.slice(0, -1));
+      reseed(last);
+    } else {
+      onEmptyBackspace?.();
+    }
+  });
+
+  return (
+    <box style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center" }}>
+      {logins.map((login) => (
+        <HandleChip
+          key={login}
+          login={login}
+          onRemove={() => onChange(logins.filter((entry) => entry !== login))}
+          tokens={tokens}
+        />
+      ))}
+      <box style={{ flexDirection: "row", flexShrink: 0 }}>
+        <text fg={tokens.textDim}>{"@"}</text>
+        <textarea
+          key={inputGeneration}
+          ref={inputRef}
+          focused
+          initialValue={seed}
+          placeholder="handle"
+          keyBindings={ADD_KEY_BINDINGS}
+          onSubmit={addDraft}
+          style={{
+            height: 1,
+            width: 16,
+            backgroundColor: tokens.elevated,
+            focusedBackgroundColor: tokens.elevated,
+            textColor: tokens.text,
+            focusedTextColor: tokens.text,
+          }}
+        />
+      </box>
+    </box>
+  );
+}

package/src/components/MarkdownGridBlock.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { DARK } from "../theme";
+import { buildDisplay, type DisplayBlock } from "../view-plan";
+import type { Story, StoryMeta } from "./story";
+import { MarkdownGridBlock } from "./MarkdownGridBlock";
+
+export const meta: StoryMeta = { title: "Surfaces/MarkdownGridBlock" };
+
+/** The first display block of a kind, for a story that renders one grid in isolation. */
+function firstBlock(markdown: string, kind: DisplayBlock["kind"]): DisplayBlock {
+  return buildDisplay(markdown).find((block) => block.kind === kind)!;
+}
+
+const TABLE = firstBlock(
+  "| Name | Size |\n| :--- | ---: |\n| daemon | 12 |\n| client | 7 |",
+  "table",
+);
+const FRONTMATTER = firstBlock(
+  "---\ntitle: Migration Plan\nowner: platform team\nstatus: in review\n---\n\n# Plan\n",
+  "frontmatter",
+);
+
+export const Table: Story = {
+  render: () => <MarkdownGridBlock block={TABLE} theme={DARK} contentWidth={60} />,
+  expectedColors: [DARK.text, DARK.textDim],
+  size: { width: 62, height: 6 },
+};
+
+export const Frontmatter: Story = {
+  render: () => <MarkdownGridBlock block={FRONTMATTER} theme={DARK} contentWidth={60} />,
+  expectedColors: [DARK.text, DARK.textDim],
+  size: { width: 62, height: 9 },
+};