critique 0.1.33 → 0.1.34

package/AGENTS.md

@@ -8,7 +8,7 @@ ALWAYS!
 
 ### using unreleased opentui versions
 
-to use a pkg.pr.new preview URL for opentui, get the last commit hash (first 7 chars) from PR https://github.com/anomalyco/opentui/pull/536:
+to use a pkg.pr.new preview URL for opentui, get the last commit hash (40 chars always) from PR https://github.com/anomalyco/opentui/pull/536:
 
 ```bash
 gh pr view 536 -R anomalyco/opentui --json commits --jq '.commits[-1].oid[:40]'

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# 0.1.34
+
+- `review` command:
+  - Add diagram parser to extract and render diagrams from AI descriptions
+  - Show generating indicator below last hunk with animated spinner and dots
+  - Use "diagram" language in system prompt for code blocks
+- Web preview:
+  - Fix text selection by switching from flex to block layout for lines
+- UI:
+  - Fix layout shift in session multiselect by moving time ago to label
+- Themes:
+  - Add "conceal" color support
+
 # 0.1.33
 
 - Dependencies:

package/package.json

@@ -2,7 +2,7 @@
   "name": "critique",
   "module": "src/diff.tsx",
   "type": "module",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "private": false,
   "bin": "./src/cli.tsx",
   "scripts": {

package/scripts/preview-review.tsx

@@ -121,7 +121,7 @@ This improves both security and developer experience when working with the API.
 
 The new request flow with error handling:
 
-\`\`\`
+\`\`\`diagram
 ┌─────────────┐     ┌─────────────┐     ┌─────────────┐     ┌─────────────┐
 │   Client    │────▶│   Router    │────▶│  Handler    │────▶│  Database   │
 └─────────────┘     └─────────────┘     └─────────────┘     └─────────────┘
@@ -182,7 +182,7 @@ Added test case for the new error handling behavior, ensuring that:
 
 ### Test Flow Diagram
 
-\`\`\`
+\`\`\`diagram
                                     ┌──────────────────────────────────────────────────────────────────┐
                                     │                         Test Suite                               │
                                     └──────────────────────────────────────────────────────────────────┘

package/src/ansi-html.ts

@@ -32,7 +32,7 @@ function escapeHtml(text: string): string {
 
 /**
  * Convert a single span to HTML
- * Always wraps in a span element so flex layout works properly
+ * Always wraps in span for consistent inline-block sizing
  */
 function spanToHtml(span: TerminalSpan): string {
   const styles: string[] = []
@@ -63,7 +63,7 @@ function spanToHtml(span: TerminalSpan): string {
   
   const escapedText = escapeHtml(span.text)
   
-  // Always wrap in span for consistent flex behavior
+  // Always wrap in span for consistent inline-block sizing
   if (styles.length === 0) {
     return `<span>${escapedText}</span>`
   }
@@ -168,10 +168,7 @@ html, body {
   color: ${textColor};
   font-family: ${fontFamily};
   font-size: ${fontSize};
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
+  line-height: 1.7;
 }
 body {
   overflow: auto;
@@ -183,15 +180,18 @@ body {
 }
 .line {
   white-space: pre;
-  display: flex;
+  display: block;
   content-visibility: auto;
-  contain-intrinsic-block-size: auto 1.5em;
+  contain-intrinsic-block-size: auto 1.7em;
   background-color: ${backgroundColor};
   transform: translateZ(0);
   backface-visibility: hidden;
 }
 .line span {
   white-space: pre;
+  display: inline-block;
+  line-height: 1.7;
+  vertical-align: top;
 }
 /* Disable content-visibility on iOS Safari where it can cause rendering issues */
 @supports (-webkit-touch-callout: none) {
@@ -229,8 +229,8 @@ ${content}
   function adjustFontSize() {
     const viewportWidth = window.innerWidth;
     const calculatedSize = (viewportWidth - padding) / (cols * charRatio);
-    // Round to nearest even integer to prevent subpixel rendering issues
-    // (with line-height: 1.5, even font-size always yields integer line-height)
+    // Round to nearest even integer to reduce subpixel rendering issues
+    // Note: with line-height 1.7, some subpixel values are unavoidable
     const clamped = Math.max(minFontSize, Math.min(maxFontSize, calculatedSize));
     const fontSize = Math.round(clamped / 2) * 2;
     document.body.style.fontSize = fontSize + 'px';

package/src/cli.tsx

@@ -332,11 +332,13 @@ async function runReviewMode(
           const selected = filteredSessions.length > 0
             ? await clack.multiselect({
                 message: "Select sessions to include as context (space to toggle, enter to confirm)",
-                options: filteredSessions.map((s) => ({
-                  value: s.sessionId,
-                  label: s.title || `Session ${s.sessionId.slice(0, 8)}`,
-                  hint: s.updatedAt ? formatTimeAgo(s.updatedAt) : undefined,
-                })),
+                options: filteredSessions.map((s) => {
+                  const title = s.title || `Session ${s.sessionId.slice(0, 8)}`;
+                  const timeAgo = s.updatedAt ? formatTimeAgo(s.updatedAt) : "";
+                  // Include time in label to prevent layout shift (hints only show on focus)
+                  const label = timeAgo ? `${title}  ${pc.default.dim(`(${timeAgo})`)}` : title;
+                  return { value: s.sessionId, label };
+                }),
                 required: false,
               })
             : [];
@@ -449,7 +451,7 @@ async function runReviewMode(
       try {
         const { htmlDesktop, htmlMobile } = await captureResponsiveHtml(
           renderCommand,
-          { desktopCols: 240, mobileCols: 100, baseRows, themeName }
+          { desktopCols: 230, mobileCols: 100, baseRows, themeName }
         );
 
         // Clean up temp files
@@ -581,7 +583,7 @@ async function runWebMode(
     positionalFilters: options['--'],
   });
 
-  const desktopCols = options.cols || 240;
+  const desktopCols = options.cols || 230;
   const mobileCols = options.mobileCols || 100;
   const themeName = options.theme && themeNames.includes(options.theme)
     ? options.theme

package/src/review/acp-client.ts

@@ -494,9 +494,9 @@ HOW TO EXPLAIN - Diagrams First, Text Last
 ═══════════════════════════════════════════════════════════════════════════════
 
 PREFER ASCII DIAGRAMS - they explain better than words.
-ALWAYS wrap diagrams in \`\`\` code blocks - never render them as plain text:
+ALWAYS wrap diagrams in \`\`\`diagram code blocks - never render them as plain text:
 
-\`\`\`
+\`\`\`diagram
 ┌─────────────┐      ┌─────────────┐      ┌────────────┐
 │   Request   │ ───> │   Router    │ ───> │   Handler  │
 └─────────────┘      └──────┬──────┘      └──────┬─────┘
@@ -507,7 +507,7 @@ ALWAYS wrap diagrams in \`\`\` code blocks - never render them as plain text:
                     └─────────────┘      └─────────────┘
 \`\`\`
 
-\`\`\`
+\`\`\`diagram
                     ┌──────────────────┐
                     │     Initial      │
                     └────────┬─────────┘

package/src/review/diagram-parser.test.ts

@@ -0,0 +1,327 @@
+// Tests for diagram parser
+
+import { describe, expect, it } from "bun:test"
+import {
+  parseDiagram,
+  parseDiagramLine,
+  diagramToDebugString,
+} from "./diagram-parser.ts"
+
+describe("parseDiagramLine", () => {
+  it("should parse empty line", () => {
+    expect(parseDiagramLine("")).toMatchInlineSnapshot(`
+{
+  "segments": [],
+}
+`)
+  })
+
+  it("should parse pure text as text segment", () => {
+    expect(parseDiagramLine("Hello World")).toMatchInlineSnapshot(`
+{
+  "segments": [
+    {
+      "text": "Hello",
+      "type": "text",
+    },
+    {
+      "text": " ",
+      "type": "muted",
+    },
+    {
+      "text": "World",
+      "type": "text",
+    },
+  ],
+}
+`)
+  })
+
+  it("should parse box drawing characters as muted", () => {
+    expect(parseDiagramLine("┌─────┐")).toMatchInlineSnapshot(`
+{
+  "segments": [
+    {
+      "text": "┌─────┐",
+      "type": "muted",
+    },
+  ],
+}
+`)
+  })
+
+  it("should parse mixed box and text", () => {
+    expect(parseDiagramLine("│ Client │")).toMatchInlineSnapshot(`
+{
+  "segments": [
+    {
+      "text": "│ ",
+      "type": "muted",
+    },
+    {
+      "text": "Client",
+      "type": "text",
+    },
+    {
+      "text": " │",
+      "type": "muted",
+    },
+  ],
+}
+`)
+  })
+
+  it("should parse arrows as muted", () => {
+    expect(parseDiagramLine("A ──▶ B")).toMatchInlineSnapshot(`
+{
+  "segments": [
+    {
+      "text": "A",
+      "type": "text",
+    },
+    {
+      "text": " ──▶ ",
+      "type": "muted",
+    },
+    {
+      "text": "B",
+      "type": "text",
+    },
+  ],
+}
+`)
+  })
+
+  it("should parse ASCII pipes and dashes as muted", () => {
+    expect(parseDiagramLine("+---+")).toMatchInlineSnapshot(`
+{
+  "segments": [
+    {
+      "text": "+---+",
+      "type": "muted",
+    },
+  ],
+}
+`)
+    expect(parseDiagramLine("| X |")).toMatchInlineSnapshot(`
+{
+  "segments": [
+    {
+      "text": "| ",
+      "type": "muted",
+    },
+    {
+      "text": "X",
+      "type": "text",
+    },
+    {
+      "text": " |",
+      "type": "muted",
+    },
+  ],
+}
+`)
+  })
+})
+
+describe("parseDiagram", () => {
+  it("should parse simple box diagram", () => {
+    const diagram = `┌─────────┐
+│  Test   │
+└─────────┘`
+    expect(parseDiagram(diagram)).toMatchInlineSnapshot(`
+[
+  {
+    "segments": [
+      {
+        "text": "┌─────────┐",
+        "type": "muted",
+      },
+    ],
+  },
+  {
+    "segments": [
+      {
+        "text": "│  ",
+        "type": "muted",
+      },
+      {
+        "text": "Test",
+        "type": "text",
+      },
+      {
+        "text": "   │",
+        "type": "muted",
+      },
+    ],
+  },
+  {
+    "segments": [
+      {
+        "text": "└─────────┘",
+        "type": "muted",
+      },
+    ],
+  },
+]
+`)
+  })
+
+  it("should parse flow diagram with arrows", () => {
+    const diagram = `┌─────────────┐     ┌─────────────┐     ┌─────────────┐
+│   Client    │────▶│   Server    │────▶│  Database   │
+└─────────────┘     └─────────────┘     └─────────────┘`
+    expect(parseDiagram(diagram)).toMatchInlineSnapshot(`
+[
+  {
+    "segments": [
+      {
+        "text": "┌─────────────┐     ┌─────────────┐     ┌─────────────┐",
+        "type": "muted",
+      },
+    ],
+  },
+  {
+    "segments": [
+      {
+        "text": "│   ",
+        "type": "muted",
+      },
+      {
+        "text": "Client",
+        "type": "text",
+      },
+      {
+        "text": "    │────▶│   ",
+        "type": "muted",
+      },
+      {
+        "text": "Server",
+        "type": "text",
+      },
+      {
+        "text": "    │────▶│  ",
+        "type": "muted",
+      },
+      {
+        "text": "Database",
+        "type": "text",
+      },
+      {
+        "text": "   │",
+        "type": "muted",
+      },
+    ],
+  },
+  {
+    "segments": [
+      {
+        "text": "└─────────────┘     └─────────────┘     └─────────────┘",
+        "type": "muted",
+      },
+    ],
+  },
+]
+`)
+  })
+})
+
+describe("diagramToDebugString", () => {
+  it("should replace muted segments with asterisks", () => {
+    const diagram = `┌─────────┐
+│  Test   │
+└─────────┘`
+    const parsed = parseDiagram(diagram)
+    expect(diagramToDebugString(parsed)).toMatchInlineSnapshot(`
+"***********
+***Test****
+***********"
+`)
+  })
+
+  it("should show text normally and mute structural chars", () => {
+    const diagram = `┌─────────────┐     ┌─────────────┐
+│   Client    │────▶│   Server    │
+└─────────────┘     └─────────────┘`
+    const parsed = parseDiagram(diagram)
+    expect(diagramToDebugString(parsed)).toMatchInlineSnapshot(`
+"***********************************
+****Client**************Server*****
+***********************************"
+`)
+  })
+
+  it("should handle vertical flow diagram", () => {
+    const diagram = `     ┌─────────┐
+     │  Start  │
+     └────┬────┘
+          │
+          ▼
+     ┌─────────┐
+     │  End    │
+     └─────────┘`
+    const parsed = parseDiagram(diagram)
+    expect(diagramToDebugString(parsed)).toMatchInlineSnapshot(`
+"****************
+********Start***
+****************
+***********
+***********
+****************
+********End*****
+****************"
+`)
+  })
+
+  it("should handle complex architecture diagram", () => {
+    const diagram = `┌─────────────┐     ┌─────────────┐     ┌─────────────┐     ┌─────────────┐
+│   Client    │────▶│   Router    │────▶│  Handler    │────▶│  Database   │
+└─────────────┘     └─────────────┘     └─────────────┘     └─────────────┘
+                           │                   │                   │
+                           │                   │                   │
+                           ▼                   ▼                   ▼
+                    ┌─────────────┐     ┌─────────────┐     ┌─────────────┐
+                    │  Validate   │     │   Check     │     │   Query     │
+                    │   Route     │     │   Auth      │     │   Execute   │
+                    └─────────────┘     └─────────────┘     └─────────────┘`
+    const parsed = parseDiagram(diagram)
+    expect(diagramToDebugString(parsed)).toMatchInlineSnapshot(`
+"***************************************************************************
+****Client**************Router*************Handler*************Database****
+***************************************************************************
+********************************************************************
+********************************************************************
+********************************************************************
+***************************************************************************
+***********************Validate*************Check***************Query******
+************************Route***************Auth****************Execute****
+***************************************************************************"
+`)
+  })
+
+  it("should handle ASCII-style diagram", () => {
+    const diagram = `+-------+     +-------+
+| Input | --> | Output|
++-------+     +-------+`
+    const parsed = parseDiagram(diagram)
+    expect(diagramToDebugString(parsed)).toMatchInlineSnapshot(`
+"***********************
+**Input*********Output*
+***********************"
+`)
+  })
+
+  it("should handle diagram with downward arrows", () => {
+    const diagram = `  A
+  │
+  ▼
+  B`
+    const parsed = parseDiagram(diagram)
+    expect(diagramToDebugString(parsed)).toMatchInlineSnapshot(`
+"**A
+***
+***
+**B"
+`)
+  })
+})

package/src/review/diagram-parser.ts

@@ -0,0 +1,229 @@
+// Diagram parser - parses ASCII/Unicode diagrams into colored segments
+// Used to highlight structural characters (boxes, arrows, lines) differently from text
+
+/**
+ * A segment of text with a specific color type
+ */
+export interface DiagramSegment {
+  text: string
+  type: "text" | "muted"
+}
+
+/**
+ * A parsed line of diagram content
+ */
+export interface ParsedDiagramLine {
+  segments: DiagramSegment[]
+}
+
+// Box drawing characters (Unicode)
+const BOX_DRAWING_CHARS = new Set([
+  // Light box drawing
+  "┌",
+  "┐",
+  "└",
+  "┘",
+  "─",
+  "│",
+  "├",
+  "┤",
+  "┬",
+  "┴",
+  "┼",
+  // Double box drawing
+  "╔",
+  "╗",
+  "╚",
+  "╝",
+  "═",
+  "║",
+  "╠",
+  "╣",
+  "╦",
+  "╩",
+  "╬",
+  // Heavy box drawing
+  "┏",
+  "┓",
+  "┗",
+  "┛",
+  "━",
+  "┃",
+  "┣",
+  "┫",
+  "┳",
+  "┻",
+  "╋",
+  // Mixed light/heavy
+  "┍",
+  "┎",
+  "┑",
+  "┒",
+  "┕",
+  "┖",
+  "┙",
+  "┚",
+  "┝",
+  "┞",
+  "┟",
+  "┠",
+  "┡",
+  "┢",
+  "┥",
+  "┦",
+  "┧",
+  "┨",
+  "┩",
+  "┪",
+  "┭",
+  "┮",
+  "┯",
+  "┰",
+  "┱",
+  "┲",
+  "┵",
+  "┶",
+  "┷",
+  "┸",
+  "┹",
+  "┺",
+  "┽",
+  "┾",
+  "┿",
+  "╀",
+  "╁",
+  "╂",
+  "╃",
+  "╄",
+  "╅",
+  "╆",
+  "╇",
+  "╈",
+  "╉",
+  "╊",
+  // Rounded corners
+  "╭",
+  "╮",
+  "╯",
+  "╰",
+])
+
+// Arrow characters
+const ARROW_CHARS = new Set([
+  // Unicode arrows
+  "▶",
+  "◀",
+  "▼",
+  "▲",
+  "►",
+  "◄",
+  "▾",
+  "▴",
+  "→",
+  "←",
+  "↓",
+  "↑",
+  "↔",
+  "↕",
+  "↖",
+  "↗",
+  "↘",
+  "↙",
+  "⇒",
+  "⇐",
+  "⇓",
+  "⇑",
+  "⇔",
+  "⇕",
+  // Triangle arrows
+  "△",
+  "▽",
+  "◁",
+  "▷",
+  "⊳",
+  "⊲",
+  "⊴",
+  "⊵",
+])
+
+// ASCII diagram characters (structural, not text)
+// Note: "v" and "V" are NOT included because they appear in regular text
+// like "Server", "Validate", etc.
+const ASCII_STRUCTURAL_CHARS = new Set(["-", "|", "+", "/", "\\", "<", ">", "^"])
+
+/**
+ * Check if a character is a diagram structural character (should be muted)
+ */
+function isDiagramChar(char: string): boolean {
+  return (
+    BOX_DRAWING_CHARS.has(char) ||
+    ARROW_CHARS.has(char) ||
+    ASCII_STRUCTURAL_CHARS.has(char)
+  )
+}
+
+/**
+ * Parse a single line of diagram content into segments
+ */
+export function parseDiagramLine(line: string): ParsedDiagramLine {
+  if (!line) {
+    return { segments: [] }
+  }
+
+  const segments: DiagramSegment[] = []
+  let currentText = ""
+  let currentType: "text" | "muted" | null = null
+
+  // Iterate through each character (handling Unicode properly)
+  for (const char of line) {
+    const isMuted = isDiagramChar(char) || char === " "
+    const type = isMuted ? "muted" : "text"
+
+    if (currentType === null) {
+      currentType = type
+      currentText = char
+    } else if (type === currentType) {
+      currentText += char
+    } else {
+      // Type changed, push current segment and start new one
+      segments.push({ text: currentText, type: currentType })
+      currentText = char
+      currentType = type
+    }
+  }
+
+  // Push final segment
+  if (currentText && currentType !== null) {
+    segments.push({ text: currentText, type: currentType })
+  }
+
+  return { segments }
+}
+
+/**
+ * Parse entire diagram content into lines of segments
+ */
+export function parseDiagram(content: string): ParsedDiagramLine[] {
+  const lines = content.split("\n")
+  return lines.map(parseDiagramLine)
+}
+
+/**
+ * Convert parsed diagram to a debug string for testing
+ * Muted segments are replaced with '*' characters
+ */
+export function diagramToDebugString(parsed: ParsedDiagramLine[]): string {
+  return parsed
+    .map((line) => {
+      return line.segments
+        .map((segment) => {
+          if (segment.type === "muted") {
+            // Replace each character with '*' to show what would be muted
+            return "*".repeat([...segment.text].length)
+          }
+          return segment.text
+        })
+        .join("")
+    })
+    .join("\n")
+}

package/src/review/review-app.test.tsx

@@ -876,7 +876,7 @@ The diagram above should not wrap.`,
 
     await testSetup.renderOnce()
     const frame = testSetup.captureCharFrame()
