skills/jontsai_command-center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit with translated description

Browse Source
This commit is contained in:
zlei9
2026-03-29 10:19:19 +08:00
commit 5aa1f324c6
81 changed files with 27526 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
docs/ENHANCEMENTS.md Normal file
View File

@@ -0,0 +1,212 @@
# 🚀 Command Center Enhancements
Prioritized feature backlog based on community research and user needs.
---
## 🔴 P1 — High Impact (Next Sprint)
### 1. Chat Interface
**Source:** klöss prompt, natural UX expectation
Talk to your agent directly from the dashboard.
- Left sidebar: session list (from transcript files)
- Main area: message bubbles with role alignment
- Input bar with send button
- **Stretch:** Voice input via Web Speech API
**Why:** Currently must use Slack/Discord/Telegram. Dashboard-native chat = single pane of glass.
### 2. Models Inventory Panel
**Source:** klöss prompt
Show all available models with:
- Model name + provider
- Current routing rules (which tasks → which model)
- Cost per 1K tokens (input/output)
- Failover chains
- Usage stats
**Why:** Cost visibility is core to Command Center. Models tab completes the picture.
### 3. Knowledge Search
**Source:** klöss prompt, obvious utility
Full-text search across workspace files:
- memory/\*.md
- state/\*.json
- AGENTS.md, TOOLS.md, etc.
**Implementation:** Use ripgrep or native Node fs + fuzzy matching. Return snippets with file paths.
**Why:** "What did we decide about X?" should be answerable from dashboard.
### 4. Live Refresh Indicator
**Source:** klöss prompt UX pattern
Visual indicator showing:
- 🟢 LIVE dot (SSE connected)
- "AUTO 15S" countdown to next update
- Last updated timestamp
**Why:** Users can't tell if data is fresh or stale.
---
## 🟡 P2 — Medium Priority (Roadmap)
### 5. Agent Details Expansion
Currently: Show active sessions per agent
**Enhancement:**
- Read agent's SOUL.md (personality)
- Read agent's config (model, capabilities)
- Show sub-agent spawn tree
- Recent outputs / decisions
### 6. Observations Feed
Parse `state/observations.md` or similar to show:
- What the agent learned today
- Patterns noticed
- Suggestions/insights
**Why:** Agents should surface learnings, not just do tasks.
### 7. Git/Code Status
For power users with coding agents:
- Repos in workspace with branch + dirty count
- Recent commits
- Open PRs (via GitHub API)
### 8. Revenue/Business Tracker
For users monetizing their agents:
- Current revenue
- Monthly burn (API costs)
- Net position
- Savings vs manual estimate
**Why:** klöss prompt shows demand for this in agency/consulting use cases.
### 9. Content Pipeline (Kanban)
For content-generating agents:
- Draft → Review → Approved → Published columns
- Card per content piece
- Approve/reject actions
---
## 🟢 P3 — Nice to Have (Future)
### 10. Calendar Integration
Weekly view of scheduled events:
- Cron jobs mapped to calendar
- Integration with Google Calendar (read-only)
### 11. CRM / Client Pipeline
For consulting/agency use:
- Prospect → Contacted → Meeting → Proposal → Active
- Read from clients/ directory
### 12. Ecosystem View
Multi-product portfolio tracking:
- Product grid with status badges
- Health indicators per product
### 13. Command Palette
Quick command interface (Cmd+K style):
- Trigger cron jobs
- Send quick messages
- Navigate to any panel
---
## 🎨 Design Improvements (Ongoing)
### Glass Card Enhancement
Current cards are solid. Consider:
```css
bg-white/[0.03] backdrop-blur-xl border border-white/[0.06]
```
### Stagger Animations
Add 0.05s delay per card for grid reveals.
### Skeleton Loading
Show loading skeletons instead of spinners.
### Empty States
Friendly messaging when panels are empty.
---
## Implementation Notes
### Our Advantage
- **Zero dependencies** — we're vanilla JS, no build step
- **~200KB total** — theirs will be 5-10MB+
- **Instant startup** — no Next.js cold start
### Their Advantage
- Convex real-time sync
- Framer Motion polish
- More opinionated UX (chat-first)
### Strategy
Cherry-pick features that fit our philosophy:
1. Keep it lightweight
2. Keep it dependency-free
3. Focus on visibility over control
4. Let OpenClaw handle the actions
---
## Feature Voting (Community Input Needed)
| Feature | Votes | Notes |
| ---------------- | ----- | ----- |
| Chat Interface | — | |
| Models Inventory | — | |
| Knowledge Search | — | |
| Live Indicator | — | |
| Agent Details | — | |
_Collect votes via GitHub Discussions or Discord poll._
---
_Last updated: 2026-02-13_
_Sources: klöss prompt tweet, Product Hunt research_

