pixel-ops is a visualisation layer. It does not care what your agents actually do — it only needs status events mapped from your real data. Below are adapter skeletons for common use cases, showing how to translate your domain's concepts into pixel-ops events.
Use case: Monitoring a fleet of LLM agents — orchestrators, worker chains, CI/CD bots, self-improving loops.
Map your agents' states to pixel-ops statuses:
| Your state | pixel-ops status |
|---|---|
| Running inference | working |
| Waiting for input | idle |
| Tool call failed | error |
| Inference complete | working → idle cycle |
| Agent disabled | disabled |
import { PixelOpsAdapter } from 'pixel-ops';
interface LlmAgentState {
id: string;
name: string;
phase: 'thinking' | 'calling_tool' | 'waiting' | 'errored' | 'offline';
currentTask?: string;
tokenUsage?: number;
successCount: number;
failureCount: number;
}
export class LlmFleetAdapter extends PixelOpsAdapter {
private ws: WebSocket;
constructor(private readonly wsUrl: string) {
super();
}
connect(): void {
this.ws = new WebSocket(this.wsUrl);
this.ws.addEventListener('message', (e) => {
const state: LlmAgentState = JSON.parse(e.data);
this.emit('agent:status', {
id: state.id,
status: state.phase === 'errored' ? 'error'
: state.phase === 'offline' ? 'disabled'
: state.phase === 'waiting' ? 'idle'
: 'working',
task: state.currentTask,
});
// Track token spend as economy transactions
if (state.tokenUsage) {
this.emit('economy:transaction', {
amount: state.tokenUsage * 0.001, // convert to credits
type: 'expense',
reason: `${state.name} inference`,
});
}
});
}
disconnect(): void {
this.ws.close();
}
}Recommended config:
agents: [
{ id: 'orchestrator', name: 'Planner', sprite: 'orchestrator' },
{ id: 'worker-1', name: 'Executor', sprite: 'worker' },
{ id: 'worker-2', name: 'Retrieval', sprite: 'memory' },
{ id: 'reviewer', name: 'Critic', sprite: 'review' },
]Recommended systems: EconomySystem (token costs), ReputationSystem (task quality), NeedsSystem + MoodSystem (agent fatigue metaphor), AwardsSystem (weekly best agent).
Use case: Visualising a microservices deployment pipeline — CI stages, deployment jobs, service health checks.
Map CI/CD concepts:
| CI concept | pixel-ops mapping |
|---|---|
| Pipeline running | agent status working, task = stage name |
| Pipeline passed | agent status idle |
| Pipeline failed | agent status error |
| Service health check | notification event |
| Deployment completed | economy:transaction income |
import { PixelOpsAdapter } from 'pixel-ops';
interface PipelineEvent {
pipelineId: string;
service: string;
stage: string;
status: 'running' | 'passed' | 'failed' | 'cancelled';
durationMs?: number;
}
export class CiCdAdapter extends PixelOpsAdapter {
private pollInterval: ReturnType<typeof setInterval>;
constructor(private readonly apiBase: string) {
super();
}
connect(): void {
this.poll();
this.pollInterval = setInterval(() => this.poll(), 10_000);
}
disconnect(): void {
clearInterval(this.pollInterval);
}
private async poll(): Promise<void> {
const pipelines: PipelineEvent[] = await fetch(`${this.apiBase}/pipelines/active`)
.then(r => r.json())
.catch(() => []);
for (const p of pipelines) {
this.emit('agent:status', {
id: p.pipelineId,
status: p.status === 'running' ? 'working'
: p.status === 'failed' ? 'error'
: 'idle',
task: `${p.stage} — ${p.service}`,
});
if (p.status === 'passed') {
this.emit('notification', {
level: 'success',
message: `${p.service} deployed successfully`,
agentId: p.pipelineId,
});
this.emit('economy:transaction', {
amount: 10,
type: 'income',
reason: `${p.service} deploy`,
});
}
if (p.status === 'failed') {
this.emit('notification', {
level: 'error',
message: `${p.service} failed at ${p.stage}`,
agentId: p.pipelineId,
});
}
}
}
}Recommended agent sprites: Use worker for build jobs, orchestrator for deploy coordinators, review for test runners, benchmark for performance test jobs.
Use case: Monitoring game server instances — player counts, server health, region availability.
Map server states:
| Server state | pixel-ops mapping |
|---|---|
| Server active, players online | working, task = {n} players |
| Server idle (empty) | idle |
| Server unreachable | error |
| Server in maintenance | disabled |
| Region offline | sleeping |
import { PixelOpsAdapter } from 'pixel-ops';
interface ServerStatus {
id: string;
region: string;
playerCount: number;
maxPlayers: number;
healthy: boolean;
maintenance: boolean;
}
export class GameServerAdapter extends PixelOpsAdapter {
private interval: ReturnType<typeof setInterval>;
constructor(private readonly statusApiUrl: string) {
super();
}
connect(): void {
this.fetch();
this.interval = setInterval(() => this.fetch(), 30_000);
}
disconnect(): void {
clearInterval(this.interval);
}
private async fetch(): Promise<void> {
const servers: ServerStatus[] = await fetch(this.statusApiUrl)
.then(r => r.json())
.catch(() => []);
for (const server of servers) {
const status = server.maintenance ? 'disabled'
: !server.healthy ? 'error'
: server.playerCount > 0 ? 'working'
: 'idle';
this.emit('agent:status', {
id: server.id,
status,
task: server.playerCount > 0
? `${server.playerCount}/${server.maxPlayers} players — ${server.region}`
: undefined,
});
// Track player counts as metrics
this.emit('metric', {
key: `players_${server.id}`,
value: server.playerCount,
});
}
}
}Room suggestion: Assign each geographic region to a different room using defaultRoom so you can see all EU servers in dev-office, NA servers in command-center, etc.
Use case: Visualising physical device status — sensors, edge nodes, manufacturing equipment.
Map device states:
| Device state | pixel-ops mapping |
|---|---|
| Transmitting data | working |
| Standby / low power | idle |
| Fault detected | error |
| Powered off | disabled |
| Unreachable | sleeping |
import { PixelOpsAdapter } from 'pixel-ops';
interface DeviceTelemetry {
deviceId: string;
name: string;
state: 'online' | 'standby' | 'fault' | 'offline';
lastReadingAt: string;
metrics: { temperature?: number; humidity?: number; batteryPct?: number };
}
export class IoTAdapter extends PixelOpsAdapter {
private eventSource: EventSource;
constructor(private readonly streamUrl: string) {
super();
}
connect(): void {
this.eventSource = new EventSource(this.streamUrl);
this.eventSource.addEventListener('telemetry', (e: MessageEvent) => {
const device: DeviceTelemetry = JSON.parse(e.data);
this.emit('agent:status', {
id: device.deviceId,
status: device.state === 'online' ? 'working'
: device.state === 'standby' ? 'idle'
: device.state === 'fault' ? 'error'
: 'disabled',
task: device.metrics.temperature != null
? `${device.metrics.temperature.toFixed(1)}°C`
: undefined,
});
if (device.metrics.batteryPct != null && device.metrics.batteryPct < 15) {
this.emit('notification', {
level: 'warning',
message: `${device.name} battery at ${device.metrics.batteryPct}%`,
agentId: device.deviceId,
});
}
});
}
disconnect(): void {
this.eventSource.close();
}
}Room suggestion: Group devices by physical location using defaultRoom. Use crystal-observatory for sensors, vault for storage nodes, satellite-tower for communication gateways.
Use case: Visualising developer activity — open PRs, review assignments, deployment ownership.
Map developer actions:
| Action | pixel-ops mapping |
|---|---|
| Authoring a PR | working, task = PR title |
| PR under review | idle (author waiting) |
| Reviewing someone's PR | working, task = "Reviewing: ..." |
| PR merged | celebrating briefly, then idle |
| CI failing on their PR | error |
| On holiday / OOO | sleeping |
import { PixelOpsAdapter } from 'pixel-ops';
interface PullRequest {
id: string;
title: string;
authorId: string;
reviewerIds: string[];
state: 'open' | 'merged' | 'closed';
ciStatus: 'passing' | 'failing' | 'pending';
}
export class TeamActivityAdapter extends PixelOpsAdapter {
private interval: ReturnType<typeof setInterval>;
constructor(
private readonly githubApiUrl: string,
private readonly token: string,
) {
super();
}
connect(): void {
this.sync();
this.interval = setInterval(() => this.sync(), 60_000);
}
disconnect(): void {
clearInterval(this.interval);
}
private async sync(): Promise<void> {
const prs: PullRequest[] = await fetch(`${this.githubApiUrl}/pulls`, {
headers: { Authorization: `Bearer ${this.token}` },
}).then(r => r.json()).catch(() => []);
const authorStatuses = new Map<string, { status: string; task?: string }>();
for (const pr of prs) {
if (pr.state === 'open') {
// Author is working if CI is pending/failing, idle if waiting for review
const authorStatus = pr.ciStatus === 'failing' ? 'error'
: pr.reviewerIds.length > 0 ? 'idle'
: 'working';
authorStatuses.set(pr.authorId, {
status: authorStatus,
task: pr.title.slice(0, 40),
});
// Reviewers are working on review
for (const reviewerId of pr.reviewerIds) {
authorStatuses.set(reviewerId, {
status: 'working',
task: `Reviewing: ${pr.title.slice(0, 30)}`,
});
}
}
if (pr.state === 'merged') {
this.emit('notification', {
level: 'success',
message: `PR merged: ${pr.title}`,
agentId: pr.authorId,
});
this.emit('economy:transaction', {
amount: 25,
type: 'income',
reason: 'PR merged',
});
}
}
for (const [agentId, info] of authorStatuses) {
this.emit('agent:status', {
id: agentId,
status: info.status as any,
task: info.task,
});
}
}
}Recommended setup: One agent per developer. Use review sprite for developers who primarily do code reviews, worker for feature developers, orchestrator for tech leads.
Recommended systems: ReputationSystem (team success rate), AwardsSystem (top contributor each week), NeedsSystem (models code review fatigue).