@cueloop/client 0.1.0-alpha.58 → 0.1.0-alpha.59

package/src/app-key-state.ts

@@ -0,0 +1,60 @@
+import type { ReviewSession } from "@cueloop/schema";
+import type { Mode } from "./intent-dispatch";
+import type { KeyState } from "./keymap";
+import type { DisplayBlock } from "./view-plan";
+import type { DiffRow } from "./view-diff";
+import type { WalkFile } from "./walk";
+
+export function buildKeyState(params: {
+  keys: Record<string, string[]>;
+  observer: boolean;
+  isOwner: boolean;
+  overlay: KeyState["overlay"];
+  session: ReviewSession | null;
+  isDiff: boolean;
+  mode: Mode;
+  resolved: boolean;
+  inbox: ReviewSession[] | null;
+  focusedAnnotationId: string | undefined;
+  walk: { index: number } | null;
+  walkFileList: WalkFile[];
+  rows: DiffRow[];
+  cursor: number;
+  display: DisplayBlock[];
+}): KeyState {
+  const {
+    keys,
+    observer,
+    isOwner,
+    overlay,
+    session,
+    isDiff,
+    mode,
+    resolved,
+    inbox,
+    focusedAnnotationId,
+    walk,
+    walkFileList,
+    rows,
+    cursor,
+    display,
+  } = params;
+  return {
+    keys,
+    readOnly: observer,
+    canEditPlan: isOwner,
+    canSubmitVerdict: isOwner,
+    canShare: isOwner,
+    overlay,
+    view: !session ? "inbox" : isDiff ? "diff" : "plan",
+    spanMode: mode.type === "span",
+    resolved,
+    hasInboxItems: !!inbox?.length,
+    annotationCount: session?.annotations.length ?? 0,
+    hasFocusedAnnotation: focusedAnnotationId !== undefined,
+    walkAtEnd: walk !== null && walk.index >= walkFileList.length,
+    cursorAnnotatable: isDiff
+      ? rows[cursor] !== undefined && rows[cursor]!.kind !== "file" && rows[cursor]!.kind !== "hunk"
+      : !!display[cursor]?.work,
+  };
+}

package/src/app-screens.tsx

