Dataface Tasks

Embed AI agent and MCP actions in dashboard/chart builder pages

IDM1-CLOUD-005
Statuscompleted
Priorityp0
Milestonem1-ft-analytics-analyst-pilot
Ownerui-design-frontend-dev
Completed bydave
Completed2026-03-17

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

  1. Prerequisite: extract-shared-chat-js-and-chat-stream-sse-endpoint task ships chat.js and chat_stream() with scope parameterization (M1 P0).
  2. Migrate dashboard editor: Replace ai-copilot.js init in dashboard_edit.html with shared chat.js init, passing {streamUrl: chatStreamProjectUrl, onWriteToEditor: (yaml) => cmEditor.setValue(yaml)}.
  3. Wire chart builder: Same pattern, scope=chart, chart-level context.
  4. Add confirmation UX: When write_to_editor fires, show a diff preview before applying. Undo button stores previous YAML.
  5. Delete ai-copilot.js: Once all placements use chat.js.
  6. 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 review ran 3 iterations, addressing feedback each round: 1. BLOCK: Missing banner markup in dashboard_view.html, duplicated confirm/undo logic → Fixed: extracted shared confirm-undo.js module and ai_confirm_banner.html include 2. BLOCK: isDirty bug (module script couldn't access local var) → Fixed: exposed markDirty() on dashboardEditorAI bridge 3. BLOCK: Stale chart editor YAML (returned const), silent write_to_editor → Fixed: removed stale bridge, added user-facing message for write_to_editor in chart editor 4. BLOCK: markDirty() callback was briefly dropped during cleanup → Fixed: restored onAfterApply / onAfterUndo callbacks on dashboard_edit.html 5. CAUTION: No blocking issues. Noted MVP limitations (single undo, no diff preview, structural tests only)
  • [x] Review cleared (Caution verdict)