Develop #2
Develop #2
Conversation
- Introduced a centralized model configuration system in `models.ts` to manage AI models from various providers including Google, OpenAI, Anthropic, OpenRouter, and Ollama. - Defined types for model providers, capabilities, pricing, and configurations to standardize model data structure. - Implemented model grouping and retrieval functions: `getModelsByProvider`, `getModelConfig`, and `getDefaultModel`. - Added detailed model configurations for Ollama, OpenAI, and OpenRouter in their respective files, including capabilities, context windows, and pricing. - Created a new login page component in `page.tsx` with a user-friendly interface for email/password and social logins. - Implemented loading states for login actions and stubbed login functionality to simulate user authentication. - Enhanced UI with responsive design elements and accessibility features, including labels and placeholders for input fields.
- Updated landing-stats component to improve styling and animations, including gradient changes and hover effects. - Refined landing-testimonials component with enhanced badge styles and hover animations. - Improved landing-trust component with new hover effects and gradient backgrounds. - Enhanced navbar component with smoother transitions and hover effects. - Updated networks-list component for better hover animations and styling. - Improved page-header component with updated background styles. - Enhanced pricing-tiers component with improved hover effects and animations. - Updated tools-list component for better responsiveness and hover animations. - Improved workflows-list component with enhanced styling and animations. - Added global CSS variables for custom animations and transitions. - Updated next.config.ts to include remark-gfm and rehype-highlight for better markdown support. - Implemented a new contact form API route to handle submissions, including validation and logging.
|
Keep this PR in a mergeable state → Learn moreAll Green is an AI agent that automatically: ✅ Addresses code review comments ✅ Fixes failing CI checks ✅ Resolves merge conflicts |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Sorry @ssdeanx, your pull request is larger than the review limit of 150000 diff characters
Summary by CodeRabbitRelease Notes
✏️ Tip: You can customize this high-level summary in your review settings. WalkthroughThis PR introduces a centralized model configuration system supporting 150+ models across 6 providers, adds a contact API endpoint with form integration, redesigns the dashboard with enhanced cards and color variants, redesigns the sidebar with collapsed/expanded states, adds a new login page, implements widespread UI animations and 3D effects across components, adds model selection to chat and networks interfaces, and enhances global styles with new CSS variables and animations. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant Form as Contact Form UI
participant API as /api/contact Endpoint
participant Handler as Route Handler
User->>Form: Fill form & submit
Form->>Form: Parse & validate fields
alt Validation success
Form->>API: POST JSON (firstName, lastName, email, subject, message)
API->>Handler: Receive request
Handler->>Handler: Validate required fields
Handler->>Handler: Validate email format (regex)
Handler->>Handler: Log submission details
alt All checks pass
Handler->>Handler: Optional: Send email (commented)
Handler->>API: Return 200 success response
API->>Form: Success response
Form->>Form: Clear form data
Form->>Form: Set status = "success"
Form->>User: Display success message
else Validation fails
Handler->>API: Return 400 validation error
API->>Form: Error response
Form->>Form: Set status = "error"
Form->>User: Display error message
end
else Validation fails locally
Form->>User: Display error message
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Areas requiring extra attention:
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 2 inconclusive)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
|
🤖 Hi @ssdeanx, I've received your request, and I'm working on it now! You can track my progress in the logs for more details. |
|
🤖 I'm sorry @ssdeanx, but I was unable to process your request. Please see the logs for more details. |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| } | ||
|
|
||
| const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ | ||
| if (!emailRegex.test(data.email)) { |
Check failure
Code scanning / CodeQL
Polynomial regular expression used on uncontrolled data High
Summary of ChangesHello @ssdeanx, 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 significantly expands the application's AI model integration capabilities by introducing a robust, centralized model configuration system that supports over 150 models from six major providers. Alongside this core feature, the PR delivers a substantial upgrade to the overall user experience through new animations, improved component styling, and a dedicated login page. It also includes the implementation of a new contact form API and numerous functional and aesthetic enhancements to the administrative dashboard. Highlights
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
|
| ## Current Focus (Dec 2025) | ||
|
|
||
| - **[Synced Dec 5, 2025]** AI Elements Integration 92% complete (12/13 tasks). Chat interface fully functional. | ||
| - **[NEW]** Models Configuration System: 150+ models from 6 providers, shared between `/chat` and `/networks`. |
Check notice
Code scanning / Remark-lint (reported by Codacy)
Warn when references to undefined definitions are found. Note
| ## Current Focus (Dec 2025) | ||
|
|
||
| - **[Synced Dec 5, 2025]** AI Elements Integration 92% complete (12/13 tasks). Chat interface fully functional. | ||
| - **[NEW]** Models Configuration System: 150+ models from 6 providers, shared between `/chat` and `/networks`. |
Check notice
Code scanning / Remark-lint (reported by Codacy)
Warn when shortcut reference links are used. Note
There was a problem hiding this comment.
Csslint (reported by Codacy) found more than 20 potential problems in the proposed changes. Check the Files changed tab for more details.
There was a problem hiding this comment.
Stylelint (reported by Codacy) found more than 20 potential problems in the proposed changes. Check the Files changed tab for more details.
There was a problem hiding this comment.
Pull request overview
This is a comprehensive PR that enhances the AgentStack application with multiple improvements across styling, UI components, model configuration, and authentication.
Purpose: Add Tailwind CSS v4 advanced features, centralized model configuration system (150+ models from 6 providers), login page stub, contact form API, and numerous UI/UX improvements.
Key Changes:
- New centralized model configuration system with 150+ models from Google, OpenAI, Anthropic, OpenRouter, and Ollama
- Tailwind CSS v4 enhancements including 3D transforms, custom animations, and transition utilities
- Login page stub for development
- Contact form API endpoint with validation
- Dashboard UI improvements with enhanced styling and animations
- Documentation layout enhancements with table of contents
Reviewed changes
Copilot reviewed 38 out of 39 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| next.config.ts | Added MDX plugins for GitHub Flavored Markdown and syntax highlighting |
| memory-bank/*.md | Updated documentation to reflect new model configuration system and UI features |
| app/login/page.tsx | New stub login page for development (security concern noted) |
| app/globals.css | Major Tailwind CSS v4 enhancements with 3D transforms, animations, and custom properties |
| app/dashboard/page.tsx | Enhanced dashboard UI with improved cards, stats, and styling |
| app/dashboard/_components/sidebar.tsx | Enhanced sidebar with tooltips, user menu, and improved navigation |
| app/chat/config/*.ts | New centralized model configuration system (150+ models) |
| app/networks/components/network-header.tsx | Integrated model selector into networks interface |
| app/chat/components/chat-header.tsx | Enhanced chat header with separate model and agent selectors |
| app/api/contact/route.ts | New contact form API with validation |
| app/components/*.tsx | Consistent styling updates across all landing components |
| .gitignore | Added GitHub Actions ignore patterns |
Comments suppressed due to low confidence (1)
app/chat/config/google-models.ts:6
- Unused imports ModelCapability, ModelProvider.
import { ModelProvider, ModelCapability, ModelConfig, ProviderConfig } from './models';
| const handleLogin = async (e: React.FormEvent) => { | ||
| e.preventDefault() | ||
| setIsLoading(true) | ||
|
|
||
| // Stub: simulate login delay then redirect to dashboard | ||
| await new Promise((resolve) => setTimeout(resolve, 1000)) | ||
| router.push("/dashboard" as Route) | ||
| } | ||
|
|
||
| const handleSocialLogin = async (provider: string) => { | ||
| setIsLoading(true) | ||
|
|
||
| // Stub: simulate social login then redirect to dashboard | ||
| await new Promise((resolve) => setTimeout(resolve, 800)) | ||
| router.push("/dashboard" as Route) | ||
| } |
There was a problem hiding this comment.
The login function is a stub that accepts any credentials without validation and automatically redirects to the dashboard. While this is noted as a development stub, it's dangerous to commit this pattern. Consider adding a clear TODO comment and environment-based safeguards to prevent accidental deployment to production.
| > | ||
| {/* Background grid */} | ||
| <div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]" /> | ||
| <div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-size-[14px_24px]" /> |
There was a problem hiding this comment.
The CSS custom property bg-size-[14px_24px] appears to be using incorrect syntax. Tailwind CSS v4 doesn't support custom arbitrary values with bg-size- prefix. The correct approach is to use inline styles or define a proper CSS custom property in the theme.
| <div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-size-[14px_24px]" /> | |
| <div | |
| className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)]" | |
| style={{ backgroundSize: "14px 24px" }} | |
| /> |
| * Centralized configuration for all Google AI models. | ||
| */ | ||
|
|
||
| import { ModelProvider, ModelCapability, ModelConfig, ProviderConfig } from './models'; |
There was a problem hiding this comment.
'ModelProvider' is defined but never used.
| import { ModelProvider, ModelCapability, ModelConfig, ProviderConfig } from './models'; | |
| import { ModelCapability, ModelConfig, ProviderConfig } from './models'; |
| * Centralized configuration for all Google AI models. | ||
| */ | ||
|
|
||
| import { ModelProvider, ModelCapability, ModelConfig, ProviderConfig } from './models'; |
There was a problem hiding this comment.
'ModelCapability' is defined but never used.
| import { ModelProvider, ModelCapability, ModelConfig, ProviderConfig } from './models'; | |
| import { ModelProvider, ModelConfig, ProviderConfig } from './models'; |
| @@ -0,0 +1,177 @@ | |||
| "use client" | |||
|
|
|||
| import { useEffect, useState } from "react" | |||
There was a problem hiding this comment.
Unused import useEffect.
Greptile OverviewGreptile SummaryThis PR adds a centralized model configuration system, enhances UI components with animations, implements a contact form API, and adds a stub login page. Key Changes
Critical Issues Found
Recommendations
Confidence Score: 1/5
Important Files ChangedFile Analysis
Sequence DiagramsequenceDiagram
participant User
participant Browser
participant ChatHeader
participant ModelSelector
participant ChatContext
participant ChatAPI
participant MastraServer
%% Model Configuration Flow
Note over ChatHeader,ModelSelector: Model Selection UI Added
User->>ChatHeader: Opens model selector
ChatHeader->>ModelSelector: Renders model list
ModelSelector-->>ChatHeader: Display models by provider
User->>ModelSelector: Selects GPT-4o
ModelSelector->>ChatHeader: handleSelectModel(model)
ChatHeader->>ChatHeader: setSelectedModel(model)
Note over ChatHeader: ⚠️ Model stored in state only
%% Chat Message Flow (Issue: Model not passed)
User->>ChatHeader: Types message
User->>ChatContext: Sends message
ChatContext->>ChatAPI: POST /chat
Note over ChatContext,ChatAPI: ⚠️ selectedModel NOT included
ChatAPI->>MastraServer: Forward request
Note over MastraServer: Uses default model
MastraServer-->>ChatAPI: Stream response
ChatAPI-->>Browser: Display response
%% Contact Form Flow
participant ContactForm
participant ContactAPI
User->>ContactForm: Fills form fields
User->>ContactForm: Clicks submit
ContactForm->>ContactAPI: POST /api/contact
ContactAPI->>ContactAPI: Validate email/fields
ContactAPI->>ContactAPI: console.log() submission
Note over ContactAPI: Ready for email service
ContactAPI-->>ContactForm: Success response
ContactForm-->>User: Show success message
%% Login Flow (Stub)
participant LoginPage
User->>LoginPage: Enters credentials
User->>LoginPage: Clicks login
LoginPage->>LoginPage: Simulate delay
Note over LoginPage: ⚠️ No actual auth
LoginPage->>Browser: router.push("/dashboard")
Browser-->>User: Redirect to dashboard
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Additional Comments (3)
-
app/components/landing-cta.tsx, line 1 (link)syntax: multiple instances of
bg-linear-to-*which is not valid Tailwind CSS syntax - replace all withbg-gradient-to-*(lines contain:bg-linear-to-t,bg-linear-to-r) -
app/components/landing-features.tsx, line 1 (link)syntax: multiple instances of
bg-linear-to-brwhich is not valid Tailwind CSS syntax - replace all withbg-gradient-to-br -
app/components/navbar.tsx, line 1 (link)syntax: multiple instances of
bg-linear-to-*which is not valid Tailwind CSS syntax - replace all withbg-gradient-to-*(found:bg-linear-to-br,bg-linear-to-r)
39 files reviewed, 11 comments
| Build AI Applications{" "} | ||
| <span className="relative"> | ||
| <span className="relative z-10 bg-gradient-to-r from-primary via-blue-500 to-purple-500 bg-clip-text text-transparent"> | ||
| <span className="relative z-10 bg-linear-to-r from-primary via-blue-500 to-purple-500 bg-clip-text text-transparent"> |
There was a problem hiding this comment.
syntax: bg-linear-to-r is not a valid Tailwind CSS class. Use bg-gradient-to-r instead.
| <span className="relative z-10 bg-linear-to-r from-primary via-blue-500 to-purple-500 bg-clip-text text-transparent"> | |
| <span className="relative z-10 bg-gradient-to-r from-primary via-blue-500 to-purple-500 bg-clip-text text-transparent"> |
Prompt To Fix With AI
This is a comment left during a code review.
Path: app/components/landing-hero.tsx
Line: 95:95
Comment:
**syntax:** `bg-linear-to-r` is not a valid Tailwind CSS class. Use `bg-gradient-to-r` instead.
```suggestion
<span className="relative z-10 bg-gradient-to-r from-primary via-blue-500 to-purple-500 bg-clip-text text-transparent">
```
How can I resolve this? If you propose a fix, please make it concise.| animate={{ scaleX: 1 }} | ||
| transition={{ duration: 0.8, delay: 0.8 }} | ||
| className="absolute -bottom-2 left-0 h-3 w-full origin-left bg-gradient-to-r from-primary/20 via-blue-500/20 to-purple-500/20 blur-sm" | ||
| className="absolute -bottom-2 left-0 h-3 w-full origin-left bg-linear-to-r from-primary/20 via-blue-500/20 to-purple-500/20 blur-sm" |
There was a problem hiding this comment.
syntax: bg-linear-to-r is not a valid Tailwind CSS class. Use bg-gradient-to-r instead.
| className="absolute -bottom-2 left-0 h-3 w-full origin-left bg-linear-to-r from-primary/20 via-blue-500/20 to-purple-500/20 blur-sm" | |
| className="absolute -bottom-2 left-0 h-3 w-full origin-left bg-gradient-to-r from-primary/20 via-blue-500/20 to-purple-500/20 blur-sm" |
Prompt To Fix With AI
This is a comment left during a code review.
Path: app/components/landing-hero.tsx
Line: 102:102
Comment:
**syntax:** `bg-linear-to-r` is not a valid Tailwind CSS class. Use `bg-gradient-to-r` instead.
```suggestion
className="absolute -bottom-2 left-0 h-3 w-full origin-left bg-gradient-to-r from-primary/20 via-blue-500/20 to-purple-500/20 blur-sm"
```
How can I resolve this? If you propose a fix, please make it concise.| size="lg" | ||
| asChild | ||
| className="group h-12 min-w-[180px] bg-gradient-to-r from-primary to-primary/90 px-8 text-base shadow-lg shadow-primary/25 transition-all hover:shadow-xl hover:shadow-primary/30" | ||
| className="group h-12 min-w-[180px] bg-linear-to-r from-primary to-primary/90 px-8 text-base shadow-lg shadow-primary/25 transition-all duration-300 ease-spring hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-0.5 hover:animate-pulse-glow" |
There was a problem hiding this comment.
syntax: bg-linear-to-r is not a valid Tailwind CSS class. Use bg-gradient-to-r instead.
| className="group h-12 min-w-[180px] bg-linear-to-r from-primary to-primary/90 px-8 text-base shadow-lg shadow-primary/25 transition-all duration-300 ease-spring hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-0.5 hover:animate-pulse-glow" | |
| className="group h-12 min-w-[180px] bg-gradient-to-r from-primary to-primary/90 px-8 text-base shadow-lg shadow-primary/25 transition-all duration-300 ease-spring hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-0.5 hover:animate-pulse-glow" |
Prompt To Fix With AI
This is a comment left during a code review.
Path: app/components/landing-hero.tsx
Line: 131:131
Comment:
**syntax:** `bg-linear-to-r` is not a valid Tailwind CSS class. Use `bg-gradient-to-r` instead.
```suggestion
className="group h-12 min-w-[180px] bg-gradient-to-r from-primary to-primary/90 px-8 text-base shadow-lg shadow-primary/25 transition-all duration-300 ease-spring hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-0.5 hover:animate-pulse-glow"
```
How can I resolve this? If you propose a fix, please make it concise.| <div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]" /> | ||
| <section className="relative overflow-hidden border-b border-border bg-background py-24 sm:py-32 lg:py-40 perspective"> | ||
| {/* Animated grid background with shimmer */} | ||
| <div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-size-[14px_24px]" /> |
There was a problem hiding this comment.
syntax: bg-size-[14px_24px] is not valid Tailwind syntax. Use arbitrary value syntax with background-size property.
| <div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-size-[14px_24px]" /> | |
| <div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] [background-size:14px_24px]" /> |
Prompt To Fix With AI
This is a comment left during a code review.
Path: app/components/landing-hero.tsx
Line: 19:19
Comment:
**syntax:** `bg-size-[14px_24px]` is not valid Tailwind syntax. Use arbitrary value syntax with `background-size` property.
```suggestion
<div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] [background-size:14px_24px]" />
```
How can I resolve this? If you propose a fix, please make it concise.| } | ||
|
|
||
| return ( | ||
| <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-background via-background to-muted/30 p-4"> |
There was a problem hiding this comment.
syntax: bg-linear-to-br is not a valid Tailwind CSS class. Use bg-gradient-to-br instead.
| <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-background via-background to-muted/30 p-4"> | |
| <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/30 p-4"> |
Prompt To Fix With AI
This is a comment left during a code review.
Path: app/login/page.tsx
Line: 38:38
Comment:
**syntax:** `bg-linear-to-br` is not a valid Tailwind CSS class. Use `bg-gradient-to-br` instead.
```suggestion
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/30 p-4">
```
How can I resolve this? If you propose a fix, please make it concise.|
|
||
| const handleSelectModel = (model: ModelConfig) => { | ||
| setSelectedModel(model) | ||
| setModelSelectorOpen(false) |
There was a problem hiding this comment.
logic: model selection is stored in component state but never passed to the chat API - the selected model won't actually be used for inference
Add the selectedModel to the chat context or pass it via the data field in prepareSendMessagesRequest to ensure the backend uses the selected model.
Prompt To Fix With AI
This is a comment left during a code review.
Path: app/chat/components/chat-header.tsx
Line: 106:109
Comment:
**logic:** model selection is stored in component state but never passed to the chat API - the selected model won't actually be used for inference
Add the `selectedModel` to the chat context or pass it via the `data` field in `prepareSendMessagesRequest` to ensure the backend uses the selected model.
How can I resolve this? If you propose a fix, please make it concise.| const handleSelectModel = (model: ModelConfig) => { | ||
| setSelectedModel(model) | ||
| setModelSelectorOpen(false) |
There was a problem hiding this comment.
logic: model selection is stored in component state but never passed to the network API - the selected model won't actually be used for inference
Add the selectedModel to the network context or pass it via the request data to ensure the backend uses the selected model.
Prompt To Fix With AI
This is a comment left during a code review.
Path: app/networks/components/network-header.tsx
Line: 72:74
Comment:
**logic:** model selection is stored in component state but never passed to the network API - the selected model won't actually be used for inference
Add the `selectedModel` to the network context or pass it via the request data to ensure the backend uses the selected model.
How can I resolve this? If you propose a fix, please make it concise.| <p className="text-muted-foreground mt-1"> | ||
| Mastra Admin - Monitor and manage your AI infrastructure | ||
| </p> | ||
| <div className="border-b bg-linear-to-r from-background to-muted/20"> |
There was a problem hiding this comment.
syntax: bg-linear-to-r is not a valid Tailwind CSS class. Use bg-gradient-to-r instead.
| <div className="border-b bg-linear-to-r from-background to-muted/20"> | |
| <div className="border-b bg-gradient-to-r from-background to-muted/20"> |
Prompt To Fix With AI
This is a comment left during a code review.
Path: app/dashboard/page.tsx
Line: 47:47
Comment:
**syntax:** `bg-linear-to-r` is not a valid Tailwind CSS class. Use `bg-gradient-to-r` instead.
```suggestion
<div className="border-b bg-gradient-to-r from-background to-muted/20">
```
How can I resolve this? If you propose a fix, please make it concise.![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 introduces a comprehensive model configuration system, integrating it into the chat and network interfaces. It also adds a new login page and significantly enhances the application's UI/UX with advanced animations and styling, leveraging new features from Tailwind CSS v4. The changes include refactoring for better maintainability and improved user experience across various components. Documentation has been updated to reflect these new features and architectural changes.
| <Button | ||
| variant="outline" | ||
| size="sm" | ||
| className="min-w-[140px] justify-between gap-2" |
There was a problem hiding this comment.
Consider defining min-w-[140px] as a custom Tailwind CSS utility or a variable to improve maintainability and consistency across the application. Using arbitrary values directly in class names can make future adjustments more cumbersome.
| className="min-w-[140px] justify-between gap-2" | |
| className="min-w-36 justify-between gap-2" |
| className="min-w-[140px] justify-between gap-2" | ||
| > | ||
| <CpuIcon className="size-3.5 text-muted-foreground" /> | ||
| <span className="truncate text-xs">{selectedModel.name}</span> |
There was a problem hiding this comment.
Using text-xs might make the model name difficult to read for users with visual impairments or on smaller screens. Consider increasing the font size or providing an option for users to adjust text size for better accessibility.
| heading={ | ||
| <div className="flex items-center gap-2"> | ||
| <ModelSelectorLogo | ||
| provider={providerConfig.logo as never} |
There was a problem hiding this comment.
The providerConfig.logo as never type assertion can mask potential type mismatches. It's generally safer to ensure providerConfig.logo is of the expected type for the provider prop, or handle the case where it might not be, to maintain type safety.
| <span className="text-xs text-muted-foreground"> | ||
| {formatContextWindow(model.contextWindow)} • {model.description} |
There was a problem hiding this comment.
Similar to the model name, text-xs for the context window and description might be too small, impacting readability and accessibility. Consider a slightly larger font size or alternative presentation for this information.
| id: "anthropic/claude-sonnet-4-5", | ||
| name: "Claude Sonnet 4.5", | ||
| provider: "anthropic", | ||
| contextWindow: 200000, |
There was a problem hiding this comment.
The contextWindow value 200000 is a magic number that appears repeatedly across many model definitions. Consider defining this as a constant (e.g., ANTHROPIC_DEFAULT_CONTEXT_WINDOW) to improve readability and make it easier to update if the value changes in the future.
| contextWindow: 200000, | |
| contextWindow: ANTHROPIC_DEFAULT_CONTEXT_WINDOW, |
| name: "Llama 3.2 (Local)", | ||
| provider: "ollama", | ||
| contextWindow: 128000, | ||
| capabilities: ["chat", "code"], |
There was a problem hiding this comment.
The contextWindow value 128000 is a magic number that appears repeatedly across many model definitions. Consider defining this as a constant (e.g., OLLAMA_DEFAULT_CONTEXT_WINDOW) to improve readability and maintainability.
| capabilities: ["chat", "code"], | |
| contextWindow: OLLAMA_DEFAULT_CONTEXT_WINDOW, |
| name: "GPT-4.1", | ||
| provider: "openai", | ||
| contextWindow: 1000000, | ||
| capabilities: ["chat", "reasoning", "vision", "code"], |
There was a problem hiding this comment.
The contextWindow value 1000000 is a magic number that appears repeatedly across many model definitions. Consider defining this as a constant (e.g., OPENAI_DEFAULT_CONTEXT_WINDOW) to improve readability and maintainability.
| capabilities: ["chat", "reasoning", "vision", "code"], | |
| contextWindow: OPENAI_DEFAULT_CONTEXT_WINDOW, |
| id: "openrouter/anthropic/claude-sonnet-4.5", | ||
| name: "Claude Sonnet 4.5 (OR)", | ||
| provider: "openrouter", | ||
| contextWindow: 200000, |
There was a problem hiding this comment.
The contextWindow value 200000 is a magic number that appears repeatedly across many model definitions. Consider defining this as a constant (e.g., OPENROUTER_DEFAULT_CONTEXT_WINDOW) to improve readability and maintainability.
| contextWindow: 200000, | |
| contextWindow: OPENROUTER_DEFAULT_CONTEXT_WINDOW, |
| heading={ | ||
| <div className="flex items-center gap-2"> | ||
| <ModelSelectorLogo | ||
| provider={providerConfig.logo as never} |
There was a problem hiding this comment.
The providerConfig.logo as never type assertion can mask potential type mismatches. It's generally safer to ensure providerConfig.logo is of the expected type for the provider prop, or handle the case where it might not be, to maintain type safety.
| <span className="text-xs text-muted-foreground"> | ||
| {formatContextWindow(model.contextWindow)} • {model.description} |
There was a problem hiding this comment.
Using text-xs for the context window and description might make the text difficult to read for users with visual impairments or on smaller screens. Consider a slightly larger font size or alternative presentation for this information.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 37
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (7)
app/components/changelog-list.tsx (1)
91-104: Card hover/transition is fine; consider avoidingtransition-all.The new hover behavior on the card looks consistent with the rest of the UI. To avoid animating unintended properties and keep things predictable, consider replacing
transition-allwith property-specific transitions (e.g.,transition-[box-shadow,border-color,transform]if you add transforms later).app/components/landing-hero.tsx (1)
158-175: Limittransition-allon trust indicators to transform for slightly better performanceThe trust indicators look good and the hover feedback is nice. Since only scale (and color on the inner dot) actually animates, you can avoid
transition-allon the outer wrapper to keep things a bit leaner:- <div className="flex items-center gap-2 transition-all duration-300 ease-smooth hover:text-foreground hover:scale-105"> + <div className="flex items-center gap-2 transition-transform duration-300 ease-smooth hover:text-foreground hover:scale-105">(and similarly for the other two indicators).
Inner circles already use
transition-colors, so you still get smooth color changes without animating unrelated properties.app/components/api-components.tsx (1)
26-30: Add error handling and await the clipboard write.Similar to
copyCode, this should handle clipboard API failures and await the Promise.-const copyPath = () => { - navigator.clipboard.writeText(path) - setCopied(true) - setTimeout(() => setCopied(false), 2000) +const copyPath = async () => { + try { + await navigator.clipboard.writeText(path) + setCopied(true) + setTimeout(() => setCopied(false), 2000) + } catch (err) { + console.error("Failed to copy to clipboard:", err) + } }app/components/landing-trust.tsx (1)
159-170: Missinggroupclass for hover effect.The
group-hover:rotate-12on Line 168 won't work because the parent container (motion.div on Line 160) doesn't have thegroupclass.<motion.div key={cert.name} initial={{ opacity: 0, scale: 0.9 }} whileInView={{ opacity: 1, scale: 1 }} transition={{ duration: 0.3, delay: 0.3 + index * 0.05 }} viewport={{ once: true }} - className="flex items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 shadow-sm transition-all duration-200 ease-spring hover:border-primary/30 hover:shadow-md hover:scale-105" + className="group flex items-center gap-2 rounded-full border border-border bg-card px-5 py-2.5 shadow-sm transition-all duration-200 ease-spring hover:border-primary/30 hover:shadow-md hover:scale-105" > <cert.icon className="size-4 text-primary transition-transform duration-200 group-hover:rotate-12" />app/components/contact-form.tsx (1)
110-112: Same ReDoS-vulnerable regex as server-side.This client-side validation uses the same regex pattern flagged in the API route. While client-side ReDoS is less critical (affects only the user's browser), consider using the same safer pattern recommended for the server to maintain consistency.
app/dashboard/page.tsx (2)
82-116: StatCard usage aligns with its API; only semantic nit on hard-coded trend values.Passing
trend={{ value: 22, label: "configured", positive: true }}etc. matchesStatCard’s expected shape and will render as “+22% configured”, “+10% available”, “+30% ready”.If those numbers are intended as counts rather than percentages, you might later rename the prop (or alter
StatCard) to avoid the%suffix. Functionally everything is wired correctly, so this is just a semantics/UX point.
256-338: Import and use the existingSpanandTracesResponsetypes fromlib/types/mastra-apiinstead of unsafe casts.The codebase already defines
SpanandTracesResponsetypes inlib/types/mastra-api.ts. UpdateuseTracesQueryto returnTracesResponse:import type { TracesResponse } from "@/lib/types/mastra-api" export function useTracesQuery(params?: { page?: number perPage?: number dateRange?: { start: Date; end: Date } }) { return useQuery({ queryKey: queryKeys.traces(params), queryFn: async (): Promise<TracesResponse> => { const result = await mastraClient.getAITraces({ pagination: { page: params?.page ?? 1, perPage: params?.perPage ?? 20, dateRange: params?.dateRange, }, }) return { spans: result.spans ?? [], pagination: { page: result.pagination?.page ?? 1, perPage: result.pagination?.perPage ?? 20, totalPages: (result.pagination as unknown as Record<string, number>)?.totalPages ?? 1, total: result.pagination?.total, }, } }, }) }Then in
app/dashboard/page.tsx, spans will be properly typed asSpan[], allowing direct access tospan.startTime,span.duration,span.status, andspan.spanTypewithout unsafe casts.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (39)
.gitignore(1 hunks)app/api/contact/route.ts(1 hunks)app/chat/components/chat-header.tsx(5 hunks)app/chat/config/anthropic-models.ts(1 hunks)app/chat/config/google-models.ts(1 hunks)app/chat/config/models.ts(1 hunks)app/chat/config/ollama-models.ts(1 hunks)app/chat/config/openai-models.ts(1 hunks)app/chat/config/openrouter-models.ts(1 hunks)app/components/api-components.tsx(1 hunks)app/components/blog-layout.tsx(4 hunks)app/components/blog-list.tsx(2 hunks)app/components/changelog-list.tsx(1 hunks)app/components/contact-form.tsx(4 hunks)app/components/docs-layout.tsx(4 hunks)app/components/examples-list.tsx(2 hunks)app/components/footer.tsx(7 hunks)app/components/landing-agents.tsx(2 hunks)app/components/landing-cta.tsx(3 hunks)app/components/landing-features.tsx(4 hunks)app/components/landing-hero.tsx(6 hunks)app/components/landing-stats.tsx(6 hunks)app/components/landing-testimonials.tsx(6 hunks)app/components/landing-trust.tsx(4 hunks)app/components/navbar.tsx(6 hunks)app/components/networks-list.tsx(2 hunks)app/components/page-header.tsx(1 hunks)app/components/pricing-tiers.tsx(1 hunks)app/components/tools-list.tsx(4 hunks)app/components/workflows-list.tsx(2 hunks)app/dashboard/_components/sidebar.tsx(3 hunks)app/dashboard/page.tsx(9 hunks)app/globals.css(4 hunks)app/login/page.tsx(1 hunks)app/networks/components/network-header.tsx(3 hunks)memory-bank/activeContext.md(2 hunks)memory-bank/progress.md(1 hunks)memory-bank/techContext.md(1 hunks)next.config.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (16)
**/app/**
📄 CodeRabbit inference engine (.github/instructions/next-js.instructions.md)
Use the
app/directory structure for route handlers, server components, and client components (Next.js 13+). Prefer this over thepages/directory for new projects.
Files:
app/components/networks-list.tsxapp/components/blog-list.tsxapp/components/changelog-list.tsxapp/components/landing-stats.tsxapp/chat/config/ollama-models.tsapp/components/footer.tsxapp/components/api-components.tsxapp/components/workflows-list.tsxapp/components/contact-form.tsxapp/globals.cssapp/chat/config/openai-models.tsapp/chat/config/google-models.tsapp/login/page.tsxapp/components/landing-features.tsxapp/components/pricing-tiers.tsxapp/components/blog-layout.tsxapp/components/navbar.tsxapp/chat/components/chat-header.tsxapp/networks/components/network-header.tsxapp/chat/config/models.tsapp/dashboard/_components/sidebar.tsxapp/chat/config/anthropic-models.tsapp/chat/config/openrouter-models.tsapp/components/landing-cta.tsxapp/components/examples-list.tsxapp/components/page-header.tsxapp/components/landing-trust.tsxapp/components/landing-testimonials.tsxapp/components/docs-layout.tsxapp/api/contact/route.tsapp/components/landing-agents.tsxapp/components/tools-list.tsxapp/dashboard/page.tsxapp/components/landing-hero.tsx
**/components/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/next-js.instructions.md)
Use PascalCase for component file names (e.g.,
ComponentName.jsxorComponentName.tsx).
Files:
app/components/networks-list.tsxapp/components/blog-list.tsxapp/components/changelog-list.tsxapp/components/landing-stats.tsxapp/components/footer.tsxapp/components/api-components.tsxapp/components/workflows-list.tsxapp/components/contact-form.tsxapp/components/landing-features.tsxapp/components/pricing-tiers.tsxapp/components/blog-layout.tsxapp/components/navbar.tsxapp/chat/components/chat-header.tsxapp/networks/components/network-header.tsxapp/components/landing-cta.tsxapp/components/examples-list.tsxapp/components/page-header.tsxapp/components/landing-trust.tsxapp/components/landing-testimonials.tsxapp/components/docs-layout.tsxapp/components/landing-agents.tsxapp/components/tools-list.tsxapp/components/landing-hero.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/next-js.instructions.md)
**/*.{js,jsx,ts,tsx}: Usenext/dynamicfor dynamic imports to load components only when needed, improving initial load time.
Usenext/imagecomponent for automatic image optimization, including lazy loading and responsive images.
Use React.memo to prevent unnecessary re-renders of components.
Use the<Link prefetch>tag to prefetch pages that are likely to be visited.
Use getServerSideProps, getStaticProps, or server components for fetching data on the server-side.
Use SWR or React Query for client-side data fetching and caching.
Use CSS Modules, Styled Components, or Tailwind CSS for component-level styling. Prefer Tailwind CSS for rapid development.
Use React Context, Zustand, Jotai, or Recoil for managing global state. Avoid Redux unless necessary.
Usereact-hook-formfor managing forms and validation.
Only fetch the data that is needed by the component to avoid over-fetching.
Avoid long-running synchronous operations in the main thread to prevent blocking.
Always usesetStateor hooks to update state instead of mutating state directly.
Include a complete dependency array inuseEffecthooks to prevent unexpected behavior.
Avoid writing server-side code in client components to prevent exposing secrets or causing unexpected behavior.
Usetry...catchblocks for handling errors in asynchronous operations.
Implement error boundary components usinggetDerivedStateFromErrororcomponentDidCatchlifecycle methods.
Sanitize user input to prevent Cross-Site Scripting (XSS) attacks. Be especially careful when rendering HTML directly from user input.
Store authentication tokens in HTTP-only cookies or local storage securely.
Implement role-based access control to restrict access to sensitive resources.
Clean up event listeners and timers inuseEffecthooks to avoid memory leaks.
Only update state when necessary to reduce the number of re-renders and improve performance.
Use immutable data structures and avoid mutating data directly to prevent unexpected...
Files:
app/components/networks-list.tsxapp/components/blog-list.tsxapp/components/changelog-list.tsxapp/components/landing-stats.tsxapp/chat/config/ollama-models.tsapp/components/footer.tsxapp/components/api-components.tsxapp/components/workflows-list.tsxapp/components/contact-form.tsxapp/chat/config/openai-models.tsapp/chat/config/google-models.tsapp/login/page.tsxapp/components/landing-features.tsxapp/components/pricing-tiers.tsxapp/components/blog-layout.tsxapp/components/navbar.tsxapp/chat/components/chat-header.tsxapp/networks/components/network-header.tsxapp/chat/config/models.tsapp/dashboard/_components/sidebar.tsxapp/chat/config/anthropic-models.tsapp/chat/config/openrouter-models.tsapp/components/landing-cta.tsxapp/components/examples-list.tsxapp/components/page-header.tsxapp/components/landing-trust.tsxapp/components/landing-testimonials.tsxapp/components/docs-layout.tsxapp/api/contact/route.tsnext.config.tsapp/components/landing-agents.tsxapp/components/tools-list.tsxapp/dashboard/page.tsxapp/components/landing-hero.tsx
{app,src/components}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Next.js 16 App Router with React 19 for frontend development
Files:
app/components/networks-list.tsxapp/components/blog-list.tsxapp/components/changelog-list.tsxapp/components/landing-stats.tsxapp/chat/config/ollama-models.tsapp/components/footer.tsxapp/components/api-components.tsxapp/components/workflows-list.tsxapp/components/contact-form.tsxapp/chat/config/openai-models.tsapp/chat/config/google-models.tsapp/login/page.tsxapp/components/landing-features.tsxapp/components/pricing-tiers.tsxapp/components/blog-layout.tsxapp/components/navbar.tsxapp/chat/components/chat-header.tsxapp/networks/components/network-header.tsxapp/chat/config/models.tsapp/dashboard/_components/sidebar.tsxapp/chat/config/anthropic-models.tsapp/chat/config/openrouter-models.tsapp/components/landing-cta.tsxapp/components/examples-list.tsxapp/components/page-header.tsxapp/components/landing-trust.tsxapp/components/landing-testimonials.tsxapp/components/docs-layout.tsxapp/api/contact/route.tsapp/components/landing-agents.tsxapp/components/tools-list.tsxapp/dashboard/page.tsxapp/components/landing-hero.tsx
{app,src/components}/**/*.{tsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Tailwind CSS 4 with oklch color variables for styling in frontend components
Files:
app/components/networks-list.tsxapp/components/blog-list.tsxapp/components/changelog-list.tsxapp/components/landing-stats.tsxapp/components/footer.tsxapp/components/api-components.tsxapp/components/workflows-list.tsxapp/components/contact-form.tsxapp/globals.cssapp/login/page.tsxapp/components/landing-features.tsxapp/components/pricing-tiers.tsxapp/components/blog-layout.tsxapp/components/navbar.tsxapp/chat/components/chat-header.tsxapp/networks/components/network-header.tsxapp/dashboard/_components/sidebar.tsxapp/components/landing-cta.tsxapp/components/examples-list.tsxapp/components/page-header.tsxapp/components/landing-trust.tsxapp/components/landing-testimonials.tsxapp/components/docs-layout.tsxapp/components/landing-agents.tsxapp/components/tools-list.tsxapp/dashboard/page.tsxapp/components/landing-hero.tsx
app/**/*.{tsx,ts}
📄 CodeRabbit inference engine (app/AGENTS.md)
app/**/*.{tsx,ts}: Use Tailwind CSS 4 with oklch color variables for styling in Next.js App Router pages and layouts
Use React 19 latest features in component implementations within the app directory
Files:
app/components/networks-list.tsxapp/components/blog-list.tsxapp/components/changelog-list.tsxapp/components/landing-stats.tsxapp/chat/config/ollama-models.tsapp/components/footer.tsxapp/components/api-components.tsxapp/components/workflows-list.tsxapp/components/contact-form.tsxapp/chat/config/openai-models.tsapp/chat/config/google-models.tsapp/login/page.tsxapp/components/landing-features.tsxapp/components/pricing-tiers.tsxapp/components/blog-layout.tsxapp/components/navbar.tsxapp/chat/components/chat-header.tsxapp/networks/components/network-header.tsxapp/chat/config/models.tsapp/dashboard/_components/sidebar.tsxapp/chat/config/anthropic-models.tsapp/chat/config/openrouter-models.tsapp/components/landing-cta.tsxapp/components/examples-list.tsxapp/components/page-header.tsxapp/components/landing-trust.tsxapp/components/landing-testimonials.tsxapp/components/docs-layout.tsxapp/api/contact/route.tsapp/components/landing-agents.tsxapp/components/tools-list.tsxapp/dashboard/page.tsxapp/components/landing-hero.tsx
**/*.{js,ts}
📄 CodeRabbit inference engine (.github/instructions/next-js.instructions.md)
Use parameterized queries or an ORM to prevent SQL injection attacks.
Files:
app/chat/config/ollama-models.tsapp/chat/config/openai-models.tsapp/chat/config/google-models.tsapp/chat/config/models.tsapp/chat/config/anthropic-models.tsapp/chat/config/openrouter-models.tsapp/api/contact/route.tsnext.config.ts
**/*.md
📄 CodeRabbit inference engine (.github/instructions/markdown.instructions.md)
**/*.md: Use appropriate heading levels (H2, H3, etc.) to structure markdown content. Do not use H1 headings, as these will be generated from the title. Use##for H2 and###for H3 in a hierarchical manner. Recommend restructuring if content includes H4 or higher levels.
Use bullet points (with-) or numbered lists (with1.) for lists in markdown. Indent nested lists with two spaces and ensure proper indentation and spacing.
Use fenced code blocks (triple backticks) for code snippets in markdown. Specify the language after the opening backticks for syntax highlighting (e.g.,csharp).
Use proper markdown syntax for links:[link text](URL). Ensure that link text is descriptive and URLs are valid and accessible.
Use proper markdown syntax for images:. Include a brief description of the image in the alt text for accessibility.
Use markdown tables (with|delimiters) for tabular data. Ensure proper formatting, alignment, and inclusion of headers.
Limit line length to 80 characters in markdown for readability. Use soft line breaks for long paragraphs.
Use appropriate whitespace in markdown to separate sections and improve readability. Use blank lines between sections and avoid excessive whitespace.
Include YAML front matter at the beginning of markdown files with required metadata fields:post_title,author1,post_slug,microsoft_alias,featured_image,categories(from /categories.txt),tags,ai_note,summary, andpost_date.
Files:
memory-bank/progress.mdmemory-bank/techContext.mdmemory-bank/activeContext.md
app/globals.css
📄 CodeRabbit inference engine (app/AGENTS.md)
app/globals.css: Define CSS variables in oklch color space in globals.css for theme consistency (--background, --foreground, --primary, --radius, --border, --ring, etc.)
Support dark mode using .dark class selector in global styles
Files:
app/globals.css
**/app/**/page.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.github/instructions/next-js.instructions.md)
Represent route UIs using
page.tsxorpage.jsxfiles within theapp/directory structure.
Files:
app/login/page.tsxapp/dashboard/page.tsx
app/chat/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (app/chat/AGENTS.md)
app/chat/components/**/*.{ts,tsx}: Use AI SDK v5 types and patterns in chat components: import types like UIMessage, DynamicToolUIPart, TextUIPart, ReasoningUIPart from 'ai' and use type guard functions like isTextUIPart, isReasoningUIPart, isToolOrDynamicToolUIPart to filter message parts
Access message content through message.parts array using type guards rather than message.content, extracting specific parts like text using const textPart = message.parts?.find(isTextUIPart)
Handle Mastra stream chunk types correctly: use 'text-delta' for streaming text, 'reasoning-delta' for streaming reasoning (NOT 'reasoning'), 'tool-call' for tool invocation, 'tool-result' for tool completion, 'source' for research sources, and 'finish' for completion with usage data
Use AI Elements components (Conversation, Message, PromptInput, ModelSelector, Reasoning, Tool, Sources, Artifact) from the AI Elements library in their respective chat component files as specified in the architecture
Files:
app/chat/components/chat-header.tsx
app/chat/components/chat-header.tsx
📄 CodeRabbit inference engine (app/chat/AGENTS.md)
Implement ChatHeader component with ModelSelector to allow users to select from 26+ configured agents and switch between them
Files:
app/chat/components/chat-header.tsx
app/networks/**/*.tsx
📄 CodeRabbit inference engine (app/networks/AGENTS.md)
app/networks/**/*.tsx: UseuseChatfrom@ai-sdk/reactwithDefaultChatTransportfor streaming responses from the/networkroute in the networks feature
Support real-time streaming with stop/cancel functionality, reasoning visualization for chain-of-thought models, and tool invocation display showing agent tool calls
Provide a responsive layout with collapsible sidebar on mobile for the networks feature
Files:
app/networks/components/network-header.tsx
app/dashboard/**/*.{ts,tsx}
📄 CodeRabbit inference engine (app/dashboard/AGENTS.md)
app/dashboard/**/*.{ts,tsx}: Use custom React hooks fromlib/hooks/use-mastra.tsto wrap MastraClient for data fetching (e.g.,useAgents(),useAgent(id),useWorkflows(),useTools(), etc.) in dashboard pages
Use action hooks for dashboard mutations (e.g.,useExecuteTool(),useCreateMemoryThread(),useUpdateWorkingMemory(),useVectorQuery(),useScoreTraces()) instead of direct MastraClient calls
Files:
app/dashboard/_components/sidebar.tsxapp/dashboard/page.tsx
**/app/api/**/route.{js,ts}
📄 CodeRabbit inference engine (.github/instructions/next-js.instructions.md)
**/app/api/**/route.{js,ts}: Define server-side route handlers usingroute.tsorroute.jsfiles within theapp/apidirectory.
Use Next.js API routes for serverless functions.
Always validate user input on the server-side using a validation library likezodoryup.
Use authentication middleware to protect API endpoints.
Store API keys and sensitive data in environment variables and access them on the server-side only.
Configure caching with appropriate Cache-Control headers to improve performance and reduce server load.
Enable Gzip or Brotli compression on your server to reduce the size of transferred files.
Implement rate limiting to prevent abuse of your API.
Properly encode API responses to prevent injection attacks.
Files:
app/api/contact/route.ts
**/next.config.{js,ts}
📄 CodeRabbit inference engine (.github/instructions/next-js.instructions.md)
**/next.config.{js,ts}: Integrate linting and formatting into the build process to ensure consistent code.
Analyze bundle size using tools likewebpack-bundle-analyzerto identify large dependencies.
Use tree shaking to remove unused code from bundles.
Files:
next.config.ts
🧬 Code graph analysis (16)
app/chat/config/ollama-models.ts (1)
app/chat/config/models.ts (2)
ProviderConfig(39-44)ModelConfig(28-37)
app/components/footer.tsx (1)
ui/link.tsx (1)
Link(22-49)
app/components/api-components.tsx (1)
src/components/ai-elements/code-block.tsx (1)
line(33-49)
app/components/contact-form.tsx (1)
ui/button.tsx (1)
Button(60-60)
app/chat/config/openai-models.ts (1)
app/chat/config/models.ts (2)
ProviderConfig(39-44)ModelConfig(28-37)
app/chat/config/google-models.ts (1)
app/chat/config/models.ts (2)
ProviderConfig(39-44)ModelConfig(28-37)
app/login/page.tsx (6)
ui/link.tsx (1)
Link(22-49)ui/card.tsx (6)
Card(85-85)CardHeader(86-86)CardTitle(88-88)CardDescription(90-90)CardContent(91-91)CardFooter(87-87)ui/button.tsx (1)
Button(60-60)ui/separator.tsx (1)
Separator(26-26)ui/label.tsx (1)
Label(9-20)ui/input.tsx (1)
Input(21-21)
app/components/blog-layout.tsx (3)
ui/button.tsx (1)
Button(60-60)ui/link.tsx (1)
Link(22-49)ui/badge.tsx (1)
Badge(46-46)
app/components/navbar.tsx (2)
ui/button.tsx (1)
Button(60-60)ui/link.tsx (1)
Link(22-49)
app/chat/components/chat-header.tsx (2)
app/chat/config/models.ts (6)
ModelConfig(28-37)MODEL_CONFIGS(66-72)getModelsByProvider(83-98)PROVIDER_ORDER(74-81)PROVIDER_CONFIGS(52-64)formatContextWindow(108-112)src/components/ai-elements/model-selector.tsx (10)
ModelSelector(23-25)ModelSelectorTrigger(29-31)ModelSelectorContent(37-49)ModelSelectorInput(59-64)ModelSelectorList(68-70)ModelSelectorEmpty(74-76)ModelSelectorGroup(80-82)ModelSelectorLogo(168-181)ModelSelectorItem(86-88)ModelSelectorName(200-205)
app/chat/config/models.ts (5)
app/chat/config/google-models.ts (1)
GOOGLE_PROVIDER_CONFIG(8-13)app/chat/config/openai-models.ts (1)
OPENAI_PROVIDER_CONFIG(8-13)app/chat/config/anthropic-models.ts (1)
ANTHROPIC_PROVIDER_CONFIG(8-13)app/chat/config/openrouter-models.ts (1)
OPENROUTER_PROVIDER_CONFIG(9-14)app/chat/config/ollama-models.ts (1)
OLLAMA_PROVIDER_CONFIG(8-13)
app/chat/config/anthropic-models.ts (1)
app/chat/config/models.ts (2)
ProviderConfig(39-44)ModelConfig(28-37)
app/chat/config/openrouter-models.ts (1)
app/chat/config/models.ts (2)
ProviderConfig(39-44)ModelConfig(28-37)
app/components/landing-cta.tsx (2)
ui/link.tsx (1)
Link(22-49)ui/button.tsx (1)
Button(60-60)
app/components/docs-layout.tsx (3)
ui/badge.tsx (1)
Badge(46-46)ui/button.tsx (1)
Button(60-60)ui/link.tsx (1)
Link(22-49)
app/dashboard/page.tsx (6)
ui/link.tsx (1)
Link(22-49)app/dashboard/_components/index.ts (2)
StatCard(5-5)EmptyState(4-4)app/dashboard/_components/stat-card.tsx (1)
StatCard(25-75)ui/card.tsx (5)
Card(85-85)CardHeader(86-86)CardTitle(88-88)CardDescription(90-90)CardContent(91-91)ui/skeleton.tsx (1)
Skeleton(5-12)app/dashboard/_components/empty-state.tsx (1)
EmptyState(16-48)
🪛 Biome (2.1.2)
app/globals.css
[error] 385-385: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.
transform is already defined here.
Remove or rename the duplicate property to ensure consistent styling.
(lint/suspicious/noDuplicateProperties)
[error] 385-385: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.
transform is already defined here.
Remove or rename the duplicate property to ensure consistent styling.
(lint/suspicious/noDuplicateProperties)
[error] 408-408: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.
grid-template-columns is already defined here.
Remove or rename the duplicate property to ensure consistent styling.
(lint/suspicious/noDuplicateProperties)
[error] 408-408: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.
grid-template-columns is already defined here.
Remove or rename the duplicate property to ensure consistent styling.
(lint/suspicious/noDuplicateProperties)
[error] 408-408: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.
grid-template-columns is already defined here.
Remove or rename the duplicate property to ensure consistent styling.
(lint/suspicious/noDuplicateProperties)
app/dashboard/_components/sidebar.tsx
[error] 259-264: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
🪛 GitHub Check: CodeQL
app/api/contact/route.ts
[failure] 25-25: Polynomial regular expression used on uncontrolled data
This regular expression that depends on a user-provided value may run slow on strings starting with '!@!.' and with many repetitions of '!.'.
⏰ 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). (2)
- GitHub Check: Agent
- GitHub Check: Codacy Security Scan
🔇 Additional comments (57)
app/components/blog-layout.tsx (1)
6-6: Icons import fromlucide-reactlooks goodNamed imports keep the bundle scoped to used icons and match the existing icon usage pattern; no issues here.
app/components/landing-hero.tsx (4)
17-19: Landing section wrapper + grid background look consistent with the new visual systemThe perspective wrapper and shimmer/grid background are cohesive and match the rest of the animated hero; no functional or readability concerns here.
70-74: Confirmtransition-discreteutility is defined in your design systemThe badge styling looks good; one small check:
transition-discreteis not a stock Tailwind class. If it’s a custom utility (e.g., settingtransition-behavior: allow-discrete), all good; otherwise it will be a no‑op. That’s harmless but worth confirming so teammates don’t assume it’s doing something it isn’t.
93-103: Gradient headline + blurred underline implementation looks solidThe
bg-linear-to-rgradient text with a separate blurred underline span is clean and keeps the DOM simple while achieving a strong highlight effect. The animation fromscaleX: 0 → 1on the underline is also straightforward and readable.
128-137: Primary CTA button animation and hover feedback are well‑tunedThe combination of gradient background, spring‑like easing, subtle lift (
hover:-translate-y-0.5), andhover:animate-pulse-glowgives good affordance without being over the top. Usinggroupfor the arrow translation keeps the markup minimal and clear.app/components/networks-list.tsx (1)
88-112: LGTM! Consistent styling enhancements.The addition of 3D card effects, spring easing, and hover transforms aligns well with the broader design system updates. The animation timing (duration-300, duration-200) and transforms provide polished user interactions without affecting functionality.
app/components/examples-list.tsx (1)
90-90: LGTM! Consistent animation styling.The 3D card effects and hover transitions match the design system updates applied across other components, providing a cohesive user experience.
Also applies to: 99-99
app/components/blog-list.tsx (1)
75-75: LGTM! Polished interaction design.The added transition durations and spring easing provide smooth, professional animations consistent with the broader UI updates.
Also applies to: 97-97
memory-bank/activeContext.md (1)
15-58: LGTM! Comprehensive documentation for model configuration system.The Models Configuration System documentation provides clear structure, type definitions, and function signatures that align with the implementation files in this PR. The table of provider coverage and the TypeScript interface examples are particularly helpful for understanding the centralized configuration approach.
app/components/landing-agents.tsx (2)
293-293: LGTM! Modern container query approach.The switch to container-aware grid with
@containerand responsive modifiers (@sm:,@lg:,@xl:) is a modern approach to responsive design that provides better component-level responsiveness.
306-306: LGTM! Consistent 3D card styling.The perspective and hover effects align with the design system updates applied throughout the PR.
next.config.ts (1)
3-4: MDX plugin dependencies are properly installed and configured.Both
remark-gfm(v4.0.1) andrehype-highlight(v7.0.2) are correctly listed in package.json dependencies and are properly used in the MDX configuration (lines 75-78). GitHub Flavored Markdown and syntax highlighting support are enabled for MDX content.app/chat/config/openai-models.ts (1)
1-257: Verify model configurations against OpenAI's official API documentation.This configuration file includes models that require verification against current OpenAI specifications:
- Models with uncertain release status: GPT-4.1, GPT-5, GPT-5.1, o3, o4-mini, and several variant models (o1-pro, o3-pro, codex-mini-latest) may not yet be officially released or available through the OpenAI API.
- Pricing accuracy: Values such as $2/input, $8/output for GPT-4.1 and $1-10 pricing for GPT-5 series lack confirmation against OpenAI's published rates.
- Context window claims: Context windows of 400,000 tokens for GPT-5 series and 1,000,000 tokens for GPT-4.1 need verification.
- Model IDs and naming: Ensure API model identifiers exactly match OpenAI's official naming (e.g., some models may use different ID formats).
Before deployment, cross-reference all model specifications with OpenAI's current API documentation to prevent runtime errors when users select unavailable models or encounter pricing/capability mismatches.
app/components/pricing-tiers.tsx (2)
77-77: Container query approach looks good.The
@containerwith@md:grid-cols-3provides better component-level responsiveness than viewport-based breakpoints. This aligns with the design system patterns used across other components in this PR.
85-91: Enhanced card styling with 3D effects approved.The addition of
card-3d,duration-300,ease-spring, and hover translate effects creates consistent interactive feedback. Theanimate-pulse-glowon the popular badge adds appropriate visual emphasis. All custom utilities (card-3d,ease-spring,animate-pulse-glow) are properly defined in globals.css.app/components/tools-list.tsx (2)
397-424: Popular Tools section styling enhancements look good.The container-query grid (
@container,@sm:grid-cols-2,@lg:grid-cols-4) and 3D card styling with coordinated group-hover effects provide polished interactive feedback. The icon scale transition (group-hover:scale-105) is a nice touch.
480-513: Main tools grid cards styling approved.Consistent application of the
card-3dclass and hover effects (hover:-translate-y-1,hover:shadow-lg) matches the Popular Tools section. The arrow icon translate on hover (group-hover:translate-x-1) provides good directional feedback.app/components/workflows-list.tsx (1)
205-217: Workflow cards styling updates approved.The container-query grid and 3D card styling follow the established pattern from other components. The icon container's
group-hover:scale-105and color transition provide consistent interactive feedback across the design system.app/chat/config/openrouter-models.ts (4)
9-14: Provider configuration structure is correct.The
OPENROUTER_PROVIDER_CONFIGproperly implements theProviderConfiginterface with all required fields (id,name,logo,envKey).
18-57: The Claude models listed are all confirmed to be available on OpenRouter as of December 2025. Claude Sonnet 4.5, Claude Opus 4.5, Claude Haiku 4.5, Claude 3.7 Sonnet, and Claude 3.5 Haiku are actual released models, not speculative versions. The model IDs and configurations in the code are accurate.Likely an incorrect or invalid review comment.
161-167: No changes needed — Llama 4 Scout is a legitimate model.Meta released Llama 4 on April 5, 2025, including the Scout variant. The model configuration is accurate.
296-335: These models are currently available on OpenRouter and not speculative.All listed models—GPT-4.1, GPT-4.1 Mini, GPT-5, GPT-5 Mini, and o4-mini—are confirmed available on OpenRouter as of December 2025. The o4-mini model is deployable until at least April 2026 according to OpenAI's retirement schedule. No changes needed.
app/components/landing-cta.tsx (2)
113-138: CTA buttons with enhanced hover effects approved.The gradient styling, shadow transitions, and hover translate effects provide good visual feedback. The secondary button styling is appropriately subtle compared to the primary CTA.
173-199: Quick links section styling approved.Container-query grid and 3D card styling with coordinated group-hover effects (icon scale, text color, "Learn more" reveal) create polished interactive feedback consistent with other components.
app/components/landing-stats.tsx (2)
110-113: Tailwind CSS 4 syntax updates approved.The migration from
bg-gradient-to-btobg-linear-to-bandbg-[size:24px_24px]tobg-size-[24px_24px]aligns with Tailwind CSS 4 conventions.
123-136: Primary stats grid and card styling approved.Container-query grid with 3D card effects and coordinated icon hover states provide consistent interactive feedback.
memory-bank/techContext.md (2)
22-28: Model configuration documentation looks accurate.The documentation correctly reflects the centralized model config structure in
app/chat/config/with appropriate counts per provider file.
35-39: Frontend structure documentation updated appropriately.The expanded sections for Chat Interface, Networks Interface, Workflows Interface, and Dashboard provide useful context. The model-selector addition to AI Elements is consistent with the PR changes.
app/dashboard/_components/sidebar.tsx (3)
119-165: Collapsed/expanded header implementation looks good.The conditional rendering for collapsed vs expanded states is clean, with proper logo and toggle button placement. The TooltipProvider wrapping enables tooltip hints throughout the sidebar.
167-227: Navigation with tooltip support for collapsed state approved.The Tooltip wrapping for collapsed navigation items provides essential UX feedback. The badge styling with active/inactive state variants is well-implemented.
281-286: Remove this comment — the codebase has no authentication system implemented.This is a development-stage dashboard with a stub login page (line 159: "Development Mode: This is a stub login page"). The sign out link redirecting to
/loginis appropriate given the current state. The login page itself has no real authentication logic—it just simulates a delay and redirects to the dashboard. Once actual authentication is implemented, this issue can be revisited.Likely an incorrect or invalid review comment.
app/components/api-components.tsx (1)
133-151: LGTM!The
ResponseExamplecomponent is well-structured with appropriate status-based color coding. The conditional logic correctly categorizes HTTP status codes.app/login/page.tsx (1)
37-176: Well-structured login UI with good accessibility patterns.The component demonstrates good practices: proper label associations with
htmlFor, disabled states during loading, clear visual feedback, and a development mode notice. The UI structure is clean and follows modern patterns.app/components/landing-features.tsx (2)
139-144: LGTM - Tailwind v4 gradient syntax.Correct use of
bg-linear-to-brwhich is the Tailwind v4 syntax for linear gradients. Consistent with the coding guidelines specifying Tailwind CSS 4.
134-174: Custom 3D utilities are properly defined in app/globals.css.All required custom utility classes are correctly implemented:
.card-3dwith perspective and transform-style.card-3d-innerwith transition and transform-style.preserve-3dwith transform-style--ease-springCSS custom property with cubic-bezier timing functionNo action needed.
app/components/landing-trust.tsx (1)
111-145: LGTM - Consistent styling with container queries.Good use of container query syntax (
@containerwith@sm:,@lg:breakpoints) and consistent styling with other landing components. The trust signals grid is well-structured.app/components/page-header.tsx (2)
48-51: LGTM - Tailwind v4 syntax updates.Correct migration to
bg-size-[14px_24px](Tailwind v4 arbitrary background size syntax). Theperspectiveutility class should be defined in global CSS for 3D effects - ensure it's included with other custom utilities likecard-3dandpreserve-3d.
17-130: Well-architected reusable component.The size variant system with mapped classes is clean and maintainable. Good use of motion animations with viewport triggers and proper defaults for optional props.
memory-bank/progress.md (1)
15-15: LGTM!The progress documentation accurately reflects the new centralized model configuration system with 150+ models across 6 providers, and the Networks UI integration sharing model config with chat.
Also applies to: 21-22
app/components/footer.tsx (1)
79-79: LGTM!The transition and hover effects are consistently applied across footer elements, providing a polished interactive experience. The use of custom easing functions (
ease-smooth,ease-spring) aligns with the design system updates mentioned in the PR.Also applies to: 86-86, 119-120, 136-136, 153-153, 170-170, 187-187, 204-204
app/networks/components/network-header.tsx (1)
95-152: LGTM!The Model Selector UI implementation is clean, with proper grouping by provider, empty state handling, and consistent use of the shared model configuration system.
app/components/contact-form.tsx (2)
146-173: LGTM!The API integration is well-implemented with proper error handling, form reset on success, and automatic recovery from error state. The error handling correctly distinguishes between API errors and network failures.
311-333: LGTM!The error state UI provides clear feedback with a destructive color scheme, helpful alternative (direct email), and a retry option. Good user experience for failure scenarios.
app/chat/config/anthropic-models.ts (1)
1-190: LGTM!The model configuration structure is well-organized with consistent patterns across all entries. Good use of type-only imports, appropriate pricing tiers, and clear categorization by model series.
app/chat/config/ollama-models.ts (2)
6-13: LGTM - Provider configuration follows established pattern.The import uses type-only syntax correctly, and the provider config structure matches the
ProviderConfiginterface with appropriate values for a local Ollama deployment.
215-222: The contextWindow value of 512 for mxbai-embed-large is correct according to official documentation. The Mixedbread model specification and Ollama registry both confirm this model has a maximum input length of 512 tokens. The difference from nomic-embed-text's 8192 tokens reflects different model designs, not a configuration error.Likely an incorrect or invalid review comment.
app/components/landing-testimonials.tsx (2)
180-187: LGTM - Tailwind CSS v4 gradient syntax.The migration from
bg-gradient-to-rtobg-linear-to-raligns with Tailwind CSS v4 conventions per the coding guidelines.
250-269: Good accessibility implementation on interactive cards.The testimonial cards properly include
role="button",tabIndex={0}, and keyboard event handlers (onKeyDownfor Enter/Space), making them accessible for keyboard navigation.app/components/navbar.tsx (3)
237-239: LGTM - Login button addition.The new Login button follows the existing pattern of other navigation items and properly uses Next.js Link with type casting.
275-279: Good accessibility pattern for mobile menu.Using
data-statefor CSS-based visibility and conditionalaria-hiddenwhen closed improves accessibility. The spread syntax for conditionally adding aria-hidden is clean.
343-353: LGTM - Mobile Login button matches desktop implementation.The mobile Login button properly closes the menu on click via
onClick={() => setMobileOpen(false)}and manages tabIndex based on menu state.app/chat/components/chat-header.tsx (1)
199-256: Good implementation of provider-grouped model selection UI.The ModelSelector implementation properly:
- Groups models by provider using
PROVIDER_ORDERfor consistent ordering- Shows provider logo, model name, context window, and description
- Indicates the currently selected model with a check icon
- Handles empty provider groups gracefully
app/components/docs-layout.tsx (2)
54-72: IntersectionObserver cleanup is correct.The observer properly disconnects on cleanup, and the implementation correctly handles visibility tracking for the active heading. The
rootMarginvalues provide good UX for highlighting the current section.
127-150: LGTM - TOC rendering implementation.The TOC sidebar:
- Conditionally renders based on
showTocprop and presence of items- Uses sticky positioning for scroll persistence
- Properly indents H3 items
- Highlights active section with visual feedback
app/chat/config/models.ts (1)
46-72: Centralized provider/model aggregation looks consistent and extensible.The way you aggregate
GOOGLE_MODELS,OPENAI_MODELS,ANTHROPIC_MODELS,OPENROUTER_MODELS, andOLLAMA_MODELSintoMODEL_CONFIGS, plusPROVIDER_CONFIGSkeyed byModelProvider, is clean and makes it easy for UI code (e.g., selectors) to consume.The inline
"google-vertex"entry inPROVIDER_CONFIGSis also fine; if you later add Vertex models, they will plug into this structure naturally.app/dashboard/page.tsx (2)
122-253: Recent Agents and Workflows cards are well-structured; empty/loading states handled cleanly.
- Skeletons for loading and
EmptyStatefor no data cover the main states.- Links to filtered dashboards (
/dashboard/agents?agent=...,/dashboard/workflows?workflow=...) are correct and consistent.- The new icon blocks and badges (“Agent”, “Workflow”) improve scannability.
No functional issues spotted here.
340-413: QuickLinkCard color variants and hover behavior are cleanly implemented.The
colorVariantsmap pluscolor?: keyof typeof colorVariantskeeps QuickLinkCard strongly typed, and thegroup/group-hoverusage for scaling the icon and tinting the title reads well.No issues here; this is a nice, reusable pattern for additional quick links later.
| .github/workflows/**.yml | ||
| .github/workflows/**.yaml |
There was a problem hiding this comment.
Critical: Do not ignore workflow files.
Lines 125-126 ignore all GitHub Actions workflow files (.yml, .yaml) in .github/workflows/. This will prevent CI/CD pipeline definitions from being version controlled, which is almost certainly unintended. Workflow files should be tracked in Git to maintain your automation infrastructure.
Apply this diff to remove the workflow ignore patterns:
# GitHub Actions
-.github/workflows/**.yml
-.github/workflows/**.yaml
.github/actions/**/node_modules/Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In .gitignore around lines 125 to 126, the entries ".github/workflows/**.yml"
and ".github/workflows/**.yaml" are causing all GitHub Actions workflow files to
be ignored; remove those two lines from .gitignore so workflow files under
.github/workflows/ are tracked by Git, then save the file and commit the change.
| export async function POST(request: NextRequest) { | ||
| try { | ||
| const data: ContactFormData = await request.json() | ||
|
|
||
| if (!data.firstName || !data.lastName || !data.email || !data.subject || !data.message) { | ||
| return NextResponse.json( | ||
| { error: "Missing required fields" }, | ||
| { status: 400 } | ||
| ) | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider using Zod for input validation.
The coding guidelines recommend using validation libraries like zod or yup for server-side input validation in API routes. This would provide better type safety, cleaner error messages, and easier schema maintenance.
Example with Zod:
import { z } from "zod"
const ContactSchema = z.object({
firstName: z.string().min(1, "First name is required"),
lastName: z.string().min(1, "Last name is required"),
email: z.string().email("Invalid email address"),
company: z.string().optional(),
inquiryType: z.string().optional(),
subject: z.string().min(1, "Subject is required"),
message: z.string().min(1, "Message is required"),
})
// In POST handler:
const result = ContactSchema.safeParse(await request.json())
if (!result.success) {
return NextResponse.json({ error: result.error.issues[0].message }, { status: 400 })
}
const data = result.data🤖 Prompt for AI Agents
In app/api/contact/route.ts around lines 13 to 22, replace the manual presence
checks with a Zod schema: import z from "zod", define a ContactSchema matching
the contact fields (required firstName, lastName, email with email validation,
subject, message; optional company and inquiryType), then parse the request body
using ContactSchema.safeParse(await request.json()); if parsing fails return a
400 NextResponse with the first validation issue message, otherwise use
result.data as the validated ContactFormData and remove the existing manual
field checks. Ensure you add the zod import at the top and update types to use
the schema's inferred type if desired.
| const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ | ||
| if (!emailRegex.test(data.email)) { | ||
| return NextResponse.json( | ||
| { error: "Invalid email address" }, | ||
| { status: 400 } | ||
| ) | ||
| } |
There was a problem hiding this comment.
Fix ReDoS vulnerability in email regex.
The CodeQL static analysis correctly identifies this regex as vulnerable to polynomial-time execution on crafted inputs. Consider using a simpler, more robust pattern or a validation library.
Apply this diff to use a safer email validation approach:
- const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
- if (!emailRegex.test(data.email)) {
+ // Simple email format check - prevents ReDoS while covering common cases
+ const emailRegex = /^[^@\s]+@[^@\s]+$/
+ if (!emailRegex.test(data.email) || data.email.length > 254) {Alternatively, consider using a validation library like zod for more robust input validation, as per coding guidelines for API routes.
🧰 Tools
🪛 GitHub Check: CodeQL
[failure] 25-25: Polynomial regular expression used on uncontrolled data
This regular expression that depends on a user-provided value may run slow on strings starting with '!@!.' and with many repetitions of '!.'.
🤖 Prompt for AI Agents
In app/api/contact/route.ts around lines 24 to 30, the current complex email
regex is flagged for ReDoS risk; replace it with a safe validation approach —
either use a simple, non-backtracking regex (e.g. check for the presence of one
"@" and at least one "." after it with basic character class checks) or,
preferably, integrate a validation library like zod and validate the request
body with zod.string().email() (or a well-maintained email validator) before
proceeding; update the handler to return the same 400 response on validation
failure and remove the vulnerable regex.
| // Store in database or send email | ||
| // Option 1: Log for now (replace with actual implementation) | ||
| console.log("Contact form submission:", { | ||
| name: `${data.firstName} ${data.lastName}`, | ||
| email: data.email, | ||
| company: data.company || "N/A", | ||
| inquiryType: data.inquiryType || "general", | ||
| subject: data.subject, | ||
| message: data.message, | ||
| timestamp: new Date().toISOString(), | ||
| }) |
There was a problem hiding this comment.
Consider removing PII from logs.
The current implementation logs the user's email address and full name. This creates potential GDPR/CCPA compliance concerns, as server logs may be retained and accessed by various parties. Consider logging only non-identifying metadata (e.g., timestamp, inquiry type) or using a structured logging approach with PII redaction.
console.log("Contact form submission:", {
- name: `${data.firstName} ${data.lastName}`,
- email: data.email,
- company: data.company || "N/A",
inquiryType: data.inquiryType || "general",
- subject: data.subject,
- message: data.message,
+ subject: data.subject.substring(0, 50), // Truncated for logging
timestamp: new Date().toISOString(),
})📝 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.
| // Store in database or send email | |
| // Option 1: Log for now (replace with actual implementation) | |
| console.log("Contact form submission:", { | |
| name: `${data.firstName} ${data.lastName}`, | |
| email: data.email, | |
| company: data.company || "N/A", | |
| inquiryType: data.inquiryType || "general", | |
| subject: data.subject, | |
| message: data.message, | |
| timestamp: new Date().toISOString(), | |
| }) | |
| // Store in database or send email | |
| // Option 1: Log for now (replace with actual implementation) | |
| console.log("Contact form submission:", { | |
| inquiryType: data.inquiryType || "general", | |
| subject: data.subject.substring(0, 50), // Truncated for logging | |
| timestamp: new Date().toISOString(), | |
| }) |
🤖 Prompt for AI Agents
In app/api/contact/route.ts around lines 32 to 42, the current console.log emits
PII (full name and email); replace that with logging only non-identifying
metadata (e.g., timestamp, inquiryType, subject presence, message length or
redacted/hashed identifiers) or implement structured logging with explicit
redaction so names and emails are omitted or masked; ensure company is either
omitted or normalized to a non-identifying flag, and keep logs limited to fields
useful for debugging (timestamp, inquiryType, subject presence, message length)
while removing or hashing any direct personal identifiers.
| const [selectedModel, setSelectedModel] = useState<ModelConfig>( | ||
| MODEL_CONFIGS.find((m) => m.isDefault) || MODEL_CONFIGS[0] | ||
| ) |
There was a problem hiding this comment.
Selected model state is not utilized.
The selectedModel state is set but never passed to the chat context or used in API calls. This appears to be incomplete functionality - the selected model should likely be integrated with useChatContext or passed to the chat backend.
Would you like me to help implement the integration of the selected model with the chat context?
🤖 Prompt for AI Agents
In app/chat/components/chat-header.tsx around lines 95 to 97, the selectedModel
state is created but never used; wire this state into the chat flow by
propagating changes to the chat context and API calls. On model change, call the
chat context updater (e.g., setModel or updateConversationMetadata) so the rest
of the UI and backend know the active model, and include selectedModel.id (or
full config) in the payload when sending messages to the chat API; also
initialize the context with the default model on mount and persist selection to
the conversation or user settings as appropriate so subsequent messages use the
chosen model.
| @@ -0,0 +1,177 @@ | |||
| "use client" | |||
|
|
|||
| import { useEffect, useState } from "react" | |||
There was a problem hiding this comment.
Remove unused import.
useEffect is imported but never used in this file.
-import { useEffect, useState } from "react"
+import { useState } from "react"📝 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.
| import { useEffect, useState } from "react" | |
| import { useState } from "react" |
🤖 Prompt for AI Agents
In app/login/page.tsx around line 3, the import statement includes useEffect
which is not used in the file; remove useEffect from the import so only used
hooks (e.g., useState) are imported, updating the import line to import {
useState } from "react" to eliminate the unused import.
| const handleLogin = async (e: React.FormEvent) => { | ||
| e.preventDefault() | ||
| setIsLoading(true) | ||
|
|
||
| // Stub: simulate login delay then redirect to dashboard | ||
| await new Promise((resolve) => setTimeout(resolve, 1000)) | ||
| router.push("/dashboard" as Route) | ||
| } | ||
|
|
||
| const handleSocialLogin = async (provider: string) => { | ||
| setIsLoading(true) | ||
|
|
||
| // Stub: simulate social login then redirect to dashboard | ||
| await new Promise((resolve) => setTimeout(resolve, 800)) | ||
| router.push("/dashboard" as Route) | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Reset loading state after navigation or on error.
If navigation fails or when real authentication is implemented, isLoading should be reset in a finally block to prevent the UI from being stuck in a loading state.
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault()
setIsLoading(true)
-
- // Stub: simulate login delay then redirect to dashboard
- await new Promise((resolve) => setTimeout(resolve, 1000))
- router.push("/dashboard" as Route)
+ try {
+ // Stub: simulate login delay then redirect to dashboard
+ await new Promise((resolve) => setTimeout(resolve, 1000))
+ router.push("/dashboard" as Route)
+ } finally {
+ setIsLoading(false)
+ }
}
-const handleSocialLogin = async (provider: string) => {
+const handleSocialLogin = async (_provider: string) => {
setIsLoading(true)
-
- // Stub: simulate social login then redirect to dashboard
- await new Promise((resolve) => setTimeout(resolve, 800))
- router.push("/dashboard" as Route)
+ try {
+ // Stub: simulate social login then redirect to dashboard
+ await new Promise((resolve) => setTimeout(resolve, 800))
+ router.push("/dashboard" as Route)
+ } finally {
+ setIsLoading(false)
+ }
}🤖 Prompt for AI Agents
In app/login/page.tsx around lines 20 to 35, both handleLogin and
handleSocialLogin set isLoading(true) but never reset it; change each function
to wrap the async work and router.push call in a try/catch/finally (or use
.finally) so that setIsLoading(false) runs regardless of success or error, and
in the catch block handle or log errors before rethrowing or showing UI
feedback.
| <form onSubmit={handleLogin} className="space-y-4"> | ||
| <div className="space-y-2"> | ||
| <Label htmlFor="email">Email</Label> | ||
| <Input | ||
| id="email" | ||
| type="email" | ||
| placeholder="name@example.com" | ||
| value={email} | ||
| onChange={(e) => setEmail(e.target.value)} | ||
| disabled={isLoading} | ||
| autoComplete="email" | ||
| /> | ||
| </div> | ||
| <div className="space-y-2"> | ||
| <div className="flex items-center justify-between"> | ||
| <Label htmlFor="password">Password</Label> | ||
| <Link | ||
| href="#" | ||
| className="text-xs text-muted-foreground hover:text-primary transition-colors" | ||
| > | ||
| Forgot password? | ||
| </Link> | ||
| </div> | ||
| <Input | ||
| id="password" | ||
| type="password" | ||
| placeholder="••••••••" | ||
| value={password} | ||
| onChange={(e) => setPassword(e.target.value)} | ||
| disabled={isLoading} | ||
| autoComplete="current-password" | ||
| /> | ||
| </div> | ||
| <Button type="submit" className="w-full" disabled={isLoading}> | ||
| {isLoading ? ( | ||
| <> | ||
| <Loader2 className="mr-2 h-4 w-4 animate-spin" /> | ||
| Signing in... | ||
| </> | ||
| ) : ( | ||
| "Sign in" | ||
| )} | ||
| </Button> | ||
| </form> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider using react-hook-form for form management.
As per coding guidelines, react-hook-form should be used for managing forms and validation. This would provide built-in validation, better performance (fewer re-renders), and establish a consistent pattern as the stub evolves into a real implementation.
| const [modelSelectorOpen, setModelSelectorOpen] = useState(false) | ||
| const [selectedModel, setSelectedModel] = useState<ModelConfig>( | ||
| MODEL_CONFIGS.find((m) => m.isDefault) || MODEL_CONFIGS[0] | ||
| ) | ||
|
|
||
| const networksByCategory = useMemo(() => getNetworksByCategory(), []) | ||
| const modelsByProvider = useMemo(() => getModelsByProvider(), []) | ||
| const isExecuting = networkStatus === "executing" || networkStatus === "routing" | ||
|
|
||
| const handleSelectModel = (model: ModelConfig) => { | ||
| setSelectedModel(model) | ||
| setModelSelectorOpen(false) | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
rg -n "selectedModel" app/networks/ -A 2 -B 2Repository: ssdeanx/AgentStack
Length of output: 2452
🏁 Script executed:
rg -n "network-header" app/networks/ -A 5 -B 5Repository: ssdeanx/AgentStack
Length of output: 2094
🏁 Script executed:
cat -n app/networks/providers/network-context.tsx | head -100Repository: ssdeanx/AgentStack
Length of output: 3858
🏁 Script executed:
rg -n "sendMessage\|useChat" app/networks/providers/network-context.tsx -A 10 | head -50Repository: ssdeanx/AgentStack
Length of output: 44
🏁 Script executed:
cat -n app/networks/providers/network-context.tsx | tail -200Repository: ssdeanx/AgentStack
Length of output: 6838
🏁 Script executed:
rg -n "selectedModel" app/networks/components/network-chat.tsx -B 3 -A 3Repository: ssdeanx/AgentStack
Length of output: 848
🏁 Script executed:
rg -n "model" app/networks/config/networks.ts -i | head -20Repository: ssdeanx/AgentStack
Length of output: 44
Remove or complete the model selection feature—the selectedModel state has no effect on network execution.
The selectedModel state is initialized and used only for UI display (showing the model name and checkbox indicator), but is never passed to the network context or included in the API request to /network. The endpoint only receives messages, resourceId, networkId, and input, with no model parameter. Either wire the selected model to the API call or remove the non-functional UI selectors to avoid misleading the user that model selection is available.
🤖 Prompt for AI Agents
In app/networks/components/network-header.tsx around lines 63 to 75 the
selectedModel state is only used for UI and never affects network execution;
either wire it through to the network request or remove it. To fix: (1) If
keeping model selection, add selectedModel to the network execution payload and
network context (propagate it where messages/input are assembled), update the
API call to include a model field and adjust backend /network handler to accept
and use that model; (2) If removing, delete selectedModel, handleSelectModel and
related UI display/checkbox logic so the header doesn’t suggest a selectable
model. Ensure tests/usage sites reflect whichever option you choose.
| <ModelSelectorLogo | ||
| provider={providerConfig.logo as never} | ||
| className="size-3" | ||
| /> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Type assertion as never suggests type mismatch.
The as never assertion indicates the logo property type doesn't match what ModelSelectorLogo expects. Consider aligning the types in ProviderConfig and ModelSelectorLogo props to avoid this workaround.
🤖 Prompt for AI Agents
In app/networks/components/network-header.tsx around lines 121 to 124, the use
of the unsafe type assertion `providerConfig.logo as never` hides a type
mismatch between ProviderConfig.logo and the props expected by
ModelSelectorLogo; remove the `as never` cast and align the types instead —
either update ProviderConfig.logo to the correct type (or union) that
ModelSelectorLogo accepts, or relax ModelSelectorLogo's prop type (e.g., allow
the provider logo type or undefined) so they match, then update any other usages
to conform to the unified type.
1 participant
No description provided.