@poolzin/poolbot-office 0.1.0

package/README.md

@@ -0,0 +1,161 @@
+# PoolBot Office
+
+> Visual monitoring & management frontend for PoolBot Multi-Agent system
+
+**Version:** 0.1.0  
+**Status:** 🚧 In Development  
+**Target Release:** v1.0.0 (Q2 2026)
+
+---
+
+## 🎯 Overview
+
+PoolBot Office is a comprehensive visual dashboard for monitoring and managing your PoolBot Multi-Agent system. It features:
+
+- **2D Office View** - Isometric floor plan with agent desks and collaboration visualization
+- **3D Office View** - Full 3D scene with animated characters and holographic displays
+- **Chat Interface** - Real-time chat with agents, streaming support, and message history
+- **Console Dashboard** - Complete management for agents, channels, skills, and cron jobs
+
+---
+
+## 🚀 Quick Start
+
+```bash
+# Install dependencies
+cd apps/office
+pnpm install
+
+# Development mode
+pnpm dev
+
+# Build for production
+pnpm build
+
+# Start production server
+pnpm start
+```
+
+---
+
+## 📋 Features
+
+### Virtual Office
+- [x] 2D isometric floor plan
+- [x] 3D scene with React Three Fiber
+- [x] Agent avatars with status animations
+- [x] Collaboration lines (message flow visualization)
+- [x] Furniture (desks, chairs, plants)
+- [x] Spawn/despawn effects
+
+### Chat Interface
+- [x] Bottom-docked chat bar
+- [x] Real-time message streaming
+- [x] Agent selector with status
+- [x] Message history with search
+- [x] Copy message functionality
+- [x] Typing indicators
+
+### Console Dashboard
+- [x] Overview stats (agents, channels, skills, cron)
+- [x] Alert banners
+- [x] Quick actions
+- [x] Agent management (CRUD)
+- [x] Channel management (connect/disconnect)
+- [x] Skills marketplace (install/uninstall)
+- [x] Cron job management (run/pause/delete)
+- [x] Settings (gateway, theme, language)
+
+---
+
+## 🛠️ Tech Stack
+
+| Layer | Technology |
+|-------|------------|
+| Build Tool | Vite 6 |
+| UI Framework | React 19 |
+| 2D Rendering | SVG + CSS |
+| 3D Rendering | React Three Fiber + Drei |
+| State Management | React useState/useEffect |
+| Styling | CSS + Inline styles |
+| Language | TypeScript 5 |
+
+---
+
+## 📁 Project Structure
+
+```
+apps/office/
+├── bin/                          # CLI executables
+│   ├── poolbot-office.js
+│   ├── poolbot-office-config.js
+│   └── poolbot-office-server.js
+├── src/
+│   ├── components/
+│   │   ├── chat/                 # Chat interface components
+│   │   ├── console/              # Console dashboard pages
+│   │   ├── office-2d/            # 2D office components
+│   │   └── office-3d/            # 3D office components
+│   ├── gateway/                  # WebSocket client
+│   ├── styles/                   # Global styles
+│   ├── App.tsx                   # Main app component
+│   └── main.tsx                  # Entry point
+├── public/                       # Static assets
+├── index.html                    # HTML template
+├── package.json
+├── tsconfig.json
+└── vite.config.ts
+```
+
+---
+
+## 🔧 CLI Options
+
+```bash
+poolbot-office [options]
+
+Options:
+  -t, --token <token>     Gateway auth token (auto-detected)
+  -g, --gateway <url>     Gateway WebSocket URL
+  -p, --port <port>       Server port (default: 5180)
+  --host <host>           Bind address (default: 0.0.0.0)
+  -h, --help              Show help
+```
+
+---
+
+## 📊 Progress
+
+**Current Status:** 60% Complete (9/15 phases)
+
+### Completed Phases
+- [x] Phase 1: Setup do Projeto
+- [x] Phase 2: CLI e Servidor
+- [x] Phase 3: Gateway WebSocket Client
+- [x] Phase 4: 2D Office Layout
+- [x] Phase 5: 3D Office Layout
+- [x] Phase 6: Chat Interface
+- [x] Phase 7: Console Dashboard
+- [x] Phase 8: Polish & Integration
+- [x] Phase 9: Documentation
+
+### Remaining Phases
+- [ ] Phase 10: Testing (Unit/E2E)
+- [ ] Phase 11: Release Preparation
+
+---
+
+## 📝 License
+
+MIT License - see [LICENSE](../../LICENSE) for details.
+
+---
+
+## 🙏 Acknowledgments
+
+PoolBot Office is inspired by and based on the architecture of [OpenClaw Office](https://github.com/openclaw/openclaw-office).
+
+---
+
+**Documentation:** https://docs.molt.bot/office  
+**GitHub:** https://github.com/poolbot/poolbot

package/bin/poolbot-office-config.js

@@ -0,0 +1,150 @@
+#!/usr/bin/env node
+
+/**
+ * PoolBot Office Configuration
+ * 
+ * Handles CLI argument parsing and configuration management
+ */
+
+import { homedir } from "node:os";
+import { join } from "node:path";
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from "node:fs";
+
+const DEFAULT_PORT = 5180;
+const DEFAULT_HOST = "0.0.0.0";
+const DEFAULT_GATEWAY = "ws://localhost:18789";
+
+export function parseArgs() {
+  const args = process.argv.slice(2);
+  const parsed = {};
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    switch (arg) {
+      case "-h":
+      case "--help":
+        parsed.help = true;
+        break;
+      case "-t":
+      case "--token":
+        parsed.token = args[++i];
+        break;
+      case "-g":
+      case "--gateway":
+        parsed.gateway = args[++i];
+        break;
+      case "-p":
+      case "--port":
+        parsed.port = parseInt(args[++i], 10);
+        break;
+      case "--host":
+        parsed.host = args[++i];
+        break;
+    }
+  }
+
+  return parsed;
+}
+
+export function detectPoolBotToken() {
+  try {
+    const credentialsPath = join(homedir(), ".poolbot", "credentials", "gateway.json");
+    if (!existsSync(credentialsPath)) {
+      return null;
+    }
+    const credentials = JSON.parse(readFileSync(credentialsPath, "utf-8"));
+    return credentials.token || null;
+  } catch {
+    return null;
+  }
+}
+
+export function resolveConfig() {
+  const args = parseArgs();
+  const homeDir = homedir();
+  const officeConfigPath = join(homeDir, ".poolbot", "office-config.json");
+
+  // Load persisted config if exists
+  let persistedGatewayUrl;
+  if (existsSync(officeConfigPath)) {
+    try {
+      const persisted = JSON.parse(readFileSync(officeConfigPath, "utf-8"));
+      persistedGatewayUrl = persisted.gatewayUrl;
+    } catch {
+      // Ignore corrupted config
+    }
+  }
+
+  // Determine gateway URL
+  let gatewayUrl = args.gateway || persistedGatewayUrl || DEFAULT_GATEWAY;
+  const shouldPersistGatewayUrl = !!args.gateway && !persistedGatewayUrl;
+
+  // Determine token
+  let token = args.token || detectPoolBotToken() || undefined;
+
+  // Extract token from gateway URL if present (for remote gateways)
+  if (gatewayUrl.includes("?token=")) {
+    const url = new URL(gatewayUrl.replace("ws://", "http://").replace("wss://", "https://"));
+    const urlToken = url.searchParams.get("token");
+    if (urlToken) {
+      token = urlToken;
+      // Remove token from URL for clean storage
+      url.searchParams.delete("token");
+      gatewayUrl = url.toString().replace("http://", "ws://").replace("https://", "wss://");
+    }
+  }
+
+  return {
+    gatewayUrl,
+    token,
+    port: args.port || DEFAULT_PORT,
+    host: args.host || DEFAULT_HOST,
+    officeConfigPath,
+    shouldPersistGatewayUrl,
+  };
+}
+
+export function writePersistedOfficeConfig(gatewayUrl, configPath) {
+  try {
+    const configDir = join(configPath, "..");
+    if (!existsSync(configDir)) {
+      mkdirSync(configDir, { recursive: true });
+    }
+    writeFileSync(configPath, JSON.stringify({ gatewayUrl }, null, 2));
+  } catch (error) {
+    console.error("Failed to persist office config:", error);
+  }
+}
+
+export function printHelp() {
+  console.log(`
+PoolBot Office — Visual Agent Monitoring & Management
+
+Usage:
+  poolbot-office [options]
+
+Options:
+  -t, --token <token>     Gateway auth token (auto-detected from ~/.poolbot)
+  -g, --gateway <url>     Gateway WebSocket URL (default: ws://localhost:18789)
+  -p, --port <port>       Server port (default: 5180)
+  --host <host>           Bind address (default: 0.0.0.0)
+  -h, --help              Show help
+
+Examples:
+  poolbot-office                     # Auto-detect local gateway
+  poolbot-office --token abc123      # Explicit token
+  poolbot-office -g ws://remote:18789 # Remote gateway
+  poolbot-office -p 8080             # Custom port
+
+Remote Gateway Support:
+  PoolBot Office supports both local and remote gateways.
+  For remote gateways (Aliyun, Tencent Cloud, etc.), use:
+  
+  poolbot-office -g "ws://your-remote-gateway:18789?token=your-token"
+
+  The token is automatically extracted from the URL.
+
+Documentation:
+  https://docs.molt.bot/office
+`);
+}

