rufloui 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/'1' +0 -0
- package/.env.example +46 -0
- package/CHANGELOG.md +87 -0
- package/CLAUDE.md +287 -0
- package/LICENSE +21 -0
- package/README.md +316 -0
- package/Webhooks) +0 -0
- package/docs/plans/2026-03-11-github-webhooks.md +957 -0
- package/docs/screenshot-swarm-monitor.png +0 -0
- package/frontend +0 -0
- package/index.html +13 -0
- package/package.json +56 -0
- package/public/vite.svg +4 -0
- package/src/backend/__tests__/webhook-github.test.ts +934 -0
- package/src/backend/jsonl-monitor.ts +430 -0
- package/src/backend/server.ts +2972 -0
- package/src/backend/telegram-bot.ts +511 -0
- package/src/backend/webhook-github.ts +350 -0
- package/src/frontend/App.tsx +461 -0
- package/src/frontend/api.ts +281 -0
- package/src/frontend/components/ErrorBoundary.tsx +98 -0
- package/src/frontend/components/Layout.tsx +431 -0
- package/src/frontend/components/ui/Button.tsx +111 -0
- package/src/frontend/components/ui/Card.tsx +51 -0
- package/src/frontend/components/ui/StatusBadge.tsx +60 -0
- package/src/frontend/main.tsx +63 -0
- package/src/frontend/pages/AgentVizPanel.tsx +428 -0
- package/src/frontend/pages/AgentsPanel.tsx +445 -0
- package/src/frontend/pages/ConfigPanel.tsx +661 -0
- package/src/frontend/pages/Dashboard.tsx +482 -0
- package/src/frontend/pages/HiveMindPanel.tsx +355 -0
- package/src/frontend/pages/HooksPanel.tsx +240 -0
- package/src/frontend/pages/LogsPanel.tsx +261 -0
- package/src/frontend/pages/MemoryPanel.tsx +444 -0
- package/src/frontend/pages/NeuralPanel.tsx +301 -0
- package/src/frontend/pages/PerformancePanel.tsx +198 -0
- package/src/frontend/pages/SessionsPanel.tsx +428 -0
- package/src/frontend/pages/SetupWizard.tsx +181 -0
- package/src/frontend/pages/SwarmMonitorPanel.tsx +634 -0
- package/src/frontend/pages/SwarmPanel.tsx +322 -0
- package/src/frontend/pages/TasksPanel.tsx +535 -0
- package/src/frontend/pages/WebhooksPanel.tsx +335 -0
- package/src/frontend/pages/WorkflowsPanel.tsx +448 -0
- package/src/frontend/store.ts +185 -0
- package/src/frontend/styles/global.css +113 -0
- package/src/frontend/test-setup.ts +1 -0
- package/src/frontend/tour/TourContext.tsx +161 -0
- package/src/frontend/tour/tourSteps.ts +181 -0
- package/src/frontend/tour/tourStyles.css +116 -0
- package/src/frontend/types.ts +239 -0
- package/src/frontend/utils/formatTime.test.ts +83 -0
- package/src/frontend/utils/formatTime.ts +23 -0
- package/tsconfig.json +23 -0
- package/vite.config.ts +26 -0
- package/vitest.config.ts +17 -0
- package/{,+ +0 -0
package/'1'
ADDED
|
File without changes
|
package/.env.example
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
# RuFloUI - Environment Configuration
|
|
2
|
+
# Copy this file to .env and adjust values as needed.
|
|
3
|
+
|
|
4
|
+
# Backend API port (default: 3001)
|
|
5
|
+
PORT=3001
|
|
6
|
+
|
|
7
|
+
# claude-flow daemon port (default: 3002)
|
|
8
|
+
DAEMON_PORT=3002
|
|
9
|
+
|
|
10
|
+
# Frontend dev server port (default: 5173, set via Vite)
|
|
11
|
+
# VITE_PORT=5173
|
|
12
|
+
|
|
13
|
+
# claude-flow CLI command (default: npx -y @claude-flow/cli@latest)
|
|
14
|
+
# RUFLO_CLI=npx -y @claude-flow/cli@latest
|
|
15
|
+
|
|
16
|
+
# Persistence directory (default: .ruflo/ in project root)
|
|
17
|
+
# RUFLO_PERSIST_DIR=.ruflo
|
|
18
|
+
|
|
19
|
+
# CLI command timeout in ms (default: 30000)
|
|
20
|
+
# RUFLO_CLI_TIMEOUT=30000
|
|
21
|
+
|
|
22
|
+
# Max agent output buffer lines per agent (default: 500)
|
|
23
|
+
# RUFLO_OUTPUT_BUFFER_SIZE=500
|
|
24
|
+
|
|
25
|
+
# Process zombie timeout in ms - kill claude processes with no output (default: 300000 = 5 min)
|
|
26
|
+
# RUFLO_ZOMBIE_TIMEOUT=300000
|
|
27
|
+
|
|
28
|
+
# Skip Claude Code permission prompts for autonomous agent execution (default: true)
|
|
29
|
+
# Set to false to require manual approval for each tool use
|
|
30
|
+
RUFLOUI_SKIP_PERMISSIONS=true
|
|
31
|
+
|
|
32
|
+
# CORS origin for the API server (default: http://localhost:5173)
|
|
33
|
+
# RUFLOUI_CORS_ORIGIN=http://localhost:5173
|
|
34
|
+
|
|
35
|
+
# Telegram Bot Integration (optional)
|
|
36
|
+
# Create a bot via @BotFather on Telegram, then set TELEGRAM_ENABLED=true
|
|
37
|
+
TELEGRAM_ENABLED=false
|
|
38
|
+
# TELEGRAM_BOT_TOKEN=your-bot-token-from-botfather
|
|
39
|
+
# TELEGRAM_CHAT_ID=your-chat-id
|
|
40
|
+
|
|
41
|
+
# GitHub Webhooks (optional)
|
|
42
|
+
# Receives issue events and auto-creates swarm tasks
|
|
43
|
+
GITHUB_WEBHOOK_ENABLED=false
|
|
44
|
+
# GITHUB_TOKEN=ghp_your-personal-access-token
|
|
45
|
+
# GITHUB_WEBHOOK_SECRET=your-webhook-secret
|
|
46
|
+
# GITHUB_WEBHOOK_REPOS=owner/repo1,owner/repo2
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to RuFloUI will be documented in this file.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
|
|
6
|
+
|
|
7
|
+
## [Unreleased]
|
|
8
|
+
|
|
9
|
+
## [0.3.1] - 2026-03-11
|
|
10
|
+
|
|
11
|
+
### Added
|
|
12
|
+
|
|
13
|
+
- **GitHub Webhook Integration** — Receive GitHub issue events and auto-create swarm tasks
|
|
14
|
+
- Webhook endpoint `POST /api/webhooks/github` with HMAC-SHA256 signature validation
|
|
15
|
+
- Dashboard UI (Webhooks page) with config editor, webhook URL, and event history
|
|
16
|
+
- Auto-creates high-priority tasks from new/reopened issues
|
|
17
|
+
- Auto-assigns to active swarm pipeline (researcher, coder, tester, reviewer)
|
|
18
|
+
- Configurable task instruction templates with `{{title}}`, `{{body}}`, `{{url}}`, `{{author}}`, `{{labels}}`, `{{repo}}`, `{{number}}` placeholders
|
|
19
|
+
- Body deduplication: when template includes `{{body}}`, body is not repeated in the header
|
|
20
|
+
- Event status tracking (received, processing, completed, failed) with real-time WebSocket updates
|
|
21
|
+
- "Send Test" button to simulate webhook events from the dashboard
|
|
22
|
+
- Config persisted to `.ruflo/github-webhook.json`
|
|
23
|
+
- Fallback to environment variables when no dashboard config
|
|
24
|
+
- 56 unit tests covering all webhook features
|
|
25
|
+
|
|
26
|
+
## [0.3.0] - 2026-03-11
|
|
27
|
+
|
|
28
|
+
### Added
|
|
29
|
+
|
|
30
|
+
- **Telegram Bot Integration** — Remote monitoring and control via Telegram polling bot
|
|
31
|
+
- 10 commands: `/start`, `/status`, `/agents`, `/tasks`, `/task`, `/workflows`, `/swarm`, `/run`, `/cancel`, `/help`
|
|
32
|
+
- Inline keyboard buttons on status (Agents/Tasks/Swarm), task lists (Refresh), and task detail (Cancel)
|
|
33
|
+
- Configurable notifications: task completed/failed, swarm init/shutdown, agent error, task progress
|
|
34
|
+
- Task progress updates throttled to 1 message per 30 seconds per task
|
|
35
|
+
- `/run <description>` creates and auto-assigns tasks to the swarm from Telegram
|
|
36
|
+
- `/cancel <id>` cancels running tasks from Telegram
|
|
37
|
+
- `/start` open to all users for chat ID discovery during setup
|
|
38
|
+
- Chat ID authorization — only the configured chat can execute commands
|
|
39
|
+
- Bot token stored with restricted file permissions (0600)
|
|
40
|
+
- Dashboard UI (Config > Telegram Bot) with enable toggle, token/chatId fields, Save & Connect, and Send Test
|
|
41
|
+
- Notification toggles in the dashboard for per-type control
|
|
42
|
+
- Activity log with incoming/outgoing message history (last 50 entries, polled every 10s)
|
|
43
|
+
- Auto-reconnect with exponential backoff (up to 5 attempts) on polling failures
|
|
44
|
+
- Configuration persisted to `.ruflo/telegram.json` (survives restarts without env vars)
|
|
45
|
+
- Zero overhead when disabled — returns null, no polling, no connections
|
|
46
|
+
|
|
47
|
+
### Dependencies
|
|
48
|
+
|
|
49
|
+
- Added `node-telegram-bot-api` (runtime)
|
|
50
|
+
- Added `@types/node-telegram-bot-api` (dev)
|
|
51
|
+
|
|
52
|
+
## [0.2.0] - 2026-03-10
|
|
53
|
+
|
|
54
|
+
### Added
|
|
55
|
+
|
|
56
|
+
- **Dashboard** — System health overview with agent counts, task summary, and health checks
|
|
57
|
+
- **Swarm Management** — Initialize/shutdown swarms with topology selection (hierarchical, mesh, star, ring)
|
|
58
|
+
- **Swarm Monitor** — Real-time agent status cards with status-colored backgrounds, working glow animation, and live output modal
|
|
59
|
+
- **Agent Visualization** — Tree view of agent hierarchies from JSONL session logs with real-time updates
|
|
60
|
+
- **Agent Management** — Spawn, list, and terminate agents with type selection
|
|
61
|
+
- **Task Board** — Kanban-style board (Pending, In Progress, Completed, Failed) with live output streaming
|
|
62
|
+
- **Task Continuation** — Follow-up on completed/failed tasks with automatic context injection from previous results
|
|
63
|
+
- **Output History** — All task output persisted to `.ruflo/outputs/` and viewable across reloads
|
|
64
|
+
- **Multi-Agent Pipeline** — Coordinator plans with `--max-turns 1`, workers execute in dependency waves with role-specific system prompts
|
|
65
|
+
- **Hive Mind** — Consensus protocols, broadcast messaging, join/leave, shared memory
|
|
66
|
+
- **Workflows** — Create, execute, pause, resume, and cancel multi-step workflows
|
|
67
|
+
- **Memory Store** — Key-value storage with namespace support, search, and TTL
|
|
68
|
+
- **Neural Network** — Training, optimization, compression, and pattern monitoring
|
|
69
|
+
- **Performance** — Benchmarking, metrics, bottleneck analysis, and latency/throughput charts
|
|
70
|
+
- **Sessions** — Save and restore orchestration state
|
|
71
|
+
- **Hooks** — Hook listing, initialization, and metrics
|
|
72
|
+
- **Configuration** — Runtime config with get/set/reset and import/export
|
|
73
|
+
- **State Persistence** — Backend state persisted to `.ruflo/state.json` with debounced writes, atomic saves, and crash recovery
|
|
74
|
+
- **Frontend Persistence** — Zustand store backed by sessionStorage for instant page reload recovery
|
|
75
|
+
- **WebSocket** — Real-time updates with exponential backoff reconnection (up to 50 retries)
|
|
76
|
+
- **Health Polling** — Background health checks every 30s with disconnection banners
|
|
77
|
+
- **Preflight Wizard** — Startup checks for Node.js, npx, claude-flow CLI, Claude Code CLI, persistence directory, and daemon
|
|
78
|
+
- **Zombie Reaper** — Automatic cleanup of stale Claude processes after 5 minutes of inactivity
|
|
79
|
+
- **Activity Panel** — Global log panel at the bottom of every page
|
|
80
|
+
|
|
81
|
+
### Architecture
|
|
82
|
+
|
|
83
|
+
- React 19 + Vite 6 + TypeScript frontend
|
|
84
|
+
- Express + WebSocket backend wrapping claude-flow CLI
|
|
85
|
+
- Zustand for state management with persist middleware
|
|
86
|
+
- JSONL monitoring for agent visualization
|
|
87
|
+
- Dark theme with CSS variables
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,287 @@
|
|
|
1
|
+
# Claude Code Configuration - RuFloUI
|
|
2
|
+
|
|
3
|
+
## Project Overview
|
|
4
|
+
|
|
5
|
+
**RuFloUI** is a React 19 web frontend for managing [claude-flow v3](https://github.com/ruvnet/claude-flow) multi-agent orchestration. It wraps the CLI (`npx @claude-flow/cli@latest`) behind an Express + WebSocket backend and presents a full dashboard with real-time agent monitoring, task execution via multi-agent pipelines, and persistent state.
|
|
6
|
+
|
|
7
|
+
- **Repo**: https://github.com/Mario-PB/rufloui.git
|
|
8
|
+
- **Tech Stack**: React 19 + Vite 6 + TypeScript + Express + WebSocket + Zustand
|
|
9
|
+
- **Charts**: Recharts
|
|
10
|
+
- **Icons**: Lucide React
|
|
11
|
+
- **OS**: Windows 11 (use Unix shell syntax in bash commands)
|
|
12
|
+
|
|
13
|
+
## Quick Start
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install
|
|
17
|
+
npm run dev # Starts both frontend (Vite :5173) and backend (Express :3001)
|
|
18
|
+
# Or individually:
|
|
19
|
+
npm run dev:frontend # Vite dev server on port 5173
|
|
20
|
+
npm run dev:backend # Express API on port 3001 (tsx watch, auto-reloads)
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
The frontend proxies `/api/*` and `/ws` to `localhost:3001` via Vite config.
|
|
24
|
+
|
|
25
|
+
## Project Structure
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
src/
|
|
29
|
+
├── backend/
|
|
30
|
+
│ ├── server.ts # Express API + WebSocket server (~2100 lines)
|
|
31
|
+
│ └── jsonl-monitor.ts # JSONL session file monitor for Agent Viz (~430 lines)
|
|
32
|
+
└── frontend/
|
|
33
|
+
├── main.tsx # Entry point
|
|
34
|
+
├── App.tsx # Router + WebSocket handler + initial data fetch
|
|
35
|
+
├── api.ts # API client (fetch wrapper + all endpoint namespaces)
|
|
36
|
+
├── store.ts # Zustand global state with sessionStorage persistence
|
|
37
|
+
├── types.ts # TypeScript interfaces (Agent, Task, SwarmAgent, etc.)
|
|
38
|
+
├── styles/
|
|
39
|
+
│ └── global.css # CSS variables, dark theme, animations
|
|
40
|
+
├── components/
|
|
41
|
+
│ ├── Layout.tsx # App shell: sidebar nav (grouped) + header + activity panel
|
|
42
|
+
│ ├── ErrorBoundary.tsx
|
|
43
|
+
│ └── ui/
|
|
44
|
+
│ ├── Button.tsx # Reusable button with loading/variants
|
|
45
|
+
│ ├── Card.tsx # Card container with title/actions
|
|
46
|
+
│ └── StatusBadge.tsx # Colored status pill
|
|
47
|
+
└── pages/
|
|
48
|
+
├── Dashboard.tsx # System health, agent overview, activity chart
|
|
49
|
+
├── AgentsPanel.tsx # Spawn, list, terminate agents
|
|
50
|
+
├── SwarmPanel.tsx # Init/shutdown swarm, topology graph
|
|
51
|
+
├── SwarmMonitorPanel.tsx # Real-time agent cards with live output modal
|
|
52
|
+
├── AgentVizPanel.tsx # JSONL tree visualization of Claude sessions
|
|
53
|
+
├── HiveMindPanel.tsx # Consensus, broadcast, shared memory
|
|
54
|
+
├── TasksPanel.tsx # Kanban task board with live execution output
|
|
55
|
+
├── SessionsPanel.tsx # Save/restore sessions
|
|
56
|
+
├── PerformancePanel.tsx # Benchmarks, latency/throughput charts
|
|
57
|
+
├── MemoryPanel.tsx # Store/search/retrieve memories
|
|
58
|
+
├── HooksPanel.tsx # Hook configuration
|
|
59
|
+
├── NeuralPanel.tsx # Neural network status
|
|
60
|
+
├── WorkflowsPanel.tsx # Workflow management with step tracking
|
|
61
|
+
├── ConfigPanel.tsx # Configuration editor
|
|
62
|
+
├── LogsPanel.tsx # Live activity logs
|
|
63
|
+
└── MemoryGame.tsx # Easter egg game
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Backend Architecture (server.ts)
|
|
67
|
+
|
|
68
|
+
The backend is a single Express file that wraps CLI commands, manages state, and persists to disk.
|
|
69
|
+
|
|
70
|
+
### Key Patterns
|
|
71
|
+
|
|
72
|
+
1. **CLI Wrapper**: `execCli(command, args)` runs `npx @claude-flow/cli@latest <command> <args>` and returns `{ raw, parsed? }`. Supports `--format json` for structured output.
|
|
73
|
+
|
|
74
|
+
2. **Table Parser**: `parseCliTable(raw)` extracts rows from ASCII tables (`| col1 | col2 |` format) into `Record<string, string>[]`. Column names are lowercased with spaces replaced by underscores.
|
|
75
|
+
|
|
76
|
+
3. **Persistence Layer** (`.ruflo/state.json`):
|
|
77
|
+
All critical state is persisted to disk as JSON and restored on server startup:
|
|
78
|
+
- `taskStore`, `workflowStore`, `sessionStore` — user-created data
|
|
79
|
+
- `agentRegistry`, `terminatedAgents`, `agentActivity` — agent tracking
|
|
80
|
+
- `swarmConfig` (id, topology, strategy, maxAgents, shutdown flag)
|
|
81
|
+
- `perfHistory`, `lastPerfMetrics`, `benchmarkHasRun` — performance data
|
|
82
|
+
- `currentSwarmAgentIds` — current swarm membership
|
|
83
|
+
|
|
84
|
+
Persistence triggers:
|
|
85
|
+
- **Debounced save** (2s) on every `broadcast()` of significant events
|
|
86
|
+
- **Periodic save** every 30s as safety net
|
|
87
|
+
- **Shutdown save** on SIGINT/SIGTERM
|
|
88
|
+
- **Load on startup** via `loadFromDisk()`
|
|
89
|
+
|
|
90
|
+
4. **Multi-Agent Pipeline** (`launchSwarmPipeline()`):
|
|
91
|
+
When a task is assigned with an active swarm:
|
|
92
|
+
- Phase 1: Coordinator plans subtasks using ALL available agent roles
|
|
93
|
+
- Phase 2: Workers execute in parallel waves respecting dependencies
|
|
94
|
+
- Phase 3: Results synthesized, task marked complete
|
|
95
|
+
Each agent runs as a separate `claude -p` process with `--output-format stream-json`.
|
|
96
|
+
|
|
97
|
+
5. **Agent Output Buffers** (`agentOutputBuffers: Map`):
|
|
98
|
+
Stores last 500 lines of Claude output per agent. Streamed to frontend via `agent:output` WebSocket events for the live output modal.
|
|
99
|
+
|
|
100
|
+
6. **In-Memory Stores** (persisted to `.ruflo/state.json`):
|
|
101
|
+
- `agentRegistry: Map<createdTime, {id, name, type}>` — tracks spawned agents
|
|
102
|
+
- `terminatedAgents: Set<createdTime>` — marks agents as terminated
|
|
103
|
+
- `taskStore: Map<id, TaskRecord>` — tasks created via UI
|
|
104
|
+
- `workflowStore: Map<id, WorkflowRecord>` — workflow execution state with steps
|
|
105
|
+
- `sessionStore: Map<id, SessionRecord>` — sessions created via UI
|
|
106
|
+
- `agentActivity: Map<agentId, AgentActivity>` — real-time agent status
|
|
107
|
+
- `perfHistory[]` + `lastPerfMetrics` + `benchmarkHasRun` — performance data
|
|
108
|
+
|
|
109
|
+
7. **Time Matching**: Agent spawn returns UTC timestamps, but `agent list` shows local time. The registry converts UTC->local for matching.
|
|
110
|
+
|
|
111
|
+
8. **Health Checks**: Parsed by matching known check names (`Version Freshness`, `Daemon Status`, etc.) rather than Unicode symbols (Windows codepage mangles check/warning marks).
|
|
112
|
+
|
|
113
|
+
9. **Env Var Cleanup**: When spawning child `claude -p` processes, ALL env vars starting with `CLAUDE` are deleted to prevent nested session conflicts.
|
|
114
|
+
|
|
115
|
+
10. **Telegram Bot** (`telegram-bot.ts`): Optional polling-based Telegram integration for remote monitoring/control. Enabled via `TELEGRAM_ENABLED=true`, `TELEGRAM_BOT_TOKEN`, `TELEGRAM_CHAT_ID`. Returns `null` when disabled — zero overhead. Hooks into `broadcast()` for fire-and-forget notifications.
|
|
116
|
+
|
|
117
|
+
### API Routes
|
|
118
|
+
|
|
119
|
+
| Route | Methods | Description |
|
|
120
|
+
|-------|---------|-------------|
|
|
121
|
+
| `/api/system` | GET health/info/metrics/status, POST reset | System monitoring |
|
|
122
|
+
| `/api/agents` | GET list, POST spawn, GET :id/status, POST :id/terminate, POST terminate-all | Agent lifecycle |
|
|
123
|
+
| `/api/swarm` | GET status/health, POST init/shutdown | Swarm management |
|
|
124
|
+
| `/api/hive-mind` | GET status, POST init/shutdown/join/leave/consensus/broadcast/memory | Hive mind |
|
|
125
|
+
| `/api/tasks` | GET list/summary, POST create, POST :id/assign/:id/complete/:id/cancel | Task management |
|
|
126
|
+
| `/api/sessions` | GET list, POST save, POST :id/restore, DELETE :id | Session management |
|
|
127
|
+
| `/api/performance` | GET metrics/bottleneck/profile/report, POST benchmark/optimize | Performance |
|
|
128
|
+
| `/api/memory` | GET list/search/stats, POST store, GET :key, DELETE :key | Memory storage |
|
|
129
|
+
| `/api/hooks` | GET list, POST init, GET metrics, GET :name/explain | Hook management |
|
|
130
|
+
| `/api/neural` | GET status/patterns, POST train/compress/optimize | Neural network |
|
|
131
|
+
| `/api/workflows` | GET list/templates, POST create/execute, DELETE :id | Workflows |
|
|
132
|
+
| `/api/coordination` | GET metrics/topology, POST sync/consensus | Coordination |
|
|
133
|
+
| `/api/config` | GET list, GET/PUT :key, POST reset, GET export, POST import | Configuration |
|
|
134
|
+
| `/api/ai-defence` | GET stats, POST scan/analyze | AI defence |
|
|
135
|
+
| `/api/swarm-monitor` | GET snapshot/activity/agents/health/metrics, GET output/:agentId, POST purge | Swarm Monitor |
|
|
136
|
+
| `/api/webhooks` | POST github, GET/PUT github/config, GET github/events | GitHub webhook receiver + config |
|
|
137
|
+
| `/api/config/telegram` | GET status, PUT update config | Telegram bot config + status |
|
|
138
|
+
| `/api/config/telegram/test` | POST | Send test message to Telegram |
|
|
139
|
+
| `/api/config/telegram/log` | GET | Activity log (last 50 messages) |
|
|
140
|
+
| `/api/viz` | GET sessions, GET sessions/:id, GET sessions/:id/logs/:nodeId | Agent Viz (JSONL) |
|
|
141
|
+
|
|
142
|
+
### WebSocket Events
|
|
143
|
+
|
|
144
|
+
- Path: `ws://localhost:3001/ws`
|
|
145
|
+
- **Broadcast events**: `swarm:status`, `agent:activity`, `agent:output`, `task:added`, `task:updated`, `task:output`, `workflow:added`, `workflow:updated`, `session:list`, `performance:metrics`, `viz:update`, `swarm-monitor:update`, `log`
|
|
146
|
+
- Frontend connects in `App.tsx` and dispatches to Zustand store
|
|
147
|
+
|
|
148
|
+
## Frontend Architecture
|
|
149
|
+
|
|
150
|
+
### State Management (Zustand + sessionStorage)
|
|
151
|
+
|
|
152
|
+
Global store in `store.ts` with `persist` middleware using `sessionStorage`:
|
|
153
|
+
- Survives page reloads within the same browser tab
|
|
154
|
+
- Clears when tab is closed (no stale data from old sessions)
|
|
155
|
+
- `partialize()` excludes transient state (connected, selectedVizNode)
|
|
156
|
+
- Logs capped at 100 entries in storage
|
|
157
|
+
|
|
158
|
+
### Initial Data Loading
|
|
159
|
+
|
|
160
|
+
`App.tsx` fetches core data (health, tasks, agents, workflows, sessions) on mount via `Promise.allSettled`. This means all pages have data immediately without waiting for individual page fetches. API responses are normalized (handles both `{tasks: [...]}` and `[...]` formats).
|
|
161
|
+
|
|
162
|
+
### API Client (api.ts)
|
|
163
|
+
|
|
164
|
+
Thin `fetch` wrapper: `request<T>(path, options)` -> auto-adds JSON headers, logs to store, throws on non-OK. Namespaces: `system`, `swarm`, `agents`, `tasks`, `memory`, `sessions`, `hiveMind`, `neural`, `performance`, `hooks`, `workflows`, `coordination`, `config`, `viz`, `swarmMonitor`, `aiDefence`.
|
|
165
|
+
|
|
166
|
+
### Key UI Patterns
|
|
167
|
+
|
|
168
|
+
- **No CSS framework** — all styles are inline CSSProperties objects or CSS variables in `global.css`
|
|
169
|
+
- **Dark theme** — CSS variables like `--bg-primary`, `--text-primary`, `--accent-blue`, etc.
|
|
170
|
+
- **Modals** — custom React overlays via `createPortal(modal, document.body)`, with backdrop click-to-close
|
|
171
|
+
- **Status-colored cards** — SwarmMonitorPanel agent cards use per-status background/border colors (orange=working, green=active, red=error, blue=idle)
|
|
172
|
+
- **Live output modal** — Click agent card "Output" button to see real-time Claude output streamed via WebSocket
|
|
173
|
+
- **Defensive rendering** — all `.slice()`, `.toLowerCase()` calls guarded with `?? ''` or `|| 'unknown'` fallbacks
|
|
174
|
+
- **Lazy loading** — all pages use `React.lazy()` with Suspense spinner
|
|
175
|
+
|
|
176
|
+
### Sidebar Navigation (Layout.tsx)
|
|
177
|
+
|
|
178
|
+
Grouped into: Overview (Dashboard), Orchestration (Swarm, Agents, Agent Viz, Swarm Monitor, Tasks), Intelligence (Hive Mind, Neural, Memory), Operations (Workflows, Hooks, Sessions), Monitoring (Performance, Config, Logs), Games (Memory Game).
|
|
179
|
+
|
|
180
|
+
## Multi-Agent Task Execution
|
|
181
|
+
|
|
182
|
+
When a task is assigned with an active swarm:
|
|
183
|
+
|
|
184
|
+
1. `launchWorkflowForTask()` detects active swarm agents
|
|
185
|
+
2. `launchSwarmPipeline()` orchestrates the 3-phase pipeline:
|
|
186
|
+
- **Phase 1**: Coordinator plans subtasks, explicitly assigning to different roles
|
|
187
|
+
- **Phase 2**: Workers execute in dependency waves (parallel where possible)
|
|
188
|
+
- **Phase 3**: Mark complete, persist results
|
|
189
|
+
3. Each agent runs as `claude -p` with role-specific system prompts
|
|
190
|
+
4. Output is buffered per-agent and streamed to frontend via WebSocket
|
|
191
|
+
5. Agent activity broadcasts update Swarm Monitor cards in real-time
|
|
192
|
+
6. Fallback: if no swarm active, single `claude -p` handles the whole task
|
|
193
|
+
|
|
194
|
+
### Agent Roles in Pipeline
|
|
195
|
+
|
|
196
|
+
The planning prompt forces the coordinator to use ALL available roles:
|
|
197
|
+
- `researcher` — explore codebase, find files, understand patterns (Read/Grep/Glob only, no modifications)
|
|
198
|
+
- `coder` — implement code changes (Edit/Write tools)
|
|
199
|
+
- `tester` — write tests, run test suites, validate
|
|
200
|
+
- `reviewer` — review code quality, security, best practices
|
|
201
|
+
|
|
202
|
+
## Persistence Architecture
|
|
203
|
+
|
|
204
|
+
```
|
|
205
|
+
Frontend (React) Backend (Express) Disk
|
|
206
|
+
┌──────────────┐ ┌──────────────────┐ ┌─────────────┐
|
|
207
|
+
│ Zustand store │◄── WebSocket ──►│ In-memory Maps │◄── save/load─►│.ruflo/ │
|
|
208
|
+
│ sessionStorage│◄── REST API ───►│ taskStore │ │ state.json │
|
|
209
|
+
│ (per tab) │ │ workflowStore │ └─────────────┘
|
|
210
|
+
└──────────────┘ │ agentRegistry │ ┌─────────────┐
|
|
211
|
+
│ agentActivity │ │.claude-flow/│
|
|
212
|
+
│ sessionStore │ │ agents/ │
|
|
213
|
+
│ perfHistory │ │ tasks/ │
|
|
214
|
+
└──────────────────┘ │ workflows/ │
|
|
215
|
+
│ └─────────────┘
|
|
216
|
+
▼ ┌─────────────┐
|
|
217
|
+
claude-flow CLI ──────────────────►│.swarm/ │
|
|
218
|
+
(npx @claude-flow/cli) │ memory.db │
|
|
219
|
+
│ hnsw.index │
|
|
220
|
+
└─────────────┘
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
**What persists across server restarts**: tasks, workflows, sessions, agent registry, swarm config, performance history, agent activity.
|
|
224
|
+
|
|
225
|
+
**What persists across page reloads**: all store state via sessionStorage (within same tab).
|
|
226
|
+
|
|
227
|
+
**What is lost**: running processes (claude -p), WebSocket connections, agent output buffers (rebuilt on next execution).
|
|
228
|
+
|
|
229
|
+
## CLI Quirks & Workarounds
|
|
230
|
+
|
|
231
|
+
These are critical to understand when modifying the backend:
|
|
232
|
+
|
|
233
|
+
| Issue | Workaround |
|
|
234
|
+
|-------|-----------|
|
|
235
|
+
| CLI outputs ASCII tables, not JSON | `parseCliTable()` + regex extraction; prefer `--format json` |
|
|
236
|
+
| `agent list` doesn't show agent IDs or names | `agentRegistry` Map keyed by created time |
|
|
237
|
+
| `agent stop` doesn't remove agent from list | `terminatedAgents` Set, filtered in list endpoint |
|
|
238
|
+
| `agent stop --all` doesn't work | List agents first, stop individually in parallel batches of 10 |
|
|
239
|
+
| Spawn returns UTC time, list shows local time | Convert UTC->local with `new Date()` for registry key |
|
|
240
|
+
| `swarm shutdown` doesn't clear CLI state | `swarmShutdown` boolean flag, checked in status endpoint |
|
|
241
|
+
| Windows codepage mangles UTF-8 (check/warning marks) | Match known check names, not Unicode symbols |
|
|
242
|
+
| `performance metrics` has different columns than `benchmark` | Metrics: `Metric/Current/Limit/Status`; Benchmark: `Operation/Mean/P95/P99/Status` |
|
|
243
|
+
| Agent types must match CLI exactly | Valid: `coder`, `researcher`, `tester`, `reviewer`, `architect`, `coordinator`, `analyst`, `optimizer`, `security-architect`, `security-auditor`, `memory-specialist`, `swarm-specialist`, `performance-engineer`, `core-architect`, `test-architect` |
|
|
244
|
+
| Agent spawn flag is `--type` not `-t` | `['spawn', '--type', type, '--name', name]` |
|
|
245
|
+
| Nested `claude -p` fails with CLAUDE env vars | Delete ALL env vars starting with `CLAUDE` before spawn |
|
|
246
|
+
| `--output-format stream-json` needs `--verbose` | Always include `--verbose` flag with stream-json |
|
|
247
|
+
| Zombie agents accumulate across swarm inits | `purgeAllCliAgents()` on swarm init + manual purge button |
|
|
248
|
+
|
|
249
|
+
## Behavioral Rules
|
|
250
|
+
|
|
251
|
+
- Do what has been asked; nothing more, nothing less
|
|
252
|
+
- NEVER create files unless absolutely necessary
|
|
253
|
+
- ALWAYS prefer editing existing files over creating new ones
|
|
254
|
+
- NEVER proactively create documentation files unless explicitly requested
|
|
255
|
+
- ALWAYS read a file before editing it
|
|
256
|
+
- NEVER commit secrets, credentials, or .env files
|
|
257
|
+
- Keep files under 500 lines where possible (server.ts is an exception at ~2200 lines)
|
|
258
|
+
- After editing `server.ts`, the backend must be restarted: `npx kill-port 3001; npx tsx src/backend/server.ts`
|
|
259
|
+
- Frontend hot-reloads automatically via Vite
|
|
260
|
+
- When API returns `{ items: [...] }` vs `[...]`, always normalize before setting store
|
|
261
|
+
|
|
262
|
+
## Build & Deploy
|
|
263
|
+
|
|
264
|
+
```bash
|
|
265
|
+
npm run build # TypeScript check + Vite production build -> dist/
|
|
266
|
+
npm run preview # Preview production build
|
|
267
|
+
npx tsc --noEmit # Type check without building
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
## Git & Repository
|
|
271
|
+
|
|
272
|
+
```bash
|
|
273
|
+
git remote origin -> https://github.com/Mario-PB/rufloui.git
|
|
274
|
+
# Branch: main
|
|
275
|
+
# .gitignore excludes: node_modules/, dist/, .env*, .claude/, .claude-flow/, .ruflo/, .swarm/, .mcp.json
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
## Local Data Directories (not in git)
|
|
279
|
+
|
|
280
|
+
- `.ruflo/` — RuFlo persistence (state.json with tasks, workflows, agents, etc.)
|
|
281
|
+
- `.claude-flow/` — claude-flow CLI state (agents/store.json, tasks/store.json, config.yaml, etc.)
|
|
282
|
+
- `.swarm/` — claude-flow swarm data (memory.db SQLite + HNSW vector index)
|
|
283
|
+
|
|
284
|
+
## Support
|
|
285
|
+
|
|
286
|
+
- claude-flow docs: https://github.com/ruvnet/claude-flow
|
|
287
|
+
- claude-flow issues: https://github.com/ruvnet/claude-flow/issues
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 RuFloUI Contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|