@cueloop/client 0.1.0-alpha.10 → 0.1.0-alpha.101

package/src/markdown/markdown-editor-syntax-style.ts

@@ -0,0 +1,50 @@
+/**
+ * The native SyntaxStyle for the inline markdown editor: maps each markdown
+ * token group to a theme color and attribute set, and resolves the styleId the
+ * edit buffer needs for `addHighlightByCharRange`. Cached per theme, mirroring
+ * syntaxStyleFor. Syntax punctuation (the "marker" group) is dimmed rather than
+ * hidden, since the editor shows raw source.
+ */
+
+import { SyntaxStyle, type StyleDefinitionInput } from "@opentui/core";
+import { type Theme } from "../appearance/theme";
+import { MARKDOWN_HIGHLIGHT_GROUPS, type MarkdownHighlightGroup } from "./markdown-highlight";
+
+/** A markdown SyntaxStyle plus the lookup from token group to its native styleId. */
+export interface MarkdownEditorStyle {
+  style: SyntaxStyle;
+  styleIdFor: (group: MarkdownHighlightGroup) => number;
+}
+
+function markdownGroupStyles(theme: Theme): Record<MarkdownHighlightGroup, StyleDefinitionInput> {
+  return {
+    heading: { bold: true },
+    marker: { fg: theme.textDim },
+    link: { fg: theme.blue, underline: true },
+    code: { fg: theme.textDim },
+  };
+}
+
+const markdownEditorStyleCache = new WeakMap<Theme, MarkdownEditorStyle>();
+
+/** Build (or reuse) the markdown editor's SyntaxStyle for a theme, with a group-to-styleId lookup. */
+export function markdownEditorStyle(theme: Theme): MarkdownEditorStyle {
+  const cached = markdownEditorStyleCache.get(theme);
+
+  if (cached) return cached;
+  const groupStyles = markdownGroupStyles(theme);
+  const style = SyntaxStyle.fromStyles(groupStyles);
+  const styleIds = new Map<MarkdownHighlightGroup, number>();
+
+  for (const group of MARKDOWN_HIGHLIGHT_GROUPS) {
+    styleIds.set(group, style.getStyleId(group) ?? 0);
+  }
+  const entry: MarkdownEditorStyle = {
+    style,
+    styleIdFor: (group) => styleIds.get(group) ?? 0,
+  };
+
+  markdownEditorStyleCache.set(theme, entry);
+
+  return entry;
+}

