Skip to content

feat(loops): web UI for sequential agent loops (#1106)#1111

Merged
vybe merged 1 commit into
devfrom
feature/1106-loops-ui
Jun 9, 2026
Merged

feat(loops): web UI for sequential agent loops (#1106)#1111
vybe merged 1 commit into
devfrom
feature/1106-loops-ui

Conversation

@vybe

@vybe vybe commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Adds a Loops tab on the Agent Detail page — Phase 2 of feat: run_agent_loop MCP tool — sequential bounded task execution with configurable stop conditions #740, completing the web UI for sequential agent loops.
  • Frontend-only slice over the existing dev backend (routers/loops.py, services/loop_service.py, MCP loops.ts). No backend changes.
  • Covers all four acceptance criteria: Start (form), List (status / runs_completed/max_runs / stop_reason), Detail + live progress (per-run table, last response, WS-driven), Stop (cooperative stoppingstopped).

Changes

  • src/frontend/src/stores/loops.js — agent-scoped Pinia store on the shared api.js client (Invariant security: Fix token logging and add HTML reports to gitignore #7). Filters fleet-wide loop_run_completed/loop_completed WS events by the mounted agent, targeted-refreshes only the affected loop, and runs a 12s backstop poll while any loop is queued/running to recover a missed terminal event.
  • src/frontend/src/components/LoopsPanel.vue — Run-loop form (message template w/ {{run}}+{{previous_response}} helper, max_runs, stop_signal, delay_seconds, timeout_per_run, ModelSelector, allowed_tools picker), loop list, expandable per-run table, last response via DOMPurify renderMarkdown, Stop control.
  • src/frontend/src/views/AgentDetail.vue — Loops tab between Schedules and Playbooks.
  • src/frontend/src/utils/websocket.js — route loop events to the store in the data.type-keyed branch.
  • src/frontend/e2e/loops-panel.spec.js + architecture.md / run-agent-loop.md docs.

Test Plan

  • Production vite build passes (no errors)
  • Live verification on local stack: Loops tab renders, Run-loop form submits, loop row appears and reaches a terminal status via the live-update path, expanded detail renders the per-run table + loop error. (The test loop showed failed only because the local Anthropic account had no credit balance — the loop machinery & UI handled it correctly.)
  • e2e spec added (@interactive — needs a live stack + running agent)
  • CI: frontend e2e (gated by ui label)

Design decisions (from /autoplan)

  • Uses the api.js client (Invariant security: Fix token logging and add HTML reports to gitignore #7 + the issue AC) rather than the raw-axios pattern some sibling stores drifted to — gains the 401→/login interceptor for free.
  • WS events are broadcast fleet-wide; the store filters by the mounted agent and a 12s poll backstops a dropped terminal event.

Closes #1106

🤖 Generated with Claude Code

Phase 2 of #740: adds a Loops tab on the Agent Detail page over the
existing dev backend (routers/loops.py, loop_service.py) — no backend
changes.

- stores/loops.js: agent-scoped Pinia store on the shared api.js client
  (Invariant #7). Filters fleet-wide loop_run_completed/loop_completed WS
  events by the mounted agent, targeted-refreshes only the affected loop,
  and runs a 12s backstop poll while any loop is queued/running to recover
  a missed terminal event.
- components/LoopsPanel.vue: Run-loop form (message template w/ {{run}} +
  {{previous_response}} helper, max_runs, stop_signal, delay, timeout,
  ModelSelector, allowed_tools), loop list with status/runs/stop_reason,
  expandable per-run table, last response via DOMPurify renderMarkdown,
  cooperative Stop control.
- AgentDetail.vue: Loops tab between Schedules and Playbooks.
- websocket.js: route loop events to the store in the type-keyed branch.
- e2e/loops-panel.spec.js + architecture/feature-flow docs.

Verified live: tab renders, form submits, loop row reaches terminal state
via the live-update path, expanded detail renders the per-run table.

Closes #1106

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@vybe vybe added the ui PR touches the frontend UI — triggers Playwright e2e tests label Jun 9, 2026
@vybe
vybe merged commit f41d784 into dev Jun 9, 2026
15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ui PR touches the frontend UI — triggers Playwright e2e tests

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant