diff --git a/DIFF_20251124_155834.md b/DIFF_20251124_155834.md new file mode 100644 index 0000000..9c51163 --- /dev/null +++ b/DIFF_20251124_155834.md @@ -0,0 +1,16 @@ +# Change Log - 2025-11-24 15:58:34 + +## web/src/app/page.js +- Rebuilt the home page into a CrewAI Asset Manager layout with richer hero content, control-room stats, operational reads, and environment/storage overview cards. +- Added structured resource metadata (agents, tools, toolsets, crews, crew configs) plus section descriptions, search fields, action sets, and operational alerts. +- Wired dynamic listings and controls so the page feeds expanded data into reusable table rendering with actions. + +## web/src/components/Navigation.js +- Updated navigation to reflect CrewAI asset types (agents, tools, toolsets, crews, crew configs) with refreshed iconography and helper copy. + +## web/src/components/FileListing.js +- Replaced file-centric table with asset-aware listing that supports configurable columns, status badges, multi-value chips, and contextual action buttons. +- Added flexible search coverage across configurable fields and improved empty-state messaging. + +## web/src/components/SearchBar.js +- Tuned placeholder text to match CrewAI asset search and retained submit handling for query updates. diff --git a/RECOMMENDATIONS_20251124_155834.md b/RECOMMENDATIONS_20251124_155834.md new file mode 100644 index 0000000..45c5d7e --- /dev/null +++ b/RECOMMENDATIONS_20251124_155834.md @@ -0,0 +1,6 @@ +# Recommendations - 2025-11-24 15:58:34 +- Add API-backed data fetching and mutations (e.g., Next.js route handlers) so the asset lists reflect real CrewAI definitions instead of mock data. +- Introduce per-asset detail drawers or modals with markdown rendering for configs, run history, and dependency graphs. +- Layer in filtering by status, environment, and owner plus saved views for release/incident responders. +- Wire quick actions to actual workflows: trigger crew runs via queue/webhook, scaffold new assets from templates, and surface audit logs. +- Add persistence for operational reads with timestamps, severity, and links to source documents. diff --git a/web/src/app/page.js b/web/src/app/page.js index 3aa5d0f..f6b00ba 100644 --- a/web/src/app/page.js +++ b/web/src/app/page.js @@ -1,153 +1,482 @@ "use client"; -import { useState, useEffect } from 'react'; +import { useState, useMemo } from 'react'; import Navigation from '../components/Navigation'; import FileListing from '../components/FileListing'; import SearchBar from '../components/SearchBar'; -export default function Home() { - const [activeSection, setActiveSection] = useState('documents'); - const [searchQuery, setSearchQuery] = useState(''); +const sectionDetails = { + agents: { + title: 'Agents', + description: 'Autonomous operators with well-defined roles, stacks, and dependencies ready for CrewAI orchestrations.', + }, + tools: { + title: 'Tools', + description: 'Reusable primitives with inputs, outputs, and owners. Keep capability coverage and version history visible.', + }, + toolsets: { + title: 'Toolsets', + description: 'Composed packs of tools curated for specific workflows such as releases, incident response, and research.', + }, + crews: { + title: 'Crews', + description: 'CrewAI crews with missions, members, and operating cadences. Track operational readiness at a glance.', + }, + crewConfigs: { + title: 'Crew Configs', + description: 'Environment-scoped configuration, routing, and safeguards for each crew entrypoint.', + }, +}; - // Mock data for file listings - const fileData = { - documents: [ - { name: 'Installation Guide.md', type: 'markdown', size: '2.4 KB', lastModified: '2025-09-15' }, - { name: 'API Documentation.md', type: 'markdown', size: '15.7 KB', lastModified: '2025-09-10' }, - { name: 'User Manual.pdf', type: 'pdf', size: '1.2 MB', lastModified: '2025-09-05' }, +const resourceConfigs = { + agents: { + searchFields: ['name', 'role', 'stack', 'toolset', 'owner', 'status'], + columns: [ + { key: 'role', label: 'Role' }, + { key: 'stack', label: 'Stack' }, + { key: 'toolset', label: 'Toolset' }, + { key: 'owner', label: 'Owner' }, + { key: 'status', label: 'Status', type: 'status' }, + { key: 'updated', label: 'Updated' }, + ], + actions: [ + { label: 'Open sheet', tone: 'indigo' }, + { label: 'Launch run', tone: 'green' }, + ], + }, + tools: { + searchFields: ['name', 'type', 'version', 'owner', 'coverage', 'status'], + columns: [ + { key: 'type', label: 'Type' }, + { key: 'version', label: 'Version' }, + { key: 'coverage', label: 'Coverage' }, + { key: 'owner', label: 'Owner' }, + { key: 'status', label: 'Status', type: 'status' }, + { key: 'updated', label: 'Updated' }, + ], + actions: [ + { label: 'Docs', tone: 'indigo' }, + { label: 'Pin to crew', tone: 'green' }, + ], + }, + toolsets: { + searchFields: ['name', 'composition', 'defaultCrew', 'useCases', 'status'], + columns: [ + { key: 'composition', label: 'Composition' }, + { key: 'defaultCrew', label: 'Default Crew' }, + { key: 'useCases', label: 'Use Cases' }, + { key: 'status', label: 'Status', type: 'status' }, + { key: 'updated', label: 'Updated' }, + ], + actions: [ + { label: 'Open pack', tone: 'indigo' }, + { label: 'Assign', tone: 'green' }, + ], + }, + crews: { + searchFields: ['name', 'mission', 'toolset', 'cadence', 'status'], + columns: [ + { key: 'mission', label: 'Mission' }, + { key: 'toolset', label: 'Toolset' }, + { key: 'cadence', label: 'Cadence' }, + { key: 'slo', label: 'SLO' }, + { key: 'status', label: 'Status', type: 'status' }, + { key: 'updated', label: 'Updated' }, ], - scripts: [ - { name: 'deploy.sh', type: 'bash', size: '1.1 KB', lastModified: '2025-09-12' }, - { name: 'backup.py', type: 'python', size: '3.2 KB', lastModified: '2025-09-08' }, - { name: 'utils.js', type: 'javascript', size: '5.6 KB', lastModified: '2025-09-14' }, + actions: [ + { label: 'Open dashboard', tone: 'indigo' }, + { label: 'Start run', tone: 'green' }, ], - configurations: [ - { name: 'database.yml', type: 'yaml', size: '0.8 KB', lastModified: '2025-09-16' }, - { name: 'nginx.conf', type: 'config', size: '2.3 KB', lastModified: '2025-09-11' }, - { name: 'environment.prod.env', type: 'env', size: '0.3 KB', lastModified: '2025-09-09' }, + }, + crewConfigs: { + searchFields: ['name', 'environment', 'entrypoint', 'version', 'status'], + columns: [ + { key: 'environment', label: 'Environment' }, + { key: 'entrypoint', label: 'Entrypoint' }, + { key: 'version', label: 'Version' }, + { key: 'routing', label: 'Routing' }, + { key: 'status', label: 'Status', type: 'status' }, + { key: 'updated', label: 'Updated' }, ], - projects: [ - { name: 'agents.md', type: 'markdown', size: '3.1 KB', lastModified: '2025-09-17' }, - { name: 'qwen.md', type: 'markdown', size: '5.4 KB', lastModified: '2025-09-17' }, - { name: 'tasks.md', type: 'markdown', size: '2.8 KB', lastModified: '2025-09-17' }, + actions: [ + { label: 'Edit config', tone: 'indigo' }, + { label: 'Promote', tone: 'green' }, ], - tasks: [ - { name: 'task-list.json', type: 'json', size: '1.5 KB', lastModified: '2025-09-18' }, - { name: 'progress-report.md', type: 'markdown', size: '4.2 KB', lastModified: '2025-09-13' }, - ] - }; + }, +}; + +const resourceData = { + agents: [ + { + name: 'Atlas Planner', + role: 'Strategic Planner', + stack: 'LangGraph + OpenAI Functions', + toolset: 'Release Ops Pack', + owner: 'Platform', + status: 'ready', + updated: '2025-11-18', + }, + { + name: 'Helix Researcher', + role: 'Research & Synthesis', + stack: 'Llama 3 + RAG', + toolset: 'Research Pack', + owner: 'Labs', + status: 'ready', + updated: '2025-11-17', + }, + { + name: 'Nova Navigator', + role: 'Incident Triage', + stack: 'LangGraph + Cortex XSOAR', + toolset: 'Incident Response Pack', + owner: 'SRE', + status: 'live', + updated: '2025-11-19', + }, + { + name: 'Quanta QA', + role: 'QA & Regression', + stack: 'OpenAI + Playwright', + toolset: 'QA Pack', + owner: 'QA Guild', + status: 'maintenance', + updated: '2025-11-15', + }, + { + name: 'Orion Shepherd', + role: 'Data Pipeline Steward', + stack: 'LangGraph + Dagster', + toolset: 'Data Engineering Pack', + owner: 'Data Platform', + status: 'ready', + updated: '2025-11-16', + }, + ], + tools: [ + { + name: 'GitSync', + type: 'Repository', + version: '1.4.2', + coverage: 'Repos + PR metadata', + owner: 'DevEx', + status: 'ready', + updated: '2025-11-18', + }, + { + name: 'Runbook Fetch', + type: 'Knowledge', + version: '0.9.0', + coverage: 'Markdown, Confluence', + owner: 'SRE', + status: 'ready', + updated: '2025-11-17', + }, + { + name: 'Telemetry Pulse', + type: 'Observability', + version: '2.1.0', + coverage: 'Grafana, Datadog, CloudWatch', + owner: 'Observability', + status: 'live', + updated: '2025-11-19', + }, + { + name: 'Secure Vault', + type: 'Secrets', + version: '1.3.1', + coverage: 'HashiCorp Vault + KMS', + owner: 'Security', + status: 'ready', + updated: '2025-11-16', + }, + { + name: 'Test Runner', + type: 'Quality', + version: '1.0.5', + coverage: 'Playwright + Lighthouse', + owner: 'QA Guild', + status: 'maintenance', + updated: '2025-11-14', + }, + ], + toolsets: [ + { + name: 'Release Ops Pack', + composition: ['GitSync', 'Runbook Fetch', 'Telemetry Pulse'], + defaultCrew: 'Release Management Crew', + useCases: ['Release notes', 'Approval flow', 'Smoke validation'], + status: 'ready', + updated: '2025-11-18', + }, + { + name: 'Incident Response Pack', + composition: ['Telemetry Pulse', 'Runbook Fetch', 'Secure Vault'], + defaultCrew: 'Incident Response Team', + useCases: ['Triage', 'Impact analysis', 'Stakeholder updates'], + status: 'live', + updated: '2025-11-19', + }, + { + name: 'Research Pack', + composition: ['Runbook Fetch', 'GitSync'], + defaultCrew: 'Example Research Crew', + useCases: ['Competitive research', 'RFC drafting', 'Context expansion'], + status: 'ready', + updated: '2025-11-17', + }, + { + name: 'Data Engineering Pack', + composition: ['Secure Vault', 'Telemetry Pulse'], + defaultCrew: 'Data Engineering Team', + useCases: ['DAG audits', 'Schema drift alerts'], + status: 'ready', + updated: '2025-11-16', + }, + { + name: 'QA Pack', + composition: ['Test Runner', 'GitSync'], + defaultCrew: 'Software Development Team', + useCases: ['Regression sweeps', 'Accessibility checks'], + status: 'maintenance', + updated: '2025-11-15', + }, + ], + crews: [ + { + name: 'Software Development Team', + mission: 'Plan, build, and validate features', + toolset: 'QA Pack', + cadence: 'Daily', + slo: 'P95 tasks < 2h', + status: 'ready', + updated: '2025-11-16', + }, + { + name: 'Release Management Crew', + mission: 'Cut, test, and ship releases', + toolset: 'Release Ops Pack', + cadence: 'Per release', + slo: 'Release cycle < 24h', + status: 'live', + updated: '2025-11-18', + }, + { + name: 'Incident Response Team', + mission: 'Detect, triage, and mitigate incidents', + toolset: 'Incident Response Pack', + cadence: 'On-call', + slo: 'MTTR < 30m', + status: 'live', + updated: '2025-11-19', + }, + { + name: 'Data Engineering Team', + mission: 'Keep data platforms healthy and compliant', + toolset: 'Data Engineering Pack', + cadence: 'Weekly', + slo: 'Pipeline success > 99%', + status: 'ready', + updated: '2025-11-16', + }, + { + name: 'Example Research Crew', + mission: 'Rapid discovery and synthesis', + toolset: 'Research Pack', + cadence: 'Ad hoc', + slo: 'Briefs < 4h', + status: 'maintenance', + updated: '2025-11-15', + }, + ], + crewConfigs: [ + { + name: 'Release Crew - Production', + environment: 'prod', + entrypoint: 'release_manager.py', + version: 'v2.1.0', + routing: 'Primary LLM + backup, approvals required', + status: 'live', + updated: '2025-11-19', + }, + { + name: 'Incident Crew - Staging', + environment: 'staging', + entrypoint: 'incident_coordinator.yaml', + version: 'v1.6.0', + routing: 'Observation heavy, auto page', + status: 'ready', + updated: '2025-11-18', + }, + { + name: 'Research Crew - Sandbox', + environment: 'sandbox', + entrypoint: 'research_crew.yaml', + version: 'v1.2.3', + routing: 'Exploratory, low risk', + status: 'ready', + updated: '2025-11-17', + }, + { + name: 'Data Crew - Production', + environment: 'prod', + entrypoint: 'data_guardian.py', + version: 'v1.4.2', + routing: 'Strict guardrails, sync with Dagster', + status: 'live', + updated: '2025-11-16', + }, + { + name: 'QA Crew - Pre-prod', + environment: 'preprod', + entrypoint: 'qa_commander.yaml', + version: 'v1.0.5', + routing: 'Regression-first, UI snapshots', + status: 'maintenance', + updated: '2025-11-15', + }, + ], +}; + +const operationalReads = [ + { + title: 'Release freeze window ends in 2 hours', + type: 'alert', + detail: 'Queue ready for promotion with Release Ops Pack and Atlas Planner.', + }, + { + title: 'Incident playbook updated', + type: 'update', + detail: 'Incident Response Pack routing now mirrors the on-call escalation sheet.', + }, + { + title: 'New telemetry coverage added', + type: 'info', + detail: 'Telemetry Pulse now scrapes CloudWatch anomalies for Nova Navigator.', + }, +]; + +export default function Home() { + const [activeSection, setActiveSection] = useState('agents'); + const [searchQuery, setSearchQuery] = useState(''); + + const stats = useMemo(() => ( + Object.keys(resourceData).map((key) => ({ + label: sectionDetails[key]?.title || key, + value: resourceData[key].length, + })) + ), []); return ( -
- {/* Header */} +
-
+
-