@@ -0,0 +1,266 @@
+import React, { type Dispatch, type SetStateAction } from "react";
+import type { ReviewSession, VerdictKind } from "@cueloop/schema";
+import { returnPaneFor } from "@cueloop/schema";
+import type { Theme } from "./theme";
+import type { Mode } from "./intent-dispatch";
+import type { Intent } from "./keymap";
+import type { ReviewController, ToastState } from "./session-controller";
+import { noteForFile } from "./walk";
+import type { WalkFile } from "./walk";
+import type { CheatsheetSection } from "./key-bindings";
+import type { SettingsCategory, SettingsValues } from "./components/SettingsDialog";
+import type { SettingsNav } from "./use-settings-dialog";
+import { CLIENT_VERSION } from "./version";
+import { ThemeProvider } from "./components/theme-context";
+import { MenuBar } from "./components/MenuBar";
+import { KeybindsDialog } from "./components/KeybindsDialog";
+import { SettingsDialog } from "./components/SettingsDialog";
+import { CompletionOverlay } from "./components/CompletionOverlay";
+import { InboxList } from "./components/InboxList";
+import { ConfirmDialog } from "./components/ConfirmDialog";
+import { PromptDialog } from "./components/PromptDialog";
+import { WalkWizard } from "./components/WalkWizard";
+import { Toast } from "./components/Toast";
+
+export function ErrorScreen({ error, theme }: { error: string; theme: Theme }): React.ReactNode {
+  return (
+    <ThemeProvider theme={theme}>
+      <text fg={theme.red}>cueloop: {error}</text>
+    </ThemeProvider>
+  );
+}
+
+export function ConnectingScreen({ theme }: { theme: Theme }): React.ReactNode {
+  return (
+    <ThemeProvider theme={theme}>
+      <text fg={theme.textDim}>connecting to the daemon…</text>
+    </ThemeProvider>
+  );
+}
+
+export function MenuChrome(props: {
+  menuOpen: boolean;
+  menuDialog: "keybinds" | "settings" | null;
+  status: string;
+  theme: Theme;
+  setMenuOpen: Dispatch<SetStateAction<boolean>>;
+  setMenuDialog: Dispatch<SetStateAction<"keybinds" | "settings" | null>>;
+  keybindsSections: CheatsheetSection[];
+  settingsCategories: SettingsCategory[];
+  settingsValues: SettingsValues;
+  settingsNav: SettingsNav;
+  onCategorySelect: (categoryId: string) => void;
+  cycleSetting: (rowKey: string) => void;
+}): React.ReactNode {
+  const {
+    menuOpen,
+    menuDialog,
+    status,
+    theme,
+    setMenuOpen,
+    setMenuDialog,
+    keybindsSections,
+    settingsCategories,
+    settingsValues,
+    settingsNav,
+    onCategorySelect,
+    cycleSetting,
+  } = props;
+  return (
+    <>
+      <MenuBar
+        open={menuOpen}
+        version={CLIENT_VERSION}
+        status={status}
+        onToggle={() => setMenuOpen((isOpen) => !isOpen)}
+        onSettings={() => {
+          setMenuOpen(false);
+          setMenuDialog("settings");
+        }}
+        onKeybinds={() => {
+          setMenuOpen(false);
+          setMenuDialog("keybinds");
+        }}
+        theme={theme}
+      />
+      {menuDialog === "keybinds" ? (
+        <KeybindsDialog sections={keybindsSections} theme={theme} />
+      ) : null}
+      {menuDialog === "settings" ? (
+        <SettingsDialog
+          isOpen
+          categories={settingsCategories}
+          values={settingsValues}
+          activeCategoryId={settingsNav.categoryId}
+          activeRowIndex={settingsNav.rowIndex}
+          activeZone={settingsNav.zone}
+          onCategorySelect={onCategorySelect}
+          onRowActivate={(row) => cycleSetting(row.key)}
+          theme={theme}
+        />
+      ) : null}
+    </>
+  );
+}
+
+export function InboxScreen(props: {
+  inbox: ReviewSession[];
+  inboxCursor: number;
+  mode: Mode;
+  theme: Theme;
+  controller: ReviewController;
+  setMode: Dispatch<SetStateAction<Mode>>;
+  menuChrome: React.ReactNode;
+}): React.ReactNode {
+  const { inbox, inboxCursor, mode, theme, controller, setMode, menuChrome } = props;
+  const confirming = mode.type === "confirmDelete" ? mode : null;
+  return (
+    <ThemeProvider theme={theme}>
+      <box
+        style={{
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          backgroundColor: theme.background,
+        }}
+      >
+        {/* mirrors the review header row: same box, position, and accent product
+            word, with a " · resume" separator and no Edit/Share toolbar */}
+        <box
+          style={{ flexDirection: "row", height: 2, paddingTop: 1, backgroundColor: theme.panel }}
+        >
+          <box
+            style={{
+              height: 1,
+              backgroundColor: theme.panel,
+              paddingLeft: 1,
+              flexDirection: "row",
+            }}
+          >
+            <text>
+              <span fg={theme.accent}>cueloop</span>
+              <span fg={theme.textDim}> · resume</span>
+            </text>
+          </box>
+          <box style={{ flexGrow: 1 }} />
+        </box>
+        <InboxList
+          inbox={inbox}
+          cursor={inboxCursor}
+          onRequestDelete={(id, title) => setMode({ type: "confirmDelete", sessionId: id, title })}
+        />
+        {menuChrome}
+        <ConfirmDialog
+          isOpen={confirming !== null}
+          title=" Delete plan "
+          message={
+            confirming ? `Delete "${confirming.title}"? This removes the plan and its review.` : ""
+          }
+          onConfirm={() => {
+            if (confirming) controller.deleteSession(confirming.sessionId);
+            setMode({ type: "normal" });
+          }}
+          onCancel={() => setMode({ type: "normal" })}
+          theme={theme}
+        />
+      </box>
+    </ThemeProvider>
+  );
+}
+
+export function CompletionScreen(props: {
+  theme: Theme;
+  session: ReviewSession;
+  verdict: VerdictKind;
+  completion: { phase: "prompt" } | { phase: "counting"; remaining: number };
+  status: string;
+}): React.ReactNode {
+  const { theme, session, verdict, completion, status } = props;
+  return (
+    <ThemeProvider theme={theme}>
+      <CompletionOverlay
+        verdict={verdict}
+        completion={completion}
+        status={status}
+        returnsTo={
+          returnPaneFor(session.artifact.meta.herdrPane)
+            ? (session.artifact.meta.agent ?? "the agent")
+            : undefined
+        }
+      />
+    </ThemeProvider>
+  );
+}
+
+export function TrailingOverlays(props: {
+  walking: boolean;
+  walk: { index: number } | null;
+  walkFileList: WalkFile[];
+  viewedPaths: Set<string>;
+  session: ReviewSession;
+  terminalWidth: number;
+  theme: Theme;
+  mode: Mode;
+  toast: ToastState | null;
+  setMode: Dispatch<SetStateAction<Mode>>;
+  dispatch: (intent: Intent) => void;
+}): React.ReactNode {
+  const {
+    walking,
+    walk,
+    walkFileList,
+    viewedPaths,
+    session,
+    terminalWidth,
+    theme,
+    mode,
+    toast,
+    setMode,
+    dispatch,
+  } = props;
+  return (
+    <>
+      {walking && walk !== null ? (
+        <WalkWizard
+          files={walkFileList}
+          index={walk.index}
+          viewedPaths={viewedPaths}
+          note={
+            walkFileList[walk.index] !== undefined
+              ? noteForFile(session.annotations, walkFileList[walk.index]!.path)
+              : undefined
+          }
+          terminalWidth={terminalWidth}
+          onSubmitRequest={() => {
+            dispatch({ type: "walkLeave" });
+            dispatch({ type: "openSubmit" });
+          }}
+          onBack={() => dispatch({ type: "walkBack" })}
+        />
+      ) : null}
+      {mode.type === "rename" ? (
+        <PromptDialog
+          isOpen
+          title=" Rename author "
+          label="Display name for this collaborator:"
+          value={mode.text}
+          placeholder="their name"
+          onInput={(text) => setMode({ ...mode, text })}
+          theme={theme}
+        />
+      ) : null}
+      {mode.type === "nameSelf" ? (
+        <PromptDialog
+          isOpen
+          title=" Welcome "
+          label="Your name (optional) - it attributes the notes you leave:"
+          value={mode.text}
+          placeholder="your name"
+          onInput={(text) => setMode({ ...mode, text })}
+          theme={theme}
+        />
+      ) : null}
+      {toast ? <Toast title={toast.title} body={toast.body} theme={theme} /> : null}
+    </>
+  );
+}

