Click
Idle
Agent Status Chip
/187agent-uiA guarded transition table (idle→thinking→acting→error) drives a GSAP-spun ring — only listed transitions are reachable; the table rejects the rest.
187AGENT-UI skill
187AGENT-UI — The frontend cockpit for AI agents.
Builds the UI shell around a live agent: streaming-token rendering, human-in-the-loop override controls, and a typed pub/sub event bus — routing tweens, WebGL, and cleanup to the skills that already own them.
Agent UI lab
6 live agent-cockpit systems
Every 187AGENT-UI pattern as a real, working mechanism — click through a guarded state table, watch a token stream actually stop mid-flight, drag a real constraint region, and fire a real pub/sub event. Each honours prefers-reduced-motion and only runs while visible.
Agent state & streaming3
The status model and the render pipeline underneath it — a guarded state table, an rAF-batched token stream with a real mid-flight stop, and a confidence-to-color mapping.
Click
idle
Streaming Token Renderer
/187agent-uiTokens queue and flush once per animation frame instead of once per token — the Stop control is checked every loop iteration, so it lands within one token, not one batch.
Live
Confidence Heatmap
/187agent-uiPer-token confidence maps to HSL hue + lightness, not a raw RGB channel lerp — the ambiguous mid-confidence band stays readable instead of muddying out.
Human-in-the-loop3
The override layer — a drag-to-constrain region, a typed pub/sub event bus fanning out to disconnected UI, and a live throttle demo protecting the agent from a click flood.
Drag
drag to define the agent's allowed region
HITL Constraint Canvas
/187agent-uiA pointer-captured drag defines a region; release fires one REGION_CONSTRAINED event — dots outside the box drop out of the agent's reach.
Click
Transcript
Sidebar
Tab title
0 events published
Agent Event Bus
/187agent-uiOne publish(AGENT_THINKING) call fans out to three disconnected subscribers — no shared component tree, each just calls subscribe() and cleans up on unmount.
Click
0
raw clicks
0
reach the agent
Throttle vs. Raw Input
/187agent-uiMash the button — the raw counter fires every click; the throttled counter (140ms floor) is what actually reaches the agent, protecting it from a click flood.
Triggers
How to invoke 187AGENT-UI
| Trigger | |
|---|---|
| /187agent-ui | |
| 187AGENT-UI | |
| agent ui | |
| agentic frontend | |
| streaming token renderer | |
| human in the loop | |
| HITL controls | |
| agent event bus | |
| pub/sub agent state | |
| agent status chip |
Use cases
When to route to 187AGENT-UI
Render streamed LLM tokens into the DOM without jank
Build a drag-to-constrain override for an autonomous agent
Broadcast agent state to disconnected UI regions
Model an Idle/Thinking/Acting/Error status surface
Throttle or debounce rapid human commands to an agent
Output contract
What 187AGENT-UI delivers
- 1Agent-state model (transition table, not booleans)
- 2Render/batching strategy and frame budget
- 3Event-bus wiring (publishers, subscribers, cleanup)
- 4HITL contract (throttle/debounce values, interrupt path)
- 5Reduced-motion and keyboard fallback notes
- 6Next actions
Routing
When to hand off to another skill
| Route to | When |
|---|---|
| 187GSAP | a state transition needs an actual tween or timeline |
| 187VIZ | agent data needs a rendered 3D or canvas surface |
| 187MOTION | the pattern should become a reusable hook |
| 187WEBDEV-RESILIENCE | memory/cleanup goes beyond event-bus unsubscribe |
Templates
Artifacts 187AGENT-UI produces
| Template | When to use |
|---|---|
| agent-state-machine.md | An Idle/Thinking/Acting/Error status surface |
| streaming-token-renderer.md | Token-by-token streamed output |
| hitl-constraint-canvas.md | A drag-to-constrain override control |