feat(dialogs): keyboard navigation for diff and plan viewer dialogs

- Add arrow/page/home/end key scrolling to both dialog viewers via
  shared createDialogScroll primitive
- Make plan panel focusable with keyboard scrolling (arrow/page keys)
- Enter on focused plan panel opens the plan viewer dialog
- Size plan viewer dialog to fit content (was fixed 70vw)
- Bump plan dialog font size from 15px to 17px

Author: johannesjo

electron/ipc/plans.test.ts

@@ -9,7 +9,6 @@ interface PlanWatcher {
   pollTimer: ReturnType<typeof setInterval> | null;
   plansDirs: string[];
   watchedDirs: Set<string>;
-  knownFiles: Set<string>;
 }
 
 const watchers = new Map<string, PlanWatcher>();
@@ -20,25 +19,6 @@ const PLAN_DIRS = ['.claude/plans', 'docs/plans'];
 /** How often to check for newly created plan directories (ms). */
 const DIR_POLL_INTERVAL = 3_000;
 
-/** Snapshot existing `.md` filenames across the given directories. */
-export function snapshotExistingFiles(dirs: string[]): Set<string> {
-  const known = new Set<string>();
-  for (const dir of dirs) {
-    let entries: fs.Dirent[];
-    try {
-      entries = fs.readdirSync(dir, { withFileTypes: true });
-    } catch {
-      continue;
-    }
-    for (const e of entries) {
-      if (e.isFile() && e.name.endsWith('.md')) {
-        known.add(e.name);
-      }
-    }
-  }
-  return known;
-}
-
 /**
  * Reads and merges `.claude/settings.local.json` in the worktree to set
  * `plansDirectory: "./.claude/plans"`. Creates the plans dir if needed.
@@ -71,20 +51,15 @@ export function ensurePlansDirectory(worktreePath: string): void {
 }
 
 /** Reads the newest `.md` file by mtime from a single plans directory. */
