feat(logs): add params column for image request data - #1255
Conversation
Add a params JSON column to the log schema to track additional request
parameters like image_config (aspect_ratio and image_size). The params
field will be {} if no image config is specified.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
WalkthroughPropagates optional image configuration through chat logging: Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant UI as Dashboard UI
participant Playground as Playground Client
participant Gateway as Gateway Chat
participant Logger as createLogEntry
participant DB as Log DB
UI->>Playground: user sets image prefs (optional)
Playground->>Gateway: Chat request (may include image_config)
Gateway->>Logger: build log entry (..., imageConfig)
Logger-->>Gateway: log entry (includes params.image_config)
Gateway->>DB: insert log row (params JSON)
DB-->>Gateway: insert result
Gateway-->>Playground: response
Playground->>UI: display response
UI->>DB: query log (reads params)
DB-->>UI: returns log with params
UI-->>UI: render "Additional Parameters"
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🧰 Additional context used📓 Path-based instructions (6)**/*.{js,ts,jsx,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
apps/{ui,playground}/**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
apps/{ui,playground}/src/**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
apps/ui/**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧬 Code graph analysis (1)apps/ui/src/components/dashboard/log-card.tsx (1)
⏰ 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). (10)
🔇 Additional comments (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Add recursive rendering of params object in log card UI. Display "Additional Parameters" section below "Model Parameters" with nicely formatted fields for each value in the object. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/ui/src/components/dashboard/log-card.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,ts,jsx,tsx}: Always use top-levelimport, never use require or dynamic imports
No unnecessary code comments
Files:
apps/ui/src/components/dashboard/log-card.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use cookies for user-settings which are not saved in the database to ensure SSR works
**/*.{ts,tsx,js,jsx}: Always use tabs for indentation
No unnecessary code comments
Files:
apps/ui/src/components/dashboard/log-card.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Use Drizzle ORM with latest object syntax for database operations
For database reads: Usedb().query.<table>.findMany()ordb().query.<table>.findFirst()
**/*.{ts,tsx}: Never useanyoras anyunless absolutely necessary in TypeScript code
Always use top-levelimport, never use require or dynamic imports
Use cookies for user-settings which are not saved in the database to ensure SSR works
Use Drizzle ORM with latest object syntax for database operations
For database reads: Usedb().query.<table>.findMany()ordb().query.<table>.findFirst()
Files:
apps/ui/src/components/dashboard/log-card.tsx
apps/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Next.js App Router with React Server Components for frontend development
Files:
apps/ui/src/components/dashboard/log-card.tsx
apps/{ui,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use
next/linkfor links andnext/navigation's router for programmatic navigation
Files:
apps/ui/src/components/dashboard/log-card.tsx
apps/{ui,playground}/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use
next/linkfor links andnext/navigation's router for programmatic navigation in Next.js
Files:
apps/ui/src/components/dashboard/log-card.tsx
🧬 Code graph analysis (1)
apps/ui/src/components/dashboard/log-card.tsx (1)
packages/db/src/schema.ts (1)
log(378-486)
⏰ 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). (10)
- GitHub Check: build / run
- GitHub Check: test / run
- GitHub Check: lint / run
- GitHub Check: generate / run
- GitHub Check: e2e-shards (5)
- GitHub Check: e2e-shards (2)
- GitHub Check: e2e-shards (1)
- GitHub Check: e2e-shards (3)
- GitHub Check: e2e-shards (4)
- GitHub Check: autofix
🔇 Additional comments (1)
apps/ui/src/components/dashboard/log-card.tsx (1)
639-646: LGTM!The "Additional Parameters" section is well-implemented with proper conditional rendering and consistent styling that matches other detail sections.
| // Recursively render params object | ||
| const renderParams = ( | ||
| obj: Record<string, any>, | ||
| depth = 0, | ||
| ): React.ReactNode => { | ||
| return Object.entries(obj).map(([key, value]) => { | ||
| const formattedKey = key | ||
| .replace(/_/g, " ") | ||
| .replace(/\b\w/g, (l) => l.toUpperCase()); | ||
|
|
||
| if (value === null || value === undefined) { | ||
| return null; | ||
| } | ||
|
|
||
| if (typeof value === "object" && !Array.isArray(value)) { | ||
| return ( | ||
| <div key={key} className="contents"> | ||
| <div className="text-muted-foreground col-span-2 font-medium mt-2 first:mt-0"> | ||
| {formattedKey} | ||
| </div> | ||
| {renderParams(value, depth + 1)} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div key={key} className="contents"> | ||
| <div className="text-muted-foreground">{formattedKey}</div> | ||
| <div>{Array.isArray(value) ? value.join(", ") : String(value)}</div> | ||
| </div> | ||
| ); | ||
| }); | ||
| }; |
There was a problem hiding this comment.
Replace any type and remove unused parameter.
Two issues with this function:
-
The use of
Record<string, any>violates the coding guideline that prohibitsanytypes unless absolutely necessary. Replace withRecord<string, unknown>for better type safety. -
The
depthparameter is declared but never used in the function logic.
Apply this diff:
- const renderParams = (
- obj: Record<string, any>,
- depth = 0,
- ): React.ReactNode => {
+ const renderParams = (obj: Record<string, unknown>): React.ReactNode => {
return Object.entries(obj).map(([key, value]) => {
const formattedKey = key
.replace(/_/g, " ")
.replace(/\b\w/g, (l) => l.toUpperCase());
if (value === null || value === undefined) {
return null;
}
if (typeof value === "object" && !Array.isArray(value)) {
return (
<div key={key} className="contents">
<div className="text-muted-foreground col-span-2 font-medium mt-2 first:mt-0">
{formattedKey}
</div>
- {renderParams(value, depth + 1)}
+ {renderParams(value as Record<string, unknown>)}
</div>
);
}
return (
<div key={key} className="contents">
<div className="text-muted-foreground">{formattedKey}</div>
<div>{Array.isArray(value) ? value.join(", ") : String(value)}</div>
</div>
);
});
};As per coding guidelines, avoid any types in TypeScript code.
📝 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.
| // Recursively render params object | |
| const renderParams = ( | |
| obj: Record<string, any>, | |
| depth = 0, | |
| ): React.ReactNode => { | |
| return Object.entries(obj).map(([key, value]) => { | |
| const formattedKey = key | |
| .replace(/_/g, " ") | |
| .replace(/\b\w/g, (l) => l.toUpperCase()); | |
| if (value === null || value === undefined) { | |
| return null; | |
| } | |
| if (typeof value === "object" && !Array.isArray(value)) { | |
| return ( | |
| <div key={key} className="contents"> | |
| <div className="text-muted-foreground col-span-2 font-medium mt-2 first:mt-0"> | |
| {formattedKey} | |
| </div> | |
| {renderParams(value, depth + 1)} | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div key={key} className="contents"> | |
| <div className="text-muted-foreground">{formattedKey}</div> | |
| <div>{Array.isArray(value) ? value.join(", ") : String(value)}</div> | |
| </div> | |
| ); | |
| }); | |
| }; | |
| // Recursively render params object | |
| const renderParams = (obj: Record<string, unknown>): React.ReactNode => { | |
| return Object.entries(obj).map(([key, value]) => { | |
| const formattedKey = key | |
| .replace(/_/g, " ") | |
| .replace(/\b\w/g, (l) => l.toUpperCase()); | |
| if (value === null || value === undefined) { | |
| return null; | |
| } | |
| if (typeof value === "object" && !Array.isArray(value)) { | |
| return ( | |
| <div key={key} className="contents"> | |
| <div className="text-muted-foreground col-span-2 font-medium mt-2 first:mt-0"> | |
| {formattedKey} | |
| </div> | |
| {renderParams(value as Record<string, unknown>)} | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div key={key} className="contents"> | |
| <div className="text-muted-foreground">{formattedKey}</div> | |
| <div>{Array.isArray(value) ? value.join(", ") : String(value)}</div> | |
| </div> | |
| ); | |
| }); | |
| }; |
🤖 Prompt for AI Agents
In apps/ui/src/components/dashboard/log-card.tsx around lines 50 to 82, replace
the permissive any type and remove the unused depth parameter: change the
function signature to accept obj: Record<string, unknown> (drop the depth
parameter), update runtime checks to guard against null (e.g. typeof value ===
"object" && value !== null && !Array.isArray(value)) and when recursing cast the
value to Record<string, unknown> (or narrow it) before passing to renderParams;
ensure return types stay the same and remove any references to depth.
- Flatten nested objects in params to show only leaf values - Don't include aspect_ratio when set to "auto" - Don't include image_size when set to default "1K" - Use conditional spread to only include non-default values 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 participant
Add a params JSON column to the log schema to track additional request parameters like image_config (aspect_ratio and image_size). The column stores {} when no image config is specified.
Changes
paramsJSON column to log schemacreateLogEntryfunction to populate params with image config dataTesting
Summary by CodeRabbit
New Features
Chores
✏️ Tip: You can customize this high-level summary in your review settings.