Skip to content

feat(studio): Coding agents assets panel - #333

Merged
dmariali merged 13 commits into
mainfrom
coding-agents-assets-panel
Jun 16, 2026
Merged

feat(studio): Coding agents assets panel#333
dmariali merged 13 commits into
mainfrom
coding-agents-assets-panel

Conversation

@dmariali

@dmariali dmariali commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

Summary by CodeRabbit

Release Notes

  • New Features

    • Added "Chat artifacts" panel displaying files created, agent/model selections, studio links generated, and tools used during code chat sessions.
    • Added collapsible "Earlier thinking" section to reveal Claude's reasoning process during code generation.
    • Enabled experiment-specific link destinations in studio navigation.
  • Improvements

    • Enhanced session history to preserve and display all artifact metadata across chat sessions.

@dmariali
dmariali requested review from a team as code owners June 15, 2026 17:17
@dmariali dmariali changed the title Coding agents assets panel feat(studio): Coding agents assets panel Jun 15, 2026
@github-actions github-actions Bot added the feat label Jun 15, 2026
@github-actions

github-actions Bot commented Jun 15, 2026

Copy link
Copy Markdown
Contributor
Suite Lines Covered Line Rate Branch Rate
Unit Tests 19462/25829 75.3% 60.9%
Integration Tests 11372/24601 46.2% 20.2%

@coderabbitai

coderabbitai Bot commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: e638fbf2-3ccc-478e-a1ad-c95bce14e270

📥 Commits

Reviewing files that changed from the base of the PR and between e4a895a and da7c88a.

📒 Files selected for processing (2)
  • services/studio/src/nmp/studio/coding_agent_artifacts.py
  • services/studio/src/nmp/studio/coding_agents.py

📝 Walkthrough

Walkthrough

Adds ChatArtifactsResponse extraction to the Studio backend session-history summarizer and exposes it via both history API endpoints. On the frontend, introduces artifacts.ts with immutable update helpers, wires ClaudeCodeChatArtifacts through the runtime hook and route/layout, and renders a new artifacts pane in ClaudeCodeHistoryPanel. Also adds a collapsed-thinking tool-call mechanism that compresses assistant reasoning into expandable <details> parts. Separately adds an experiment_detail Studio link destination with feature-flag gating.

Changes

Chat Artifacts Extraction, Collapsed Thinking, and Artifacts UI