Knowledge Base

-

Centralized repository for documents, scripts, and configurations

+
+ + Crew Ops Control Room +
+

CrewAI Asset Manager

+

+ Manage every agent, tool, toolset, crew, and configuration from a single pane of glass. + Curate orchestration assets, launch runs, and keep configuration drift visible. +

-
+
-
+
- {/* Sidebar Navigation */} -
- + - - {/* Stats Card */} -
-

Repository Stats

-
-
- Documents - {fileData.documents.length} -
-
- Scripts - {fileData.scripts.length} -
-
- Configurations - {fileData.configurations.length} -
-
- Projects - {fileData.projects.length} -
-
- Tasks - {fileData.tasks.length} -
+ +
+

Control Room Stats

+
+ {stats.map((stat) => ( +
+ {stat.label} + {stat.value} +
+ ))} +
+
+ +
+

Operational Reads

+
+ {operationalReads.map((item) => ( +
+

{item.type}

+

{item.title}

+

{item.detail}

+
+ ))}
- {/* Main Content */} -
+
-
-

- {activeSection} -

-

- Browse and manage your {activeSection} files -

+
+
+

{sectionDetails[activeSection].title}

+

{sectionDetails[activeSection].description}

+
+
+ + +
- +
-
- {/* Quick Actions */} -
-

