[Feature]: Browser-based Q&A/Task/Dashboard surface powered by Project Manager API (future PM client)

Stub for v1.0.0 PM deliverable (under #660).

Future client surface for the Project Manager: a browser-based UI for the endless feed of Questions and Tasks, approvals, dashboards, and project state. TUI and browser read from the same PM API endpoints.

High-level UX / API usage (added per Q&A)

• Live feed view: prioritized list of Questions/Tasks with rich context (provenance, cost/risk, artifacts, suggested sub-agent).
• Interactive forms mirroring ask_user_question for answers/approvals.
• Dashboard: budget burn, autopilot score, open Epics/Features by driver (agent/human/collaborative), velocity.
• Issue detail: state, driving label, history of agent actions, manual override.
• PM API: REST/MCP-like endpoints for feed query, submit answer, get status, delegate control.
• Real-time updates via webhooks/polling from PM (which listens to GitHub webhooks).

High-level browser dashboard UX flows / wireframe ideas (added per Q&A)

• Main Feed View: Responsive list or kanban of open items (Questions as cards with "Answer" button, Tasks with "Complete/Delegate"). Filters: by driver label, impact, due date, sub-agent. Real-time updates (WebSocket or polling) show new surfaced items from PM. Driver indicators: colored badges (agent=green, human=blue, collaborative=purple) with icons.
• Approval Modals: Clicking a checkpoint opens a modal with context (diffs, GIFs, cost est, sub-agent proposal). Native-like form (or embedded) for approve/revise/reject + comment. On submit, PM updates GitHub and refreshes feed.
• Dashboard Sidebar/Tab: Widgets for budget gauge (with throttle warnings), velocity chart, "What's Next" summary, active sub-agents status. Clickable to filter main feed.
• Issue Detail Pane: Sidebar or modal showing full history (agent actions as timeline), current driver label (editable by human), manual override button ("Take over as human" which sets driver:human and pauses PM for this item).
• Mobile/Responsive: Collapsible feed, swipe for quick actions on mobile. Dark/light mode matching GitHub.
• Real-time: PM pushes updates on webhook (e.g., new comment or label change triggers feed refresh or notification toast).

Detailed wireframe / UI element descriptions (added per Q&A refinement)

• Feed List Item Card: Avatar/icon for suggested sub-agent (e.g., "Refactorer Persona" with tooltip), driver badge (clickable to filter), cost/risk pill (hover shows breakdown), provenance links (GitHub issue, SPEC section). "Answer" button opens modal or inline form. For Tasks, progress bar if multi-step (e.g., "3/5 sub-agents complete").
• Driver Label Visualization/Editor: In feed and detail: Pill with emoji (🤖 Agent, 👤 Human, 🤝 Collaborative). Edit via dropdown or quick buttons; changing triggers PM re-evaluation (e.g., setting to Human pauses auto-delegation and surfaces notification). Dashboard has global toggle/filter for drivers. GitHub embed: Labels shown in issue sidebar with PLATE icons.
• Approval Modal UI: Header with item title + driver. Left: Context panels (shadow sim results as diff viewer or GIF player, budget impact gauge). Center: Form (questions with native inputs like radio for choices, textarea for comments). Right: Sub-agent proposal ("Assign to Creative Storyteller?" with persona description). Buttons: Approve & Continue, Revise (opens follow-up Q&A), Reject & Human Takeover. Real-time toast on submit: "PM updated GitHub #N, refreshing feed..."
• Real-time Notifications: Toast system (top-right) for new feed items, sub-agent completions, budget alerts. Click toast to open relevant modal/feed item. Integrates with GitHub notifications (e.g., "@mention" style for approvals).
• GitHub Embeds/Integration: Browser UI can embed GitHub issue views (via iframe or API cards). When viewing in browser dashboard, "Open in GitHub" deep-links with PLATE context (e.g., highlighted driver label). Webhooks ensure sync: label change in GitHub instantly updates browser feed.

API Contract Sketch for the PM (added per Q&A)

• GET /pm/feed: Returns prioritized list of items (type: Question/Task, id, title, context summary, cost/risk, suggested_action, driver_label, provenance_links). Query params: filter=driver:*, limit, since.
• POST /pm/answer: Submit answer for Question (body: {question_id, answer_text, source: "browser"}). Returns updated state + usage report.
• POST /pm/task/complete: Mark Task done or delegate (body includes choice, optional comment).
• GET /pm/status: Overall project status (budget_remaining, autopilot_score, open_counts by driver, active_orchestrations).
• GET /pm/issue/{id}: Detailed state, history, driving label.
• POST /pm/driver/set: Update driver label for an issue (human override).
• Auth: Via GitHub token or session; respects repo permissions. Returns structured data consumable by TUI or browser (JSON).
• Error handling: Clear messages, fallback to GitHub direct for critical overrides.

Acceptance (stub)

• PM exposes unified API usable by browser and TUI (plate_pm_* MCP tools added: feed, status, answer, driver_set; + checkpoint)
• Basic dashboard and feed views
• Support for driving mode labels/fields (in stubs)
• Integration with existing Q&A flows
• High-level UX flows and wireframe concepts documented
• API contract sketch for feed/answer/status/driver (in code stubs)

Roadmap: #654, #660
Related: #631 (feed), #660 (PM architecture)
Status: Stub. Future surface enabled by the core PM deliverable. Autonomous progress 2026-06-18: tests + MCP impl per plan.

Start with the existing PM API and the referenced plate_pm_* MCP tools, along with roadmap issues #654 and #660. Define the scope for the basic dashboard/feed views and Q&A integration before implementing the browser surface; done should include the unchecked acceptance items and working API-backed flows.