package/bin/poolbot-office-server.js

@@ -0,0 +1,209 @@
+#!/usr/bin/env node
+
+/**
+ * PoolBot Office Server
+ * 
+ * HTTP server for serving the Office UI and proxying WebSocket connections
+ */
+
+import { createServer } from "node:http";
+import { readFileSync, existsSync } from "node:fs";
+import { join, extname } from "node:path";
+import { networkInterfaces } from "node:os";
+
+/**
+ * MIME types for static files
+ */
+const MIME_TYPES = {
+  ".html": "text/html; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".js": "application/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".svg": "image/svg+xml",
+  ".ico": "image/x-icon",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+};
+
+/**
+ * Get file content type
+ */
+function getContentType(filePath) {
+  const ext = extname(filePath).toLowerCase();
+  return MIME_TYPES[ext] || "application/octet-stream";
+}
+
+/**
+ * Send JSON response
+ */
+function sendJson(res, status, body) {
+  res.statusCode = status;
+  res.setHeader("Content-Type", "application/json; charset=utf-8");
+  res.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+  res.end(JSON.stringify(body));
+}
+
+/**
+ * Send static file
+ */
+function sendStaticFile(res, filePath) {
+  if (!existsSync(filePath)) {
+    res.statusCode = 404;
+    res.setHeader("Content-Type", "text/plain; charset=utf-8");
+    res.end("Not Found");
+    return;
+  }
+
+  try {
+    const content = readFileSync(filePath);
+    res.statusCode = 200;
+    res.setHeader("Content-Type", getContentType(filePath));
+    res.setHeader("Cache-Control", "public, max-age=31536000");
+    res.end(content);
+  } catch {
+    res.statusCode = 500;
+    res.setHeader("Content-Type", "text/plain; charset=utf-8");
+    res.end("Internal Server Error");
+  }
+}
+
+/**
+ * Handle health check requests
+ */
+function handleHealthCheck(req, res) {
+  if (req.url === "/healthz") {
+    res.statusCode = 200;
+    res.setHeader("Content-Type", "text/plain; charset=utf-8");
+    res.end("ok");
+    return;
+  }
+
+  if (req.url === "/health") {
+    sendJson(res, 200, {
+      status: "ok",
+      service: "poolbot-office",
+      version: "0.1.0",
+      timestamp: Date.now(),
+    });
+    return;
+  }
+}
+
+/**
+ * Handle gateway config requests
+ */
+function handleGatewayConfig(req, res, config) {
+  if (req.url === "/api/gateway-config") {
+    sendJson(res, 200, {
+      gatewayUrl: config.gatewayUrl,
+      hasToken: !!config.token,
+    });
+    return;
+  }
+}
+
+/**
+ * Create Office HTTP server
+ */
+export function createOfficeServer(options) {
+  const { config, distDir } = options;
+
+  const server = createServer((req, res) => {
+    // Health checks
+    if (req.url === "/healthz" || req.url === "/health") {
+      handleHealthCheck(req, res);
+      return;
+    }
+
+    // Gateway config API
+    if (req.url?.startsWith("/api/")) {
+      handleGatewayConfig(req, res, config);
+      return;
+    }
+
+    // Static file serving
+    let requestPath = req.url === "/" ? "/index.html" : req.url;
+    
+    // Remove query parameters
+    requestPath = requestPath.split("?")[0];
+    
+    const filePath = join(distDir, requestPath);
+    
+    // Security: prevent directory traversal
+    if (!filePath.startsWith(distDir)) {
+      res.statusCode = 403;
+      res.setHeader("Content-Type", "text/plain; charset=utf-8");
+      res.end("Forbidden");
+      return;
+    }
+
+    sendStaticFile(res, filePath);
+  });
+
+  return { server };
+}
+
+/**
+ * Format startup summary
+ */
+export function formatStartupSummary(config) {
+  const localIp = getLocalIpAddress();
+  
+  const lines = [
+    "",
+    "  ┌─────────────────────────────────────────────────┐",
+    "  │                                                 │",
+    "  │           PoolBot Office is running!            │",
+    "  │                                                 │",
+    "  └─────────────────────────────────────────────────┘",
+    "",
+    `  ➜  Local:   http://localhost:${config.port}/`,
+    `  ➜  Network: http://${localIp}:${config.port}/`,
+    "",
+    `  Gateway:   ${config.gatewayUrl}`,
+    `  Token:     ${config.token ? "✓ Configured" : "✗ Not configured"}`,
+    "",
+    "  ─────────────────────────────────────────────────",
+    "",
+    "  Quick Start:",
+    "  1. Open the URL above in your browser",
+    "  2. Configure gateway connection if needed",
+    "  3. Start monitoring your agents!",
+    "",
+    "  Documentation: https://docs.molt.bot/office",
+    "",
+  ];
+
+  return lines.join("\n");
+}
+
+/**
+ * Get local IP address
+ */
+function getLocalIpAddress() {
+  try {
+    const nets = networkInterfaces();
+    
+    for (const name of Object.keys(nets)) {
+      const netArray = nets[name];
+      if (!netArray) continue;
+      
+      for (const net of netArray) {
+        const family = net.family;
+        const internal = net.internal;
+        const address = net.address;
+        
+        // Skip internal (loopback) and non-IPv4 addresses
+        if (internal || family !== "IPv4") continue;
+        
+        return address;
+      }
+    }
+  } catch {
+    // Fallback
+  }
+  
+  return "localhost";
+}