package/src/markdown/markdown-grid.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, test } from "bun:test";
+import {
+  layoutFrontmatterGrid,
+  layoutMarkdownTable,
+  parseFrontmatterRows,
+  parseMarkdownTable,
+} from "./markdown-grid";
+
+/** The plain text of a grid line, segments concatenated. */
+function lineText(line: { text: string }[]): string {
+  return line.map((segment) => segment.text).join("");
+}
+
+describe("parseMarkdownTable", () => {
+  test("reads header cells, alignments, and body rows", () => {
+    const table = parseMarkdownTable("| Name | Size |\n| :--- | ---: |\n| a | 1 |\n| bb | 22 |");
+
+    expect(table.header).toEqual(["Name", "Size"]);
+    expect(table.aligns).toEqual(["left", "right"]);
+    expect(table.rows).toEqual([
+      ["a", "1"],
+      ["bb", "22"],
+    ]);
+  });
+
+  test("center alignment reads from a :---: delimiter", () => {
+    expect(parseMarkdownTable("| a |\n| :---: |\n| x |").aligns).toEqual(["center"]);
+  });
+
+  test("an escaped pipe stays inside its cell instead of splitting the column", () => {
+    const table = parseMarkdownTable("| Name | Note |\n| --- | --- |\n| a | b \\| c |");
+
+    expect(table.rows).toEqual([["a", "b | c"]]);
+  });
+
+  test("a blank cell between border pipes survives the border strip", () => {
+    expect(parseMarkdownTable("|  | b |\n| --- | --- |\n| x | y |").header).toEqual(["", "b"]);
+  });
+});
+
+describe("layoutMarkdownTable", () => {
+  test("bolds the header, rules under it, and right-aligns a numeric column", () => {
+    const lines = layoutMarkdownTable(
+      parseMarkdownTable("| Name | Size |\n| --- | ---: |\n| a | 1 |"),
+    );
+
+    expect(lines[0]![0]!.bold).toBe(true);
+    expect(lineText(lines[0]!)).toBe("Name  Size");
+    expect(lines[1]![0]!.dim).toBe(true);
+    expect(lineText(lines[1]!)).toBe("─".repeat("Name  Size".length));
+    // "a" padded to the "Name" column, "1" right-aligned under "Size"
+    expect(lineText(lines[2]!)).toBe("a" + " ".repeat(8) + "1");
+  });
+});
+
+describe("parseFrontmatterRows", () => {
+  test("splits top-level key: value pairs", () => {
+    expect(parseFrontmatterRows("title: Plan\nowner: me")).toEqual([
+      { key: "title", value: "Plan" },
+      { key: "owner", value: "me" },
+    ]);
+  });
+
+  test("folds an indented continuation into the row above", () => {
+    expect(parseFrontmatterRows("tags:\n  - one\n  - two")).toEqual([
+      { key: "tags", value: "- one\n- two" },
+    ]);
+  });
+});
+
+describe("layoutFrontmatterGrid", () => {
+  test("draws a full border with a bold key and a rule between rows", () => {
+    const lines = layoutFrontmatterGrid(
+      [
+        { key: "title", value: "Plan" },
+        { key: "owner", value: "me" },
+      ],
+      40,
+    );
+
+    expect(lineText(lines[0]!).startsWith("┌")).toBe(true);
+    expect(lineText(lines.at(-1)!).startsWith("└")).toBe(true);
+    // the key cell is bold, the border pieces are dim
+    const firstRow = lines[1]!;
+
+    expect(firstRow.find((segment) => segment.text.includes("title"))!.bold).toBe(true);
+    expect(firstRow[0]!.dim).toBe(true);
+    // a divider separates the two rows
+    expect(lines.some((line) => lineText(line).startsWith("├"))).toBe(true);
+  });
+
+  test("wraps a long value across cell lines, keeping the key on the first", () => {
+    const lines = layoutFrontmatterGrid([{ key: "desc", value: "one two three four five" }], 24);
+    const bodyLines = lines.filter((line) => lineText(line).startsWith("│"));
+
+    expect(bodyLines.length).toBeGreaterThan(1);
+    expect(bodyLines[0]!.some((segment) => segment.text.includes("desc"))).toBe(true);
+    // the continuation line keeps the key column blank
+    expect(bodyLines[1]!.some((segment) => segment.text.includes("desc"))).toBe(false);
+  });
+});

package/src/markdown/markdown-grid.ts

