Skip to content

README.md

Latest commit

 

History

History
167 lines (122 loc) · 6.53 KB

README.md

File metadata and controls

167 lines (122 loc) · 6.53 KB

ARCP Console

Web console for observing and controlling ARCP agent runtimes. It connects to an ARCP server over WebSocket to submit jobs, stream their events, and inspect agents and sessions — built with the ARCP TypeScript SDK. Any ARCP client SDK can drive the same server, so the console is language-agnostic.

CI Docker License

ARCP Console — Overview

Status — early scaffold. The Motif theme, the ARCP client wiring, and the themed component gallery are in place. The runtime/job/agent screens are stubs being built out against the SDK. See Roadmap.

Features

  • Overview of jobs, agents, and runtime health
  • Submit agent jobs and stream their events and results
  • Inspect agent, session, and lease state
  • Connects to any ARCP server over WebSocket (ws(s)://)
  • Language-agnostic: the server accepts clients from any ARCP SDK
  • A themed, browsable gallery of every Nuxt UI component (see below)
  • Light/dark, Material Symbols icons, the Motif (UniFi) palette throughout

Quick start

The console is a Nuxt app that talks to an ARCP server. Point it at your server and run it:

cp .env.example .env          # set ARCP_SERVER_URL=ws(s)://<your-arcp-server>
docker compose up --build
  • Console: http://localhost:3000
  • It connects to the ARCP server at ARCP_SERVER_URL (default http://localhost:8080)

docker-compose.yml:

services:
  console:
    build: .
    ports:
      - "3000:3000"   # console UI
    environment:
      NUXT_PUBLIC_ARCP_SERVER_URL: ${ARCP_SERVER_URL:-http://localhost:8080}

Run locally

Requires Node 22+ and pnpm.

pnpm install
pnpm dev        # http://localhost:3000 (hot reload)

Other scripts:

pnpm build          # production build
pnpm test           # vitest (ARCP client unit tests)
pnpm storybook      # Storybook at http://localhost:6006

Configuration

Set via environment variables. Nuxt maps NUXT_PUBLIC_* onto runtime config.

Variable Default Description
NUXT_PUBLIC_ARCP_SERVER_URL http://localhost:8080 ARCP server the console connects to
PORT 3000 HTTP port for the console

docker-compose.yml maps the friendlier ARCP_SERVER_URL onto NUXT_PUBLIC_ARCP_SERVER_URL.

Connecting clients

The console is itself an ARCP client. It builds a session with the @agentruntimecontrolprotocol/sdk and connects over a WebSocket transport:

import { ARCPClient } from "@agentruntimecontrolprotocol/sdk";
import { WebSocketTransport } from "@agentruntimecontrolprotocol/sdk/transport";

const client = new ARCPClient({
  client: { name: "arcp-console", version: "0.1.0" },
  authScheme: "bearer",
  token,
});

const transport = await WebSocketTransport.connect("ws://localhost:8080");
await client.connect(transport);
const handle = await client.submit({ agent: "summariser", input: {} });

The same server is reachable from any SDK — TypeScript, Python, Go, Rust, Java, Kotlin, Swift, Ruby, PHP, C#, F#. Method names follow each SDK; see the SDK docs.

Component gallery

A themed, searchable gallery of every Nuxt UI component lives at /components (in the sidebar). Each component has a showcase of its colors, variants, sizes, and states in the Motif theme, with ARCP-flavored examples — handy for designing console screens.

Component gallery

Storybook is installed (pnpm storybook) for reference, but its preview build does not apply Nuxt UI v4's Tailwind-v4 theme (components render unstyled there — a known upstream gap). The in-app gallery renders everything fully themed and is the source of truth for design.

Theme — Motif

Reconstructed from the UniFi Network design system. Tailwind color scales live in app/assets/css/main.css and map onto Nuxt UI's color aliases in app/theme/motif.ui.ts:

Alias Scale Hue
primary motif-blue 214 (UniFi blue)
neutral motif-gray 214 / 8% (cool gray)
success motif-green 138
info / secondary motif-aqua 198
warning motif-amber 37
error motif-red 358

Body type is Inter; corner radius is 4px (UniFi default).

Building the image

docker build -t arcp-console .
docker run -p 3000:3000 -e NUXT_PUBLIC_ARCP_SERVER_URL=ws://host.docker.internal:8080 arcp-console

Roadmap

  • Build out the Overview / Jobs / Agents / Settings screens against the SDK
  • Live multi-runtime view and per-runtime event/log/telemetry streams
  • Console auth (CONSOLE_TOKEN) and optional persistence for event/command history
  • Bundle the console + an ARCP server into a single image for one-command deploys

Stack

Nuxt 4 · Nuxt UI v4 · Tailwind CSS v4 · @nuxt/icon (Material Symbols) · @agentruntimecontrolprotocol/sdk

License

Apache-2.0