Add file preview comments and task toggles (#3115)

apps/mobile/src/features/review/reviewCommentSelection.test.ts

@@ -78,4 +78,68 @@ describe("review comment serialization", () => {
     );
     expect(segments[2]).toEqual(expect.objectContaining({ kind: "text", text: "\nAfter" }));
   });
+
+  it("parses source-language review comments created by the web file viewer", () => {
+    const [segment] = parseReviewCommentMessageSegments(
+      [
+        '<review_comment sectionId="file:docs/plan.md" sectionTitle="File comment" filePath="docs/plan.md" startIndex="0" endIndex="1" rangeLabel="L1 to L2">',
+        "Clarify this.",
+        "```md",
+        "# Plan",
+        "- Step one",
+        "```",
+        "</review_comment>",
+      ].join("\n"),
+    );
+
+    expect(segment).toEqual(
+      expect.objectContaining({
+        kind: "review-comment",
+        comment: expect.objectContaining({
+          filePath: "docs/plan.md",
+          fenceLanguage: "md",
+          diff: "# Plan\n- Step one",
+        }),
+      }),
+    );
+  });
+
+  it("keeps fenced examples in comment prose separate from the context fence", () => {
+    const [segment] = parseReviewCommentMessageSegments(
+      [
+        '<review_comment sectionId="section-1" sectionTitle="Working tree" filePath="src/app.ts" startIndex="0" endIndex="0" rangeLabel="+1">',
+        "Try this:",
+        "```ts",
+        "const value = 1;",
+        "```",
+        "Then retry.",
+        "```diff",
+        "@@ -0,0 +1,1 @@",
+        "+one",
+        "```",
+        "</review_comment>",
+      ].join("\n"),
+    );
+
+    expect(segment).toEqual(
+      expect.objectContaining({
+        kind: "review-comment",
+        comment: expect.objectContaining({
+          text: ["Try this:", "```ts", "const value = 1;", "```", "Then retry."].join("\n"),
+          diff: "@@ -0,0 +1,1 @@\n+one",
+        }),
+      }),
+    );
+  });
+
+  it("round-trips greater-than signs in review attributes", () => {
+    const serialized = formatReviewCommentContext(
+      { ...makeTarget(), sectionTitle: "Changes > 5" },
+      "Check this.",
+    );
+    const [comment] = parseReviewInlineComments(serialized);
+
+    expect(serialized).toContain('sectionTitle="Changes &gt; 5"');
+    expect(comment?.sectionTitle).toBe("Changes > 5");
+  });
 });

apps/mobile/src/features/review/reviewCommentSelection.ts

@@ -21,6 +21,7 @@ export interface ReviewInlineComment {
   readonly rangeLabel: string;
   readonly text: string;
   readonly diff: string;
+  readonly fenceLanguage?: string;
 }
 
 export type ReviewCommentMessageSegment =
@@ -38,6 +39,7 @@ let currentTarget: ReviewCommentTarget | null = null;
 const listeners = new Set<() => void>();
 const REVIEW_COMMENT_BLOCK_PATTERN = /<review_comment\b([^>]*)>\s*([\s\S]*?)<\/review_comment>/g;
 const REVIEW_COMMENT_ATTRIBUTE_PATTERN = /([a-zA-Z][a-zA-Z0-9_-]*)="([^"]*)"/g;
