feat(ui): code file viewer with syntax highlighting and annotations (#634)

* feat(ui): extract reusable PopoutDialog, fix backdrop blur

The table popout lost its backdrop blur when we switched to modal={false}
to keep annotation toolbars interactive. Radix ignores Dialog.Overlay in
non-modal mode, so replace it with a plain div backdrop that works
regardless. Extract the dialog shell (backdrop, close button, portal,
annotation-aware dismiss) into a reusable PopoutDialog component for
upcoming use cases. Add a demo table to the dev plan content.

* Add read-only code file popout

* Add code file annotation support

* Fix code selection popover position

* fix(editor): restore global-attachment-only drafts

The save condition was broadened to persist drafts with only global
attachments, but the restore handler still skipped applying when both
annotation arrays were empty — silently dropping the attachments.

* fix(ui): import SelectedLineRange from @pierre/diffs base package

SelectedLineRange is not re-exported from @pierre/diffs/react —
import it from the base @pierre/diffs entry point instead.


* chore: add TODO for bot callback + code annotation limitation

Author: backnotprop

apps/hook/dev-mock-api.ts

@@ -27,6 +27,10 @@
  * a more structural diff (outline → full spec) within whichever mode is on.
  */
 import type { Plugin } from 'vite';
+import { existsSync, readFileSync, statSync } from 'fs';
+import { resolve } from 'path';
+import { isCodeFilePath } from '../../packages/shared/code-file';
+import { preloadFile } from '@pierre/diffs/ssr';
 
 // ─── Default plans (Real-time Collaboration) ─────────────────────────────
 // What every dev sees when running `bun run dev:hook` without any flag.
@@ -569,7 +573,7 @@ export function devMockApi(): Plugin {
   return {
     name: 'plannotator-dev-mock-api',
     configureServer(server) {
-      server.middlewares.use((req, res, next) => {
+      server.middlewares.use(async (req, res, next) => {
         if (req.url === '/api/plan') {
           res.setHeader('Content-Type', 'application/json');
           res.end(JSON.stringify({
@@ -606,6 +610,41 @@ export function devMockApi(): Plugin {
           return;
         }
 
+        if (req.url?.startsWith('/api/doc?')) {
+          const url = new URL(req.url, 'http://localhost');
+          const reqPath = url.searchParams.get('path');
+          if (!reqPath) {
+            res.statusCode = 400;
+            res.end(JSON.stringify({ error: 'Missing path parameter' }));
+            return;
+          }
+          const base = url.searchParams.get('base');
+          const repoRoot = resolve(import.meta.dirname, '../..');
+          const resolved = resolve(base || repoRoot, reqPath);
+          if (!existsSync(resolved) || statSync(resolved).isDirectory()) {
+            res.statusCode = 404;
+            res.end(JSON.stringify({ error: `File not found: ${reqPath}` }));
+            return;
+          }
+          const contents = readFileSync(resolved, 'utf-8');
+          res.setHeader('Content-Type', 'application/json');
+          if (isCodeFilePath(reqPath)) {
+            const displayName = resolved.split('/').pop() || resolved;
+            let prerenderedHTML: string | undefined;
+            try {
+              const result = await preloadFile({
+                file: { name: displayName, contents },
+                options: { disableFileHeader: true },
+              });
+              prerenderedHTML = result.prerenderedHTML;
+            } catch { /* fall back to client-side rendering */ }
+            res.end(JSON.stringify({ codeFile: true, contents, filepath: resolved, prerenderedHTML }));
+          } else {
+            res.end(JSON.stringify({ markdown: contents, filepath: resolved }));
+          }
+          return;
+        }
+
         next();
       });
     },

apps/pi-extension/package.json

@@ -39,6 +39,7 @@
     "prepublishOnly": "cd ../.. && bun run build:pi"
   },
   "dependencies": {
+    "@pierre/diffs": "^1.1.12",
     "turndown": "^7.2.4",
     "@joplin/turndown-plugin-gfm": "^1.0.64"
   },

apps/pi-extension/server/reference.ts

@@ -24,11 +24,13 @@ import {
 import { detectObsidianVaults } from "../generated/integrations-common.js";
 import {
 	isAbsoluteUserPath,
+	isCodeFilePath,
 	resolveMarkdownFile,
 	resolveUserPath,
 	isWithinProjectRoot,
 } from "../generated/resolve-file.js";
 import { htmlToMarkdown } from "../generated/html-to-markdown.js";
+import { preloadFile } from "@pierre/diffs/ssr";
 
 type Res = ServerResponse;
 
@@ -54,7 +56,7 @@ function walkMarkdownFiles(dir: string, root: string, results: string[], extensi
 }
 
 /** Serve a linked markdown document. Uses shared resolveMarkdownFile for parity with Bun server. */
-export function handleDocRequest(res: Res, url: URL): void {
+export async function handleDocRequest(res: Res, url: URL): Promise<void> {
 	const requestedPath = url.searchParams.get("path");
 	if (!requestedPath) {
 		json(res, { error: "Missing path parameter" }, 400);
@@ -106,6 +108,40 @@ export function handleDocRequest(res: Res, url: URL): void {
 		return;
 	}
 
+	// Code files: resolve directly, return raw contents (no markdown conversion)
+	if (isCodeFilePath(requestedPath)) {
+		const resolvedCode = resolveUserPath(requestedPath, resolvedBase || projectRoot);
+		if (!resolvedBase && !isWithinProjectRoot(resolvedCode, projectRoot)) {
+			json(res, { error: "Access denied: path is outside project root" }, 403);
+			return;
+		}
+		try {
+			if (existsSync(resolvedCode)) {
+				const stat = statSync(resolvedCode);
+				if (stat.size > 2 * 1024 * 1024) {
+					json(res, { error: "File too large (max 2MB)" }, 413);
+					return;
+				}
+				const contents = readFileSync(resolvedCode, "utf-8");
+				const displayName = resolvedCode.split("/").pop() || resolvedCode;
+				let prerenderedHTML: string | undefined;
+				try {
+					const result = await preloadFile({
+						file: { name: displayName, contents },
+						options: { disableFileHeader: true },
+					});
+					prerenderedHTML = result.prerenderedHTML;
+				} catch {
+					// Fall back to client-side rendering
+				}
+				json(res, { codeFile: true, contents, filepath: resolvedCode, prerenderedHTML });
+				return;
+			}
+		} catch { /* fall through */ }
+		json(res, { error: `File not found: ${requestedPath}` }, 404);
+		return;
+	}
+
 	const result = resolveMarkdownFile(requestedPath, projectRoot);
 
 	if (result.kind === "ambiguous") {

apps/pi-extension/server/serverAnnotate.ts

@@ -126,7 +126,7 @@ export async function startAnnotateServer(options: {
 			if (!url.searchParams.has("base") && options.filePath && !/^https?:\/\//i.test(options.filePath)) {
 				url.searchParams.set("base", dirname(resolvePath(options.filePath)));
 			}
-			handleDocRequest(res, url);
+			await handleDocRequest(res, url);
 		} else if (url.pathname === "/api/obsidian/vaults") {
 			handleObsidianVaultsRequest(res);
 		} else if (url.pathname === "/api/reference/obsidian/files" && req.method === "GET") {

apps/pi-extension/server/serverPlan.ts

@@ -246,7 +246,7 @@ export async function startPlanReviewServer(options: {
 		} else if (externalAnnotations && (await externalAnnotations.handle(req, res, url))) {
 			return;
 		} else if (url.pathname === "/api/doc" && req.method === "GET") {
-			handleDocRequest(res, url);
+			await handleDocRequest(res, url);
 		} else if (url.pathname === "/api/obsidian/vaults") {
 			handleObsidianVaultsRequest(res);
 		} else if (url.pathname === "/api/reference/obsidian/files" && req.method === "GET") {

apps/pi-extension/vendor.sh

@@ -6,7 +6,7 @@ cd "$(dirname "$0")"
 
 mkdir -p generated generated/ai/providers
 
-for f in feedback-templates prompts review-core storage draft project pr-provider pr-stack pr-github pr-gitlab checklist integrations-common repo reference-common favicon resolve-file config external-annotation agent-jobs worktree worktree-pool html-to-markdown url-to-markdown tour annotate-args at-reference; do
+for f in feedback-templates prompts review-core storage draft project pr-provider pr-stack pr-github pr-gitlab checklist integrations-common repo reference-common favicon code-file resolve-file config external-annotation agent-jobs worktree worktree-pool html-to-markdown url-to-markdown tour annotate-args at-reference; do
   src="../../packages/shared/$f.ts"
   printf '// @generated — DO NOT EDIT. Source: packages/shared/%s.ts\n' "$f" | cat - "$src" > "generated/$f.ts"
 done