test(channels): pin artifact rows to per-file-type icons

The rows already use the same FileIcon the chat's file list does, so
markdown resolves to the markdown icon and HTML to the HTML one. Lock
that in — the row it replaced hardcoded a single clipboard glyph, and
nothing else would catch a regression back to a generic icon.

Generated-By: PostHog Code
Task-Id: 8d187d00-0633-4706-8443-f79130b65f9f

Author: puemos

packages/ui/src/features/canvas/components/TaskArtifactsList.test.tsx

@@ -4,16 +4,14 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const mocks = vi.hoisted(() => ({
   runs: [] as TaskRun[],
-  presignTaskRunArtifact: vi.fn(),
+  openArtifactTab: vi.fn(),
 }));
 
 vi.mock("@posthog/ui/features/canvas/hooks/useTaskRuns", () => ({
   useTaskRuns: () => ({ runs: mocks.runs, isLoading: false }),
 }));
-vi.mock("@posthog/ui/features/auth/authClient", () => ({
-  useOptionalAuthenticatedClient: () => ({
-    presignTaskRunArtifact: mocks.presignTaskRunArtifact,
-  }),
+vi.mock("@posthog/ui/features/panels/panelLayoutStore", () => ({
+  usePanelLayoutStore: () => mocks.openArtifactTab,
 }));
 vi.mock("@posthog/ui/features/git-interaction/usePrArtifact", () => ({
   usePrArtifact: (url: string) => ({
@@ -66,8 +64,7 @@ function outputFile(
 describe("TaskArtifactsList", () => {
   beforeEach(() => {
     mocks.runs = [run("run-1", { prNumber: 1 }), run("run-2", { prNumber: 2 })];
-    mocks.presignTaskRunArtifact.mockReset();
-    mocks.presignTaskRunArtifact.mockResolvedValue("https://signed.example/x");
+    mocks.openArtifactTab.mockReset();
     useReviewNavigationStore.setState({
       reviewModes: {},
       selectedPrUrls: {},
@@ -97,7 +94,22 @@ describe("TaskArtifactsList", () => {
     expect(screen.getByText("File · 17 KB")).toBeTruthy();
   });
 
-  it("presigns the artifact of the run that produced it", () => {
+  // The row should read like the chat's file list: markdown looks like
+  // markdown, HTML looks like HTML.
+  it.each([
+    { name: "notes.md", icon: "markdown" },
+    { name: "demo.html", icon: "html" },
+  ])("gives $name an icon for its file type", ({ name, icon }) => {
+    mocks.runs = [run("run-1", { artifacts: [outputFile({ id: "a", name })] })];
+
+    const { container } = render(
+      <TaskArtifactsList task={task} timeline={[]} />,
+    );
+
+    expect(container.querySelector("img")?.getAttribute("src")).toContain(icon);
+  });
+
+  it("opens the artifact of the run that produced it beside the chat", () => {
     mocks.runs = [
       run("run-1", { artifacts: [outputFile({ id: "a", name: "old.md" })] }),
       run("run-2", {
@@ -114,11 +126,11 @@ describe("TaskArtifactsList", () => {
     render(<TaskArtifactsList task={task} timeline={[]} />);
     fireEvent.click(screen.getByText("new.md"));
 
-    expect(mocks.presignTaskRunArtifact).toHaveBeenCalledWith(
-      "task-1",
-      "run-2",
-      "runs/2/new.md",
-    );
+    expect(mocks.openArtifactTab).toHaveBeenCalledWith("task-1", {
+      runId: "run-2",
+      artifactId: "b",
+      name: "new.md",
+    });
   });
 
   // Agents revise a deliverable and upload it again under the same name.

packages/ui/src/features/canvas/components/TaskArtifactsList.tsx

@@ -21,15 +21,14 @@ import type {
   TaskRun,
   TaskThreadMessage,
 } from "@posthog/shared/domain-types";
-import { useOptionalAuthenticatedClient } from "@posthog/ui/features/auth/authClient";
 import { iconForTemplate } from "@posthog/ui/features/canvas/components/canvasTemplateIcon";
 import { useTaskRuns } from "@posthog/ui/features/canvas/hooks/useTaskRuns";
 import { useReviewNavigationStore } from "@posthog/ui/features/code-review/reviewNavigationStore";
 import { usePrArtifact } from "@posthog/ui/features/git-interaction/usePrArtifact";
+import { usePanelLayoutStore } from "@posthog/ui/features/panels/panelLayoutStore";
 import { usePrComments } from "@posthog/ui/features/pr-review/usePrComments";
 import { usePrReviewThreads } from "@posthog/ui/features/pr-review/usePrReviewThreads";
 import { FileIcon } from "@posthog/ui/primitives/FileIcon";
-import { toast } from "@posthog/ui/primitives/toast";
 import { openExternalUrl } from "@posthog/ui/shell/openExternal";
 import { formatFileSize } from "@posthog/ui/utils/formatFileSize";
 import { parseHttpsUrl, parseShareLink } from "@posthog/ui/utils/posthogLinks";
@@ -43,8 +42,8 @@ type ArtifactRow =
   | {
       kind: "file";
       key: string;
+      artifactId: string | null;
       name: string;
-      storagePath: string | null;
       runId: string | null;
       size: number | undefined;
     }
@@ -110,8 +109,8 @@ function buildRows(
     rows.push({
       kind: "file",
       key: `file:${file.id ?? file.storage_path ?? name}`,
+      artifactId: file.id ?? null,
       name,
-      storagePath: file.storage_path ?? null,
       runId,
       size: file.size,
     });
@@ -238,41 +237,32 @@ function CanvasRow({ name, url }: { name: string; url: string | null }) {
 function FileRow({
   taskId,
   runId,
+  artifactId,
   name,
-  storagePath,
   size,
 }: {
   taskId: string;
   runId: string | null;
+  artifactId: string | null;
   name: string;
-  storagePath: string | null;
   size: number | undefined;
 }) {
-  const client = useOptionalAuthenticatedClient();
-  const canOpen = !!client && !!runId && !!storagePath;
+  const openArtifactTab = usePanelLayoutStore((state) => state.openArtifactTab);
+  const canOpen = !!runId && !!artifactId;
   const onOpen = canOpen
     ? () => {
-        client
-          .presignTaskRunArtifact(
-            taskId,
-            runId as string,
-            storagePath as string,
-          )
-          .then((url) => openExternalUrl(url))
-          .catch((error: unknown) => {
-            toast.error("Couldn't open file", {
-              description:
-                error instanceof Error ? error.message : String(error),
-            });
-          });
+        openArtifactTab(taskId, {
+          runId: runId as string,
+          artifactId: artifactId as string,
+          name,
+        });
       }
     : undefined;
   return (
     <ArtifactListRow
       icon={<FileIcon filename={name} size={14} />}
       title={name}
       detail={["File", formatFileSize(size)].filter(Boolean).join(" · ")}
-      external={canOpen}
       onOpen={onOpen}
     />
   );
@@ -320,8 +310,8 @@ export function TaskArtifactsList({
             key={row.key}
             taskId={task.id}
             runId={row.runId}
+            artifactId={row.artifactId}
             name={row.name}
-            storagePath={row.storagePath}
             size={row.size}
           />
         ) : (