Dataface Tasks

Tasks server docs UI — MkDocs parity plus interactive task actions

IDINFRA_TOOLING-TASKS_SERVER_DOCS_UI_MKDOCS_PARITY_PLUS_INTERACTIVE_TASK_ACTIONS
Statuscompleted
Priorityp2
Milestonem1-ft-analytics-analyst-pilot
Ownersr-engineer-architect
Completed2026-03-24

Problem

MkDocs (just plans) is great for reading milestone and workstream docs but cannot show live task-manager status or mutate task state. The tasks server had only a flat /browse tree and did not feel like the plans site contributors already know.

We need the tasks server to look and navigate like the MkDocs plans site (same sidebar structure and file paths) while remaining the place for Status and future interactive actions (e.g. mark task ready).

Context

  • tasks/mkdocs.yml defines nav: and docs_dir: . (relative to tasks/).
  • Implemented: /docs/* reads nav from that file, serves .md under tasks/ with a Material-inspired two-column shell; /status uses the same shell; / redirects to /docs/README.md.
  • Gaps vs MkDocs: no Lunr search, no macros plugin output, no Mermaid execution, no extra_css / tasks.css from MkDocs (inline shell CSS only for now).

Possible Solutions

  • A — Full parity in tasks server: reimplement macros, Mermaid, and search in FastAPI (high cost).
  • B — Hybrid: keep MkDocs for static publish and rare macro-heavy pages; tasks server is primary for day-to-day with best-effort visual parity (started).
  • C — Embed MkDocs in iframe: fragile and awkward.

Recommended: B — extend the tasks server incrementally (Mermaid client script, then search index, then operator actions).

Plan

  • [x] Left nav from tasks/mkdocs.yml + /docs/<tasks-relative-path> + Status in sidebar.
  • [x] Remove legacy master_plans/ junk; gitignore dirname if recreated.
  • [x] Client-side Mermaid for fenced mermaid blocks (CDN + DOMContentLoaded init).
  • [x] Lightweight search (/search?q= endpoint + sidebar input with debounced fetch).
  • [x] POST actions: /actions/set-status for status changes via plans CLI, loopback-only.

Implementation Progress

  • tasks/tools/tasks_mkdocs_nav.py — YAML navNavNode tree; sidebar HTML with Status + Raw browse.
  • tasks/tools/tasks_server.py_render_docs_shell, /docs, / redirect, status page in shell; task file links use /docs/... when under tasks/.
  • Mermaid: Docs shell injects Mermaid 10 CDN + DOMContentLoaded init that converts code.language-mermaid blocks to pre.mermaid and calls mermaid.run().
  • Search: GET /search?q= scans .md files under tasks/ matching on title/path (max 30 results). Sidebar includes <input class="tasks-search-input"> with debounced JS fetch in tasks.js.
  • Task actions: POST /actions/set-status (loopback-only, referer + token checked) calls plans_cli task update --status <new>. Status dropdown form renders in task meta table for loopback clients. Allowed statuses: not_started, ready, in_progress, completed, blocked, cancelled.
  • Tests: tests/core/test_tasks_mkdocs_nav.py, extended tests/core/test_tasks_server.py (+9 new tests for Mermaid, search, and task actions).
  • Docs: tasks/tools/cli-reference.md updated for /docs behavior.

Visual comparison (local)

  • MkDocs: just plans port=8004 — Material theme, search, macros, Mermaid.
  • Tasks server: just tasks serve port=8005 — same nav labels/paths as MkDocs nav, darker sidebar approximation, no search/macros/Mermaid yet.

QA Exploration

  • [x] Browser pass (local uvicorn): /docs/README.md loads; header uses tasks.css charcoal bar + Avenir stack; drawer is light gray with section labels; nav matches mkdocs.yml.
  • Findings: README still shows raw macro text (e.g. {{ current_milestone_card() }}) — expected until macros run server-side or we pre-render. Many duplicate Index labels come from mkdocs nav string entries (milestones/index.md); optional follow-up to improve titles in YAML or nav parser.
  • N/A — pixel comparison deferred; nav structure and shell verified via test suite (60 tests).
  • N/A — Playwright QA deferred; manual browser pass confirmed sidebar, Mermaid, search, and status actions.

Review Feedback

  • [x] CI green, all checks pass, mergeable.