package/src/app-view-model.ts

@@ -0,0 +1,286 @@
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import type { ReviewSession, VerdictKind } from "@cueloop/schema";
+import { activeSpanState, reviewerAnnotations, type Mode } from "./intent-dispatch";
+import { displayText, type DisplayBlock } from "./view-plan";
+import type { DiffRow } from "./view-diff";
+import type { Intent, KeyState } from "./keymap";
+import type { Completion, ReviewController } from "./session-controller";
+import type { QuickAction } from "./config";
+import type { WalkFile } from "./walk";
+import { viewedCount } from "./walk";
+import type { PlanComposeState, PlanPopoverState } from "./components/PlanSheet";
+import type { DiffComposeState } from "./components/DiffSheet";
+import type { ConfirmCardProps } from "./components/ConfirmCard";
+import type { RailCardEdit } from "./components/ReviewRail";
+import type { BreadcrumbItem } from "./components/Breadcrumb";
+import { REVIEW_COMPACT_WIDTH, resolveReviewWidth, type ReviewPanelMode } from "./review-panel";
+
+export function computeRoleCapabilities(
+  readOnly: boolean,
+  role: "owner" | "observer" | "collaborator",
+): { observer: boolean; isOwner: boolean } {
+  const observer = readOnly || role === "observer";
+  return { observer, isOwner: !observer && role === "owner" };
+}
+
+export function deriveReviewFlags(session: ReviewSession | null): {
+  isDiff: boolean;
+  isPrototype: boolean;
+  resolved: boolean;
+} {
+  return {
+    isDiff: session?.artifact.type === "diff",
+    isPrototype: session?.artifact.type === "prototype",
+    resolved: session?.status === "resolved",
+  };
+}
+
+export function isWalking(isDiff: boolean, walk: { index: number } | null): boolean {
+  return isDiff && walk !== null;
+}
+
+export function resolveOverlay(
+  mode: Mode,
+  completionPhase: Completion["phase"],
+  walking: boolean,
+): KeyState["overlay"] {
+  if (mode.type === "compose" || mode.type === "railEdit") return "compose";
+  if (mode.type === "submit") return "submit";
+  if (mode.type === "confirmDelete") return "confirm";
+  if (mode.type === "rename" || mode.type === "nameSelf") return "prompt";
+  if (mode.type === "spanActions") return "spanActions";
+  if (completionPhase === "prompt") return "completion-prompt";
+  if (completionPhase === "counting") return "completion-counting";
+  if (walking) return "walk";
+  return "none";
+}
+
+export function isCompletionOverlayPhase(
+  completion: Completion,
+): completion is { phase: "prompt" } | { phase: "counting"; remaining: number } {
+  return completion.phase === "prompt" || completion.phase === "counting";
+}
+
+export function computePendingCount(session: ReviewSession): number {
+  return reviewerAnnotations(session).length + (session.workingCopy !== undefined ? 1 : 0);
+}
+
+export function computeRailFootprint(
+  reviewMode: ReviewPanelMode,
+  reviewWidth: number,
+  terminalWidth: number,
+): number {
+  if (reviewMode === "hidden") return 0;
+  return (
+    1 +
+    (reviewMode === "compact"
+      ? REVIEW_COMPACT_WIDTH
+      : resolveReviewWidth(reviewWidth, terminalWidth))
+  );
+}
+
+export function buildHeaderItems(params: {
+  session: ReviewSession;
+  resolved: boolean;
+  observer: boolean;
+  role: "owner" | "observer" | "collaborator";
+}): BreadcrumbItem[] {
+  const { session, resolved, observer, role } = params;
+  return [
+    { label: "cueloop", tone: "accent" },
+    ...(resolved
+      ? [
+          {
+            label: `resolved: ${session.verdict!.kind.replace("_", " ")}`,
+            tone: "green" as const,
+          },
+        ]
+      : []),
+    ...(observer ? [{ label: "observer", tone: "dim" as const }] : []),
+    ...(role === "collaborator"
+      ? [{ label: "shared · your notes save as you go", tone: "dim" as const }]
+      : []),
+    {
+      label: `${session.artifact.meta.title ?? session.artifact.meta.planPath ?? session.id} · rev ${session.revisions.length}`,
+      tone: "dim",
+    },
+    { label: `submitted by ${session.artifact.meta.agent ?? "unknown"}`, tone: "dim" },
+  ];
+}
+
+export function buildRenderFlags(params: {
+  session: ReviewSession;
+  isOwner: boolean;
+  isDiff: boolean;
+  isPrototype: boolean;
+  resolved: boolean;
+  menuOpen: boolean;
+  menuDialog: "keybinds" | "settings" | null;
+  resolvedIds: Set<string>;
+}): {
+  showOwnerActions: boolean;
+  prototypeCanComment: boolean;
+  chromeHidden: boolean;
+  prototypePath: string;
+  railResolvedIds: Set<string> | null;
+} {
+  const { session, isOwner, isDiff, isPrototype, resolved, menuOpen, menuDialog, resolvedIds } =
+    params;
+  return {
+    showOwnerActions: isOwner && !isDiff && !resolved,
+    prototypeCanComment: isOwner && !resolved,
+    chromeHidden: menuOpen || menuDialog !== null,
+    prototypePath: session.artifact.meta.prototypePath ?? "",
+    railResolvedIds: isDiff || isPrototype ? null : resolvedIds,
+  };
+}
+
+export function buildActiveSpan(
+  mode: Mode,
+  isDiff: boolean,
+): { displayIndex: number; start: number; end: number } | null {
+  const markedSpan = activeSpanState(mode);
+  if (markedSpan)
+    return { displayIndex: markedSpan.displayIndex, start: markedSpan.start, end: markedSpan.end };
+  if (mode.type === "compose" && !isDiff)
+    return { displayIndex: mode.displayIndex, start: mode.start, end: mode.end };
+  return null;
+}
+
+interface DraftHandlerDeps {
+  liveInput: MutableRefObject<string>;
+  setMode: Dispatch<SetStateAction<Mode>>;
+  dispatch: (intent: Intent) => void;
+}
+
+export function buildComposeState(
+  deps: DraftHandlerDeps & { mode: Mode; isDiff: boolean; display: DisplayBlock[] },
+): PlanComposeState | null {
+  const { mode, isDiff, display, liveInput, setMode, dispatch } = deps;
+  if (mode.type !== "compose" || isDiff) return null;
+  return {
+    kind: mode.kind,
+    displayIndex: mode.displayIndex,
+    quote: displayText(display[mode.displayIndex]!).slice(mode.start, mode.end),
+    draft: {
+      text: mode.text,
+      onInput: (text: string) => {
+        liveInput.current = text;
+        setMode({ ...mode, text });
+      },
+      onSave: () => dispatch({ type: "saveCompose" }),
+      onCancel: () => dispatch({ type: "closeOverlay" }),
+    },
+  };
+}
+
+export function buildDiffComposeState(
+  deps: DraftHandlerDeps & { mode: Mode; isDiff: boolean; rows: DiffRow[] },
+): DiffComposeState | null {
+  const { mode, isDiff, rows, liveInput, setMode, dispatch } = deps;
+  if (mode.type !== "compose" || !isDiff) return null;
+  return {
+    kind: mode.kind,
+    rowIndex: mode.displayIndex,
+    quote: rows[mode.displayIndex]?.text.replace(/\n$/, "") ?? "",
+    draft: {
+      text: mode.text,
+      onInput: (text: string) => {
+        liveInput.current = text;
+        setMode({ ...mode, text });
+      },
+      onSave: () => dispatch({ type: "saveCompose" }),
+      onCancel: () => dispatch({ type: "closeOverlay" }),
+    },
+  };
+}
+
+export function buildPopoverState(deps: {
+  mode: Mode;
+  isDiff: boolean;
+  quickActions: QuickAction[];
+  isOwner: boolean;
+  observer: boolean;
+  resolved: boolean;
+  controller: ReviewController;
+  dispatch: (intent: Intent) => void;
+}): PlanPopoverState | null {
+  const { mode, isDiff, quickActions, isOwner, observer, resolved, controller, dispatch } = deps;
+  const markedSpan = activeSpanState(mode);
+  if (!markedSpan || isDiff) return null;
+  const spanMutationBlock = (): string | null =>
+    observer ? "observer - read-only" : resolved ? "review submitted - read-only" : null;
+  return {
+    displayIndex: markedSpan.displayIndex,
+    view: mode.type === "spanActions" ? ("actions" as const) : ("toolbar" as const),
+    actions: quickActions,
+    actionIndex: mode.type === "spanActions" ? mode.index : 0,
+    canCut: isOwner,
+    onComment: () => {
+      const blocked = spanMutationBlock();
+      if (blocked) return controller.setStatus(blocked);
+      dispatch({ type: "openCompose", kind: "comment", from: "span" });
+    },
+    onCut: () => {
+      const blocked = spanMutationBlock();
+      if (blocked) return controller.setStatus(blocked);
+      if (!isOwner) return;
+      dispatch({ type: "spanCut" });
+    },
+    onOpenActions: () => {
+      const blocked = spanMutationBlock();
+      if (blocked) return controller.setStatus(blocked);
+      dispatch({ type: "openSpanActions" });
+    },
+    onClose: () => dispatch({ type: "closeOverlay" }),
+    onPickAction: (index: number) => {
+      const blocked = spanMutationBlock();
+      if (blocked) return controller.setStatus(blocked);
+      dispatch({ type: "pickSpanAction", index });
+    },
+    onBack: () => dispatch({ type: "closeSpanActions" }),
+  };
+}
+
+export function buildSubmitConfirmState(
+  deps: DraftHandlerDeps & {
+    mode: Mode;
+    isDiff: boolean;
+    session: ReviewSession;
+    walkFileList: WalkFile[];
+    viewedPaths: Set<string>;
+  },
+): Omit<ConfirmCardProps, "theme"> | null {
+  const { mode, isDiff, session, walkFileList, viewedPaths, liveInput, setMode, dispatch } = deps;
+  if (mode.type !== "submit") return null;
+  return {
+    verdict: mode.verdict,
+    summary: mode.summary,
+    viewedSummary:
+      isDiff && session.viewedPaths !== undefined
+        ? `${viewedCount(walkFileList, viewedPaths)}/${walkFileList.length} files viewed`
+        : undefined,
+    onInput: (summary: string) => {
+      liveInput.current = summary;
+      setMode({ ...mode, summary });
+    },
+    onSelectVerdict: (verdict: VerdictKind) => setMode({ ...mode, verdict }),
+    onSubmit: () => dispatch({ type: "submitVerdict" }),
+    onCancel: () => dispatch({ type: "closeOverlay" }),
+  };
+}
+
+export function buildCardEditState(deps: DraftHandlerDeps & { mode: Mode }): RailCardEdit | null {
+  const { mode, liveInput, setMode, dispatch } = deps;
+  if (mode.type !== "railEdit") return null;
+  return {
+    id: mode.id,
+    text: mode.text,
+    onInput: (text: string) => {
+      liveInput.current = text;
+      setMode({ type: "railEdit", id: mode.id, text });
+    },
+    onSave: () => dispatch({ type: "saveCompose" }),
+    onCancel: () => dispatch({ type: "closeOverlay" }),
+  };
+}

