Web Dashboard¶
The web dashboard is the primary interface for Craft Easy Agentic. It runs in your browser and updates in real time via WebSocket.
Layout¶
┌─────────────────────────────────────────────────────────────┐
│ Topbar: project name · status pill · runner controls · icons │
│ project switcher chip-row │
├──────────────────────────────────────────────────────────────┤
│ KPI bar: Klara · Igång · Kö · Kvar · Wave · Cost · Tempo │
├──────────────────────────────────────────────────────────────┤
│ Velocity chart (completions per day, scrollable history) │
├─────────────────────────────┬────────────────────────────────┤
│ Active Tasks panel │ Live Log / Task Log panel │
│ (progress bars, last line) │ (filterable event stream) │
├─────────────────────────────┴────────────────────────────────┤
│ Queued ribbon: task chips (click to scroll into view) │
└──────────────────────────────────────────────────────────────┘
Topbar¶
Status pill¶
The status pill reflects the runner's current lifecycle state:
| Pill | Color | Meaning |
|---|---|---|
| aktiv | Green pulse | Runner is running and launching tasks |
| pausad · reason · countdown | Amber | Paused; no new tasks started; running tasks continue |
| stoppar · N pågår | Amber pulse | Graceful stop in progress; waiting for N tasks to finish |
| orphan | Red pulse | Active lock files exist but the runner process is not detected |
| inaktiv | Grey | No runner running |
Runner controls¶
Buttons appear and disappear based on the current lifecycle state:
| State | Buttons shown |
|---|---|
| Inactive | Start |
| Running | Pause, Stoppa |
| Paused | Resume |
| Stopping | Ångra (cancel graceful stop) |
| Stale state | Cleanup |
| Runner active or orphaned | Force (double-click to confirm) |
See Runner Lifecycle for full semantics.
Icons¶
| Icon | Function |
|---|---|
| Folder tree | Open the read-only file browser |
| Git branch | Open the Git panel — multi-repo status, pull/push |
| Memory chip | System memory usage; clicking opens a tooltip with cgroup details |
| Wrench | Open the Tools & Auth panel — diagnose gh/az/kubectl etc. |
| Message square | Open the embedded Claude chat |
| Settings gear | Open settings (parallel-slot override, force-start toggle, etc.) |
Each icon shows a small status dot when something needs attention — yellow on the Git icon when any repo is dirty / behind, red on the wrench when host integration is missing.
KPI bar¶
| KPI | Description |
|---|---|
| Klara | Completed tasks this session (marked [x] in BACKLOG.md) |
| Igång | Active tasks (lock files present) |
| Kö | Tasks ready to run (deps satisfied, not locked) |
| Kvar | Total remaining uncompleted tasks |
| Wave | Current dependency wave number |
| Cost | Session API cost in USD (from tasks/.tasks-state/cost.log) |
| Tempo | Completed tasks per hour (last 4 hours); ETA to backlog completion |
Velocity chart¶
A bar chart of task completions grouped by calendar day, scrollable horizontally for historical context. Each bar shows the count; hover for the exact date and number. The current day bar is highlighted.
Active tasks panel¶
Each active task shows:
- Task ID — links to the task log
- Progress bar — estimated completion percentage (0–95%), derived from:
- Named quality-gate markers in the log (
build ✓,tests ✓, etc.) — authoritative when present tool_useevent count from the.jsonlstream — fills in the long stretches between gates- Duration — elapsed time since task start
- Last log line — most recent output from the task agent
- Phase indicator — current workflow phase (0–7) if detectable
Click a task row to open the task log modal — a full-screen scrollable view of the agent's output for that task.
Idle detection¶
If a task produces no log output for 5 minutes, it is highlighted in amber as IDLE. This usually means the agent is waiting on a subprocess (tests, a large build) rather than stuck. At 10+ minutes IDLE, the entry turns red.
Live log panel¶
A real-time stream of runner events from tasks/.tasks-state/backlog-runner.log. Events include:
| Event | Color |
|---|---|
[TASK-ID] STARTED |
Blue |
[TASK-ID] COMPLETED |
Green |
[TASK-ID] INCOMPLETE |
Red |
[TASK-ID] RATE_LIMIT |
Amber |
Stop pending: N tasks pågår… |
Amber |
| Wave starts / runner startup | Grey |
Use the filter input to search by task ID or keyword. The pause button (top-right of the panel) freezes the auto-scroll so you can read without the view jumping.
Click any task ID in the log to open that task's detail log.
Queued chip-row (drag-to-reorder)¶
A horizontal chip-row at the bottom of the page lists all queued (ready-to-run) task IDs. The order of chips is the order the runner will pick from. Click a chip to scroll the task into the backlog view; drag to reorder; the order persists to tasks/.priority-order.yml.
Reordering works on desktop (mouse drag — 4 px threshold so plain click still selects), mobile (long-press 350 ms + vibrate-pulse), and keyboard (Tab to a chip, ←/→ to move, Esc cancel, Enter confirm). Tasks already running are unaffected — only the next wave picks according to the new order.
📌 omordnad (N) badge on the OverviewView card and a Återställ ordning link in the chip-row's right edge appear once an overlay exists. See Priority Queue for full details.
Memory headroom banner¶
When the cgroup memory.peak / memory.max ratio crosses thresholds, a sticky banner appears under the chip-row:
| Peak ratio | Banner | Start button |
|---|---|---|
< 70 % |
None | Enabled |
70–85 % |
Yellow + tooltip on Start | Enabled (warn-only) |
> 85 % |
Red | Disabled — 409 memory_pressure if force-bypass disabled |
The 409 response body includes current_runners, current_active_tasks, would_be_total, memory_peak_pct, memory_max_bytes, and a Swedish suggestion string the UI renders directly. See Runner Config for the full throttle behaviour and force-start opt-in.
Overview mode¶
When Översikt is selected in the project switcher, the dashboard switches to a multi-project card grid. Each card shows:
- Project name and repo path
- Status pill (same 5 states as single-project view)
- KPIs: completed, running, queued
- Runner controls (Start/Pause/Stop/Force/Cleanup) — identical to the single-project topbar
- Öppna link to navigate into the full single-project view
The overview polls every 4 seconds; all KPIs and status pills update automatically.
Mobile access¶
The dashboard is fully responsive. On small screens:
- The topbar collapses to icon-only buttons
- The KPI bar wraps to two rows
- The active tasks and live log panels stack vertically
- The queued ribbon remains at the bottom
Access from a phone via the LAN URL printed at startup:
For access outside your LAN, use Tailscale to create a VPN — no port forwarding needed.