rufloui 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -6,6 +6,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+## [0.3.2] - 2026-03-12
+
+### Changed
+
+- **Port configuration** — Backend moved from 3001 to **28580**, frontend from 5173 to **28588**, daemon from 3002 to **28581**
+- Avoids conflicts with reserved port ranges on Windows (Hyper-V, Docker, antivirus)
+- All documentation, CORS config, WebSocket connections, and Vite proxy updated accordingly
+
+### Fixed
+
+- **Workflow cancel** — Now properly updates local store, kills running processes, and cancels linked tasks
+- **Task cancel** — Now kills running `claude -p` processes and cancels linked workflows
+- **Workflow delete** — Removes from local store even when CLI fails
+
 ## [0.3.1] - 2026-03-11
 
 ### Added

package/CLAUDE.md

@@ -14,13 +14,13 @@
 
 ```bash
 npm install
-npm run dev          # Starts both frontend (Vite :5173) and backend (Express :3001)
+npm run dev          # Starts both frontend (Vite :28588) and backend (Express :28580)
 # Or individually:
-npm run dev:frontend # Vite dev server on port 5173
-npm run dev:backend  # Express API on port 3001 (tsx watch, auto-reloads)
+npm run dev:frontend # Vite dev server on port 28588
+npm run dev:backend  # Express API on port 28580 (tsx watch, auto-reloads)
 ```
 
-The frontend proxies `/api/*` and `/ws` to `localhost:3001` via Vite config.
+The frontend proxies `/api/*` and `/ws` to `localhost:28580` via Vite config.
 
 ## Project Structure
 
@@ -141,7 +141,7 @@ The backend is a single Express file that wraps CLI commands, manages state, and
 
 ### WebSocket Events
 
-- Path: `ws://localhost:3001/ws`
+- Path: `ws://localhost:28580/ws`
 - **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`
 - Frontend connects in `App.tsx` and dispatches to Zustand store
 
@@ -255,7 +255,7 @@ These are critical to understand when modifying the backend:
 - ALWAYS read a file before editing it
 - NEVER commit secrets, credentials, or .env files
 - Keep files under 500 lines where possible (server.ts is an exception at ~2200 lines)
-- After editing `server.ts`, the backend must be restarted: `npx kill-port 3001; npx tsx src/backend/server.ts`
+- After editing `server.ts`, the backend must be restarted: `npx kill-port 28580; npx tsx src/backend/server.ts`
 - Frontend hot-reloads automatically via Vite
 - When API returns `{ items: [...] }` vs `[...]`, always normalize before setting store
 

package/README.md

@@ -47,14 +47,18 @@ npm run dev
 ```
 
 This starts:
-- **Frontend** (Vite) on `http://localhost:5173`
-- **Backend** (Express + WebSocket) on `http://localhost:3001`
+- **Frontend** (Vite) on `http://localhost:28588`
+- **Backend** (Express + WebSocket) on `http://localhost:28580`
 
 The frontend proxies `/api/*` and `/ws` to the backend automatically.
 
-### Install via GitHub Packages
+### Install via npm
 
-RuFloUI is also available as an npm package on GitHub Packages:
+```bash
+npm install rufloui
+```
+
+### Install via GitHub Packages
 
 ```bash
 # Configure npm to use GitHub Packages for the @mario-pb scope
@@ -64,14 +68,14 @@ echo "@mario-pb:registry=https://npm.pkg.github.com" >> .npmrc
 npm install @mario-pb/rufloui
 ```
 
-> **Note:** You need a GitHub personal access token with `read:packages` scope.
+> **Note:** GitHub Packages requires a personal access token with `read:packages` scope.
 > Add it to your `~/.npmrc`: `//npm.pkg.github.com/:_authToken=YOUR_TOKEN`
 
 ### Individual Services
 
 ```bash
-npm run dev:frontend   # Vite dev server on port 5173
-npm run dev:backend    # Express API on port 3001 (auto-reloads)
+npm run dev:frontend   # Vite dev server on port 28588
+npm run dev:backend    # Express API on port 28580 (auto-reloads)
 ```
 
 ### Production Build