Layer / File(s) Summary
Artifact data contracts
web/.../ClaudeCodeChatRoute/types.ts, services/studio/src/nmp/studio/coding_agent_artifacts.py
Frontend adds ClaudeCodeChatArtifacts, ClaudeCodeChatSelectionArtifact, ClaudeCodeChatFileArtifact, ClaudeCodeChatLinkArtifact, and ClaudeCodeChatModelSource; backend adds matching Pydantic models (ChatSelectionArtifactResponse, ChatFileArtifactResponse, ChatLinkArtifactResponse, ChatArtifactsResponse) with regex/heading constants.
Collapsed-thinking tool parts and message completion
web/.../ClaudeCodeChatRoute/toolParts.ts
Defines CLAUDE_CODE_COLLAPSED_THINKING_TOOL_NAME, createClaudeCodeCollapsedThinkingPart, and getClaudeCodeCompletedMessageParts to collapse assistant reasoning text and trailing paragraphs into an expandable tool-call plus a final summary text part.
Collapsed-thinking UI rendering
web/.../ClaudeCodeChatRoute/ClaudeCodeToolCallPart.tsx, ...ClaudeCodeToolCallPart.spec.tsx
CollapsedThinkingToolCall renders split paragraphs in a <details> element; ClaudeCodeToolCallPart refactored into a delegating wrapper via ClaudeCodeToolCallPartContent with an early branch for the new tool type; test verifies expand/collapse behavior.
Assistant completion collapse gate
web/.../ClaudeCodeChatRoute/useCustomAssistantChatRuntime.ts, ...useCustomAssistantChatRuntime.spec.ts
CompleteAssistantMessageOptions.collapseClaudeCodeContent controls whether completion applies the message-part transform; prepareForUserInput passes false to avoid premature collapse; tests verify uncollapsed and fully-completed output shapes.
History message post-processing
web/.../ClaudeCodeChatRoute/util.ts, ...util.spec.ts
getClaudeCodeHistoryMessages applies getClaudeCodeCompletedMessageParts after merging subtle tools; tests updated to expect collapsed-thinking tool-call output instead of plain text parts.
Frontend artifact builders
web/.../ClaudeCodeChatRoute/artifacts.ts, ...artifacts.spec.ts
New module with createEmptyClaudeCodeChatArtifacts and five immutable updateClaudeCodeChatArtifacts* functions covering streaming events, user selections, user text, and history; includes studio-link href construction, dedup/upsert logic, and spec-text parsing. Full test suite included.
Backend artifact summarization
services/studio/src/nmp/studio/coding_agent_artifacts.py, ...coding_agents.py
coding_agent_artifacts.py extracts selections, files, links, workspace, and model metadata from JSONL history. coding_agents.py wires helpers into HistorySummary.chat_artifacts with deduplication and question-label tracking via question_labels_by_tool_use_id.
Backend history API endpoints
services/studio/src/nmp/studio/coding_agents.py, services/studio/tests/unit/test_coding_agents.py
list_history_sessions and get_session_history return chat_artifacts in their response models; tests validate expanded tool sequences, artifact payload fields, and selection/file/link/tool values.
Frontend API parsing
web/.../ClaudeCodeChatRoute/api.ts, ...api.spec.ts
parseChatArtifacts normalizes backend response into ClaudeCodeChatArtifacts; parseHistorySession and getClaudeCodeSessionHistory populate and return chat_artifacts; tests verify preservation of selections and links across round-trips.
Runtime artifact state
web/.../ClaudeCodeChatRoute/useClaudeCodeChatRuntime.ts, ...useClaudeCodeChatRuntime.spec.ts
Adds artifacts state initialized workspace-aware from initialArtifacts; useEffect recomputes on prop/workspace changes; streaming updates via updateClaudeCodeChatArtifactsFromEvent; selection artifacts updated only when permission submission returns true; handleReset clears artifacts. Hook now exposes artifacts.
Route and layout prop threading
web/.../ClaudeCodeChatRoute/index.tsx, ...ClaudeCodeLayout.tsx
initialArtifacts from session history flows through ClaudeCodeChatSurfaceuseClaudeCodeChatRuntimeClaudeCodeLayoutClaudeCodeHistoryPanel; session query sets refetchOnMount: 'always'.
Artifacts pane UI
web/.../ClaudeCodeChatRoute/ClaudeCodeHistoryPanel.tsx, ...ClaudeCodeStudioLink.tsx
ClaudeCodeArtifactsPane renders artifact rows for selections, files, links, and tools with internal link resolution via getStudioInternalLinkTarget; panel aside restructured to include pane alongside tabs; CLAUDE_CODE_STUDIO_LINK_CLASS extracted as reusable constant.

Studio experiment link destination and infrastructure

Layer / File(s) Summary
experiment_detail Studio link destination
services/studio/src/nmp/studio/studio_links.py, services/studio/tests/unit/test_coding_agents.py
Adds experiment_detail with path template /workspaces/{workspace}/experiment/{name}/{experiment_name}, experiment_name argument aliases, feature-flag ("experiment",) gating, and test route mapping coverage.
HuggingFace list_files stub
services/core/models/tests/integration/conftest.py
Extends no_hf_network fixture to stub HuggingfaceStorageImpl.list_files returning deterministic FileInfo objects.

Possibly Related PRs

  • NVIDIA-NeMo/nemo-platform#155: Modifies useClaudeCodeChatRuntime permission/decision handling; this PR gates chat_artifacts updates on whether the permission submission succeeds, directly extending that flow.
  • NVIDIA-NeMo/nemo-platform#153: Introduces Claude Code session-history UI/data flow; this PR extends it with chat_artifacts on the API and adds the artifacts pane to ClaudeCodeHistoryPanel.
  • NVIDIA-NeMo/nemo-platform#176: Modifies ClaudeCodeToolCallPart.tsx; this PR extends the same component to handle the new collapsed-thinking tool type.

