Report
'; + const host = document.createElement("div"); const root = createRoot(host); + await act(async () => root.render(${id}
`); + const host = document.createElement("div"); const root = createRoot(host); + const panel = (id: string) =>{title}
- {markdown ? ( -
-
-
-
- ) : null}
+ {markdown || html || csv ?
+
@@ -99,5 +102,5 @@ export function TaskAttachmentPanel({ issueId, attachmentId }: { issueId: string
);
}
if (content.data === undefined) return
{text.length === 0 ? {text}
+ : renderCsv ? {text}
:
File is empty.
- : markdown && !raw ?{text}}
Loading file…
; - return
+
{
+ it("handles BOM, CRLF, quoted commas, escaped quotes and multiline cells", () => {
+ expect(parseCsv('\uFEFFName,Notes,Amount\r\n"Lee, Sam","Said ""hello""\nagain",12\r\n')).toEqual([
+ ["Name", "Notes", "Amount"], ["Lee, Sam", 'Said "hello"\nagain', "12"],
+ ]);
+ });
+ it("preserves trailing empty fields, blank records and uneven rows", () => {
+ expect(parseCsv("a,b\n1,\n\n2,3,4")).toEqual([["a", "b"], ["1", ""], [""], ["2", "3", "4"]]);
+ expect(parseCsv("")).toEqual([]);
+ expect(parseCsv("a,b")).toEqual([["a", "b"]]);
+ });
+ it("reports incomplete quoted fields", () => {
+ expect(() => parseCsv('a,b\n"unfinished')).toThrow("incomplete");
+ });
+ it("recognizes CSV filenames and media types", () => {
+ expect(isCsvFile("EXPORT.CSV", "application/octet-stream")).toBe(true);
+ expect(isCsvFile("download", "text/csv; charset=utf-8")).toBe(true);
+ expect(isCsvFile("notes.txt", "text/plain")).toBe(false);
+ });
+});
diff --git a/ui/src/lib/csv-preview.ts b/ui/src/lib/csv-preview.ts
new file mode 100644
index 00000000000..a53b29bbd74
--- /dev/null
+++ b/ui/src/lib/csv-preview.ts
@@ -0,0 +1,29 @@
+export function isCsvFile(filename: string, contentType = "") {
+ return /\.csv$/i.test(filename) || contentType.split(";")[0].trim().toLowerCase() === "text/csv";
+}
+
+/** Parse comma-separated records, preserving quoted newlines and escaped quotes. */
+export function parseCsv(text: string): string[][] {
+ const source = text.replace(/^\uFEFF/, "");
+ if (!source) return [];
+ const rows: string[][] = [];
+ let row: string[] = [];
+ let field = "";
+ let quoted = false;
+ for (let i = 0; i < source.length; i++) {
+ const char = source[i];
+ if (char === '"') {
+ if (quoted && source[i + 1] === '"') { field += '"'; i++; }
+ else if (quoted || field === "") quoted = !quoted;
+ else field += char;
+ } else if (!quoted && char === ",") {
+ row.push(field); field = "";
+ } else if (!quoted && (char === "\n" || char === "\r")) {
+ row.push(field); rows.push(row); row = []; field = "";
+ if (char === "\r" && source[i + 1] === "\n") i++;
+ } else field += char;
+ }
+ if (quoted) throw new Error("A quoted field is incomplete. Switch to raw view to inspect the file.");
+ if (field !== "" || row.length || !/[\r\n]$/.test(source)) { row.push(field); rows.push(row); }
+ return rows;
+}
diff --git a/ui/src/lib/html-preview.test.ts b/ui/src/lib/html-preview.test.ts
new file mode 100644
index 00000000000..f9c9d5064ec
--- /dev/null
+++ b/ui/src/lib/html-preview.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { HTML_PREVIEW_CSP, htmlPreviewDocument, isHtmlPreview } from "./html-preview";
+import { isTextAttachment } from "./issue-attachments";
+
+describe("HTML artifact previews", () => {
+ it("recognizes HTML MIME types and filenames including generic uploaded files", () => {
+ for (const [type, name] of [["text/html; charset=utf-8", "report"], ["TEXT/HTML", "report"], ["application/xhtml+xml", "report"], ["application/octet-stream", "report.HTML"], ["text/plain", "report.htm"]]) {
+ expect(isHtmlPreview(type, name)).toBe(true);
+ expect(isTextAttachment({ contentType: type, originalFilename: name })).toBe(true);
+ }
+ expect(isHtmlPreview("text/plain", "notes.txt")).toBe(false);
+ expect(isHtmlPreview("text/markdown", "report.md")).toBe(false);
+ });
+ it("puts the trusted policy before adversarial complete documents without parsing in the host DOM", () => {
+ const html = '';
+ const doc = htmlPreviewDocument(html);
+ expect(doc.indexOf(`content="${HTML_PREVIEW_CSP}"`)).toBeLessThan(doc.indexOf(html));
+ expect(doc).toContain("connect-src 'none'");
+ expect(doc).toContain("form-action 'none'");
+ expect(doc).toContain("base-uri 'none'");
+ expect(doc).toContain("frame-src 'none'");
+ expect(doc).not.toContain("script-src 'self'");
+ expect(doc).not.toContain("unsafe-eval");
+ });
+});
diff --git a/ui/src/lib/html-preview.ts b/ui/src/lib/html-preview.ts
new file mode 100644
index 00000000000..6a906f83593
--- /dev/null
+++ b/ui/src/lib/html-preview.ts
@@ -0,0 +1,28 @@
+/** HTML previews are documents, never nodes in the Paperclip DOM. */
+export function isHtmlPreview(contentType: string | null | undefined, filename: string | null | undefined) {
+ const type = contentType?.toLowerCase().split(";")[0].trim();
+ return type === "text/html" || type === "application/xhtml+xml" || /\.html?$/i.test(filename ?? "");
+}
+
+// Inline scripts support self-contained reports/charts. No origin privileges,
+// external scripts, API calls, forms, embeds, or remote subresources are granted.
+// Multiple CSPs intersect; artifact markup cannot loosen this first policy.
+export const HTML_PREVIEW_CSP = [
+ "default-src 'none'",
+ "script-src 'unsafe-inline'",
+ "style-src 'unsafe-inline'",
+ "img-src data:",
+ "font-src data:",
+ "media-src data:",
+ "connect-src 'none'",
+ "frame-src 'none'",
+ "object-src 'none'",
+ "base-uri 'none'",
+ "form-action 'none'",
+].join("; ");
+
+export function htmlPreviewDocument(html: string) {
+ // Install the policy before ANY untrusted markup is parsed. Do not parse the
+ // artifact in the host document (even detached DOMs can load resources).
+ return `${html}`;
+}
diff --git a/ui/src/lib/issue-attachments.ts b/ui/src/lib/issue-attachments.ts
index 31977a6891b..6d0c8d020d5 100644
--- a/ui/src/lib/issue-attachments.ts
+++ b/ui/src/lib/issue-attachments.ts
@@ -1,6 +1,7 @@
import type { IssueAttachment } from "@paperclipai/shared";
import { isMarkdownAttachmentContent } from "@paperclipai/shared";
import { isImageLikeOutput, isVideoLikeOutput } from "./issue-output";
+import { isHtmlPreview } from "./html-preview";
type AttachmentPathLike = {
contentPath: string;
@@ -47,6 +48,7 @@ export function isTextAttachment(attachment: {
}) {
const type = attachment.contentType.toLowerCase().split(";")[0].trim();
return isMarkdownAttachmentContent(attachment)
+ || isHtmlPreview(type, attachment.originalFilename)
|| type.startsWith("text/")
|| /^(application\/(json|xml|javascript|x-yaml|yaml)|application\/[\w.-]+\+json)$/.test(type)
|| (["", "application/octet-stream"].includes(type)
diff --git a/ui/storybook/stories/csv-preview.stories.tsx b/ui/storybook/stories/csv-preview.stories.tsx
new file mode 100644
index 00000000000..40dc7e2b302
--- /dev/null
+++ b/ui/storybook/stories/csv-preview.stories.tsx
@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { TaskWorkspaceFilePanel } from "@/components/task-side-panel/TaskWorkspaceFilePanel";
+import { queryKeys } from "@/lib/queryKeys";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { TextAttachmentPreview } from "@/components/task-side-panel/TaskAttachmentPanel";
+
+const meta: Meta = {
+ title: "Components/CSV File Tab",
+ component: TextAttachmentPreview,
+ parameters: { layout: "fullscreen" },
+ decorators: [(Story) => ;
+export const RevenueExport: Story = {
+ args: {
+ title: "monthly-revenue.csv",
+ markdown: false,
+ csv: true,
+ downloadUrl: "data:text/csv,Month%2CRevenue%0AOctober%2C12800",
+ text: 'Month,Customer,Plan,Revenue,Status,Notes\nOctober,"Acme, Inc.",Enterprise,12800,Active,"Expanded to 40 seats"\nOctober,Northstar Studio,Pro,2400,Active,"Annual renewal"\nOctober,Atlas Labs,Enterprise,9600,Active,"Includes onboarding"\nOctober,Juniper Design,Starter,480,Trial,"Review on Friday"\nSeptember,"Acme, Inc.",Enterprise,11200,Active,"32 seats"\nSeptember,Northstar Studio,Pro,2400,Active,"Annual renewal"\nSeptember,Atlas Labs,Pro,4800,Active,"Upgrade scheduled"\nSeptember,Juniper Design,Starter,480,Trial,"First month"',
+ },
+};
+export const Empty: Story = { args: { ...RevenueExport.args, text: "" } };
+export const Invalid: Story = { args: { ...RevenueExport.args, text: 'Name,Notes\nSam,"unfinished' } };
+
+// Exercise the same CSV renderer through the workspace tab query boundary.
+function WorkspaceCsvTab() {
+ const client = useQueryClient();
+ const payload = { kind: "workspace-file" as const, path: "reports/monthly-revenue.csv", workspace: "auto" as const, projectId: null, workspaceId: null, line: null, column: null };
+ const { kind: _kind, ...state } = payload;
+ useState(() => {
+ const resource = { kind: "file", provider: "git_worktree", title: "monthly-revenue.csv", displayPath: payload.path, workspaceLabel: "Report workspace", workspaceKind: "execution_workspace", workspaceId: "csv-story-workspace", contentType: "text/csv", byteSize: 512, previewKind: "text", capabilities: { preview: true, download: true, listChildren: false } };
+ client.setQueryData(queryKeys.issues.fileResource("csv-story-task", state), resource);
+ client.setQueryData(queryKeys.issues.fileResourceContent("csv-story-task", state), { resource, content: { encoding: "utf8", data: RevenueExport.args!.text } });
+ return true;
+ });
+ return
+
+
+ ;
+}
+
+const meta = {
+ title: "HTML artifacts/01 Preview",
+ component: Preview,
+ args: { html: reportHtml, title: "repository-usage.html", width: 800 },
+ parameters: { layout: "fullscreen", docs: { description: { component: "Production attachment viewer. Inline CSS and JavaScript run in an opaque-origin sandbox. Remote dependencies and API requests are blocked. The original file is available through Download or Raw." }, story: { inline: false } } },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj;
+export const InteractiveReport: Story = {};
+export const SecurityChecks: Story = { args: { html: securityHtml, title: "isolation-checks.html" } };
+export const Empty: Story = { args: { html: "", title: "empty.html" } };
+export const Mobile: Story = { args: { width: 360 }, globals: { viewport: { value: "mobile", isRotated: false } } };
+export const Light: Story = { globals: { theme: "light" } };
diff --git a/ui/storybook/stories/html-artifacts/02-workspace.stories.tsx b/ui/storybook/stories/html-artifacts/02-workspace.stories.tsx
new file mode 100644
index 00000000000..eedb1f17d0d
--- /dev/null
+++ b/ui/storybook/stories/html-artifacts/02-workspace.stories.tsx
@@ -0,0 +1,40 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ResolvedWorkspaceResource } from "@paperclipai/shared";
+import { TaskWorkspaceFilePanel } from "@/components/task-side-panel/TaskWorkspaceFilePanel";
+import { FileViewerSheet } from "@/components/FileViewerSheet";
+import { FileViewerProvider } from "@/context/FileViewerContext";
+import { queryKeys } from "@/lib/queryKeys";
+import { reportHtml } from "./fixtures";
+
+const issueId = "html-workspace-story";
+const state = { path: "reports/repository-usage.html", workspace: "project" as const, workspaceId: null, projectId: null, line: null, column: null };
+
+function Workspace({ sheet = false }: { sheet?: boolean }) {
+ const [client] = useState(() => {
+ const cache = new QueryClient({ defaultOptions: { queries: { staleTime: Infinity, retry: false } } });
+ const resource: ResolvedWorkspaceResource = {
+ kind: "file", provider: "local_fs", title: "repository-usage.html", displayPath: state.path,
+ workspaceLabel: "Research workspace", workspaceKind: "project_workspace", workspaceId: "research-workspace",
+ contentType: "text/html", byteSize: reportHtml.length, previewKind: "text", denialReason: null,
+ capabilities: { preview: true, download: true, listChildren: false },
+ };
+ cache.setQueryData(queryKeys.issues.fileResource(issueId, state), resource);
+ cache.setQueryData(queryKeys.issues.fileResourceContent(issueId, state), { resource, content: { encoding: "utf8", data: reportHtml } });
+ return cache;
+ });
+ return
+
+ {sheet ?
+ }
+
+ ;
+export default meta;
+type Story = StoryObj;
+export const TaskPanel: Story = {};
+export const FileSheet: Story = { args: { sheet: true } };
+export const Mobile: Story = { globals: { viewport: { value: "mobile", isRotated: false } } };
diff --git a/ui/storybook/stories/html-artifacts/03-task-journey.stories.tsx b/ui/storybook/stories/html-artifacts/03-task-journey.stories.tsx
new file mode 100644
index 00000000000..80458df3e00
--- /dev/null
+++ b/ui/storybook/stories/html-artifacts/03-task-journey.stories.tsx
@@ -0,0 +1,84 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { IssueAttachment } from "@paperclipai/shared";
+import { Routes, Route } from "@/lib/router";
+import { Layout } from "@/components/Layout";
+import { TaskChatBubble } from "@/components/task-chat/TaskChatBubble";
+import { TaskSidePanel } from "@/components/task-side-panel/TaskSidePanel";
+import { IssueArtifactFile } from "@/components/artifacts/IssueArtifactCard";
+import { TextAttachmentContext } from "@/context/TextAttachmentContext";
+import { PluginLauncherProvider } from "@/plugins/launchers";
+import { queryKeys } from "@/lib/queryKeys";
+import { createIssue, storybookAgents } from "../../fixtures/paperclipData";
+import { reportHtml } from "./fixtures";
+import reportDownload from "./report.html?url";
+
+const issue = createIssue({ id: "html-artifact-journey", identifier: "DEMO-101", title: "Find popular repositories that use Paperclip a lot", status: "done", completedAt: new Date("2026-10-07T12:54:00Z"), currentExecutionWorkspace: null, executionWorkspaceId: null });
+const attachment: IssueAttachment = {
+ id: "html-usage-report", companyId: issue.companyId, issueId: issue.id, issueCommentId: null,
+ assetId: "html-usage-asset", provider: "local_disk", sha256: "storybook-fixture",
+ createdByAgentId: "agent-codex", createdByUserId: null, originatingRunId: null,
+ originalFilename: "repository-usage.html", objectKey: "repository-usage.html", contentType: "text/html",
+ byteSize: reportHtml.length, contentPath: "/api/attachments/html-usage-report/content",
+ downloadPath: reportDownload,
+ createdAt: new Date("2026-10-07T12:54:00Z"),
+ updatedAt: new Date("2026-10-07T12:54:00Z"),
+};
+
+function TaskJourney({ openInitially = false }: { openInitially?: boolean }) {
+ const [open, setOpen] = useState<{ id: string; title: string; requestId: number } | null>(() => openInitially ? { id: attachment.id, title: attachment.originalFilename!, requestId: 1 } : null);
+ const [client] = useState(() => {
+ const cache = new QueryClient({ defaultOptions: { queries: { staleTime: Infinity, retry: false } } });
+ cache.setQueryData(queryKeys.issues.attachments(issue.id), [attachment]);
+ cache.setQueryData(queryKeys.issues.workProducts(issue.id), []);
+ cache.setQueryData([...queryKeys.issues.documents(issue.id), "list"], []);
+ cache.setQueryData([...queryKeys.issues.documents(issue.id), "plan"], null);
+ cache.setQueryData(queryKeys.issues.runs(issue.id), []);
+ cache.setQueryData(queryKeys.agents.list(issue.companyId), storybookAgents);
+ cache.setQueryData(["task-text-attachment", issue.id, attachment.id], reportHtml);
+ window.localStorage.removeItem(`paperclip:task-side-panel:v1:storybook-html:${issue.companyId}`);
+ return cache;
+ });
+ return
+ setOpen({ id, title, requestId: Date.now() })}>
+
+ ;
+}
+
+function Journey(props: { openInitially?: boolean }) {
+ return ;
+export default meta;
+type Story = StoryObj;
+export const OpenFromTask: Story = {};
+export const ReportOpen: Story = { args: { openInitially: true } };
+export const Mobile: Story = { args: { openInitially: true }, globals: { viewport: { value: "mobile", isRotated: false } } };
diff --git a/ui/storybook/stories/html-artifacts/fixtures.ts b/ui/storybook/stories/html-artifacts/fixtures.ts
new file mode 100644
index 00000000000..b961083ecf4
--- /dev/null
+++ b/ui/storybook/stories/html-artifacts/fixtures.ts
@@ -0,0 +1,27 @@
+import reportHtml from "./report.html?raw";
+export { reportHtml };
+
+export const securityHtml = `
+
+
+
+
+
+`;
diff --git a/ui/storybook/stories/html-artifacts/report.html b/ui/storybook/stories/html-artifacts/report.html
new file mode 100644
index 00000000000..336ca4125b1
--- /dev/null
+++ b/ui/storybook/stories/html-artifacts/report.html
@@ -0,0 +1,29 @@
+
+
+Popular repositories with repeated Paperclip credit
+
+
+Illustrative Storybook snapshot. Credits measure attribution, not unique users.
+
{announcement}
+
+
+
+ {}} fileTabsEnabled={false} openAttachment={open} />
+
+
+ {issue.title}
+HTML isolation checks
Research report · October 7, 2026
+Popular repositories that use Paperclip a lot
+Compare repository popularity with repeated, attributed usage. Adjust the weighting to explore the ranking.
+
+
+
+
+
+| Rank | Repository | Stars | Credits | Score |
|---|