docs: document plan review and voice-to-text features + UI fixes (#6)

wilcorrea · web-flow · commit 6d9cea2dc082 · 2026-02-23T01:15:19.000-03:00
* fix(voice-to-text): resolve 4 critical bugs in recording

- Add single-instance detection to prevent duplicate tray icons
- Implement window lifecycle management (hide instead of destroy)
- Add microphone permission validation and audio stream checking
- Move command invocation to Rust for global shortcut independence

Fixes issues: global shortcut only working with window open, window
not reopening after close, CLI creating duplicate instances, and
blank audio transcription with model loaded.

* build: add http-server for Tauri dev mode

- Add http-server dependency for serving static files
- Configure beforeDevCommand to auto-start dev server
- Remove center positioning from recording window

* feat(voice-to-text): implement audio device selection backend

- Add list_audio_devices() to enumerate available microphones
- Modify AudioRecorder to accept device_name parameter
- Add RMS validation (threshold 0.001) to detect silent audio
- Add 50ms delay before stopping stream to prevent sample loss
- Persist selected device in WhisperSettings
- Add Tauri commands: list_audio_devices, set_audio_device
- Add window permissions: allow-hide, allow-show, allow-set-focus
- Restore onCloseRequested behavior for minimize-to-tray

* feat(voice-to-text): add audio device selection UI

- Add microphone dropdown in Settings modal
- Load and display available audio devices
- Persist device selection on change
- Add CSS styling for device selector
- Add diagnostic logging for window close handlers

* feat(voice-to-text): add recording modes and clipboard integration

- Add button mode and shortcut mode for recording
- Add cancel_recording command for better control
- Add write_clipboard command for transcription results
- Add long_recording_threshold setting (default 60s)
- Enable macOS private API for better integration
- Update recording window size and config

* refactor(ui): reorganize toolbar layout and add close file button

- Simplify toolbar to horizontal layout (file name on left, actions on right)
- Add close file button (X) next to filename
- Remove 'Arandu' label from toolbar for cleaner look
- Add components.css for reusable component styles
- Improve toolbar spacing and button consistency
- Add closeFile() function to clear current file state

* refactor(tray): update icon to match Arandu logo style

- Replace horizontal bar with diamond/losango shape
- Make apex more pointed (sharper top)
- Use thinner stroke for refined appearance
- Icon now matches the Arandu logo design

* fix(ui): clear comments state when closing file

- Reset selectedBlocks and commentsData
- Hide bottom-bar (comments panel)
- Hide stale comments banner
- Prevents UI state from persisting after file close

* fix(ui): restore refresh button padding

- Revert padding from merge conflict resolution
- Keep consistent with other toolbar buttons

* ci(auto-tag): skip tag creation for docs-only changes

- Check if apps/shared/scripts changed before creating tag
- Skip release build for website/README updates only
- Reduces unnecessary CI runs and costs

* chore(deps): update Cargo.lock from merge

* refactor(tauri): consolidate button styles

* docs(website): add plan review and voice-to-text features

* docs(readme): document plan review and voice-to-text features

* fix(ui): prevent comment modal preview overflow

- Increase modal width to match review modal (700px)
- Add max-height and scroll to block preview
- Normalize whitespace in preview text (remove line breaks, collapse spaces)

* fix(style): add word-break to prevent code overflow

Add overflow-wrap, word-wrap, and word-break properties to inline code elements to prevent horizontal overflow when displaying long paths or identifiers.

Changes:
- shared/style.css: add word-break properties to code blocks
- website/css/site.css: add word-break properties to mockup code elements

* chore: add examples/ to gitignore for private reference files

* fix: use null for beforeBuildCommand and remove deprecated word-wrap

* fix(style): remove aggressive word-break: break-all from inline code

overflow-wrap: break-word alone prevents overflow while preserving
readability by not splitting identifiers mid-word.
diff --git a/.gitignore b/.gitignore
@@ -97,3 +97,6 @@ yarn-error.log*
 
 # Plan review comments
 *.comments.json
+
+# Examples (private reference files)
+examples/
diff --git a/README.md b/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
diff --git a/apps/tauri/src-tauri/tauri.conf.json b/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"
   },
diff --git a/apps/tauri/src/app.css b/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 */
diff --git a/apps/tauri/src/index.html b/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>
diff --git a/shared/style.css b/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 {
diff --git a/website/css/site.css b/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; }
diff --git a/website/index.html b/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>

Original file line number	Diff line number	Diff line change
`@@ -841,6 +841,9 @@ html.dark link[media*="light"] { media: not all; }`
`841`	`841`	`padding: 8px;`
`842`	`842`	`border-radius: 4px;`
`843`	`843`	`margin-bottom: 10px;`
	`844`	`+ max-height: 80px;`
	`845`	`+ overflow-y: auto;`
	`846`	`+ overflow-wrap: break-word;`
`844`	`847`	`}`
`845`	`848`
`846`	`849`	`/* Review Modal */`
Original file line number	Diff line number	Diff line change
`@@ -86,6 +86,7 @@ code {`
`86`	`86`	`padding: 0.15em 0.4em;`
`87`	`87`	`border-radius: 3px;`
`88`	`88`	`border: 1px solid var(--border);`
	`89`	`+ overflow-wrap: break-word;`
`89`	`90`	`}`
`90`	`91`
`91`	`92`	`pre {`