diff --git a/docs/superpowers/plans/2026-06-29-logs-viewer-enhancements.md b/docs/superpowers/plans/2026-06-29-logs-viewer-enhancements.md new file mode 100644 index 0000000..ece6208 --- /dev/null +++ b/docs/superpowers/plans/2026-06-29-logs-viewer-enhancements.md @@ -0,0 +1,518 @@ +# Logs Viewer Enhancements + Responsive Layout — Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Make the logs view a full-screen responsive console with log export and in-log search (over full history), and let the dashboard use more of the screen. + +**Architecture:** Pure front-end + two tiny route-context additions; no backend changes. The shared `manager/templates/logs.html` (serves both per-service `/services/~logs/view` and manager `/logs/view`) gains a responsive flex layout, an Export button, and a Search box. Export/search fetch the full log via the existing endpoints with `tail=all`. Dashboard width is a one-line CSS change. + +**Tech Stack:** FastAPI + Jinja2 templates, Plotly Dash dashboard, vanilla JS + CSS (no build step, no libraries). + +**Spec:** `docs/superpowers/specs/2026-06-29-logs-viewer-enhancements-design.md` + +## Global Constraints + +- **No backend changes.** Export/search use existing endpoints: service `GET /services/~logs?name=&version=&tail=all`; manager `GET /logs/stream?tail=all`. The live tail keeps `tail=200`/`tail=400` + `follow=true`. +- **Reuse the shared `manager/templates/logs.html`** — both log views get every feature. +- **Self-contained** (no CDNs); use the existing design tokens (`var(--accent)`, `var(--ground)`, etc.). +- **XSS-safe log rendering**: insert log text via `textContent` / `createTextNode` — never `innerHTML` on log content (search highlight uses `` element nodes around text nodes). +- **Preserve the live tail**: streaming + Follow/auto-scroll/Jump-to-latest stay; new features layer on top. +- **Dashboard width:** `max-width: 1600px` centered (not fully fluid). + +## File Structure + +- `manager/assets/dashboard_styles.css` — **(modify)** `.page` max-width 1180 → 1600. +- `manager/templates/logs.html` — **(modify)** responsive flex layout CSS; toolbar gains Search + Export; JS for cancellable live stream, search (filter/highlight/count), export (download). +- `manager/routers/service_api.py` — **(modify)** `service_logs_view`: add `full_url` + `export_basename` to context. +- `manager/routers/logging_api.py` — **(modify)** `manager_logs_view`: add `full_url` + `export_basename` to context. +- `tests/manager_test/test_ui_redesign.py` — **(modify)** add guard tests. + +Run tests with `./venv/bin/python -m pytest tests/manager_test/test_ui_redesign.py -v` from the repo root. Lint with `/home/kaveh/miniconda3/bin/python -m black --check ` and `/home/kaveh/miniconda3/bin/python -m pylint manager daeploy`. + +--- + +## Task 1: Widen the dashboard + +**Files:** +- Modify: `manager/assets/dashboard_styles.css:32` +- Test: `tests/manager_test/test_ui_redesign.py` + +- [ ] **Step 1: Write the failing test** (append to `tests/manager_test/test_ui_redesign.py`) + +```python +def test_dashboard_page_width_widened(): + css = (ASSETS / "dashboard_styles.css").read_text().replace(" ", "") + assert "max-width:1600px" in css + assert "max-width:1180px" not in css +``` + +- [ ] **Step 2: Run it, expect FAIL** + +Run: `./venv/bin/python -m pytest tests/manager_test/test_ui_redesign.py::test_dashboard_page_width_widened -v` +Expected: FAIL (current value is `1180px`). + +- [ ] **Step 3: Make the change** — in `manager/assets/dashboard_styles.css`, replace line 32: + +```css +.page{max-width:1180px;margin:0 auto;padding:1.8rem 1.6rem 4rem} +``` +with: +```css +.page{max-width:1600px;margin:0 auto;padding:1.8rem 1.6rem 4rem} +``` + +- [ ] **Step 4: Run it, expect PASS** + +Run: `./venv/bin/python -m pytest tests/manager_test/test_ui_redesign.py::test_dashboard_page_width_widened -v` +Expected: PASS. + +- [ ] **Step 5: Commit** + +```bash +git add manager/assets/dashboard_styles.css tests/manager_test/test_ui_redesign.py +git commit -m "Widen dashboard page to 1600px" +``` + +--- + +## Task 2: Responsive full-screen logs layout + +**Files:** +- Modify: `manager/templates/logs.html` (CSS in the `