@@ -0,0 +1,203 @@
+/**
+ * Grid layout for the two block kinds the read-only thread renders as tables:
+ * a GFM table (bold header over a rule, columns aligned per the delimiter row,
+ * no vertical borders) and leading YAML
+ * frontmatter (a full-bordered key/value grid, bold nowrap keys, wrapped
+ * values). Both are pure: they turn a block's source text and a width into
+ * positioned, styled segments the renderer prints verbatim, so a char-frame
+ * test can assert the exact grid.
+ */
+
+import { wrapLines } from "./mark-runs";
+
+/** One painted piece of a grid line: its text plus whether it reads bold or dim (a border). */
+export interface GridSegment {
+  text: string;
+  bold: boolean;
+  dim: boolean;
+}
+
+/** A grid line is left-to-right segments; concatenating their text gives the row. */
+export type GridLine = GridSegment[];
+
+export type ColumnAlign = "left" | "right" | "center";
+
+export interface MarkdownTable {
+  aligns: ColumnAlign[];
+  header: string[];
+  rows: string[][];
+}
+
+/**
+ * Split a table row into trimmed cells on unescaped pipes, unescaping `\|` into a
+ * literal pipe, and dropping the empty cells an optional leading or trailing
+ * border pipe produces (an intentional blank cell keeps its surrounding spaces).
+ */
+function splitTableRow(line: string): string[] {
+  const trimmed = line.trim();
+  const parts: string[] = [];
+  let cell = "";
+
+  for (let index = 0; index < trimmed.length; index++) {
+    const char = trimmed[index]!;
+
+    if (char === "\\" && trimmed[index + 1] === "|") {
+      cell += "|";
+      index++;
+    } else if (char === "|") {
+      parts.push(cell);
+      cell = "";
+    } else {
+      cell += char;
+    }
+  }
+  parts.push(cell);
+  if (parts.length > 1 && parts[0] === "") parts.shift();
+  if (parts.length > 1 && parts[parts.length - 1] === "") parts.pop();
+
+  return parts.map((part) => part.trim());
+}
+
+/** Parse a GFM table block's verbatim source into header cells, column alignments, and body rows. */
+export function parseMarkdownTable(text: string): MarkdownTable {
+  const lines = text.split("\n").filter((line) => line.trim() !== "");
+  const header = splitTableRow(lines[0] ?? "");
+  const aligns: ColumnAlign[] = splitTableRow(lines[1] ?? "").map((cell) => {
+    const left = cell.startsWith(":");
+    const right = cell.endsWith(":");
+
+    return left && right ? "center" : right ? "right" : "left";
+  });
+  const rows = lines.slice(2).map(splitTableRow);
+
+  return { aligns, header, rows };
+}
+
+/** Pad `text` to `width` cells under an alignment. */
+function pad(text: string, width: number, align: ColumnAlign): string {
+  const slack = Math.max(0, width - text.length);
+
+  if (align === "right") return " ".repeat(slack) + text;
+  if (align === "center") {
+    const left = Math.floor(slack / 2);
+
+    return " ".repeat(left) + text + " ".repeat(slack - left);
+  }
+
+  return text + " ".repeat(slack);
+}
+
+/** Two spaces separate table columns; the read-only render draws no vertical rule. */
+const COLUMN_GAP = "  ";
+
+/**
+ * Lay out a GFM table: a bold header row, a dim rule spanning the table width,
+ * then the body rows, every column padded to its widest cell under its alignment.
+ */
+export function layoutMarkdownTable(table: MarkdownTable): GridLine[] {
+  const columnCount = Math.max(table.header.length, ...table.rows.map((row) => row.length), 1);
+  const alignOf = (column: number): ColumnAlign => table.aligns[column] ?? "left";
+  const cellAt = (cells: string[], column: number): string => cells[column] ?? "";
+  const widths = Array.from({ length: columnCount }, (_unused, column) =>
+    Math.max(
+      cellAt(table.header, column).length,
+      ...table.rows.map((row) => cellAt(row, column).length),
+      1,
+    ),
+  );
+  const rowText = (cells: string[]): string =>
+    widths
+      .map((width, column) => pad(cellAt(cells, column), width, alignOf(column)))
+      .join(COLUMN_GAP);
+  const totalWidth =
+    widths.reduce((sum, width) => sum + width, 0) + COLUMN_GAP.length * (columnCount - 1);
+  const lines: GridLine[] = [
+    [{ text: rowText(table.header), bold: true, dim: false }],
+    [{ text: "─".repeat(totalWidth), bold: false, dim: true }],
+  ];
+
+  for (const row of table.rows) lines.push([{ text: rowText(row), bold: false, dim: false }]);
+
+  return lines;
+}
+
+export interface FrontmatterRow {
+  key: string;
+  value: string;
+}
+
+/** Parse frontmatter YAML into top-level key/value rows; indented lines fold into the row above. */
+export function parseFrontmatterRows(text: string): FrontmatterRow[] {
+  const rows: FrontmatterRow[] = [];
+
+  for (const line of text.split("\n")) {
+    if (line.trim() === "") continue;
+    const match = /^([^:\s][^:]*):\s?(.*)$/.exec(line);
+
+    if (match) {
+      rows.push({ key: match[1]!.trim(), value: match[2]! });
+    } else if (rows.length > 0) {
+      const previous = rows[rows.length - 1]!;
+
+      previous.value = previous.value === "" ? line.trim() : `${previous.value}\n${line.trim()}`;
+    }
+  }
+
+  return rows;
+}
+
+/** The fixed cells a frontmatter grid row spends on borders and padding: `│ key │ value │`. */
+const FRONTMATTER_CHROME = 7;
+
+/** Wrap a cell value into lines no wider than `width`, honouring its own line breaks. */
+function wrapCell(value: string, width: number): string[] {
+  if (value === "") return [""];
+
+  return wrapLines(value, width).map((line) => value.slice(line.start, line.end));
+}
+
+/**
+ * Lay out leading frontmatter as a full-bordered key/value grid: bold nowrap
+ * keys on the left, values wrapped to the remaining width on the right, a rule
+ * between every row.
+ */
+export function layoutFrontmatterGrid(rows: FrontmatterRow[], maxWidth: number): GridLine[] {
+  if (rows.length === 0) return [];
+  const keyWidth = Math.max(3, ...rows.map((row) => row.key.length));
+  // size the value column to its content, capped at the width left after the key column and borders,
+  // so a short frontmatter table stays compact and a long value wraps instead of overflowing
+  const available = Math.max(3, maxWidth - keyWidth - FRONTMATTER_CHROME);
+  const naturalWidth = Math.max(
+    3,
+    ...rows.map((row) => Math.max(0, ...row.value.split("\n").map((line) => line.length))),
+  );
+  const valueWidth = Math.min(naturalWidth, available);
+  const rule = (left: string, mid: string, right: string): GridLine => [
+    {
+      text: left + "─".repeat(keyWidth + 2) + mid + "─".repeat(valueWidth + 2) + right,
+      bold: false,
+      dim: true,
+    },
+  ];
+  const lines: GridLine[] = [rule("┌", "┬", "┐")];
+
+  rows.forEach((row, rowIndex) => {
+    if (rowIndex > 0) lines.push(rule("├", "┼", "┤"));
+    const valueLines = wrapCell(row.value, valueWidth);
+
+    valueLines.forEach((valueLine, valueIndex) => {
+      const keyCell = valueIndex === 0 ? row.key.padEnd(keyWidth) : " ".repeat(keyWidth);
+
+      lines.push([
+        { text: "│ ", bold: false, dim: true },
+        { text: keyCell, bold: valueIndex === 0, dim: false },
+        { text: " │ ", bold: false, dim: true },
+        { text: valueLine.padEnd(valueWidth), bold: false, dim: false },
+        { text: " │", bold: false, dim: true },
+      ]);
+    });
+  });
+  lines.push(rule("└", "┴", "┘"));
+
+  return lines;
+}