-    
+
     // With 80-char width, the 65-char diagram should fit without wrapping
     expect(frame).toContain("┌─────────────┐     ┌─────────────┐     ┌─────────────┐")
     expect(frame).toContain("│   Client    │────▶│   Server    │────▶│  Database   │")
@@ -946,6 +946,8 @@ The diagram above should not wrap.`,
     `)
   })
 
+  // SKIPPED: This test has a pre-existing issue with yoga-layout binding errors
+  // when reusing renderers across testRender calls
   it("should TRUNCATE 4-box diagram at 70 cols WITH renderer", async () => {
     // 4-box diagram is 79 chars wide, at 70 cols it truncates (not wraps)
     // This proves wrapMode: "none" is working
@@ -1024,14 +1026,55 @@ The diagram above should not wrap.`,
     `)
   })
 
+  it("should render diagram code blocks with colored segments", async () => {
+    // Diagrams with lang="diagram" should have structural chars colored differently
+    const diagramHunk = createHunk(1, "src/config.ts", 0, 1, 1, [
+      "+export const x = 1",
+    ])
+
+    const diagramReviewData: ReviewYaml = {
+      hunks: [{
+        hunkIds: [1],
+        markdownDescription: `## Architecture Diagram
+
+\`\`\`diagram
+┌───────┐     ┌───────┐
+│ Input │────▶│Output │
+└───────┘     └───────┘
+\`\`\`
+
+The diagram above shows the flow.`,
+      }],
+    }
+
+    testSetup = await testRender(
+      <ReviewAppView
+        hunks={[diagramHunk]}
+        reviewData={diagramReviewData}
+        isGenerating={false}
+        themeName="github"
+        width={60}
+      />,
+      { width: 60, height: 20 },
+    )
+
+    await testSetup.renderOnce()
+    const frame = testSetup.captureCharFrame()
+    // The diagram should render with the structural characters
+    // (box drawing and arrows) and text labels (Input, Output)
+    expect(frame).toContain("Input")
+    expect(frame).toContain("Output")
+    expect(frame).toContain("Architecture Diagram")
+  })
+
   // ============================================================================
   // LONG LINE WRAPPING TESTS
   // ============================================================================
