Commit Graph

370 Commits

Author SHA1 Message Date
Michael Ramos bf4589e395 fix: guard Enter key handlers with isComposing for CJK IME support (#201)
CJK users press Enter to confirm IME character selection, which
was triggering form submission instead. Add !e.nativeEvent.isComposing
guard to all Enter-to-submit handlers in the plan editor UI.

Fixes #191

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 22:45:37 -08:00
김영준E cc44f6ad44 feat: Add code suggestions, inline editing, and refactor DiffViewer (#198)
* ✨ Add code suggestions, inline editing, and refactor DiffViewer

- GitHub-style suggestion blocks with syntax-highlighted diff view
- Inline annotation editing via toolbar (edit button on inline comments)
- Expandable two-pane code modal for writing suggestions
- Inline markdown rendering (bold, italic, code) in review comments
- Original code extraction from unified diff patches
- Decompose DiffViewer (615→200 lines) into focused components:
  FileHeader, InlineAnnotation, SuggestionBlock, SuggestionDiff,
  SuggestionModal, AnnotationToolbar, HighlightedCode
- Extract hooks: useAnnotationToolbar, useTabIndent
- Extract utils: detectLanguage, formatLineRange, patchParser,
  renderInlineMarkdown
- Fix suggestedCode trim stripping meaningful indentation
- Fix stale closure in useTabIndent consumers

* 🐛 Fix annotation edit field overwrite and add IME composition guard

- Conditionally spread only defined fields in handleEditAnnotation
  to prevent undefined values from wiping sibling fields
- Add !e.nativeEvent.isComposing guard to Cmd/Ctrl+Enter handlers
  in comment and suggested-code textareas for CJK input support
2026-03-01 22:00:10 -08:00
Gunit Bindal c470dcebf1 Add short URL sharing via paste service to fix URL truncation (#188)
* Add short URL sharing via paste service to fix URL truncation on Slack/messaging apps

Share URLs for large plans can be 10-40KB+ because the entire plan + annotations
are compressed into the URL hash. Services like Slack, WhatsApp, and Twitter
truncate these URLs, making shared plans unviewable (related: #142).

This adds an optional paste-service backend that stores compressed payloads and
returns short ~60-char URLs (e.g. share.plannotator.ai/p/aBcDeFgH).

Changes:
- Add Cloudflare Worker paste service (apps/paste-worker/) with KV storage
  and 90-day TTL for stored plans
- Add createShortShareUrl() and loadFromPasteId() to sharing utils
- Update useSharing hook to auto-generate short URLs with 1s debounce
- Update ExportModal to show short URL as primary copy target with
  full hash URL as backup
- Portal automatically supports /p/<id> paths via useSharing hook
- Fully backward compatible: hash-based URLs continue to work unchanged
- Graceful degradation: falls back to hash URLs if paste service is unavailable

* Fix critical bugs found during code review of short URL feature

- Worker: return only { id } so client constructs URL with its own
  shareBaseUrl (fixes self-hosted deployments)
- importFromShareUrl: handle /p/<id> short URLs in addition to hash
  URLs (fixes teammate import via short links)
- Anchor /p/<id> regex with ^ to prevent false matches on nested paths
- Pass shareBaseUrl to loadFromPasteId (was always defaulting)
- replaceState preserves base path instead of hardcoding /
- Clear stale shortShareUrl immediately on debounce to prevent showing
  outdated link during the 1s delay
- Add shareBaseUrl to dependency arrays for loadFromHash and
  importFromShareUrl callbacks
- Remove unused url field fallback from paste API response parsing

* Fix pasteApiUrl/shareBaseUrl confusion and add remote session share URLs

Bug fix (addresses @backnotprop's code review):
- useSharing hook now accepts separate `pasteApiUrl` parameter instead of
  incorrectly passing `shareBaseUrl` to `loadFromPasteId`. These are
  different domains (share portal vs paste backend). When omitted, the
  default `https://paste.plannotator.ai` is used correctly.
- Fixed in all three call sites: loadFromHash, importFromShareUrl, and
  generateShortUrl (via createShortShareUrl options).

Remote session share URLs (implements #192):
- When running on a remote instance (SSH, devcontainer), Plannotator now
  generates a share.plannotator.ai URL and prints it to stderr so the
  user can open the plan review in their local browser.
- Works for all three modes: plan review, code review, and annotate.
- Uses the same deflate-raw + base64url encoding as the client.
- Fails silently if URL generation fails — port forwarding still works.
- New server utility: packages/server/share-url.ts

* Address code review findings: fix spread limit, CORS, deps array

- share-url.ts: Replace btoa(String.fromCharCode(...compressed)) with
  a loop to avoid RangeError on plans >65K compressed bytes
- share-url.ts: Add cross-reference comment noting the server-side
  SharePayload is an intentional subset of the canonical UI type
- paste-worker: Only return CORS headers for allowed origins; disallowed
  origins get no CORS headers instead of misleading partial headers
- useSharing.ts: Remove unused shareBaseUrl from loadFromHash dependency
  array (loadFromHash only uses pasteApiUrl, not shareBaseUrl)

* Restructure paste service with pluggable storage, fix consent flow and security issues

Replaces monolithic paste-worker with multi-target paste-service architecture:
- Core logic (handler, storage interface, CORS) separated from deployment targets
- Filesystem store (self-hosted), KV store (Cloudflare), S3 stub (future)
- Bun binary target + Cloudflare Worker target
- Fix auto-upload removed: short URLs only created on explicit user click
- Clear stale short URL state when content changes
- Fix require('fs') in ESM module, add path-traversal guard in FsPasteStore
- Return 400 (not 500) for malformed JSON in both targets
- Fix compress() spread limit for large plans
- Updated docs: self-hosting guide, sharing guide, env vars, API endpoints

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

* Simplify paste service: extract shared router, remove TOCTOU patterns

- Extract duplicated HTTP routing from bun.ts and cloudflare.ts into
  handleRequest() in core/handler.ts — targets are now thin wrappers
- Move ID_PATTERN regex to core (was duplicated in both targets)
- Remove existsSync guard before mkdirSync({recursive:true}) in fs.ts
- Remove file.exists() check before file.json() in fs.ts get() — the
  try/catch already handles missing files
- Extract DEFAULT_SHARE_BASE constant in sharing.ts (was hardcoded twice)

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

* Deduplicate compression, image parsing, and remote share URL logic

- Create packages/shared/ with compress/decompress (single source of truth)
  — both @plannotator/server and @plannotator/ui import from here
- Export parseShareableImages from sharing.ts, remove duplicate
  parseGlobalAttachments from useSharing.ts
- Extract writeRemoteShareLink() helper in share-url.ts, replace 3
  near-identical blocks in apps/hook/server/index.ts

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

* Fix modulo bias in paste ID generation and remove nonexistent doc artifacts

- Use rejection sampling in generateId() to eliminate modulo bias
  (bytes >= 248 discarded, uniform distribution over 62 chars)
- Remove references to install-paste.sh and Docker image that don't
  exist yet; point self-hosting docs to GitHub Releases binaries

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-28 22:55:55 -08:00
dgrissen2 93e9420cb4 feat: open linked .md files in read-only tabs with TOC navigation (#184)
* feat: open linked .md files in read-only tabs with TOC navigation

When a plan references local .md files via markdown links, they now open
in a new browser tab using the full Plannotator viewer in read-only mode.

Changes:
- server: add /api/doc?path= endpoint with 4-strategy path resolution
  (absolute, relative to project root, bare filename search). Returns 400
  with match list on ambiguous filenames, 404 when not found, 403 on
  path traversal. Only resolves files within process.cwd().
- Viewer: detect local .md links in InlineMarkdown and route them to
  /?doc=<path>&readonly=true with a new-tab icon. Add isReadOnly prop
  that guards the web-highlighter init (prevents phantom highlights) and
  suppresses annotation toolbars.
- App: parse ?doc= URL param on load and fetch from /api/doc instead of
  /api/plan. Set isReadOnly mode which shows a read-only banner, hides
  approve/deny/feedback buttons, ModeSwitcher, Settings, AnnotationPanel,
  and annotation panel toggle. Shows an error view (not a silent fallback)
  when the document cannot be found or is ambiguous. Opens the sidebar to
  the TOC tab automatically.

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

* feat: upgrade linked docs to same-view annotatable navigation with aggregated feedback

Replace the new-tab read-only approach with same-view navigation: clicking a
.md link swaps the plan content in-place, preserving all annotations via a
docCache. Users can annotate linked docs and all feedback (plan + linked docs)
is aggregated into the deny/approve payload sent to Claude.

Key changes:
- New useLinkedDoc hook for state swapping, caching, and highlight restoration
- React key on Viewer forces clean unmount/remount (fixes web-highlighter DOM crash)
- exportLinkedDocAnnotations() aggregates linked doc feedback with filepath context
- UI: 2px primary border, "Linked File" badge, "Copy file" button, TOC filepath
  indicator with back-to-plan button
- Fix Tailwind v4 cascade: move * { border-color } to @layer base so utility
  classes like border-primary actually override it
- Compact TOC spacing (padding, gaps, line-height) without affecting Version Browser
- Exclude node_modules/.git from /api/doc bare filename glob

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

* fix: harden /api/doc endpoint and align linked doc annotation output

Restrict /api/doc to .md/.mdx files only, fix heading hierarchy and
sorting in exportLinkedDocAnnotations, and update CLAUDE.md docs.

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

* fix: complete linked doc annotations in getDocAnnotations and fix useMemo deps

- getDocAnnotations() now includes the active linked doc's live
  annotations alongside the cache, removing the implicit requirement
  to call back() before reading
- Remove unstable linkedDocHook object from annotationsOutput useMemo
  dependency array (was defeating memoization every render)
- Guard Cmd+Enter shortcut against linkedDocHook.isActive to prevent
  accidental approve/deny while viewing a linked doc

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

* fix: include linked doc annotations in approve feedback gate

The handleApprove gate only checked plan-level annotations, silently
dropping linked-doc-only feedback on "approve with notes" (OpenCode).

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

* fix: add getDocAnnotations to annotationsOutput useMemo deps

Ensures memo recomputes when navigating to/from linked docs, preventing
stale annotation output.

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

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Michael Ramos <mdramos8@gmail.com>
2026-02-26 20:26:06 -08:00
Michael Ramos 7145f190ec Add "Open in VS Code Diff" button to plan diff viewer (#180)
* Add feature plan for VS Code diff viewer button

Scoping document for a new PlanDiffViewer button that opens
the plan diff in VS Code's native diff viewer via `code --diff`.

https://claude.ai/code/session_01FYcJkGsWfuiGy53x3pwCSW

* feat: add "Open in VS Code" button to plan diff viewer

Add a button in the PlanDiffViewer toolbar that opens the current
plan diff in VS Code's native side-by-side diff viewer. The server
writes both versions to temp files and spawns `code --diff`.

- New POST /api/plan/vscode-diff endpoint in packages/server/index.ts
- VS Code button with loading/error states in PlanDiffViewer.tsx
- Wire currentPlan/basePlan/baseVersion props from App.tsx

https://claude.ai/code/session_01FYcJkGsWfuiGy53x3pwCSW

* chore: update bun.lock after install

https://claude.ai/code/session_01FYcJkGsWfuiGy53x3pwCSW

* refactor: server reads plan versions directly instead of receiving from client

The server already has the current plan in its closure and can read
any version from disk via getPlanVersion(). No need to send plan
text from the UI — just send baseVersion.

https://claude.ai/code/session_01FYcJkGsWfuiGy53x3pwCSW

* chore: remove plan.md scoping document from repo

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

* refactor: extract editor diff logic into shared packages/server/editor.ts

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

* feat: use official VS Code SVG icon in plan diff viewer button

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

* refactor: use history file paths directly for VS Code diff instead of writing temp files

Both plan versions already exist on disk in ~/.plannotator/history/.
Eliminates redundant file writes, fixes UPLOAD_DIR semantic misuse,
and corrects HTTP status codes for editor errors.

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

* refactor: rename editor.ts to ide.ts to avoid confusion with plan editor UI

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

* docs: add ide.ts and vscode-diff endpoint to CLAUDE.md

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

---------

Co-authored-by: Claude <noreply@anthropic.com>
2026-02-26 13:25:08 -08:00
김영준E 39b63c99c0 fix(ui): dismiss annotation toolbars on outside click and Escape (#182)
* fix: close annotation toolbars on outside click and escape

* refactor: share dismiss logic for annotation toolbars
2026-02-25 06:38:17 -08:00
Michael Ramos 01c5b92a82 chore: bump version to 0.9.1
Fix Plan Diff marketing dialog overflow on small viewports.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-23 00:55:04 -08:00
Michael Ramos aa1404fe99 fix: replace placeholder video URLs with actual YouTube link
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-23 00:26:13 -08:00
Michael Ramos effdd24c71 feat: Plan Diff marketing dialog, Pi origin, and docs (#177)
* feat: add Plan Diff marketing dialog, Pi origin support, and docs

- Add PlanDiffMarketing first-run dialog announcing the Plan Diff feature
  with per-origin video demo URLs (Claude Code, OpenCode, Pi)
- Add 'pi' as a first-class origin with display name and violet badge
- Add Plan Diff blog post (plan-diff-see-what-changed.md)
- Add brief Plan Diff mentions across READMEs and marketing docs


* polish: tighten blog post copy and reduce em dash usage


* fix: move PlanDiffMarketing to plan-diff/ and fix stale useEffect deps


* add plan diff preview screenshot for marketing dialog
2026-02-23 00:24:25 -08:00
Michael Ramos 819ba11f77 feat: plan diff UI with sidebar and dual view modes (#176)
* feat: add plan diff UI with sidebar, badge, and dual view modes

Shows what changed between plan iterations when Claude revises after
feedback. Adds a +N/-M badge below repo info that toggles the diff view,
a shared left sidebar with TOC and Version Browser tabs, and two diff
modes: rendered (color-coded borders) and raw markdown (+/- lines).

Closes #138, closes #111

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

* docs: update CLAUDE.md project structure and align first-run dialog labels

- Add plan-diff/ and sidebar/ component subdirectories to CLAUDE.md
- Add new hooks and utils to CLAUDE.md project structure
- Rename "Table of Contents" to "Auto-open Sidebar" in UIFeaturesSetup
  to match Settings.tsx label

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

* fix: address code review findings for plan diff UX

- Fix badge stats mixing block counts with line counts (modifications
  now fold into additions/deletions)
- Gate hasPreviousVersion on diffBasePlan being loaded to prevent
  "Show Changes" no-op and ModeSwitcher disappearing
- Make sidebar reactive to Settings toggle (useEffect on tocEnabled)
- Match PlanDiffViewer badge layout to Viewer (flex-col) so badge
  doesn't jump position on toggle
- Add "Exit Diff" label to the close button in diff view
- Remove dead CSS (plan-diff-removed-marker, plan-diff-modified)
- Clean up stale header comment and unused lines prop

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

* fix: second-round review cleanup for plan diff UX

- Fix stale "amber border" JSDoc in PlanCleanDiffView (actually green)
- Rename sidebar tab from "diff" to "versions" for clarity
- Gate VersionBrowser fetch on versionInfo being available
- Move .sidebar-tab-flag CSS into its own Sidebar section

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

* fix: add loading state for version selection in sidebar

Add isSelectingVersion to selectBaseVersion, mirroring the existing
isLoadingVersions pattern. Shows "Loading..." on the selected version
button while the fetch is in progress.

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

* fix: address third-round code review findings

- Fix duplicate border/backdrop on TOC inside sidebar (className override)
- Fix loading indicator targeting wrong version button (fetchingVersion state)
- Fix "Show Changes" button silent no-op (gate on hasPreviousVersion)

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

* refactor: move date to slug suffix, improve Other Plans UX

- Slug format changed from YYYY-MM-DD-{heading} to {heading}-YYYY-MM-DD
- Other Plans: single "coming soon" banner instead of per-item labels
- Strip date suffix from plan names in sidebar for readability
- Remove cursor-not-allowed from Other Plans items

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

* docs: add Plan Diff section to CLAUDE.md, alert on version fetch failure

- Document plan diff feature: engine, view modes, state management, sidebar
- Update slug format documentation to {heading}-YYYY-MM-DD
- Show native alert when version fetch fails instead of silent swallow

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

* fix: add table rendering to clean diff view

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

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-22 18:59:44 -08:00
Michael Ramos 444934a654 refactor: rename diff → annotations in plan review context (#173)
* refactor: rename misleading "diff" terminology to "annotations" in plan review context

The plan review flow used "diff" naming (exportDiff, diffOutput, .diff.md,
"Raw Diff", "Download .diff") for what is actually user annotations/feedback
on a plan. This was confusing since the code review flow legitimately uses
"diff" for actual git diffs. Renames all plan-review-context "diff" references
to "annotations" across code, UI labels, file extensions, and docs.

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

* fix: update stale exportDiff references in ANNOTATE.md

Missed during the diff→annotations rename. Updates two references
to exportDiff() → exportAnnotations() in the annotate flow docs.

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

* fix: rename remaining "Download Diff" label and tab type in App.tsx

The quick-save dropdown button still showed "Download Diff" and the
initialExportTab state type still used 'diff' instead of 'annotations'.

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

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-22 09:11:25 -08:00
김영준E 3a9a38e9d2 feat: Add auto-close countdown delay to completion overlay (#162)
* 🐛 fix(opencode): add missing @plannotator/server dependency

The opencode build failed because @plannotator/server was not declared
in apps/opencode-plugin/package.json, causing bun bundler to fail
resolving workspace packages.

* ✨ feat(ui): add auto-close delay with countdown on completion overlay

- Extend auto-close setting from boolean to delay options (off/immediate/3s/5s)
- Extract shared CompletionOverlay component from both editor and review apps
- Show countdown timer on completion screen when delay is set
- Add checkbox on completion overlay to enable auto-close (defaults to 3s)
- Replace toggle with select dropdown in Settings

* ♻️ refactor(ui): extract useAutoClose hook and clean up completion overlay

- Extract countdown logic into useAutoClose hook with phase state machine
- Extract SVG icons into named components (CheckIcon, ChatBubbleIcon)
- Add AUTO_CLOSE_OPTIONS constant for dropdown single source of truth
- Remove dead getAutoClose/setAutoClose boolean wrappers

* 🐛 fix(ui): handle window.close() failure with fallback message

Browsers block window.close() on tabs not opened by script. Add tryClose()
helper that detects failure via window.closed check, and show a fallback
message guiding the user to close manually.
2026-02-19 09:13:37 -08:00
PooLyum Lim 44cfce6ad0 fix(ui): prevent annotation toolbar from stealing global comment focus (#157)
Co-authored-by: blue <blue@blueui-MacBookPro.local>
2026-02-16 12:57:09 -08:00
J-token 80209cb6f4 fix: mermaid diagrams clipped due to fixed SVG dimensions and inline max-width (#156) 2026-02-16 12:04:14 -08:00
김영준E b35f2d88fd feat: close annotation toolbar on ESC key press (#149) 2026-02-13 10:39:48 -08:00
Michael Ramos e46815d8ea feat: named image references and annotate command (#147)
* feat: named image references and annotate command (#67, #109)

Add human-readable names to image attachments throughout the annotation
pipeline, and add a new `plannotator annotate <file.md>` command for
annotating arbitrary markdown files.

Image names: ImageAttachment type replaces plain string paths, upload
endpoints return originalName, editable name inputs under thumbnails,
[name] path format in exported feedback, backward-compatible sharing.

Annotate command: new server module reusing plan editor HTML with
mode:"annotate", CLI subcommand, slash commands for Claude Code and
OpenCode, annotate mode UI (hides Approve, shows Send Annotations).

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

* refactor: move image name input to ImageAnnotator screen

The name input now appears on the full-screen annotator modal that opens
immediately when uploading/pasting an image, pre-populated from the
filename. Removes the disruptive inline name editing from thumbnails.

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

* fix: stale closure in paste handler, update CLAUDE.md for new features

Fix race condition where globalAttachments was captured as empty array
in the paste event listener (missing dependency). Also update CLAUDE.md
to document ImageAttachment type, annotate server/flow, updated sharing
format with image support, and new slash commands.

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

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-12 20:23:49 -08:00
Michael Ramos 0b47dd54a7 feat: add configurable share URL for self-hosted portals (#146)
Add PLANNOTATOR_SHARE_URL env var so users can point share links at
their own self-hosted portal instance instead of share.plannotator.ai.
Threads the base URL through the same path as sharingEnabled: env var →
server options → API response → editor state → useSharing hook →
generateShareUrl(). Includes self-hosting guide and documentation.

Closes #12

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-12 15:07:43 -08:00
김영준E 044a50ea2c ✨ feat: add resizable side panels (#141)
Add drag-to-resize for the annotation panel, table of contents,
and file tree sidebar. Panel widths persist in cookie storage
across sessions and random-port hook invocations.

- Add useResizablePanel hook with left/right side support
- Extract ResizeHandle component with spread-friendly handleProps API
- Apply to AnnotationPanel, ReviewPanel, TableOfContents, FileTree
- Double-click handle to reset to default width
- Add min-w-0 on content areas for proper flex shrinking
2026-02-12 11:19:14 -08:00
sen 1d2948b6a6 Add the ability to auto close the tab on approval (#128)
feat: add opt-in auto-close tab setting after approval/denial

Partial implementation of #41
2026-02-10 22:23:43 -08:00
J-token 705e2755a7 feat: add zoom, pan, and drag controls to mermaid diagrams (#134)
feat: add zoom, pan, and drag controls to mermaid diagrams

Closes #125
2026-02-10 22:03:23 -08:00
Raz Ben Yaish 851a4b32af feat: import teammate review from share link (#131)
* feat: add import teammate review from share link

Adds the ability to import annotations from a teammate's plannotator
share URL into the current plan review session.

- New ImportModal component with URL input, validation, and feedback
- importFromShareUrl() in useSharing hook: decodes share link,
  deserializes annotations, deduplicates, and merges into session
- Import button in header toolbar (visible when sharing is enabled)

Workflow: teammate shares their annotated plan via share link,
user clicks Import, pastes the URL, annotations are merged in.

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

* fix: cleanup auto-close timer and deduplicate global attachments on import

- Clear auto-close setTimeout when user manually closes ImportModal
  (prevents orphaned callback from firing after unmount)
- Deduplicate global attachment paths on import to prevent duplicates
  when importing the same share link twice

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

* refactor: move import button into export dropdown menu

Move "Import Review" from a standalone header button into the export
dropdown, separated by a divider. Reduces header clutter.

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

---------

Co-authored-by: razb <razb@voyager-labs.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Michael Ramos <mdramos8@gmail.com>
2026-02-09 12:37:33 -08:00
Michael Ramos bfa3f2d303 feat: add UI features setup dialog for TOC and sticky actions (#133)
One-time dialog introduces Table of Contents and Sticky Actions to
new and existing users. Sequences after Permission Mode Setup dialog
if both need to show, uses cookie-based detection to avoid repeat.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 11:52:36 -08:00
Michael Ramos ef20bb62b7 feat: save to notes without approving (#127) (#132)
Decouple Obsidian/Bear saves from the approve/deny flow so users can
save plans to their notes app independently, then manually approve in
Claude Code (e.g. shift+tab for context clearing).

- Add POST /api/save-notes server endpoint
- Add "Notes" tab to Export dialog with per-integration save buttons
- Split Export button into button+dropdown with quick actions:
  Copy Share Link, Download Diff, Save to Obsidian/Bear
- Add Cmd/Ctrl+S keyboard shortcut with configurable default action
- Add "Default Save Action" setting in Settings > Saving
- New utility: defaultNotesApp.ts for cookie-based preference

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 11:28:09 -08:00
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
Robert Dailey 2fc34db81d feat: persist editor mode selection between plan reviews 2026-02-01 20:18:39 -06: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 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 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 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
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 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 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 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 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 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 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 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
Michael Ramos 3f0a65e535 Widen plan viewer to max-w-4xl (896px)
Increases default width from 768px to 896px for better readability
while still fitting comfortably on laptop screens.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-06 15:30:32 -08:00
Michael Ramos 14e5ca08d2 Fix: only widen layout on 2xl screens (1536px+)
Removes xl breakpoint to keep narrow layout on all laptops.
Only widens on truly large external monitors.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-06 15:10:00 -08:00
Michael Ramos e8dd0b469c Fix responsive width for laptop screens
Restore max-w-3xl as default width, only widen on larger screens:
- Default: max-w-3xl (768px) for laptops
- xl (1280px+): max-w-5xl for external monitors
- 2xl (1536px+): max-w-6xl for large desktops

Bumps version to 0.4.3.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-06 14:47:13 -08:00
Sean Swanson 4f37699e03 Widen plan viewer layout for responsiveness (#32) 2026-01-06 13:33:03 -08:00