fix(ui): render numerals for ordered list items (#520)

* feat(parser): detect ordered list markers and compute display indices

The block parser collapsed `*`, `-`, and `\d+.` markers into a single
`list-item` block type, discarding ordered/unordered status. Add
`ordered` + `orderedStart` to Block, capture the numeric marker in the
list regex, and introduce `computeListIndices()` — a pure helper that
walks a list group and assigns each ordered item a CommonMark-correct
display number (sequential renumbering, streak break/restart on
unordered items, deeper-level state truncation, top-level numbering
preserved across nested children).

21 new unit tests cover both the parser changes and the indexing
helper, including the tricky cases: `1./2./99.` renumbers as 1,2,3;
sub-bullets between ordered items keep the top-level streak alive;
nested ordered sublists number independently and reset between
siblings; numeric checkboxes set both `ordered` and `checked`.

For provenance purposes, this commit was AI assisted.

* feat(ui): render numerals for ordered list items

Branch the list-item marker span on `block.ordered`: render
`${index}.` (with `tabular-nums` and a 1.5rem min-width to keep
columns stable across single- and double-digit numerals) when the
source marker was numeric, otherwise fall through to the existing
`•`/`◦`/`▪` bullet symbols. Indices come from `computeListIndices()`
called once per list group; `groupBlocks` is unchanged so mixed
nested lists still share a single `data-pinpoint-group="list"`
hover wrapper and annotation anchoring is unaffected. Checkbox
items still take precedence over numerals.

Adds a real-world manual fixture (06-ordered-list-plan.md) whose
`## Verification` section exercises a 10-item ordered list, the
case that originally surfaced the bug.

For provenance purposes, this commit was AI assisted.

* fix(parser): merge consecutive blockquote lines into one block

Each `>` line was emitted as its own blockquote block, so the
renderer's `my-4` margin produced visible gaps between every line
of a multi-line quote (the parser had a literal TODO comment:
"Check if previous was blockquote, if so, merge? No, separate for
now"). Fix: append to the previous block when it's a blockquote
and the prior line wasn't blank, mirroring the list-continuation
pattern. A blank line still breaks the quote so two `>` runs
separated by a blank line stay distinct.

Adds 5 unit tests (merge, blank-line break, paragraph boundaries,
single-line) and a manual fixture (07-blockquotes.md) covering the
bug case, the blank-line-break case, sandwich-between-paragraphs,
and inline markdown across merged lines.

For provenance purposes, this commit was AI assisted.

* fix(ui): address code review — diff view, task lists, blockquote paragraphs

Three issues surfaced by PR review #520:

1. **Diff view flattened ordered lists to bullets.** PlanCleanDiffView's
   SimpleBlockRenderer duplicated Viewer's list-item JSX with hardcoded
   bullet symbols, so a denied+resubmitted plan with numbered steps
   showed numerals in the main view but `•` in the diff view — exactly
   the screen where "which step changed?" matters most. Fixed by
   threading computeListIndices through MarkdownChunk and sharing the
   marker rendering via a new ListMarker component used by both
   renderers, which also removes the root-cause duplication.

2. **Ordered task lists dropped their numbers.** `1. [ ] step` set both
   `ordered=true` and `checked=false` in the parser, but the renderer's
   checkbox branch took precedence and the numeral was never shown.
   GitHub renders `1. [ ]` as numeral + checkbox side by side; we now
   match that by rendering both glyphs in ListMarker when an ordered
   task list item appears.

3. **Multi-paragraph blockquotes collapsed.** After the blockquote-merge
   fix in the previous commit, `> a\n>\n> b` produced content
   `"a\n\nb"` but the renderer passed it straight to InlineMarkdown,
   which renders `\n\n` as whitespace — so two quoted paragraphs
   mashed into one line. Fixed by splitting blockquote content on
   `/\n\n+/` in both Viewer and PlanCleanDiffView and emitting one
   `<p>` child per paragraph.

Adds one unit test for the multi-paragraph blockquote content shape and
a manual fixture (08-ordered-edge-cases.md) covering ordered task lists,
multi-paragraph quotes, nested-bullet counter preservation, double-digit
alignment, and start-at-N numbering.

The fourth review comment — loose ordered lists with intervening non-list
blocks restarting numbering — is deferred. It requires parser-level
loose-list detection (CommonMark's indented-continuation rule) and the
bug only fires when users rely on lazy `1./1./1.` markers across a
break. Tracked as a follow-up.

For provenance purposes, this commit was AI assisted.

* fix(parser): don't merge blockquote lines containing block-level markers

Round-two review flagged a regression: `> 1. foo\n> 2. bar\n> 3. baz` was
merging into one blockquote whose content was `"1. foo\n2. bar\n3. baz"`.
The renderer split on `\n\n+` (paragraph breaks), found none, and emitted
a single `<p>` — so `\n` collapsed to whitespace in HTML and the user
saw `"1. foo 2. bar 3. baz"` as one run-on line. Worse than the pre-PR
behavior (which at least kept each line in its own box).

Pragmatic fix: don't merge a `>` line whose stripped content starts with
a block-level marker (`*`, `-`, `\d+.`, `#`, `` ``` ``, `>`). Those stay
as separate blockquote blocks so each marker line is visually distinct
(legible, matching pre-PR behavior for quoted lists). Wrapped prose
quotes — the original motivating case — still merge correctly because
prose lines don't start with markers.

Also check the PREVIOUS block's content for markers so a trailing prose
line after a `> 1. item` doesn't glue onto the list-item block.

7 new unit tests cover: quoted ordered list stays separate, quoted
unordered list stays separate, quoted heading stays separate, quoted
code fence stays separate, nested blockquote stays separate, wrapped
prose quote still merges (regression guard), and mixed prose+list where
prose merges and list lines stay separate.

Adds tests/test-fixtures/09-quoted-list-regression.md as a manual repro.

Known follow-ups (tracked separately, not in this PR):
- Consecutive separate blockquote blocks still get individual `my-4`
  margins, so a quoted list shows as stacked boxes with gaps between
  lines. The proper fix is recursive blockquote parsing (render the
  content as its own Block[] tree with an actual nested list inside
  the quote). Deferred — requires `children?: Block[]` on Block,
  parser rework, and exportAnnotations traversal changes.
- Clean diff view renumbers ordered lists from the start of each diff
  chunk when users rely on CommonMark's lazy `1./1./1.` markers. Same
  power-user population as the earlier deferred loose-list case.
- Pure code-hygiene items from the second review (non-list-block
  handling in computeListIndices, BULLET_BY_LEVEL modulo cycle,
  <ListGroup> extraction, CLAUDE.md Block interface drift,
  splitBlockquoteParagraphs helper) — batch into a follow-up cleanup.

For provenance purposes, this commit was AI assisted.

Author: backnotprop

packages/ui/components/ListMarker.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+/**
+ * Shared list-item marker used by both the main Viewer and the plan-diff
+ * clean view. Renders the appropriate glyph(s) for a list item given its
+ * level, ordered flag, display index, and checkbox state.
+ *
+ * Rendering rules:
+ *   - Ordered items render `${orderedIndex}.` with tabular-nums so digit
+ *     widths stay stable across e.g. `9.` → `10.`.
+ *   - Checkbox items render the circle / checkmark SVG.
+ *   - Ordered + checkbox renders BOTH: numeral first, checkbox second
+ *     (matches GitHub's `1. [ ] task` rendering).
+ *   - Plain bullets fall back to `•` / `◦` / `▪` by level.
+ *
+ * Interactivity is opt-in: the Viewer passes `interactive` + `onToggle`
+ * for click-to-toggle checkboxes; the diff view leaves both undefined.
+ */
+interface ListMarkerProps {
+  level: number;
+  ordered?: boolean;
+  orderedIndex?: number | null;
+  checked?: boolean; // undefined = not a checkbox
+  interactive?: boolean;
+  onToggle?: () => void;
+}
+
+const BULLET_BY_LEVEL = ['\u2022', '\u25E6', '\u25AA'];
+
+export const ListMarker: React.FC<ListMarkerProps> = ({
+  level,
+  ordered,
+  orderedIndex,
+  checked,
+  interactive,
+  onToggle,
+}) => {
+  const isCheckbox = checked !== undefined;
+  const showNumeral = !!ordered && orderedIndex != null;
+  const bullet = BULLET_BY_LEVEL[Math.min(level, BULLET_BY_LEVEL.length - 1)];
+
+  const handleClick = interactive && onToggle
+    ? (e: React.MouseEvent) => { e.stopPropagation(); onToggle(); }
+    : undefined;
+
+  return (
+    <span
+      className={`select-none shrink-0 flex items-center gap-1${interactive ? ' cursor-pointer' : ''}`}
+      onClick={handleClick}
+      role={interactive ? 'checkbox' : undefined}
+      aria-checked={interactive ? checked : undefined}
+    >
+      {showNumeral && (
+        <span className="text-primary/60 tabular-nums text-right" style={{ minWidth: '1.5rem' }}>
+          {orderedIndex}.
+        </span>
+      )}
+      {isCheckbox ? (
+        checked ? (
+          <svg className="w-4 h-4 text-success" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        ) : (
+          <svg className={`w-4 h-4 text-muted-foreground/50${interactive ? ' hover:text-muted-foreground transition-colors' : ''}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+            <circle cx="12" cy="12" r="9" />
+          </svg>
+        )
+      ) : !showNumeral ? (
+        <span className="text-primary/60">{bullet}</span>
+      ) : null}
+    </span>
+  );
+};

