authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-02-28 21:23:50-08:00
committergravatar for jmarminge@gmail.comJulius Marminge <jmarminge@gmail.com> 2026-02-28 21:30:05-08:00
logdb31c362135d7089766111eb3ed8e5a2f2cc0397
treeee6d91ba4bfb08c30b97981fd22d641e4fac7272
parentcafe3352f1d5a14bb287392de478aaece2aa03d7

Open diff files in editor from diff header clicks

- Add click handling on diff file headers (`data-title`) to open files via native `openInEditor` - Resolve file paths against active thread/project cwd before launching editor - Add header hover affordance and tighten diff panel spacing

1 files changed, 44 insertions(+), 3 deletions(-)

apps/web/src/components/DiffPanel.tsx+44-3
......@@ -7,6 +7,8 @@ import { ChevronLeftIcon, ChevronRightIcon, Columns2Icon, Rows3Icon } from "luci
77import { useCallback, useEffect, useMemo, useRef, useState } from "react";
88import { checkpointDiffQueryOptions } from "~/lib/providerReactQuery";
99import { cn } from "~/lib/utils";
10import { readNativeApi } from "../nativeApi";
11import { preferredTerminalEditor, resolvePathLinkTarget } from "../terminal-links";
1012import { parseDiffRouteSearch, stripDiffSearchParams } from "../diffRouteSearch";
1113import { isElectron } from "../env";
1214import { useTheme } from "../hooks/useTheme";
......@@ -58,6 +60,21 @@ const DIFF_PANEL_UNSAFE_CSS = `
5860 border-block-color: var(--border) !important;
5961 color: var(--foreground) !important;
6062}
63
64[data-title] {
65 cursor: pointer;
66 transition:
67 color 120ms ease,
68 text-decoration-color 120ms ease;
69 text-decoration: underline;
70 text-decoration-color: transparent;
71 text-underline-offset: 2px;
72}
73
74[data-title]:hover {
75 color: color-mix(in srgb, var(--foreground) 84%, var(--primary)) !important;
76 text-decoration-color: currentColor;
77}
6178`;
6279
6380type RenderablePatch =
......@@ -144,6 +161,8 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
144161 const diffSearch = useSearch({ strict: false, select: (search) => parseDiffRouteSearch(search) });
145162 const activeThreadId = routeThreadId;
146163 const activeThread = state.threads.find((thread) => thread.id === activeThreadId);
164 const activeProject = state.projects.find((project) => project.id === activeThread?.projectId);
165 const activeCwd = activeThread?.worktreePath ?? activeProject?.cwd;
147166 const { turnDiffSummaries, inferredCheckpointTurnCountByTurnId } =
148167 useTurnDiffSummaries(activeThread);
149168 const orderedTurnDiffSummaries = useMemo(
......@@ -264,6 +283,18 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
264283 target?.scrollIntoView({ block: "nearest" });
265284 }, [selectedFilePath, renderableFiles]);
266285
286 const openDiffFileInEditor = useCallback(
287 (filePath: string) => {
288 const api = readNativeApi();
289 if (!api) return;
290 const targetPath = activeCwd ? resolvePathLinkTarget(filePath, activeCwd) : filePath;
291 void api.shell.openInEditor(targetPath, preferredTerminalEditor()).catch((error) => {
292 console.warn("Failed to open diff file in editor.", error);
293 });
294 },
295 [activeCwd],
296 );
297
267298 const selectTurn = (turnId: TurnId) => {
268299 if (!activeThread) return;
269300 void navigate({
......@@ -508,7 +539,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
508539 </div>
509540 ) : renderablePatch.kind === "files" ? (
510541 <Virtualizer
511 className="diff-render-surface h-full min-h-0 overflow-auto px-3 py-2"
542 className="diff-render-surface h-full min-h-0 overflow-auto p-2 "
512543 config={{
513544 overscrollSize: 600,
514545 intersectionObserverMargin: 1200,
......@@ -522,7 +553,17 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
522553 <div
523554 key={themedFileKey}
524555 data-diff-file-path={filePath}
525 className="diff-render-file rounded-md"
556 className="diff-render-file mb-2 rounded-md last:mb-0"
557 onClickCapture={(event) => {
558 const nativeEvent = event.nativeEvent as MouseEvent;
559 const composedPath = nativeEvent.composedPath?.() ?? [];
560 const clickedHeader = composedPath.some((node) => {
561 if (!(node instanceof Element)) return false;
562 return node.hasAttribute("data-title");
563 });
564 if (!clickedHeader) return;
565 openDiffFileInEditor(filePath);
566 }}
526567 >
527568 <FileDiff
528569 fileDiff={fileDiff}
......@@ -539,7 +580,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
539580 })}
540581 </Virtualizer>
541582 ) : (
542 <div className="h-full overflow-auto px-3 py-2">
583 <div className="h-full overflow-auto p-2">
543584 <div className="space-y-2">
544585 <p className="text-[11px] text-muted-foreground/75">{renderablePatch.reason}</p>
545586 <pre className="max-h-[72vh] overflow-auto rounded-md border border-border/70 bg-background/70 p-3 font-mono text-[11px] leading-relaxed text-muted-foreground/90">