package/bin/poolbot-office.js

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+
+/**
+ * PoolBot Office CLI
+ * 
+ * Visual monitoring & management frontend for PoolBot Multi-Agent system
+ */
+
+import { fileURLToPath } from "node:url";
+import { resolve } from "node:path";
+import {
+  printHelp,
+  resolveConfig,
+  parseArgs,
+  writePersistedOfficeConfig,
+} from "./poolbot-office-config.js";
+import { createOfficeServer, formatStartupSummary } from "./poolbot-office-server.js";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+const distDir = resolve(__dirname, "..", "dist");
+
+const args = parseArgs();
+if (args.help) {
+  printHelp();
+  process.exit(0);
+}
+
+const config = resolveConfig();
+if (config.shouldPersistGatewayUrl) {
+  writePersistedOfficeConfig(config.gatewayUrl, config.officeConfigPath);
+}
+
+const { server } = createOfficeServer({ config, distDir });
+
+server.listen(config.port, config.host, () => {
+  console.log(formatStartupSummary(config));
+});

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@poolzin/poolbot-office",
+  "version": "0.1.0",
+  "description": "Visual monitoring & management frontend for PoolBot Multi-Agent system",
+  "keywords": [
+    "ai-agents",
+    "dashboard",
+    "monitoring",
+    "multi-agent",
+    "office",
+    "poolbot",
+    "react",
+    "visualization",
+    "vite"
+  ],
+  "homepage": "https://github.com/poolbot/poolbot/tree/main/apps/office",
+  "bugs": {
+    "url": "https://github.com/poolbot/poolbot/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/poolbot/poolbot.git",
+    "directory": "apps/office"
+  },
+  "bin": {
+    "poolbot-office": "bin/poolbot-office.js"
+  },
+  "files": [
+    "dist/",
+    "bin/",
+    "LICENSE",
+    "README.md"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "check": "pnpm lint && pnpm format:check",
+    "dev": "vite",
+    "format": "oxfmt --write src/",
+    "format:check": "oxfmt --check src/",
+    "lint": "oxlint src/",
+    "preview": "vite preview",
+    "start": "node ./bin/poolbot-office.js",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest --passWithNoTests",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.5.0",
+    "@react-three/postprocessing": "^3.0.4",
+    "i18next": "^25.8.13",
+    "i18next-browser-languagedetector": "^8.2.1",
+    "immer": "^10.1.1",
+    "lucide-react": "^0.575.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-i18next": "^16.5.4",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.13.1",
+    "react-textarea-autosize": "^8.5.9",
+    "recharts": "^2.15.0",
+    "remark-gfm": "^4.0.1",
+    "three": "^0.183.1",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
+    "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@types/three": "^0.183.1",
+    "@vitejs/plugin-react": "^4.5.0",
+    "fake-indexeddb": "^6.2.5",
+    "jsdom": "^26.1.0",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^5.8.0",
+    "vite": "^6.3.0",
+    "vitest": "^3.1.0"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}