Building SafeClaw's Dashboard: A PWA for Agent Safety
Building SafeClaw's Dashboard: A PWA for Agent Safety
SafeClaw's browser dashboard is how most users interact with agent safety. It is where you set up your provider, run tasks, approve or reject actions, analyze costs, edit policies, and diagnose issues. We built it as a progressive web app served from localhost -- no React, no build step, no bundler. This post covers the design decisions behind it.
Why a Browser Dashboard
Our first version of SafeClaw was CLI-only. You ran tasks with safeclaw run, approved actions with safeclaw approvals approve , and viewed the audit log with safeclaw audit. It worked, but the workflow was awkward. You needed a terminal open, had to copy receipt IDs, and could not easily visualize what your agent was doing in real-time.
The browser dashboard solved this by providing a visual interface that updates live as the agent works. But we had constraints:
127.0.0.1:7700. It never exposes a port to the network. Your agent's activity stream stays on your machine.The Technology Stack
The dashboard is vanilla HTML, CSS, and JavaScript. The server is node:http with a custom router. Pages are rendered client-side from data fetched via REST APIs. Live updates come through Server-Sent Events (SSE).
We chose SSE over WebSockets because SSE is simpler, works over standard HTTP, requires no handshake protocol, and auto-reconnects natively in browsers. For our use case -- streaming agent output and approval notifications from server to client -- SSE is the right tool. We do not need bidirectional streaming.
When the agent runs a task, the server emits SSE events for each chunk of agent output, each tool call, each approval request, and each decision. The dashboard renders these in real-time as chat-style bubbles with markdown formatting.
Swipe Approvals
The approval center is the most time-sensitive part of the dashboard. When an agent requests an action that requires approval, the agent pauses and waits. Every second of delay is a second the agent is blocked.
On desktop, approval cards have "Approve" and "Reject" buttons. On mobile, we added swipe gestures: swipe right to approve, swipe left to reject. The implementation uses touch event handlers (touchstart, touchmove, touchend) that track the horizontal delta and trigger the action when the swipe distance exceeds a threshold.
We also integrated the browser Notifications API. When the dashboard tab is not focused, a system notification appears for pending approvals. This means you can be working in another tab or application and still get alerted immediately.
For teams that need notifications outside the browser entirely, SafeClaw supports SMS via Twilio and webhooks to Slack, Discord, or any HTTP endpoint. These are configured in the Settings tab of the dashboard.
The PWA Experience
SafeClaw's dashboard is installable as a PWA. It includes a web manifest with the app name, icons, and display mode, plus a service worker that caches the app shell (HTML, CSS, JavaScript, icons) for offline access.
The service worker uses a cache-first strategy for static assets and a network-first strategy for API calls. This means the dashboard loads instantly even on slow connections, and the UI remains functional (showing cached data) even if the server restarts briefly.
We bump the service worker cache version with every release. The cache version is currently v1.0.0-beta.12. When you update SafeClaw, the old cache is automatically invalidated and the new assets are fetched.
Dashboard Tabs
The dashboard is organized into tabs that cover the full agent safety workflow:
Setup Wizard. Provider selection (Claude or OpenAI), API key configuration, Authensor token provisioning. First-time users go through this flow automatically. Task Runner. Enter a task, pick a model, optionally enable container mode. The agent runs with live SSE streaming of its conversation, tool calls, and decisions. Follow-up messages continue the task context. Approvals. Pending actions with risk signal badges, action type, resource, and approve/reject controls. Cards auto-refresh every 5 seconds and via SSE push. Analytics. Cost tracking (daily, weekly, monthly), approval metrics (allow/deny/approval rates), tool usage breakdown, and MCP server analytics. Export to CSV or JSON. Policy Editor. Visual CRUD for policy rules. Template picker for common patterns. Policy versioning with rollback. Simulation mode to test rules without affecting the live agent. Settings. Timeouts, retention, offline cache, budget controls, webhook configuration, SMS setup. Claw Clinic. Diagnostic check-ups: control plane connectivity, API key validity, policy integrity, audit chain verification, container runtime availability, and more.Security in the Dashboard
The dashboard is served on localhost, but we still enforce security headers and protections:
- CSP (Content-Security-Policy): Restricts script sources and prevents XSS.
- CSRF protection: Every POST, PUT, and DELETE request requires an
X-Requested-With: SafeClawheader. Requests without it are rejected with 403. - Secrets redaction: API keys in agent SSE output are redacted before reaching the browser. The agent might output text containing
sk-ant-...; the SSE stream deliverssk-ant-[REDACTED]. - X-Frame-Options: Prevents clickjacking by blocking iframe embedding.
No Build Step
The entire dashboard is pre-written HTML, CSS, and JavaScript in the ui/ directory. There is no compilation, no transpilation, no tree-shaking, no minification pass. You can open the files, read them, and modify them.
This is intentional. SafeClaw's dashboard is not a complex web application. It is a control panel for agent safety. Simplicity is a feature. When you need to understand what the dashboard does or how it communicates with the server, you read the source directly.
Try the dashboard:
``bash
npx @authensor/safeclaw
`
It opens automatically in your default browser. If you are on mobile, navigate to
http://localhost:7700` and add it to your home screen.