feat: AgentOS Mission Control dashboard v2 - #1
Draft
jdhurst12 wants to merge 31 commits into
Draft
Conversation
Next.js 14 + Tailwind + Framer Motion dashboard for managing Claude and AI agents (OpenClaw, Hermes) with a dark space/cyberpunk aesthetic. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
…oice input - Sidebar navigation with per-agent pages (Claude, OpenClaw, Hermes, Nexus, Phantom) - AgentChatPanel: per-agent chat UI with avatar, accent color, typing indicator - ChatInput: shared input with mic button (Web Speech API, no API keys needed) - ClaudePanel: real chat streaming from claude CLI via SSE - AgentFleet: overview cards with SVG progress rings and hover-lift animation - ActivityLog: live auto-updating event feed with AnimatePresence - MetricsBar: sparklines and animated counters - Sidebar: animated active indicator, status dots, glassmorphism Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
- GoalsPage: checkbox tasks with priority (high/medium/low), progress ring, voice input (Web Speech API), save-to-Obsidian button - JournalPage: day-by-day markdown editor, date navigator, voice dictation (continuous mode), markdown toolbar, word count - /api/obsidian route: writes goals and journal entries to obsidian-sync/Agent Memory/YYYY-MM-DD.md - Sidebar: added Goals and Journal nav items with colored active indicators - ~/.claude/save-to-obsidian.py: Stop hook script that extracts conversation from session JSONL and appends to today's Obsidian markdown file - ~/.claude/settings.json: wires the Stop hook to run on every session end Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
Bug 1 — ClaudePanel formatContent: brittle startsWith/endsWith bold detection
replaced with inline regex split so **bold** renders correctly mid-line
(previous code would mis-slice lines like **key:** where ** appears at both ends)
Bug 2 — AgentChatPanel running state: doesn't reset when agentId prop changes;
added useEffect to sync running/loading state on agentId change
Bug 3 — claude API route: stream-json parser only handled content_block_delta
but claude CLI emits {type:"assistant",message:{content:[{type:"text",...}]}};
added handler for that format so responses actually stream through
Bug 4 — ClaudePanel textarea height: inline style={{height:'auto'}} competed
with the onInput auto-resize handler causing incorrect initial height;
removed redundant inline style
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
- agentos.config.json: central config for claude CLI path/model, agent fleet (name, accent color, endpoint), Obsidian vault dir, dashboard port - agentos.config.example.json: committed template with docs comments - setup.mjs: interactive CLI wizard that walks through all config options, creates the config file, makes Obsidian vault dir, updates the stop hook - src/lib/config.ts: server-side config loader with sane defaults when no config file is present - /api/config: serves non-sensitive config fields to the client - /api/claude: reads cliPath from config instead of hardcoding 'claude' - /api/obsidian: reads vaultDir from config with ~ expansion - GUIDE.md: shareable setup guide covering install, config reference, Obsidian sync format, agent integration, voice input, troubleshooting Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
Creates /api/openclaw SSE route that connects to the OpenClaw daemon on ws://localhost:18789 using JSON-RPC chat.send, streaming AgentEvent frames back to the client. AgentChatPanel now uses the live endpoint for OpenClaw instead of mock replies, with graceful fallback messaging when the daemon is not running. Co-Authored-By: Claude <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
- AgentCreator modal: create/edit custom agents with avatar, accent, type, tools, parent hierarchy, endpoint, model — persisted to localStorage - OrgChart: interactive SVG canvas with pan/zoom, tree layout showing agent hierarchy, click-to-inspect with edit/delete for custom agents - CrewBuilder: full CrewAI crew designer — pick agents, define tasks, set process (sequential/hierarchical), export Python or YAML code - Sidebar: dynamic — loads custom agents from localStorage, + button to add agents, new nav items (Org Chart, Crew Builder, Fleet) - AgentFleet: now renders all agents dynamically including custom ones, with ambient glow cards and tool chips - AgentChatPanel: works with any agent ID including custom agents, with sensible mock replies for unknown agents Co-Authored-By: Claude <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
All alerts resolved. Learn more about Socket for GitHub. This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored. |
Authorization Bypass vulnerability in Next.js Middleware, patched in 14.2.25.
Replace hardcoded OpenClaw special-case and mock-only agents with a single /api/agent/[agentId] route that dispatches by endpoint URL scheme: - ws:// / wss:// → WebSocket bridge (OpenClaw, any WS daemon) - http:// / https:// → HTTP proxy with SSE pass-through or JSON fallback - no endpoint + id=claude → Claude CLI subprocess - no endpoint (other) → structured mock reply Also adds GET /api/agent/[agentId] health ping and a live Wifi/WifiOff indicator in AgentChatPanel. All agents now stream through the same client-side SSE reader — no more per-agent branching in the UI.
✅ Deploy Preview for agents-oppsys ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
- lib/memory.ts: CRUD over ~/.agentos/memory.json (fact/conversation/preference/task/note types, per-agent or global scope, tags, full-text search) - /api/memory: GET (list + search), POST (create) - /api/memory/[id]: GET, PUT, DELETE - MemoryPanel: filterable/searchable UI with type chips, agent filter, add modal - AgentChatPanel: bookmark icon on agent messages saves to memory instantly - Sidebar: Memory nav item added to Tools section
Replace the old dashboard overview with a true mission control layout: - 6-agent grid (3×2 on xl, 2×3 on md, 1 col on mobile) — all panels live simultaneously - Each panel: agent identity, pulsing status dot, animated waveform while streaming, mini chat, quick-send input - Expand button on each panel opens full-screen modal for deep-dive chat - Broadcast bar: send one command to any subset of agents at once (avatar toggles) - System metrics strip: active/standby/offline counts + live clock + host - All panels use the unified /api/agent/[id] SSE route — real responses where daemons exist, structured mocks otherwise - Dashboard no longer needs scroll — pure flex-height mission control filling the viewport
…ra background - Full-viewport command center with TopBar (live clock, ⌘K, operational status) - CommandPalette (⌘K/Ctrl+K): fuzzy search agents + quick actions, keyboard nav - ActivityFeed sidebar: real-time stream of all agent sends/replies/status events - AgentAddCard: "+ Add Agent" tile in the grid opens AgentCreator directly - Animated aurora orbs replace static background blobs (3-layer, slow-drifting) - Agent grid now includes custom agents + scrollable with consistent row heights - All agents pinged on mount; online/offline status reflected in activity log - BroadcastBar fires activity events; scan-line effect on all agent panels - Wires onCreateAgent from page.tsx into MissionControl and CommandPalette Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
Netlify was serving from the repo root (no package.json there) instead of the dashboard/ subdirectory. This adds: - netlify.toml: sets base=dashboard, publish=.next, Node 22 - @netlify/plugin-nextjs devDep: enables SSR + API route support Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
Every memory entry written via the dashboard is now mirrored as a
markdown note (with YAML frontmatter) into:
{vault}/Memory/{agentId}/{id}.md
Vault path: iCloud Obsidian › 2nd Brain | AI › Agent OS
- lib/obsidian.ts — sync/delete helpers + vault reader
- lib/memory.ts — calls sync on create/update/delete
- lib/config.ts — default vaultDir updated to correct iCloud path
- api/obsidian — GET endpoint exposes vault status + notes
- MemoryPanel — shows "Obsidian sync on/off" badge in header
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
Three major additions from the Agent OS pack (2026-06-29): Memory Galaxy - 3D force-directed star map of the Obsidian vault - Pure canvas 2D with additive blending, nebula glows, and twinkling starfield - Recent notes burn brighter/whiter; drag to orbit, scroll to zoom, click a star - /api/memory/graph endpoint walks vault, parses [[wikilinks]] for constellation links - Memory page now defaults to Galaxy view with List as fallback toggle Live Vitals strip in Mission Control - /api/vitals polls Claude CLI, OpenClaw gateway, and Hermes on every request - 5s server-side cache; Mission Control refreshes every 10s - Three coloured tiles (rust/pink/blue) show OK/offline + sub-detail Boba pet assets - Hermes pet spritesheet frames (idle/running/waving/failed/waiting) - Wired up for future HermesPet component Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
- Midnight Aubergine design system (globals.css + layout.tsx) - RadarOrb: three.js 12k-particle face orb with lightning arcs - RadarView: polls /api/vitals, shows Oracle with service health tiles - FusionView: multi-perspective Claude panel (Analyst/Critic/DA/Synthesist/Judge) - /api/fusion/chat: Anthropic streaming NDJSON with 5-role system prompt - /api/fusion/history: persists conversation to ~/.agentos/fusion-history.json - PipelineView: kanban board (Capture→Human Gate→Execute→Shipped) - /api/pipeline/*: capture, shape (Claude Haiku), decide, delete, pin routes - lib/pipeline.ts: shared file-based persistence for pipeline items - HermesPet: boba sprite component with mood states (idle/running/waving/waiting/failed) - AgentChatPanel: shows HermesPet in header when agentId === 'hermes' - Sidebar: adds Radar, Fusion, Pipeline nav items - page.tsx: renders new views for radar/fusion/pipeline page IDs Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
- Replace all violet/indigo/purple with blue across Header, Sidebar, MissionControl (including inline hex rgba values) - Add .glow-blue CSS utility class - Change agent grid from grid-cols-1 md:grid-cols-2 to grid-cols-2 so it always fills the content area with two columns (fixes left-only layout) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
- useState lazy init with getAllAgents() so grid renders immediately on first paint - Replace all remaining violet/indigo/purple hex values with blue-500 (#3b82f6) - Remove violet Tailwind classes from hover states and borders Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
The 256px sidebar was always rendered inline, so on phone/tablet widths it permanently occupied the left third of the viewport and pushed all dashboard content off-screen — the actual cause of "everything on the left." Sidebar now hides below the lg breakpoint and opens as a scrim-backed drawer via a hamburger button in Header. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
Self-contained, data-driven catalog of modern AI models, apps, agents, and tooling. Clean dark UI with live search, category jump-nav, and best-first ranking per category. Categories: frontier LLMs (Anthropic/ OpenAI/Google/xAI), locally-run runtimes, chat apps, coding tools, agents (incl. AgentOS fleet), web scrapers, Docker, self-hosted FOSS, and notable GitHub repos. Items can cross-list into multiple categories. All entries live in catalog/data.js — adding new software is a one-object append, no build step. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
The page loads data.js at runtime; without it the catalog renders empty. Add a .gitignore negation for catalog/*.js. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
Fill out every category toward the 15-20 cap, ranked most-popular first, and add core modern-AI sections that were missing: - Open-Weight Models (Llama, DeepSeek, Qwen, Mistral, Gemma, Phi, HF Hub) - Image & Video Generation, Voice (TTS/STT), Vector DBs & RAG - Broader Coding, Agents, Scrapers, Docker, Self-Hosted, and GitHub repo lists Cross-listing (`also`) wired across new categories. Data-only change; the renderer, search, chips, and ranking are unchanged. Co-Authored-By: Claude <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
Relocated the catalog into dashboard/public/catalog/ so Netlify (build base = dashboard) serves it as a static page at /catalog/. Single source of truth — still edit data.js to update entries. Co-Authored-By: Claude <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
Self-contained static site with all catalog data (186 entries, 16 categories). Ready to push to its own GitHub repo and deploy on Netlify with no build step. Co-Authored-By: Claude <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
Co-Authored-By: Claude <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
- Dashboard: title, header, sidebar, config defaults all updated to "Agent Ops" / "Agent Operations System" - Catalog: page title and h1 updated to "Stacked Up" in both catalog-site and dashboard public copy - package.json name updated to agent-ops Co-Authored-By: Claude <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
New categories: Developer Tools & Productivity, Observability Monitoring & Security, Data Architecture & Schema, Enterprise & Business Software. Additions to existing categories: - Voice: BlueVoice, FluidVoice - AI Agents: Composio, Wunderland, Hexaco Personality & Cognitive Memory, Fusion, Radar, Multi-Agent Collectives, Tool Registry, Agent Job Marketplace, Compatibility Discovering, RAG Memory Tools, Emergent Capabilities, Paracosm New Developer Tools: Warp, Raycast, Ghostty, 1Password, NPM, TypeScript, VS Code (cross-list), Framer New Observability: Datadog, OpenTelemetry, Provenance & Audit Trails, Five-Tier Prompt Injection Defense New Data Schema: Schema.org, Data-Pilot, Schema on Need/Read/Demand New Enterprise: AbacusAI, Odoo, Progress Software, ManageEngine Also includes tools-staging.txt reference file listing all additions. Co-Authored-By: Claude <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
localhost:3333/api/claude)ws://localhost:18789via/api/openclaw, streamingAgentEventframes in real time~/Obsidian/Vaults/Agent Memory/YYYY-MM-DD.mdagentos.config.json(gitignored) +setup.mjswizard +GUIDE.mdTest plan
cd dashboard && npm install && npm run dev→ open http://localhost:3333+button in sidebar opens Agent Creator; created agent appears in sidebar and org chartopenclaw onboard --install-daemonhas been run🤖 Generated with Claude Code
https://claude.ai/code/session_017UMP6EtGQPNdY8CtuuJxzM
Generated by Claude Code