AI Operations Dashboard

Perceptris — Mission Control Interface

Live: https://ai.perceptris.io
Status: Development — Production deployment in progress

---

Overview

Webbasierte Leitstelle zur Überwachung und Steuerung des Perceptris-Agentensystems. Das Dashboard bietet:

• Agenten-Management — Status, Logs, Memory, Steuerung (Start/Stop/Restart)
• Jobs & Schedules — Cronjobs, Kalenderansicht, History
• Security Center — Whitelist/Blacklist, Prompt-Injection-Erkennung, Approval-Queue
• Kostenübersicht — API-Kosten nach Modell, Agent, Zeitraum
• Logs / Audit Trail — Vollständiger Event-Log mit Filterung
• Storage-Monitoring — Dateisystem, Datenquellen
• Admin — System-Konfiguration, User-Management

Design

Dunkles Mission-Control-Interface im Perceptris-Look (Farbwelt: #0A0E14, #185F7C).

---

Tech Stack

Layer	Technology
Frontend	React 18 + Vite
Routing	React Router v6
Data Fetching	TanStack Query
Styling	CSS Modules
Icons	Font Awesome 6
Backend	Node.js API Server (Express-style)
Data Source	OpenClaw CLI bridge

---

Architecture

Browser ──► Frontend (:3000 / production build)
                  │
                  ▼
            API Server (:3001)
                  │
                  ▼
            OpenClaw CLI
                  │
                  ▼
            OpenClaw Gateway

API Server (server/api-server.js)

Bridget OpenClaw CLI Commands → REST API:

GET /api/agents           → openclaw agents list
GET /api/jobs             → openclaw cron list
GET /api/system/health    → openclaw gateway call health
GET /api/logs             → cron history
GET /api/costs/summary    → openclaw gateway usage-cost

Production Proxy (server/proxy-server.cjs)

Single-process Production Server:

• Serves React build (dist/)
• Proxies /api/* to :3001

---

Project Structure

ai-dashboard/
├── src/
│   ├── api/
│   │   ├── index.js          # API export (realApi)
│   │   ├── realApi.js        # Real API client + DEV_MODE
│   │   ├── mockApi.js       # Mock fallback
│   │   └── mockData.js      # Realistic demo data
│   ├── context/
│   │   └── AppContext.jsx   # Auth state + DEV_MODE_AUTH
│   ├── components/           # Layout, UI components
│   ├── pages/               # Dashboard, Agents, Jobs, Security...
│   ├── hooks/               # Data fetching hooks
│   └── styles/              # Global CSS, variables
├── server/
│   ├── api-server.js        # OpenClaw CLI bridge (dev)
│   └── proxy-server.cjs     # Production server
├── public/
├── dist/                    # Production build
└── package.json

---

Getting Started

Development

# Backend API (Terminal 1)
node server/api-server.js

# Frontend Dev Server (Terminal 2)
npm run dev

Production

# Build
npm run build

# Start combined server
node server/proxy-server.cjs

---

Configuration

Environment

Variable	Description	Default
PORT	Server port	3000
API_TARGET	Backend API URL	http://localhost:3001

Auth Modes

DEV_MODE = false in src/api/realApi.js + src/context/AppContext.jsx:

• Frontend calls http://localhost:3001/api/auth/login
• Backend needs real authentication

DEV_MODE = true (current state):

• Any credentials accepted
• Dev user: dev@perceptris.io
• For development without backend

---

Docker Deployment

The intended production setup is a separate Docker container (independent from OpenClaw):

FROM node:20-alpine
WORKDIR /app
COPY dist ./dist
COPY server/proxy-server.cjs ./
EXPOSE 3000
CMD ["node", "proxy-server.cjs"]

The API server (api-server.js) needs to connect to the OpenClaw host via shared network or volume-mounted socket.

---

Known Issues

• Real authentication not implemented — DEV_MODE bypass active
• WebSocket support not yet integrated
• 2FA not implemented
• Session persistence needs improvement

---

License

Proprietary — Perceptris Solutions GmbH