package/src/markdown/markdown-highlight.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, test } from "bun:test";
+import { markdownHighlightRanges, type MarkdownHighlightGroup } from "./markdown-highlight";
+
+/** The substring a range covers, paired with its group, for readable assertions. */
+function painted(source: string): Array<{ text: string; group: MarkdownHighlightGroup }> {
+  return markdownHighlightRanges(source).map((range) => ({
+    text: source.slice(range.start, range.end),
+    group: range.group,
+  }));
+}
+
+describe("markdownHighlightRanges", () => {
+  test("a heading dims its marker and bolds the text without coloring it", () => {
+    expect(painted("## Rollout Plan")).toEqual([
+      { text: "## ", group: "marker" },
+      { text: "Rollout Plan", group: "heading" },
+    ]);
+  });
+
+  test("a plain link colors its brackets and href but leaves the label plain", () => {
+    const runs = painted("see [docs](https://x.dev)");
+
+    expect(runs).toContainEqual({ text: "[", group: "link" });
+    expect(runs).toContainEqual({ text: "](https://x.dev)", group: "link" });
+    expect(runs.some((run) => run.text.includes("docs"))).toBe(false);
+  });
+
+  test("an @-scope link label colors along with the brackets and href", () => {
+    expect(painted("[@pierre/diffs](https://npm/@pierre/diffs)")).toEqual([
+      { text: "[@pierre/diffs](https://npm/@pierre/diffs)", group: "link" },
+    ]);
+  });
+
+  test("inline code grays the whole backtick span", () => {
+    expect(painted("call `run()` now")).toContainEqual({ text: "`run()`", group: "code" });
+  });
+
+  test("a fenced code block grays the whole block", () => {
+    const source = "```ts\nconst a = 1;\n```";
+
+    expect(painted(source)).toEqual([{ text: source, group: "code" }]);
+  });
+
+  test("inline code inside a list item resolves against the whole source offset", () => {
+    const source = "- run `cueloop dev`";
+    const code = markdownHighlightRanges(source).find((range) => range.group === "code");
+
+    expect(code && source.slice(code.start, code.end)).toBe("`cueloop dev`");
+  });
+
+  test("bold, emphasis, list markers, quotes, and rules stay plain", () => {
+    expect(markdownHighlightRanges("ship **now** or _later_")).toEqual([]);
+    expect(markdownHighlightRanges("- a task")).toEqual([]);
+    expect(markdownHighlightRanges("> quoted line")).toEqual([]);
+    expect(markdownHighlightRanges("---")).toEqual([]);
+  });
+
+  test("plain prose yields no ranges", () => {
+    expect(markdownHighlightRanges("just words here")).toEqual([]);
+  });
+});

package/src/markdown/markdown-highlight.ts

