Agent Dashboard

Ein selbst gehostetes Dashboard, auf dem KI-Programmieragenten berichten, was sie gerade tun, und Sie in Echtzeit zusehen und steuern können.

Agenten verbinden sich über MCP (Remote Streamable HTTP – keine lokale Installation), um Projekte zu erstellen, Status-Updates mit Bildern und Videos zu veröffentlichen, Aufgaben zu übernehmen, Ihre Antworten zu lesen und auf Ihre Genehmigung zu warten. Sie sehen im Browser einen Live-Feed, der sich ohne Neuladen aktualisiert.

Status: in Entwicklung. Das Design ist vollständig und committet; die Implementierung wird in den Issues verfolgt.

Was es tut

• Umfangreiche Status-Updates – Markdown, Bilder und Videos, die von Agenten während der Arbeit veröffentlicht werden.

• Projekte – Agenten erstellen sie; Sie benennen sie um, pinnen und archivieren sie.

• Live – alles wird über SSE an einen offenen Browser gestreamt, kein Polling, kein Neuladen.

• Präsenz – sehen Sie, welche Agenten gerade online sind.

• Steuerungsebene – weisen Sie Agenten Aufgaben zu, antworten Sie ihnen und machen Sie ihre Arbeit von einer Genehmigung abhängig, die Sie per Klick erteilen.

Related MCP server: Project Manager MCP

Umfang

Einzelbesitzer und selbst gehostet. Eine Instanz, ein Besitzer, kein Multi-Tenant-Betrieb und keine Benutzerkonten. Ausgelegt für einige Dutzend Agenten und einige Tausend Updates auf einem Rechner.

Design

Siehe docs/superpowers/specs/2026-08-25-agent-dashboard-design.md für die vollständige Architektur, das Datenmodell, die MCP-Toolschnittstelle und die Semantik der Genehmigungs-Gates.

Entwicklung

Erfordert Node 22+ und ffmpeg im PATH.

npm ci
cp .env.example .env   # then fill in the secrets
npm run dev

Komponenten- und E2E-Tests laden beim ersten Lauf einen Chromium-Build herunter, sodass CI und der standardmäßige npm test bewusst bei der reinen Node-Unit-Testsuite bleiben.

Layout

src/ spiegelt die Modultabelle in §2 des Designs wider. Jedes Verzeichnis enthält eine README, die seine eine Aufgabe und die einzigen Module beschreibt, die es importieren darf.

src/db/       SQLite connection, migrations, repositories
src/events/   typed in-process pub/sub + SSE ring buffer
src/media/    upload tokens, ingest, derivatives, disk layout
src/domain/   all business rules
src/mcp/      MCP Streamable HTTP tool surface
src/http/     SvelteKit routes (browser REST, SSE, /mcp mount, media, auth)
src/web/      Svelte components and client stores

SvelteKit ist für Routen auf src/http/routes und für $lib auf src/web ausgerichtet, sodass die eigenen Verzeichnisse des Frameworks mit den Modulgrenzen übereinstimmen, statt gegen sie zu arbeiten. Modulübergreifende Importe erfolgen über die Aliase $db, $events, $media, $domain, $mcp, $http und $web.

Konfiguration

Jede Einstellung ist eine Umgebungsvariable. Siehe .env.example für die vollständige Liste mit Standardwerten und dafür, wie jedes Secret erzeugt wird. src/config.ts validiert sie beim Start, sodass ein ungültiger Wert mit Angabe der betreffenden Variable fehlschlägt und nicht erst bei der ersten Anfrage.

Sichern Sie DATA_DIR: die SQLite-Datenbank plus eine rsync-Kopie von media/. Die sqlite3 .backup-Empfehlung des Designs benötigt das sqlite3-CLI, das ein anderes Paket als die better-sqlite3-Bibliothek ist, die diese App verwendet – der Packaging-Teil muss es entweder in das Docker-Image aufnehmen oder die Online-Sicherung stattdessen über die eigene db.backup()-Methode von better-sqlite3 durchführen.

Bereitstellung

Die App ist ein einzelner Node-Prozess. Führen Sie npm run build und dann node build aus; die App lauscht auf PORT (Standard: 8010).

Stellen Sie für TLS einen Reverse-Proxy davor. Zwei Dinge an diesem Proxy sind nicht optional.

Der Live-Feed darf nicht gepuffert werden

Das Dashboard streamt über Server-Sent Events unter /api/stream. Ein puffernder Proxy zerstört dies auf die denkbar verwirrendste Weise: Die Seite verbindet sich, meldet keinen Fehler und aktualisiert sich einfach nie. Caddy erkennt text/event-stream von selbst, aber geben Sie es explizit an, damit eine spätere Konfigurationsänderung keinen Rückschritt verursachen kann.

agents.wildware.dev {
	@stream path /api/stream
	reverse_proxy @stream 127.0.0.1:8010 {
		flush_interval -1
	}

	# Wide enough for slow video uploads and the 55s approval-gate holds.
	reverse_proxy 127.0.0.1:8010 {
		transport http {
			read_timeout 300s
		}
	}
}

Hinter nginx lautet das Äquivalent proxy_buffering off für diese Route, plus proxy_read_timeout 300s:

location /api/stream {
	proxy_pass http://127.0.0.1:8010;
	proxy_buffering off;
	proxy_cache off;
	proxy_read_timeout 300s;
	proxy_set_header Connection '';
	proxy_http_version 1.1;
}

Die Client-Adresse muss weitergeleitet werden

Setzen Sie ADDRESS_HEADER=X-Forwarded-For und XFF_DEPTH=1 (siehe .env.example). Ohne sie meldet der Node-Adapter den Proxy als Client jeder Anfrage, sodass der Login-Rate-Limiter nur noch einen gemeinsamen Bucket verwendet und fünf falsche Versuche eines beliebigen Fremden den Besitzer für fünfzehn Minuten aussperren. Die App weigert sich, in diesem Zustand zu starten, anstatt ein Dashboard auszuliefern, aus dem Sie ausgesperrt werden können.

Setzen Sie außerdem PUBLIC_BASE_URL auf die extern erreichbare Origin. create_upload übergibt Agenten eine daraus erstellte absolute Upload-URL, und ein Agent, der eine 127.0.0.1-URL erhält, kann nichts hochladen.

Backups

Zwei Dinge müssen aufbewahrt werden: die SQLite-Datei und data/media/. Führen Sie die Datenbanksicherung über die Online-Backup-Funktion von SQLite durch, anstatt die Datei zu kopieren, während der Prozess auf sie schreibt – der WAL-Modus bedeutet, dass ein einfaches cp einen inkonsistenten Zustand erfassen kann. Das sqlite3-CLI ist nicht erforderlich und wird nicht als installiert vorausgesetzt.

Lizenz

MIT