+const REVIEW_COMMENT_FENCE_PATTERN = /(`{3,})([^\s`]*)[^\n]*\n([\s\S]*?)\n\1/g;
 
 function emitChange() {
   listeners.forEach((listener) => listener());
@@ -170,12 +172,17 @@ function formatReviewSelectedDiff(target: ReviewCommentTarget): string {
 }
 
 function escapeReviewCommentAttribute(value: string): string {
-  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
 }
 
 function unescapeReviewCommentAttribute(value: string): string {
   return value
     .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
     .replace(/&quot;/g, '"')
     .replace(/&amp;/g, "&");
 }
@@ -195,15 +202,19 @@ function readNonNegativeInteger(value: string | undefined): number | null {
   return Number(value);
 }
 
-function extractReviewCommentText(rawBody: string): string {
-  const fenceIndex = rawBody.indexOf("```diff");
-  const commentBody = fenceIndex >= 0 ? rawBody.slice(0, fenceIndex) : rawBody;
-  return commentBody.trim();
-}
-
-function extractReviewCommentDiff(rawBody: string): string {
-  const match = rawBody.match(/```diff\s*\n([\s\S]*?)\n```/);
-  return match?.[1]?.trim() ?? "";
+function extractReviewCommentBody(rawBody: string): {
+  text: string;
+  language: string;
+  contents: string;
+} {
+  const matches = Array.from(rawBody.matchAll(REVIEW_COMMENT_FENCE_PATTERN));
+  const match = matches.at(-1);
+  const fenceIndex = match?.index;
+  return {
+    text: rawBody.slice(0, fenceIndex ?? rawBody.length).trim(),
+    language: match?.[2]?.trim() || "diff",
+    contents: match?.[3] ?? "",
+  };
 }
 
 function parseReviewInlineComment(
@@ -219,6 +230,7 @@ function parseReviewInlineComment(
   if (!filePath || !sectionId || startIndex === null || endIndex === null) {
     return null;
   }
+  const body = extractReviewCommentBody(rawBody);
 
   return {
     id: `review-comment:${index}:${sectionId}:${filePath}:${startIndex}:${endIndex}`,
@@ -228,13 +240,20 @@ function parseReviewInlineComment(
     startIndex: Math.min(startIndex, endIndex),
     endIndex: Math.max(startIndex, endIndex),
     rangeLabel: attributes.rangeLabel?.trim() || "line",
-    text: extractReviewCommentText(rawBody),
-    diff: extractReviewCommentDiff(rawBody),
+    text: body.text,
+    diff: body.contents,
+    fenceLanguage: body.language,
   };
 }
 
 export function formatReviewCommentContext(target: ReviewCommentTarget, comment: string): string {
   const rangeLabel = formatReviewSelectedRangeLabel(target);
+  const diff = formatReviewSelectedDiff(target);
+  const longestBacktickRun = Math.max(
+    0,
+    ...Array.from(diff.matchAll(/`+/g), (match) => match[0].length),
+  );
+  const fence = "`".repeat(Math.max(3, longestBacktickRun + 1));
   return [
     [
       "<review_comment",
@@ -247,9 +266,9 @@ export function formatReviewCommentContext(target: ReviewCommentTarget, comment:
       ">",
     ].join(""),
     comment.trim(),
-    "```diff",
-    formatReviewSelectedDiff(target),
-    "```",
+    `${fence}diff`,
+    diff,
+    fence,
     "</review_comment>",
   ].join("\n");
 }

apps/mobile/src/features/threads/ThreadFeed.tsx

@@ -1193,6 +1193,9 @@ const ReviewCommentCard = memo(function ReviewCommentCard(props: {
 });
 
 function buildReviewCommentPatch(comment: ReviewInlineComment): string {
+  if ((comment.fenceLanguage ?? "diff") !== "diff") {
+    return "";
+  }
   const diff = comment.diff.trim();
   if (!diff) {
     return "";

apps/web/src/components/ChatMarkdown.browser.tsx

@@ -69,6 +69,26 @@
     document.body.innerHTML = "";
   });
 
+  it("makes task-list checkboxes interactive when a change handler is provided", async () => {
+    const onTaskListChange = vi.fn();
+    const screen = await render(
+      <ChatMarkdown
+        text={"- [ ] Ship it"}
+        cwd="/repo/project"
+        onTaskListChange={onTaskListChange}
+      />,
+    );
+
+    try {
+      const checkbox = page.getByRole("checkbox", { name: "Toggle task" });
+      await expect.element(checkbox).not.toBeDisabled();
+      await checkbox.click();
+      expect(onTaskListChange).toHaveBeenCalledWith({ markerOffset: 2, checked: true });
+    } finally {
+      await screen.unmount();
+    }
+  });
+
   it("rewrites file uri hrefs into direct paths before rendering", async () => {
     const filePath =
       "/Users/yashsingh/p/sco/claude-code-extract/src/utils/permissions/PermissionRule.ts";
@@ -513,7 +533,7 @@
 
       try {
         const titles = [...document.querySelectorAll(".chat-markdown-codeblock-title")];
         expect(titles).toHaveLength(3);
 
         // Language with a known icon: icon XOR text — never the redundant pair.
         const languageOnly = titles[0]!;
@@ -548,7 +568,7 @@
 
       try {
         const block = document.querySelector(".chat-markdown-codeblock");
         expect(block?.getAttribute("data-wrap")).toBe("false");
 
         const toggle = page.getByRole("button", { name: "Wrap lines" });
         await expect.element(toggle).not.toHaveAttribute("title");

apps/web/src/components/ChatMarkdown.tsx

@@ -92,6 +92,7 @@ interface ChatMarkdownProps {
   text: string;
   cwd: string | undefined;
   threadRef?: ScopedThreadRef | undefined;
+  onTaskListChange?: ((input: { markerOffset: number; checked: boolean }) => void) | undefined;
   isStreaming?: boolean;
   skills?: ReadonlyArray<Pick<ServerProviderSkill, "name" | "displayName">>;
   className?: string;
@@ -109,6 +110,17 @@ const highlightedCodeCache = new LRUCache<string>(
   MAX_HIGHLIGHT_CACHE_MEMORY_BYTES,
 );
 const highlighterPromiseCache = new Map<string, Promise<DiffsHighlighter>>();
+
+function findTaskListMarkerOffset(markdown: string, listItemStart: number): number | null {
+  const firstLineEnd = markdown.indexOf("\n", listItemStart);
+  const firstLine = markdown.slice(
+    listItemStart,
+    firstLineEnd === -1 ? markdown.length : firstLineEnd,
+  );
+  const match = firstLine.match(/^(?:\s*(?:[-+*]|\d+[.)])\s+)(\[[ xX]\])/);
+  if (!match?.[1]) return null;
+  return listItemStart + firstLine.indexOf(match[1]);
+}
 const CHAT_MARKDOWN_SANITIZE_SCHEMA = {
   ...defaultSchema,
   attributes: {
@@ -1171,6 +1183,7 @@ function ChatMarkdown({
   text,
   cwd,
   threadRef,
+  onTaskListChange,
   isStreaming = false,
   skills = EMPTY_MARKDOWN_SKILLS,
   className,
@@ -1216,8 +1229,44 @@ function ChatMarkdown({
       p({ node: _node, children, ...props }) {
         return <p {...props}>{renderSkillInlineMarkdownChildren(children, skills)}</p>;
       },
-      li({ node: _node, children, ...props }) {
-        return <li {...props}>{renderSkillInlineMarkdownChildren(children, skills)}</li>;
+      li({ node, children, ...props }) {
+        const listItemStart = node?.position?.start.offset;
+        const markerOffset =
+          typeof listItemStart === "number" ? findTaskListMarkerOffset(text, listItemStart) : null;
+        return (
+          <li {...props} data-task-marker-offset={markerOffset ?? undefined}>
+            {renderSkillInlineMarkdownChildren(children, skills)}
+          </li>
+        );
+      },
+      input({ node: _node, type, checked, disabled: _disabled, ...props }) {
+        if (type !== "checkbox" || !onTaskListChange) {
+          return (
+            <input
+              {...props}
+              type={type}
+              checked={checked}
+              disabled={_disabled}
+              readOnly={type === "checkbox"}
+            />
+          );
+        }
+        return (
+          <input
+            {...props}
+            type="checkbox"
+            name="markdown-task"
+            aria-label="Toggle task"
+            checked={checked}
+            onChange={(event) => {
+              const markerOffset = Number(
+                event.currentTarget.closest("li")?.dataset.taskMarkerOffset,
+              );
+              if (!Number.isSafeInteger(markerOffset)) return;
+              onTaskListChange({ markerOffset, checked: event.currentTarget.checked });
+            }}
+          />
+        );
       },
       a({ node, href, children, ...props }) {
         const normalizedHref = href ? normalizeMarkdownLinkHrefKey(href) : "";
@@ -1386,9 +1435,11 @@ function ChatMarkdown({
       fileLinkParentSuffixByPath,
       isStreaming,
       markdownFileLinkMetaByHref,
+      onTaskListChange,
       threadRef,
       resolvedTheme,
       skills,
+      text,
     ],
   );