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

package/src/components/ConfirmCard.tsx

@@ -5,13 +5,21 @@
  * derives from the content rows through Card, so layout and render never drift.
  */
 
-import React from "react";
+import React, { useContext } from "react";
+import { useTerminalDimensions } from "@opentui/react";
 import type { VerdictKind } from "@cueloop/schema";
 import type { Theme } from "../theme";
+import type { QuickAction } from "../config";
+import { SlashSkillsContext } from "../skills";
+import { activeSlashToken, mergeSlashItems, slashFilter, slashItemsFrom } from "../slash-palette";
 import { useComponentTheme } from "./theme-context";
 import { Card } from "./primitives/Card";
-import { Button } from "./primitives/Button";
-import { Toolbar } from "./primitives/Toolbar";
+import { composeRowCount } from "./AnnotationCards";
+import { SlashComposer } from "./SlashComposer";
+import { DialogActions } from "./primitives/DialogActions";
+
+const SUBMIT_CARD_MAX_WIDTH = 48;
+const PALETTE_WINDOW = 5;
 
 export const VERDICTS: VerdictKind[] = ["comment", "approve", "request_changes"];
 
@@ -34,6 +42,7 @@ export interface ConfirmCardProps {
   onSelectVerdict: (verdict: VerdictKind) => void;
   onSubmit: () => void;
   onCancel: () => void;
+  quickActions: QuickAction[];
   theme?: Theme;
 }
 