-function readNewestPlan(
-  plansDir: string,
-  knownFiles?: Set<string>,
-): { content: string; fileName: string; mtime: number } | null {
+function readNewestPlan(plansDir: string): { content: string; fileName: string; mtime: number } | null {
   let entries: fs.Dirent[];
   try {
     entries = fs.readdirSync(plansDir, { withFileTypes: true });
   } catch {
     return null;
   }
 
-  const mdFiles = entries.filter(
-    (e) => e.isFile() && e.name.endsWith('.md') && (!knownFiles || !knownFiles.has(e.name)),
-  );
+  const mdFiles = entries.filter((e) => e.isFile() && e.name.endsWith('.md'));
   if (mdFiles.length === 0) return null;
 
   let newest: { name: string; mtime: number } | null = null;
@@ -111,13 +86,10 @@ function readNewestPlan(
 }
 
 /** Reads the newest plan across multiple directories. */
-export function readNewestPlanFromDirs(
-  plansDirs: string[],
-  knownFiles?: Set<string>,
-): { content: string; fileName: string } | null {
+function readNewestPlanFromDirs(plansDirs: string[]): { content: string; fileName: string } | null {
   let best: { content: string; fileName: string; mtime: number } | null = null;
   for (const dir of plansDirs) {
-    const result = readNewestPlan(dir, knownFiles);
+    const result = readNewestPlan(dir);
     if (result && (!best || result.mtime > best.mtime)) {
       best = result;
     }
@@ -126,9 +98,9 @@ export function readNewestPlanFromDirs(
 }
 
 /** Sends plan content for a task to the renderer. */
-function sendPlanContent(win: BrowserWindow, taskId: string, plansDirs: string[], knownFiles: Set<string>): void {
+function sendPlanContent(win: BrowserWindow, taskId: string, plansDirs: string[]): void {
   if (win.isDestroyed()) return;
-  const result = readNewestPlanFromDirs(plansDirs, knownFiles);
+  const result = readNewestPlanFromDirs(plansDirs);
   if (result) {
     win.webContents.send(IPC.PlanContent, {
       taskId,
@@ -170,10 +142,6 @@ function startDirPolling(taskId: string, entry: PlanWatcher, onChange: () => voi
     for (const dir of current.plansDirs) {
       if (current.watchedDirs.has(dir)) continue;
       if (!fs.existsSync(dir)) continue;
-      // Snapshot existing files before watching so they are ignored
-      for (const name of snapshotExistingFiles([dir])) {
-        current.knownFiles.add(name);
-      }
       const watcher = watchDir(dir, onChange);
       if (watcher) {
         current.fsWatchers.push(watcher);
@@ -206,15 +174,14 @@ export function startPlanWatcher(win: BrowserWindow, taskId: string, worktreePat
   const claudePlansDir = path.join(worktreePath, '.claude', 'plans');
   fs.mkdirSync(claudePlansDir, { recursive: true });
 
-  const knownFiles = snapshotExistingFiles(plansDirs);
+  sendPlanContent(win, taskId, plansDirs);
 
   const entry: PlanWatcher = {
     fsWatchers: [],
     timeout: null,
     pollTimer: null,
     plansDirs,
     watchedDirs: new Set(),
-    knownFiles,
   };
 
   const onChange = () => {
@@ -223,7 +190,7 @@ export function startPlanWatcher(win: BrowserWindow, taskId: string, worktreePat
     if (current.timeout) clearTimeout(current.timeout);
     current.timeout = setTimeout(() => {
       current.timeout = null;
-      sendPlanContent(win, taskId, current.plansDirs, current.knownFiles);
+      sendPlanContent(win, taskId, current.plansDirs);
     }, 200);
   };
 

electron/ipc/plans.ts

@@ -2,6 +2,7 @@ import { Show, createSignal, createEffect, onCleanup } from 'solid-js';
 import { Dialog } from './Dialog';
 import { invoke } from '../lib/ipc';
 import { IPC } from '../../electron/ipc/channels';
+import { createDialogScroll } from '../lib/dialog-scroll';
 import { theme } from '../lib/theme';
 import { sf } from '../lib/fontScale';
 import { parseUnifiedDiff } from '../lib/unified-diff-parser';
@@ -86,6 +87,12 @@ function DiffViewerContent(props: DiffViewerDialogProps) {
 
   let fetchGeneration = 0;
   let searchInputRef: HTMLInputElement | undefined;
+  let diffScrollRef: HTMLDivElement | undefined;
+
+  createDialogScroll(
+    () => diffScrollRef,
+    () => props.scrollToFile !== null,
+  );
 
   // Ctrl+F / Cmd+F handler to focus the search input
   createEffect(() => {
@@ -305,6 +312,7 @@ function DiffViewerContent(props: DiffViewerDialogProps) {
               onAnnotationAdd={review.addAnnotation}
               onAnnotationDismiss={review.dismissAnnotation}
               scrollToAnnotation={review.scrollTarget()}
+              onScrollRef={(el) => { diffScrollRef = el; }}
             />
           </Show>
         </div>

src/components/DiffViewerDialog.tsx

@@ -1,5 +1,6 @@
 import { Show, For, createSignal, createEffect } from 'solid-js';
 import { Dialog } from './Dialog';
+import { createDialogScroll } from '../lib/dialog-scroll';
 import { ReviewProvider, useReview } from './ReviewProvider';
 import { ReviewCommentsButton, ReviewSidebarPanel } from './ReviewSidebarPanel';
 import { ReviewCommentCard } from './ReviewCommentCard';
@@ -39,9 +40,10 @@ export function PlanViewerDialog(props: PlanViewerDialogProps) {
     <Dialog
       open={props.open}
       onClose={props.onClose}
-      width="70vw"
+      width="fit-content"
       panelStyle={{
         height: '70vh',
+        'min-width': '360px',
         'max-width': '1000px',
         overflow: 'hidden',
         padding: '0',
@@ -88,6 +90,11 @@ function PlanViewerContent(props: PlanViewerContentProps) {
   const [cardOffsets, setCardOffsets] = createSignal<Record<string, number>>({});
   const [highlightRects, setHighlightRects] = createSignal<HighlightRect[]>([]);
 
+  createDialogScroll(
+    () => scrollRef,
+    () => !!props.planContent,
+  );
+
   // Scroll to annotation when scrollTarget changes
   createEffect(() => {
     const target = review.scrollTarget();

src/components/PlanViewerDialog.tsx

@@ -24,6 +24,7 @@ interface ScrollingDiffViewProps {
   onAnnotationAdd: (annotation: ReviewAnnotation) => void;
   onAnnotationDismiss: (id: string) => void;
   scrollToAnnotation?: ReviewAnnotation | null;
+  onScrollRef?: (el: HTMLDivElement) => void;
 }
 
 const STATUS_LABELS: Record<string, string> = {
@@ -754,7 +755,7 @@ export function ScrollingDiffView(props: ScrollingDiffViewProps) {
 
   return (
     <div
-      ref={containerRef}
+      ref={(el) => { containerRef = el; props.onScrollRef?.(el); }}
       style={{
         height: '100%',
         'overflow-y': 'auto',

src/components/ScrollingDiffView.tsx

@@ -90,6 +90,7 @@ export function TaskPanel(props: TaskPanelProps) {
   let promptRef: HTMLTextAreaElement | undefined;
   let notesRef: HTMLTextAreaElement | undefined;
   let reviewPlanBtnRef: HTMLButtonElement | undefined;
+  let planScrollRef: HTMLDivElement | undefined;
   let changedFilesRef: HTMLDivElement | undefined;
   let shellToolbarRef: HTMLDivElement | undefined;
   let titleEditHandle: EditableTextHandle | undefined;
@@ -108,7 +109,7 @@ export function TaskPanel(props: TaskPanelProps) {
     registerFocusFn(`${id}:title`, () => titleEditHandle?.startEdit());
     registerFocusFn(`${id}:notes`, () => {
       if (notesTab() === 'plan') {
-        reviewPlanBtnRef?.focus();
+        planScrollRef?.focus();
       } else {
         notesRef?.focus();
       }
@@ -604,6 +605,8 @@ export function TaskPanel(props: TaskPanelProps) {
                         }}
                       >
                         <div
+                          ref={planScrollRef}
+                          tabIndex={0}
                           class="plan-markdown"
                           style={{
                             flex: '1',
@@ -613,6 +616,20 @@ export function TaskPanel(props: TaskPanelProps) {
                             color: theme.fg,
                             'font-size': sf(11),
                             'font-family': "'JetBrains Mono', monospace",
+                            outline: 'none',
+                          }}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') { e.preventDefault(); setPlanFullscreen(true); return; }
+                            const step = 40;
+                            const page = Math.max(100, planScrollRef!.clientHeight - 40);
+                            switch (e.key) {
+                              case 'ArrowDown':  e.preventDefault(); planScrollRef!.scrollTop += step; break;
+                              case 'ArrowUp':    e.preventDefault(); planScrollRef!.scrollTop -= step; break;
+                              case 'PageDown':   e.preventDefault(); planScrollRef!.scrollTop += page; break;
+                              case 'PageUp':     e.preventDefault(); planScrollRef!.scrollTop -= page; break;
+                              case 'Home':       e.preventDefault(); planScrollRef!.scrollTop = 0; break;
+                              case 'End':        e.preventDefault(); planScrollRef!.scrollTop = planScrollRef!.scrollHeight; break;
+                            }
                           }}
                           // eslint-disable-next-line solid/no-innerhtml -- plan files are local, written by Claude Code in the worktree
                           innerHTML={planHtml()}

src/components/TaskPanel.tsx

@@ -0,0 +1,34 @@
+import { createEffect, onCleanup } from 'solid-js';
+
+/**
+ * Reactive primitive that binds Arrow / Page / Home / End keys to scroll
+ * a container element while a dialog is open.  Skips events originating
+ * from input elements so typing isn't affected.
+ */
+export function createDialogScroll(
+  getScrollEl: () => HTMLElement | undefined,
+  isActive: () => boolean,
+): void {
+  createEffect(() => {
+    if (!isActive()) return;
+    const handler = (e: KeyboardEvent) => {
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+      const el = getScrollEl();
+      if (!el) return;
+
+      const step = 40;
+      const page = Math.max(100, el.clientHeight - 40);
+      switch (e.key) {
+        case 'ArrowDown':  e.preventDefault(); el.scrollTop += step; break;
+        case 'ArrowUp':    e.preventDefault(); el.scrollTop -= step; break;
+        case 'PageDown':   e.preventDefault(); el.scrollTop += page; break;
+        case 'PageUp':     e.preventDefault(); el.scrollTop -= page; break;
+        case 'Home':       e.preventDefault(); el.scrollTop = 0; break;
+        case 'End':        e.preventDefault(); el.scrollTop = el.scrollHeight; break;
+      }
+    };
+    document.addEventListener('keydown', handler);
+    onCleanup(() => document.removeEventListener('keydown', handler));
+  });
+}

src/lib/dialog-scroll.ts

@@ -1204,7 +1204,7 @@ body.dragging-task * {
 .plan-markdown-dialog {
   max-width: 720px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-  font-size: 15px;
+  font-size: 17px;
   line-height: 1.7;
 }
 
@@ -1270,7 +1270,7 @@ body.dragging-task * {
 /* Code blocks — keep monospace, more padding */
 .plan-markdown-dialog pre {
   font-family: 'JetBrains Mono', monospace;
-  font-size: 13px;
+  font-size: 14px;
   line-height: 1.5;
   margin: 0.8em 0;
 }