package/src/components/PlanSheet.tsx

@@ -10,7 +10,7 @@
 
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { useRenderer } from "@opentui/react";
-import { createTextAttributes, type ScrollBoxRenderable, type TextRenderable } from "@opentui/core";
+import { type ScrollBoxRenderable, type TextRenderable } from "@opentui/core";
 import type { ReviewSession } from "@cueloop/schema";
 import {
   blockRuns,
@@ -31,18 +31,7 @@ import { CodeBlock } from "./CodeBlock";
 import { AnnotationCard, type AnnotationDraft } from "./AnnotationCard";
 import { MarkerPopover, type MarkerPopoverProps } from "./MarkerPopover";
 import { FRAME_BORDER_STYLE } from "./primitives/frame";
-
-/** 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 });
+import { runStyle } from "./plan-sheet-run-style";
 
 /** The popover toolbar card is 3 rows tall and sits flush above the marked words. */
 const POPOVER_ROWS_ABOVE = 3;
@@ -405,52 +394,3 @@ function tagLabel(block: DisplayBlock): "new" | "edited" {
 function tagColor(block: DisplayBlock, tokens: Theme): string {
   return block.type === "add" ? tokens.green : tokens.accent;
 }
-
-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 };
-  const isHeading = block.kind === "h1" || block.kind === "h2" || block.kind === "h3";
-  const isQuote = block.kind === "quote";
-  // headings are all bold; level reads from descending brightness alone (a
-  // terminal cannot scale font size), leaving the salmon accent to annotations
-  const headingFg =
-    block.kind === "h1"
-      ? tokens.text
-      : block.kind === "h2"
-        ? tokens.textMuted
-        : block.kind === "h3"
-          ? tokens.textDim
-          : undefined;
-  // 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);
-  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 };
-  }
-}