Commit Graph

731 Commits

Author SHA1 Message Date
Thomas Roche 313c45138c feat: TOC sidebar, sticky actions, and settings redesign (#122)
* feat: Add Table of Contents sidebar with sticky action buttons

- Add hierarchical Table of Contents component with clickable navigation
- Implement useActiveSection hook for real-time section highlighting
- Add annotationHelpers utility for block identification
- Make Images, Global comment, and Copy plan buttons sticky during scroll
- Fix navigation scrolling to work within scrollable main container

* fix: Correct typo in opencode.json (CALUDE -> CLAUDE)

* docs: Update testing documentation - separate UI tests from integration/utility tests

* fix(ui): prevent code block annotation from breaking syntax highlighting

- Replace surroundContents() with plain text wrapper approach
- Add syntax highlighting restoration in removeHighlight()
- Fixes issue reported by kkharji in PR #122

The old approach used range.surroundContents() which wrapped syntax-highlighted
<span> elements, creating nested structure that broke the layout. The new approach
replaces code block innerHTML with plain text wrapped in <mark>, then restores
syntax highlighting when the annotation is removed.

Test coverage: 15 tests pass with edge cases for empty blocks, special chars,
large blocks (10k), unicode, and multiple annotation cycles.

* test(ui): add comprehensive code block annotation regression tests

- Add 15 test cases covering code block annotation behavior
- Test plain text wrapper approach vs nested span approach
- Verify syntax highlighting restoration on annotation removal
- Cover edge cases: empty blocks, special chars, large blocks, unicode
- Add happy-dom dev dependency for DOM testing

* feat: update opencode.json to include additional documentation instructions and configure Playwright MCP

* chore: stop tracking docs directory and opencode.json

* chore: move UI-TESTING.md to tests directory

* docs: extract UI testing checklist into separate file

- Move comprehensive feature checklists to UI-TESTING-CHECKLIST.md
- Keep main UI-TESTING.md focused on development workflow and setup
- Add reference link to checklist file for easy navigation

* docs: update UI testing documentation

* fix(ui): fix TOC active section tracking

IntersectionObserver was using root: null (viewport) instead of the
actual scroll container (<main>), and the effect only ran on mount
before headings were rendered. Pass the container as root and re-run
the observer when heading count changes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* revert: remove Playwright MCP from marketplace.json and stale README links

Playwright MCP is dev tooling, not for end users. README referenced
docs/UI-TESTING.md and docs/CODE-STYLE.md which don't exist at those paths.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* style(ui): compact TOC styling and fix layout shifts

- Smaller text (text-xs) and tighter padding for compact feel
- Remove border-l-2 and font-medium from active state to prevent
  layout shifts that pushed text into multiline
- Annotation count badges are now perfect circles (w-5 h-5)
- Add left padding to root-level heading

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat(ui): add optional TOC and sticky actions settings

- New uiPreferences.ts utility for cookie-based persistence
- TOC toggle: conditionally renders sidebar in App.tsx
- Sticky Actions toggle: conditionally applies sticky positioning in Viewer.tsx
- Both default to enabled, persisted via cookies

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor(ui): redesign Settings dialog with sidebar navigation

Replace flat settings list with sidebar + content panel layout:
- General tab: Identity, Permission Mode, Agent Switching
- Display tab: TOC, Sticky Actions, Tater Mode
- Saving tab: Plan Saving, Obsidian, Bear Notes
- Scrollable content area (max-h-[70vh])
- Sidebar hidden in review mode (single tab)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(ui): fix sticky action bar positioning and add scroll-aware card background

Match main's button positioning across all breakpoints with responsive
margins that account for article padding. Use IntersectionObserver sentinel
to detect when the bar is stuck, revealing the card background only on scroll.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Michael Ramos <mdramos8@gmail.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 09:28:09 -08:00
Michael Ramos 16429342c1 Merge pull request #130 from blue-poolyum/feat/github-style-viewed
feat: add GitHub-style viewed file tracking to code review
2026-02-07 10:23:09 -08:00
blue 34d76b8cf6 feat: add GitHub-style viewed file tracking to code review
- Add viewed checkbox in FileTree for manual toggling
- Add Viewed button in DiffViewer file header
- Add progress indicator (N/M format)
- Add option to hide/show viewed files
- Remove automatic viewed marking on file selection
2026-02-05 20:15:56 +09:00
Robert Dailey 2fc34db81d feat: persist editor mode selection between plan reviews 2026-02-01 20:18:39 -06:00
Michael Ramos fe293217e8 chore: bump version to 0.6.8
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-29 08:44:01 -08:00
Michael Ramos 48f53eed16 feat: display repo and branch info in plan document (#117)
* feat: display repo and branch info in plan document

Add subtle badge display in upper-left corner of plan document showing:
- Repository name (org/repo from git remote, with fallbacks)
- Current branch with git branch icon

New modular repo.ts handles detection with fallback chain:
1. Parse org/repo from git remote origin
2. Fall back to git repo root directory name
3. Fall back to current working directory

Closes #104

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* test: add --no-git flag to sandbox script

Allows testing repo info fallback behavior when not in a git repository.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-28 10:29:52 -08:00
Michael Ramos 5474469cab feat: add mermaid.js diagram rendering support (#116)
- Detect mermaid code blocks and render as interactive diagrams
- Dark theme matching Plannotator UI
- Toggle between source code and rendered diagram view
- Use getBBox() to recalculate viewBox for proper centering
- Error state shows source code fallback
- Add mermaid diagram to demo plan

Closes #115

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-28 09:50:20 -08:00
Michael Ramos f01036949b chore: bump version to 0.6.7
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-19 12:10:23 -08:00
Michael Ramos 18540a55d3 feat: add Comment mode and type-to-comment shortcut (#93) (#97)
- Add new "Comment" editor mode that shows input directly on selection
- Add type-to-comment in Selection mode: typing while toolbar is open
  auto-transitions to comment input with the typed character
- Add initialStep/initialType props to AnnotationToolbar for direct input
- Fix autofocus timing for portal-rendered toolbar

Closes #93

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-19 12:09:11 -08:00
Michael Ramos c24e775292 fix: smart detection for agent switching in OpenCode (#96)
Closes #94
2026-01-19 11:07:22 -08:00
Michael Ramos 2832d70bd9 chore: bump version to 0.6.6
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-18 09:14:35 -08:00
Michael Ramos f1087efc7c chore: bump version to 0.6.5
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-17 14:42:02 -08:00
Michael Ramos e5e59d0740 fix: preserve newlines in copy and add Cmd+C shortcut (#87)
* fix: use @plannotator/web-highlighter for proper newline handling

- Switch from web-highlighter to @plannotator/web-highlighter@0.8.1
- Use source.text from highlighter (preserves newlines in cross-block selections)
- Update dependency to ^0.8.1 which fixes exports field for bundlers

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: add Cmd+C keyboard shortcut for copying selected text

Closes #60

When text is selected and the annotation toolbar is visible, Cmd+C (Mac)
or Ctrl+C (Windows/Linux) will copy the selected text with proper newlines
preserved between block elements.

This works because @plannotator/web-highlighter@0.8.1 now captures text
using Selection.toString() which preserves newlines for cross-block
selections.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: don't intercept Cmd+C in input/textarea fields

Prevents the custom copy handler from intercepting Cmd+C when the user
is focused in an input or textarea (e.g., annotation comment input).
Previously, copying text from an input would copy the original plan
selection instead.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-17 13:13:00 -08:00
Michael Ramos 4ed4d15171 chore: bump version to 0.6.4 2026-01-15 20:55:54 -08:00
Michael Ramos cc3c3fe2bf feat: add Cmd+Enter keyboard shortcut to submit (#80) (#81)
- No annotations → Approve (proceed with implementation)
- With annotations → Send Feedback (request revision)

Works in both plan review and code review UIs. Respects input focus
to avoid conflict with existing Cmd+Enter to save annotation edits.

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-15 20:51:57 -08:00
Michael Ramos b1883d38e8 fix(opencode): include HTML files in npm package
The `files` array in package.json was missing plannotator.html and
review-editor.html, causing them to be omitted from npm publishes.
This explains why users were stuck on old versions.

Also fixes incorrect cache path in docs and install script.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-15 10:04:26 -08:00
Michael Ramos dcc1ad108a chore: bump version to 0.6.2
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-15 07:54:14 -08:00
Michael Ramos 4dd67c1157 chore: bump version to 0.6.1
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-15 07:45:14 -08:00
Michael Ramos 12385beef5 fix: use correct placeholder for custom vault path
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-14 14:28:29 -08:00
Michael Ramos 80bcb99493 feat: allow custom path for Obsidian integration (#68)
Add "Custom path..." option to vault dropdown so users can save plans
to any folder, not just registered Obsidian vaults.

- Add customPath field to ObsidianSettings interface
- Add CUSTOM_PATH_SENTINEL and getEffectiveVaultPath() helper
- Show conditional text input when custom path is selected
- Resolve effective path before sending to server

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-14 14:22:04 -08:00
Michael Ramos 131d1b9d0e feat: add config to disable URL sharing (#69)
Add deployment-level configuration to disable URL sharing for
security/privacy concerns.

Configuration methods:
- Claude Code: PLANNOTATOR_SHARE=disabled env var
- OpenCode: "share": "disabled" in opencode.json (primary), env var fallback

When disabled:
- Quick Share button hidden in annotation panel
- Share tab hidden in export modal (shows only Raw Diff)

Closes #69

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-14 13:12:37 -08:00
Pedro Paulo Pinheiro dos Santos ecbaf17e22 bugfix: Add WSL detection for browser opening utility (#74)
* bugfix: Add WSL detection for browser opening utility

* fix: add empty title param to Windows start command

The Windows `start` command interprets the first quoted argument as
a window title. Without an empty title `""`, paths with spaces like
"C:\Program Files\..." would be misinterpreted, causing custom
browser settings to fail silently.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Michael Ramos <mdramos8@gmail.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-14 09:33:46 -08:00
Michael Ramos 128417600d chore: bump version to 0.6.0
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-13 20:36:38 -08:00
Michael Ramos 0e07425116 feat: permission mode preservation for Claude Code hooks (#71)
* feat: add permission mode utility and setup dialog

Add cookie-based storage for permission mode preference with first-time
setup dialog for Claude Code users. Supports three modes:
- Auto-accept Edits (default)
- Bypass Permissions (equivalent to --dangerously-skip-permissions)
- Manual Approval

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: integrate permission mode in editor and settings

- Show first-time setup dialog for Claude Code users
- Add permission mode dropdown to Settings (Claude Code only)
- Pass selected mode in approve request

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: output updatedPermissions in hook response

Use Claude Code 2.1.7+ hook protocol to preserve permission mode after
plan approval. Extracts permission_mode from hook input, allows client
to override via request, and outputs setMode in updatedPermissions.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-13 20:31:23 -08:00
Gregson Murcia 4e18e3dccc feat: enable inline editing for annotations (#58) 2026-01-13 20:29:47 -08:00
Michael Ramos 461437a1d6 fix: make agent automatically respond to code review feedback
Removed noReply flag so agent addresses feedback immediately

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-13 05:30:02 -08:00
Michael Ramos bcc84fd11e fix: remove agent_cycle from review to prevent wrong agent switch
session.prompt with agent parameter handles the switch correctly

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-13 05:26:52 -08:00
Michael Ramos 4d2481e812 fix: rebuild with correct version embedded in bundle
0.5.4 was published with stale build containing 0.5.2 version string

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-13 04:57:14 -08:00
Michael Ramos 806e5536d6 feat: unified install script for all platforms
- Add Windows PowerShell install script (install.ps1)
- Install slash commands for both Claude Code and OpenCode
- Update OpenCode README with install script instructions
- Simplify UpdateBanner to use same install command for both platforms

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-13 04:45:51 -08:00
Michael Ramos 1ee40ef144 fix: always open review UI, allow switching diff types
Remove early exit when no uncommitted changes - user can switch to
"Last commit" or other diff types via dropdown.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-12 20:16:07 -08:00
Michael Ramos e1153ebeac fix: add update banner to code review screen
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-12 20:10:52 -08:00
Michael Ramos a427405201 fix: code review UI improvements for v0.5.1
- Show correct origin badge (Claude Code orange, OpenCode gray)
- Always show file tree sidebar when diff options available
- Update README with v0.5.0 label

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-12 20:06:00 -08:00
Michael Ramos 41eecc4480 chore: bump version to 0.5.0 for release
- Update version in root, opencode-plugin, and server packages
- Add code review feature to README
- Build artifacts for release

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-12 19:41:42 -08:00
Michael Ramos 8019f73a44 Feat/code review system (#57)
## Summary
Complete code review system for reviewing git diffs with annotations.

### Features
- Interactive diff viewer with split/unified views
- Line-level annotation system
- Diff type selector (uncommitted, last commit, vs main branch)
- Dynamic default branch detection
- Empty state handling
- Simplified UX with streamlined feedback flow

Closes #51
Closes #56
2026-01-12 19:36:09 -08:00
Michael Ramos 459a089a96 Bump version to 0.4.16
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-11 09:39:33 -08:00
Michael Ramos 046ca06fcb feat: improve dark mode contrast and add success/warning tokens (#54)
- Lift background from 13% to 15% lightness (softer than pure black)
- Soften foreground from 95% to 90% (reduces glare)
- Increase surface elevation separation (card 22%, popover 28%)
- Make muted-foreground more readable (65% → 72%)
- Make borders more visible (28% → 35%)
- Add --success and --warning design tokens
- Replace all hardcoded Tailwind colors (green-500, purple-500, yellow-500)
  with design tokens for consistent theming
- Boost annotation highlight opacity in dark mode for better readability

Closes #53

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-11 09:37:42 -08:00
Michael Ramos c9a42af86a Bump version to 0.4.15
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-09 10:34:55 -08:00
Michael Ramos 39ebb9e0be feat: support custom agents for agent switching (#50)
Add "Custom" option to agent switching dropdown that shows a text input
for specifying any custom agent name. This allows OpenCode users with
custom agents to switch to them after plan approval.

- Add 'custom' option with customName field to AgentSwitchSettings
- Add getEffectiveAgentName() helper for resolving actual agent name
- Show text input in Settings when Custom is selected
- Use effective agent name when sending to server

Closes #47

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-09 10:32:36 -08:00
Michael Ramos a0eb0fcc59 improve: clarify post-decision messaging (#49)
Make it explicit that users can close the tab after approving/denying:
- "You can close this tab and return to [Agent]."
- "Your response has been sent."

Related to #41

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-09 10:24:07 -08:00
Michael Ramos cee2c7ff4c feat: add PLANNOTATOR_BROWSER for browser selection (#48)
Allow users to specify which browser opens plan files via environment variable.
Default behavior unchanged - only activates when env var is set.

- macOS: Set to app name ("Google Chrome") or path
- Linux/Windows: Set to executable path

Closes #42
2026-01-09 10:18:54 -08:00
Michael Ramos 03a19f5846 refactor: consolidate annotation toolbars into single component (#46)
- Create shared AnnotationToolbar component replacing duplicate code
- Delete old Toolbar.tsx and inline CodeBlockToolbar from Viewer.tsx
- Add copy button to toolbar (left side, separated from annotation icons)
- Fix copy to preserve line breaks using window.getSelection().toString()
- Net reduction of ~175 lines of duplicate code
2026-01-09 10:11:41 -08:00
Manh Luong 6736589446 fix: agent name in UI (#44)
* refactor: remove unused `DecisionBar`

* fix: coding agent name in UI
2026-01-09 09:33:07 -08:00
Michael Ramos 0926837d15 Render YAML frontmatter as styled metadata card (#45)
Fixes #43 - YAML frontmatter was rendering as ugly text because
the parser treated it as regular markdown content.

Changes:
- Added extractFrontmatter() to parser that parses YAML key-value pairs
- Added FrontmatterCard component that renders frontmatter nicely
- Supports string values and arrays (rendered as tags)
- Card appears at top of plan with muted background

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-09 09:23:58 -08:00
Michael Ramos 963332ca13 Bump version to 0.4.11
Fix stale build artifacts in npm package - version was showing 0.4.9 due to
pre-built HTML being copied before version bump.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-07 14:33:21 -08:00
Michael Ramos f4dcdbffd6 Bump version to 0.4.10
- Update CLAUDE.md with new APIs and file structure
- Remove unused helper functions (isAgentSwitchEnabled, isPlanSaveEnabled)
- Sync all package versions to 0.4.10

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-07 14:24:59 -08:00
Michael Ramos 710e18daff Add configurable agent switching for OpenCode (#40)
* Add configurable agent switching for OpenCode

Add a Settings UI option to configure agent switching behavior after plan
approval. Users can now choose to switch to the "build" agent (default) or
disable agent switching entirely. This is particularly useful for oh-my-opencode
users who have their own agent switching logic.

Changes:
- Add agentSwitch.ts utility for storing agent switch preference
- Add "Agent Switching" dropdown in Settings UI
- Pass agentSwitch setting through /api/approve to OpenCode plugin
- Conditionally perform agent switch based on user preference

Closes #37

🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: TheOutdoorProgrammer <13936290+TheOutdoorProgrammer@users.noreply.github.com>

* Hide Agent Switching setting when not in OpenCode mode

* Add configurable plan saving settings

Users can now:
- Disable plan saving entirely via Settings toggle
- Set a custom save path (supports ~ for home directory)

Closes #36

* Widen Settings dialog to accommodate new options

* Move Save Plans setting below Identity section

* Make Obsidian Vault and Folder inputs side by side

* Move Agent Switching below Save Plans in Settings

---------

Co-authored-by: TheOutdoorProgrammer <13936290+TheOutdoorProgrammer@users.noreply.github.com>
2026-01-07 14:17:56 -08:00
Michael Ramos 4de46b5984 Add plan saving to ~/.plannotator/plans/
- New storage.ts module with cross-platform support (Windows/macOS/Linux)
- Save plan.md on server start
- Save plan.diff.md and plan-{approved,denied}.md on decision
- OpenCode plugin shows saved path in tool result
2026-01-06 19:46:28 -08:00
Michael Ramos e0261349ee Bump version to 0.4.8
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-06 19:11:15 -08:00
Michael Ramos 0ac49c24e4 Add "approve with notes" for OpenCode + Claude Code warning dialog
Features:
- OpenCode: annotations are sent on approval as implementation notes
- Claude Code: confirmation dialog warns annotations won't be sent
- Dialog includes links to upvote Claude Code issues #16001 #15755

Refactor:
- New reusable ConfirmDialog component

Closes #30

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-06 18:26:11 -08:00
Michael Ramos a3a0f8e64e Fix OpenCode agent switching race condition + adjust UI width
Agent switching:
- Use noReply: true with await to ensure user message is created
  before returning from tool
- Fixes race condition where message was created after loop exited

UI:
- Adjust plan viewer width to 832px (between 3xl and 4xl)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-06 15:55:07 -08:00