274
docs/PRODUCT_HUNT_LAUNCH.md Normal file
View File

@@ -0,0 +1,274 @@
# 🚀 Product Hunt Launch Prep
**Product:** OpenClaw Command Center
**Target Launch Date:** TBD (prep checklist below)
**Goal:** #1 Product of the Day
---
## 📋 Pre-Launch Checklist
### ✅ Already Done
- [x] Working product with real users (you!)
- [x] GitHub repo with README, badges, screenshots
- [x] ClawHub listing: https://www.clawhub.ai/jontsai/command-center
- [x] 10 high-quality screenshots
- [x] Clear value proposition
- [x] MIT license (open source credibility)
### 🔄 Needs Work (1-2 Weeks Before)
#### Product Hunt Profile
- [ ] **Maker Profile:** Ensure your PH profile is complete
- Photo, bio, website links
- Have you engaged on PH before? (upvoting, commenting builds credibility)
- [ ] **Hunter:** Self-hunt or find someone with a following?
- Self-hunting is fine for dev tools
- If you know someone with PH clout, ask them
#### Launch Assets
##### Title Options (60-70 chars max)
Pick the strongest angle:
1. `OpenClaw Command Center` — straightforward
2. `Command Center for AI Agents` — benefit-first
3. `Mission Control for Your AI Agents` — the tagline approach
##### Tagline Options (120 chars max)
1. `Real-time dashboard for monitoring your AI agents — sessions, costs, health, scheduled tasks. Zero dependencies.`
2. `Know what your AI agents are doing 24/7. Session monitoring, cost tracking, system health — all in one view.`
3. `Mission control for OpenClaw agents. Watch sessions, track costs, monitor health. No React, no build step.`
##### Description (for the launch page)
```
Your AI agents run 24/7. You need to know what they're doing.
Command Center gives you real-time visibility into your OpenClaw deployment:
📊 Session Monitoring — See all active AI sessions at a glance
⛽ LLM Fuel Gauges — Token usage, costs, quota remaining
💻 System Vitals — CPU, memory, disk, temperature
⏰ Cron Jobs — View and manage scheduled tasks
🧠 Cerebro Topics — Automatic conversation organization
**Why Command Center?**
⚡ FAST — Single API call for all data, 2-second updates via SSE
🪶 LIGHTWEIGHT — ~200KB total, zero dependencies, no build step
🔒 SECURE — Runs 100% locally, no telemetry, no external calls
📱 RESPONSIVE — Works on desktop and mobile, dark mode default
Open source (MIT). Works with any OpenClaw workspace.
```
##### Maker's Comment (First Comment)
```
Hey everyone! 👋
I built Command Center because I was running multiple AI agents across different Slack workspaces and had no idea what they were doing.
How many tokens did I burn today? Is the agent actually responding? Did that cron job run?
Command Center answers all those questions at a glance. It's intentionally lightweight — vanilla JS, no build step, ~200KB total. Just `node lib/server.js` and you're live.
A few things I'm proud of:
- Single unified API endpoint (not 16+ separate calls)
- Real-time SSE streaming (no polling)
- Privacy controls for demos/screenshots
- Works on mobile for checking while AFK
This is part of the OpenClaw ecosystem — open source AI agent framework. If you're running AI agents and need visibility, this is for you.
Happy to answer any questions! 🦞
```
##### Graphics Needed
| Asset | Size | Status |
| ------------- | --------- | ---------------------------------- |
| Hero Banner | 1200×630 | 📸 Create from dashboard-full.png |
| Logo | SVG + PNG | 🦞 Use OpenClaw lobster |
| Gallery (3-5) | 800×600 | ✅ Have screenshots, need to crop |
| GIF/Video | 15-60 sec | 🎬 Need to create screen recording |
##### Video/GIF Ideas
- 30-second walkthrough: Start server → Dashboard loads → Show panels
- Show real-time SSE updates (sessions appearing, costs updating)
- Demo the privacy toggle (hide sensitive topics)
- Quick filter actions (filtering sessions, topics)
#### Social Proof
- [ ] Any early users to quote? (testimonials)
- [ ] GitHub stars count (include in assets)
- [ ] Any press/mentions?
---
## 📅 Launch Day Timeline (PST)
**Launch at 12:01 AM PST** — You get a full 24 hours on the front page
| Time | Action |
| -------- | -------------------------------------------- |
| 12:01 AM | Product goes live |
| 6:00 AM | Wake up, check status |
| 6:30 AM | First social posts (Twitter/X, LinkedIn) |
| 7:00 AM | Ping early supporters via DM |
| 8:00 AM | Post in relevant Slack/Discord communities |
| 9-12 PM | Respond to ALL comments actively |
| 12:00 PM | Mid-day update on social (progress) |
| 2-5 PM | Continue engagement, share milestones |
| 6:00 PM | Evening push — remind people to check it out |
| 12:00 AM | Launch ends, celebrate 🎉 |
---
## 📣 Distribution Channels
### Pre-Launch (Build Anticipation)
- [ ] **Product Hunt "Coming Soon"** page (1 week before)
- [ ] Tweet announcing upcoming launch
- [ ] LinkedIn post teasing the launch
- [ ] Email your existing network
### Launch Day
| Channel | Post? | Notes |
| ------------------- | ----- | -------------------------------- |
| Twitter/X | ✅ | Personal + @OpenClawAI if exists |
| LinkedIn | ✅ | Developer tool audience |
| Discord (OpenClaw) | ✅ | Community is here |
| Discord (Clawd) | ✅ | Related community |
| Hacker News | ⚠️ | Only if genuine Show HN angle |
| Reddit r/selfhosted | ✅ | Perfect fit |
| Reddit r/LocalLLaMA | ⚠️ | If LLM-monitoring angle works |
| Reddit r/ChatGPT | ❌ | Too broad |
| IndieHackers | ✅ | Open source dev tool angle |
| Dev.to | ✅ | Write accompanying article |
### Post Templates
**Twitter/X:**
```
🚀 Just launched on Product Hunt!
Command Center — Mission control for your AI agents.
Real-time monitoring, cost tracking, system health. Zero dependencies, ~200KB, open source.
Check it out 👉 [link]
#buildinpublic #AI #opensource
```
**LinkedIn:**
```
Excited to share what I've been building 🎉
If you're running AI agents (via OpenClaw or similar), you know the challenge: What are they doing? How much are they costing? Are they even responding?
Command Center solves this — real-time dashboard for monitoring your AI agents.
✅ Session monitoring
✅ Cost tracking (LLM fuel gauges)
✅ System health
✅ Scheduled tasks
✅ Privacy controls for demos
Open source (MIT), zero dependencies, runs locally.
We just launched on Product Hunt — would love your support!
[link]
```
---
## ⚠️ Rules (Don't Get Penalized)
### DO ✅
- Be active on Product Hunt before launch
- Respond to every comment personally
- Share on social media naturally
- Ask friends/colleagues to check it out
- Thank every upvoter
### DON'T ❌
- Ask for upvotes directly ("Please upvote!")
- Ask people to create PH accounts just to upvote
- Pay for upvotes
- Create fake accounts
- Spam communities
- Send the same message to everyone
**Penalty:** PH can demote or remove products that game the system
---
## 🎯 Success Metrics
| Metric | Target | Stretch |
| ---------------- | ------ | ------- |
| Upvotes | 200+ | 500+ |
| Comments | 30+ | 75+ |
| Product of Day | Top 5 | #1 |
| GitHub stars | +50 | +150 |
| ClawHub installs | +20 | +50 |
---
## 📝 FAQ Prep
**Q: How is this different from other monitoring tools?**
A: Most monitoring tools are generic (Grafana, Datadog). Command Center is purpose-built for AI agents — it understands sessions, tokens, costs, and scheduled agent tasks. Plus it's ~200KB with zero dependencies.
**Q: Does it work with other AI frameworks (not just OpenClaw)?**
A: Currently optimized for OpenClaw. The architecture is modular — adapters for other frameworks are possible. Open to PRs!
**Q: Is there a hosted version?**
A: No, it's self-hosted only. This is intentional — your AI agent data stays on your machine.
**Q: What about multi-agent orchestration?**
A: Coming soon! Current focus is visibility. Agent-to-agent coordination is on the roadmap.
**Q: Cost?**
A: Free and open source (MIT license). No premium tier, no gotchas.
---
## 📦 Post-Launch
- [ ] Write a "lessons learned" blog post
- [ ] Thank everyone who supported
- [ ] Update README with PH badge
- [ ] Respond to any feature requests
- [ ] Plan next feature based on feedback
---
## Timeline
| Week | Focus |
| ----------- | --------------------------------------------------- |
| **Week -2** | Finalize assets, PH profile, Coming Soon page |
| **Week -1** | Build supporter list, tease on social, create video |
| **Day 0** | LAUNCH! Full engagement |
| **Week +1** | Follow up, blog post, incorporate feedback |
---
_Last updated: 2026-02-13_

