4 Commits

Author	SHA1	Message	Date
Michael Ramos	c08b188812	perf(ui): single Shiki highlighter, palette-matched code blocks, drop highlight.js (#1218) ... * perf(build): stub out the dead Oniguruma WASM in every bundle @pierre/diffs picks its Shiki engine with a runtime ternary: engine: preferredHighlighter === "shiki-wasm" ? createOnigurumaEngine(import("shiki/wasm")) : createJavaScriptRegexEngine() Plannotator pins `preferredHighlighter: 'shiki-js'` (and Pierre's own default is 'shiki-js'), so the Oniguruma branch never executes. Because the choice is a runtime ternary, bundlers keep the `import("shiki/wasm")` edge anyway and inline `@shikijs/engine-oniguruma/wasm-inlined`, a ~622 KB base64 blob, into the single-file HTML builds. The review app paid for it twice: once on the main thread (via `highlighter/shared_highlighter.js`) and once inside the `?worker&inline` Pierre worker. Alias `shiki/wasm` to a stub that throws if it is ever reached. Wired via `resolve.alias` rather than a plugin because `resolve.alias` is shared with Vite's worker build and `plugins` are not. Highlighting output is unchanged: the JS regex engine was already the one doing the work. Opting back into 'shiki-wasm' now fails loudly instead of silently costing every user a megabyte of dead bytes. apps/review/dist/index.html 19,424,646 -> 18,180,545 (-1,244,101 raw / -463,348 gzip) apps/hook/dist/index.html 23,032,467 -> 22,410,416 (-622,051 raw / -233,485 gzip) * perf(ui): consolidate code highlighting onto Shiki, drop highlight.js The app shipped two highlighters. Shiki already tokenised the code-review diff pane (via @pierre/diffs, JavaScript regex engine); highlight.js separately coloured markdown fences and review suggestion snippets at ~982 KB minified for a full build of ~190 grammars. That second highlighter is now gone. Every call site moves onto `packages/ui/utils/codeHighlight.ts`, a thin wrapper over Pierre's SHARED Shiki instance: CodeBlock, Viewer, PlanCleanDiffView markdown fences InlineMarkdown code-file hover preview HighlightedCode review suggestion snippets Reusing Pierre's instance rather than standing up a second fine-grained one is deliberate. Pierre imports Shiki's full bundle, so every grammar and theme is ALREADY inlined in the single-file builds: a separate highlighter with a curated language list would have duplicated a subset of bytes that are already there. Sharing costs nothing, gives every language Shiki bundles instead of a shortlist, and — the point of the change — guarantees fences resolve the exact same theme the diff pane resolves. Theming. `SHIKI_THEME_MAP` / `resolveSyntaxTheme` move from `packages/review-editor/hooks/usePierreTheme.ts` to `packages/ui/utils/syntaxTheme.ts`; usePierreTheme re-exports them, so the review editor's imports are unchanged. `useFenceTheme()` feeds the components and re-highlights on palette or mode change. Code blocks now follow the active palette across all ~52 themes in both light and dark, instead of always rendering github-dark and relying on hand-written `.hljs-*` override stacks to stay legible. Those stacks are deleted: `packages/editor/index.css`'s light-mode token palette, and `colorblind.css`'s hand-tuned tokens which existed to APPROXIMATE @pierre/theme's protanopia-deuteranopia themes that are now simply used. Behaviour held fixed: - Language-less fences stay plain text (#1212). No auto-detection anywhere, including the hover preview, which previously called `hljs.highlightAuto`. `HighlightedCode` derives its language from the caller's file path; an unknown extension renders plain. - `applyHighlight(el, ...)` keeps the imperative `hljs.highlightElement` DOM contract the annotation layer reaches into, and writes plain text at final size first so async highlighting causes no layout shift. Already-attached grammars highlight synchronously — no flicker on cached highlights. - It also verifies the rendered text is byte-identical to the source and falls back to plain otherwise, because annotations address code blocks by text offset. - `@plannotator/ui`'s public API is unchanged: the highlighter is a module-level default like the package's other seams, no new props. The `hljs` class on fenced `<code>` becomes `pn-code` (it is a structural hook for blockTargeting, vim navigation and print.css, and it named a library we no longer ship). `language-*` stays. apps/review/dist/index.html 18,180,545 -> 17,270,889 (-909,656 raw / -291,921 gzip) apps/hook/dist/index.html 22,410,416 -> 21,704,434 (-705,982 raw / -238,096 gzip) Verified the diff pane is untouched: the rendered Pierre shadow-DOM markup is byte-for-byte identical between an origin/main build and this one (SHA-256 aa1ee88a…). * fix(ui): strip stray NUL bytes from the code-highlight source Two U+0000 bytes slipped into comments in the previous commit, which made git treat the file as binary. Replaced with spaces; no behaviour change. * fix(ui): keep code-block annotation marks across highlight swaps Fenced code is annotated by hand: one `<mark data-bind-id>` inside the `<code>` element, which `applyHighlight` also owns. Every highlight swap (palette change, dark/light toggle, or the first async grammar attach after load) replaces that element's children, so the mark was silently wiped and nothing put it back. Annotation state, the sidebar panel and exports were unaffected; the loss was purely visual, and deterministic. `applyHighlight` now publishes every write through `onCodeHighlightSwap`, synchronously, immediately after it. `Viewer` subscribes and re-paints the fence's mark, so a swapped block ends up with BOTH the new theme's tokens and its annotation. The shared painter (`paintCodeBlockMark`) moves the token spans into the mark instead of flattening them to text, so creating an annotation no longer costs a block its colours either. Being driven by the swap also fixes the cousin race by ordering rather than timing: share/draft restore runs on a timer after load, and on a slow machine the first async swap could land after it and wipe the restored marks per block. A restore that painted before the swap is now re-established in the same task the swap ran in, and one that runs after finds the mark already there. Removal tombstones the id before re-highlighting, because the host drops the annotation from state a tick later — without it the swap listener would paint the just-removed annotation back in, and a fence carrying a second annotation would end up bare. Also closes the named gap in the WASM coverage: entry-assets only grepped source, so a future @pierre/diffs bump could reintroduce the inlined blob through a different import specifier unnoticed. It now greps the built `apps/{review,hook}/dist/index.html` for the base64 WASM magic, skipping on an unbuilt checkout and running for real in the CI job that builds the bundles.	2026-08-05 21:54:40 -07:00
Michael Ramos	c23df4db43	UI 2.0 visual refresh + HTML-render annotate (strictly UI, off main) (#863) ... Extracts the UI 2.0 visual refresh and the HTML-render annotate feature onto main, standalone (no daemon). Faithful copy of feat's UI/HTML logic with the standalone transport kept.	2026-06-08 17:03:41 -07:00
Michael Ramos	57495ec816	feat: Zed-style overlay scrollbars (#509) ... * feat(ui): Zed-style overlay scrollbars for plan mode Wide, translucent, full-length overlay scrollbars replacing the 6px WebKit rail that users couldn't reliably grab. Click the track to page-animate toward the click, drag the thumb, no layout shift, Firefox parity. Wraps plan-mode scroll containers (main viewer, annotation panel, sidebar, settings, export modal) in a new <OverlayScrollArea> component backed by overlayscrollbars-react. The library handles pointer capture, click-to-jump, hover reveal, auto-hide, RTL, touch, momentum, and cross-browser consistency. ClickScrollPlugin registered explicitly so `clickScroll: true` actually pages (otherwise it silently no-ops). Plumbing: - New ScrollViewportContext + useScrollViewport() hook so descendants (TableOfContents, PinpointOverlay, Viewer sticky observer) can reach the real scrolling element instead of document.querySelector('main'), which no longer returns the scroll node after wrapping. - New useOverlayViewport() hook — canonical ref+state+callback pattern bridging the library viewport into components that need both imperative access and effect re-runs when the viewport mounts. - useActiveSection gains an optional scrollElement arg so its IntersectionObserver root re-attaches when the viewport becomes available (ref mutations don't retrigger effects). Theme: - New .os-theme-plannotator tokens sourced from existing theme CSS variables (translucent muted-foreground for handle, transparent track at rest). 10px at rest, 14px on hover. Color + width transitions only — deliberately does not reintroduce transform/opacity in global transitions, preserving the abc952f scroll-jank fix. - Firefox `scrollbar-width: thin` + `scrollbar-color` fallback for unwrapped surfaces (micro-scrollers, future dockview). - print.css hides .os-scrollbar during print. ResizeHandle (#354 regression guard): - `side="right"` touch area retuned from `-right-3 left-0` to `-right-3 left-3` to clear the 14px hover scrollbar. Load-bearing comment added explicitly warning against simplification because #354 has already regressed twice. Intentionally left native: max-h-24 inline scrollers (EditorAnnotationCard, AgentsTab, ThemeTab), dropdown menus — a 14px overlay scrollbar would dominate those UI elements. Fixes #354 Follow-up to #359, #465 (both fixed #354, which kept regressing) Preserves #253 bidirectional annotation scroll Preserves #452 file-switch reset (plan mode portion) For provenance purposes, this commit was AI assisted. * feat(review): overlay scrollbars for file tree, sidebar, and PR panels Wrap the trivial code-review scroll containers in <OverlayScrollArea>: FileTree, ReviewSidebar content area, AITab chat history, PRCommentsTab timeline, and the ReviewPRSummary / ReviewPRChecks dock panels. None of these components read scrollTop / scrollHeight / scrollLeft directly — all descendant queries use containerRef.current.querySelector and all scroll-to-target calls use element.scrollIntoView, which walks up to the nearest scrollable ancestor (now the library viewport). No plumbing changes required. AITab was originally scoped to Commit B but an audit of its scroll effects (jump-to-question + auto-scroll-to-bottom) confirmed it only uses descendant scrollIntoView, so it ships here. DiffViewer and LiveLogViewer follow in a separate commit — they programmatically read/write scrollTop and need explicit viewport plumbing via useOverlayViewport. For provenance purposes, this commit was AI assisted. * feat(review): overlay scrollbars for diff viewer and live logs Wrap DiffViewer's main scroll container and LiveLogViewer's log pane in <OverlayScrollArea>, plumbing containerRef through useOverlayViewport so imperative scroll reads/writes and IntersectionObserver roots land on the real library viewport, not the OverlayScrollArea host. DiffViewer: - `previousScrollFilePathRef` guard added: the file-switch reset (#452) now only advances the tracking ref once the scroll actually executed, closing a race where a file switch landing before the library viewport attached would leave the ref stale while the scrollTo silently no-oped. - `viewport` added to every effect dep that reads containerRef.current (file-switch reset, annotation scroll, search-highlight apply + swap, scroll-to-match) so they re-run when the viewport mounts. Without this they'd silently no-op on first paint. - Split-view sync via @pierre/diffs unaffected — its ScrollSyncManager attaches scroll listeners to its own internal codeDeletions / codeAdditions elements inside the content, not the outer scroller. LiveLogViewer: - React onScroll replaced with a native addEventListener('scroll', ...) inside a useEffect keyed on `viewport` because React's onScroll doesn't bubble across the library's wrapper layers. - Follow-tail heuristic (`scrollHeight - scrollTop - clientHeight < 40`) and the auto-scroll-to-bottom assignment both preserved verbatim — only the ref target changed from the raw div to the library viewport. Preserves #452 file-switch reset Preserves #253 bidirectional annotation scroll (diff side) For provenance purposes, this commit was AI assisted. * fix(ui): address PR #509 review — viewport delivery and resize handle Two P1 bugs from the review, plus four correctness/cleanup items. P1: OverlayScrollbars viewport was never delivered to consumers. handleOsRef was reading osInstance() synchronously from the React ref callback, but `defer: true` queues the library's initialization for a later frame — at ref-callback time, the internal instance ref is still null. With a stable useCallback the ref never re-fires, so onViewportReady was never called with a real viewport. Every consumer of useOverlayViewport/useScrollViewport stayed permanently null: useActiveSection, TableOfContents.handleNavigate, Viewer sticky detection, PinpointOverlay, DiffViewer file-switch reset, LiveLogViewer follow-tail — all silently no-ops. Fix: deliver the viewport via the library's own `events.initialized` and `events.destroyed` callbacks, which fire exactly when elements are ready and when they're torn down. `getViewport()` prefers the tracked viewport ref over the imperative osInstance() path so late callers still work. P1: right-side ResizeHandle touch area was 0px wide. Touch area is an absolute-positioned child of a w-0 parent, so actual width = parent - left - right. With side='right' I'd set `left-3 -right-3`, which evaluates to `0 - 12 - (-12) = 0`. The annotation panel resize handle in plan mode and both right handles in code review had no draggable region. The visible 4px track has no event handlers, so the only affordance was cursor-style feedback — drag did nothing. Fix: revert to `left-0 -right-3` (12px wide, entirely right of the boundary, no left encroachment into the adjacent scrollbar zone — which was the original correct value before this branch). Rewrote the comment to explain the geometry trap instead of protecting the value that broke it. Additional fixes: - OverlayScrollArea: prefers-reduced-motion now reactive via useSyncExternalStore — OS toggle mid-session propagates to mounted instances instead of staying frozen at mount-time snapshot. - OverlayScrollArea: `ref as never` replaced with a narrow cast to `React.RefCallback<OverlayScrollbarsComponentRef<'div'>>` so future signature changes get type feedback. - PinpointOverlay: window resize listener moved above the scroll viewport guard so it attaches unconditionally. Scroll listener still requires the viewport (correct). Old code always registered resize on window; new code was accidentally skipping it when viewport was null. - TableOfContents: `className || default` changed to `className ?? default`. An explicit empty string from a caller (SidebarContainer passing className="" now that it wraps us in an OverlayScrollArea) should mean "no container styling", not "use the default". The old || operator treated "" as falsy and applied the default, leaving dead overflow-y-auto and unintended backdrop-blur on the nav. - useOverlayViewport: removed redundant double cast and `?? null` no-op in the ref setter. For provenance purposes, this commit was AI assisted. * fix(ui): print clipping with overlay scrollbar wrappers When <main> is wrapped in OverlayScrollArea, the library adds its own attribute-selector CSS rules: `[data-overlayscrollbars~="host"]` gets `overflow: hidden !important` and `[data-overlayscrollbars-viewport]` gets `overflow-x/y: hidden` (or scroll) with fixed viewport heights. These beat our existing `main { overflow: visible !important }` print override on specificity — attribute selectors outrank tag selectors even when both use `!important`. Result: long plans printed only the currently-visible viewport instead of flowing across pages. Fix: add a print-scoped override that targets the library's attribute selectors directly, setting overflow:visible, height:auto, max-height:none, and display:block to defeat both the overflow clip and the flex layout the library applies to host/padding wrappers. Verified by printing a multi-page plan in the dev server. For provenance purposes, this commit was AI assisted. * fix(ui): persistent overlay scrollbar, remove dead reduced-motion rule Switch autoHide from 'leave' to 'never'. The previous behavior faded the scrollbar 800ms after the pointer left the scroll host, which felt broken in a common interaction pattern: click a TOC entry (pointer in the sidebar) → trackpad-scroll (pointer still in sidebar) → 800ms idle → scrollbar disappears. User had to hover the right edge to bring it back on every interaction. Persistent visibility matches the pattern used by every editor-class technical app (VS Code, Zed, JetBrains, Xcode, Sublime) where the scrollbar is both a position indicator and a targeting surface for click-to-jump. Overlay scrollbars cost zero layout space, so "always visible" has no downside. Also removes the dead `.os-theme-plannotator .os-scrollbar` selector from the reduced-motion block. The library applies the theme class directly to the .os-scrollbar element itself (verified in the library runtime source, not just CSS), so a descendant selector with a space matches nothing. The track and handle selectors in the same block work correctly (they really are descendants) and are preserved. The component's own prefers-reduced-motion hook and helpers are now unused (autoHide is unconditionally 'never') and removed. Reduced motion is still honored for the hover color + width transitions on track/handle via the CSS @media (prefers-reduced-motion: reduce) block in theme.css, which the browser evaluates independently. For provenance purposes, this commit was AI assisted. * docs(ui): update OverlayScrollArea jsdoc to match persistent-scrollbar behavior The component header still described the old autoHide:'leave' behavior and implied the reduced-motion branch was in the component itself. Neither is true after cf137bf. Rewrite the jsdoc to describe the current behavior: always visible, no fade, reduced-motion handled via a CSS media query in theme.css rather than a React branch. For provenance purposes, this commit was AI assisted. * fix(ui): recompute scrollbar on content resize (pierre/diffs expand-lines) When pierre/diffs expanded context lines on a file whose diff previously fit inside the viewport, the scrollbar stayed hidden until the user manually scrolled or dragged the split-ratio handle to force a layout recalculation. Root cause: OverlayScrollbars' internal content observer doesn't see the mutation because pierre/diffs renders inside a shadow DOM, and MutationObserver does not pierce shadow DOM by default. The library's own host-level size observer doesn't help either — the host (our <main> / flex-1 container) has a fixed layout size that doesn't change when content grows. Fix: track the OverlayScrollbars instance in state and attach a ResizeObserver to the viewport's first element child in a useEffect. When the content's layout box grows — which happens even when the growth originates inside a shadow tree, because layout size propagates from shadow content to the shadow host — the observer fires and calls `instance.update(true)` to recompute scrollbar visibility. The call is debounced through requestAnimationFrame so the browser commits the new layout before OverlayScrollbars reads dimensions. Verified manually in the compiled binary against PR #509 itself: opening a small file, clicking pierre's expand-lines control, now reveals the scrollbar immediately. No regression observed in normal scroll / click-to-jump / file-switch / annotation-click paths. For provenance purposes, this commit was AI assisted. * docs(ui): document ResizeObserver content-resize mechanism Add the content-resize auto-recompute behavior to OverlayScrollArea's jsdoc header so the "what does this component do" summary is complete. The inline comment on the effect already explains the mechanism; this just surfaces it at the top. For provenance purposes, this commit was AI assisted.	2026-04-07 14:17:32 -07:00
Stacey Haffner	a0a6edd323	feat: print support with export menu integration and keyboard shortcut (#420) ... * feat: add print stylesheet for white paper output - Create packages/ui/styles/print.css with @media print rules - White background and black text for paper output - Monochrome code blocks for readability on white paper - Hide UI chrome (annotations, toolbars, sidebars) during print - Proper typography for headers, code, tables, lists, blockquotes - Page break rules to avoid orphaned content - Support for diagrams (Mermaid, Graphviz) in print - Import print.css in packages/ui/theme.css Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * feat: add Print button to toolbar - Add Print button next to Export button in plan editor toolbar - Triggers window.print() for native browser print dialog - Shows printer icon + 'Print' label (icon-only on mobile) - Tooltip: 'Print plan (Ctrl+P)' - Uses muted button styling consistent with other toolbar buttons Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: rewrite print.css selectors to match real DOM structure Code review found the original selectors used class names that don't exist in the actual component tree. Fixed: - Target header.sticky / header.h-12 (not generic 'header') - Target aside elements directly (SidebarContainer + AnnotationPanel) - Target .annotation-toolbar (portalled floating toolbar) - Target .fixed overlays (modals, export dialog) - Target article element (Viewer renders <article>, not <main>) - Target .bg-grid for background pattern removal - Flatten .h-screen height for print flow - Simplified hljs monochrome rule to [class*='hljs'] Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: print stylesheet — hide all toolbar UI, fix code block colors Issues fixed from user testing: - Header toolbar (Export/Print/Settings) now hidden via 'header' selector - AnnotationToolstrip (Select/Markup) hidden via '.flex-wrap' - Action buttons (Images/Comment/Copy) hidden via '.float-right' - Code block copy buttons hidden via '.group > button.absolute' - Fenced code blocks: override github-dark.css hljs theme to monochrome with light background (#f5f5f5) and dark text (#1a1a1a) - Inline code: solid light gray background with visible border - All text forced to solid black (override theme muted/foreground vars) - hljs span elements explicitly overridden for print Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: aggressive code block print overrides for dark theme - Override CSS custom properties (--muted, --foreground, etc.) in print - Use both background AND background-color on pre/code elements - Target pre[class], code[class], code.hljs with higher specificity - Explicitly list every hljs- class for monochrome override - Ensures github-dark.css hljs theme is fully overridden in print Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: use JS beforeprint/afterprint class for code block print styling Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: add visibilitychange fallback for Firefox print cleanup Firefox may not fire afterprint when print preview is closed without printing, leaving the .plannotator-print class stuck on <html>. This adds a visibilitychange listener that removes the class when the user returns to the page, plus cleanup on unmount. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * refactor: extract usePrintMode hook, replace brittle CSS selectors with data attributes - Extract print event listeners from App.tsx into packages/ui/hooks/usePrintMode.ts - Add data-print-region attributes to layout elements (root, content, document, article) - Add data-print-hide attribute to Viewer action buttons - Replace .h-screen, .flex-1.flex.overflow-hidden, .bg-card, .bg-grid, .float-right, .flex-wrap selectors with stable data-attribute and semantic element selectors - Follows existing hook patterns (useIsMobile, useDismissOnOutsideAndEscape, etc.) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: hide annotation toolstrip and repo badges in print output Added data-print-hide to the AnnotationToolstrip wrapper and the repo/branch badges div inside the article. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: collapse top whitespace gap in print output Zero out article padding, add margin/padding reset to data-print-hide elements, and collapse first h1 top margin for a tight print layout. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * feat: move print button into export menu and add Ctrl/Cmd+P shortcut * chore: remove accidentally introduced annotate command files Remove apps/hook/commands/annotate.md and apps/opencode-plugin/commands/annotate.md that were unintentionally added in the print-styling PR. For provenance purposes, this commit was AI assisted. --------- Co-authored-by: Yecats <Yecats@users.noreply.github.com> Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: Michael Ramos <mdramos8@gmail.com>	2026-03-29 11:04:32 -07:00