Nan Gao 73e3699347
feat(frontend): render markdown artifacts in the "open in new window" view (#5056)
* feat(frontend): render markdown artifacts in the new window

The artifacts panel's "open in new window" action handed the browser the
raw Gateway response. For markdown that is a `text/markdown` body the
browser can only show as source, so the new window was a text dump rather
than a reader.

Route markdown artifacts to a new `/artifacts/view` page that renders them
with the same components the panel uses (SafeStreamdown + the artifact
rehype chain + citation links/panel), including the truncated-preview
banner and its "load full file" action. Everything else keeps the raw
Gateway URL — notably HTML/SVG, which the Gateway deliberately serves as a
download so active content never executes in the application origin.

- `core/artifacts/viewer.ts` centralizes which stored artifacts are
  markdown (`.skill` archives included, since they hold a SKILL.md), so
  the panel and the viewer route cannot drift.
- `ArtifactFilePreview` and its siblings move out of
  `artifact-file-detail.tsx` into `artifact-file-preview.tsx`; otherwise
  the standalone route would pull the CodeMirror editor into its bundle.
- The window title comes from the route's `generateMetadata`, not
  `document.title`, which the App Router overwrites after hydration.
- The viewer reads content through `useStandaloneArtifactContent`, which
  shares `useArtifactContent`'s query key but not its `useThread`
  dependency, since a detached window has no thread context.

Claude-Session: https://claude.ai/code/session_013AiCrC5SBc3HdFYNxsp1EC

* fix(frontend): keep the artifact target across re-authentication

Review found the standalone viewer unrecoverable from an expired session.
The window's target lives entirely in `?path=...&thread_id=...`, and both
auth paths dropped it:

- The layout guard redirected to `/login` with no `next` at all. A layout
  cannot read `searchParams`, so the guard moves into the page, which can
  — and rebuilds the full viewer address for `next`. The layout loses its
  AuthProvider along the way: nothing under this route reads `useAuth`,
  and the guard now makes a single `getServerSideUser` call per request.
- The shared fetch wrapper built `next` from `window.location.pathname`,
  which silently truncated the query string. It now carries `search` too,
  so any route holding state in the query survives a 401, not just this
  one. `validateAuthNextPath` already accepts a query string.

`buildArtifactViewerURL` is split out of `resolveArtifactOpenURL`: the
guard needs the route itself, never the Gateway fallback that the latter
takes for non-markdown targets.

Tests: the login round trip (unit — the rebuilt URL survives
`validateAuthNextPath` and parses back to the same target), the fetch
wrapper preserving the query on 401 (unit), and the expired-session
window reaching `/login` with the artifact intact (E2E). The E2E asserts
on the popup's navigation *requests*, since `(auth)/layout` answers
`/login` with a server redirect under DEER_FLOW_AUTH_DISABLED and no
navigation commits.

`tests/unit/core/models/api.test.ts` stubbed `window.location` without
`search`; a real Location always has it.

Claude-Session: https://claude.ai/code/session_013AiCrC5SBc3HdFYNxsp1EC

* fix(frontend): keep public showcase artifacts out of the auth gate

Review found that the viewer's access check regressed `/showcase`. Those
pages render with `isMock`, their artifacts are served by the
unauthenticated demo route, and the raw artifact URL this window replaced
stayed public — so gating the window unconditionally bounced every
logged-out showcase visitor to /login for a document that is already
public.

`requiresAuthenticatedViewer` exempts a mock target only when
`resolveStaticDemoArtifact` would actually serve it. The allowlist is the
authority rather than the flag: `mock=true` is caller-supplied, so a
target the demo route answers with 404 — a non-allowlisted path, or a
thread that is not a demo thread — still needs a session.

Covered in `tests/e2e-auth/`, since the default E2E config disables auth
and cannot see this: a public showcase artifact renders without a
session, while a non-allowlisted path and a missing mock flag both land
on /login. Verified the positive case goes red without the exemption.

Claude-Session: https://claude.ai/code/session_013AiCrC5SBc3HdFYNxsp1EC
2026-08-29 11:07:16 +08:00

253 lines
7.7 KiB
TypeScript

import { describe, expect, test } from "@rstest/core";
import { urlOfArtifact } from "@/core/artifacts/utils";
import {
ARTIFACT_VIEWER_ROUTE,
artifactViewerTitle,
buildArtifactViewerURL,
requiresAuthenticatedViewer,
parseArtifactViewerParams,
parseArtifactViewerQuery,
resolveArtifactOpenURL,
} from "@/core/artifacts/viewer";
import { validateAuthNextPath } from "@/core/auth/next-path";
import { buildLoginUrl } from "@/core/auth/types";
const threadId = "7cfa5f8f-a2f8-47ad-acbd-da7137baf990";
function viewerParams(url: string) {
expect(url.startsWith(`${ARTIFACT_VIEWER_ROUTE}?`)).toBe(true);
return new URLSearchParams(url.slice(url.indexOf("?") + 1));
}
describe("resolveArtifactOpenURL", () => {
test("routes markdown artifacts to the standalone viewer", () => {
const filepath = "/mnt/user-data/outputs/report.md";
const params = viewerParams(resolveArtifactOpenURL({ filepath, threadId }));
expect(params.get("path")).toBe(filepath);
expect(params.get("thread_id")).toBe(threadId);
expect(params.get("mock")).toBe(null);
});
test("routes skill archives to the viewer because they render as markdown", () => {
const filepath = "/mnt/user-data/outputs/my-helper.skill";
const params = viewerParams(resolveArtifactOpenURL({ filepath, threadId }));
expect(params.get("path")).toBe(filepath);
});
test("keeps html artifacts on the raw gateway URL so they stay downloads", () => {
const filepath = "/mnt/user-data/outputs/page.html";
expect(resolveArtifactOpenURL({ filepath, threadId })).toBe(
urlOfArtifact({ filepath, threadId }),
);
});
test("keeps non-markdown text artifacts on the raw gateway URL", () => {
const filepath = "/mnt/user-data/outputs/notes.mdx";
expect(resolveArtifactOpenURL({ filepath, threadId })).toBe(
urlOfArtifact({ filepath, threadId }),
);
});
test("keeps binary artifacts on the raw gateway URL", () => {
const filepath = "/mnt/user-data/outputs/diagram.png";
expect(resolveArtifactOpenURL({ filepath, threadId })).toBe(
urlOfArtifact({ filepath, threadId }),
);
});
test("carries the mock flag into the viewer URL", () => {
const params = viewerParams(
resolveArtifactOpenURL({
filepath: "/mnt/user-data/outputs/report.md",
threadId,
isMock: true,
}),
);
expect(params.get("mock")).toBe("true");
});
test("carries the mock flag into the raw URL for non-markdown artifacts", () => {
const filepath = "/mnt/user-data/outputs/diagram.png";
expect(resolveArtifactOpenURL({ filepath, threadId, isMock: true })).toBe(
urlOfArtifact({ filepath, threadId, isMock: true }),
);
});
});
describe("parseArtifactViewerParams", () => {
test("round-trips a URL built by resolveArtifactOpenURL", () => {
const filepath = "/mnt/user-data/outputs/sub dir/rapport été.md";
const url = resolveArtifactOpenURL({ filepath, threadId, isMock: true });
expect(parseArtifactViewerParams(viewerParams(url))).toEqual({
filepath,
threadId,
isMock: true,
});
});
test("defaults the mock flag to false when absent", () => {
const params = new URLSearchParams({
path: "/mnt/user-data/outputs/report.md",
thread_id: threadId,
});
expect(parseArtifactViewerParams(params)?.isMock).toBe(false);
});
test("returns null when the path is missing", () => {
const params = new URLSearchParams({ thread_id: threadId });
expect(parseArtifactViewerParams(params)).toBe(null);
});
test("returns null when the thread id is missing", () => {
const params = new URLSearchParams({
path: "/mnt/user-data/outputs/report.md",
});
expect(parseArtifactViewerParams(params)).toBe(null);
});
test("returns null when the path is blank", () => {
const params = new URLSearchParams({ path: " ", thread_id: threadId });
expect(parseArtifactViewerParams(params)).toBe(null);
});
});
describe("parseArtifactViewerQuery", () => {
test("reads the Next.js searchParams record shape", () => {
expect(
parseArtifactViewerQuery({
path: "/mnt/user-data/outputs/report.md",
thread_id: threadId,
mock: "true",
}),
).toEqual({
filepath: "/mnt/user-data/outputs/report.md",
threadId,
isMock: true,
});
});
test("uses the first value when a parameter is repeated", () => {
expect(
parseArtifactViewerQuery({
path: ["/mnt/user-data/outputs/first.md", "/etc/passwd"],
thread_id: threadId,
})?.filepath,
).toBe("/mnt/user-data/outputs/first.md");
});
test("returns null when the record carries no target", () => {
expect(parseArtifactViewerQuery({})).toBe(null);
expect(parseArtifactViewerQuery(undefined)).toBe(null);
});
});
describe("artifactViewerTitle", () => {
test("names the window after the artifact file", () => {
expect(artifactViewerTitle("/mnt/user-data/outputs/report.md")).toBe(
"report.md - DeerFlow",
);
});
test("falls back to the product name without a target", () => {
expect(artifactViewerTitle(undefined)).toBe("DeerFlow");
});
});
describe("buildArtifactViewerURL", () => {
test("addresses the viewer route for any target, markdown or not", () => {
// resolveArtifactOpenURL sends non-markdown to the Gateway; rebuilding the
// window's own address must not follow that branch.
const params = viewerParams(
buildArtifactViewerURL({
filepath: "/mnt/user-data/outputs/diagram.png",
threadId,
isMock: false,
}),
);
expect(params.get("path")).toBe("/mnt/user-data/outputs/diagram.png");
});
});
describe("returning to the viewer after re-authentication", () => {
test("survives the login redirect and resolves back to the same artifact", () => {
const target = {
filepath: "/mnt/user-data/outputs/rapport été.md",
threadId,
isMock: true,
};
const loginUrl = buildLoginUrl(buildArtifactViewerURL(target));
const nextPath = new URLSearchParams(
loginUrl.slice(loginUrl.indexOf("?") + 1),
).get("next");
// The login page drops a `next` it considers unsafe — notably anything
// containing a raw colon — which would strand the window on /workspace.
expect(validateAuthNextPath(nextPath)).toBe(nextPath);
expect(parseArtifactViewerParams(viewerParams(nextPath!))).toEqual(target);
});
});
describe("requiresAuthenticatedViewer", () => {
// A real allowlisted showcase artifact — see STATIC_DEMO_ARTIFACTS.
const demoThreadId = "3823e443-4e2b-4679-b496-a9506eae462b";
const demoFilepath = "/mnt/user-data/outputs/fei-fei-li-podcast-timeline.md";
test("lets a logged-out visitor read a public showcase artifact", () => {
expect(
requiresAuthenticatedViewer({
filepath: demoFilepath,
threadId: demoThreadId,
isMock: true,
}),
).toBe(false);
});
test("gates a mock target the public demo route does not serve", () => {
// `mock=true` is caller-supplied, so the allowlist has to be the authority.
expect(
requiresAuthenticatedViewer({
filepath: "/mnt/user-data/outputs/private-notes.md",
threadId: demoThreadId,
isMock: true,
}),
).toBe(true);
});
test("gates a mock target on a thread that is not a demo thread", () => {
expect(
requiresAuthenticatedViewer({
filepath: demoFilepath,
threadId: "7cfa5f8f-0000-0000-0000-000000000000",
isMock: true,
}),
).toBe(true);
});
test("gates the same artifact when the mock flag is absent", () => {
expect(
requiresAuthenticatedViewer({
filepath: demoFilepath,
threadId: demoThreadId,
isMock: false,
}),
).toBe(true);
});
});