49
docs/README.md Normal file
View File

@@ -0,0 +1,49 @@
# Documentation
> _"Knowledge is the foundation of the Swarm's evolution."_
## 📚 Contents
### Getting Started
- [Installation Guide](./guides/installation.md) _(coming soon)_
- [Configuration Guide](./guides/configuration.md) _(coming soon)_
- [Quick Start Tutorial](./guides/quickstart.md) _(coming soon)_
### API Reference
- [REST API](./api/rest.md) _(coming soon)_
- [WebSocket API](./api/websocket.md) _(coming soon)_
- [Authentication](./api/authentication.md) _(coming soon)_
### Architecture
- [System Overview](./architecture/overview.md) _(coming soon)_
- [Data Flow](./architecture/data-flow.md) _(coming soon)_
- [Security Model](./architecture/security.md) _(coming soon)_
### Development
- [Contributing](../CONTRIBUTING.md)
- [Code Style Guide](./development/code-style.md) _(coming soon)_
- [Testing Guide](./development/testing.md) _(coming soon)_
## 🎯 Documentation Principles
1. **Clear and Concise** — No fluff, get to the point
2. **Examples First** — Show, don't just tell
3. **Keep it Updated** — Docs should match the code
4. **Thematic Consistency** — Embrace the Zerg aesthetic
## 📝 Contributing to Docs
Found something unclear or missing? We welcome documentation improvements!
1. Fork the repository
2. Create a branch: `docs/your-improvement`
3. Make your changes
4. Submit a PR
---
_"The Overmind's knowledge spreads across the Swarm."_ 🐛

