Embed AI agent and MCP actions in dashboard/chart builder pages
Problem
The Cloud Suite's dashboard and chart builder pages have limited AI assistance — the existing ai-copilot.js in the dashboard editor sidebar has a bespoke 4-tool dispatch that only supports validate_yaml, test_yaml_execution, execute_query, and write_to_editor. It can't use the full MCP tool set (catalog, render_dashboard, search_dashboards, etc.) and its code is not shared with other chat placements.
Context
- Builder pages expose inline AI actions for query drafting, chart suggestions, and edits.
- Agent outputs are reviewable and safely applied in the active authoring context.
- Pilot analysts successfully use embedded AI flow in at least one weekly workflow.
This task is part of the AI Agent Surfaces initiative (mcp-analyst-agent/initiatives/ai-agent-surfaces/). The shared chat component task (extract-shared-chat-js-and-chat-stream-sse-endpoint.md) extracts chat.js and chat_stream() as M1 reusable infrastructure. This task consumes those shared components with project-level context and the write_to_editor UI-layer tool.
Shared components (built by the extract-shared-chat task, M1 P0):
- apps/cloud/static/js/chat/chat.js — shared chat JS component (replaces ai-copilot.js)
- apps/cloud/apps/ai/views.py::chat_stream() — shared SSE endpoint with scope parameter
- dataface/ai/tools.py::handle_tool_call() — canonical MCP tool dispatch (unified by unify-cloud-ai-tool-dispatch-to-use-canonical-mcp-tools.md)
What this task does (on top of shared components):
- Wire the shared chat.js into dashboard_edit.html with scope=project and onWriteToEditor callback
- Wire into chart builder pages with scope=chart
- Ensure write_to_editor tool (a UI-layer action, not an MCP tool) is handled by the onWriteToEditor callback in JS
- Add confirmation/undo patterns for agent-applied YAML changes in the editor
- Remove the old ai-copilot.js once migrated
Possible Solutions
Recommended: Reuse shared chat component from AI Agent Surfaces initiative. The home page chat task builds chat.js and chat_stream(). This task plugs them into the builder pages with project/chart-scoped context. No new chat implementations.
Plan
- Prerequisite:
extract-shared-chat-js-and-chat-stream-sse-endpointtask shipschat.jsandchat_stream()withscopeparameterization (M1 P0). - Migrate dashboard editor: Replace
ai-copilot.jsinit indashboard_edit.htmlwith sharedchat.jsinit, passing{streamUrl: chatStreamProjectUrl, onWriteToEditor: (yaml) => cmEditor.setValue(yaml)}. - Wire chart builder: Same pattern,
scope=chart, chart-level context. - Add confirmation UX: When
write_to_editorfires, show a diff preview before applying. Undo button stores previous YAML. - Delete
ai-copilot.js: Once all placements usechat.js. - Capture instrumentation: Track which tools are called, success rates, time-to-first-result.
Implementation Progress
Prerequisites (complete):
- extract-shared-chat-js-and-chat-stream-sse-endpoint merged (PR #616, commit 0a6cc67b) — chat.js and chat_stream() with scope parameterization
- unify-cloud-ai-tool-dispatch-to-use-canonical-mcp-tools merged — canonical MCP tool dispatch via handle_tool_call()
- ai-copilot.js deleted, dashboard_edit.html already wired to chat.js with onWriteToEditor callback
- init.js (dashboard_view) already wired to chat.js
Completed:
- [x] Shared confirm-undo.js module extracted (apps/cloud/static/js/chat/confirm-undo.js)
- [x] Shared ai_confirm_banner.html Django include template (apps/cloud/templates/components/)
- [x] Confirmation/undo banner wired into dashboard_edit.html via setupConfirmUndo + bridge methods
- [x] Confirmation/undo banner wired into dashboard_view.html + init.js (CodeMirror setValue auto-triggers change → render)
- [x] chat.js wired into chart_editor.html with AI chat panel (replaces old "AI Assist" button)
- [x] write_to_editor in chart editor shows user-facing message (chart editor uses SQL, not YAML)
- [x] 49 tests pass (15 new structural tests for confirm/undo and chart editor chat integration)
- [x] just ci green on latest main (2747 passed, 40 skipped, 3 xfailed)
- [x] just review verdict: Caution (no blocking issues)
Known limitations (MVP-acceptable): - Single-level undo (only one previousYaml snapshot) - No diff preview in confirm banner (shows "AI wants to update" without showing what changed) - Structural/smoke tests only (no behavioral JS tests — would need Playwright/browser harness) - Rapid AI responses overwrite pending YAML in confirm banner (last suggestion wins)
QA Exploration
- [ ] QA exploration deferred — requires running app with seed data to test confirm/undo flow end-to-end
Review Feedback
just reviewran 3 iterations, addressing feedback each round: 1. BLOCK: Missing banner markup indashboard_view.html, duplicated confirm/undo logic → Fixed: extracted sharedconfirm-undo.jsmodule andai_confirm_banner.htmlinclude 2. BLOCK:isDirtybug (module script couldn't access local var) → Fixed: exposedmarkDirty()ondashboardEditorAIbridge 3. BLOCK: Stale chart editor YAML (returned const), silentwrite_to_editor→ Fixed: removed stale bridge, added user-facing message forwrite_to_editorin chart editor 4. BLOCK:markDirty()callback was briefly dropped during cleanup → Fixed: restoredonAfterApply/onAfterUndocallbacks ondashboard_edit.html5. CAUTION: No blocking issues. Noted MVP limitations (single undo, no diff preview, structural tests only)- [x] Review cleared (Caution verdict)