#5181 · Open Markdown tabs discard reading offsets

// @vitest-environment jsdom

import { useState } from "react";
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { PanelGroup } from "react-resizable-panels";
import { TooltipProvider } from "@bb/shared-ui/tooltip";
import {
  createBrowserFixedPanelTab,
  createWorkspaceFilePreviewFixedPanelTab,
} from "@/lib/fixed-panel-tabs-state";
import { createQueryClientTestHarness } from "@/test/queryClientTestHarness";
import {
  ThreadSecondaryPanel,
  type SecondaryPanelRenderableTab,
} from "./ThreadSecondaryPanel";
import { WorkspaceFilePreviewTabContent } from "./ThreadSecondaryPanelTabContent";

const loading = vi.hoisted(() => ({ current: false }));

vi.mock("@/hooks/queries/environment-queries", () => ({
  useEnvironment: () => ({ data: { path: "/workspace" } }),
  useEnvironmentDiffFiles: () => ({ data: undefined, isLoading: false }),
  useEnvironmentWorkStatus: () => ({ data: undefined }),
  useEnvironmentFilePreview: (_environmentId: string, path: string) => ({
    data: loading.current
      ? undefined
      : {
          kind: "text",
          content:
            path === "short.md"
              ? "# Short"
              : "# Reading\n\n[Visit](https://example.invalid/)\n\n".repeat(60),
          mimeType: "text/markdown",
          name: path,
          path,
          url: `/content/${path}`,
        },
    isLoading: loading.current,
    isFetching: false,
    error: null,
    refetch: () => {},
  }),
}));

const noop = () => {};

function Harness() {
  const documents = ["reading.md", "short.md"].map((path) =>
    createWorkspaceFilePreviewFixedPanelTab({
      environmentId: "env_scroll",
      projectId: "proj_scroll",
      tab: {
        path,
        lineRange: null,
        source: { kind: "working-tree" },
        statusLabel: null,
      },
    }),
  );
  const [browserTab] = useState(() =>
    createBrowserFixedPanelTab({ environmentId: null, url: "about:blank" }),
  );
  const [activeId, setActiveId] = useState(documents[0].id);
  const [closed, setClosed] = useState(false);
  const tabs: SecondaryPanelRenderableTab[] = documents
    .filter((document) => !closed || document.path !== "reading.md")
    .map((document) => ({
      tab: document,
      label: document.path,
      leadingVisual: null,
      statusLabel: null,
      onClose: () => {
        setClosed(true);
        setActiveId(browserTab.id);
      },
      onSelect: () => setActiveId(document.id),
      renderContent: () => (
        <WorkspaceFilePreviewTabContent
          activePath={document.path}
          environmentId={document.environmentId}
          isPanelOpen
          lineRange={null}
          source={document.source}
          statusLabel={null}
          markdownLinkRouting={{
            onOpenLink: () => {
              setActiveId(browserTab.id);
              return true;
            },
          }}
        />
      ),
    }));
  tabs.push({
    tab: browserTab,
    label: "Browser",
    leadingVisual: null,
    statusLabel: null,
    onClose: noop,
    onSelect: () => setActiveId(browserTab.id),
    renderContent: () => null,
  });
  return (
    <>
      <button
        onClick={() => {
          setClosed(true);
          setActiveId(browserTab.id);
        }}
      >
        Close document
      </button>
      <button
        onClick={() => {
          setClosed(false);
          setActiveId(documents[0].id);
        }}
      >
        Reopen document
      </button>
      <PanelGroup direction="horizontal">
        <ThreadSecondaryPanel
          activeTab={tabs.find((tab) => tab.tab.id === activeId)?.tab ?? null}
          canUseGitUi={false}
          fixedTabs={[]}
          tabs={tabs}
          isOpen
          metadataContent={null}
          onClose={noop}
          onCollapse={noop}
          onTabReorder={noop}
          onOpenNewTab={noop}
          onPanelFocus={noop}
          onToggleConversationCollapse={noop}
          isConversationCollapsed={false}
          renderAsDrawer={false}
          renderBrowserDeck={(active) =>
            active ? <div>Browser content</div> : null
          }
        />
      </PanelGroup>
    </>
  );
}

