mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-02-01 23:13:36 +00:00
refactor: optimize token usage, deduplicate code, fix bugs across agents
Token reduction (~40% per session, ~2.3M fewer tokens per 200-feature project): - Agent-type-specific tool lists: coding 9, testing 5, init 5 (was 19 for all) - Right-sized max_turns: coding 300, testing 100 (was 1000 for all) - Trimmed coding prompt template (~150 lines removed) - Streamlined testing prompt with batch support - YOLO mode now strips browser testing instructions from prompt - Added Grep, WebFetch, WebSearch to expand project session Performance improvements: - Rate limit retries start at ~15s with jitter (was fixed 60s) - Post-spawn delay reduced to 0.5s (was 2s) - Orchestrator consolidated to 1 DB query per loop (was 5-7) - Testing agents batch 3 features per session (was 1) - Smart context compaction preserves critical state, discards noise Bug fixes: - Removed ghost feature_release_testing MCP tool (wasted tokens every test session) - Forward all 9 Vertex AI env vars to chat sessions (was missing 3) - Fix DetachedInstanceError risk in test batch ORM access - Prevent duplicate testing of same features in parallel mode Code deduplication: - _get_project_path(): 9 copies -> 1 shared utility (project_helpers.py) - validate_project_name(): 9 copies -> 2 variants in 1 file (validation.py) - ROOT_DIR: 10 copies -> 1 definition (chat_constants.py) - API_ENV_VARS: 4 copies -> 1 source of truth (env_constants.py) Security hardening: - Unified sensitive directory blocklist (14 dirs, was two divergent lists) - Cached get_blocked_paths() for O(1) directory listing checks - Terminal security warning when ALLOW_REMOTE=1 exposes WebSocket - 20 new security tests for EXTRA_READ_PATHS blocking - Extracted _validate_command_list() and _validate_pkill_processes() helpers Type safety: - 87 mypy errors -> 0 across 58 source files - Installed types-PyYAML for proper yaml stub types - Fixed SQLAlchemy Column[T] coercions across all routers Dead code removed: - 13 files deleted (~2,679 lines): unused UI components, debug logs, outdated docs - 7 unused npm packages removed (Radix UI components with 0 imports) - AgentAvatar.tsx reduced from 615 -> 119 lines (SVGs extracted to mascotData.tsx) New CLI options: - --testing-batch-size (1-5) for parallel mode test batching - --testing-feature-ids for direct multi-feature testing Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Auto
322
ui/package-lock.json
generated
322
ui/package-lock.json
generated
@@ -12,16 +12,9 @@
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-label": "^2.1.8",
|
||||
"@radix-ui/react-popover": "^1.1.15",
|
||||
"@radix-ui/react-radio-group": "^1.3.8",
|
||||
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
"@radix-ui/react-separator": "^1.1.8",
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"@radix-ui/react-switch": "^1.2.6",
|
||||
"@radix-ui/react-tabs": "^1.1.13",
|
||||
"@radix-ui/react-toggle": "^1.1.10",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@tanstack/react-query": "^5.72.0",
|
||||
"@xterm/addon-fit": "^0.11.0",
|
||||
"@xterm/addon-web-links": "^0.12.0",
|
||||
@@ -1093,12 +1086,6 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/number": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
|
||||
"integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@radix-ui/primitive": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
|
||||
@@ -1519,61 +1506,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-popover": {
|
||||
"version": "1.1.15",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
|
||||
"integrity": "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-dismissable-layer": "1.1.11",
|
||||
"@radix-ui/react-focus-guards": "1.1.3",
|
||||
"@radix-ui/react-focus-scope": "1.1.7",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-popper": "1.2.8",
|
||||
"@radix-ui/react-portal": "1.1.9",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-slot": "1.2.3",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||
"aria-hidden": "^1.2.4",
|
||||
"react-remove-scroll": "^2.6.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
|
||||
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-popper": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
|
||||
@@ -1695,38 +1627,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-radio-group": {
|
||||
"version": "1.3.8",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
|
||||
"integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-roving-focus": "1.1.11",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||
"@radix-ui/react-use-previous": "1.1.1",
|
||||
"@radix-ui/react-use-size": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-roving-focus": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
|
||||
@@ -1758,98 +1658,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-scroll-area": {
|
||||
"version": "1.2.10",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz",
|
||||
"integrity": "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/number": "1.1.1",
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-select": {
|
||||
"version": "2.2.6",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
|
||||
"integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/number": "1.1.1",
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-collection": "1.1.7",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-dismissable-layer": "1.1.11",
|
||||
"@radix-ui/react-focus-guards": "1.1.3",
|
||||
"@radix-ui/react-focus-scope": "1.1.7",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-popper": "1.2.8",
|
||||
"@radix-ui/react-portal": "1.1.9",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-slot": "1.2.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1",
|
||||
"@radix-ui/react-use-previous": "1.1.1",
|
||||
"@radix-ui/react-visually-hidden": "1.2.3",
|
||||
"aria-hidden": "^1.2.4",
|
||||
"react-remove-scroll": "^2.6.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
|
||||
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-separator": {
|
||||
"version": "1.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.8.tgz",
|
||||
@@ -1943,113 +1751,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tabs": {
|
||||
"version": "1.1.13",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
|
||||
"integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-roving-focus": "1.1.11",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-toggle": {
|
||||
"version": "1.1.10",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.10.tgz",
|
||||
"integrity": "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
|
||||
"integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-dismissable-layer": "1.1.11",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-popper": "1.2.8",
|
||||
"@radix-ui/react-portal": "1.1.9",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-slot": "1.2.3",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||
"@radix-ui/react-visually-hidden": "1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
|
||||
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-callback-ref": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
|
||||
@@ -2186,29 +1887,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-visually-hidden": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
|
||||
"integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-primitive": "2.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/rect": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
|
||||
|
||||
@@ -16,16 +16,9 @@
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-label": "^2.1.8",
|
||||
"@radix-ui/react-popover": "^1.1.15",
|
||||
"@radix-ui/react-radio-group": "^1.3.8",
|
||||
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
"@radix-ui/react-separator": "^1.1.8",
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"@radix-ui/react-switch": "^1.2.6",
|
||||
"@radix-ui/react-tabs": "^1.1.13",
|
||||
"@radix-ui/react-toggle": "^1.1.10",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@tanstack/react-query": "^5.72.0",
|
||||
"@xterm/addon-fit": "^0.11.0",
|
||||
"@xterm/addon-web-links": "^0.12.0",
|
||||
|
||||
@@ -1,4 +1,10 @@
|
||||
import { type AgentMascot, type AgentState } from '../lib/types'
|
||||
import {
|
||||
AVATAR_COLORS,
|
||||
UNKNOWN_COLORS,
|
||||
MASCOT_SVGS,
|
||||
UnknownMascotSVG,
|
||||
} from './mascotData'
|
||||
|
||||
interface AgentAvatarProps {
|
||||
name: AgentMascot | 'Unknown'
|
||||
@@ -7,515 +13,12 @@ interface AgentAvatarProps {
|
||||
showName?: boolean
|
||||
}
|
||||
|
||||
// Fallback colors for unknown agents (neutral gray)
|
||||
const UNKNOWN_COLORS = { primary: '#6B7280', secondary: '#9CA3AF', accent: '#F3F4F6' }
|
||||
|
||||
const AVATAR_COLORS: Record<AgentMascot, { primary: string; secondary: string; accent: string }> = {
|
||||
// Original 5
|
||||
Spark: { primary: '#3B82F6', secondary: '#60A5FA', accent: '#DBEAFE' }, // Blue robot
|
||||
Fizz: { primary: '#F97316', secondary: '#FB923C', accent: '#FFEDD5' }, // Orange fox
|
||||
Octo: { primary: '#8B5CF6', secondary: '#A78BFA', accent: '#EDE9FE' }, // Purple octopus
|
||||
Hoot: { primary: '#22C55E', secondary: '#4ADE80', accent: '#DCFCE7' }, // Green owl
|
||||
Buzz: { primary: '#EAB308', secondary: '#FACC15', accent: '#FEF9C3' }, // Yellow bee
|
||||
// Tech-inspired
|
||||
Pixel: { primary: '#EC4899', secondary: '#F472B6', accent: '#FCE7F3' }, // Pink
|
||||
Byte: { primary: '#06B6D4', secondary: '#22D3EE', accent: '#CFFAFE' }, // Cyan
|
||||
Nova: { primary: '#F43F5E', secondary: '#FB7185', accent: '#FFE4E6' }, // Rose
|
||||
Chip: { primary: '#84CC16', secondary: '#A3E635', accent: '#ECFCCB' }, // Lime
|
||||
Bolt: { primary: '#FBBF24', secondary: '#FCD34D', accent: '#FEF3C7' }, // Amber
|
||||
// Energetic
|
||||
Dash: { primary: '#14B8A6', secondary: '#2DD4BF', accent: '#CCFBF1' }, // Teal
|
||||
Zap: { primary: '#A855F7', secondary: '#C084FC', accent: '#F3E8FF' }, // Violet
|
||||
Gizmo: { primary: '#64748B', secondary: '#94A3B8', accent: '#F1F5F9' }, // Slate
|
||||
Turbo: { primary: '#EF4444', secondary: '#F87171', accent: '#FEE2E2' }, // Red
|
||||
Blip: { primary: '#10B981', secondary: '#34D399', accent: '#D1FAE5' }, // Emerald
|
||||
// Playful
|
||||
Neon: { primary: '#D946EF', secondary: '#E879F9', accent: '#FAE8FF' }, // Fuchsia
|
||||
Widget: { primary: '#6366F1', secondary: '#818CF8', accent: '#E0E7FF' }, // Indigo
|
||||
Zippy: { primary: '#F59E0B', secondary: '#FBBF24', accent: '#FEF3C7' }, // Orange-yellow
|
||||
Quirk: { primary: '#0EA5E9', secondary: '#38BDF8', accent: '#E0F2FE' }, // Sky
|
||||
Flux: { primary: '#7C3AED', secondary: '#8B5CF6', accent: '#EDE9FE' }, // Purple
|
||||
}
|
||||
|
||||
const SIZES = {
|
||||
sm: { svg: 32, font: 'text-xs' },
|
||||
md: { svg: 48, font: 'text-sm' },
|
||||
lg: { svg: 64, font: 'text-base' },
|
||||
}
|
||||
|
||||
// SVG mascot definitions - simple cute characters
|
||||
function SparkSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Spark; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Robot body */}
|
||||
<rect x="16" y="20" width="32" height="28" rx="4" fill={colors.primary} />
|
||||
{/* Robot head */}
|
||||
<rect x="12" y="8" width="40" height="24" rx="4" fill={colors.secondary} />
|
||||
{/* Antenna */}
|
||||
<circle cx="32" cy="4" r="4" fill={colors.primary} className="animate-pulse" />
|
||||
<rect x="30" y="4" width="4" height="8" fill={colors.primary} />
|
||||
{/* Eyes */}
|
||||
<circle cx="24" cy="18" r="4" fill="white" />
|
||||
<circle cx="40" cy="18" r="4" fill="white" />
|
||||
<circle cx="25" cy="18" r="2" fill={colors.primary} />
|
||||
<circle cx="41" cy="18" r="2" fill={colors.primary} />
|
||||
{/* Mouth */}
|
||||
<rect x="26" y="24" width="12" height="2" rx="1" fill="white" />
|
||||
{/* Arms */}
|
||||
<rect x="6" y="24" width="8" height="4" rx="2" fill={colors.primary} />
|
||||
<rect x="50" y="24" width="8" height="4" rx="2" fill={colors.primary} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function FizzSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Fizz; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Ears */}
|
||||
<polygon points="12,12 20,28 4,28" fill={colors.primary} />
|
||||
<polygon points="52,12 60,28 44,28" fill={colors.primary} />
|
||||
<polygon points="14,14 18,26 8,26" fill={colors.accent} />
|
||||
<polygon points="50,14 56,26 44,26" fill={colors.accent} />
|
||||
{/* Head */}
|
||||
<ellipse cx="32" cy="36" rx="24" ry="22" fill={colors.primary} />
|
||||
{/* Face */}
|
||||
<ellipse cx="32" cy="40" rx="18" ry="14" fill={colors.accent} />
|
||||
{/* Eyes */}
|
||||
<ellipse cx="24" cy="32" rx="4" ry="5" fill="white" />
|
||||
<ellipse cx="40" cy="32" rx="4" ry="5" fill="white" />
|
||||
<circle cx="25" cy="33" r="2" fill="#1a1a1a" />
|
||||
<circle cx="41" cy="33" r="2" fill="#1a1a1a" />
|
||||
{/* Nose */}
|
||||
<ellipse cx="32" cy="42" rx="4" ry="3" fill={colors.primary} />
|
||||
{/* Whiskers */}
|
||||
<line x1="8" y1="38" x2="18" y2="40" stroke={colors.primary} strokeWidth="2" />
|
||||
<line x1="8" y1="44" x2="18" y2="44" stroke={colors.primary} strokeWidth="2" />
|
||||
<line x1="46" y1="40" x2="56" y2="38" stroke={colors.primary} strokeWidth="2" />
|
||||
<line x1="46" y1="44" x2="56" y2="44" stroke={colors.primary} strokeWidth="2" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function OctoSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Octo; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Tentacles */}
|
||||
<path d="M12,48 Q8,56 12,60 Q16,64 20,58" fill={colors.secondary} />
|
||||
<path d="M22,50 Q20,58 24,62" fill={colors.secondary} />
|
||||
<path d="M32,52 Q32,60 36,62" fill={colors.secondary} />
|
||||
<path d="M42,50 Q44,58 40,62" fill={colors.secondary} />
|
||||
<path d="M52,48 Q56,56 52,60 Q48,64 44,58" fill={colors.secondary} />
|
||||
{/* Head */}
|
||||
<ellipse cx="32" cy="32" rx="22" ry="24" fill={colors.primary} />
|
||||
{/* Eyes */}
|
||||
<ellipse cx="24" cy="28" rx="6" ry="8" fill="white" />
|
||||
<ellipse cx="40" cy="28" rx="6" ry="8" fill="white" />
|
||||
<ellipse cx="25" cy="30" rx="3" ry="4" fill={colors.primary} />
|
||||
<ellipse cx="41" cy="30" rx="3" ry="4" fill={colors.primary} />
|
||||
{/* Smile */}
|
||||
<path d="M24,42 Q32,48 40,42" stroke={colors.accent} strokeWidth="2" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function HootSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Hoot; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Ear tufts */}
|
||||
<polygon points="14,8 22,24 6,20" fill={colors.primary} />
|
||||
<polygon points="50,8 58,20 42,24" fill={colors.primary} />
|
||||
{/* Body */}
|
||||
<ellipse cx="32" cy="40" rx="20" ry="18" fill={colors.primary} />
|
||||
{/* Head */}
|
||||
<circle cx="32" cy="28" r="20" fill={colors.secondary} />
|
||||
{/* Eye circles */}
|
||||
<circle cx="24" cy="26" r="10" fill={colors.accent} />
|
||||
<circle cx="40" cy="26" r="10" fill={colors.accent} />
|
||||
{/* Eyes */}
|
||||
<circle cx="24" cy="26" r="6" fill="white" />
|
||||
<circle cx="40" cy="26" r="6" fill="white" />
|
||||
<circle cx="25" cy="27" r="3" fill="#1a1a1a" />
|
||||
<circle cx="41" cy="27" r="3" fill="#1a1a1a" />
|
||||
{/* Beak */}
|
||||
<polygon points="32,32 28,40 36,40" fill="#F97316" />
|
||||
{/* Belly */}
|
||||
<ellipse cx="32" cy="46" rx="10" ry="8" fill={colors.accent} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function BuzzSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Buzz; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Wings */}
|
||||
<ellipse cx="14" cy="32" rx="10" ry="14" fill={colors.accent} opacity="0.8" className="animate-pulse" />
|
||||
<ellipse cx="50" cy="32" rx="10" ry="14" fill={colors.accent} opacity="0.8" className="animate-pulse" />
|
||||
{/* Body stripes */}
|
||||
<ellipse cx="32" cy="36" rx="14" ry="20" fill={colors.primary} />
|
||||
<ellipse cx="32" cy="30" rx="12" ry="6" fill="#1a1a1a" />
|
||||
<ellipse cx="32" cy="44" rx="12" ry="6" fill="#1a1a1a" />
|
||||
{/* Head */}
|
||||
<circle cx="32" cy="16" r="12" fill={colors.primary} />
|
||||
{/* Antennae */}
|
||||
<line x1="26" y1="8" x2="22" y2="2" stroke="#1a1a1a" strokeWidth="2" />
|
||||
<line x1="38" y1="8" x2="42" y2="2" stroke="#1a1a1a" strokeWidth="2" />
|
||||
<circle cx="22" cy="2" r="2" fill="#1a1a1a" />
|
||||
<circle cx="42" cy="2" r="2" fill="#1a1a1a" />
|
||||
{/* Eyes */}
|
||||
<circle cx="28" cy="14" r="4" fill="white" />
|
||||
<circle cx="36" cy="14" r="4" fill="white" />
|
||||
<circle cx="29" cy="15" r="2" fill="#1a1a1a" />
|
||||
<circle cx="37" cy="15" r="2" fill="#1a1a1a" />
|
||||
{/* Smile */}
|
||||
<path d="M28,20 Q32,24 36,20" stroke="#1a1a1a" strokeWidth="1.5" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Pixel - cute pixel art style character
|
||||
function PixelSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Pixel; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Blocky body */}
|
||||
<rect x="20" y="28" width="24" height="28" fill={colors.primary} />
|
||||
<rect x="16" y="32" width="8" height="20" fill={colors.secondary} />
|
||||
<rect x="40" y="32" width="8" height="20" fill={colors.secondary} />
|
||||
{/* Head */}
|
||||
<rect x="16" y="8" width="32" height="24" fill={colors.primary} />
|
||||
{/* Eyes */}
|
||||
<rect x="20" y="14" width="8" height="8" fill="white" />
|
||||
<rect x="36" y="14" width="8" height="8" fill="white" />
|
||||
<rect x="24" y="16" width="4" height="4" fill="#1a1a1a" />
|
||||
<rect x="38" y="16" width="4" height="4" fill="#1a1a1a" />
|
||||
{/* Mouth */}
|
||||
<rect x="26" y="26" width="12" height="4" fill={colors.accent} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Byte - data cube character
|
||||
function ByteSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Byte; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* 3D cube body */}
|
||||
<polygon points="32,8 56,20 56,44 32,56 8,44 8,20" fill={colors.primary} />
|
||||
<polygon points="32,8 56,20 32,32 8,20" fill={colors.secondary} />
|
||||
<polygon points="32,32 56,20 56,44 32,56" fill={colors.accent} opacity="0.6" />
|
||||
{/* Face */}
|
||||
<circle cx="24" cy="28" r="4" fill="white" />
|
||||
<circle cx="40" cy="28" r="4" fill="white" />
|
||||
<circle cx="25" cy="29" r="2" fill="#1a1a1a" />
|
||||
<circle cx="41" cy="29" r="2" fill="#1a1a1a" />
|
||||
<path d="M26,38 Q32,42 38,38" stroke="white" strokeWidth="2" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Nova - star character
|
||||
function NovaSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Nova; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Star points */}
|
||||
<polygon points="32,2 38,22 58,22 42,36 48,56 32,44 16,56 22,36 6,22 26,22" fill={colors.primary} />
|
||||
<circle cx="32" cy="32" r="14" fill={colors.secondary} />
|
||||
{/* Face */}
|
||||
<circle cx="27" cy="30" r="3" fill="white" />
|
||||
<circle cx="37" cy="30" r="3" fill="white" />
|
||||
<circle cx="28" cy="31" r="1.5" fill="#1a1a1a" />
|
||||
<circle cx="38" cy="31" r="1.5" fill="#1a1a1a" />
|
||||
<path d="M28,37 Q32,40 36,37" stroke="#1a1a1a" strokeWidth="1.5" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Chip - circuit board character
|
||||
function ChipSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Chip; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Chip body */}
|
||||
<rect x="16" y="16" width="32" height="32" rx="4" fill={colors.primary} />
|
||||
{/* Pins */}
|
||||
<rect x="20" y="10" width="4" height="8" fill={colors.secondary} />
|
||||
<rect x="30" y="10" width="4" height="8" fill={colors.secondary} />
|
||||
<rect x="40" y="10" width="4" height="8" fill={colors.secondary} />
|
||||
<rect x="20" y="46" width="4" height="8" fill={colors.secondary} />
|
||||
<rect x="30" y="46" width="4" height="8" fill={colors.secondary} />
|
||||
<rect x="40" y="46" width="4" height="8" fill={colors.secondary} />
|
||||
{/* Face */}
|
||||
<circle cx="26" cy="28" r="4" fill={colors.accent} />
|
||||
<circle cx="38" cy="28" r="4" fill={colors.accent} />
|
||||
<circle cx="26" cy="28" r="2" fill="#1a1a1a" />
|
||||
<circle cx="38" cy="28" r="2" fill="#1a1a1a" />
|
||||
<rect x="26" y="38" width="12" height="3" rx="1" fill={colors.accent} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Bolt - lightning character
|
||||
function BoltSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Bolt; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Lightning bolt body */}
|
||||
<polygon points="36,4 20,28 30,28 24,60 48,32 36,32 44,4" fill={colors.primary} />
|
||||
<polygon points="34,8 24,26 32,26 28,52 42,34 34,34 40,8" fill={colors.secondary} />
|
||||
{/* Face */}
|
||||
<circle cx="30" cy="30" r="3" fill="white" />
|
||||
<circle cx="38" cy="26" r="3" fill="white" />
|
||||
<circle cx="31" cy="31" r="1.5" fill="#1a1a1a" />
|
||||
<circle cx="39" cy="27" r="1.5" fill="#1a1a1a" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Dash - speedy character
|
||||
function DashSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Dash; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Speed lines */}
|
||||
<rect x="4" y="28" width="12" height="3" rx="1" fill={colors.accent} opacity="0.6" />
|
||||
<rect x="8" y="34" width="10" height="3" rx="1" fill={colors.accent} opacity="0.4" />
|
||||
{/* Aerodynamic body */}
|
||||
<ellipse cx="36" cy="32" rx="20" ry="16" fill={colors.primary} />
|
||||
<ellipse cx="40" cy="32" rx="14" ry="12" fill={colors.secondary} />
|
||||
{/* Face */}
|
||||
<circle cx="38" cy="28" r="4" fill="white" />
|
||||
<circle cx="48" cy="28" r="4" fill="white" />
|
||||
<circle cx="39" cy="29" r="2" fill="#1a1a1a" />
|
||||
<circle cx="49" cy="29" r="2" fill="#1a1a1a" />
|
||||
<path d="M40,36 Q44,39 48,36" stroke="#1a1a1a" strokeWidth="1.5" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Zap - electric orb
|
||||
function ZapSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Zap; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Electric sparks */}
|
||||
<path d="M12,32 L20,28 L16,32 L22,30" stroke={colors.secondary} strokeWidth="2" className="animate-pulse" />
|
||||
<path d="M52,32 L44,28 L48,32 L42,30" stroke={colors.secondary} strokeWidth="2" className="animate-pulse" />
|
||||
{/* Orb */}
|
||||
<circle cx="32" cy="32" r="18" fill={colors.primary} />
|
||||
<circle cx="32" cy="32" r="14" fill={colors.secondary} />
|
||||
{/* Face */}
|
||||
<circle cx="26" cy="30" r="4" fill="white" />
|
||||
<circle cx="38" cy="30" r="4" fill="white" />
|
||||
<circle cx="27" cy="31" r="2" fill={colors.primary} />
|
||||
<circle cx="39" cy="31" r="2" fill={colors.primary} />
|
||||
<path d="M28,40 Q32,44 36,40" stroke="white" strokeWidth="2" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Gizmo - gear character
|
||||
function GizmoSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Gizmo; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Gear teeth */}
|
||||
<rect x="28" y="4" width="8" height="8" fill={colors.primary} />
|
||||
<rect x="28" y="52" width="8" height="8" fill={colors.primary} />
|
||||
<rect x="4" y="28" width="8" height="8" fill={colors.primary} />
|
||||
<rect x="52" y="28" width="8" height="8" fill={colors.primary} />
|
||||
{/* Gear body */}
|
||||
<circle cx="32" cy="32" r="20" fill={colors.primary} />
|
||||
<circle cx="32" cy="32" r="14" fill={colors.secondary} />
|
||||
{/* Face */}
|
||||
<circle cx="26" cy="30" r="4" fill="white" />
|
||||
<circle cx="38" cy="30" r="4" fill="white" />
|
||||
<circle cx="27" cy="31" r="2" fill="#1a1a1a" />
|
||||
<circle cx="39" cy="31" r="2" fill="#1a1a1a" />
|
||||
<path d="M28,40 Q32,43 36,40" stroke="#1a1a1a" strokeWidth="2" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Turbo - rocket character
|
||||
function TurboSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Turbo; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Flames */}
|
||||
<ellipse cx="32" cy="58" rx="8" ry="6" fill="#FBBF24" className="animate-pulse" />
|
||||
<ellipse cx="32" cy="56" rx="5" ry="4" fill="#FCD34D" />
|
||||
{/* Rocket body */}
|
||||
<ellipse cx="32" cy="32" rx="14" ry="24" fill={colors.primary} />
|
||||
{/* Nose cone */}
|
||||
<ellipse cx="32" cy="12" rx="8" ry="10" fill={colors.secondary} />
|
||||
{/* Fins */}
|
||||
<polygon points="18,44 10,56 18,52" fill={colors.secondary} />
|
||||
<polygon points="46,44 54,56 46,52" fill={colors.secondary} />
|
||||
{/* Window/Face */}
|
||||
<circle cx="32" cy="28" r="8" fill={colors.accent} />
|
||||
<circle cx="29" cy="27" r="2" fill="#1a1a1a" />
|
||||
<circle cx="35" cy="27" r="2" fill="#1a1a1a" />
|
||||
<path d="M29,32 Q32,34 35,32" stroke="#1a1a1a" strokeWidth="1" fill="none" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Blip - radar dot character
|
||||
function BlipSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Blip; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Radar rings */}
|
||||
<circle cx="32" cy="32" r="28" stroke={colors.accent} strokeWidth="2" fill="none" opacity="0.3" />
|
||||
<circle cx="32" cy="32" r="22" stroke={colors.accent} strokeWidth="2" fill="none" opacity="0.5" />
|
||||
{/* Main dot */}
|
||||
<circle cx="32" cy="32" r="14" fill={colors.primary} />
|
||||
<circle cx="32" cy="32" r="10" fill={colors.secondary} />
|
||||
{/* Face */}
|
||||
<circle cx="28" cy="30" r="3" fill="white" />
|
||||
<circle cx="36" cy="30" r="3" fill="white" />
|
||||
<circle cx="29" cy="31" r="1.5" fill="#1a1a1a" />
|
||||
<circle cx="37" cy="31" r="1.5" fill="#1a1a1a" />
|
||||
<path d="M29,37 Q32,40 35,37" stroke="white" strokeWidth="1.5" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Neon - glowing character
|
||||
function NeonSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Neon; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Glow effect */}
|
||||
<circle cx="32" cy="32" r="26" fill={colors.accent} opacity="0.3" />
|
||||
<circle cx="32" cy="32" r="22" fill={colors.accent} opacity="0.5" />
|
||||
{/* Body */}
|
||||
<circle cx="32" cy="32" r="18" fill={colors.primary} />
|
||||
{/* Inner glow */}
|
||||
<circle cx="32" cy="32" r="12" fill={colors.secondary} />
|
||||
{/* Face */}
|
||||
<circle cx="27" cy="30" r="4" fill="white" />
|
||||
<circle cx="37" cy="30" r="4" fill="white" />
|
||||
<circle cx="28" cy="31" r="2" fill={colors.primary} />
|
||||
<circle cx="38" cy="31" r="2" fill={colors.primary} />
|
||||
<path d="M28,38 Q32,42 36,38" stroke="white" strokeWidth="2" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Widget - UI component character
|
||||
function WidgetSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Widget; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Window frame */}
|
||||
<rect x="8" y="12" width="48" height="40" rx="4" fill={colors.primary} />
|
||||
{/* Title bar */}
|
||||
<rect x="8" y="12" width="48" height="10" rx="4" fill={colors.secondary} />
|
||||
<circle cx="16" cy="17" r="2" fill="#EF4444" />
|
||||
<circle cx="24" cy="17" r="2" fill="#FBBF24" />
|
||||
<circle cx="32" cy="17" r="2" fill="#22C55E" />
|
||||
{/* Content area / Face */}
|
||||
<rect x="12" y="26" width="40" height="22" rx="2" fill={colors.accent} />
|
||||
<circle cx="24" cy="34" r="4" fill="white" />
|
||||
<circle cx="40" cy="34" r="4" fill="white" />
|
||||
<circle cx="25" cy="35" r="2" fill={colors.primary} />
|
||||
<circle cx="41" cy="35" r="2" fill={colors.primary} />
|
||||
<rect x="28" y="42" width="8" height="3" rx="1" fill={colors.primary} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Zippy - fast bunny-like character
|
||||
function ZippySVG({ colors, size }: { colors: typeof AVATAR_COLORS.Zippy; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Ears */}
|
||||
<ellipse cx="22" cy="14" rx="6" ry="14" fill={colors.primary} />
|
||||
<ellipse cx="42" cy="14" rx="6" ry="14" fill={colors.primary} />
|
||||
<ellipse cx="22" cy="14" rx="3" ry="10" fill={colors.accent} />
|
||||
<ellipse cx="42" cy="14" rx="3" ry="10" fill={colors.accent} />
|
||||
{/* Head */}
|
||||
<circle cx="32" cy="38" r="20" fill={colors.primary} />
|
||||
{/* Face */}
|
||||
<circle cx="24" cy="34" r="5" fill="white" />
|
||||
<circle cx="40" cy="34" r="5" fill="white" />
|
||||
<circle cx="25" cy="35" r="2.5" fill="#1a1a1a" />
|
||||
<circle cx="41" cy="35" r="2.5" fill="#1a1a1a" />
|
||||
{/* Nose and mouth */}
|
||||
<ellipse cx="32" cy="44" rx="3" ry="2" fill={colors.secondary} />
|
||||
<path d="M32,46 L32,50 M28,52 Q32,56 36,52" stroke="#1a1a1a" strokeWidth="1.5" fill="none" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Quirk - question mark character
|
||||
function QuirkSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Quirk; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Question mark body */}
|
||||
<path d="M24,20 Q24,8 32,8 Q44,8 44,20 Q44,28 32,32 L32,40"
|
||||
stroke={colors.primary} strokeWidth="8" fill="none" strokeLinecap="round" />
|
||||
<circle cx="32" cy="52" r="6" fill={colors.primary} />
|
||||
{/* Face on the dot */}
|
||||
<circle cx="29" cy="51" r="1.5" fill="white" />
|
||||
<circle cx="35" cy="51" r="1.5" fill="white" />
|
||||
<circle cx="29" cy="51" r="0.75" fill="#1a1a1a" />
|
||||
<circle cx="35" cy="51" r="0.75" fill="#1a1a1a" />
|
||||
{/* Decorative swirl */}
|
||||
<circle cx="32" cy="20" r="4" fill={colors.secondary} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Flux - flowing wave character
|
||||
function FluxSVG({ colors, size }: { colors: typeof AVATAR_COLORS.Flux; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Wave body */}
|
||||
<path d="M8,32 Q16,16 32,32 Q48,48 56,32" stroke={colors.primary} strokeWidth="16" fill="none" strokeLinecap="round" />
|
||||
<path d="M8,32 Q16,16 32,32 Q48,48 56,32" stroke={colors.secondary} strokeWidth="10" fill="none" strokeLinecap="round" />
|
||||
{/* Face */}
|
||||
<circle cx="28" cy="28" r="4" fill="white" />
|
||||
<circle cx="40" cy="36" r="4" fill="white" />
|
||||
<circle cx="29" cy="29" r="2" fill="#1a1a1a" />
|
||||
<circle cx="41" cy="37" r="2" fill="#1a1a1a" />
|
||||
{/* Sparkles */}
|
||||
<circle cx="16" cy="24" r="2" fill={colors.accent} className="animate-pulse" />
|
||||
<circle cx="48" cy="40" r="2" fill={colors.accent} className="animate-pulse" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Unknown agent fallback - simple question mark icon
|
||||
function UnknownSVG({ colors, size }: { colors: typeof UNKNOWN_COLORS; size: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
{/* Circle background */}
|
||||
<circle cx="32" cy="32" r="28" fill={colors.primary} />
|
||||
<circle cx="32" cy="32" r="24" fill={colors.secondary} />
|
||||
{/* Question mark */}
|
||||
<text x="32" y="44" textAnchor="middle" fontSize="32" fontWeight="bold" fill="white">?</text>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
const MASCOT_SVGS: Record<AgentMascot, typeof SparkSVG> = {
|
||||
// Original 5
|
||||
Spark: SparkSVG,
|
||||
Fizz: FizzSVG,
|
||||
Octo: OctoSVG,
|
||||
Hoot: HootSVG,
|
||||
Buzz: BuzzSVG,
|
||||
// Tech-inspired
|
||||
Pixel: PixelSVG,
|
||||
Byte: ByteSVG,
|
||||
Nova: NovaSVG,
|
||||
Chip: ChipSVG,
|
||||
Bolt: BoltSVG,
|
||||
// Energetic
|
||||
Dash: DashSVG,
|
||||
Zap: ZapSVG,
|
||||
Gizmo: GizmoSVG,
|
||||
Turbo: TurboSVG,
|
||||
Blip: BlipSVG,
|
||||
// Playful
|
||||
Neon: NeonSVG,
|
||||
Widget: WidgetSVG,
|
||||
Zippy: ZippySVG,
|
||||
Quirk: QuirkSVG,
|
||||
Flux: FluxSVG,
|
||||
}
|
||||
|
||||
// Animation classes based on state
|
||||
function getStateAnimation(state: AgentState): string {
|
||||
switch (state) {
|
||||
@@ -581,7 +84,7 @@ export function AgentAvatar({ name, state, size = 'md', showName = false }: Agen
|
||||
const isUnknown = name === 'Unknown'
|
||||
const colors = isUnknown ? UNKNOWN_COLORS : AVATAR_COLORS[name]
|
||||
const { svg: svgSize, font } = SIZES[size]
|
||||
const SvgComponent = isUnknown ? UnknownSVG : MASCOT_SVGS[name]
|
||||
const SvgComponent = isUnknown ? UnknownMascotSVG : MASCOT_SVGS[name]
|
||||
const stateDesc = getStateDescription(state)
|
||||
const ariaLabel = `Agent ${name} is ${stateDesc}`
|
||||
|
||||
|
||||
529
ui/src/components/mascotData.tsx
Normal file
529
ui/src/components/mascotData.tsx
Normal file
@@ -0,0 +1,529 @@
|
||||
/**
|
||||
* SVG mascot definitions and color palettes for agent avatars.
|
||||
*
|
||||
* Each mascot is a simple, cute SVG character rendered as a React component.
|
||||
* Colors are keyed by AgentMascot name so avatars stay visually distinct
|
||||
* when multiple agents run in parallel.
|
||||
*/
|
||||
|
||||
import type { AgentMascot } from '../lib/types'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Color types and palettes
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface MascotColorPalette {
|
||||
primary: string
|
||||
secondary: string
|
||||
accent: string
|
||||
}
|
||||
|
||||
/** Props shared by every mascot SVG component. */
|
||||
export interface MascotSVGProps {
|
||||
colors: MascotColorPalette
|
||||
size: number
|
||||
}
|
||||
|
||||
/** Fallback colors for unknown / untracked agents (neutral gray). */
|
||||
export const UNKNOWN_COLORS: MascotColorPalette = {
|
||||
primary: '#6B7280',
|
||||
secondary: '#9CA3AF',
|
||||
accent: '#F3F4F6',
|
||||
}
|
||||
|
||||
export const AVATAR_COLORS: Record<AgentMascot, MascotColorPalette> = {
|
||||
// Original 5
|
||||
Spark: { primary: '#3B82F6', secondary: '#60A5FA', accent: '#DBEAFE' }, // Blue robot
|
||||
Fizz: { primary: '#F97316', secondary: '#FB923C', accent: '#FFEDD5' }, // Orange fox
|
||||
Octo: { primary: '#8B5CF6', secondary: '#A78BFA', accent: '#EDE9FE' }, // Purple octopus
|
||||
Hoot: { primary: '#22C55E', secondary: '#4ADE80', accent: '#DCFCE7' }, // Green owl
|
||||
Buzz: { primary: '#EAB308', secondary: '#FACC15', accent: '#FEF9C3' }, // Yellow bee
|
||||
// Tech-inspired
|
||||
Pixel: { primary: '#EC4899', secondary: '#F472B6', accent: '#FCE7F3' }, // Pink
|
||||
Byte: { primary: '#06B6D4', secondary: '#22D3EE', accent: '#CFFAFE' }, // Cyan
|
||||
Nova: { primary: '#F43F5E', secondary: '#FB7185', accent: '#FFE4E6' }, // Rose
|
||||
Chip: { primary: '#84CC16', secondary: '#A3E635', accent: '#ECFCCB' }, // Lime
|
||||
Bolt: { primary: '#FBBF24', secondary: '#FCD34D', accent: '#FEF3C7' }, // Amber
|
||||
// Energetic
|
||||
Dash: { primary: '#14B8A6', secondary: '#2DD4BF', accent: '#CCFBF1' }, // Teal
|
||||
Zap: { primary: '#A855F7', secondary: '#C084FC', accent: '#F3E8FF' }, // Violet
|
||||
Gizmo: { primary: '#64748B', secondary: '#94A3B8', accent: '#F1F5F9' }, // Slate
|
||||
Turbo: { primary: '#EF4444', secondary: '#F87171', accent: '#FEE2E2' }, // Red
|
||||
Blip: { primary: '#10B981', secondary: '#34D399', accent: '#D1FAE5' }, // Emerald
|
||||
// Playful
|
||||
Neon: { primary: '#D946EF', secondary: '#E879F9', accent: '#FAE8FF' }, // Fuchsia
|
||||
Widget: { primary: '#6366F1', secondary: '#818CF8', accent: '#E0E7FF' }, // Indigo
|
||||
Zippy: { primary: '#F59E0B', secondary: '#FBBF24', accent: '#FEF3C7' }, // Orange-yellow
|
||||
Quirk: { primary: '#0EA5E9', secondary: '#38BDF8', accent: '#E0F2FE' }, // Sky
|
||||
Flux: { primary: '#7C3AED', secondary: '#8B5CF6', accent: '#EDE9FE' }, // Purple
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// SVG mascot components - simple cute characters
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function SparkSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Robot body */}
|
||||
<rect x="16" y="20" width="32" height="28" rx="4" fill={colors.primary} />
|
||||
{/* Robot head */}
|
||||
<rect x="12" y="8" width="40" height="24" rx="4" fill={colors.secondary} />
|
||||
{/* Antenna */}
|
||||
<circle cx="32" cy="4" r="4" fill={colors.primary} className="animate-pulse" />
|
||||
<rect x="30" y="4" width="4" height="8" fill={colors.primary} />
|
||||
{/* Eyes */}
|
||||
<circle cx="24" cy="18" r="4" fill="white" />
|
||||
<circle cx="40" cy="18" r="4" fill="white" />
|
||||
<circle cx="25" cy="18" r="2" fill={colors.primary} />
|
||||
<circle cx="41" cy="18" r="2" fill={colors.primary} />
|
||||
{/* Mouth */}
|
||||
<rect x="26" y="24" width="12" height="2" rx="1" fill="white" />
|
||||
{/* Arms */}
|
||||
<rect x="6" y="24" width="8" height="4" rx="2" fill={colors.primary} />
|
||||
<rect x="50" y="24" width="8" height="4" rx="2" fill={colors.primary} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function FizzSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Ears */}
|
||||
<polygon points="12,12 20,28 4,28" fill={colors.primary} />
|
||||
<polygon points="52,12 60,28 44,28" fill={colors.primary} />
|
||||
<polygon points="14,14 18,26 8,26" fill={colors.accent} />
|
||||
<polygon points="50,14 56,26 44,26" fill={colors.accent} />
|
||||
{/* Head */}
|
||||
<ellipse cx="32" cy="36" rx="24" ry="22" fill={colors.primary} />
|
||||
{/* Face */}
|
||||
<ellipse cx="32" cy="40" rx="18" ry="14" fill={colors.accent} />
|
||||
{/* Eyes */}
|
||||
<ellipse cx="24" cy="32" rx="4" ry="5" fill="white" />
|
||||
<ellipse cx="40" cy="32" rx="4" ry="5" fill="white" />
|
||||
<circle cx="25" cy="33" r="2" fill="#1a1a1a" />
|
||||
<circle cx="41" cy="33" r="2" fill="#1a1a1a" />
|
||||
{/* Nose */}
|
||||
<ellipse cx="32" cy="42" rx="4" ry="3" fill={colors.primary} />
|
||||
{/* Whiskers */}
|
||||
<line x1="8" y1="38" x2="18" y2="40" stroke={colors.primary} strokeWidth="2" />
|
||||
<line x1="8" y1="44" x2="18" y2="44" stroke={colors.primary} strokeWidth="2" />
|
||||
<line x1="46" y1="40" x2="56" y2="38" stroke={colors.primary} strokeWidth="2" />
|
||||
<line x1="46" y1="44" x2="56" y2="44" stroke={colors.primary} strokeWidth="2" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function OctoSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Tentacles */}
|
||||
<path d="M12,48 Q8,56 12,60 Q16,64 20,58" fill={colors.secondary} />
|
||||
<path d="M22,50 Q20,58 24,62" fill={colors.secondary} />
|
||||
<path d="M32,52 Q32,60 36,62" fill={colors.secondary} />
|
||||
<path d="M42,50 Q44,58 40,62" fill={colors.secondary} />
|
||||
<path d="M52,48 Q56,56 52,60 Q48,64 44,58" fill={colors.secondary} />
|
||||
{/* Head */}
|
||||
<ellipse cx="32" cy="32" rx="22" ry="24" fill={colors.primary} />
|
||||
{/* Eyes */}
|
||||
<ellipse cx="24" cy="28" rx="6" ry="8" fill="white" />
|
||||
<ellipse cx="40" cy="28" rx="6" ry="8" fill="white" />
|
||||
<ellipse cx="25" cy="30" rx="3" ry="4" fill={colors.primary} />
|
||||
<ellipse cx="41" cy="30" rx="3" ry="4" fill={colors.primary} />
|
||||
{/* Smile */}
|
||||
<path d="M24,42 Q32,48 40,42" stroke={colors.accent} strokeWidth="2" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function HootSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Ear tufts */}
|
||||
<polygon points="14,8 22,24 6,20" fill={colors.primary} />
|
||||
<polygon points="50,8 58,20 42,24" fill={colors.primary} />
|
||||
{/* Body */}
|
||||
<ellipse cx="32" cy="40" rx="20" ry="18" fill={colors.primary} />
|
||||
{/* Head */}
|
||||
<circle cx="32" cy="28" r="20" fill={colors.secondary} />
|
||||
{/* Eye circles */}
|
||||
<circle cx="24" cy="26" r="10" fill={colors.accent} />
|
||||
<circle cx="40" cy="26" r="10" fill={colors.accent} />
|
||||
{/* Eyes */}
|
||||
<circle cx="24" cy="26" r="6" fill="white" />
|
||||
<circle cx="40" cy="26" r="6" fill="white" />
|
||||
<circle cx="25" cy="27" r="3" fill="#1a1a1a" />
|
||||
<circle cx="41" cy="27" r="3" fill="#1a1a1a" />
|
||||
{/* Beak */}
|
||||
<polygon points="32,32 28,40 36,40" fill="#F97316" />
|
||||
{/* Belly */}
|
||||
<ellipse cx="32" cy="46" rx="10" ry="8" fill={colors.accent} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function BuzzSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Wings */}
|
||||
<ellipse cx="14" cy="32" rx="10" ry="14" fill={colors.accent} opacity="0.8" className="animate-pulse" />
|
||||
<ellipse cx="50" cy="32" rx="10" ry="14" fill={colors.accent} opacity="0.8" className="animate-pulse" />
|
||||
{/* Body stripes */}
|
||||
<ellipse cx="32" cy="36" rx="14" ry="20" fill={colors.primary} />
|
||||
<ellipse cx="32" cy="30" rx="12" ry="6" fill="#1a1a1a" />
|
||||
<ellipse cx="32" cy="44" rx="12" ry="6" fill="#1a1a1a" />
|
||||
{/* Head */}
|
||||
<circle cx="32" cy="16" r="12" fill={colors.primary} />
|
||||
{/* Antennae */}
|
||||
<line x1="26" y1="8" x2="22" y2="2" stroke="#1a1a1a" strokeWidth="2" />
|
||||
<line x1="38" y1="8" x2="42" y2="2" stroke="#1a1a1a" strokeWidth="2" />
|
||||
<circle cx="22" cy="2" r="2" fill="#1a1a1a" />
|
||||
<circle cx="42" cy="2" r="2" fill="#1a1a1a" />
|
||||
{/* Eyes */}
|
||||
<circle cx="28" cy="14" r="4" fill="white" />
|
||||
<circle cx="36" cy="14" r="4" fill="white" />
|
||||
<circle cx="29" cy="15" r="2" fill="#1a1a1a" />
|
||||
<circle cx="37" cy="15" r="2" fill="#1a1a1a" />
|
||||
{/* Smile */}
|
||||
<path d="M28,20 Q32,24 36,20" stroke="#1a1a1a" strokeWidth="1.5" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function PixelSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Blocky body */}
|
||||
<rect x="20" y="28" width="24" height="28" fill={colors.primary} />
|
||||
<rect x="16" y="32" width="8" height="20" fill={colors.secondary} />
|
||||
<rect x="40" y="32" width="8" height="20" fill={colors.secondary} />
|
||||
{/* Head */}
|
||||
<rect x="16" y="8" width="32" height="24" fill={colors.primary} />
|
||||
{/* Eyes */}
|
||||
<rect x="20" y="14" width="8" height="8" fill="white" />
|
||||
<rect x="36" y="14" width="8" height="8" fill="white" />
|
||||
<rect x="24" y="16" width="4" height="4" fill="#1a1a1a" />
|
||||
<rect x="38" y="16" width="4" height="4" fill="#1a1a1a" />
|
||||
{/* Mouth */}
|
||||
<rect x="26" y="26" width="12" height="4" fill={colors.accent} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function ByteSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* 3D cube body */}
|
||||
<polygon points="32,8 56,20 56,44 32,56 8,44 8,20" fill={colors.primary} />
|
||||
<polygon points="32,8 56,20 32,32 8,20" fill={colors.secondary} />
|
||||
<polygon points="32,32 56,20 56,44 32,56" fill={colors.accent} opacity="0.6" />
|
||||
{/* Face */}
|
||||
<circle cx="24" cy="28" r="4" fill="white" />
|
||||
<circle cx="40" cy="28" r="4" fill="white" />
|
||||
<circle cx="25" cy="29" r="2" fill="#1a1a1a" />
|
||||
<circle cx="41" cy="29" r="2" fill="#1a1a1a" />
|
||||
<path d="M26,38 Q32,42 38,38" stroke="white" strokeWidth="2" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function NovaSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Star points */}
|
||||
<polygon points="32,2 38,22 58,22 42,36 48,56 32,44 16,56 22,36 6,22 26,22" fill={colors.primary} />
|
||||
<circle cx="32" cy="32" r="14" fill={colors.secondary} />
|
||||
{/* Face */}
|
||||
<circle cx="27" cy="30" r="3" fill="white" />
|
||||
<circle cx="37" cy="30" r="3" fill="white" />
|
||||
<circle cx="28" cy="31" r="1.5" fill="#1a1a1a" />
|
||||
<circle cx="38" cy="31" r="1.5" fill="#1a1a1a" />
|
||||
<path d="M28,37 Q32,40 36,37" stroke="#1a1a1a" strokeWidth="1.5" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function ChipSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Chip body */}
|
||||
<rect x="16" y="16" width="32" height="32" rx="4" fill={colors.primary} />
|
||||
{/* Pins */}
|
||||
<rect x="20" y="10" width="4" height="8" fill={colors.secondary} />
|
||||
<rect x="30" y="10" width="4" height="8" fill={colors.secondary} />
|
||||
<rect x="40" y="10" width="4" height="8" fill={colors.secondary} />
|
||||
<rect x="20" y="46" width="4" height="8" fill={colors.secondary} />
|
||||
<rect x="30" y="46" width="4" height="8" fill={colors.secondary} />
|
||||
<rect x="40" y="46" width="4" height="8" fill={colors.secondary} />
|
||||
{/* Face */}
|
||||
<circle cx="26" cy="28" r="4" fill={colors.accent} />
|
||||
<circle cx="38" cy="28" r="4" fill={colors.accent} />
|
||||
<circle cx="26" cy="28" r="2" fill="#1a1a1a" />
|
||||
<circle cx="38" cy="28" r="2" fill="#1a1a1a" />
|
||||
<rect x="26" y="38" width="12" height="3" rx="1" fill={colors.accent} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function BoltSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Lightning bolt body */}
|
||||
<polygon points="36,4 20,28 30,28 24,60 48,32 36,32 44,4" fill={colors.primary} />
|
||||
<polygon points="34,8 24,26 32,26 28,52 42,34 34,34 40,8" fill={colors.secondary} />
|
||||
{/* Face */}
|
||||
<circle cx="30" cy="30" r="3" fill="white" />
|
||||
<circle cx="38" cy="26" r="3" fill="white" />
|
||||
<circle cx="31" cy="31" r="1.5" fill="#1a1a1a" />
|
||||
<circle cx="39" cy="27" r="1.5" fill="#1a1a1a" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function DashSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Speed lines */}
|
||||
<rect x="4" y="28" width="12" height="3" rx="1" fill={colors.accent} opacity="0.6" />
|
||||
<rect x="8" y="34" width="10" height="3" rx="1" fill={colors.accent} opacity="0.4" />
|
||||
{/* Aerodynamic body */}
|
||||
<ellipse cx="36" cy="32" rx="20" ry="16" fill={colors.primary} />
|
||||
<ellipse cx="40" cy="32" rx="14" ry="12" fill={colors.secondary} />
|
||||
{/* Face */}
|
||||
<circle cx="38" cy="28" r="4" fill="white" />
|
||||
<circle cx="48" cy="28" r="4" fill="white" />
|
||||
<circle cx="39" cy="29" r="2" fill="#1a1a1a" />
|
||||
<circle cx="49" cy="29" r="2" fill="#1a1a1a" />
|
||||
<path d="M40,36 Q44,39 48,36" stroke="#1a1a1a" strokeWidth="1.5" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function ZapSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Electric sparks */}
|
||||
<path d="M12,32 L20,28 L16,32 L22,30" stroke={colors.secondary} strokeWidth="2" className="animate-pulse" />
|
||||
<path d="M52,32 L44,28 L48,32 L42,30" stroke={colors.secondary} strokeWidth="2" className="animate-pulse" />
|
||||
{/* Orb */}
|
||||
<circle cx="32" cy="32" r="18" fill={colors.primary} />
|
||||
<circle cx="32" cy="32" r="14" fill={colors.secondary} />
|
||||
{/* Face */}
|
||||
<circle cx="26" cy="30" r="4" fill="white" />
|
||||
<circle cx="38" cy="30" r="4" fill="white" />
|
||||
<circle cx="27" cy="31" r="2" fill={colors.primary} />
|
||||
<circle cx="39" cy="31" r="2" fill={colors.primary} />
|
||||
<path d="M28,40 Q32,44 36,40" stroke="white" strokeWidth="2" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function GizmoSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Gear teeth */}
|
||||
<rect x="28" y="4" width="8" height="8" fill={colors.primary} />
|
||||
<rect x="28" y="52" width="8" height="8" fill={colors.primary} />
|
||||
<rect x="4" y="28" width="8" height="8" fill={colors.primary} />
|
||||
<rect x="52" y="28" width="8" height="8" fill={colors.primary} />
|
||||
{/* Gear body */}
|
||||
<circle cx="32" cy="32" r="20" fill={colors.primary} />
|
||||
<circle cx="32" cy="32" r="14" fill={colors.secondary} />
|
||||
{/* Face */}
|
||||
<circle cx="26" cy="30" r="4" fill="white" />
|
||||
<circle cx="38" cy="30" r="4" fill="white" />
|
||||
<circle cx="27" cy="31" r="2" fill="#1a1a1a" />
|
||||
<circle cx="39" cy="31" r="2" fill="#1a1a1a" />
|
||||
<path d="M28,40 Q32,43 36,40" stroke="#1a1a1a" strokeWidth="2" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function TurboSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Flames */}
|
||||
<ellipse cx="32" cy="58" rx="8" ry="6" fill="#FBBF24" className="animate-pulse" />
|
||||
<ellipse cx="32" cy="56" rx="5" ry="4" fill="#FCD34D" />
|
||||
{/* Rocket body */}
|
||||
<ellipse cx="32" cy="32" rx="14" ry="24" fill={colors.primary} />
|
||||
{/* Nose cone */}
|
||||
<ellipse cx="32" cy="12" rx="8" ry="10" fill={colors.secondary} />
|
||||
{/* Fins */}
|
||||
<polygon points="18,44 10,56 18,52" fill={colors.secondary} />
|
||||
<polygon points="46,44 54,56 46,52" fill={colors.secondary} />
|
||||
{/* Window/Face */}
|
||||
<circle cx="32" cy="28" r="8" fill={colors.accent} />
|
||||
<circle cx="29" cy="27" r="2" fill="#1a1a1a" />
|
||||
<circle cx="35" cy="27" r="2" fill="#1a1a1a" />
|
||||
<path d="M29,32 Q32,34 35,32" stroke="#1a1a1a" strokeWidth="1" fill="none" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function BlipSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Radar rings */}
|
||||
<circle cx="32" cy="32" r="28" stroke={colors.accent} strokeWidth="2" fill="none" opacity="0.3" />
|
||||
<circle cx="32" cy="32" r="22" stroke={colors.accent} strokeWidth="2" fill="none" opacity="0.5" />
|
||||
{/* Main dot */}
|
||||
<circle cx="32" cy="32" r="14" fill={colors.primary} />
|
||||
<circle cx="32" cy="32" r="10" fill={colors.secondary} />
|
||||
{/* Face */}
|
||||
<circle cx="28" cy="30" r="3" fill="white" />
|
||||
<circle cx="36" cy="30" r="3" fill="white" />
|
||||
<circle cx="29" cy="31" r="1.5" fill="#1a1a1a" />
|
||||
<circle cx="37" cy="31" r="1.5" fill="#1a1a1a" />
|
||||
<path d="M29,37 Q32,40 35,37" stroke="white" strokeWidth="1.5" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function NeonSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Glow effect */}
|
||||
<circle cx="32" cy="32" r="26" fill={colors.accent} opacity="0.3" />
|
||||
<circle cx="32" cy="32" r="22" fill={colors.accent} opacity="0.5" />
|
||||
{/* Body */}
|
||||
<circle cx="32" cy="32" r="18" fill={colors.primary} />
|
||||
{/* Inner glow */}
|
||||
<circle cx="32" cy="32" r="12" fill={colors.secondary} />
|
||||
{/* Face */}
|
||||
<circle cx="27" cy="30" r="4" fill="white" />
|
||||
<circle cx="37" cy="30" r="4" fill="white" />
|
||||
<circle cx="28" cy="31" r="2" fill={colors.primary} />
|
||||
<circle cx="38" cy="31" r="2" fill={colors.primary} />
|
||||
<path d="M28,38 Q32,42 36,38" stroke="white" strokeWidth="2" fill="none" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function WidgetSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Window frame */}
|
||||
<rect x="8" y="12" width="48" height="40" rx="4" fill={colors.primary} />
|
||||
{/* Title bar */}
|
||||
<rect x="8" y="12" width="48" height="10" rx="4" fill={colors.secondary} />
|
||||
<circle cx="16" cy="17" r="2" fill="#EF4444" />
|
||||
<circle cx="24" cy="17" r="2" fill="#FBBF24" />
|
||||
<circle cx="32" cy="17" r="2" fill="#22C55E" />
|
||||
{/* Content area / Face */}
|
||||
<rect x="12" y="26" width="40" height="22" rx="2" fill={colors.accent} />
|
||||
<circle cx="24" cy="34" r="4" fill="white" />
|
||||
<circle cx="40" cy="34" r="4" fill="white" />
|
||||
<circle cx="25" cy="35" r="2" fill={colors.primary} />
|
||||
<circle cx="41" cy="35" r="2" fill={colors.primary} />
|
||||
<rect x="28" y="42" width="8" height="3" rx="1" fill={colors.primary} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function ZippySVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Ears */}
|
||||
<ellipse cx="22" cy="14" rx="6" ry="14" fill={colors.primary} />
|
||||
<ellipse cx="42" cy="14" rx="6" ry="14" fill={colors.primary} />
|
||||
<ellipse cx="22" cy="14" rx="3" ry="10" fill={colors.accent} />
|
||||
<ellipse cx="42" cy="14" rx="3" ry="10" fill={colors.accent} />
|
||||
{/* Head */}
|
||||
<circle cx="32" cy="38" r="20" fill={colors.primary} />
|
||||
{/* Face */}
|
||||
<circle cx="24" cy="34" r="5" fill="white" />
|
||||
<circle cx="40" cy="34" r="5" fill="white" />
|
||||
<circle cx="25" cy="35" r="2.5" fill="#1a1a1a" />
|
||||
<circle cx="41" cy="35" r="2.5" fill="#1a1a1a" />
|
||||
{/* Nose and mouth */}
|
||||
<ellipse cx="32" cy="44" rx="3" ry="2" fill={colors.secondary} />
|
||||
<path d="M32,46 L32,50 M28,52 Q32,56 36,52" stroke="#1a1a1a" strokeWidth="1.5" fill="none" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function QuirkSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Question mark body */}
|
||||
<path d="M24,20 Q24,8 32,8 Q44,8 44,20 Q44,28 32,32 L32,40"
|
||||
stroke={colors.primary} strokeWidth="8" fill="none" strokeLinecap="round" />
|
||||
<circle cx="32" cy="52" r="6" fill={colors.primary} />
|
||||
{/* Face on the dot */}
|
||||
<circle cx="29" cy="51" r="1.5" fill="white" />
|
||||
<circle cx="35" cy="51" r="1.5" fill="white" />
|
||||
<circle cx="29" cy="51" r="0.75" fill="#1a1a1a" />
|
||||
<circle cx="35" cy="51" r="0.75" fill="#1a1a1a" />
|
||||
{/* Decorative swirl */}
|
||||
<circle cx="32" cy="20" r="4" fill={colors.secondary} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function FluxSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none">
|
||||
{/* Wave body */}
|
||||
<path d="M8,32 Q16,16 32,32 Q48,48 56,32" stroke={colors.primary} strokeWidth="16" fill="none" strokeLinecap="round" />
|
||||
<path d="M8,32 Q16,16 32,32 Q48,48 56,32" stroke={colors.secondary} strokeWidth="10" fill="none" strokeLinecap="round" />
|
||||
{/* Face */}
|
||||
<circle cx="28" cy="28" r="4" fill="white" />
|
||||
<circle cx="40" cy="36" r="4" fill="white" />
|
||||
<circle cx="29" cy="29" r="2" fill="#1a1a1a" />
|
||||
<circle cx="41" cy="37" r="2" fill="#1a1a1a" />
|
||||
{/* Sparkles */}
|
||||
<circle cx="16" cy="24" r="2" fill={colors.accent} className="animate-pulse" />
|
||||
<circle cx="48" cy="40" r="2" fill={colors.accent} className="animate-pulse" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
/** Fallback icon for unknown / untracked agents. */
|
||||
function UnknownSVG({ colors, size }: MascotSVGProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
{/* Circle background */}
|
||||
<circle cx="32" cy="32" r="28" fill={colors.primary} />
|
||||
<circle cx="32" cy="32" r="24" fill={colors.secondary} />
|
||||
{/* Question mark */}
|
||||
<text x="32" y="44" textAnchor="middle" fontSize="32" fontWeight="bold" fill="white">?</text>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Mascot component lookup
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Maps each mascot name to its SVG component. */
|
||||
export const MASCOT_SVGS: Record<AgentMascot, React.FC<MascotSVGProps>> = {
|
||||
// Original 5
|
||||
Spark: SparkSVG,
|
||||
Fizz: FizzSVG,
|
||||
Octo: OctoSVG,
|
||||
Hoot: HootSVG,
|
||||
Buzz: BuzzSVG,
|
||||
// Tech-inspired
|
||||
Pixel: PixelSVG,
|
||||
Byte: ByteSVG,
|
||||
Nova: NovaSVG,
|
||||
Chip: ChipSVG,
|
||||
Bolt: BoltSVG,
|
||||
// Energetic
|
||||
Dash: DashSVG,
|
||||
Zap: ZapSVG,
|
||||
Gizmo: GizmoSVG,
|
||||
Turbo: TurboSVG,
|
||||
Blip: BlipSVG,
|
||||
// Playful
|
||||
Neon: NeonSVG,
|
||||
Widget: WidgetSVG,
|
||||
Zippy: ZippySVG,
|
||||
Quirk: QuirkSVG,
|
||||
Flux: FluxSVG,
|
||||
}
|
||||
|
||||
/** The SVG component for unknown agents. Exported separately because
|
||||
* it is not part of the AgentMascot union type. */
|
||||
export const UnknownMascotSVG: React.FC<MascotSVGProps> = UnknownSVG
|
||||
@@ -1,87 +0,0 @@
|
||||
import * as React from "react"
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Popover({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
|
||||
return <PopoverPrimitive.Root data-slot="popover" {...props} />
|
||||
}
|
||||
|
||||
function PopoverTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
|
||||
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
|
||||
}
|
||||
|
||||
function PopoverContent({
|
||||
className,
|
||||
align = "center",
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
||||
return (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
data-slot="popover-content"
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function PopoverAnchor({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
|
||||
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
|
||||
}
|
||||
|
||||
function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="popover-header"
|
||||
className={cn("flex flex-col gap-1 text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="popover-title"
|
||||
className={cn("font-medium", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PopoverDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<p
|
||||
data-slot="popover-description"
|
||||
className={cn("text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Popover,
|
||||
PopoverTrigger,
|
||||
PopoverContent,
|
||||
PopoverAnchor,
|
||||
PopoverHeader,
|
||||
PopoverTitle,
|
||||
PopoverDescription,
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
|
||||
import { CircleIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function RadioGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
|
||||
return (
|
||||
<RadioGroupPrimitive.Root
|
||||
data-slot="radio-group"
|
||||
className={cn("grid gap-3", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function RadioGroupItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
|
||||
return (
|
||||
<RadioGroupPrimitive.Item
|
||||
data-slot="radio-group-item"
|
||||
className={cn(
|
||||
"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<RadioGroupPrimitive.Indicator
|
||||
data-slot="radio-group-indicator"
|
||||
className="relative flex items-center justify-center"
|
||||
>
|
||||
<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
|
||||
</RadioGroupPrimitive.Indicator>
|
||||
</RadioGroupPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
export { RadioGroup, RadioGroupItem }
|
||||
@@ -1,56 +0,0 @@
|
||||
import * as React from "react"
|
||||
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function ScrollArea({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.Root
|
||||
data-slot="scroll-area"
|
||||
className={cn("relative", className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport
|
||||
data-slot="scroll-area-viewport"
|
||||
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
|
||||
>
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
function ScrollBar({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||
data-slot="scroll-area-scrollbar"
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none p-px transition-colors select-none",
|
||||
orientation === "vertical" &&
|
||||
"h-full w-2.5 border-l border-l-transparent",
|
||||
orientation === "horizontal" &&
|
||||
"h-2.5 flex-col border-t border-t-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.ScrollAreaThumb
|
||||
data-slot="scroll-area-thumb"
|
||||
className="bg-border relative flex-1 rounded-full"
|
||||
/>
|
||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
)
|
||||
}
|
||||
|
||||
export { ScrollArea, ScrollBar }
|
||||
@@ -1,190 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Select({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||
}
|
||||
|
||||
function SelectGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
||||
}
|
||||
|
||||
function SelectValue({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||
}
|
||||
|
||||
function SelectTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDownIcon className="size-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
position = "item-aligned",
|
||||
align = "center",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||
return (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
data-slot="select-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
align={align}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||
return (
|
||||
<SelectPrimitive.Label
|
||||
data-slot="select-label"
|
||||
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||
return (
|
||||
<SelectPrimitive.Item
|
||||
data-slot="select-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
data-slot="select-item-indicator"
|
||||
className="absolute right-2 flex size-3.5 items-center justify-center"
|
||||
>
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||
return (
|
||||
<SelectPrimitive.Separator
|
||||
data-slot="select-separator"
|
||||
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollUpButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
data-slot="select-scroll-up-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUpIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollDownButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
data-slot="select-scroll-down-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDownIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
import * as React from "react"
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
data-orientation={orientation}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const tabsListVariants = cva(
|
||||
"rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-muted",
|
||||
line: "gap-1 bg-transparent",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.List> &
|
||||
VariantProps<typeof tabsListVariants>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
data-variant={variant}
|
||||
className={cn(tabsListVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsTrigger({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
||||
return (
|
||||
<TabsPrimitive.Trigger
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
|
||||
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
|
||||
"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
||||
return (
|
||||
<TabsPrimitive.Content
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 outline-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
|
||||
@@ -1,47 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as TogglePrimitive from "@radix-ui/react-toggle"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const toggleVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
outline:
|
||||
"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-2 min-w-9",
|
||||
sm: "h-8 px-1.5 min-w-8",
|
||||
lg: "h-10 px-2.5 min-w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Toggle({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TogglePrimitive.Root> &
|
||||
VariantProps<typeof toggleVariants>) {
|
||||
return (
|
||||
<TogglePrimitive.Root
|
||||
data-slot="toggle"
|
||||
className={cn(toggleVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toggle, toggleVariants }
|
||||
@@ -1,61 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function TooltipProvider({
|
||||
delayDuration = 0,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
|
||||
return (
|
||||
<TooltipPrimitive.Provider
|
||||
data-slot="tooltip-provider"
|
||||
delayDuration={delayDuration}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function Tooltip({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
|
||||
function TooltipTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
className,
|
||||
sideOffset = 0,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
|
||||
return (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Content
|
||||
data-slot="tooltip-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
|
||||
</TooltipPrimitive.Content>
|
||||
</TooltipPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
@@ -30,7 +30,6 @@ export default defineConfig({
|
||||
'vendor-ui': [
|
||||
'@radix-ui/react-dialog',
|
||||
'@radix-ui/react-dropdown-menu',
|
||||
'@radix-ui/react-tooltip',
|
||||
'lucide-react',
|
||||
],
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user