@@ -0,0 +1,124 @@
+/**
+ * Scan raw markdown source into highlight ranges for the inline thread editor.
+ * The scheme is deliberately restrained, matching a plain markdown editor: a
+ * heading dims its `#` marker and bolds the title text (no color); links render
+ * in one link color; inline and fenced code gray out. Everything else - bold,
+ * emphasis, list and quote markers, rules - stays plain source. Block structure
+ * reuses the schema parser so a heading or code fence is defined in one place.
+ */
+
+import { parseBlocks, LEADING_BLOCK_MARKER, type Block } from "@cueloop/schema";
+
+/** Every markdown token class the editor paints; "marker" is the dimmed heading punctuation. */
+export const MARKDOWN_HIGHLIGHT_GROUPS = ["heading", "marker", "link", "code"] as const;
+
+/** A markdown token class the editor paints. */
+export type MarkdownHighlightGroup = (typeof MARKDOWN_HIGHLIGHT_GROUPS)[number];
+
+/** A char range in the raw markdown source to paint with one group's style; end is exclusive. */
+export interface MarkdownHighlightRange {
+  start: number;
+  end: number;
+  group: MarkdownHighlightGroup;
+}
+
+/** The absolute source offset where each 0-based line begins. */
+function lineStartOffsets(source: string): number[] {
+  const offsets = [0];
+
+  for (let index = 0; index < source.length; index++) {
+    if (source[index] === "\n") offsets.push(index + 1);
+  }
+
+  return offsets;
+}
+
+// gray a balanced backtick run and color a [text](href) link; bold and emphasis stay plain source
+const INLINE_TOKEN = /(`+)(?:.+?)\1|\[[^\]]+\]\([^)]+\)/g;
+
+/** Gray inline code and color links found in one text span; other inline markup stays plain. */
+function scanInlineTokens(text: string, base: number, into: MarkdownHighlightRange[]): void {
+  INLINE_TOKEN.lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = INLINE_TOKEN.exec(text)) !== null) {
+    const token = match[0];
+    const start = base + match.index;
+    const end = start + token.length;
+
+    if (token.startsWith("`")) {
+      into.push({ start, end, group: "code" });
+      continue;
+    }
+    // a link colors its brackets and href; the [] label stays plain unless it is an @-scope, matching how a
+    // markdown source view paints links
+    const closeBracket = token.indexOf("]");
+
+    if (token.slice(1, closeBracket).startsWith("@")) {
+      into.push({ start, end, group: "link" });
+    } else {
+      into.push({ start, end: start + 1, group: "link" });
+      into.push({ start: start + closeBracket, end, group: "link" });
+    }
+  }
+}
+
+function isHeadingKind(kind: Block["kind"]): boolean {
+  return kind === "h1" || kind === "h2" || kind === "h3";
+}
+
+/** Dim a heading's `#` marker and bold the rest of the line (no color). */
+function scanHeadingBlock(
+  firstLineStart: number,
+  source: string,
+  lineStarts: number[],
+  block: Block,
+  into: MarkdownHighlightRange[],
+): void {
+  const lineText = source.slice(firstLineStart, lineStarts[block.lineStart + 1] ?? source.length);
+  const marker = lineText.match(LEADING_BLOCK_MARKER)?.[0] ?? "";
+
+  into.push({ start: firstLineStart, end: firstLineStart + marker.length, group: "marker" });
+  into.push({
+    start: firstLineStart + marker.length,
+    end: firstLineStart + lineText.trimEnd().length,
+    group: "heading",
+  });
+}
+
+/** Paint one block: heading marker and title, grayed code block, or inline code and links in prose. */
+function scanBlock(
+  block: Block,
+  source: string,
+  lineStarts: number[],
+  into: MarkdownHighlightRange[],
+): void {
+  const firstLineStart = lineStarts[block.lineStart] ?? 0;
+
+  if (isHeadingKind(block.kind)) {
+    scanHeadingBlock(firstLineStart, source, lineStarts, block, into);
+  } else if (block.kind === "code") {
+    into.push({
+      start: firstLineStart,
+      end: lineStarts[block.lineEnd + 1] ?? source.length,
+      group: "code",
+    });
+  } else if (block.kind !== "hr") {
+    for (let line = block.lineStart; line <= block.lineEnd; line++) {
+      const lineStart = lineStarts[line] ?? source.length;
+      const lineText = source.slice(lineStart, lineStarts[line + 1] ?? source.length);
+
+      scanInlineTokens(lineText.replace(/\r?\n$/, ""), lineStart, into);
+    }
+  }
+}
+
+/** Scan raw markdown source into highlight ranges over the source (markers included), for the inline editor. */
+export function markdownHighlightRanges(source: string): MarkdownHighlightRange[] {
+  const lineStarts = lineStartOffsets(source);
+  const ranges: MarkdownHighlightRange[] = [];
+
+  for (const block of parseBlocks(source)) scanBlock(block, source, lineStarts, ranges);
+
+  return ranges;
+}

