---
id: w5/m6/t004
title: Wire as the Logs tab; states; verify live against a running App
worker: worker5
status: done
estimate: 40m
depends_on: [w5/m6/t003]
---

## Objective

Mount the logs viewer as the service page's Logs tab (replacing m5's placeholder), handle empty / error / disconnected states, and verify the whole thing — historical query + live tail — against a real running App on prod bex-api. Capture a screenshot.

## Context

- Logs tab placeholder created in m5/t003 (`src/routes/services.$serviceId.tsx` tab nav).
- Prod bex-api: `https://api.bex.co` (GraphQL + `/v1/logs/subscribe`); Kratos session required.
- A running App with active logs (e.g. `eden-cms-v2`, `beancount-cms`).

## Steps

1. Render the logs feature in the Logs tab route for the current `serviceId`.
2. Handle empty (no logs), error (query/stream failure), and disconnected (SSE dropped) states explicitly.
3. Log in via Kratos, load the Logs tab against prod, confirm historical + live lines; screenshot to `.playwright-mcp/dashboard-logs-live.png`.

## Files

- `src/routes/services.$serviceId.logs.tsx` (or the nested Logs tab route)
- `src/features/logs/components/`
- `.playwright-mcp/dashboard-logs-live.png` (gitignored)

## Acceptance criteria

- [ ] The Logs tab shows historical + live logs for a real App on prod.
- [ ] Empty / error / disconnected states are handled explicitly.
- [ ] Screenshot captured to `.playwright-mcp/`.

## Out of scope

- Automated tests (t006).
