# Web UI / Control Panel

GoClaw has a static HTML/JS control panel whose navigation tabs are organized into five groups. It features a glassmorphism dark-mode design, talks to the gateway over REST and Server-Sent Events (SSE), and authenticates with the gateway token.

## Architecture

```mermaid
flowchart TD
    subgraph UI["GoClaw Control Panel (v2)"]
        CORE["<b>Static HTML + Vanilla JS (no build step)</b><br/>Libraries: marked.js, highlight.js, Lucide, DOMPurify; Mermaid &amp; Chart.js from CDN<br/>Transport: REST API + SSE"]

        subgraph TABS["Navigation Tabs (5 Groups)"]
            direction LR
            G1["<b>Overview</b>"]
            G2["<b>Agents</b>"]
            G3["<b>Automation</b>"]
            G4["<b>Gateway</b>"]
            G5["<b>Configure</b>"]
        end

        CORE --> TABS
    end
```

## Navigation Groups

### 1. Overview
| Tab | Icon | Purpose |
|---|---|---|
| **Dashboard** | `layout-dashboard` | System health, provider status, and channel connectivity grid, refreshed every 30 seconds. |
| **Chat** | `message-square` | Chat with the default agent over `POST /api/chat`, the reply streamed as SSE, with markdown, attachments and named sessions. |
| **Sessions** | `messages-square` | Active conversation list with full history inspection and token usage auditing. |

### 2. Agents
| Tab | Icon | Purpose |
|---|---|---|
| **Agents** | `bot` | Multi-agent management, routing bindings, workspace isolation settings, and each agent's subagents. |
| **Skills** | `puzzle` | Skills inventory with security scanner integration and allow/deny list control. |
| **Instructions** | `book-open` | What each agent is told to follow, in prompt order: core instruction, bootstrap files, conditional instructions and critical constraints; with a preview of a run's prompt and tools. |
| **Tools** | `wrench` | Read-only list of the registered tools, grouped by category, with each tool's details. |
| **Hooks** | `zap` | Admin rules on the agent's tool calls and on the messages people send it (block, notify, webhook). |
| **MCP** | `plug` | MCP servers the agent can call: add, test, call a tool, save, delete. |
| **Plugins** | `package` | Install plugins (subagents, instructions, skills, hooks and MCP servers in one package), turn them on per agent, approve their hooks and MCP servers, export an agent's parts as a plugin. |
| **Integrations** | `blocks` | Connections to external services the tools use (GitLab, SonarQube, Grafana, Graylog, NetBox, Uptrace, Zabbix, Wazuh, datasources): add, test, save. Stored plain-text credentials stay where they are unless the admin moves them to the vault; a definition an `$include` file holds is shown read-only. |
| **RAG Tester** | `scan-search` | Visual debugger for the keyword-overlap RAG tool selection engine. |
| **Memory** | `brain` | Unified memory management (Search, Memory.md, SQLite, Knowledge Graph). |
| **Wiki** | `book-open` | The organization's knowledge wiki: pages people and the agent edit together, with history; distills the agent's learned notes into pages. |

### 3. Automation
| Tab | Icon | Purpose |
|---|---|---|
| **Cron** | `clock` | Persistent scheduler for autonomous SOPs and notification tasks. |
| **SOPs** | `git-branch` | SOP list, editor, runs and executions. The edit form saves only the fields it shows: saving a SOP there drops its step timeouts, prerequisites, `virtual_level` and `review_due_date`. There is no control for approving a step that waits for approval: use `POST /api/sop/approve`. |
| **Webhooks** | `webhook` | Dynamic endpoint routing for GitLab, Zabbix, and external system triggers. |

### 4. Gateway
| Tab | Icon | Purpose |
|---|---|---|
| **Gateway** | `server` | Ingress security (ngrok, IP allowlists), tunnel status, and public URL management. |
| **Pairing** | `link` | Cross-platform user identity linking for Discord and MS Teams. |
| **Usage** | `bar-chart-3` | LLM token usage by agent, channel, provider and model, by day and hour, and recent requests. It shows tokens, not costs. |
| **Traces** | `activity` | LangSmith-style execution traces with tool-level timing and LLM prompt/response logs. |
| **Logs** | `scroll-text` | Real-time system logs via Server-Sent Events (SSE) with error highlighting. |

### 5. Configure
| Tab | Icon | Purpose |
|---|---|---|
| **Config** | `sliders-horizontal` | Dynamic `config.yaml` management with hot-reload validation. |
| **Secrets** | `key-round` | AES-encrypted vault for API keys, DB credentials, and auth profiles. |
| **Doctor** | `stethoscope` | Comprehensive system diagnostic suite for troubleshooting dependencies. |
| **System** | `cpu` | Canvas file browser, system info, gateway hook events, Go extensions, and the SBOM. |

---

## Key Features

| # | Feature | Description | Status |
|---|---------|-------------|--------|
| 11.1 | **Real-time Monitoring** | Chat replies, logs and Doctor results stream over SSE; the Dashboard refreshes every 30 seconds, and the Traces view polls a running trace. | Done |
| 11.2 | **SOP Orchestrator** | Visual interface for running SOPs and monitoring V2 state-machine executions. Step approval is not on the page (`POST /api/sop/approve`). | Done |
| 11.3 | **Trace Observability** | Deep inspection of agent thinking loops, including nested subagent calls and tool timing. | Done |
| 11.4 | **Memory Explorer** | Hybrid search interface + Knowledge Graph visualization and parity sync tools. | Done |
| 11.5 | **Zero-Build Deployment** | The UI is embedded in the Go binary as static assets; no npm/webpack required. Mermaid and Chart.js are loaded from the jsDelivr CDN, so diagrams and charts need the browser to reach it. | Done |