Suggested Reviewers

  • htolentino-nvidia
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 7.89% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat(studio): Coding agents assets panel' directly matches the PR's core objective—adding a structured artifacts/assets panel to the Claude Code chat interface.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch coding-agents-assets-panel

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeHistoryPanel.tsx (1)

4-59: ⚡ Quick win

Reorder imports to external-first, then internal aliases.

The changed import block mixes external packages after @studio/* imports; reorder to match repo import grouping.

Proposed fix
 import {
   Anchor,
   Banner,
   Button,
   Card,
   Flex,
   SegmentedControl,
   Skeleton,
   Stack,
   Text,
   Tooltip,
 } from '`@nvidia/foundations-react-core`';
+import { useQuery } from '`@tanstack/react-query`';
+import cn from 'classnames';
+import {
+  ArrowRight,
+  Bot,
+  BookOpen,
+  Boxes,
+  Cpu,
+  FileCode2,
+  History,
+  Link2,
+  MessageSquare,
+  MessageSquarePlus,
+  PanelRightClose,
+  PanelRightOpen,
+  RefreshCw,
+  Sparkles,
+  Wrench,
+} from 'lucide-react';
+import { type FC, type ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+
 import { Empty } from '`@studio/components/Empty`';
 import { useWorkspaceFromPathIfExists } from '`@studio/hooks/useWorkspaceFromPath`';
 import {
   CLAUDE_CODE_HISTORY_SESSIONS_QUERY_KEY,
   CLAUDE_CODE_SKILLS_QUERY_KEY,
   listClaudeCodeHistorySessions,
   listClaudeCodeSkills,
 } from '`@studio/routes/agents/ClaudeCodeChatRoute/api`';
 import { cleanClaudeCodeArtifactText } from '`@studio/routes/agents/ClaudeCodeChatRoute/artifacts`';
 import { CLAUDE_CODE_STUDIO_LINK_CLASS } from '`@studio/routes/agents/ClaudeCodeChatRoute/ClaudeCodeStudioLink`';
 import { getStudioInternalLinkTarget } from '`@studio/routes/agents/ClaudeCodeChatRoute/ClaudeCodeStudioLinkTarget`';
 import type {
   ClaudeCodeChatArtifacts,
   ClaudeCodeChatFileArtifact,
   ClaudeCodeChatLinkArtifact,
   ClaudeCodeChatSelectionArtifact,
   ClaudeCodeHistorySession,
   ClaudeCodeSkill,
 } from '`@studio/routes/agents/ClaudeCodeChatRoute/types`';
 import { getSkillDisplayName } from '`@studio/routes/DashboardLandingRoute/skillDisplayName`';
 import { useLocalStorage } from '`@studio/util/hooks/useLocalStorage`';
 import { CLAUDE_CODE_HISTORY_OPEN_KEY, CLAUDE_CODE_PANEL_TAB_KEY } from '`@studio/util/localStorage`';
-import { useQuery } from '`@tanstack/react-query`';
-import cn from 'classnames';
-import {
-  ArrowRight,
-  Bot,
-  BookOpen,
-  Boxes,
-  Cpu,
-  FileCode2,
-  History,
-  Link2,
-  MessageSquare,
-  MessageSquarePlus,
-  PanelRightClose,
-  PanelRightOpen,
-  RefreshCw,
-  Sparkles,
-  Wrench,
-} from 'lucide-react';
-import { type FC, type ReactNode } from 'react';
-import { Link } from 'react-router-dom';

As per coding guidelines, "Group imports in the order: external libraries, internal modules, relative imports".

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeHistoryPanel.tsx`
around lines 4 - 59, The imports in ClaudeCodeHistoryPanel.tsx are not properly
grouped according to the coding guidelines. Currently, external packages like
`@tanstack/react-query`, classnames, lucide-react, and react-router-dom are mixed
in after internal `@studio/`* imports. Reorder all imports to follow the
external-first pattern: place all external library imports (including
`@nvidia/foundations-react-core`, `@tanstack/react-query`, classnames, lucide-react,
react, and react-router-dom) at the top, then group all `@studio/`* internal
module imports below them.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/artifacts.ts`:
- Around line 125-127: Remove the pre-encoded aliases file_path_encoded and
filePathEncoded from the file_path key mapping in the artifacts mapping object.
These aliases are already URL-encoded and should not be included in the mapping
since they will be double-encoded during template substitution, breaking file
route links. Apply this same fix at all three locations where this mapping
appears: the main definition around lines 125-127, and the duplicate mappings at
lines 159-166 and 189-196. In each location, remove file_path_encoded and
filePathEncoded from the string array value for the file_path key while keeping
the other aliases (file, filePath, path).

In
`@web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/useClaudeCodeChatRuntime.ts`:
- Around line 244-248: The useEffect hook in useClaudeCodeChatRuntime has an
early return when nextArtifacts is falsy, which prevents resetting artifacts
when initialArtifacts becomes undefined. Instead of returning early, restructure
the effect to handle both cases: when nextArtifacts exists (call setArtifacts
with createWorkspaceArtifacts result) and when it is undefined (call
setArtifacts to clear/reset the artifacts appropriately, such as with an empty
object or undefined value). This ensures artifacts are properly synced and
cleared during state transitions when the initialArtifactsSignature or workspace
dependencies change.

---

Nitpick comments:
In
`@web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeHistoryPanel.tsx`:
- Around line 4-59: The imports in ClaudeCodeHistoryPanel.tsx are not properly
grouped according to the coding guidelines. Currently, external packages like
`@tanstack/react-query`, classnames, lucide-react, and react-router-dom are mixed
in after internal `@studio/`* imports. Reorder all imports to follow the
external-first pattern: place all external library imports (including
`@nvidia/foundations-react-core`, `@tanstack/react-query`, classnames, lucide-react,
react, and react-router-dom) at the top, then group all `@studio/`* internal
module imports below them.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: 31f94bd3-d0c1-411a-ad1a-16a4fd939c19

📥 Commits

Reviewing files that changed from the base of the PR and between 5ac5629 and 357803f.

📒 Files selected for processing (22)
  • plugins/nemo-agents/examples/calculator-agent/src/calculator_agent/.injected-calculator-eval-28my_bch.yaml
  • services/studio/src/nmp/studio/coding_agents.py
  • services/studio/src/nmp/studio/studio_links.py
  • services/studio/tests/unit/test_coding_agents.py
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeHistoryPanel.tsx
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeLayout.tsx
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeStudioLink.tsx
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeToolCallPart.spec.tsx
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeToolCallPart.tsx
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/api.spec.ts
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/api.ts
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/artifacts.spec.ts
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/artifacts.ts
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/index.tsx
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/toolParts.ts
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/types.ts
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/useClaudeCodeChatRuntime.spec.ts
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/useClaudeCodeChatRuntime.ts
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/useCustomAssistantChatRuntime.spec.ts
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/useCustomAssistantChatRuntime.ts
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/util.spec.ts
  • web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/util.ts

dmariali added 5 commits June 16, 2026 09:33
Signed-off-by: Danielle Ali <44468613+dmariali@users.noreply.github.com>
Signed-off-by: Danielle Ali <44468613+dmariali@users.noreply.github.com>
Signed-off-by: Danielle Ali <44468613+dmariali@users.noreply.github.com>

@htolentino-nvidia htolentino-nvidia left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@dmariali
dmariali added this pull request to the merge queue Jun 16, 2026
Merged via the queue into main with commit 3f9b324 Jun 16, 2026
51 checks passed
@dmariali
dmariali deleted the coding-agents-assets-panel branch June 16, 2026 17:07
@dmariali
dmariali restored the coding-agents-assets-panel branch June 22, 2026 17:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants