feat(dashboard): generalize landing page use cases#43
Conversation
…t appeal Replace product-specific use cases (ClickHouse, stamps) with general, framework-agnostic examples: vibe-coded chatbot, multi-session agent, agent analytics, and universal framework support. New SVG illustrations for each. Extract ACCENT constant and deduplicate framework nodes. Co-Authored-By: Duyet Le <me@duyet.net> Co-Authored-By: duyetbot <bot@duyet.net>
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request generalizes the landing page's displayed use cases to emphasize the universal applicability of AgentState. By replacing product-specific examples with broader agent-centric scenarios, the messaging now better reflects that AgentState works for any agent, focusing on concepts like vibe coding and zero database setup. Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
📝 WalkthroughWalkthroughThis pull request updates the landing page use cases component by replacing illustration components and restructuring the useCases array with new tags, titles, descriptions, and a new central hub-based framework illustration. The public function signature remains unchanged. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
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 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request effectively generalizes the use cases on the landing page, replacing specific examples with broader, more universal ones. The introduction of new SVG illustrations aligns well with the updated messaging. The code is improved by extracting the ACCENT color into a constant and using a data array to deduplicate the rendering of framework nodes in the UniversalFrameworkIllustration. My review includes one suggestion to further improve maintainability by replacing magic numbers with named constants.
| {FRAMEWORK_NODES.map(({ rx, ry, lx1, ly1, lx2, ly2 }) => ( | ||
| <g key={`${rx}-${ry}`}> | ||
| <rect x={rx} y={ry} width="50" height="28" rx="5" stroke="currentColor" strokeWidth="1.2" opacity="0.3" /> | ||
| <line x1={rx + 8} y1={ry + 10} x2={rx + 42} y2={ry + 10} stroke="currentColor" strokeWidth="1" opacity="0.2" /> | ||
| <line x1={rx + 8} y1={ry + 20} x2={rx + 32} y2={ry + 20} stroke="currentColor" strokeWidth="1" opacity="0.15" /> | ||
| <line x1={lx1} y1={ly1} x2={lx2} y2={ly2} stroke="currentColor" strokeWidth="1" strokeDasharray="4 3" opacity="0.2" /> | ||
| </g> | ||
| ))} |
There was a problem hiding this comment.
While using a data array to render the framework nodes is a great improvement, the rendering logic inside the .map() still contains several magic numbers for dimensions and positions (e.g., 50, 28, 8, 10, 42). Extracting these into named constants would improve readability and make it easier to adjust the node's appearance in the future. For a small, static list like this, defining them inside the map callback is an acceptable trade-off for improved clarity.
{FRAMEWORK_NODES.map(({ rx, ry, lx1, ly1, lx2, ly2 }) => {
const NODE_WIDTH = 50;
const NODE_HEIGHT = 28;
const NODE_RX = 5;
const PADDING_X = 8;
const LINE_1_Y_REL = 10;
const LINE_1_X2_REL = 42;
const LINE_2_Y_REL = 20;
const LINE_2_X2_REL = 32;
return (
<g key={`${rx}-${ry}`}>
<rect x={rx} y={ry} width={NODE_WIDTH} height={NODE_HEIGHT} rx={NODE_RX} stroke="currentColor" strokeWidth="1.2" opacity="0.3" />
<line x1={rx + PADDING_X} y1={ry + LINE_1_Y_REL} x2={rx + LINE_1_X2_REL} y2={ry + LINE_1_Y_REL} stroke="currentColor" strokeWidth="1" opacity="0.2" />
<line x1={rx + PADDING_X} y1={ry + LINE_2_Y_REL} x2={rx + LINE_2_X2_REL} y2={ry + LINE_2_Y_REL} stroke="currentColor" strokeWidth="1" opacity="0.15" />
<line x1={lx1} y1={ly1} x2={lx2} y2={ly2} stroke="currentColor" strokeWidth="1" strokeDasharray="4 3" opacity="0.2" />
</g>
);
})}
![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
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/dashboard/src/components/landing/use-cases.tsx`:
- Line 3: The file defines a hardcoded ACCENT constant ("ACCENT") used for SVG
colors which prevents theme/brand updates from propagating; replace usage of
that constant in SVGs with theme-driven colors by deriving stroke/fill from the
same CSS variable or inherited color (e.g., use the component's CSS custom
property like var(--color-accent) or currentColor) so the SVGs follow classes
such as bg-accent; update references to ACCENT in use-cases.tsx (and remove the
constant if no longer needed) and ensure SVG elements use fill/stroke attributes
tied to the chosen CSS variable or inherit color.
🪄 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: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 36b0db5e-5f08-4378-a73f-1a402d7ad534
📒 Files selected for processing (1)
packages/dashboard/src/components/landing/use-cases.tsx
| "use client"; | ||
|
|
||
| function ClickHouseMonitorIllustration() { | ||
| const ACCENT = "#22c55e"; |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Keep the accent color on theme tokens.
ACCENT hardcodes a single green, so brand/theme changes will not propagate into these SVGs even though the surrounding card already uses theme-driven classes like bg-accent. Derive the stroke/fill from the same CSS variable or inherited color instead of a fixed hex.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/dashboard/src/components/landing/use-cases.tsx` at line 3, The file
defines a hardcoded ACCENT constant ("ACCENT") used for SVG colors which
prevents theme/brand updates from propagating; replace usage of that constant in
SVGs with theme-driven colors by deriving stroke/fill from the same CSS variable
or inherited color (e.g., use the component's CSS custom property like
var(--color-accent) or currentColor) so the SVGs follow classes such as
bg-accent; update references to ACCENT in use-cases.tsx (and remove the constant
if no longer needed) and ensure SVG elements use fill/stroke attributes tied to
the chosen CSS variable or inherit color.
2 participants
Summary
ACCENTconstant, deduplicate framework node rendering with data arrayWhy
Current use cases are too specific (tied to ClickHouse, stamps). AgentState works for any agent — messaging should reflect that, with emphasis on vibe coding and zero database setup.
Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit
Release Notes