fix(channels): preview artifacts from the activity pane

Generated-By: PostHog Code
Task-Id: 1b29f8c0-d916-449a-bf69-50dbf5f32bf1

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: {},
@@ -112,7 +109,7 @@ describe("TaskArtifactsList", () => {
     expect(container.querySelector("img")?.getAttribute("src")).toContain(icon);
   });
 
-  it("presigns the artifact of the run that produced it", () => {
+  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", {
@@ -129,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}
           />
         ) : (

packages/ui/src/features/sidebar/components/SidebarNavSection.tsx

@@ -3,7 +3,6 @@ import {
   ANALYTICS_EVENTS,
   type SidebarNavItem,
 } from "@posthog/shared/analytics-events";
-import { useChannelsLayout } from "@posthog/ui/features/canvas/hooks/useChannelsLayout";
 import { useCommandCenterActiveCount } from "@posthog/ui/features/command-center/useCommandCenterActiveCount";
 import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
 import { useInboxAllReports } from "@posthog/ui/features/inbox/hooks/useInboxAllReports";
@@ -77,7 +76,6 @@ export function SidebarNavSection({
   // The new channels layout subsumes the alpha: while its flag is on, the
   // "Enable channels" toggle is meaningless, so its row is hidden.
   const channelsLayout = useChannelsLayout();
-
   // When this section renders inside the Channels space, the destinations that
   // have a /website mirror stay in that space; everything else (and the whole
   // section in the Code space) uses the canonical routes. Inbox and New task
@@ -146,8 +144,6 @@ export function SidebarNavSection({
   const navItemAvailable: Record<CustomizableNavItemId, boolean> = {
     inbox: true,
     "command-center": true,
-    // Hidden while the new layout is on — the opt-in toggle would be a no-op.
-    contexts: bluebirdEnabled && !channelsLayout,
     // Activity (the mentions feed) is a channels surface, so it only appears
     // once channels are enabled.
     activity: channelsEnabled,