docs: document plan review and voice-to-text features + UI fixes

[wilcorrea]

Summary

📚 Documentation Updates

• Added plan review and voice-to-text features to website landing page
• Updated README with reorganized features section (Document Viewing, Productivity Tools, CLI)
• Created "Advanced Features" section with detailed usage instructions for plan review comments and voice-to-text

🐛 UI Fixes

• Fixed comment modal preview overflow for long code paths
• Added word-break properties to inline code elements to prevent horizontal overflow
• Consolidated button styles across modals for consistency

🔧 Housekeeping

• Added examples/ folder to gitignore for private reference files (plan examples, test documents)

Test plan

Website

• Open website and verify "Plan Review Comments" feature section appears
• Verify "Voice to Text" appears in compact grid (replacing "Cross-Platform")
• Check responsive layout on mobile (768px, 480px)
• Test light/dark theme switching for new sections

README

• Verify features are organized in 3 categories
• Check "Advanced Features" section has usage instructions
• Confirm plan review and voice-to-text are documented

UI Fixes

• Open a markdown file with long code paths (e.g., TypeScript imports)
• Verify inline code breaks correctly without horizontal scroll
• Select a block and add a comment
• Verify comment modal preview doesn't overflow
• Check modal preview scrolls if content is too long

Examples Folder

• Verify examples/ folder is ignored by git
• Can add private .md files for testing without committing them

Summary by CodeRabbit

• New Features

  • Plan Review Comments (GitHub-style inline comments with AI prompts)
  • Voice-to-Text transcription (offline Whisper models)
  • CLI support and installation options

• Documentation

  • Updated README and website to describe features, usage, and advanced workflows

• Style

  • Improved text wrapping for code/inline code, expanded comment modal, and new plan-review UI styling

• Chores

  • Ignore private example files; explicit null pre-build hook configured

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

---

📝 Walkthrough

Walkthrough

Adds plan-review UI/design assets and voice-to-text documentation; updates README and website content; adjusts CSS for wrapping and comment layout; sets Tauri pre-build hook to null and adds examples/ to .gitignore. No exported/public APIs changed.

Changes

Cohort / File(s)	Summary
Configuration & Ignore \.gitignore, apps/tauri/src-tauri/tauri.conf.json	Added examples/ to ignore list; set "beforeBuildCommand": null in Tauri config.
Documentation & Website README.md, website/index.html	Expanded README with Document Viewing, Productivity Tools, CLI, Advanced Features (Plan Review, Voice-to-Text); added Plan Reviews feature block and updated feature cards on website.
Tauri App UI apps/tauri/src/index.html, apps/tauri/src/app.css	Enlarged comment modal (modal-large) and constrained comment context height with scroll/wrapping (max-height, overflow-y, overflow-wrap).
Shared & Site Styles shared/style.css, website/css/site.css	Enabled overflow-wrap: break-word for code and inline code; added comprehensive plan-review UI styles (badges, bottom bar, pills, buttons, indicators) and duplicated blocks for additional contexts.

Sequence Diagram(s)

(Skipped — changes are primarily UI/CSS/docs and do not introduce multi-component control-flow changes requiring a sequence diagram.)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: add plan review comment system #1 — Implements the Plan Review inline comment system (UI, bottom bar, persistence via .comments.json and related Tauri commands), directly overlapping UI and stylesheet changes.

Poem

🐇 I hopped through styles and README light,
A little bar appeared by moonlit byte.
Modals grew wide to hold our notes,
Whisper turned speech into tidy quotes.
Hooray — I nibbled bugs and danced all night ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: documentation updates for plan review and voice-to-text features, plus UI fixes for overflow issues.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch docs/update-website-readme-features

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

website/css/site.css (1)

356-366: ⚠️ Potential issue | 🟡 Minor

Remove redundant word-wrap property; overflow-wrap is the modern standard.
word-wrap is a legacy alias for overflow-wrap and adds no additional behavior in modern browsers.