234
docs/architecture/OVERVIEW.md Normal file
View File

@@ -0,0 +1,234 @@
# OpenClaw Command Center — Architecture Overview
> _"The Overmind sees all through its Overlords."_
## Overview
OpenClaw Command Center is a real-time dashboard for monitoring and managing AI assistant orchestration. It provides visibility into sessions, token usage, costs, scheduled jobs, and system health.
## Core Architecture Principles
### 1. **DRY (Don't Repeat Yourself)**
- Shared components extracted to reusable partials
- Single source of truth for sidebar, styling, and common logic
- Centralized configuration management
### 2. **Real-Time First**
- Server-Sent Events (SSE) for live updates
- No polling needed for connected clients
- Graceful degradation to polling when SSE unavailable
### 3. **Zero Build Step**
- Plain HTML, CSS, and JavaScript
- No compilation, bundling, or transpilation required
- Works directly from static file serving
- Dynamic loading via fetch() for shared partials
### 4. **Progressive Enhancement**
- Core functionality works without JavaScript
- Enhanced UX with JS (smooth scrolling, live updates, etc.)
- Mobile-responsive design
### 5. **Thematic Consistency**
- Starcraft/Zerg theme throughout
- Dark mode by default (space aesthetic)
- Consistent naming conventions
## System Components
```
┌─────────────────────────────────────────────────────────────┐
│ Browser (Client) │
├─────────────────────────────────────────────────────────────┤
│ index.html │ jobs.html │ (future pages) │
│ ───────────── │ ───────────── │ │
│ Main Dashboard │ AI Jobs Dashboard │ │
└──────────┬───────────┴────────┬──────────┴─────────────────┘
│ │
│ ┌─────────────────┴──────────────────┐
│ │ /partials/sidebar.html │
│ │ (shared navigation component) │
│ └─────────────────┬──────────────────┘
│ │
└────────────────────┼──────────────────────────────┐
│ │
┌───────────────────────────────┴──────────────────────────────┤
│ /js/sidebar.js │
│ ─ Loads sidebar partial │
│ ─ Manages SSE connection for live badge updates │
│ ─ Handles navigation and active state │
└──────────────────────────────────────────────────────────────┘
│
│ SSE (/api/events)
│ REST (/api/*)
▼
┌──────────────────────────────────────────────────────────────┐
│ lib/server.js │
│ ─ Express HTTP server │
│ ─ SSE event broadcasting │
│ ─ API routes for state, sessions, jobs, etc. │
│ ─ Static file serving │
└─────────────────────────────────┬────────────────────────────┘
│
┌─────────────┼─────────────┐
│ │ │
▼ ▼ ▼
┌───────────┐ ┌───────────┐ ┌───────────┐
│ OpenClaw │ │ Jobs │ │ Linear │
│ Gateway │ │ Scheduler │ │ Sync │
│ API │ │ API │ │ API │
└───────────┘ └───────────┘ └───────────┘
```
## Frontend Architecture
### Pages
| Page | Purpose | Key Sections |
| ------------ | ------------------ | ------------------------------------------------------------------ |
| `index.html` | Main dashboard | Vitals, LLM Usage, Sessions, Cron Jobs, Memory, Cerebro, Operators |
| `jobs.html` | AI Jobs management | Job cards, run/pause/history controls |
### Shared Components
| Component | Location | Purpose |
| ---------- | ------------------------- | ------------------------------------------- |
| Sidebar | `/partials/sidebar.html` | Navigation + live stats badges |
| Sidebar JS | `/js/sidebar.js` | Partial loading, SSE connection, navigation |
| Styles | `/css/dashboard.css` | Shared visual theme |
| morphdom | `/js/lib/morphdom.min.js` | Efficient DOM diffing |
### State Management
- **SSE-based**: Real-time state pushed from server
- **Local state**: Per-component state in JavaScript closures
- **Persistence**: `localStorage` for preferences (sidebar collapsed, etc.)
## Backend Architecture
### Server (`lib/server.js`)
- Express.js HTTP server
- Static file serving from `/public`
- API routes under `/api/*`
- SSE endpoint at `/api/events`
### Data Sources
| Source | Integration | Purpose |
| ---------------- | ----------- | ------------------------------------ |
| OpenClaw Gateway | REST API | Sessions, token stats, system vitals |
| Jobs Scheduler | REST API | AI job definitions and run history |
| Linear | GraphQL API | Issue tracking integration |
### Configuration (`lib/config.js`)
- Auto-detects OpenClaw installation paths
- Supports multiple config file locations
- Environment variable overrides
## API Endpoints
| Endpoint | Method | Description |
| ----------------------- | --------- | --------------------------- |
| `/api/events` | GET (SSE) | Real-time state updates |
| `/api/state` | GET | Full current state snapshot |
| `/api/sessions` | GET | Session list and details |
| `/api/jobs` | GET | AI job definitions |
| `/api/jobs/:id/run` | POST | Trigger job execution |
| `/api/jobs/:id/pause` | POST | Pause job |
| `/api/jobs/:id/resume` | POST | Resume job |
| `/api/jobs/:id/history` | GET | Job run history |
## Design Decisions
### ADR-001: Shared Sidebar via Fetch
**Decision**: Load sidebar HTML via `fetch()` rather than server-side includes or build step.
**Rationale**:
- Keeps zero-build-step architecture
- Works with any static file server
- Enables dynamic loading and hot updates
- Single source of truth for sidebar content
### ADR-002: SSE for Real-Time Updates
**Decision**: Use Server-Sent Events instead of WebSockets.
**Rationale**:
- Simpler protocol (HTTP-based)
- Automatic reconnection
- Better proxy/firewall compatibility
- Sufficient for server→client push (no bidirectional needed)
### ADR-003: Morphdom for DOM Updates
**Decision**: Use morphdom for efficient DOM patching.
**Rationale**:
- Virtual DOM-like efficiency without framework overhead
- Preserves focus, scroll position, form state
- Small footprint (~4KB)
## File Structure
```
openclaw-command-center/
├── lib/ # Backend code
│ ├── server.js # Main HTTP server
│ ├── config.js # Configuration loader
│ ├── jobs.js # Jobs API integration
│ ├── linear-sync.js # Linear integration
│ └── topic-classifier.js # NLP topic classification
├── public/ # Frontend (served statically)
│ ├── index.html # Main dashboard
│ ├── jobs.html # AI Jobs dashboard
│ ├── partials/ # Shared HTML partials
│ │ └── sidebar.html # Navigation sidebar
│ ├── css/
│ │ └── dashboard.css # Shared styles
│ ├── js/
│ │ ├── sidebar.js # Sidebar loader + SSE
│ │ ├── app.js # Main page logic
│ │ ├── api.js # API client utilities
│ │ ├── store.js # State management
│ │ ├── utils.js # Common utilities
│ │ └── lib/
│ │ └── morphdom.min.js # DOM diffing library
│ └── data/ # Client-side data cache
├── config/ # Configuration files
├── docs/ # Documentation
│ └── architecture/ # Architecture docs
├── scripts/ # Operational scripts
└── tests/ # Test files
```
## Performance Considerations
1. **SSE Connection Sharing**: Single SSE connection per page, shared across components
2. **Lazy Loading**: Sidebar loaded on demand, not blocking initial render
3. **Efficient Updates**: morphdom patches only changed DOM nodes
4. **Debouncing**: High-frequency updates batched before render
## Security Considerations
1. **No Secrets in Frontend**: All sensitive data stays server-side
2. **Input Validation**: API inputs validated before processing
3. **CORS**: Restricted to same-origin by default
4. **Rate Limiting**: Consider for public deployments
## Future Directions
1. **Component System**: More shared partials (stats bar, modals, etc.)
2. **Plugin Architecture**: Extensible dashboard sections
3. **Multi-Gateway**: Support for monitoring multiple OpenClaw instances
4. **Historical Analytics**: Token usage and cost trends over time

