Skip to content

Agent new room#2000

Merged
neelneelneel merged 20 commits intodevfrom
agent-new-room
Oct 10, 2025
Merged

Agent new room#2000
neelneelneel merged 20 commits intodevfrom
agent-new-room

Conversation

@tevanburen
Copy link
Copy Markdown
Contributor

@tevanburen tevanburen commented Oct 7, 2025 •
edited
Loading

Description

  • Fetch agents from BE
  • Add a new url for creating a new room in an agent
  • When adding a new room for an agent, pass agentId
  • When loading rooms, set agentId for those rooms
  • For v1, disallow changing room options for rooms with agents

Outstanding work, not part of this PR: pass workspace options to room

Changes Made

How to Test

  1. Steps to reproduce/test the behavior
  2. Expected outcomes

Notes

@tevanburen tevanburen self-assigned this Oct 7, 2025
@github-actions
Copy link
Copy Markdown

github-actions bot commented Oct 7, 2025

@CodiumAI-Agent /describe

@QodoAI-Agent
Copy link
Copy Markdown

QodoAI-Agent commented Oct 7, 2025

Title

Agent new room

User description

Description

Changes Made

How to Test

  1. Steps to reproduce/test the behavior
  2. Expected outcomes

Notes

PR Type

Enhancement, Bug fix

Description

  • Fetch agents from backend workspaces

  • Add loading skeletons for agents grid

  • Disable actions while loading

  • Define proper Agent type fields

Diagram Walkthrough

flowchart LR
  AgentPage["AgentPage: fetch workspaces via usePixel"] -- "maps response to cards" --> AgentCard["AgentCard: render agent or skeleton"]
  AgentPage -- "filters by search" --> Grid["Grid: agentsToRender"]
  AgentCard -- "disable button when loading" --> ViewButton["View Details disabled when !isAgentValid"]
  Types["types.d.ts: define Agent"] -- "consumed by" --> AgentPage
  Types -- "consumed by" --> AgentCard
Loading

File Walkthrough
Relevant files
Enhancement
AgentCard.tsx
AgentCard supports loading skeleton and typed agent           

packages/playground/src/components/agent/AgentCard.tsx

  • Switch props to agent: Agent | null
  • Render Skeleton when agent is null
  • Disable "View Details" if agent invalid
  • Import Skeleton and Agent type
 +22/-7   
AgentPage.tsx
AgentPage fetches workspaces and shows skeletons                 

packages/playground/src/pages/AgentPage.tsx

  • Replace mock data with usePixel fetch
  • Add loading state and skeleton rendering
  • Filter agents by name with search
  • Use workspace ids and created date fields
 +35/-61 
types.d.ts
Define concrete Agent interface                                                   

packages/playground/src/types.d.ts

  • Replace placeholder Agent with concrete fields
  • Define workspace_id, name, date_created, description, system_prompt
 +7/-1     

@github-actions
Copy link
Copy Markdown

github-actions bot commented Oct 7, 2025

@CodiumAI-Agent /review

@github-actions
Copy link
Copy Markdown

github-actions bot commented Oct 7, 2025

@CodiumAI-Agent /improve

@QodoAI-Agent
Copy link
Copy Markdown

QodoAI-Agent commented Oct 7, 2025

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

Null Handling

When rendering skeletons, the Typography may receive undefined if agent fields are missing even when agent is non-null. Consider safe optional chaining or default fallbacks for agent.name and agent.description to avoid rendering issues.

 
<Typography variant="body1">
	{isAgentValid ? (
		agent.name
	) : (
		<Skeleton width="100%" height="100%" />
	)}
</Typography>
<Typography variant="body2" color="text.secondary">
	{isAgentValid ? (
		agent.description
	) : (
		<Skeleton width="100%" height="100%" />
	)}
</Typography>
Loading Keys