function renderHarness() {
  const { wrapper: Wrapper } = createQueryClientTestHarness();
  const content = () => (
    <Wrapper>
      <TooltipProvider>
        <Harness />
      </TooltipProvider>
    </Wrapper>
  );
  return { ...render(content()), content };
}

function scrollContainer() {
  const container = document.querySelector<HTMLDivElement>(
    "[data-file-preview-scroll-container]",
  );
  if (!container) throw new Error("Missing file scroll container");
  return container;
}

function scrollTo(position: number) {
  scrollContainer().scrollTop = position;
  fireEvent.scroll(scrollContainer());
}

function selectTab(name: string) {
  fireEvent.click(screen.getByRole("button", { name }));
}

afterEach(() => {
  cleanup();
  loading.current = false;
  window.localStorage.clear();
});

describe("Markdown reading position in open secondary-panel tabs", () => {
  it.each(["tab", "hyperlink"])(
    "retains position after leaving through a %s",
    (navigation) => {
      renderHarness();
      scrollTo(780);
      if (navigation === "tab") selectTab("Browser");
      else fireEvent.click(screen.getAllByRole("link", { name: "Visit" })[0]);
      expect(
        document.querySelector("[data-file-preview-scroll-container]"),
      ).toBeNull();
      selectTab("reading.md");
      expect(scrollContainer().scrollTop).toBe(780);
    },
  );

  it("retains separate document positions when the outgoing layout clamps", () => {
    renderHarness();
    scrollTo(780);
    selectTab("short.md");
    scrollTo(0);
    selectTab("reading.md");
    expect(scrollContainer().scrollTop).toBe(780);
    scrollTo(920);
    selectTab("short.md");
    expect(scrollContainer().scrollTop).toBe(0);
    selectTab("reading.md");
    expect(scrollContainer().scrollTop).toBe(920);
  });

  it("waits for ready Markdown content before restoring", () => {
    const harness = renderHarness();
    scrollTo(780);
    selectTab("Browser");
    loading.current = true;
    selectTab("reading.md");
    scrollTo(0);
    loading.current = false;
    harness.rerender(harness.content());
    expect(scrollContainer().scrollTop).toBe(780);
  });

  it("forgets a closed document even when reopening uses the same tab id", () => {
    renderHarness();
    scrollTo(780);
    fireEvent.click(screen.getByRole("button", { name: "Close document" }));
    fireEvent.click(screen.getByRole("button", { name: "Reopen document" }));
    expect(scrollContainer().scrollTop).toBe(0);
  });
});

<!doctype html><html><head><title>Secondary-panel scroll verification</title></head><body><div id="root"></div><script type="module" src="/main.tsx"></script></body></html>

import { useState } from "react";
import { createRoot } from "react-dom/client";
import { PanelGroup } from "react-resizable-panels";
import { TooltipProvider } from "@bb/shared-ui/tooltip";
import { createQueryClientTestHarness } from "../src/test/queryClientTestHarness";
import { ThreadSecondaryPanel, type SecondaryPanelRenderableTab } from "../src/components/secondary-panel/ThreadSecondaryPanel";
import { WorkspaceFilePreviewTabContent } from "../src/components/secondary-panel/ThreadSecondaryPanelTabContent";
import { createBrowserFixedPanelTab, createWorkspaceFilePreviewFixedPanelTab } from "../src/lib/fixed-panel-tabs-state";
import "./style.css";

const noop = () => {};
const documents = ["reading.md", "short.md"].map((path) => createWorkspaceFilePreviewFixedPanelTab({
  environmentId: "env_repro", projectId: "proj_repro",
  tab: { path, lineRange: null, source: { kind: "working-tree" }, statusLabel: null },
}));
const browserTab = createBrowserFixedPanelTab({ environmentId: null, url: "about:blank" });
const { wrapper: Wrapper } = createQueryClientTestHarness();

function Reproduction() {
  const [activeId, setActiveId] = useState(documents[0].id);
  const [closed, setClosed] = useState(false);
  const [revision, setRevision] = useState(0);
  const tabs: SecondaryPanelRenderableTab[] = documents.filter((document) => !closed || document.path !== "reading.md").map((document) => ({
    tab: document, label: document.path, leadingVisual: null, statusLabel: null,
    onSelect: () => setActiveId(document.id), onClose: noop,
    renderContent: () => <WorkspaceFilePreviewTabContent activePath={document.path}
      environmentId={document.environmentId} isPanelOpen lineRange={null}
      source={document.source} statusLabel={null}
      markdownLinkRouting={{ onOpenLink: () => { setActiveId(browserTab.id); return true; } }} />,
  }));
  tabs.push({ tab: browserTab, label: "Browser", leadingVisual: null, statusLabel: null,
    onSelect: () => setActiveId(browserTab.id), onClose: noop, renderContent: () => null });
  return <div className="flex h-full flex-col" data-revision={revision}>
    <div className="flex gap-4 p-2">
      <button onClick={() => { setClosed(true); setActiveId(browserTab.id); }}>Close document</button>
      <button onClick={() => { setClosed(false); setActiveId(documents[0].id); }}>Reopen document</button>
      <button onClick={() => setRevision(revision + 1)}>Refresh fixture</button>
    </div>
    <div className="min-h-0 flex-1"><PanelGroup direction="horizontal">
      <ThreadSecondaryPanel activeTab={tabs.find((tab) => tab.tab.id === activeId)?.tab ?? null}
        canUseGitUi={false} fixedTabs={[]} tabs={tabs} isOpen metadataContent={null}
        onClose={noop} onCollapse={noop} onTabReorder={noop} onOpenNewTab={noop}
        onPanelFocus={noop} onToggleConversationCollapse={noop} isConversationCollapsed={false}
        renderAsDrawer={false} renderBrowserDeck={(active) => active ? <div>Loopback browser surface</div> : null} />
    </PanelGroup></div>
  </div>;
}

createRoot(document.getElementById("root")!).render(<Wrapper><TooltipProvider><Reproduction /></TooltipProvider></Wrapper>);

export * from "../src/hooks/queries/environment-queries";
export const useEnvironment = () => ({ data: { path: "/workspace" } });
export const useEnvironmentWorkStatus = () => ({ data: undefined });
export const useEnvironmentDiffFiles = () => ({ data: undefined, isLoading: false });
export const useEnvironmentFilePreview = (_environmentId: string, path: string) => ({
  data: new URLSearchParams(location.search).has("loading") ? undefined : {
    kind: "text", mimeType: "text/markdown", name: path, path, url: `/content/${path}`,
    content: path === "short.md" ? "# Short document" : Array.from({ length: 70 }, (_, index) =>
      `## Chapter ${index + 1}\n\nReading paragraph ${index + 1}. This text makes the document taller than the panel.\n\n`
    ).join("") + "[Visit browser](https://example.invalid/)",
  },
  isLoading: new URLSearchParams(location.search).has("loading"),
  isFetching: false, error: null, refetch: () => {},
});

@import "tailwindcss";
@import "../src/app.css";
@source "../src";
html, body, #root { height: 100%; margin: 0; }

import path from "node:path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import { sharedUiEnvSeam } from "../vite-shared-ui-seam";
import { forkablePluginPaths } from "../vite-forkable-plugin-paths";

export default defineConfig({
  root: __dirname,
  plugins: [sharedUiEnvSeam(), forkablePluginPaths(path.resolve(__dirname, "../src")), react(), tailwindcss()],
  resolve: { conditions: ["source"], alias: [
    { find: "@/hooks/queries/environment-queries", replacement: path.resolve(__dirname, "queries.ts") },
    { find: "@", replacement: path.resolve(__dirname, "../src") },
  ] },
  server: { host: "127.0.0.1", fs: { allow: [path.resolve(__dirname, "../../..")] } },
  build: { outDir: "dist", assetsInlineLimit: 10000000, rollupOptions: { output: { inlineDynamicImports: true } } },
});

import fs from "node:fs";
import path from "node:path";
import zlib from "node:zlib";

