Implement VoltAgent Dashboard and ECC bundle features#1288
Closed
Abdullakala wants to merge 15 commits into
Closed
Implement VoltAgent Dashboard and ECC bundle features#1288Abdullakala wants to merge 15 commits into
Abdullakala wants to merge 15 commits into
Conversation
Create dashboard package with TopBar, Sidebar, and 10 pages Co-authored-by: Abkdarrk <122768967+Abdullakala@users.noreply.github.com>
…d/voltagent-instincts.yaml)
Implement VoltAgent Dashboard system
feat: add voltagent ECC bundle
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds Voltagent skill and behavioral configuration (Claude/Codex/ECC), and a new React observability dashboard with shell navigation and pages for traces, agents, analytics, logs, settings, and placeholders. ChangesAgent Development Framework & Configuration
Observability Dashboard Application
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces a new @voltagent/dashboard package (Vite + React + Tailwind) providing a multi-page observability-style UI, and adds an ECC/Codex configuration bundle under .codex/, .claude/, and .agents/. It also updates pnpm-lock.yaml to include the new workspace package and its dependencies.
Changes:
- Added a new
packages/dashboardworkspace with Vite config, Tailwind/PostCSS config, and multiple UI pages/components. - Added ECC/Codex multi-agent configuration and generated “skill”/identity files under
.codex/,.claude/, and.agents/. - Updated
pnpm-lock.yamlfor the new dashboard dependencies and related dependency graph changes.
Reviewed changes
Copilot reviewed 30 out of 31 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Adds packages/dashboard importer and locks new UI dependencies (React, Tailwind, framer-motion, recharts, etc.). |
| packages/dashboard/vite.config.ts | Vite config for the new dashboard app (React plugin + dev server settings). |
| packages/dashboard/tsconfig.json | TypeScript configuration for the dashboard package. |
| packages/dashboard/tailwind.config.js | Tailwind configuration for dashboard content scanning/theme. |
| packages/dashboard/postcss.config.js | PostCSS pipeline setup for Tailwind + autoprefixer. |
| packages/dashboard/package.json | Declares the new private workspace package and its scripts/dependencies. |
| packages/dashboard/index.html | Dashboard HTML entrypoint (Vite). |
| packages/dashboard/src/index.tsx | React root bootstrap (createRoot) for the dashboard. |
| packages/dashboard/src/index.css | Tailwind directives + base font + custom keyframes. |
| packages/dashboard/src/App.tsx | App component wiring the shell. |
| packages/dashboard/src/components/Shell/Shell.tsx | Layout shell with top bar/sidebar and view switching. |
| packages/dashboard/src/components/Shell/TopBar.tsx | Top bar UI (search/status/project selector). |
| packages/dashboard/src/components/Shell/Sidebar.tsx | Icon-only sidebar navigation + view type definitions. |
| packages/dashboard/src/pages/Observability.tsx | Main “observability” view layout (trace list, flow graph, inspector). |
| packages/dashboard/src/pages/Agents.tsx | Agents list UI (mock data + cards). |
| packages/dashboard/src/pages/Traces.tsx | Traces table UI with search/filters and pagination chrome. |
| packages/dashboard/src/pages/Logs.tsx | Terminal-style system log view (mock data). |
| packages/dashboard/src/pages/Analytics.tsx | Charts/metrics UI using Recharts (mock data). |
| packages/dashboard/src/pages/Settings.tsx | Settings page with left nav tabs and “General” content. |
| packages/dashboard/src/pages/OtherPages.tsx | Placeholder pages (Memory/Workflows/Tools/Prompts). |
| .codex/config.toml | Adds repo-local Codex configuration + MCP servers + multi-agent settings. |
| .codex/agents/reviewer.toml | Codex “reviewer” agent config. |
| .codex/agents/explorer.toml | Codex “explorer” agent config. |
| .codex/agents/docs-researcher.toml | Codex “docs researcher” agent config. |
| .codex/AGENTS.md | Documents ECC/Codex agent setup and usage for this repo. |
| .claude/skills/voltagent/SKILL.md | Generated “skill” doc content for Claude workflows/conventions. |
| .claude/identity.json | Suggested Claude identity baseline derived from repo analysis. |
| .claude/homunculus/instincts/inherited/voltagent-instincts.yaml | Generated repo “instincts” (commit/style/testing patterns). |
| .claude/ecc-tools.json | ECC tools metadata and managed files list. |
| .agents/skills/voltagent/SKILL.md | Generated “skill” doc content for Codex-facing usage. |
| .agents/skills/voltagent/agents/openai.yaml | Skill metadata for agent interfaces/implicit invocation. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -0,0 +1,276 @@ | |||
| import React from 'react' | |||
| @@ -0,0 +1,134 @@ | |||
| import React from 'react' | |||
| @@ -0,0 +1,109 @@ | |||
| import React from 'react' | |||
| @@ -0,0 +1,107 @@ | |||
| import React, { useState } from 'react' | |||
| @@ -0,0 +1,66 @@ | |||
| import React from 'react' | |||
| @@ -0,0 +1,128 @@ | |||
| import React from 'react' | |||
| @@ -0,0 +1,52 @@ | |||
| import React, { useState } from 'react' | |||
| @@ -0,0 +1,6 @@ | |||
| import React from 'react' | |||
Comment on lines
+1
to
+10
| import { defineConfig } from 'vite' | ||
| import react from '@vitejs/plugin-react' | ||
|
|
||
| export default defineConfig({ | ||
| plugins: [react()], | ||
| server: { | ||
| port: 3000, | ||
| open: false | ||
| } | ||
| }) |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 9
🧹 Nitpick comments (4)
.codex/config.toml (1)
9-15: ⚡ Quick winPin MCP server package versions instead of floating latest.
Using
npxpackage specs without fixed versions (including@latest) makes agent behavior non-reproducible and increases supply-chain drift risk. Lock these MCP package versions to tested releases:
- Line 10:
@modelcontextprotocol/server-github(no version)- Line 14:
@upstash/context7-mcp@latest- Line 21:
@modelcontextprotocol/server-memory(no version)- Line 25:
@playwright/mcp@latest- Line 29:
@modelcontextprotocol/server-sequential-thinking(no version)Proposed config update pattern
[mcp_servers.github] command = "npx" -args = ["-y", "`@modelcontextprotocol/server-github`"] +args = ["-y", "`@modelcontextprotocol/server-github`@<pinned_version>"] [mcp_servers.context7] command = "npx" -args = ["-y", "`@upstash/context7-mcp`@latest"] +args = ["-y", "`@upstash/context7-mcp`@<pinned_version>"] [mcp_servers.memory] command = "npx" -args = ["-y", "`@modelcontextprotocol/server-memory`"] +args = ["-y", "`@modelcontextprotocol/server-memory`@<pinned_version>"] [mcp_servers.playwright] command = "npx" -args = ["-y", "`@playwright/mcp`@latest", "--extension"] +args = ["-y", "`@playwright/mcp`@<pinned_version>", "--extension"] [mcp_servers.sequential-thinking] command = "npx" -args = ["-y", "`@modelcontextprotocol/server-sequential-thinking`"] +args = ["-y", "`@modelcontextprotocol/server-sequential-thinking`@<pinned_version>"]🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.codex/config.toml around lines 9 - 15, The config currently uses floating package specs in the args for MCP servers (e.g., "`@modelcontextprotocol/server-github`", "`@upstash/context7-mcp`@latest", "`@modelcontextprotocol/server-memory`", "`@playwright/mcp`@latest", "`@modelcontextprotocol/server-sequential-thinking`"); update each args entry to pin to a specific tested semantic version (for example replace bare package names and “@latest” usages with explicit versions like "`@modelcontextprotocol/server-github`@x.y.z", "`@upstash/context7-mcp`@a.b.c", etc.), ensuring you update all occurrences under the mcp_servers.* sections (e.g., mcp_servers.context7) and any top-level command args entries so every package string is a fixed version rather than unversioned or `@latest`.packages/dashboard/src/index.tsx (1)
2-2: 💤 Low valueRemove unused React import.
With
jsx: "react-jsx"configured intsconfig.json, the explicitReactimport is no longer required. The JSX transform handles it automatically.♻️ Proposed fix
import './index.css' -import React from 'react' import { createRoot } from 'react-dom/client' import { App } from './App' const container = document.getElementById('root') if (container) { const root = createRoot(container) - root.render( - <React.StrictMode> - <App /> - </React.StrictMode> - ) + root.render(<App />) }Note: This also removes
StrictMode. If you want to keepStrictModefor development checks, import it explicitly:import './index.css' +import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import { App } from './App' const container = document.getElementById('root') if (container) { const root = createRoot(container) - root.render( - <React.StrictMode> - <App /> - </React.StrictMode> - ) + root.render( + <StrictMode> + <App /> + </StrictMode> + ) }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/dashboard/src/index.tsx` at line 2, Remove the now-unused top-level React import in packages/dashboard/src/index.tsx (the line importing React) since tsconfig uses jsx: "react-jsx" and the new JSX transform makes that import unnecessary; update the file by deleting the import statement and, if you still need React.StrictMode semantics, explicitly import and wrap with StrictMode (import { StrictMode } from 'react') where used.packages/dashboard/src/App.tsx (1)
1-1: 💤 Low valueRemove unused React import.
With
jsx: "react-jsx"configured intsconfig.json, the explicitReactimport is unnecessary. The new JSX transform handles this automatically.♻️ Proposed fix
-import React from 'react' import { Shell } from './components/Shell/Shell' export function App() {🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/dashboard/src/App.tsx` at line 1, Remove the unused React import statement (the line importing React) from App.tsx since the project uses the new JSX transform (tsconfig's jsx: "react-jsx"); locate the top-level "import React from 'react'" and delete it so the file no longer contains an unused React symbol.packages/dashboard/index.html (1)
5-5: 💤 Low valueUpdate favicon reference from Vite default.
The favicon currently references
/vite.svg, which is typically a Vite scaffold placeholder. Consider replacing it with a VoltAgent-specific icon or removing the line if no favicon is ready yet.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/dashboard/index.html` at line 5, Replace the default Vite favicon link (<link rel="icon" type="image/svg+xml" href="/vite.svg" />) with the project-specific favicon or remove the element if none exists yet; update the href to point to the VoltAgent icon (e.g. "favicon.ico" or "assets/voltagent-icon.svg") or delete the link node to avoid referencing the Vite scaffold placeholder.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.agents/skills/voltagent/SKILL.md:
- Around line 1-69: Remove the outer triple-backtick fence wrapping the entire
SKILL.md so the document is real markdown (locate the top-level "voltagent
Development Patterns" heading and the surrounding opening/closing ``` fences)
and fix markdownlint issues by changing the commit example fence to a
language-tagged block (replace the ``` around "feat: add user authentication"
with ```text) and ensure there's a blank line before the "## Commands" table
(add one empty line above the table) so MD040/MD058 violations are resolved.
In @.claude/homunculus/instincts/inherited/voltagent-instincts.yaml:
- Around line 7-27: The YAML file is invalid because it mixes document
front-matter with markdown sections; replace the markdown blocks with a single
valid YAML mapping for the instinct (use the existing id:
voltagent-commit-conventional and fields like trigger, confidence, domain,
source, source_repo, action, and evidence as an array), remove any `---`
separated markdown content and bullet formatting, and ensure evidence is an
actual YAML list (e.g., evidence: - "1 commits analyzed" - "Detected
conventional commit pattern" - "Examples: feat: build VoltAgent Dashboard
system") so the loader can parse the document correctly.
In @.claude/skills/voltagent/SKILL.md:
- Around line 1-69: The SKILL.md file is wrapped in an outer triple-backtick
code fence which forces the entire document to render as a single code block and
causes table/fence lint errors; open .claude/skills/voltagent/SKILL.md and
remove the leading and trailing ```markdown fences so the file is plain Markdown
(keep the inner fenced examples where appropriate), then verify the Commands
table and any code fences use correct Markdown syntax (pipe-separated table
header/rows and triple-backticks for inline examples) so the document renders
and lints correctly.
In `@packages/dashboard/src/components/Shell/Sidebar.tsx`:
- Around line 88-93: The sidebar renders icon-only buttons (see the button using
onViewChange, ViewType, item.id, item.label and the sibling button at lines
~109–113) that currently only set title; update both button elements to include
aria-label={item.label} (so screen readers get a readable name) and
aria-current={isActive ? "page" : undefined} (to expose the active state),
leaving existing className and onClick behavior intact; ensure you add the same
attributes to the other icon-only control block that uses the same
item/id/isActive pattern.
In `@packages/dashboard/src/components/Shell/TopBar.tsx`:
- Around line 49-53: The top-bar is missing accessible names and proper
semantics: update the Search input in TopBar (the text input with placeholder
"Search traces, agents...") to include a visible or visually-hidden label and/or
an aria-label (e.g., aria-label="Search traces and agents") so screen readers
get a reliable name and ensure keyboard users can focus it; replace the
clickable avatar/star region (the non-button container currently used for avatar
and star interactions) with real <button> elements (or make each interactive
area a button element) and add appropriate aria-labels (e.g., "Open user menu",
"Toggle favorite") and keyboard focus styles so those controls expose accessible
roles and names. Ensure these changes are applied inside the TopBar component so
the input and interactive avatar/star controls are semantic, focusable, and
announced by assistive tech.
In `@packages/dashboard/src/index.tsx`:
- Around line 6-14: The current bootstrapping silently returns when
document.getElementById('root') yields null; update the logic around
container/createRoot/root.render to surface this failure: if container is null,
log a clear error (or throw) indicating the '`#root`' element is missing and
include contextual info (e.g., environment or suggest DOM mounting issue),
otherwise proceed to call createRoot(container) and
root.render(<React.StrictMode><App /></React.StrictMode>); ensure the variable
names container, createRoot, root, and App are the ones updated so reviewers can
locate the change.
In `@packages/dashboard/src/pages/Analytics.tsx`:
- Around line 74-103: The KPI trend color logic treats all negative changes as
bad; update the stats data and rendering to use per-metric semantics so
decreases can be shown as good for latency. Add a property to each stat (e.g.,
goodWhen: 'lower' | 'higher' or betterWhenLower boolean) in the stats array (the
array with label 'Avg Latency' in Analytics.tsx) and in the .map((stat, i) =>
...) rendering use that property instead of a blanket sign check to choose green
for improvements and red for regressions (e.g., for Avg Latency, goodWhen:
'lower' so a negative change becomes green while positive becomes red).
In `@packages/dashboard/src/pages/Logs.tsx`:
- Around line 71-88: The three button controls (Play, Download, Trash2) in the
Logs component are rendered as active but have no behavior; update their
elements (the buttons that render Play, Download, and Trash2) to either wire
actual handlers or make them clearly inactive: best quick fix is to set disabled
and aria-disabled on each button, change styling to the disabled state (remove
hover effects and use muted text color), and update the title to "Not available"
(or attach a no-op onClick that shows a toast like "Not implemented" if you
prefer). Locate the button elements that render Play, Download, and Trash2 in
the Logs.tsx render and apply the disabled flag and accessible labeling or
implement onResume/onExport/onClear handler functions to perform the expected
actions.
In `@packages/dashboard/src/pages/Settings.tsx`:
- Around line 71-75: The Save Changes and Delete Project buttons in Settings.tsx
are currently inert; add simple actionable guards: implement onClick handlers
(e.g., handleSaveChanges and handleDeleteProject) and wire them to the
respective <button> elements to perform the intended actions (or call a stubbed
API function) OR render the buttons disabled with aria-disabled and disabled
attributes, a muted style, and a tooltip/title like "Coming soon" to signal
non-availability. Update the Save button that contains <Save size={16} ... />
and the Delete Project button (around the block referenced at lines 92-94) to
use either the onClick handlers or the disabled state so users cannot hit a
dead-end interaction.
---
Nitpick comments:
In @.codex/config.toml:
- Around line 9-15: The config currently uses floating package specs in the args
for MCP servers (e.g., "`@modelcontextprotocol/server-github`",
"`@upstash/context7-mcp`@latest", "`@modelcontextprotocol/server-memory`",
"`@playwright/mcp`@latest", "`@modelcontextprotocol/server-sequential-thinking`");
update each args entry to pin to a specific tested semantic version (for example
replace bare package names and “@latest” usages with explicit versions like
"`@modelcontextprotocol/server-github`@x.y.z", "`@upstash/context7-mcp`@a.b.c",
etc.), ensuring you update all occurrences under the mcp_servers.* sections
(e.g., mcp_servers.context7) and any top-level command args entries so every
package string is a fixed version rather than unversioned or `@latest`.
In `@packages/dashboard/index.html`:
- Line 5: Replace the default Vite favicon link (<link rel="icon"
type="image/svg+xml" href="/vite.svg" />) with the project-specific favicon or
remove the element if none exists yet; update the href to point to the VoltAgent
icon (e.g. "favicon.ico" or "assets/voltagent-icon.svg") or delete the link node
to avoid referencing the Vite scaffold placeholder.
In `@packages/dashboard/src/App.tsx`:
- Line 1: Remove the unused React import statement (the line importing React)
from App.tsx since the project uses the new JSX transform (tsconfig's jsx:
"react-jsx"); locate the top-level "import React from 'react'" and delete it so
the file no longer contains an unused React symbol.
In `@packages/dashboard/src/index.tsx`:
- Line 2: Remove the now-unused top-level React import in
packages/dashboard/src/index.tsx (the line importing React) since tsconfig uses
jsx: "react-jsx" and the new JSX transform makes that import unnecessary; update
the file by deleting the import statement and, if you still need
React.StrictMode semantics, explicitly import and wrap with StrictMode (import {
StrictMode } from 'react') where used.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 0ad38cd3-67f4-43ed-88d1-8e407b04cc2d
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (30)
.agents/skills/voltagent/SKILL.md.agents/skills/voltagent/agents/openai.yaml.claude/ecc-tools.json.claude/homunculus/instincts/inherited/voltagent-instincts.yaml.claude/identity.json.claude/skills/voltagent/SKILL.md.codex/AGENTS.md.codex/agents/docs-researcher.toml.codex/agents/explorer.toml.codex/agents/reviewer.toml.codex/config.tomlpackages/dashboard/index.htmlpackages/dashboard/package.jsonpackages/dashboard/postcss.config.jspackages/dashboard/src/App.tsxpackages/dashboard/src/components/Shell/Shell.tsxpackages/dashboard/src/components/Shell/Sidebar.tsxpackages/dashboard/src/components/Shell/TopBar.tsxpackages/dashboard/src/index.csspackages/dashboard/src/index.tsxpackages/dashboard/src/pages/Agents.tsxpackages/dashboard/src/pages/Analytics.tsxpackages/dashboard/src/pages/Logs.tsxpackages/dashboard/src/pages/Observability.tsxpackages/dashboard/src/pages/OtherPages.tsxpackages/dashboard/src/pages/Settings.tsxpackages/dashboard/src/pages/Traces.tsxpackages/dashboard/tailwind.config.jspackages/dashboard/tsconfig.jsonpackages/dashboard/vite.config.ts
Comment on lines
+1
to
+69
| ```markdown | ||
| # voltagent Development Patterns | ||
|
|
||
| > Auto-generated skill from repository analysis | ||
|
|
||
| ## Overview | ||
| This skill teaches the key development patterns and conventions used in the `voltagent` TypeScript codebase. It covers file naming, import/export styles, commit message conventions, and testing patterns. By following these guidelines, contributors can write consistent, maintainable code and collaborate effectively. | ||
|
|
||
| ## Coding Conventions | ||
|
|
||
| ### File Naming | ||
| - Use **PascalCase** for file names. | ||
| - Example: `MyComponent.ts`, `UserService.ts` | ||
|
|
||
| ### Import Style | ||
| - Use **relative imports** for modules within the project. | ||
| - Example: | ||
| ```typescript | ||
| import { UserService } from './UserService'; | ||
| ``` | ||
|
|
||
| ### Export Style | ||
| - Use **named exports** rather than default exports. | ||
| - Example: | ||
| ```typescript | ||
| // UserService.ts | ||
| export function UserService() { ... } | ||
| ``` | ||
| ```typescript | ||
| import { UserService } from './UserService'; | ||
| ``` | ||
|
|
||
| ### Commit Messages | ||
| - Use **conventional commit** format. | ||
| - Prefix new features with `feat`. | ||
| - Example: | ||
| ``` | ||
| feat: add user authentication | ||
| ``` | ||
|
|
||
| ## Workflows | ||
|
|
||
| _No explicit workflows detected in this repository._ | ||
|
|
||
| ## Testing Patterns | ||
|
|
||
| - Test files follow the `*.test.*` pattern. | ||
| - Example: `UserService.test.ts` | ||
| - Testing framework is **unknown** (not detected). | ||
| - Place tests alongside the code or in a dedicated test directory. | ||
| - Example test file structure: | ||
| ```typescript | ||
| // UserService.test.ts | ||
| import { UserService } from './UserService'; | ||
|
|
||
| describe('UserService', () => { | ||
| it('should return user data', () => { | ||
| // test implementation | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| ## Commands | ||
| | Command | Purpose | | ||
| |---------|---------| | ||
| | /conventions | Show coding conventions and examples | | ||
| | /test-patterns | Show how to write and name tests | | ||
| | /commit-guide | Show commit message guidelines | | ||
| ``` |
Contributor
There was a problem hiding this comment.
Remove the outer code fence and fix markdownlint violations.
This file currently renders as a single code block instead of a skill document, and it also violates MD058/MD040.
Suggested patch
-```markdown
# voltagent Development Patterns
@@
- Prefix new features with `feat`.
- Example:
- ```
+ ```text
feat: add user authentication
```
@@
## Commands
+
| Command | Purpose |
|---------|---------|
| /conventions | Show coding conventions and examples |
| /test-patterns | Show how to write and name tests |
| /commit-guide | Show commit message guidelines |
-```🧰 Tools
🪛 markdownlint-cli2 (0.22.1)
[warning] 64-64: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
[warning] 68-68: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
[warning] 69-69: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.agents/skills/voltagent/SKILL.md around lines 1 - 69, Remove the outer
triple-backtick fence wrapping the entire SKILL.md so the document is real
markdown (locate the top-level "voltagent Development Patterns" heading and the
surrounding opening/closing ``` fences) and fix markdownlint issues by changing
the commit example fence to a language-tagged block (replace the ``` around
"feat: add user authentication" with ```text) and ensure there's a blank line
before the "## Commands" table (add one empty line above the table) so
MD040/MD058 violations are resolved.
Comment on lines
+7
to
+27
| --- | ||
| id: voltagent-commit-conventional | ||
| trigger: "when writing a commit message" | ||
| confidence: 0.85 | ||
| domain: git | ||
| source: repo-analysis | ||
| source_repo: https://github.com/Abdullakala/voltagent | ||
| --- | ||
|
|
||
| # Voltagent Commit Conventional | ||
|
|
||
| ## Action | ||
|
|
||
| Use conventional commit format with prefixes: feat | ||
|
|
||
| ## Evidence | ||
|
|
||
| - 1 commits analyzed | ||
| - Detected conventional commit pattern | ||
| - Examples: feat: build VoltAgent Dashboard system | ||
|
|
Contributor
There was a problem hiding this comment.
YAML is syntactically invalid; instinct loader will fail.
After --- blocks, the file switches to markdown-style sections and sequence items (e.g., Line 24) that do not belong to a valid YAML mapping/list structure.
Convert each instinct to a single valid YAML document/object shape (e.g., id, trigger, confidence, domain, source, action, evidence[]) and remove markdown-only formatting from this .yaml file.
🧰 Tools
🪛 YAMLlint (1.38.0)
[error] 24-24: syntax error: expected , but found '-'
(syntax)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.claude/homunculus/instincts/inherited/voltagent-instincts.yaml around lines
7 - 27, The YAML file is invalid because it mixes document front-matter with
markdown sections; replace the markdown blocks with a single valid YAML mapping
for the instinct (use the existing id: voltagent-commit-conventional and fields
like trigger, confidence, domain, source, source_repo, action, and evidence as
an array), remove any `---` separated markdown content and bullet formatting,
and ensure evidence is an actual YAML list (e.g., evidence: - "1 commits
analyzed" - "Detected conventional commit pattern" - "Examples: feat: build
VoltAgent Dashboard system") so the loader can parse the document correctly.
Comment on lines
+1
to
+69
| ```markdown | ||
| # voltagent Development Patterns | ||
|
|
||
| > Auto-generated skill from repository analysis | ||
|
|
||
| ## Overview | ||
| This skill teaches the key development patterns and conventions used in the `voltagent` TypeScript codebase. It covers file naming, import/export styles, commit message conventions, and testing patterns. By following these guidelines, contributors can write consistent, maintainable code and collaborate effectively. | ||
|
|
||
| ## Coding Conventions | ||
|
|
||
| ### File Naming | ||
| - Use **PascalCase** for file names. | ||
| - Example: `MyComponent.ts`, `UserService.ts` | ||
|
|
||
| ### Import Style | ||
| - Use **relative imports** for modules within the project. | ||
| - Example: | ||
| ```typescript | ||
| import { UserService } from './UserService'; | ||
| ``` | ||
|
|
||
| ### Export Style | ||
| - Use **named exports** rather than default exports. | ||
| - Example: | ||
| ```typescript | ||
| // UserService.ts | ||
| export function UserService() { ... } | ||
| ``` | ||
| ```typescript | ||
| import { UserService } from './UserService'; | ||
| ``` | ||
|
|
||
| ### Commit Messages | ||
| - Use **conventional commit** format. | ||
| - Prefix new features with `feat`. | ||
| - Example: | ||
| ``` | ||
| feat: add user authentication | ||
| ``` | ||
|
|
||
| ## Workflows | ||
|
|
||
| _No explicit workflows detected in this repository._ | ||
|
|
||
| ## Testing Patterns | ||
|
|
||
| - Test files follow the `*.test.*` pattern. | ||
| - Example: `UserService.test.ts` | ||
| - Testing framework is **unknown** (not detected). | ||
| - Place tests alongside the code or in a dedicated test directory. | ||
| - Example test file structure: | ||
| ```typescript | ||
| // UserService.test.ts | ||
| import { UserService } from './UserService'; | ||
|
|
||
| describe('UserService', () => { | ||
| it('should return user data', () => { | ||
| // test implementation | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| ## Commands | ||
| | Command | Purpose | | ||
| |---------|---------| | ||
| | /conventions | Show coding conventions and examples | | ||
| | /test-patterns | Show how to write and name tests | | ||
| | /commit-guide | Show commit message guidelines | | ||
| ``` |
Contributor
There was a problem hiding this comment.
This mirrored skill doc has the same markdown rendering/lint breakage.
The outer fence makes the whole document render as code, and the table/fence lint issues remain.
🧰 Tools
🪛 markdownlint-cli2 (0.22.1)
[warning] 64-64: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
[warning] 68-68: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
[warning] 69-69: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.claude/skills/voltagent/SKILL.md around lines 1 - 69, The SKILL.md file is
wrapped in an outer triple-backtick code fence which forces the entire document
to render as a single code block and causes table/fence lint errors; open
.claude/skills/voltagent/SKILL.md and remove the leading and trailing
```markdown fences so the file is plain Markdown (keep the inner fenced examples
where appropriate), then verify the Commands table and any code fences use
correct Markdown syntax (pipe-separated table header/rows and triple-backticks
for inline examples) so the document renders and lints correctly.
Comment on lines
+88
to
+93
| <button | ||
| key={item.id} | ||
| onClick={() => onViewChange(item.id as ViewType)} | ||
| className={`relative p-2.5 rounded-lg flex items-center justify-center group transition-all duration-200 ${isActive ? 'bg-emerald-500/10 text-emerald-500' : 'text-gray-500 hover:text-gray-300 hover:bg-gray-800/50'}`} | ||
| title={item.label} | ||
| > |
Contributor
There was a problem hiding this comment.
Add accessible names and current-state semantics to sidebar icon buttons.
Line 88 and Line 109 define icon-only controls with title only; that is insufficient for reliable screen-reader navigation. Add aria-label and aria-current for the active item.
Proposed fix
<button
key={item.id}
+ type="button"
+ aria-label={item.label}
+ aria-current={isActive ? 'page' : undefined}
onClick={() => onViewChange(item.id as ViewType)}
className={`relative p-2.5 rounded-lg flex items-center justify-center group transition-all duration-200 ${isActive ? 'bg-emerald-500/10 text-emerald-500' : 'text-gray-500 hover:text-gray-300 hover:bg-gray-800/50'}`}
title={item.label}
>
...
<button
+ type="button"
+ aria-label="Settings"
+ aria-current={activeView === 'settings' ? 'page' : undefined}
onClick={() => onViewChange('settings')}
className={`relative p-2.5 rounded-lg flex items-center justify-center group w-full transition-all duration-200 ${activeView === 'settings' ? 'bg-emerald-500/10 text-emerald-500' : 'text-gray-500 hover:text-gray-300 hover:bg-gray-800/50'}`}
title="Settings"
>Also applies to: 109-113
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/dashboard/src/components/Shell/Sidebar.tsx` around lines 88 - 93,
The sidebar renders icon-only buttons (see the button using onViewChange,
ViewType, item.id, item.label and the sibling button at lines ~109–113) that
currently only set title; update both button elements to include
aria-label={item.label} (so screen readers get a readable name) and
aria-current={isActive ? "page" : undefined} (to expose the active state),
leaving existing className and onClick behavior intact; ensure you add the same
attributes to the other icon-only control block that uses the same
item/id/isActive pattern.
Comment on lines
+49
to
+53
| <input | ||
| type="text" | ||
| placeholder="Search traces, agents..." | ||
| className="bg-[#111614] border border-gray-800 text-xs text-white rounded-md pl-8 pr-3 py-1.5 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 w-64 transition-all" | ||
| /> |
Contributor
There was a problem hiding this comment.
Fix top-bar control accessibility (labels + semantic buttons).
Line 49 and Line 55 introduce interactive UI without reliable accessible names/semantics (placeholder-only search, clickable non-button avatar/star region). This blocks keyboard/screen-reader users.
Proposed fix
<input
type="text"
placeholder="Search traces, agents..."
+ aria-label="Search traces and agents"
className="bg-[`#111614`] border border-gray-800 text-xs text-white rounded-md pl-8 pr-3 py-1.5 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 w-64 transition-all"
/>
...
- <div className="flex items-center text-xs text-gray-400 hover:text-white cursor-pointer transition-colors">
+ <button
+ type="button"
+ aria-label="View starred items"
+ className="flex items-center text-xs text-gray-400 hover:text-white transition-colors"
+ >
<Star size={14} className="mr-1" /> 3.5K
- </div>
- <button className="text-gray-400 hover:text-white transition-colors relative">
+ </button>
+ <button
+ type="button"
+ aria-label="Open notifications"
+ className="text-gray-400 hover:text-white transition-colors relative"
+ >
<Bell size={16} />
<span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-emerald-500 rounded-full border border-[`#0a0d0c`]"></span>
</button>
- <div className="w-6 h-6 rounded-full bg-gradient-to-tr from-emerald-500 to-blue-500 cursor-pointer border border-gray-700"></div>
+ <button
+ type="button"
+ aria-label="Open user menu"
+ className="w-6 h-6 rounded-full bg-gradient-to-tr from-emerald-500 to-blue-500 border border-gray-700"
+ />Also applies to: 55-63
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/dashboard/src/components/Shell/TopBar.tsx` around lines 49 - 53, The
top-bar is missing accessible names and proper semantics: update the Search
input in TopBar (the text input with placeholder "Search traces, agents...") to
include a visible or visually-hidden label and/or an aria-label (e.g.,
aria-label="Search traces and agents") so screen readers get a reliable name and
ensure keyboard users can focus it; replace the clickable avatar/star region
(the non-button container currently used for avatar and star interactions) with
real <button> elements (or make each interactive area a button element) and add
appropriate aria-labels (e.g., "Open user menu", "Toggle favorite") and keyboard
focus styles so those controls expose accessible roles and names. Ensure these
changes are applied inside the TopBar component so the input and interactive
avatar/star controls are semantic, focusable, and announced by assistive tech.
Comment on lines
+6
to
+14
| const container = document.getElementById('root') | ||
| if (container) { | ||
| const root = createRoot(container) | ||
| root.render( | ||
| <React.StrictMode> | ||
| <App /> | ||
| </React.StrictMode> | ||
| ) | ||
| } |
Contributor
There was a problem hiding this comment.
Add error handling when root element is missing.
The code silently fails if the #root element is not found in the DOM. This could hide configuration or deployment issues. Consider throwing an error or logging a warning to aid debugging.
🛡️ Proposed fix
const container = document.getElementById('root')
if (container) {
const root = createRoot(container)
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
)
+} else {
+ throw new Error('Failed to find root element. Ensure index.html contains <div id="root"></div>')
}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/dashboard/src/index.tsx` around lines 6 - 14, The current
bootstrapping silently returns when document.getElementById('root') yields null;
update the logic around container/createRoot/root.render to surface this
failure: if container is null, log a clear error (or throw) indicating the
'`#root`' element is missing and include contextual info (e.g., environment or
suggest DOM mounting issue), otherwise proceed to call createRoot(container) and
root.render(<React.StrictMode><App /></React.StrictMode>); ensure the variable
names container, createRoot, root, and App are the ones updated so reviewers can
locate the change.
Comment on lines
+74
to
+103
| {[ | ||
| { | ||
| label: 'Total Traces (24h)', | ||
| value: '142.5K', | ||
| change: '+12.5%', | ||
| icon: Activity, | ||
| color: 'text-blue-500', | ||
| }, | ||
| { | ||
| label: 'Avg Latency', | ||
| value: '1.24s', | ||
| change: '-5.2%', | ||
| icon: Zap, | ||
| color: 'text-amber-500', | ||
| }, | ||
| { | ||
| label: 'Total Cost (MTD)', | ||
| value: '$842.50', | ||
| change: '+2.4%', | ||
| icon: DollarSign, | ||
| color: 'text-emerald-500', | ||
| }, | ||
| { | ||
| label: 'Success Rate', | ||
| value: '99.8%', | ||
| change: '+0.1%', | ||
| icon: Target, | ||
| color: 'text-purple-500', | ||
| }, | ||
| ].map((stat, i) => { |
Contributor
There was a problem hiding this comment.
Correct KPI trend color semantics for latency.
Line 132 colors all negative changes red, which mislabels improvements like Avg Latency -5.2%. Use per-metric trend direction.
Proposed fix
{
label: 'Total Traces (24h)',
value: '142.5K',
change: '+12.5%',
+ improvesWhen: 'up',
icon: Activity,
color: 'text-blue-500',
},
{
label: 'Avg Latency',
value: '1.24s',
change: '-5.2%',
+ improvesWhen: 'down',
icon: Zap,
color: 'text-amber-500',
},
{
label: 'Total Cost (MTD)',
value: '$842.50',
change: '+2.4%',
+ improvesWhen: 'down',
icon: DollarSign,
color: 'text-emerald-500',
},
{
label: 'Success Rate',
value: '99.8%',
change: '+0.1%',
+ improvesWhen: 'up',
icon: Target,
color: 'text-purple-500',
},
].map((stat, i) => {
const Icon = stat.icon
+ const isPositive = stat.change.startsWith('+')
+ const isGood = stat.improvesWhen === 'up' ? isPositive : !isPositive
return (
...
<span
- className={`text-xs mb-1 ${stat.change.startsWith('+') ? 'text-emerald-500' : 'text-red-500'}`}
+ className={`text-xs mb-1 ${isGood ? 'text-emerald-500' : 'text-red-500'}`}
>
{stat.change}
</span>Also applies to: 132-133
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/dashboard/src/pages/Analytics.tsx` around lines 74 - 103, The KPI
trend color logic treats all negative changes as bad; update the stats data and
rendering to use per-metric semantics so decreases can be shown as good for
latency. Add a property to each stat (e.g., goodWhen: 'lower' | 'higher' or
betterWhenLower boolean) in the stats array (the array with label 'Avg Latency'
in Analytics.tsx) and in the .map((stat, i) => ...) rendering use that property
instead of a blanket sign check to choose green for improvements and red for
regressions (e.g., for Avg Latency, goodWhen: 'lower' so a negative change
becomes green while positive becomes red).
Comment on lines
+71
to
+88
| <button | ||
| className="p-2 bg-[#111614] border border-gray-800 rounded text-emerald-500 hover:bg-gray-800 transition-colors" | ||
| title="Resume Auto-scroll" | ||
| > | ||
| <Play size={16} /> | ||
| </button> | ||
| <button | ||
| className="p-2 bg-[#111614] border border-gray-800 rounded text-gray-400 hover:text-white hover:bg-gray-800 transition-colors" | ||
| title="Export Logs" | ||
| > | ||
| <Download size={16} /> | ||
| </button> | ||
| <button | ||
| className="p-2 bg-[#111614] border border-gray-800 rounded text-red-500 hover:bg-gray-800 transition-colors" | ||
| title="Clear Logs" | ||
| > | ||
| <Trash2 size={16} /> | ||
| </button> |
Contributor
There was a problem hiding this comment.
Avoid shipping non-functional log controls as active UI.
Resume, Export, Clear, and Auto-scroll controls are presented as usable but currently do nothing. Please either wire behavior or disable/label them as not available yet to prevent misleading interactions.
Also applies to: 99-105
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/dashboard/src/pages/Logs.tsx` around lines 71 - 88, The three button
controls (Play, Download, Trash2) in the Logs component are rendered as active
but have no behavior; update their elements (the buttons that render Play,
Download, and Trash2) to either wire actual handlers or make them clearly
inactive: best quick fix is to set disabled and aria-disabled on each button,
change styling to the disabled state (remove hover effects and use muted text
color), and update the title to "Not available" (or attach a no-op onClick that
shows a toast like "Not implemented" if you prefer). Locate the button elements
that render Play, Download, and Trash2 in the Logs.tsx render and apply the
disabled flag and accessible labeling or implement onResume/onExport/onClear
handler functions to perform the expected actions.
Comment on lines
+71
to
+75
| <div className="mt-6"> | ||
| <button className="bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center transition-colors"> | ||
| <Save size={16} className="mr-2" /> Save Changes | ||
| </button> | ||
| </div> |
Contributor
There was a problem hiding this comment.
Wire or disable action buttons to avoid dead-end interactions.
Save Changes and Delete Project look actionable but currently have no behavior. This is a functional UX gap on the only implemented settings tab; either connect handlers now or render these as disabled with explicit “coming soon” messaging.
Suggested minimal guardrail
- <button className="bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center transition-colors">
+ <button
+ type="button"
+ disabled
+ title="Save not implemented yet"
+ className="bg-emerald-500/50 text-white/70 px-4 py-2 rounded-lg text-sm font-medium flex items-center cursor-not-allowed"
+ >
<Save size={16} className="mr-2" /> Save Changes
</button>
@@
- <button className="bg-red-500/10 hover:bg-red-500/20 text-red-500 border border-red-500/20 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
+ <button
+ type="button"
+ disabled
+ title="Delete not implemented yet"
+ className="bg-red-500/10 text-red-500/60 border border-red-500/20 px-4 py-2 rounded-lg text-sm font-medium cursor-not-allowed"
+ >
Delete Project
</button>Also applies to: 92-94
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/dashboard/src/pages/Settings.tsx` around lines 71 - 75, The Save
Changes and Delete Project buttons in Settings.tsx are currently inert; add
simple actionable guards: implement onClick handlers (e.g., handleSaveChanges
and handleDeleteProject) and wire them to the respective <button> elements to
perform the intended actions (or call a stubbed API function) OR render the
buttons disabled with aria-disabled and disabled attributes, a muted style, and
a tooltip/title like "Coming soon" to signal non-availability. Update the Save
button that contains <Save size={16} ... /> and the Delete Project button
(around the block referenced at lines 92-94) to use either the onClick handlers
or the disabled state so users cannot hit a dead-end interaction.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
1 issue found across 31 files
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="packages/dashboard/src/pages/Analytics.tsx">
<violation number="1" location="packages/dashboard/src/pages/Analytics.tsx:132">
P2: Change indicator color-coding is directionally wrong for metrics where lower values are improvements (latency, cost).</violation>
</file>
Tip: cubic can generate docs of your entire codebase and keep them up to date. Try it here.
Re-trigger cubic
| {stat.value} | ||
| </span> | ||
| <span | ||
| className={`text-xs mb-1 ${stat.change.startsWith('+') ? 'text-emerald-500' : 'text-red-500'}`} |
Contributor
There was a problem hiding this comment.
P2: Change indicator color-coding is directionally wrong for metrics where lower values are improvements (latency, cost).
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/dashboard/src/pages/Analytics.tsx, line 132:
<comment>Change indicator color-coding is directionally wrong for metrics where lower values are improvements (latency, cost).</comment>
<file context>
@@ -0,0 +1,276 @@
+ {stat.value}
+ </span>
+ <span
+ className={`text-xs mb-1 ${stat.change.startsWith('+') ? 'text-emerald-500' : 'text-red-500'}`}
+ >
+ {stat.change}
</file context>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR Checklist
Please check if your PR fulfills the following requirements:
Bugs / Features
What is the current behavior?
What is the new behavior?
fixes (issue)
Notes for reviewers
Summary by cubic
Adds the
@voltagent/dashboardweb app for agent observability and management, plus an ECC bundle for repo‑aware tooling. Also includes a small fix addressing a PR finding.New Features
@voltagent/dashboard(React + Vite + Tailwind) with Shell (TopBar, Sidebar) and pages: Observability, Agents, Analytics, Traces, Logs, Settings, Memory, Workflows, Tools, Prompts.recharts, animations viaframer-motion, icons vialucide-react; mock data only..claude,.agents,.codex; includes multi‑agent presets (Explorer, Reviewer, Docs researcher) and MCP servers (@modelcontextprotocol/server-github,@upstash/context7-mcp,@modelcontextprotocol/server-memory,@playwright/mcp,@modelcontextprotocol/server-sequential-thinking, Exa).Dependencies
react,react-dom,vite,@vitejs/plugin-react,tailwindcss,postcss,autoprefixer,typescript,framer-motion,lucide-react,recharts; updatespnpm-lock.yaml.Written for commit 96fcfcd. Summary will update on new commits. Review in cubic
Summary by CodeRabbit
New Features
Chores