Improve inline panel, file preview, and MCP session handling (pingdotgg#3121)

Author: juliusmarminge

apps/web/src/components/ChatMarkdown.browser.tsx

@@ -288,6 +288,13 @@ describe("ChatMarkdown", () => {
         ).toMatchObject({
           isOpen: true,
           activeSurfaceId: "file:apps/web/src/components/ChatMarkdown.tsx",
+          surfaces: [
+            expect.objectContaining({
+              relativePath: "apps/web/src/components/ChatMarkdown.tsx",
+              revealLine: 978,
+              revealRequestId: 1,
+            }),
+          ],
         });
         expect(openInPreferredEditorMock).not.toHaveBeenCalled();
         expect(openFileInPreviewMock).not.toHaveBeenCalled();

apps/web/src/components/ChatMarkdown.tsx

@@ -671,6 +671,7 @@ interface MarkdownFileLinkProps {
   iconPath: string;
   displayPath: string;
   workspaceRelativePath: string | null;
+  line?: number | undefined;
   label: string;
   copyMarkdown: string;
   theme: "light" | "dark";
@@ -995,6 +996,7 @@ const MarkdownFileLink = memo(function MarkdownFileLink({
   iconPath,
   displayPath,
   workspaceRelativePath,
+  line,
   label,
   copyMarkdown,
   theme,
@@ -1027,8 +1029,8 @@ const MarkdownFileLink = memo(function MarkdownFileLink({
       handleOpenInEditor();
       return;
     }
-    useRightPanelStore.getState().openFile(threadRef, workspaceRelativePath);
-  }, [handleOpenInEditor, threadRef, workspaceRelativePath]);
+    useRightPanelStore.getState().openFile(threadRef, workspaceRelativePath, line);
+  }, [handleOpenInEditor, line, threadRef, workspaceRelativePath]);
 
   const handleOpenInBrowser = useCallback(() => {
     if (!threadRef) return;
@@ -1169,6 +1171,7 @@ function areMarkdownFileLinkPropsEqual(
     previous.iconPath === next.iconPath &&
     previous.displayPath === next.displayPath &&
     previous.workspaceRelativePath === next.workspaceRelativePath &&
+    previous.line === next.line &&
     previous.label === next.label &&
     previous.copyMarkdown === next.copyMarkdown &&
     previous.theme === next.theme &&
@@ -1331,6 +1334,7 @@ function ChatMarkdown({
             iconPath={fileLinkMeta.filePath}
             displayPath={fileLinkMeta.displayPath}
             workspaceRelativePath={fileLinkMeta.workspaceRelativePath}
+            line={fileLinkMeta.line}
             label={labelParts.join(" · ")}
             copyMarkdown={`[${fileLinkMeta.basename}](${normalizedHref})`}
             theme={resolvedTheme}

apps/web/src/components/ChatView.browser.tsx

@@ -2700,13 +2700,97 @@ describe("ChatView timeline estimator parity (full app)", () => {
       expect(fileTree.shadowRoot?.activeElement).toBe(fileSearchInput);
       expect(useComposerDraftStore.getState().draftsByThreadKey[THREAD_KEY]?.prompt ?? "").toBe("");
 
-      useRightPanelStore.getState().openFile(THREAD_REF, "src/large.ts");
-      const codeVirtualizer = await waitForElement(
-        () => document.querySelector<HTMLElement>(".file-preview-virtualizer"),
-        "Unable to find the virtualized file preview.",
-      );
+      const previousCodeVirtualizer = document.querySelector<HTMLElement>(
+        ".file-preview-virtualizer",
+      );
+      useRightPanelStore.getState().openFile(THREAD_REF, "src/large.ts", 4_000);
+      const codeVirtualizer = await waitForElement(() => {
+        const current = document.querySelector<HTMLElement>(".file-preview-virtualizer");
+        return current !== previousCodeVirtualizer ? current : null;
+      }, "Unable to find the virtualized file preview.");
       expect(codeVirtualizer.querySelector("diffs-container")).not.toBeNull();
       expect(codeVirtualizer.classList.contains("overflow-auto")).toBe(true);
+      await vi.waitFor(
+        () => {
+          const fileHost = codeVirtualizer.querySelector<HTMLElement>("diffs-container");
+          const targetLine = fileHost?.shadowRoot?.querySelector<HTMLElement>('[data-line="4000"]');
+          const targetLineNumber = fileHost?.shadowRoot?.querySelector<HTMLElement>(
+            '[data-column-number="4000"]',
+          );
+          const previousLine =
+            fileHost?.shadowRoot?.querySelector<HTMLElement>('[data-line="3999"]');
+          const previousLineNumber = fileHost?.shadowRoot?.querySelector<HTMLElement>(
+            '[data-column-number="3999"]',
+          );
+          expect(codeVirtualizer.scrollTop).toBeGreaterThan(0);
+          expect(targetLine).not.toBeNull();
+          expect(previousLine).not.toBeNull();
+          expect(targetLine?.hasAttribute("data-file-link-reveal")).toBe(true);
+          expect(targetLineNumber?.hasAttribute("data-file-link-reveal")).toBe(true);
+          expect(targetLine?.hasAttribute("data-selected-line")).toBe(false);
+          expect(targetLineNumber?.hasAttribute("data-selected-line")).toBe(false);
+          expect(targetLineNumber?.querySelector("[data-gutter-utility-slot]")).toBeNull();
+          expect(window.getComputedStyle(targetLine!).backgroundColor).not.toBe(
+            window.getComputedStyle(previousLine!).backgroundColor,
+          );
+          expect(window.getComputedStyle(targetLineNumber!).backgroundColor).not.toBe(
+            window.getComputedStyle(previousLineNumber!).backgroundColor,
+          );
+
+          const viewportRect = codeVirtualizer.getBoundingClientRect();
+          const lineRect = targetLine!.getBoundingClientRect();
+          expect(lineRect.top).toBeGreaterThanOrEqual(viewportRect.top);
+          expect(lineRect.bottom).toBeLessThanOrEqual(viewportRect.bottom);
+        },
+        { timeout: 8_000, interval: 16 },
+      );
+
+      const fileHost = codeVirtualizer.querySelector<HTMLElement>("diffs-container");
+      const targetLineNumber =
+        fileHost?.shadowRoot?.querySelector<HTMLElement>('[data-column-number="4000"]') ?? null;
+      const previousLineNumber =
+        fileHost?.shadowRoot?.querySelector<HTMLElement>('[data-column-number="3999"]') ?? null;
+      expect(targetLineNumber).not.toBeNull();
+      expect(previousLineNumber).not.toBeNull();
+
+      targetLineNumber!.dispatchEvent(
+        new PointerEvent("pointermove", {
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+          pointerType: "mouse",
+        }),
+      );
+      await vi.waitFor(() => {
+        expect(targetLineNumber?.querySelector("[data-gutter-utility-slot]")).not.toBeNull();
+      });
+
+      previousLineNumber!.dispatchEvent(
+        new PointerEvent("pointermove", {
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+          pointerType: "mouse",
+        }),
+      );
+      await vi.waitFor(() => {
+        expect(targetLineNumber?.querySelector("[data-gutter-utility-slot]")).toBeNull();
+        expect(previousLineNumber?.querySelector("[data-gutter-utility-slot]")).not.toBeNull();
+      });
+
+      codeVirtualizer.scrollTop = 0;
+      useRightPanelStore.getState().openFile(THREAD_REF, "src/large.ts", 4_000);
+      await vi.waitFor(
+        () => {
+          const fileHost = codeVirtualizer.querySelector<HTMLElement>("diffs-container");
+          const targetLine = fileHost?.shadowRoot?.querySelector<HTMLElement>('[data-line="4000"]');
+          expect(targetLine).not.toBeNull();
+          expect(targetLine?.hasAttribute("data-file-link-reveal")).toBe(true);
+          expect(targetLine?.hasAttribute("data-selected-line")).toBe(false);
+          expect(codeVirtualizer.scrollTop).toBeGreaterThan(0);
+        },
+        { timeout: 8_000, interval: 16 },
+      );
     } finally {
       await mounted.cleanup();
     }

apps/web/src/components/ChatView.tsx

@@ -1292,6 +1292,8 @@ function ChatViewContent(props: ChatViewProps) {
   const activeRightPanelSurface = useRightPanelStore((store) =>
     selectActiveRightPanelSurface(store.byThreadKey, activeThreadRef),
   );
+  const activeFileSurface =
+    activeRightPanelSurface?.kind === "file" ? activeRightPanelSurface : null;
   const activePreviewState = usePreviewStateStore((state) =>
     selectThreadPreviewState(state.byThreadKey, activeThreadRef),
   );
@@ -4768,6 +4770,8 @@ function ChatViewContent(props: ChatViewProps) {
           relativePath={
             activeRightPanelSurface.kind === "file" ? activeRightPanelSurface.relativePath : null
           }
+          revealLine={activeFileSurface?.revealLine ?? null}
+          revealRequestId={activeFileSurface?.revealRequestId ?? 0}
           onOpenFile={openFileSurface}
           onPendingChange={handleFilePendingChange}
         />