Using array index as key during loading switches to workspace_id after load; verify this does not cause remount flicker. Consider stable placeholder keys or consistent keying strategy across states.

 
{agentsToRender.map((agentInfo, index) => (
	<Grid
		item
		xs={12}
		sm={6}
		md={3}
		key={isLoading ? index : agentInfo.workspace_id}
	>
Date Robustness

Publishing date uses new Date(agentInfo.date_created); ensure backend always returns ISO strings and handle invalid dates gracefully (fallback text) to prevent "Invalid Date" rendering.

 
<Typography
	variant="caption"
	color="text.secondary"
>
	{isLoading ? (
		<Skeleton
			width="100%"
			height="100%"
		/>
	) : (
		`Published ${new Date(agentInfo.date_created).toLocaleDateString()}`
	)}
</Typography>

@QodoAI-Agent
Copy link
Copy Markdown

QodoAI-Agent commented Oct 7, 2025 •
edited
Loading

PR Code Suggestions ✨

Latest suggestions up to 7383605

CategorySuggestion                                                                                                                                    Impact
General
Clamp text and fix skeleton

Long descriptions may overflow; also the Skeleton sizing is too large for inline
text. Clamp description lines and size Skeleton to a typical line height to prevent
layout shifts and overflow during loading.

packages/playground/src/components/agent/AgentCard.tsx [51-57]

-<Typography variant="body2" color="text.secondary">
+<Typography
+	variant="body2"
+	color="text.secondary"
+	sx={{ display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}
+>
 	{isAgentValid ? (
 		agent.description
 	) : (
-		<Skeleton width="100%" height="100%" />
+		<Skeleton width="90%" height={18} />
 	)}
 </Typography>
Suggestion importance[1-10]: 7

__

Why: Adding line clamping to the description prevents overflow and improves readability, and adjusting Skeleton size is appropriate; this is a solid UI/UX enhancement directly applicable to the existing code.

Medium
Stabilize loading text layout

Rendering a block-level Skeleton inside inline Typography can cause layout jumps and
accessibility issues. Use the Typography component="div" (or wrap Skeleton outside)
and provide a reasonable width/height for the Skeleton to match expected text lines.
This stabilizes layout while loading.

packages/playground/src/components/agent/AgentCard.tsx [44-50]

-<Typography variant="body1">
+<Typography variant="body1" component="div">
 	{isAgentValid ? (
 		agent.name
 	) : (
-		<Skeleton width="100%" height="100%" />
+		<Skeleton width="60%" height={24} />
 	)}
 </Typography>
Suggestion importance[1-10]: 6

__

Why: The change to use component="div" and sized Skeleton reduces layout shift and better matches text sizing; it's a minor UX improvement and is accurate to the shown code.

Low
Possible issue
Guard against undefined arrays

When workspaceResponse.workspaces is undefined or not an array, this will throw at
runtime. Default to an empty array before filtering to ensure robustness across API
states.

packages/playground/src/pages/AgentPage.tsx [55-61]

+const agents = Array.isArray(workspaceResponse?.workspaces) ? workspaceResponse.workspaces : [];
 const agentsToRender = isLoading
 	? Array(12).fill(null)
-	: workspaceResponse.workspaces.filter((agent) =>
+	: agents.filter((agent) =>
 			search
 				? agent.name.toLowerCase().includes(search.toLowerCase())
 				: true,
 		);
Suggestion importance[1-10]: 5

__

Why: While the hook provides a default { workspaces: [] }, adding a defensive array check is harmless and slightly improves robustness; impact is moderate since runtime risk is already mitigated.

Low

Previous suggestions

Suggestions up to commit 7383605
CategorySuggestion                                                                                                                                    Impact
General
Fix skeleton sizing in text

Rendering a with 100% height inside a Typography can cause layout instability and
overflow since text lines have intrinsic height. Use a fixed height approximating a
single line of text to prevent layout jumps and ensure consistent skeleton sizing.

packages/playground/src/components/agent/AgentCard.tsx [44-50]

 <Typography variant="body1">
 	{isAgentValid ? (
 		agent.name
 	) : (
-		<Skeleton width="100%" height="100%" />
+		<Skeleton width="60%" height={24} />
 	)}
 </Typography>
Suggestion importance[1-10]: 6

__

Why: Correctly identifies potential layout issues using a 100% height Skeleton within Typography and proposes a stable fixed-height alternative; impact is moderate and UI-focused.

Low
Use multi-line text skeletons

The description skeleton should simulate multiple text lines rather than full height
to avoid overflow within Typography. Replace with a few line-like skeletons with
fixed heights for stable rendering.

packages/playground/src/components/agent/AgentCard.tsx [51-57]

 <Typography variant="body2" color="text.secondary">
 	{isAgentValid ? (
 		agent.description
 	) : (
-		<Skeleton width="100%" height="100%" />
+		<Stack spacing={0.5}>
+			<Skeleton width="90%" height={16} />
+			<Skeleton width="75%" height={16} />
+		</Stack>
 	)}
 </Typography>
Suggestion importance[1-10]: 6

__

Why: Recommends more realistic multi-line Skeletons to avoid overflow and better mimic text layout; accurate to the diff and improves UX, though not critical.

Low
Possible issue
Prevent null dereference during loading

When isLoading is true, agentsToRender contains null, but later code dereferences
agentInfo fields, risking runtime errors if additional properties are accessed. Use
a typed placeholder object shape that matches Agent or branch the render to avoid
accessing properties on null.

packages/playground/src/pages/AgentPage.tsx [55-61]

-const agentsToRender = isLoading
-	? Array(12).fill(null)
+const agentsToRender: (Agent | null)[] = isLoading
+	? Array.from({ length: 12 }, () => null)
 	: workspaceResponse.workspaces.filter((agent) =>
 			search
 				? agent.name.toLowerCase().includes(search.toLowerCase())
 				: true,
 		);
Suggestion importance[1-10]: 4

__

Why: The code already guards usages during loading with conditional keys and Skeletons, so risk is low; typing the array as (Agent | null)[] is a minor safety/readability improvement.

Low

@dineshS96
Copy link
Copy Markdown
Contributor

dineshS96 commented Oct 7, 2025 via email

Base automatically changed from sharing-ui-2 to dev October 7, 2025 19:35
@tevanburen tevanburen marked this pull request as ready for review October 8, 2025 18:46
@tevanburen tevanburen requested a review from a team as a code owner October 8, 2025 18:46
@neelneelneel neelneelneel merged commit 34a34cd into dev Oct 10, 2025
3 checks passed
@neelneelneel neelneelneel deleted the agent-new-room branch October 10, 2025 14:53
@github-actions
Copy link
Copy Markdown

github-actions bot commented Oct 10, 2025

@CodiumAI-Agent /update_changelog

@QodoAI-Agent
Copy link
Copy Markdown

QodoAI-Agent commented Oct 10, 2025

Changelog updates: 🔄

2025-10-10 *

Added

  • New route to create rooms scoped to an agent; display AgentChip and fetch agents from backend.

Changed

  • Link rooms to agents/workspaces and pass agentId when creating/loading rooms; disable room options when using an agent.

Fixed

  • Misc UI and navigation handling for agent-linked rooms.

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@neelneelneel neelneelneel neelneelneel approved these changes

Assignees

@tevanburen tevanburen

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@tevanburen @QodoAI-Agent @dineshS96 @neelneelneel