const dist = path.join(process.argv[2], "apps/app/.slopcop-repro/dist");
const assets = fs.readdirSync(path.join(dist, "assets"));
const script = fs.readFileSync(path.join(dist, "assets", assets.find(name => name.endsWith(".js"))), "utf8");
const style = fs.readFileSync(path.join(dist, "assets", assets.find(name => name.endsWith(".css"))), "utf8");
const html = '<!doctype html><html><head><meta charset="utf-8"><title>Secondary-panel scroll verification</title><style>' + style.replaceAll("</style", "<\\/style") + '</style></head><body><div id="root"></div><script type="module">' + script.replaceAll("</script", "<\\/script") + '</script></body></html>';
fs.writeFileSync(process.argv[3], zlib.gzipSync(html).toString("base64"));

const page = await browser.getPage("main");
const settle = () => page.evaluate(() => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve))));
const position = () => page.evaluate(() => document.querySelector("[data-file-preview-scroll-container]").scrollTop);
const scrollTo = async (offset) => {
  await page.evaluate(value => { document.querySelector("[data-file-preview-scroll-container]").scrollTop = value; }, offset);
  await settle();
};
const clickButton = async (name) => {
  const snapshot = await page.snapshot();
  const line = snapshot.split("\n").find(line => line.includes(`button "${name}"`));
  if (!line) throw new Error(`Button not found: ${name}`);
  const reference = line.match(/\[ref=(e\d+)\]/)[1];
  await page.click(`ref/${reference}`);
  await settle();
};
const results = [];
await scrollTo(780);
const before = await position();
await page.shot({ type: "jpeg", maxEdge: 960, quality: 70 });
await clickButton("Browser");
await page.shot({ type: "jpeg", maxEdge: 960, quality: 70 });
await clickButton("reading.md");
results.push({ scenario: "browser tab return", expected: before, actual: await position() });
await page.shot({ type: "jpeg", maxEdge: 960, quality: 70 });
await page.evaluate(() => { document.querySelector("[data-file-preview-scroll-container]").scrollTop = 999999; });
await settle();
const linkBefore = await position();
const snapshot = await page.snapshot();
const linkRef = snapshot.split("\n").find(line => line.includes('link "Visit browser"')).match(/\[ref=(e\d+)\]/)[1];
await page.click(`ref/${linkRef}`);
await settle();
await clickButton("reading.md");
results.push({ scenario: "hyperlink return", expected: linkBefore, actual: await position() });
await scrollTo(780);
await clickButton("short.md");
await clickButton("reading.md");
results.push({ scenario: "short document clamping", expected: 780, actual: await position() });
await scrollTo(780);
await clickButton("Browser");
await page.evaluate(() => history.replaceState(null, "", "?loading"));
await clickButton("reading.md");
await page.evaluate(() => history.replaceState(null, "", location.pathname));
await clickButton("Refresh fixture");
results.push({ scenario: "ready after loading", expected: 780, actual: await position() });
await scrollTo(780);
await clickButton("Close document");
await clickButton("Reopen document");
results.push({ scenario: "closed and reopened", expected: 0, actual: await position() });
console.log(JSON.stringify({ results, passed: results.filter(result => result.actual === result.expected).length, failed: results.filter(result => result.actual !== result.expected).length }));

{
  "results": [
    {
      "scenario": "browser tab return",
      "expected": 780,
      "actual": 0
    },
    {
      "scenario": "hyperlink return",
      "expected": 3980,
      "actual": 0
    },
    {
      "scenario": "short document clamping",
      "expected": 780,
      "actual": 0
    },
    {
      "scenario": "ready after loading",
      "expected": 780,
      "actual": 0
    },
    {
      "scenario": "closed and reopened",
      "expected": 0,
      "actual": 0
    }
  ],
  "passed": 1,
  "failed": 4
}

{
  "results": [
    {
      "scenario": "browser tab return",
      "expected": 780,
      "actual": 780
    },
    {
      "scenario": "hyperlink return",
      "expected": 3980,
      "actual": 3980
    },
    {
      "scenario": "short document clamping",
      "expected": 780,
      "actual": 780
    },
    {
      "scenario": "ready after loading",
      "expected": 780,
      "actual": 780
    },
    {
      "scenario": "closed and reopened",
      "expected": 0,
      "actual": 0
    }
  ],
  "passed": 5,
  "failed": 0
}