package/src/markdown/thread-code-syntax.ts

@@ -0,0 +1,45 @@
+/** Tree-sitter colors for fenced code blocks in a Thread, in rendered-text offsets. */
+
+import { getTreeSitterClient } from "@opentui/core";
+import type { DisplayBlock } from "./view-plan";
+import { renderedText } from "./view-plan";
+import { spansByLine, type SyntaxSpan } from "../diff/diff-syntax";
+import { filetypeFor } from "../ui/components/syntax-highlight";
+
+export type { SyntaxSpan } from "../diff/diff-syntax";
+
+/** Highlight whole code blocks so multi-line syntax stays intact. */
+export async function highlightThreadCodeBlocks(
+  display: DisplayBlock[],
+): Promise<Map<number, SyntaxSpan[]>> {
+  const jobs = display.flatMap((block, blockIndex) => {
+    if (block.kind !== "code") return [];
+    const filetype = filetypeFor(block.work?.lang ?? block.base?.lang);
+
+    return filetype ? [{ blockIndex, filetype, source: renderedText(block) }] : [];
+  });
+  const byBlock = new Map<number, SyntaxSpan[]>();
+
+  if (jobs.length === 0) return byBlock;
+  const client = getTreeSitterClient();
+
+  await client.initialize();
+  for (const job of jobs) {
+    const result = await client.highlightOnce(job.source, job.filetype);
+
+    if (!result.highlights) continue;
+    const spans: SyntaxSpan[] = [];
+    let offset = 0;
+    const lines = job.source.split("\n");
+
+    spansByLine(job.source, result.highlights).forEach((lineSpans, lineIndex) => {
+      for (const span of lineSpans) {
+        spans.push({ start: offset + span.start, end: offset + span.end, group: span.group });
+      }
+      offset += lines[lineIndex]!.length + 1;
+    });
+    byBlock.set(job.blockIndex, spans);
+  }
+
+  return byBlock;
+}

package/src/markdown/use-thread-body-editing.tsx

@@ -0,0 +1,54 @@
+/**
+ * The thread pane's inline edit mode: owns whether the native markdown editor is
+ * open over the body, the editor element itself, and the open and exit handles.
+ * Opening is gated to an editable thread (the caller passes canEdit - owner,
+ * unresolved, not a diff); exiting saves the edited body as the working copy
+ * through the controller, so leaving the editor never loses work. The header
+ * edit/normal toggle exits through requestExit; switching threads closes the
+ * editor. Rendering the editor lives here too, so the pane pulls in one concept
+ * rather than wiring the component and its handle ref by hand.
+ */
+
+import React, { useRef, useState } from "react";
+import type { Theme } from "../appearance/theme";
+import type { ReviewController } from "../thread/thread-controller";
+import { MarkdownThreadEditor, type MarkdownEditorHandle } from "./components/MarkdownThreadEditor";
+
+export interface ThreadBodyEditing {
+  editing: boolean;
+  openEditor: () => void;
+  requestExit: () => void;
+  renderEditor: (theme: Theme) => React.ReactNode;
+}
+
+export function useThreadBodyEditing(options: {
+  controller: ReviewController;
+  sessionId: string | undefined;
+  canEdit: boolean;
+}): ThreadBodyEditing {
+  const { controller, sessionId, canEdit } = options;
+  // key editing by thread id so a thread switch closes the editor with no effect or ref
+  const [editingSessionId, setEditingSessionId] = useState<string | null>(null);
+  const handleRef = useRef<MarkdownEditorHandle | null>(null);
+  const editing = editingSessionId !== null && editingSessionId === sessionId;
+  const exitEditor = (text: string): void => {
+    controller.saveEditedBody(text);
+    setEditingSessionId(null);
+  };
+
+  return {
+    editing,
+    openEditor: () => {
+      if (canEdit && sessionId !== undefined) setEditingSessionId(sessionId);
+    },
+    requestExit: () => handleRef.current?.requestExit(),
+    renderEditor: (theme) => (
+      <MarkdownThreadEditor
+        ref={handleRef}
+        initialText={controller.working()}
+        theme={theme}
+        onExitEditor={exitEditor}
+      />
+    ),
+  };
+}