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

.gitignore

@@ -97,3 +97,6 @@ yarn-error.log*
 
 # Plan review comments
 *.comments.json
+
+# Examples (private reference files)
+examples/

README.md

@@ -1,19 +1,27 @@
 # Arandu
 
-A minimal, cross-platform Markdown viewer powered by [Tauri](https://tauri.app).
+A minimal, cross-platform Markdown viewer with plan review comments and voice-to-text transcription. Powered by [Tauri](https://tauri.app).
 
 ![macOS](https://img.shields.io/badge/macOS-13%2B-blue)
 ![Linux](https://img.shields.io/badge/Linux-x86__64-orange)
 ![Windows](https://img.shields.io/badge/Windows-x86__64-green)
 
 ## Features
 
+### Document Viewing
 - GitHub Flavored Markdown rendering (tables, task lists, strikethrough, autolinks)
-- Syntax highlighting for code blocks
-- Dark / light / system theme cycling
-- Sidebar outline navigation
+- Syntax highlighting for 190+ languages
+- Sidebar outline navigation with smooth scrolling
 - Live reload on file save
-- CLI: `arandu README.md`
+- Dark / light / system theme cycling
+
+### Productivity Tools
+- **Plan review comments** — GitHub-style inline comments for markdown files with AI prompt generation
+- **Voice to text** — Built-in speech transcription powered by OpenAI Whisper (offline, 4 model sizes)
+
+### CLI
+- `arandu README.md` — Open files from terminal
+- Installable via Homebrew (macOS) or manual download
 
 ## Installation
 
@@ -47,6 +55,27 @@ arandu *.md                # open all .md files in the current directory
 arandu                     # opens the file picker
 ```
 
+## Advanced Features
+
+### Plan Review Comments
+
+Add inline comments to markdown blocks, track unresolved feedback, and generate consolidated review prompts for AI coding assistants. Comments persist in `.comments.json` sidecar files alongside your markdown.
+
+**Usage:**
+- Cmd/Ctrl+Click blocks to select and comment
+- Bottom panel shows all comments with block indicators (H2, P3, C4, etc.)
+- Generate review prompts with quoted context for AI tools
+
+### Voice to Text
+
+Record audio and transcribe to text using OpenAI Whisper models (runs locally, no API keys needed).
+
+**Usage:**
+- Alt+Space to start recording (configurable)
+- Choose model size: tiny (75MB, fastest) to medium (1.5GB, most accurate)
+- Transcription automatically copies to clipboard
+- Select audio input device from settings
+
 ## Development
 
 ### Prerequisites

apps/tauri/src-tauri/tauri.conf.json

@@ -5,6 +5,7 @@
   "identifier": "com.devitools.arandu",
   "build": {
     "beforeDevCommand": "npm run dev:server",
+    "beforeBuildCommand": null,
     "devUrl": "http://localhost:1420",
     "frontendDist": "../src"
   },

apps/tauri/src/app.css

@@ -841,6 +841,9 @@ html.dark link[media*="light"] { media: not all; }
   padding: 8px;
   border-radius: 4px;
   margin-bottom: 10px;
+  max-height: 80px;
+  overflow-y: auto;
+  overflow-wrap: break-word;
 }
 
 /* Review Modal */

apps/tauri/src/index.html

@@ -122,7 +122,7 @@ <h3>Voice-to-Text Settings</h3>
 
   <!-- Comment Modal -->
   <div id="comment-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="comment-modal-title" style="display:none">
-    <div class="modal-box">
+    <div class="modal-box modal-large">
       <h3 id="comment-modal-title">Add Comment</h3>
       <p id="comment-context">Block: "<span id="comment-block-preview"></span>"</p>
       <textarea id="comment-input" aria-label="Comment text" placeholder="Your comment here..." rows="4"></textarea>

shared/style.css

@@ -86,6 +86,7 @@ code {
     padding: 0.15em 0.4em;
     border-radius: 3px;
     border: 1px solid var(--border);
+    overflow-wrap: break-word;
 }
 
 pre {

website/css/site.css

@@ -361,6 +361,7 @@ nav a:hover { color: var(--text); }
     padding: 0.15em 0.4em;
     border-radius: 3px;
     border: 1px solid var(--border);
+    overflow-wrap: break-word;
 }
 
 .mockup-content.markdown-body table {
@@ -451,6 +452,106 @@ nav a:hover { color: var(--text); }
     padding: 20px 24px;
 }
 
+/* Plan Review Comment Badge */
+.comment-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  background: var(--link);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  border-radius: 9px;
+  margin-left: 6px;
+  vertical-align: middle;
+}
+
+/* Plan Review Bottom Bar Mockup */
+.plan-review-bar {
+  border-top: 1px solid var(--border);
+  background: var(--sidebar-bg);
+  font-size: 12px;
+}
+
+.bar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.bar-title {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-muted);
+  letter-spacing: 0.05em;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.count-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 5px;
+  background: var(--text-muted);
+  color: var(--bg);
+  border-radius: 8px;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.bar-btn-primary {
+  padding: 4px 10px;
+  font-size: 11px;
+  background: var(--link);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.bar-item {
+  padding: 8px 12px;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+}
+
+.bar-item:last-child {
+  border-bottom: none;
+}
+
+.bar-indicators {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.block-indicator {
+  display: inline-block;
+  padding: 2px 6px;
+  background: var(--code-bg);
+  color: var(--text-muted);
+  border-radius: 3px;
+  font-size: 9px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  letter-spacing: 0.02em;
+}
+
+.bar-text {
+  color: var(--text);
+  line-height: 1.5;
+}
+
 /* === Syntax Highlight Colors (mockup) === */
 
 .code-keyword { color: #d73a49; }

website/index.html

@@ -171,6 +171,10 @@ <h2 id="mock-features">Features</h2>
                   <td>GFM Support</td>
                   <td>Tables, task lists, strikethrough</td>
                 </tr>
+                <tr>
+                  <td>Plan Reviews <span class="comment-badge">2</span></td>
+                  <td>GitHub-style inline comments</td>
+                </tr>
                 <tr>
                   <td>Syntax Highlighting</td>
                   <td>Powered by highlight.js</td>
@@ -281,6 +285,43 @@ <h2>Syntax Highlighting</h2>
       </div>
     </div>
 
+    <div class="feature-split fade-in">
+      <div class="feature-text">
+        <h2>Plan Review Comments</h2>
+        <p>GitHub-style inline commenting for markdown files. Select blocks, add feedback,
+        and generate consolidated review prompts for AI coding assistants. Perfect for
+        document review workflows.</p>
+      </div>
+      <div class="feature-visual">
+        <div class="mini-mockup">
+          <div class="mockup-content markdown-body">
+            <h2>Installation</h2>
+            <p>Quick start guide for Arandu <span class="comment-badge">2</span></p>
+            <pre><code>brew install --cask devitools/arandu/arandu</code></pre>
+          </div>
+          <div class="plan-review-bar">
+            <div class="bar-header">
+              <span class="bar-title">PLAN REVIEWS <span class="count-pill">2</span></span>
+              <button class="bar-btn-primary">Generate Review</button>
+            </div>
+            <div class="bar-item">
+              <div class="bar-indicators">
+                <span class="block-indicator">H2</span>
+                <span class="block-indicator">P3</span>
+              </div>
+              <div class="bar-text">Consider adding Linux install instructions</div>
+            </div>
+            <div class="bar-item">
+              <div class="bar-indicators">
+                <span class="block-indicator">C4</span>
+              </div>
+              <div class="bar-text">This command requires Homebrew pre-installed</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="features-compact fade-in">
       <div class="container">
         <div class="compact-grid">
@@ -432,29 +473,13 @@ <h3>Theme Switching</h3>
               stroke-linecap="round"
               stroke-linejoin="round"
             >
-              <rect
-                x="2"
-                y="3"
-                width="20"
-                height="14"
-                rx="2"
-                ry="2"
-              />
-              <line
-                x1="8"
-                y1="21"
-                x2="16"
-                y2="21"
-              />
-              <line
-                x1="12"
-                y1="17"
-                x2="12"
-                y2="21"
-              />
+              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+              <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+              <line x1="12" y1="19" x2="12" y2="23"/>
+              <line x1="8" y1="23" x2="16" y2="23"/>
             </svg>
-            <h3>Cross-Platform</h3>
-            <p>Powered by Tauri on macOS, Linux, and Windows.</p>
+            <h3>Voice to Text</h3>
+            <p>Built-in speech transcription with OpenAI Whisper. Works offline, no API keys.</p>
           </div>
         </div>
       </div>