-  // 
+  //
   // THE ISSUE:
   // When diff lines are long enough to wrap in split view, and the left/right
   // sides wrap to different numbers of visual lines, the alignment breaks.
-  // 
+  //
   // Example of broken alignment (single render):
   //   1 - const response...   1 + const response...
   //       example.com/users');    API_BASE_URL...
@@ -1188,4 +1231,59 @@ Added environment-based URL and auth header.`,
       "
     `)
   })
+
+  it("should show generating indicator below last hunk when isGenerating is true", async () => {
+    // When generating, a centered spinner+text indicator should appear below the content
+    testSetup = await testRender(
+      <ReviewAppView
+        hunks={exampleHunks}
+        reviewData={{
+          hunks: [{
+            hunkIds: [3],
+            markdownDescription: `## Import changes
+
+Added logger import.`,
+          }],
+        }}
+        isGenerating={true}
+        themeName="github"
+        width={80}
+      />,
+      {
+        width: 80,
+        height: 25,
+      },
+    )
+
+    await testSetup.renderOnce()
+    const frame = testSetup.captureCharFrame()
+    expect(frame).toMatchInlineSnapshot(`
+      "                                                                                
+         Import changes                                                               
+                                                                                      
+         Added logger import.                                                         
+                                                                                      
+                                                                                      
+       rc/index.ts +1-0                                                               
+                                                                                      
+          import { main } from './utils'                                              
+        + import { logger } from './logger'                                           
+                                                                                      
+                                                                                      
+                                                                                      
+                                                                                      
+                                      ⠋ generating                                    
+                                                                                      
+                                                                                      
+                                                                                      
+                                                                                      
+                                                                                      
+                                                                                      
+                                                                                      
+                                                                                      
+        (1 section)  t theme                   run with --web to share & collaborate  
+                                                                                      
+      "
+    `)
+  })
 })

