feat(artifacts): show scrollable artifact list in side panel

[monrheo]

Summary

• Replaces the "no artifacts" empty state with a scrollable list of all artifacts
• Clicking an artifact opens it in the panel; closing returns to the list
• Adds text to ARTIFACT_FILE_PREVIEWS so plain-text files (.ts, .js, .json, etc.) appear

Before

Clicking Artifacts (N) opened only the first artifact as a tab. The other N-1 were invisible.

After

Clicking Artifacts (N) opens a scrollable list. Each artifact shows icon, name, and size.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
openwork-landing	Ready	Preview, Comment, Open in v0	May 30, 2026 8:03am

[vercel]

Someone is attempting to deploy a commit to the Different AI Team on Vercel.

A member of the Team first needs to authorize it.

[cubic-dev-ai]

1 issue found across 3 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/app/src/react-app/domains/session/chat/session-page.tsx">

<violation number="1" location="apps/app/src/react-app/domains/session/chat/session-page.tsx:374">
P2: The Artifacts button now closes an already-open panel instead of switching it to the artifact list.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic</sub>

[cubic-dev-ai]

P2: The Artifacts button now closes an already-open panel instead of switching it to the artifact list.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/app/src/react-app/domains/session/chat/session-page.tsx, line 374:

<comment>The Artifacts button now closes an already-open panel instead of switching it to the artifact list.</comment>

<file context>
@@ -371,33 +371,13 @@ export function SessionPage(props: SessionPageProps) {
-    ));
-    const firstArtifact = artifactFileTargets[0];
-    if (panelRailActive && activeTab?.type === "artifact") {
+    if (panelRailActive) {
       toggleCurrentSidePanel("panel");
       return;
</file context>

[Dhanus3133]

I see this

[Dhanus3133]

Current filtering code causes an infinite render loop which crashes the UI. We need to select the raw state and wrap the filter in a useMemo in the component to avoid returning a new array reference on every selector run. You can use this:

diff --git a/apps/app/src/react-app/domains/session/panel/side-panel.tsx b/apps/app/src/react-app/domains/session/panel/side-panel.tsx
index d436efff..01e72ee5 100644
--- a/apps/app/src/react-app/domains/session/panel/side-panel.tsx
+++ b/apps/app/src/react-app/domains/session/panel/side-panel.tsx
@@ -460,9 +460,10 @@ export function SidePanel({
 
 function ArtifactList({ sessionId }: { sessionId: string }) {
   const openTab = usePanelTabStore((state) => state.openTab);
-  const targets = usePanelTabStore((state) =>
-    (state.transcriptArtifactTargets[sessionId] ?? []).filter(isCollectibleArtifactTarget)
-  );
+  const rawTargets = usePanelTabStore((state) => state.transcriptArtifactTargets[sessionId]);
+  const targets = React.useMemo(() => {
+    return (rawTargets ?? []).filter(isCollectibleArtifactTarget);
+  }, [rawTargets]);
 
   if (targets.length === 0) {
     return (