npm package: @poolzin/poolbot-office
Description: Visual monitoring & management frontend for PoolBot Multi-Agent system
Latest version: 0.2.0

# 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