packages/ui/components/Viewer.tsx

@@ -3,7 +3,8 @@ import { createPortal } from 'react-dom';
 import hljs from 'highlight.js';
 import 'highlight.js/styles/github-dark.css';
 import { Block, Annotation, AnnotationType, EditorMode, type InputMethod, type ImageAttachment, type ActionsLabelMode } from '../types';
-import { Frontmatter } from '../utils/parser';
+import { Frontmatter, computeListIndices } from '../utils/parser';
+import { ListMarker } from './ListMarker';
 import { AnnotationToolbar } from './AnnotationToolbar';
 import { FloatingQuickLabelPicker } from './FloatingQuickLabelPicker';
 
@@ -530,11 +531,25 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
         {!frontmatter && blocks.length > 0 && blocks[0].type !== 'heading' && <div className="mt-4" />}
         {groupBlocks(blocks).map(group =>
           group.type === 'list-group' ? (
-            <div key={group.key} data-pinpoint-group="list" className="py-1 -mx-2 px-2">
-              {group.blocks.map(block => (
-                <BlockRenderer imageBaseDir={imageBaseDir} onImageClick={(src, alt) => setLightbox({ src, alt })} key={block.id} block={block} onOpenLinkedDoc={onOpenLinkedDoc} onToggleCheckbox={onToggleCheckbox} checkboxOverrides={checkboxOverrides} />
-              ))}
-            </div>
+            (() => {
+              const indices = computeListIndices(group.blocks);
+              return (
+                <div key={group.key} data-pinpoint-group="list" className="py-1 -mx-2 px-2">
+                  {group.blocks.map((block, i) => (
+                    <BlockRenderer
+                      imageBaseDir={imageBaseDir}
+                      onImageClick={(src, alt) => setLightbox({ src, alt })}
+                      key={block.id}
+                      block={block}
+                      orderedIndex={indices[i]}
+                      onOpenLinkedDoc={onOpenLinkedDoc}
+                      onToggleCheckbox={onToggleCheckbox}
+                      checkboxOverrides={checkboxOverrides}
+                    />
+                  ))}
+                </div>
+              );
+            })()
           ) : group.block.type === 'code' && isMermaidLanguage(group.block.language) ? (
             <MermaidBlock key={group.block.id} block={group.block} />
           ) : group.block.type === 'code' && isGraphvizLanguage(group.block.language) ? (
@@ -967,7 +982,8 @@ const BlockRenderer: React.FC<{
   onImageClick?: (src: string, alt: string) => void;
   onToggleCheckbox?: (blockId: string, checked: boolean) => void;
   checkboxOverrides?: Map<string, boolean>;
-}> = ({ block, onOpenLinkedDoc, imageBaseDir, onImageClick, onToggleCheckbox, checkboxOverrides }) => {
+  orderedIndex?: number | null;
+}> = ({ block, onOpenLinkedDoc, imageBaseDir, onImageClick, onToggleCheckbox, checkboxOverrides, orderedIndex }) => {
   switch (block.type) {
     case 'heading':
       const Tag = `h${block.level || 1}` as React.ElementType;
@@ -979,15 +995,23 @@ const BlockRenderer: React.FC<{
 
       return <Tag className={styles} data-block-id={block.id} data-block-type="heading"><InlineMarkdown imageBaseDir={imageBaseDir} onImageClick={onImageClick} text={block.content} onOpenLinkedDoc={onOpenLinkedDoc} /></Tag>;
 
-    case 'blockquote':
+    case 'blockquote': {
+      // Content may span multiple merged `>` lines. Split on blank-line
+      // paragraph breaks so `> a\n>\n> b` renders as two <p> children.
+      const paragraphs = block.content.split(/\n\n+/);
       return (
         <blockquote
           className="border-l-2 border-primary/50 pl-4 my-4 text-muted-foreground italic"
           data-block-id={block.id}
         >
-          <InlineMarkdown imageBaseDir={imageBaseDir} onImageClick={onImageClick} text={block.content} onOpenLinkedDoc={onOpenLinkedDoc} />
+          {paragraphs.map((para, i) => (
+            <p key={i} className={i > 0 ? 'mt-2' : ''}>
+              <InlineMarkdown imageBaseDir={imageBaseDir} onImageClick={onImageClick} text={para} onOpenLinkedDoc={onOpenLinkedDoc} />
+            </p>
+          ))}
         </blockquote>
       );
+    }
 
     case 'list-item': {
       const indent = (block.level || 0) * 1.25; // 1.25rem per level
@@ -1002,28 +1026,14 @@ const BlockRenderer: React.FC<{
           data-block-id={block.id}
           style={{ marginLeft: `${indent}rem` }}
         >
-          <span
-            className={`select-none shrink-0 flex items-center${isInteractive ? ' cursor-pointer' : ''}`}
-            onClick={isInteractive ? (e) => { e.stopPropagation(); onToggleCheckbox!(block.id, !isChecked); } : undefined}
-            role={isInteractive ? 'checkbox' : undefined}
-            aria-checked={isInteractive ? isChecked : undefined}
-          >
-            {isCheckbox ? (
-              isChecked ? (
-                <svg className="w-4 h-4 text-success" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-              ) : (
-                <svg className={`w-4 h-4 text-muted-foreground/50${isInteractive ? ' hover:text-muted-foreground transition-colors' : ''}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
-                  <circle cx="12" cy="12" r="9" />
-                </svg>
-              )
-            ) : (
-              <span className="text-primary/60">
-                {(block.level || 0) === 0 ? '•' : (block.level || 0) === 1 ? '◦' : '▪'}
-              </span>
-            )}
-          </span>
+          <ListMarker
+            level={block.level || 0}
+            ordered={block.ordered}
+            orderedIndex={orderedIndex}
+            checked={isChecked}
+            interactive={isInteractive}
+            onToggle={isInteractive ? () => onToggleCheckbox!(block.id, !isChecked) : undefined}
+          />
           <span className={`text-sm leading-relaxed ${isCheckbox && isChecked ? 'text-muted-foreground line-through' : 'text-foreground/90'}`}>
             <InlineMarkdown imageBaseDir={imageBaseDir} onImageClick={onImageClick} text={block.content} onOpenLinkedDoc={onOpenLinkedDoc} />
           </span>

packages/ui/components/plan-diff/PlanCleanDiffView.tsx

@@ -8,7 +8,8 @@
 
 import React, { useEffect, useRef, useState, useCallback } from "react";
 import hljs from "highlight.js";
-import { parseMarkdownToBlocks } from "../../utils/parser";
+import { parseMarkdownToBlocks, computeListIndices } from "../../utils/parser";
+import { ListMarker } from "../ListMarker";
 import type { Block, Annotation, EditorMode, ImageAttachment } from "../../types";
 import { AnnotationType } from "../../types";
 import type { PlanDiffBlock } from "../../utils/planDiffEngine";
@@ -409,17 +410,29 @@ const MarkdownChunk: React.FC<{ content: string }> = ({ content }) => {
     () => parseMarkdownToBlocks(content),
     [content]
   );
+  // Compute ordered-list display indices across the entire chunk so every
+  // list-item gets the right numeral even though we don't group here.
+  // Non-list blocks pass through as `null` and act as streak-breaks — same
+  // behavior as the main Viewer's per-group counter.
+  const orderedIndices = React.useMemo(
+    () => computeListIndices(blocks),
+    [blocks]
+  );
 
   return (
     <>
-      {blocks.map((block) => (
-        <SimpleBlockRenderer key={block.id} block={block} />
+      {blocks.map((block, i) => (
+        <SimpleBlockRenderer
+          key={block.id}
+          block={block}
+          orderedIndex={orderedIndices[i]}
+        />
       ))}
     </>
   );
 };
 
-const SimpleBlockRenderer: React.FC<{ block: Block }> = ({ block }) => {
+const SimpleBlockRenderer: React.FC<{ block: Block; orderedIndex?: number | null }> = ({ block, orderedIndex }) => {
   switch (block.type) {
     case "heading": {
       const Tag = `h${block.level || 1}` as keyof React.JSX.IntrinsicElements;
@@ -437,12 +450,20 @@ const SimpleBlockRenderer: React.FC<{ block: Block }> = ({ block }) => {
       );
     }
 
-    case "blockquote":
+    case "blockquote": {
+      // Split on blank-line paragraph breaks so merged `> a\n>\n> b`
+      // renders as two <p> children instead of collapsing to one line.
+      const paragraphs = block.content.split(/\n\n+/);
       return (
         <blockquote className="border-l-2 border-primary/50 pl-4 my-4 text-muted-foreground italic">
-          <InlineMarkdown text={block.content} />
+          {paragraphs.map((para, i) => (
+            <p key={i} className={i > 0 ? "mt-2" : ""}>
+              <InlineMarkdown text={para} />
+            </p>
+          ))}
         </blockquote>
       );
+    }
 
     case "list-item": {
       const indent = (block.level || 0) * 1.25;
@@ -452,43 +473,12 @@ const SimpleBlockRenderer: React.FC<{ block: Block }> = ({ block }) => {
           className="flex gap-3 my-1.5"
           style={{ marginLeft: `${indent}rem` }}
         >
-          <span className="select-none shrink-0 flex items-center">
-            {isCheckbox ? (
-              block.checked ? (
-                <svg
-                  className="w-4 h-4 text-success"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth={2.5}
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-              ) : (
-                <svg
-                  className="w-4 h-4 text-muted-foreground/50"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth={2}
-                >
-                  <circle cx="12" cy="12" r="9" />
-                </svg>
-              )
-            ) : (
-              <span className="text-primary/60">
-                {(block.level || 0) === 0
-                  ? "\u2022"
-                  : (block.level || 0) === 1
-                    ? "\u25E6"
-                    : "\u25AA"}
-              </span>
-            )}
-          </span>
+          <ListMarker
+            level={block.level || 0}
+            ordered={block.ordered}
+            orderedIndex={orderedIndex}
+            checked={block.checked}
+          />
           <span
             className={`text-sm leading-relaxed ${isCheckbox && block.checked ? "text-muted-foreground line-through" : "text-foreground/90"}`}
           >

packages/ui/types.ts

@@ -58,6 +58,8 @@ export interface Block {
   level?: number; // For headings (1-6) or list indentation
   language?: string; // For code blocks (e.g., 'rust', 'typescript')
   checked?: boolean; // For checkbox list items (true = checked, false = unchecked, undefined = not a checkbox)
+  ordered?: boolean; // For list items: true when source marker was \d+.
+  orderedStart?: number; // For ordered list items: integer parsed from the marker (e.g. 5 for "5.")
   order: number; // Sorting order
   startLine: number; // 1-based line number in source
 }