package/src/review/review-app.tsx

@@ -2,13 +2,14 @@
 
 import * as React from "react"
 import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react"
-import { MacOSScrollAccel, SyntaxStyle, BoxRenderable, CodeRenderable } from "@opentui/core"
+import { MacOSScrollAccel, SyntaxStyle, BoxRenderable, CodeRenderable, TextRenderable } from "@opentui/core"
 import type { Token } from "marked"
 import { getResolvedTheme, getSyntaxTheme, defaultThemeName, themeNames, rgbaToHex } from "../themes.ts"
 import { detectFiletype, countChanges, getViewMode } from "../diff-utils.ts"
 import { DiffView } from "../components/diff-view.tsx"
 import { watchReviewYaml } from "./yaml-watcher.ts"
 import { createSubHunk } from "./hunk-parser.ts"
+import { parseDiagram } from "./diagram-parser.ts"
 import { useAppStore } from "../store.ts"
 import Dropdown from "../dropdown.tsx"
 import type { IndexedHunk, ReviewYaml, ReviewGroup } from "./types.ts"
@@ -68,6 +69,12 @@ export function ReviewApp({
 
   // Keyboard navigation
   useKeyboard((key) => {
+    // Ctrl+D toggles debug console
+    if (key.ctrl && key.name === "d") {
+      renderer.console.toggle()
+      return
+    }
+
     if (showThemePicker) {
       if (key.name === "escape") {
         setShowThemePicker(false)
@@ -167,22 +174,43 @@ export function ReviewApp({
 }
 
 /**
- * Animated "generating..." indicator with cycling dots
+ * Inline generating indicator with spinner and animated dots
  */
-function GeneratingIndicator({ color }: { color: string }) {
-  const [dotPhase, setDotPhase] = React.useState(0)
+function GeneratingIndicatorInline({ color }: { color: string }) {
+  const [phase, setPhase] = React.useState(0)
 
   React.useEffect(() => {
     const interval = setInterval(() => {
-      setDotPhase((p) => (p + 1) % 4)
-    }, 300)
+      setPhase((p) => (p + 1) % 12)
+    }, 100)
     return () => clearInterval(interval)
   }, [])
 
-  const dots = ".".repeat(dotPhase).padEnd(3, " ")
+  // Braille spinner pattern (cycles every 8 phases)
+  const spinnerChars = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧"]
+  const spinner = spinnerChars[phase % 8]
+  // Dots cycle every 4 phases (so they change ~3x slower than spinner)
+  const dotCount = Math.floor(phase / 3) % 4
+  const dots = ".".repeat(dotCount).padEnd(3, " ")
 
+  return <text fg={color}>{spinner} generating{dots}</text>
+}
+
+/**
+ * Centered generating indicator for loading state (when no content yet)
+ */
+function GeneratingIndicator({ color, bgColor }: { color: string; bgColor: string }) {
   return (
-    <text fg={color}>generating{dots}  </text>
+    <box
+      style={{
+        flexGrow: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: bgColor,
+      }}
+    >
+      <GeneratingIndicatorInline color={color} />
+    </box>
   )
 }
 
@@ -251,9 +279,14 @@ export function ReviewAppView({
           backgroundColor: bgColor,
         }}
       >
-        <text fg={rgbaToHex(resolvedTheme.text)}>
-          {isGenerating ? "Generating review..." : "No review groups generated"}
-        </text>
+        {isGenerating ? (
+          <GeneratingIndicator
+            color={rgbaToHex(resolvedTheme.textMuted)}
+            bgColor={bgColor}
+          />
+        ) : (
+          <text fg={rgbaToHex(resolvedTheme.text)}>No review groups generated</text>
+        )}
       </box>
     )
   }
@@ -338,6 +371,12 @@ export function ReviewAppView({
               </box>
             )
           })}
+          {/* Generating indicator - shown below last hunk */}
+          {isGenerating && (
+            <box style={{ alignItems: "center", justifyContent: "center", marginTop: gap, marginBottom: gap }}>
+              <GeneratingIndicatorInline color={rgbaToHex(resolvedTheme.textMuted)} />
+            </box>
+          )}
         </box>
       </scrollbox>
 
@@ -353,9 +392,6 @@ export function ReviewAppView({
             alignItems: "center",
           }}
         >
-          {isGenerating && (
-            <GeneratingIndicator color={rgbaToHex(resolvedTheme.textMuted)} />
-          )}
           <text fg={rgbaToHex(resolvedTheme.textMuted)}>
             ({groups.length} section{groups.length !== 1 ? "s" : ""})
           </text>
@@ -433,6 +469,9 @@ function MarkdownBlock({ content, themeName, width, renderer }: MarkdownBlockPro
     () => SyntaxStyle.fromStyles(syntaxTheme),
     [syntaxTheme],
   )
+  const resolvedTheme = getResolvedTheme(themeName)
+  const textColor = rgbaToHex(resolvedTheme.text)
+  const concealColor = rgbaToHex(resolvedTheme.conceal)
 
   // Max width for prose (constrained), code blocks use full terminal width
   const maxProseWidth = Math.min(80, width)
@@ -463,11 +502,55 @@ function MarkdownBlock({ content, themeName, width, renderer }: MarkdownBlockPro
       // Code blocks: create custom CodeRenderable with wrapMode: "none" and overflow: "hidden"
       if (token.type === "code") {
         const codeToken = token as { text: string; lang?: string }
+
+
         const wrapper = new BoxRenderable(renderer, {
           id: `code-wrapper-${nodeCounter++}`,
           alignSelf: "center",
           overflow: "hidden",
         })
+
+        // Special handling for diagram language - color structural chars as muted
+        if (codeToken.lang === "diagram") {
+          console.log("[diagram-debug] MATCHED diagram lang, parsing...")
+          const diagramWrapper = new BoxRenderable(renderer, {
+            id: `diagram-${nodeCounter++}`,
+            flexDirection: "column",
+          })
+          const parsedLines = parseDiagram(codeToken.text)
+          for (let i = 0; i < parsedLines.length; i++) {
+            const line = parsedLines[i]
+            // Skip empty lines or add a single space to maintain line height
+            if (line.segments.length === 0) {
+              const emptyLine = new TextRenderable(renderer, {
+                id: `diagram-empty-${nodeCounter++}-${i}`,
+                content: " ",
+                fg: concealColor,
+              })
+              diagramWrapper.add(emptyLine)
+              continue
+            }
+            // Create a row box for each line
+            const lineBox = new BoxRenderable(renderer, {
+              id: `diagram-line-${nodeCounter++}-${i}`,
+              flexDirection: "row",
+            })
+            // Add each segment as a separate text renderable with appropriate color
+            for (let j = 0; j < line.segments.length; j++) {
+              const segment = line.segments[j]
+              const segmentRenderable = new TextRenderable(renderer, {
+                id: `diagram-seg-${nodeCounter++}-${i}-${j}`,
+                content: segment.text,
+                fg: segment.type === "muted" ? concealColor : textColor,
+              })
+              lineBox.add(segmentRenderable)
+            }
+            diagramWrapper.add(lineBox)
+          }
+          wrapper.add(diagramWrapper)
+          return wrapper
+        }
+
         const codeRenderable = new CodeRenderable(renderer, {
           id: `code-${nodeCounter++}`,
           content: codeToken.text,
@@ -495,7 +578,7 @@ function MarkdownBlock({ content, themeName, width, renderer }: MarkdownBlockPro
       // Other elements (hr, space, etc.) use default rendering
       return undefined
     }
-  }, [renderer, maxProseWidth, syntaxStyle])
+  }, [renderer, maxProseWidth, syntaxStyle, textColor, concealColor])
 
   // Use very large width when renderer available so code blocks don't wrap
   // Prose is constrained via renderNode, code blocks can overflow

package/src/themes/github.json

@@ -6,6 +6,7 @@
     "darkBgElement": "#161b22",
     "darkFg": "#e6edf3",
     "darkFgMuted": "#8b949e",
+    "darkConceal": "#484f58",
     "darkBorder": "#30363d",
     "darkBorderSubtle": "#21262d",
     "darkKeyword": "#ff7b72",
@@ -24,6 +25,7 @@
     "lightBgPanel": "#f0f3f6",
     "lightFg": "#24292f",
     "lightFgMuted": "#57606a",
+    "lightConceal": "#8c959f",
     "lightKeyword": "#cf222e",
     "lightString": "#0a3069",
     "lightConstant": "#0550ae",
@@ -236,6 +238,10 @@
     "syntaxPunctuation": {
       "dark": "darkFg",
       "light": "lightFg"
+    },
+    "conceal": {
+      "dark": "darkConceal",
+      "light": "lightConceal"
     }
   }
 }