🔧 Proposed fix

 .mockup-content.markdown-body code {
     font-family: var(--font-mono);
     font-size: 0.85em;
     background: var(--code-bg);
     color: var(--code-text);
     padding: 0.15em 0.4em;
     border-radius: 3px;
     border: 1px solid var(--border);
     overflow-wrap: break-word;
-    word-wrap: break-word;
     word-break: break-all;
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@website/css/site.css` around lines 356 - 366, The CSS rule
.mockup-content.markdown-body code contains the legacy word-wrap property which
is redundant with overflow-wrap; remove the "word-wrap: break-word;" line and
keep "overflow-wrap: break-word;" (and other properties like word-break if still
needed) so the selector relies on the modern standard only.

apps/tauri/src/app.css (1)

836-848: ⚠️ Potential issue | 🟡 Minor

Remove word-wrap to comply with Stylelint's property-no-deprecated rule.
Stylelint flags word-wrap as deprecated in favor of the standard overflow-wrap property, which already provides the same behavior.

🔧 Proposed fix

 `#comment-context` {
   font-size: 11px;
   color: var(--text-muted);
   font-family: var(--font-mono);
   background: var(--code-bg);
   padding: 8px;
   border-radius: 4px;
   margin-bottom: 10px;
   max-height: 80px;
   overflow-y: auto;
-  word-wrap: break-word;
   overflow-wrap: break-word;
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/tauri/src/app.css` around lines 836 - 848, The `#comment-context` rule
contains the deprecated property word-wrap; remove the word-wrap declaration and
rely on the existing overflow-wrap: break-word to satisfy Stylelint's
property-no-deprecated rule while preserving the same behavior for long words in
the `#comment-context` selector.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/tauri/src-tauri/tauri.conf.json`:
- Line 8: The tauri configuration currently sets beforeBuildCommand to an empty
string which semantically signals a command; change this to either remove the
beforeBuildCommand field or set it explicitly to null so it represents "no hook"
per the Tauri schema—update the tauri configuration JSON by removing the
"beforeBuildCommand" entry or replacing its value with null (look for the
"beforeBuildCommand" key in the tauri config to make the change).

---

Outside diff comments:
In `@apps/tauri/src/app.css`:
- Around line 836-848: The `#comment-context` rule contains the deprecated
property word-wrap; remove the word-wrap declaration and rely on the existing
overflow-wrap: break-word to satisfy Stylelint's property-no-deprecated rule
while preserving the same behavior for long words in the `#comment-context`
selector.

In `@website/css/site.css`:
- Around line 356-366: The CSS rule .mockup-content.markdown-body code contains
the legacy word-wrap property which is redundant with overflow-wrap; remove the
"word-wrap: break-word;" line and keep "overflow-wrap: break-word;" (and other
properties like word-break if still needed) so the selector relies on the modern
standard only.

[coderabbitai]

🧹 Nitpick comments (1)

shared/style.css (1)

89-90: Reconsider word-break: break-all; for inline code readability.

Using word-break: break-all; will break inline code at any character, including mid-identifier, which can significantly hurt readability. For example, thisIsALongVariableName might render as thisIsALongVari\nableName.

For inline code elements, consider using only overflow-wrap: break-word; (which you already have on line 89), or adding the non-standard but widely-supported word-break: break-word; instead. These approaches break only when necessary and attempt to preserve word boundaries, making code snippets more readable.

📖 Proposed refactor for better code readability

Option 1 (Recommended): Remove word-break: break-all; and keep only overflow-wrap

 code {
     font-family: var(--font-mono);
     font-size: 0.875em;
     background: var(--code-bg);
     color: var(--code-text);
     padding: 0.15em 0.4em;
     border-radius: 3px;
     border: 1px solid var(--border);
     overflow-wrap: break-word;
-    word-break: break-all;
 }

Option 2: Use the less aggressive break-word value

 code {
     font-family: var(--font-mono);
     font-size: 0.875em;
     background: var(--code-bg);
     color: var(--code-text);
     padding: 0.15em 0.4em;
     border-radius: 3px;
     border: 1px solid var(--border);
     overflow-wrap: break-word;
-    word-break: break-all;
+    word-break: break-word;
 }

Both options will still prevent horizontal overflow but will preserve readability by avoiding breaks in the middle of identifiers when possible.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@shared/style.css` around lines 89 - 90, Remove the aggressive word-breaking
rule: replace or remove the line setting word-break: break-all; in the CSS where
overflow-wrap: break-word; is already applied so inline code and identifiers
aren't split mid-word; either delete the word-break declaration altogether or
change it to the less aggressive word-break: break-word; while keeping
overflow-wrap: break-word; to prevent horizontal overflow.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@shared/style.css`:
- Around line 89-90: Remove the aggressive word-breaking rule: replace or remove
the line setting word-break: break-all; in the CSS where overflow-wrap:
break-word; is already applied so inline code and identifiers aren't split
mid-word; either delete the word-break declaration altogether or change it to
the less aggressive word-break: break-word; while keeping overflow-wrap:
break-word; to prevent horizontal overflow.

[wilcorrea]

Re: nitpick from review #3839037476 (word-break: break-all in shared/style.css)

Removed word-break: break-all; from both shared/style.css and website/css/site.css, keeping only overflow-wrap: break-word; (Option 1). This prevents horizontal overflow while preserving identifier readability by breaking only at natural word boundaries.

Fixed in 09c3928.