Skip to content

Latest commit

 

History

History
206 lines (166 loc) · 7.09 KB

README.md

File metadata and controls

206 lines (166 loc) · 7.09 KB

SCTY-OS: Ops Dashboard

Agent-Driven Dynamic Operations Dashboard

An intelligent operations dashboard powered by Agno and CopilotKit. This system helps founders and operators analyze their operational flywheel (Experiments → Products → Clients → Market), identify bottlenecks, and optimize business performance through AI-powered insights and actionable recommendations.

Key Features

  • Interactive Flywheel Visualization: Modern, responsive circular layout showing operational flow
  • Real-time Dashboard Updates: Three-panel interface with Actions, Visualization, and AI Chat
  • Intelligent Bottleneck Detection: AI-powered analysis of conversion rates and system health
  • Actionable Recommendations: Prioritized actions with detailed implementation steps
  • YAML/JSON State Management: Flexible data input for operational metrics

Prerequisites

  • Node.js 18+
  • Python 3.8+
  • OpenAI API Key (for the Agno agent)
  • pnpm (package manager)

Getting Started

  1. Install Node.js dependencies:
pnpm install
  1. Install Python dependencies for the Agno agent:
pnpm install:agent
  1. Set up your OpenAI API key in a .env.local file in the root directory:
# .env.local
OPENAI_API_KEY=your-api-key-here
  1. Start the development servers:
pnpm dev

Features

Core Capabilities

  • Operational Flywheel Analysis: Track Experiments → Products → Clients → Market flow with visual indicators
  • AI-Powered Insights: GPT-4o agent identifies bottlenecks and growth opportunities automatically
  • Interactive Dashboard: Modern flywheel visualization with hover effects and animations
  • Actionable Recommendations: Get specific, prioritized actions with detailed implementation steps
  • State Management: Load and analyze system state via YAML/JSON input with real-time parsing
  • Real-time Chat: Conversational AI agent for deep operational analysis and guidance

Technical Features

  • Responsive Design: Fluid, mobile-friendly interface with proper spacing
  • TypeScript Integration: Full type safety across dashboard components
  • Error Handling: Robust error boundaries and hydration issue prevention
  • Dynamic Imports: Optimized loading with SSR-safe component rendering
  • Health Monitoring: Visual flow health indicators (High/Medium/Low)
  • Node Highlighting: Interactive node selection and problem area identification

Development

Available Scripts

  • pnpm dev - Starts both UI and agent servers in development mode
  • pnpm dev:debug - Starts development servers with debug logging enabled
  • pnpm dev:ui - Starts only the Next.js UI server
  • pnpm dev:agent - Starts only the Agno agent server
  • pnpm build - Builds the Next.js application for production
  • pnpm start - Starts the production server
  • pnpm lint - Runs ESLint for code linting
  • pnpm install:agent - Installs Python dependencies for the agent

Usage

  1. Load Operational Data: Copy content from example-state.yaml or your own operational metrics
  2. Paste in Chat Interface: Send YAML/JSON data to the Ops Agent in the right panel
  3. Review Analysis: Agent automatically parses data and updates the flywheel visualization
  4. Examine Recommendations: Review AI-generated actions in the left Actions Panel
  5. Execute Improvements: Accept/reject recommendations and track implementation
  6. Monitor Progress: Watch real-time updates as your operational health improves

Example Workflow

# Start the dashboard
pnpm dev

# In the chat interface, paste:
nodes:
  experiments:
    count: 5
    last_update: "2025-06-20"
  products:
    users: 280
    mrr: 1200
  # ... rest of your operational data

# Agent responds with analysis and updates dashboard

System Architecture

Operational Flywheel Components

  • Experiments: Innovation pipeline and testing initiatives
  • Products: Shipped features and product launches
  • Clients: Customer base and satisfaction metrics
  • Market: Total addressable market and feedback loops

AI Agent Capabilities

  • Data Processing: Parse and validate operational state data (YAML/JSON) with error handling
  • Bottleneck Analysis: Analyze conversion rates between flywheel stages and identify low-performing flows
  • Recommendation Engine: Generate prioritized action recommendations with implementation steps
  • Visualization Updates: Provide structured data for dashboard flywheel visualization
  • Health Scoring: Calculate system-wide operational health metrics (0-100 scale)
  • Node Highlighting: Identify problematic areas for visual emphasis
  • Action Simulation: Execute or simulate approved operational changes with tracking

📚 Documentation

Contributing

Feel free to submit issues and enhancement requests! This dashboard is designed to be easily extensible for different operational models.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Example Usage

# Load your operational state (example-state.yaml)
nodes:
  experiments:
    count: 5
    last_update: "2025-06-20"
  products:
    users: 280
    mrr: 1200
    launches: 1
  clients:
    revenue: 15000
    nps: 6.5  # Below healthy threshold
    active: 3
  market:
    users: 600  # Total addressable audience
    feedback: 7.5
    leads: 45

flows:
  exp_to_prod:
    volume: 1  # Only 1 experiment shipped
    conversion_rate: 0.2
    health: "low"
  prod_to_market:
    volume: 280
    health: "high"
  clients_to_market:
    volume: 3  # Case studies shared
    health: "medium"
  market_to_exp:
    volume: 2  # Ideas from market feedback
    health: "low"

Troubleshooting

Common Issues

Agent Connection Issues

If you see "I'm having trouble connecting to my tools":

  1. Verify the Agno agent is running on port 8000
  2. Check your OpenAI API key is set in .env.local
  3. Ensure both servers started successfully with pnpm dev
  4. Check browser console for CopilotKit connection errors

Dashboard Not Updating

If the flywheel visualization doesn't update after pasting YAML:

  1. Check browser console for JavaScript errors
  2. Verify YAML format matches example-state.yaml structure
  3. Ensure agent is responding in chat interface
  4. Try refreshing the page and restarting servers

Hydration Errors

If you see React hydration mismatches:

  1. Clear browser cache and refresh
  2. Restart the development server
  3. Check for browser extensions interfering with React

Python Dependencies

For Python import errors:

# Recommended: Use the built-in script
pnpm install:agent

# Or manually:
cd agent && pip install -r requirements.txt

Server Ports