package/src/themes.ts

@@ -37,6 +37,7 @@ export interface ResolvedTheme {
   // Text colors
   text: RGBA;
   textMuted: RGBA;
+  conceal: RGBA;
   // Diff colors
   diffAddedBg: RGBA;
   diffRemovedBg: RGBA;
@@ -122,12 +123,12 @@ function loadTheme(name: string): ThemeJson {
   if (themeCache[name]) {
     return themeCache[name];
   }
-  
+
   const fileName = THEME_FILES[name];
   if (!fileName) {
     return github; // Fallback to default
   }
-  
+
   try {
     // Use dynamic import with synchronous pattern for JSON
     // This works because JSON imports are resolved at bundle time by Bun
@@ -174,7 +175,7 @@ function resolveTheme(
   const fallbackText: ColorValue = "#d4d4d4";
 
   const text = resolveColor(t.text ?? fallbackText);
-  
+
   return {
     primary: resolveColor(t.primary ?? t.syntaxFunction ?? fallbackGray),
     syntaxComment: resolveColor(t.syntaxComment ?? fallbackGray),
@@ -188,6 +189,7 @@ function resolveTheme(
     syntaxPunctuation: resolveColor(t.syntaxPunctuation ?? fallbackGray),
     text,
     textMuted: resolveColor(t.textMuted ?? fallbackGray),
+    conceal: resolveColor(t.conceal ?? t.textMuted ?? fallbackGray),
     diffAddedBg: resolveColor(t.diffAddedBg ?? "#1e3a1e"),
     diffRemovedBg: resolveColor(t.diffRemovedBg ?? "#3a1e1e"),
     diffContextBg: resolveColor(t.diffContextBg ?? fallbackBg),
@@ -233,7 +235,7 @@ export function getSyntaxTheme(
   return {
     // Default text style
     default: { fg: resolved.text },
-    
+
     // Code syntax styles
     keyword: { fg: resolved.syntaxKeyword, italic: true },
     "keyword.import": { fg: resolved.syntaxKeyword },
@@ -271,7 +273,7 @@ export function getSyntaxTheme(
     "punctuation.bracket": { fg: resolved.syntaxPunctuation },
     "punctuation.delimiter": { fg: resolved.syntaxOperator },
     "punctuation.special": { fg: resolved.syntaxOperator },
-    
+
     // Markdown styles - these are the Tree-sitter scope names for markdown
     "markup.heading": { fg: resolved.markdownHeading, bold: true },
     "markup.heading.1": { fg: resolved.markdownHeading, bold: true },
@@ -294,7 +296,7 @@ export function getSyntaxTheme(
     label: { fg: resolved.markdownLinkText },
     spell: { fg: resolved.text },
     nospell: { fg: resolved.text },
-    conceal: { fg: resolved.textMuted },
+    conceal: { fg: resolved.conceal || resolved.textMuted },
     "string.special": { fg: resolved.markdownLink, underline: true },
     "string.special.url": { fg: resolved.markdownLink, underline: true },
   };