@@ -123,7 +127,7 @@ src/
 ```
 Browser (React 19)                    Express Backend
 ┌────────────────────┐               ┌────────────────────────┐
-│  Vite :5173        │───REST /api──>│  Express :3001         │
+│  Vite :28588       │───REST /api──>│  Express :28580        │
 │  Zustand Store     │<──WebSocket──>│  WebSocket Server      │
 │  sessionStorage    │               │                        │
 └────────────────────┘               │  ┌──────────────────┐  │
@@ -161,7 +165,7 @@ Once the app is running, here's how to go from zero to a working multi-agent swa
 2. **Spawn agents** — Go to **Agents**, select a type (e.g. `coder`), give it a name, and click **Spawn**. Repeat for other roles you need (`researcher`, `tester`, etc.).
 3. **Create a task** — Go to **Tasks**, click **Create Task**, fill in a title and description (e.g. "Write a fibonacci function in Python with tests").
 4. **Assign to swarm** — On the task card, click **Assign to Swarm**. The multi-agent pipeline kicks in: a coordinator plans subtasks, specialist agents execute them in parallel waves.
-5. **Watch it live** — Switch to **Swarm Monitor** to see agent cards light up with real-time output and the orange working glow animation. Or open **Agent Viz** to see the full agent tree built from session logs.
+5. **Watch it live** — Switch to **Swarm Monitor** to see agent cards light up with real-time output and the orange working glow animation.
 6. **Continue if needed** — When a task completes, click **Continue Task** to send a follow-up instruction with full context from the previous run.
 
 ## Prerequisites

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rufloui",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "React 19 dashboard for claude-flow v3 multi-agent orchestration",
   "repository": {
     "type": "git",

package/release-notes.md

@@ -0,0 +1,27 @@
+## Port Configuration Change
+
+Default ports changed to avoid conflicts with Windows reserved ranges (Hyper-V, Docker, antivirus):
+
+| Service | Old | New |
+|---------|-----|-----|
+| Backend API | 3001 | **28580** |
+| Frontend UI | 5173 | **28588** |
+| Daemon | 3002 | **28581** |
+
+### Breaking Change
+
+If you have bookmarks, scripts, or webhook URLs pointing to the old ports, update them.
+
+### Other Fixes
+
+- **Workflow cancel** now properly kills running processes and cancels linked tasks
+- **Task cancel** now kills `claude -p` processes and cancels linked workflows
+- **Workflow delete** works even when CLI fails
+
+### Install
+
+```bash
+npm install rufloui
+```
+
+**Full Changelog**: https://github.com/Mario-PB/rufloui/compare/v0.3.1...v0.3.2

package/src/backend/server.ts

@@ -14,7 +14,7 @@ import { loadGitHubWebhookConfig, githubWebhookRoutes, updateWebhookEventByTaskI
 
 const execAsync = promisify(exec)
 const execFileAsync = promisify(execFile)
-const PORT = Number(process.env.PORT) || 3001
+const PORT = Number(process.env.PORT) || 28580
 const CLI = process.env.RUFLO_CLI || 'npx -y @claude-flow/cli@latest'
 const CLI_PARTS = (process.env.RUFLO_CLI || 'npx -y @claude-flow/cli@latest').split(/\s+/)
 const CLI_BIN = CLI_PARTS[0]
@@ -452,10 +452,10 @@ function systemRoutes(): Router {
       checks.push({ id: 'persist-dir', name: 'Persistence (.ruflo/)', status: 'fail', detail: 'Cannot write to .ruflo/ directory', fix: 'Check file permissions in project directory' })
     }
 
-    // 6. Port availability (3001 is us, check 3002 for daemon)
+    // 6. Port availability (28580 is us, check 28581 for daemon)
     try {
       await execAsync('npx -y @claude-flow/cli@latest status', { timeout: 15_000 })
-      checks.push({ id: 'daemon', name: 'claude-flow daemon', status: 'ok', detail: 'Daemon reachable on port 3002' })
+      checks.push({ id: 'daemon', name: 'claude-flow daemon', status: 'ok', detail: 'Daemon reachable on port 28581' })
     } catch {
       checks.push({ id: 'daemon', name: 'claude-flow daemon', status: 'warn', detail: 'Daemon not running (will start on first use)', fix: 'The daemon starts automatically when needed' })
     }
@@ -536,8 +536,8 @@ async function ensureDaemon(): Promise<void> {
     try { await execCli('init', []) } catch (e) {
       console.log('[daemon] init skipped (may already exist):', e instanceof Error ? e.message : String(e))
     }
-    // Start daemon on port 3002 (3001 is our API)
-    const daemonPort = String(Number(process.env.DAEMON_PORT) || 3002)
+    // Start daemon on port 28581 (28580 is our API)
+    const daemonPort = String(Number(process.env.DAEMON_PORT) || 28581)
     await execCli('start', ['--daemon', '--port', daemonPort, '--skip-mcp'])
     daemonStarted = true
   } catch (err) {
@@ -2777,7 +2777,7 @@ function swarmMonitorRoutes(): Router {
 
 // Bootstrap
 const app = express()
-app.use(cors({ origin: process.env.RUFLOUI_CORS_ORIGIN || 'http://localhost:5173' }))
+app.use(cors({ origin: process.env.RUFLOUI_CORS_ORIGIN || 'http://localhost:28588' }))
 app.use(express.json({
   verify: (req: any, _res, buf) => {
     // Preserve the raw body buffer for HMAC signature verification (webhook routes)
@@ -2966,7 +2966,7 @@ server.listen(PORT, async () => {
     await execCli('--version', [])
     console.log('  claude-flow CLI: [OK]')
   } catch { console.log('  claude-flow CLI: [WARN] First run may take longer (npx download)') }
-  console.log('Preflight complete. Dashboard: http://localhost:5173')
+  console.log('Preflight complete. Dashboard: http://localhost:28588')
 })
 
 export { app, server }

package/src/frontend/pages/AgentsPanel.tsx

@@ -85,7 +85,7 @@ export default function AgentsPanel() {
   // WebSocket for real-time agent activity
   useEffect(() => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
-    const ws = new WebSocket(`${protocol}//${window.location.hostname}:3001/ws`)
+    const ws = new WebSocket(`${protocol}//${window.location.hostname}:28580/ws`)
     ws.onmessage = (evt) => {
       try {
         const msg = JSON.parse(evt.data)

package/src/frontend/pages/TasksPanel.tsx

@@ -337,7 +337,7 @@ export default function TasksPanel() {
   // WebSocket for live task output
   useEffect(() => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
-    const ws = new WebSocket(`${protocol}//${window.location.hostname}:3001/ws`)
+    const ws = new WebSocket(`${protocol}//${window.location.hostname}:28580/ws`)
     wsRef.current = ws
     ws.onmessage = (evt) => {
       try {

package/src/frontend/pages/WorkflowsPanel.tsx

@@ -234,7 +234,7 @@ export default function WorkflowsPanel() {
   // WebSocket for live workflow updates
   useEffect(() => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
-    const ws = new WebSocket(`${protocol}//${window.location.hostname}:3001/ws`)
+    const ws = new WebSocket(`${protocol}//${window.location.hostname}:28580/ws`)
     ws.onmessage = (evt) => {
       try {
         const msg = JSON.parse(evt.data)

package/vite.config.ts

@@ -11,11 +11,11 @@ export default defineConfig({
     },
   },
   server: {
-    port: 5173,
+    port: 28588,
     proxy: {
-      '/api': 'http://localhost:3001',
+      '/api': 'http://localhost:28580',
       '/ws': {
-        target: 'ws://localhost:3001',
+        target: 'ws://localhost:28580',
         ws: true,
       },
     },