Quick Actions

-
- - - +
+
+

Environments

+

prod / preprod / staging

+

Config drift checks are enabled for live crews.

+
+
+

Run Library

+

Templates + Playbooks

+

Reuse run presets per crew, toolset, or agent.

+
+
+

Storage

+

Backed by repo + GitHub Actions

+

All assets remain versioned in the Knowledge Base.

- {/* Footer */}
-

Knowledge Base

-

Organize and access your knowledge efficiently

+

CrewAI Asset Manager

+

Operate, store, and launch your crews with confidence.

Documentation @@ -156,10 +485,10 @@ export default function Home() {
-

© 2025 Knowledge Base. All rights reserved.

+

© 2025 CrewAI Asset Manager. All rights reserved.

); -} \ No newline at end of file +} diff --git a/web/src/components/FileListing.js b/web/src/components/FileListing.js index 2f8d1b7..41a7d13 100644 --- a/web/src/components/FileListing.js +++ b/web/src/components/FileListing.js @@ -1,83 +1,59 @@ -export default function FileListing({ files, category, searchQuery }) { - // Filter files based on search query - const filteredFiles = files.filter(file => - file.name.toLowerCase().includes(searchQuery.toLowerCase()) - ); +const statusColors = { + live: 'bg-green-100 text-green-800', + ready: 'bg-indigo-100 text-indigo-800', + maintenance: 'bg-amber-100 text-amber-800', + default: 'bg-gray-100 text-gray-800', +}; - const getFileIcon = (type) => { - switch (type) { - case 'markdown': - return ( - - - - ); - case 'pdf': - return ( - - - - ); - case 'bash': - return ( - - - - ); - case 'python': - return ( - - - - ); - case 'javascript': - return ( - - - - ); - case 'yaml': - return ( - - - - ); - case 'config': - return ( - - - - ); - case 'env': - return ( - - - - ); - case 'json': - return ( - - - - ); - default: - return ( - - - - ); - } - }; +const toneButtonStyles = { + indigo: 'text-indigo-700 bg-indigo-50 hover:bg-indigo-100 border border-indigo-200', + green: 'text-green-700 bg-green-50 hover:bg-green-100 border border-green-200', +}; + +const formatValue = (value) => { + if (Array.isArray(value)) { + return ( +
+ {value.map((entry) => ( + + {entry} + + ))} +
+ ); + } + + if (typeof value === 'boolean') { + return value ? 'Enabled' : 'Disabled'; + } + + return value || '—'; +}; + +export default function AssetListing({ items, config, searchQuery }) { + const searchableFields = config?.searchFields || ['name']; + const normalizedQuery = searchQuery.toLowerCase(); + + const filteredItems = items.filter((item) => + searchableFields.some((field) => { + // Handle array fields explicitly for better search matching + const value = item[field]; + const normalizedValue = Array.isArray(value) + ? value.join(' ') + : String(value || ''); + return normalizedValue.toLowerCase().includes(normalizedQuery); + }) + ); return (
- {filteredFiles.length === 0 ? ( + {filteredItems.length === 0 ? (
-

No files found

-

Try adjusting your search query

+

No assets found

+

Refine your search or add a new entry.

) : (
@@ -87,47 +63,55 @@ export default function FileListing({ files, category, searchQuery }) { Name - - Type - - - Size - - - Last Modified - + {config?.columns?.map((column) => ( + + {column.label} + + ))} Actions - {filteredFiles.map((file, index) => ( - - -
- {getFileIcon(file.type)} -
-
{file.name}
-
-
- - - {file.type} - - - {file.size} - - - {file.lastModified} + {filteredItems.map((item) => ( + + + {item.name} + {config?.columns?.map((column) => { + let value = item[column.key]; + + if (column.type === 'status') { + const color = statusColors[value] || statusColors.default; + value = ( + + {value} + + ); + } else { + value = formatValue(value); + } + + return ( + + {value} + + ); + })} - - +
+ {config?.actions?.map((action) => ( + + ))} +
))} @@ -137,4 +121,4 @@ export default function FileListing({ files, category, searchQuery }) { )}
); -} \ No newline at end of file +} diff --git a/web/src/components/Navigation.js b/web/src/components/Navigation.js index f2ef0bb..4a33598 100644 --- a/web/src/components/Navigation.js +++ b/web/src/components/Navigation.js @@ -1,16 +1,17 @@ export default function Navigation({ activeSection, setActiveSection }) { const sections = [ - { id: 'documents', name: 'Documents', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' }, - { id: 'scripts', name: 'Scripts', icon: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4' }, - { id: 'configurations', name: 'Configurations', icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z' }, - { id: 'projects', name: 'Projects', icon: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4' }, - { id: 'tasks', name: 'Tasks', icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2' } + { id: 'agents', name: 'Agents', icon: 'M12 6v6m0 0v6m0-6h6m-6 0H6' }, + { id: 'tools', name: 'Tools', icon: 'M13 16h-1v-4h-1m4 0h3m-6 4H6m0 0V7a2 2 0 012-2h3m-5 11h.01' }, + { id: 'toolsets', name: 'Toolsets', icon: 'M7 8h10M7 12h10m-7 4h7' }, + { id: 'crews', name: 'Crews', icon: 'M17 20h5V4a2 2 0 00-2-2H6a2 2 0 00-2 2v16h5' }, + { id: 'crewConfigs', name: 'Crew Configs', icon: 'M9.75 3a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 009.75 21h4.5A2.25 2.25 0 0016.5 18.75V5.25A2.25 2.25 0 0014.25 3h-4.5z' }, ]; return (
-

Categories

+

Asset Types

+

Navigate through the CrewAI catalog.

); -} \ No newline at end of file +} diff --git a/web/src/components/SearchBar.js b/web/src/components/SearchBar.js index f58cf24..885d8db 100644 --- a/web/src/components/SearchBar.js +++ b/web/src/components/SearchBar.js @@ -19,7 +19,7 @@ export default function SearchBar({ onSearch }) { setQuery(e.target.value)} /> @@ -32,4 +32,4 @@ export default function SearchBar({ onSearch }) { ); -} \ No newline at end of file +}