AGENT-1156 Workbench UI/UX #345
Conversation
📝 WalkthroughWalkthroughThis pull request extends the agent system with example inputs support, refactors the workbench UI component structure and styling system, updates runtime span processor initialization, and improves error handling in the execution and WebSocket layers. Changes span build tooling, runtime agent metadata, and UI components. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
jhaynie
left a comment
jhaynie
left a comment
There was a problem hiding this comment.
run bun format at the project root
…to workbench-ui-ux
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 18
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
packages/workbench/src/components/ui/dialog.tsx (1)
1-141: Use single quotes in imports to match Prettier configuration.The repository's Prettier configuration (
.prettierrc) explicitly specifies"singleQuote": true, but this file uses double quotes in imports (lines 1, 2, 5). Update these to single quotes:'@radix-ui/react-dialog','lucide-react', and'../../lib/utils'.packages/workbench/src/components/ui/input-group.tsx (1)
1-170: Convert double quotes to single quotes throughout the file.The repository's Prettier configuration explicitly requires single quotes (
"singleQuote": true), which is also aligned with the coding guidelines. However, this file systematically uses double quotes instead. The file should be reformatted with single quotes to comply with the.prettierrcconfiguration.Run Prettier to auto-fix:
prettier --write packages/workbench/src/components/ui/input-group.tsxpackages/workbench/src/components/ui/command.tsx (1)
1-182: Coding guideline violation: Use single quotes instead of double quotes.The coding guidelines explicitly require single quotes for string literals in TypeScript/JavaScript files, but this file uses double quotes throughout (e.g., lines 1, 2, 5, and all JSX attributes). This should be enforced by Prettier configuration.
As per coding guidelines, ensure Prettier is configured with
singleQuote: trueand reformat the file.Example corrections
-import { Command as CommandPrimitive } from "cmdk"; -import { SearchIcon } from "lucide-react"; +import { Command as CommandPrimitive } from 'cmdk'; +import { SearchIcon } from 'lucide-react';packages/workbench/src/components/ai-elements/prompt-input.tsx (1)
1-1352: Critical: Formatting violates coding guidelines - revert to single quotes.The entire file has been reformatted to use double quotes, which directly contradicts the coding guidelines that explicitly require: "Use Prettier for code formatting with tabs (width 3), single quotes, and semicolons."
This affects:
- Import statements (lines 1, 3, 13, 14, 36, 37, etc.)
- String literals throughout (lines 112, 126, 166, 249, 267, 273, 280, 290, etc.)
- Object properties and type definitions (lines 416-417, 465, 468, 483-484, etc.)
- All component implementations
Please revert all quote formatting changes and run Prettier with the correct configuration to use single quotes.
</review_comment_end>
♻️ Duplicate comments (4)
packages/workbench/src/components/ui/scroll-area.tsx (1)
1-56: Same quote style inconsistency as other UI components.This file exhibits the same double-quote usage that conflicts with the coding guidelines specifying single quotes. See the comment on
packages/workbench/src/components/ui/input.tsxfor details.packages/workbench/src/components/ui/tooltip.tsx (1)
1-59: Same quote style inconsistency as other UI components.This file also uses double quotes instead of the single quotes specified in coding guidelines. See the comment on
packages/workbench/src/components/ui/input.tsxfor details.packages/workbench/src/components/ui/dropdown-menu.tsx (1)
1-257: Same quote style inconsistency as other UI components.This file also uses double quotes instead of the single quotes specified in coding guidelines. See the comment on
packages/workbench/src/components/ui/input.tsxfor details.packages/workbench/src/components/ui/textarea.tsx (1)
1-18: Same quote style inconsistency as other UI components.This file also uses double quotes instead of the single quotes specified in coding guidelines. See the comment on
packages/workbench/src/components/ui/input.tsxfor details.
🧹 Nitpick comments (16)
packages/workbench/src/hooks/useLogger.ts (1)
21-22: Consider adding a comment to document the empty catch block.The empty catch block is an acceptable pattern for graceful degradation when
localStorageis unavailable (e.g., SSR, privacy mode), but a brief comment explaining why errors are silently caught would improve code clarity.💡 Suggested improvement
} catch { + // Silently degrade when localStorage is unavailable (e.g., SSR, privacy mode) return null; }packages/workbench/src/components/ai-elements/conversation.tsx (1)
81-96: Consider addingaria-hiddenfor better accessibility.The button is now always rendered but hidden via
opacity-0andpointer-events-nonewhen at the bottom. While this enables smooth transitions, the button remains in the accessibility tree even when hidden, which could confuse screen reader users.🔎 Proposed fix
return ( <Button + aria-hidden={isAtBottom} className={cn( "absolute bottom-0 left-[50%] translate-x-[-50%] rounded-full transition-all duration-300", isAtBottom ? "opacity-0 pointer-events-none -translate-y-1/2" : "opacity-100 translate-y-0", className, )} onClick={handleScrollToBottom} size="icon" type="button" variant="outline" {...props} > <ArrowDownIcon className="size-4" /> </Button> );packages/workbench/test-app/vite.config.ts (1)
1-4: Consider standard import ordering.The built-in
pathmodule appears between external packages. Standard convention groups built-ins first, then external packages (alphabetically).packages/workbench/src/components/ai-elements/prompt-input.tsx (2)
152-154: Fix typo: "attachements" should be "attachments".The state variable is named
attachements(with an 'e'), which is inconsistent with the rest of the codebase that usesattachments. While this is internal state and doesn't break functionality, fixing the typo would improve code maintainability.🔎 Proposed fix
- const [attachements, setAttachements] = useState< + const [attachments, setAttachments] = useState< (FileUIPart & { id: string })[] >([]);And update references on lines 162, 176, 184, 196, 203.
640-649: Consider adding error handling to blob URL conversion.The
convertBlobUrlToDataUrlfunction doesn't handle potential errors from thefetchcall (e.g., network issues, revoked blob URLs) or theFileReaderoperation. If conversion fails, the promise will reject, but this could result in the form submission silently failing.🔎 Suggested enhancement
const convertBlobUrlToDataUrl = async (url: string): Promise<string> => { - const response = await fetch(url); - const blob = await response.blob(); - return new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.onloadend = () => resolve(reader.result as string); - reader.onerror = reject; - reader.readAsDataURL(blob); - }); + try { + const response = await fetch(url); + if (!response.ok) { + throw new StructuredError({ + code: 'blob_fetch_failed', + message: `Failed to fetch blob: ${response.statusText}`, + }); + } + const blob = await response.blob(); + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onloadend = () => resolve(reader.result as string); + reader.onerror = () => reject(new StructuredError({ + code: 'file_read_failed', + message: 'Failed to read file as data URL', + })); + reader.readAsDataURL(blob); + }); + } catch (error) { + throw new StructuredError({ + code: 'blob_conversion_failed', + message: 'Failed to convert blob URL to data URL', + cause: error, + }); + } };packages/workbench/src/components/internal/logo.tsx (1)
4-5: Remove unusedaltprop from type signature.The
altprop is declared in the component's props type but is no longer destructured or used. This creates a misleading API where consumers might passaltexpecting it to be applied.🔎 Proposed fix
-const Logo = forwardRef<SVGSVGElement, { className?: string; alt?: string }>( - ({ className = '' }, ref) => { +const Logo = forwardRef<SVGSVGElement, { className?: string }>( + ({ className = '' }, ref) => {packages/workbench/src/components/internal/chat.tsx (3)
102-137: Error detection via__agentErrormarker.The implementation safely parses JSON to detect agent errors embedded in message text. The try-catch at line 133 handles malformed JSON gracefully.
One minor note: The inline type definition at lines 103-110 duplicates the
ErrorInfointerface from@/types/config. Consider importing and reusing that type for consistency.🔎 Optional: reuse ErrorInfo type
+import type { ErrorInfo } from '../../types/config'; import { cn, formatErrorForCopy } from '../../lib/utils'; // ... - let errorInfo: - | { - message: string; - stack?: string; - code?: string; - cause?: unknown; - } - | undefined; + let errorInfo: ErrorInfo | undefined;
283-292: Clipboard API usage without error handling.The
navigator.clipboard.writeText()call at line 291 may fail (e.g., in non-secure contexts or when clipboard permission is denied). Consider adding error handling.🔎 Proposed fix: add error handling for clipboard
onClick={() => { const text = errorInfo ? formatErrorForCopy(errorInfo) : parts .filter((part) => part.type === 'text') .map((part) => part.text) .join(''); - navigator.clipboard.writeText(text); + navigator.clipboard.writeText(text).catch(() => { + // Silently fail - clipboard API may not be available + }); }}
153-165: Consider keyboard accessibility for the session button.The button at lines 153-186 has
tabIndex={0}but usesdisabled={!sessionId}. When disabled, the button should not be focusable. Consider conditionally settingtabIndex:🔎 Optional: improve keyboard accessibility
<button type="button" className={cn(...)} onClick={() => sessionId && onSessionOpen?.(sessionId)} - tabIndex={0} + tabIndex={sessionId && onSessionOpen ? 0 : -1} aria-label="Open session" disabled={!sessionId} style={{ background: 'none' }} >packages/workbench/src/hooks/useAgentSchemas.ts (1)
15-23: Clarify the distinction betweenagentIdandidfields.The
AgentMetadatainterface has bothagentId: stringandid: string. From the relevant snippet inagent-discovery.ts, these appear to be intentionally different (perhapsidis a short identifier andagentIdis a UUID). Consider adding documentation comments to clarify their purposes and when each should be used.packages/workbench/src/components/ai-elements/code-block.tsx (2)
34-34: String literals use double quotes instead of single quotes.Per coding guidelines, Prettier is configured to use single quotes. This line and others in the file use double quotes for string literals.
🔎 Suggested fix
-type SupportedLanguage = "json" | "javascript" | "typescript"; +type SupportedLanguage = 'json' | 'javascript' | 'typescript';
118-134: Potential stale closure issue withmountedref check.The
mountedref is set tofalsein the cleanup function, but the asynchighlightCodecall may complete after unmount. The current logic correctly prevents state updates after unmount, which is good. However, the ref is reset tofalsein cleanup but never explicitly set totrueon subsequent renders if the component re-mounts with different props.Consider this edge case: if
code,language, orshowLineNumberschanges while a previous highlight is in-flight, the new highlight will not setmounted.current = truebecause the condition!mounted.currentwill be false after the first successful highlight.🔎 Suggested fix
useEffect(() => { + mounted.current = false; highlightCode(code, language, showLineNumbers).then(([light, dark]) => { if (!mounted.current) { setLightHtml(light); setDarkHtml(dark); mounted.current = true; } }); return () => { mounted.current = false; }; }, [code, language, showLineNumbers]);packages/workbench/src/components/internal/input-section.tsx (1)
87-87: Consider renamingmonacoHasErrorsto reflect the abstracted editor.The state variable
monacoHasErrorsreferences Monaco specifically, but the component now uses the abstractedJsonEditor. Consider renaming toeditorHasErrorsorvalidationErrorsfor clarity.packages/workbench/src/components/internal/json-editor.tsx (1)
173-183: Consider extracting the extensive CSS overrides into a CSS file or Tailwind classes.The inline style object and the long className string with CSS overrides for Monaco transparency are hard to maintain. While functionally correct, consider extracting these to a dedicated CSS module or using
@applyin a Tailwind layer for better maintainability.packages/workbench/src/components/internal/workbench-provider.tsx (1)
352-419: Consider using StructuredError for consistent error handling.Per coding guidelines,
StructuredErrorfrom@agentuity/coreshould be used for error handling. The error messages created at lines 403-412 and throughout the function could benefit from using this standardized error type.packages/workbench/src/hooks/useWorkbenchWebsocket.ts (1)
116-119: Consider usingnullinstead ofundefinedfor ref initialization.Using
undefinedfor ref initialization is valid, butnullis more conventional for refs that will hold object references. This is a minor consistency suggestion.🔎 Suggested fix
- const reconnectManagerRef = useRef<ReturnType<typeof createReconnectManager> | undefined>( - undefined - ); - const wsRef = useRef<WebSocket | undefined>(undefined); + const reconnectManagerRef = useRef<ReturnType<typeof createReconnectManager> | null>(null); + const wsRef = useRef<WebSocket | null>(null);
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
apps/testing/cloud-deployment/src/generated/app.tsis excluded by!**/generated/**apps/testing/integration-suite/src/generated/app.tsis excluded by!**/generated/**
📒 Files selected for processing (51)
apps/testing/integration-suite/src/agent/basic/basic-async.tseslint.config.mtspackages/cli/src/cmd/build/entry-generator.tspackages/cli/src/cmd/build/vite/agent-discovery.tspackages/cli/src/cmd/build/vite/metadata-generator.tspackages/runtime/src/_metadata.tspackages/runtime/src/_server.tspackages/runtime/src/_tokens.tspackages/runtime/src/agent.tspackages/runtime/src/workbench.tspackages/workbench/package.jsonpackages/workbench/src/base.csspackages/workbench/src/components/App.tsxpackages/workbench/src/components/ai-elements/actions.tsxpackages/workbench/src/components/ai-elements/code-block.tsxpackages/workbench/src/components/ai-elements/conversation.tsxpackages/workbench/src/components/ai-elements/message.tsxpackages/workbench/src/components/ai-elements/prompt-input.tsxpackages/workbench/src/components/ai-elements/shimmer.tsxpackages/workbench/src/components/internal/Chat.tsxpackages/workbench/src/components/internal/chat.tsxpackages/workbench/src/components/internal/header.tsxpackages/workbench/src/components/internal/input-section.tsxpackages/workbench/src/components/internal/json-editor.tsxpackages/workbench/src/components/internal/logo.tsxpackages/workbench/src/components/internal/resizable-provider.tsxpackages/workbench/src/components/internal/schema.tsxpackages/workbench/src/components/internal/workbench-provider.tsxpackages/workbench/src/components/ui/avatar.tsxpackages/workbench/src/components/ui/command.tsxpackages/workbench/src/components/ui/dialog.tsxpackages/workbench/src/components/ui/dropdown-menu.tsxpackages/workbench/src/components/ui/hover-card.tsxpackages/workbench/src/components/ui/input-group.tsxpackages/workbench/src/components/ui/input.tsxpackages/workbench/src/components/ui/scroll-area.tsxpackages/workbench/src/components/ui/textarea.tsxpackages/workbench/src/components/ui/theme-provider.tsxpackages/workbench/src/components/ui/tooltip.tsxpackages/workbench/src/hooks/useAgentSchemas.tspackages/workbench/src/hooks/useLogger.tspackages/workbench/src/hooks/useWorkbenchWebsocket.tspackages/workbench/src/index.tspackages/workbench/src/lib/utils.tspackages/workbench/src/server.tspackages/workbench/src/types/config.tspackages/workbench/tailwind.config.jspackages/workbench/test-app/index.htmlpackages/workbench/test-app/main.tsxpackages/workbench/test-app/styles.csspackages/workbench/test-app/vite.config.ts
💤 Files with no reviewable changes (3)
- packages/workbench/src/components/internal/Chat.tsx
- packages/workbench/tailwind.config.js
- packages/workbench/test-app/styles.css
🧰 Additional context used
📓 Path-based instructions (9)
apps/testing/integration-suite/src/**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (apps/testing/integration-suite/AGENTS.md)
Use path aliases for imports: @agents/* and @test/* instead of relative paths
Files:
apps/testing/integration-suite/src/agent/basic/basic-async.ts
apps/testing/integration-suite/src/agent/**/*.{ts,tsx}
📄 CodeRabbit inference engine (apps/testing/integration-suite/AGENTS.md)
apps/testing/integration-suite/src/agent/**/*.{ts,tsx}: Schema definitions must use s.record(keyType, valueType) with two arguments, not one
Schema definitions must use s.union(typeA, typeB) with arguments, not array s.union([typeA, typeB])
Agent schema pattern must include input and output objects with operation field for multi-operation agents
Session state uses ctx.session.state.set(key, value) and ctx.session.state.get(key) for request-scoped state
Thread state uses ctx.thread.state.set(key, value) and ctx.thread.state.get(key) for conversation-scoped persistent state
StructuredError uses pattern StructuredError(tag, message)<{ shape }>() with properties accessed directly on error instance
Error handling in agent handlers must use try-catch blocks and can transform errors into success responses
Agent eval creation uses agent.createEval(name, config) with handler returning success:true and metadata:{reason}
Agent eval results use passed:boolean for binary pass/fail or score:number (0.0-1.0) for scored results
Background tasks use ctx.waitUntil() with async function or promise, executing after response is sent
Session event listeners use ctx.session.addEventListener(eventName, callback) for 'completed' event
Thread event listeners use ctx.thread.addEventListener(eventName, callback) for 'destroyed' event
Each agent export must have a unique variable name to prevent naming collisions
Files:
apps/testing/integration-suite/src/agent/basic/basic-async.ts
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Use Prettier for code formatting with tabs (width 3), single quotes, and semicolons
Files:
apps/testing/integration-suite/src/agent/basic/basic-async.tspackages/workbench/src/components/ai-elements/message.tsxpackages/runtime/src/_tokens.tspackages/cli/src/cmd/build/vite/metadata-generator.tspackages/workbench/src/components/internal/chat.tsxpackages/workbench/src/components/internal/schema.tsxpackages/workbench/src/components/ui/input-group.tsxpackages/workbench/src/components/ai-elements/actions.tsxpackages/workbench/package.jsonpackages/workbench/src/server.tspackages/runtime/src/agent.tspackages/runtime/src/_metadata.tspackages/workbench/src/components/ai-elements/shimmer.tsxpackages/workbench/src/lib/utils.tspackages/workbench/src/components/internal/json-editor.tsxpackages/workbench/src/components/ui/command.tsxpackages/workbench/src/components/ui/textarea.tsxpackages/runtime/src/_server.tspackages/cli/src/cmd/build/vite/agent-discovery.tspackages/runtime/src/workbench.tspackages/workbench/src/components/ui/input.tsxpackages/workbench/src/components/ui/avatar.tsxpackages/workbench/src/components/ui/tooltip.tsxpackages/workbench/src/components/ui/dialog.tsxpackages/workbench/test-app/main.tsxpackages/workbench/src/components/internal/logo.tsxpackages/workbench/src/components/ui/scroll-area.tsxpackages/workbench/src/components/internal/input-section.tsxpackages/workbench/src/components/ai-elements/conversation.tsxpackages/workbench/src/components/internal/workbench-provider.tsxpackages/workbench/src/hooks/useWorkbenchWebsocket.tspackages/cli/src/cmd/build/entry-generator.tspackages/workbench/src/hooks/useLogger.tspackages/workbench/src/components/ui/theme-provider.tsxpackages/workbench/src/components/ui/dropdown-menu.tsxpackages/workbench/src/components/ai-elements/code-block.tsxpackages/workbench/src/hooks/useAgentSchemas.tspackages/workbench/src/components/internal/header.tsxpackages/workbench/src/types/config.tspackages/workbench/src/components/ai-elements/prompt-input.tsxpackages/workbench/test-app/vite.config.tspackages/workbench/src/components/ui/hover-card.tsxpackages/workbench/src/index.tspackages/workbench/src/components/App.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript strict mode with ESNext target and bundler moduleResolution
Files:
apps/testing/integration-suite/src/agent/basic/basic-async.tspackages/workbench/src/components/ai-elements/message.tsxpackages/runtime/src/_tokens.tspackages/cli/src/cmd/build/vite/metadata-generator.tspackages/workbench/src/components/internal/chat.tsxpackages/workbench/src/components/internal/schema.tsxpackages/workbench/src/components/ui/input-group.tsxpackages/workbench/src/components/ai-elements/actions.tsxpackages/workbench/src/server.tspackages/runtime/src/agent.tspackages/runtime/src/_metadata.tspackages/workbench/src/components/ai-elements/shimmer.tsxpackages/workbench/src/lib/utils.tspackages/workbench/src/components/internal/json-editor.tsxpackages/workbench/src/components/ui/command.tsxpackages/workbench/src/components/ui/textarea.tsxpackages/runtime/src/_server.tspackages/cli/src/cmd/build/vite/agent-discovery.tspackages/runtime/src/workbench.tspackages/workbench/src/components/ui/input.tsxpackages/workbench/src/components/ui/avatar.tsxpackages/workbench/src/components/ui/tooltip.tsxpackages/workbench/src/components/ui/dialog.tsxpackages/workbench/test-app/main.tsxpackages/workbench/src/components/internal/logo.tsxpackages/workbench/src/components/ui/scroll-area.tsxpackages/workbench/src/components/internal/input-section.tsxpackages/workbench/src/components/ai-elements/conversation.tsxpackages/workbench/src/components/internal/workbench-provider.tsxpackages/workbench/src/hooks/useWorkbenchWebsocket.tspackages/cli/src/cmd/build/entry-generator.tspackages/workbench/src/hooks/useLogger.tspackages/workbench/src/components/ui/theme-provider.tsxpackages/workbench/src/components/ui/dropdown-menu.tsxpackages/workbench/src/components/ai-elements/code-block.tsxpackages/workbench/src/hooks/useAgentSchemas.tspackages/workbench/src/components/internal/header.tsxpackages/workbench/src/types/config.tspackages/workbench/src/components/ai-elements/prompt-input.tsxpackages/workbench/test-app/vite.config.tspackages/workbench/src/components/ui/hover-card.tsxpackages/workbench/src/index.tspackages/workbench/src/components/App.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx}: UseStructuredErrorfrom@agentuity/corefor error handling
Ensure all errors AND warnings must be zero before committing
Files:
apps/testing/integration-suite/src/agent/basic/basic-async.tspackages/workbench/src/components/ai-elements/message.tsxpackages/runtime/src/_tokens.tspackages/cli/src/cmd/build/vite/metadata-generator.tspackages/workbench/src/components/internal/chat.tsxpackages/workbench/src/components/internal/schema.tsxpackages/workbench/src/components/ui/input-group.tsxpackages/workbench/src/components/ai-elements/actions.tsxpackages/workbench/src/server.tspackages/runtime/src/agent.tspackages/runtime/src/_metadata.tspackages/workbench/src/components/ai-elements/shimmer.tsxpackages/workbench/src/lib/utils.tspackages/workbench/src/components/internal/json-editor.tsxpackages/workbench/src/components/ui/command.tsxpackages/workbench/src/components/ui/textarea.tsxpackages/runtime/src/_server.tspackages/cli/src/cmd/build/vite/agent-discovery.tspackages/runtime/src/workbench.tspackages/workbench/src/components/ui/input.tsxpackages/workbench/src/components/ui/avatar.tsxpackages/workbench/src/components/ui/tooltip.tsxpackages/workbench/src/components/ui/dialog.tsxpackages/workbench/test-app/main.tsxpackages/workbench/src/components/internal/logo.tsxpackages/workbench/src/components/ui/scroll-area.tsxpackages/workbench/src/components/internal/input-section.tsxpackages/workbench/src/components/ai-elements/conversation.tsxpackages/workbench/src/components/internal/workbench-provider.tsxpackages/workbench/src/hooks/useWorkbenchWebsocket.tspackages/cli/src/cmd/build/entry-generator.tspackages/workbench/src/hooks/useLogger.tspackages/workbench/src/components/ui/theme-provider.tsxpackages/workbench/src/components/ui/dropdown-menu.tsxpackages/workbench/src/components/ai-elements/code-block.tsxpackages/workbench/src/hooks/useAgentSchemas.tspackages/workbench/src/components/internal/header.tsxpackages/workbench/src/types/config.tspackages/workbench/src/components/ai-elements/prompt-input.tsxpackages/workbench/test-app/vite.config.tspackages/workbench/src/components/ui/hover-card.tsxpackages/workbench/src/index.tspackages/workbench/src/components/App.tsx
packages/runtime/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (packages/runtime/AGENTS.md)
packages/runtime/src/**/*.{ts,tsx}: Usectx.loggerfor logging instead ofconsole.log
Useagent.validator()for automatic input validation in route handlers
Do NOT add type annotations to handler parameters - let TypeScript infer them from schemas
Every handler must receiveAgentContextwith logger, tracer, and storage utilities
Files:
packages/runtime/src/_tokens.tspackages/runtime/src/agent.tspackages/runtime/src/_metadata.tspackages/runtime/src/_server.tspackages/runtime/src/workbench.ts
packages/cli/src/cmd/**/*.ts
📄 CodeRabbit inference engine (packages/cli/AGENTS.md)
packages/cli/src/cmd/**/*.ts: Usetui.*helpers for formatted output instead of raw console logs
Usectx.loggerfor logging; calllogger.fatal()to log and exit with code 1
Files:
packages/cli/src/cmd/build/vite/metadata-generator.tspackages/cli/src/cmd/build/vite/agent-discovery.tspackages/cli/src/cmd/build/entry-generator.ts
packages/cli/src/**/*.ts
📄 CodeRabbit inference engine (packages/cli/AGENTS.md)
Use
Bun.file(f).exists()instead ofexistsSync(f)for file existence checks
Files:
packages/cli/src/cmd/build/vite/metadata-generator.tspackages/cli/src/cmd/build/vite/agent-discovery.tspackages/cli/src/cmd/build/entry-generator.ts
packages/*/src/index.ts
📄 CodeRabbit inference engine (AGENTS.md)
Use named exports from package
index.tsfiles
Files:
packages/workbench/src/index.ts
🧠 Learnings (2)
📚 Learning: 2025-12-21T00:31:41.858Z
Learnt from: jhaynie
Repo: agentuity/sdk PR: 274
File: packages/cli/src/cmd/build/vite/server-bundler.ts:12-41
Timestamp: 2025-12-21T00:31:41.858Z
Learning: In Bun runtime, BuildMessage and ResolveMessage are global types and are not exported from the bun module. Do not import { BuildMessage } from 'bun' or similar; these types are available globally and should be used without import. This applies to all TypeScript files that target the Bun runtime within the repository.
Applied to files:
apps/testing/integration-suite/src/agent/basic/basic-async.tspackages/runtime/src/_tokens.tspackages/cli/src/cmd/build/vite/metadata-generator.tspackages/workbench/src/server.tspackages/runtime/src/agent.tspackages/runtime/src/_metadata.tspackages/workbench/src/lib/utils.tspackages/runtime/src/_server.tspackages/cli/src/cmd/build/vite/agent-discovery.tspackages/runtime/src/workbench.tspackages/workbench/src/hooks/useWorkbenchWebsocket.tspackages/cli/src/cmd/build/entry-generator.tspackages/workbench/src/hooks/useLogger.tspackages/workbench/src/hooks/useAgentSchemas.tspackages/workbench/src/types/config.tspackages/workbench/test-app/vite.config.tspackages/workbench/src/index.ts
📚 Learning: 2025-12-13T14:15:18.261Z
Learnt from: jhaynie
Repo: agentuity/sdk PR: 168
File: packages/runtime/src/session.ts:536-546
Timestamp: 2025-12-13T14:15:18.261Z
Learning: The agentuity/runtime package is Bun-only; during code reviews, do not replace Bun-native APIs (e.g., Bun.CryptoHasher, Bun.serve, and other Bun namespace APIs) with Node.js alternatives. Review changes with the assumption that runtime runs on Bun, and ensure any edits preserve Bun compatibility and do not introduce Node.js-specific fallbacks. Apply this guidance broadly to files under packages/runtime (e.g., packages/runtime/src/...); if there are conditional environment checks, document why Bun is required and avoid dereferencing Bun-only APIs in non-Bun contexts.
Applied to files:
packages/runtime/src/_tokens.tspackages/runtime/src/agent.tspackages/runtime/src/_metadata.tspackages/runtime/src/_server.tspackages/runtime/src/workbench.ts
🧬 Code graph analysis (18)
packages/workbench/src/components/ai-elements/message.tsx (1)
packages/workbench/src/lib/utils.ts (1)
cn(5-7)
packages/workbench/src/components/internal/chat.tsx (8)
packages/workbench/src/components/internal/workbench-provider.tsx (1)
useWorkbench(13-21)packages/workbench/src/hooks/useLogger.ts (1)
useLogger(41-63)packages/workbench/src/components/ai-elements/conversation.tsx (2)
Conversation(12-20)ConversationContent(26-31)packages/workbench/src/lib/utils.ts (2)
cn(5-7)formatErrorForCopy(162-170)packages/workbench/src/components/ai-elements/message.tsx (2)
Message(11-20)MessageContent(42-54)packages/workbench/src/components/ai-elements/code-block.tsx (1)
CodeBlock(110-172)packages/workbench/src/components/ai-elements/actions.tsx (2)
Actions(15-19)Action(26-65)packages/workbench/src/components/internal/input-section.tsx (1)
InputSection(68-513)
packages/workbench/src/components/internal/schema.tsx (2)
packages/workbench/src/components/ui/scroll-area.tsx (1)
ScrollArea(56-56)packages/workbench/src/components/ai-elements/code-block.tsx (2)
CodeBlock(110-172)CodeBlockCopyButton(180-225)
packages/workbench/src/components/ui/input-group.tsx (4)
packages/workbench/src/lib/utils.ts (1)
cn(5-7)packages/workbench/src/components/ui/button.tsx (1)
Button(58-58)packages/workbench/src/components/ui/input.tsx (1)
Input(20-20)packages/workbench/src/components/ui/textarea.tsx (1)
Textarea(18-18)
packages/workbench/src/lib/utils.ts (1)
packages/workbench/src/types/config.ts (1)
ErrorInfo(41-46)
packages/workbench/src/components/internal/json-editor.tsx (1)
packages/workbench/src/components/ui/theme-provider.tsx (1)
useTheme(66-73)
packages/workbench/src/components/ui/command.tsx (1)
packages/workbench/src/lib/utils.ts (1)
cn(5-7)
packages/workbench/src/components/ui/textarea.tsx (1)
packages/workbench/src/lib/utils.ts (1)
cn(5-7)
packages/runtime/src/_server.ts (1)
packages/runtime/src/_tokens.ts (1)
TokenSpanProcessor(53-112)
packages/workbench/src/components/ui/input.tsx (1)
packages/workbench/src/lib/utils.ts (1)
cn(5-7)
packages/workbench/src/components/ui/avatar.tsx (1)
packages/workbench/src/lib/utils.ts (1)
cn(5-7)
packages/workbench/src/components/ui/dialog.tsx (1)
packages/workbench/src/lib/utils.ts (1)
cn(5-7)
packages/workbench/src/components/ui/scroll-area.tsx (1)
packages/workbench/src/lib/utils.ts (1)
cn(5-7)
packages/workbench/src/components/internal/input-section.tsx (6)
packages/workbench/src/hooks/useAgentSchemas.ts (1)
AgentSchemaData(25-29)packages/workbench/src/hooks/useLogger.ts (1)
useLogger(41-63)packages/workbench/src/components/internal/workbench-provider.tsx (1)
useWorkbench(13-21)packages/workbench/src/index.ts (1)
useWorkbench(5-5)packages/workbench/src/lib/utils.ts (2)
cn(5-7)generateTemplateFromSchema(154-160)packages/workbench/src/components/internal/json-editor.tsx (1)
JsonEditor(111-394)
packages/workbench/src/components/ai-elements/conversation.tsx (2)
packages/workbench/src/lib/utils.ts (1)
cn(5-7)packages/workbench/src/components/ui/button.tsx (1)
Button(58-58)
packages/workbench/src/components/internal/workbench-provider.tsx (3)
packages/workbench/src/types/config.ts (1)
WorkbenchContextType(15-39)packages/workbench/src/index.ts (2)
useWorkbench(5-5)WorkbenchProvider(5-5)packages/workbench/src/hooks/useLogger.ts (1)
useLogger(41-63)
packages/workbench/src/components/ui/dropdown-menu.tsx (1)
packages/workbench/src/lib/utils.ts (1)
cn(5-7)
packages/workbench/src/hooks/useAgentSchemas.ts (1)
packages/cli/src/cmd/build/vite/agent-discovery.ts (1)
AgentMetadata(54-65)
🪛 ast-grep (0.40.3)
packages/workbench/src/components/ai-elements/code-block.tsx
[warning] 152-152: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
[warning] 159-159: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Playwright E2E Smoke Test
| return ctx.json({ success: true, data: result ?? null }); | ||
| } catch (error) { | ||
| return ctx.json( | ||
| { | ||
| error: 'Internal server error', | ||
| message: error instanceof Error ? error.message : String(error), | ||
| const err = error instanceof Error ? error : new Error(String(error)); | ||
| // Return 200 with wrapped error so UI can display it properly | ||
| return ctx.json({ | ||
| success: false, | ||
| error: { | ||
| message: err.message, | ||
| stack: err.stack, | ||
| code: 'code' in err && typeof err.code === 'string' ? err.code : 'EXECUTION_ERROR', | ||
| cause: err.cause, | ||
| }, | ||
| { status: 500 } | ||
| ); | ||
| }); |
There was a problem hiding this comment.
Consider conditionally omitting stack traces in production.
The error response includes err.stack, which exposes internal file paths and code structure. While helpful for debugging in development, this could leak sensitive implementation details in production environments.
🔎 Proposed fix - conditionally include stack
return ctx.json({
success: false,
error: {
message: err.message,
- stack: err.stack,
+ stack: process.env.NODE_ENV !== 'production' ? err.stack : undefined,
code: 'code' in err && typeof err.code === 'string' ? err.code : 'EXECUTION_ERROR',
cause: err.cause,
},
});🤖 Prompt for AI Agents
In packages/runtime/src/workbench.ts around lines 115 to 127, the error response
always includes err.stack which can leak internal paths; change the response to
include the stack only when the environment indicates non-production (e.g.,
process.env.NODE_ENV !== 'production' or a runtime config flag). Build the error
object first, add message, code and cause as before, and conditionally add stack
when allowed; ensure production responses omit the stack (or replace with
undefined) while preserving development visibility.
| --muted-foreground: 240 5% 64.9%; | ||
| --accent: 240 3.7% 15.9%; | ||
| --accent-foreground: 0 0% 98%; | ||
| --destructive: 345, 83%, 41%; |
There was a problem hiding this comment.
Inconsistent HSL value syntax may cause parsing issues.
This value uses a comma after the first number (345, 83%, 41%) while all other HSL values in the file use spaces (e.g., 347 77% 50% in :root). Modern CSS hsl() accepts space-separated values, but mixing comma and space syntax may cause inconsistent behavior when used with hsl(var(--destructive)).
🔎 Proposed fix
- --destructive: 345, 83%, 41%;
+ --destructive: 345 83% 41%;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| --destructive: 345, 83%, 41%; | |
| --destructive: 345 83% 41%; |
🤖 Prompt for AI Agents
In packages/workbench/src/base.css around line 55, the CSS custom property
--destructive is defined using comma-separated HSL values ("345, 83%, 41%")
which is inconsistent with the rest of the file that uses space-separated HSL
syntax; update the value to space-separated format ("345 83% 41%") so
hsl(var(--destructive)) parses consistently across browsers and matches the
file's HSL style.
| body { | ||
| scrollbar-width: 12px; | ||
| scrollbar-color: var(--color-gray-200) transparent; | ||
| } |
There was a problem hiding this comment.
scrollbar-width property only accepts keyword values.
The CSS scrollbar-width property accepts only auto, thin, or none—not pixel values. The 12px value will be ignored by standards-compliant browsers. If you need a specific width, consider using WebKit-specific pseudo-elements (::-webkit-scrollbar) or change to a valid keyword.
🔎 Proposed fix
body {
- scrollbar-width: 12px;
+ scrollbar-width: thin;
scrollbar-color: var(--color-gray-200) transparent;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| body { | |
| scrollbar-width: 12px; | |
| scrollbar-color: var(--color-gray-200) transparent; | |
| } | |
| body { | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--color-gray-200) transparent; | |
| } |
🤖 Prompt for AI Agents
In packages/workbench/src/base.css around lines 227 to 230, the rule sets
scrollbar-width: 12px which is invalid because scrollbar-width only accepts the
keywords auto, thin, or none; change the value to a valid keyword (e.g., thin or
auto) or remove the property, or if a specific pixel width is required implement
WebKit-specific pseudo-elements (:: -webkit-scrollbar and related selectors)
with corresponding width settings to target browsers that support it while
keeping a standards-compliant fallback.
| "use client"; | ||
|
|
||
| import { Button } from '../ui/button'; | ||
| import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'; | ||
| import { cn } from '../../lib/utils'; | ||
| import type { ComponentProps } from 'react'; | ||
| import type { ComponentProps } from "react"; | ||
| import { cn } from "../../lib/utils"; | ||
| import { Button } from "../ui/button"; | ||
| import { | ||
| Tooltip, | ||
| TooltipContent, | ||
| TooltipProvider, | ||
| TooltipTrigger, | ||
| } from "../ui/tooltip"; |
There was a problem hiding this comment.
Revert to single quotes per coding guidelines.
The imports and "use client" directive use double quotes, but the coding guidelines explicitly require single quotes for TypeScript files.
As per coding guidelines, all string literals should use single quotes to maintain consistency with the project's Prettier configuration.
🔎 Proposed fix to use single quotes
-"use client";
+'use client';
-import type { ComponentProps } from "react";
-import { cn } from "../../lib/utils";
+import type { ComponentProps } from 'react';
+import { cn } from '../../lib/utils';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
-} from "../ui/tooltip";
+} from '../ui/tooltip';🤖 Prompt for AI Agents
packages/workbench/src/components/ai-elements/actions.tsx lines 1-11: the file
uses double quotes for the "use client" directive and import string literals but
the project's TypeScript style requires single quotes; update the file to use
single quotes for the "use client" directive and all import strings (e.g.,
'react', '../../lib/utils', '../ui/button', and tooltip imports) so string
literals conform to the coding guidelines and Prettier configuration.
| } from "../ui/tooltip"; | ||
|
|
||
| export type ActionsProps = ComponentProps<'div'>; | ||
| export type ActionsProps = ComponentProps<"div">; |
There was a problem hiding this comment.
Use single quotes in type annotation.
The type parameter uses double quotes but should use single quotes per coding guidelines.
🔎 Proposed fix
-export type ActionsProps = ComponentProps<"div">;
+export type ActionsProps = ComponentProps<'div'>;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export type ActionsProps = ComponentProps<"div">; | |
| export type ActionsProps = ComponentProps<'div'>; |
🤖 Prompt for AI Agents
In packages/workbench/src/components/ai-elements/actions.tsx around line 13, the
type parameter uses double quotes (ComponentProps<"div">) but the project coding
guideline requires single quotes; update the type annotation to use single
quotes (ComponentProps<'div'>) so the declaration follows the style guide.
| "use client"; | ||
|
|
||
| import { cn } from '../../lib/utils'; | ||
| import { motion } from 'motion/react'; | ||
| import { type CSSProperties, type ElementType, type JSX, memo, useMemo } from 'react'; | ||
| import { motion } from "motion/react"; | ||
| import { | ||
| type CSSProperties, | ||
| type ElementType, | ||
| type JSX, | ||
| memo, | ||
| useMemo, | ||
| } from "react"; | ||
| import { cn } from "../../lib/utils"; |
There was a problem hiding this comment.
Inconsistent quote style violates coding guidelines.
The coding guidelines specify using single quotes, but this file uses double quotes throughout the imports. Per the guidelines: "Use Prettier for code formatting with tabs (width 3), single quotes, and semicolons."
The "use client" directive on line 1 is acceptable with double quotes as it's a Next.js convention, but all module imports (lines 3, 11) should use single quotes.
Based on coding guidelines, please ensure Prettier is configured correctly and reformat the file to use single quotes consistently.
🤖 Prompt for AI Agents
In packages/workbench/src/components/ai-elements/shimmer.tsx lines 1 to 11, the
import statements use double quotes which violates the project's single-quote
style (the "use client" directive may remain double-quoted). Update the module
import lines (e.g., the motion import and the react/utils imports) to use single
quotes instead of double quotes, ensure semicolons remain, and re-run Prettier
(configure Prettier to use singleQuotes: true, tabWidth: 3) or your project's
formatter so the file is reformatted consistently.
| animate={{ backgroundPosition: "0% center" }} | ||
| className={cn( | ||
| 'relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent', | ||
| '[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]', | ||
| className | ||
| "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent", | ||
| "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]", | ||
| className, | ||
| )} | ||
| initial={{ backgroundPosition: '100% center' }} | ||
| initial={{ backgroundPosition: "100% center" }} | ||
| style={ | ||
| { | ||
| '--spread': `${dynamicSpread}px`, | ||
| "--spread": `${dynamicSpread}px`, | ||
| backgroundImage: | ||
| 'var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))', | ||
| "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))", | ||
| } as CSSProperties | ||
| } | ||
| transition={{ | ||
| repeat: Number.POSITIVE_INFINITY, | ||
| duration, | ||
| ease: 'linear', | ||
| ease: "linear", | ||
| }} |
There was a problem hiding this comment.
Quote style violations in JSX and component body.
Multiple string literals use double quotes instead of single quotes as required by the coding guidelines:
- Line 39:
"0% center"should be'0% center' - Lines 41-42: All string literals should use single quotes
- Line 45:
"100% center"should be'100% center' - Line 48:
"--spread"should be'--spread' - Line 50:
"var(--bg), linear-gradient..."should use single quotes - Line 56:
"linear"should be'linear'
The AI summary mentions a "project-wide shift toward double-quoted literals," but this directly contradicts the coding guidelines which explicitly require single quotes. Please clarify the intended quote style and ensure consistency across the project.
🤖 Prompt for AI Agents
packages/workbench/src/components/ai-elements/shimmer.tsx lines 39-57: several
JSX/string literals use double quotes; change them to single quotes to match
project rules (e.g. '0% center', '100% center', '--spread', and the
backgroundImage string and ease value). Update the className array entries to
use single-quoted strings, the initial/animate props to single-quoted values,
and the style object's CSS custom property key/value to single quotes; then run
the linter/formatter and fix any remaining quote violations (or adjust
.eslintrc/.prettier config only if the repo-wide rule is incorrect) to ensure
consistent single-quote usage.
| {selectedAgentData.examples.map((example) => { | ||
| const label = | ||
| typeof example === 'object' && example !== null | ||
| ? JSON.stringify(example).substring(0, 60) | ||
| : String(example).substring(0, 60); | ||
|
|
||
| return ( | ||
| <CommandItem | ||
| key={label} | ||
| onSelect={() => { | ||
| const formatted = | ||
| typeof example === 'object' | ||
| ? JSON.stringify(example, null, 2) | ||
| : String(example); | ||
|
|
||
| onChange(formatted); | ||
| setPrefillOpen(false); | ||
| }} | ||
| > | ||
| <FileJson className="size-4" /> | ||
| <span className="truncate font-mono">{label}</span> | ||
| </CommandItem> | ||
| ); |
There was a problem hiding this comment.
Non-unique key warning: using truncated label as key may cause issues.
The key={label} uses a truncated string (max 60 chars) which may not be unique if multiple examples share the same prefix. Consider using the index or a hash of the full example content.
🔎 Suggested fix
- {selectedAgentData.examples.map((example) => {
+ {selectedAgentData.examples.map((example, index) => {
const label =
typeof example === 'object' && example !== null
? JSON.stringify(example).substring(0, 60)
: String(example).substring(0, 60);
return (
<CommandItem
- key={label}
+ key={`example-${index}`}
onSelect={() => {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {selectedAgentData.examples.map((example) => { | |
| const label = | |
| typeof example === 'object' && example !== null | |
| ? JSON.stringify(example).substring(0, 60) | |
| : String(example).substring(0, 60); | |
| return ( | |
| <CommandItem | |
| key={label} | |
| onSelect={() => { | |
| const formatted = | |
| typeof example === 'object' | |
| ? JSON.stringify(example, null, 2) | |
| : String(example); | |
| onChange(formatted); | |
| setPrefillOpen(false); | |
| }} | |
| > | |
| <FileJson className="size-4" /> | |
| <span className="truncate font-mono">{label}</span> | |
| </CommandItem> | |
| ); | |
| {selectedAgentData.examples.map((example, index) => { | |
| const label = | |
| typeof example === 'object' && example !== null | |
| ? JSON.stringify(example).substring(0, 60) | |
| : String(example).substring(0, 60); | |
| return ( | |
| <CommandItem | |
| key={`example-${index}`} | |
| onSelect={() => { | |
| const formatted = | |
| typeof example === 'object' | |
| ? JSON.stringify(example, null, 2) | |
| : String(example); | |
| onChange(formatted); | |
| setPrefillOpen(false); | |
| }} | |
| > | |
| <FileJson className="size-4" /> | |
| <span className="truncate font-mono">{label}</span> | |
| </CommandItem> | |
| ); |
🤖 Prompt for AI Agents
In packages/workbench/src/components/internal/input-section.tsx around lines
374-396, the list uses key={label} where label is a truncated (60-char) string
which can collide; replace with a stable unique key derived from the full
example content or an existing unique id: compute a deterministic identifier
(e.g., hash of JSON.stringify(example) or the full stringified example) and use
that or combine it with the item index for uniqueness; if examples have a real
id field use that instead and avoid relying on the truncated label.
| "relative flex size-8 shrink-0 overflow-hidden rounded-full", | ||
| className, |
There was a problem hiding this comment.
Quote style does not match coding guidelines.
The coding guidelines specify single quotes for formatting ('string'), but the file uses double quotes ("string"). Please update all string literals to use single quotes to comply with the Prettier configuration.
🔎 Proposed fix for quote style
function Avatar({
className,
...props
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
return (
<AvatarPrimitive.Root
data-slot="avatar"
className={cn(
- "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+ 'relative flex size-8 shrink-0 overflow-hidden rounded-full',
className,
)}
{...props}
/>
);
}
function AvatarImage({
className,
...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
return (
<AvatarPrimitive.Image
data-slot="avatar-image"
- className={cn("aspect-square size-full", className)}
+ className={cn('aspect-square size-full', className)}
{...props}
/>
);
}
function AvatarFallback({
className,
...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
return (
<AvatarPrimitive.Fallback
data-slot="avatar-fallback"
className={cn(
- "bg-muted flex size-full items-center justify-center rounded-full",
+ 'bg-muted flex size-full items-center justify-center rounded-full',
className,
)}
{...props}
/>
);
}Per coding guidelines, all files matching **/*.{ts,tsx,js,jsx,json} must use single quotes with Prettier.
Also applies to: 29-29, 43-44
🤖 Prompt for AI Agents
packages/workbench/src/components/ui/avatar.tsx lines 14-15 (also apply to 29-29
and 43-44): string literals are using double quotes instead of the project's
single-quote style; update those string literals to use single quotes (e.g.
"..." → '...') across the listed lines, ensure any concatenation or template
usage remains unchanged, and run Prettier/linters to confirm the file matches
the project's formatting rules.
| import type * as React from "react"; | ||
|
|
||
| import { cn } from '../../lib/utils'; | ||
| import { cn } from "../../lib/utils"; | ||
|
|
||
| function Input({ className, type, ...props }: React.ComponentProps<'input'>) { | ||
| function Input({ className, type, ...props }: React.ComponentProps<"input">) { | ||
| return ( | ||
| <input | ||
| type={type} | ||
| data-slot="input" | ||
| className={cn( | ||
| 'border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', | ||
| 'aria-invalid:focus-visible:ring-0', | ||
| className | ||
| "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", | ||
| "aria-invalid:focus-visible:ring-0", | ||
| className, | ||
| )} |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Check for prettier configuration files
find . -type f \( -name ".prettierrc*" -o -name "prettier.config.*" \) | head -20Repository: agentuity/sdk
Length of output: 70
🏁 Script executed:
# Check package.json for prettier configuration
cat package.json | grep -A 20 '"prettier"'Repository: agentuity/sdk
Length of output: 231
🏁 Script executed:
# Examine the actual input.tsx file to verify quote usage
cat packages/workbench/src/components/ui/input.tsxRepository: agentuity/sdk
Length of output: 1027
🏁 Script executed:
# Check other UI component files for consistency
ls -la packages/workbench/src/components/ui/ | head -20Repository: agentuity/sdk
Length of output: 1170
🏁 Script executed:
cat .prettierrcRepository: agentuity/sdk
Length of output: 181
🏁 Script executed:
# Check quote style in a few other UI component files
head -15 packages/workbench/src/components/ui/button.tsx
head -15 packages/workbench/src/components/ui/textarea.tsxRepository: agentuity/sdk
Length of output: 1730
Run Prettier on this file to enforce configured single quotes.
The .prettierrc configuration requires singleQuote: true, but this file (and other UI components like textarea.tsx) uses double quotes. Reformat with Prettier to comply with the project's formatting standards.
🤖 Prompt for AI Agents
In packages/workbench/src/components/ui/input.tsx around lines 1 to 14 the file
uses double quotes for strings/JSX attributes but the project Prettier config
requires singleQuote: true; reformat the file (and other affected UI components
like textarea.tsx) with the project's Prettier configuration (or run the
configured format script) so all string literals and JSX attributes use single
quotes and whitespace/line breaks match the repo style.
Summary by CodeRabbit
Release Notes
New Features
UI/UX Improvements
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.