@@ -66,7 +75,7 @@ function VerdictSelector({
   const tokens = useComponentTheme(theme);
 
   return (
-    <box style={{ flexDirection: "row", height: 1 }}>
+    <box style={{ flexDirection: "row", height: 1, width: "100%", justifyContent: "center" }}>
       {VERDICTS.map((candidate) => (
         <box
           key={candidate}
@@ -92,14 +101,33 @@ export function ConfirmCard({
   onSelectVerdict,
   onSubmit,
   onCancel,
+  quickActions,
   theme,
 }: ConfirmCardProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
+  const skills = useContext(SlashSkillsContext);
+  const { width: terminalWidth } = useTerminalDimensions();
+  const cardWidth = Math.max(24, Math.min(terminalWidth - 6, SUBMIT_CARD_MAX_WIDTH));
+
+  const composerRows = composeRowCount(summary, cardWidth - 4);
+  const token = activeSlashToken(summary, summary.length);
+  const paletteItems =
+    token !== null
+      ? slashFilter(mergeSlashItems(slashItemsFrom(quickActions), skills), token.slice(1))
+      : [];
+  const paletteRows =
+    paletteItems.length > 0
+      ? Math.min(PALETTE_WINDOW, paletteItems.length) +
+        (paletteItems.length > PALETTE_WINDOW ? 1 : 0)
+      : 0;
+  const contentRows =
+    CONFIRM_CONTENT_ROWS - 1 + composerRows + paletteRows + (viewedSummary !== undefined ? 2 : 0);
 
   return (
     <Card
-      contentRows={CONFIRM_CONTENT_ROWS + (viewedSummary !== undefined ? 2 : 0)}
-      borderColor={tokens.text}
+      contentRows={contentRows}
+      width={cardWidth}
+      borderColor={tokens.accent}
       backgroundColor={tokens.elevated}
       theme={theme}
     >
@@ -107,21 +135,20 @@ export function ConfirmCard({
       {viewedSummary !== undefined ? <box style={{ height: 1 }} /> : null}
       <VerdictSelector verdict={verdict} onSelectVerdict={onSelectVerdict} theme={theme} />
       <box style={{ height: 1 }} />
-      <input
-        focused
-        value={summary}
-        onInput={onInput}
+      <SlashComposer
+        seed={summary}
+        glyph=""
+        quickActions={quickActions}
+        tokens={tokens}
         placeholder="summary for the agent (optional)"
+        onSubmit={(text) => {
+          onInput(text);
+          onSubmit();
+        }}
+        onInput={onInput}
       />
       <box style={{ height: 1 }} />
-      <Toolbar>
-        <Button variant="solid" marginRight={2} onPress={onSubmit} theme={theme}>
-          {" send message "}
-        </Button>
-        <Button onPress={onCancel} theme={theme}>
-          {" Cancel "}
-        </Button>
-      </Toolbar>
+      <DialogActions confirmLabel="send" onConfirm={onSubmit} onCancel={onCancel} theme={theme} />
     </Card>
   );
 }

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/ConfirmDialog.tsx

@@ -10,8 +10,7 @@ import { useTerminalDimensions } from "@opentui/react";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { Dialog } from "./primitives/Dialog";
-import { Button } from "./primitives/Button";
-import { Toolbar } from "./primitives/Toolbar";
+import { DialogActions } from "./primitives/DialogActions";
 
 export interface ConfirmDialogProps {
   isOpen: boolean;
@@ -28,8 +27,8 @@ export function ConfirmDialog({
   isOpen,
   title,
   message,
-  confirmLabel = "Delete",
-  cancelLabel = "Cancel",
+  confirmLabel = "delete",
+  cancelLabel = "cancel",
   onConfirm,
   onCancel,
   theme,
@@ -45,6 +44,7 @@ export function ConfirmDialog({
       title={title}
       width={Math.min(54, terminalWidth - 6)}
       height={7}
+      background={tokens.elevated}
       onDismiss={onCancel}
       theme={theme}
     >
@@ -59,14 +59,13 @@ export function ConfirmDialog({
       >
         <text fg={tokens.text}>{message}</text>
         <box style={{ flexGrow: 1 }} />
-        <Toolbar>
-          <Button variant="solid" onPress={onConfirm} theme={theme}>
-            {` ${confirmLabel} `}
-          </Button>
-          <Button onPress={onCancel} theme={theme}>
-            {` ${cancelLabel} esc `}
-          </Button>
-        </Toolbar>
+        <DialogActions
+          confirmLabel={confirmLabel}
+          cancelLabel={cancelLabel}
+          onConfirm={onConfirm}
+          onCancel={onCancel}
+          theme={theme}
+        />
       </box>
     </Dialog>
   );

package/src/components/DiffContentView.tsx

@@ -18,7 +18,7 @@ import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { IconButton } from "./primitives/IconButton";
 import { NERD } from "./primitives/icons";
-import { intralineRunsByRow, type IntralineRun } from "../diff-intraline";
+import { createIntralineResolver, type IntralineRun } from "../diff-intraline";
 import { highlightDiffRows, type SyntaxSpan } from "../diff-syntax";
 import { splitDiffRows, type SplitLine, type SplitRow } from "../split-diff";
 import { UNDERLINE, type AnnotationPalette } from "../annotation-palette";
@@ -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,14 +528,13 @@ export function DiffContentView({
     onReply,
     onUpdateAnnotation,
     resolveAuthorLabel,
-    leaderCombos,
-    onLeaderCommand,
+    onNavCommand,
     onExit,
   });
   const { palette } = surface;
   const numberWidth = useMemo(() => lineNumberWidth(rows), [rows]);
   const unifiedGutterColumns = numberWidth * 2 + UNIFIED_GUTTER_CHROME;
-  const intralineByRow = useMemo(() => intralineRunsByRow(rows), [rows]);
+  const intralineResolver = useMemo(() => createIntralineResolver(rows), [rows]);
   const syntaxByRow = useSyntaxHighlights(rows);
   const splitRows = useMemo(() => (split ? splitDiffRows(rows) : []), [split, rows]);
   const localStats = useMemo(() => fileChangeCounts(rows), [rows]);
@@ -595,13 +594,13 @@ export function DiffContentView({
     const fgByColumn = foregroundColumns(
       text,
       rowBaseColor(row, tokens),
-      intralineByRow.get(rowIndex),
+      intralineResolver.runsForRow(rowIndex),
       syntaxByRow.get(rowIndex),
       tokens,
     );
     const emphasisBgByColumn = emphasisBackgroundColumns(
       text,
-      intralineByRow.get(rowIndex),
+      intralineResolver.runsForRow(rowIndex),
       rowEmphasisBackground(row, tokens),
     );
     const rowBg = rowBackground(row, tokens);
@@ -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/FileContentsView.tsx

@@ -1,5 +1,5 @@
 // A Changes/Project file tab in contents mode: a workspace file rendered read-only with line
-// numbers, for surfaces with no review session to anchor notes to (the bare-launch welcome shell).
+// numbers, for surfaces with no thread to anchor notes to (the bare-launch welcome shell).
 // Loads on mount and whenever the path changes; a null read renders a centered "File deleted".
 // Syntax highlighting comes from the native code renderable (tree-sitter), the language
 // auto-detected from the path; unknown languages simply render unstyled.

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