95
docs/research/kloss-dashboard-prompt.md Normal file
View File

@@ -0,0 +1,95 @@
# klöss Dashboard Prompt Analysis
**Source:** https://x.com/kloss_xyz/status/2022461932759060993
**Date:** 2026-02-14
**Engagement:** ❤️ 476 🔁 49 💬 28 (high interest!)
## Overview
klöss shared a detailed prompt for building an OpenClaw command center using:
- Next.js 15 (App Router) + Convex (real-time backend)
- Tailwind CSS v4 + Framer Motion + ShadCN UI
- "Iron Man JARVIS HUD meets Bloomberg terminal" aesthetic
## Their 8-Page Architecture
| Page | Tabs | Our Equivalent |
| --------- | --------------------------- | ----------------------------------------- |
| HOME | — | ✅ Have (hero + panels) |
| OPS | Operations, Tasks, Calendar | ⚠️ Partial (cron only) |
| AGENTS | Agents, Models | ⚠️ Partial (sessions, no model inventory) |
| CHAT | Chat, Command | ❌ Don't have |
| CONTENT | — | ❌ Don't have |
| COMMS | Comms, CRM | ❌ Don't have |
| KNOWLEDGE | Knowledge, Ecosystem | ⚠️ Have memory browser |
| CODE | — | ❌ Don't have |
## Key Features We're Missing
### High Priority (Differentiators)
1. **Chat Interface** — Talk to agent from dashboard + voice input
2. **Models Inventory** — Show all models, routing rules, costs, failovers
3. **Knowledge Search** — Full-text search across workspace files
4. **Auto-refresh indicator** — "LIVE" badge + "AUTO 15S" countdown
### Medium Priority (Nice to Have)
5. **Revenue/Business Tracker** — Revenue, burn, net
6. **Content Pipeline** — Kanban for content drafts
7. **Code/Repos View** — Git repos, branches, dirty files
8. **Observations Feed** — Agent observations/learnings
9. **Agent SOUL/RULES Display** — Show personality + capabilities
### Lower Priority (Context-Specific)
10. **CRM/Client Pipeline** — For consulting/agency use
11. **Ecosystem View** — Multi-product portfolio
12. **Calendar Integration** — Weekly view
## Design Notes (Steal These)
### Glass Card Style
```css
bg-white/[0.03] backdrop-blur-xl border border-white/[0.06]
```
### Typography
- `clamp(0.45rem, 0.75vw, 0.6875rem)` for fluid nav scaling
- 10-14px body text
- Inter or system font stack
### Animation
- Stagger animations: 0.05s delay per card
- Spring physics on interactions
- `layoutId` for tab transitions
### UX Patterns
- Skeleton loading states
- Empty states with helpful messaging
- Live indicator dot
- Custom scrollbar styling
## Full Prompt
<details>
<summary>Click to expand (very long)</summary>
```
Build me a mission control dashboard for my OpenClaw AI agent system.
Stack: Next.js 15 (App Router) + Convex (real-time backend) + Tailwind CSS v4 + Framer Motion + ShadCN UI + Lucide icons. TypeScript throughout.
[... see original tweet for full content ...]
```
</details>
---
_Added to reading list: 2026-02-13_