feat(editor): CF11-007 canvas execution overlay

- Add ExecutionOverlay React component with header, node badges, data popup, timeline scrubber - Add ExecutionNodeBadge: status badge positioned in canvas-space at each node - Add ExecutionDataPopup: floating popup showing input/output/error data for selected node - Add ExecutionTimeline: fixed scrubber bar with Prev/Next, range input, step dots - Add #execution-overlay-layer DOM layer to nodegrapheditor.html - Wire renderExecutionOverlay/updateExecutionOverlay into nodegrapheditor.ts - Wire ExecutionHistoryPanel pin button via EventDispatcher execution:pinToCanvas event - Add 20 unit tests for overlay utility functions - Update PROGRESS-dishant.md: CF11-006 and CF11-007 both complete
2026-03-08 01:53:30 +01:00 · 2026-02-18 23:20:52 +05:30
parent 748ec07bd4
commit 83278b4370
15 changed files with 1238 additions and 31 deletions
--- a/dev-docs/tasks/phase-11-cloud-functions/PROGRESS-dishant.md
+++ b/dev-docs/tasks/phase-11-cloud-functions/PROGRESS-dishant.md
@@ -1,38 +1,100 @@
-# Phase 11 Progress — Dishant
-**Branch:** cline-dev-dishant
-**Last Updated:** 2026-02-18 (Session 1 complete)
+# Phase 11 — Cloud Functions: Dishant's Progress

-## Completed This Sprint
+**Branch:** `cline-dev-dishant`  
+**Last Updated:** 2026-02-18

-| Task | Name | Completed | Notes |
-|------|------|-----------|-------|
-| CF11-006 | Execution History Panel UI | 2026-02-18 | Full panel: list, detail, filters, hooks, tests. Registered in sidebar at order 8.8. |
+---

-## In Progress
+## CF11-006 — Execution History Panel UI ✅ COMPLETE

-| Task | Name | Started | Blocker |
-|------|------|---------|---------|
-| CF11-007 | Canvas Execution Overlay | — | Starts next session |
+**Status:** Done  
+**Completed:** 2026-02-18

-## Decisions & Learnings
+### What was built

- **[2026-02-18] Sprint 1 started.** Branch `cline-dev-dishant` created from `cline-dev`. Starting with CF11-006 (Execution History Panel UI) as it's unblocked and highest priority in Series 2.
+- `ExecutionHistoryPanel.tsx` — main panel component (registered in sidebar at order 8.8)
+- `ExecutionHistoryPanel.module.scss` — panel styles using design tokens
+- `hooks/useExecutionHistory.ts` — fetches paginated execution list with filters
+- `hooks/useExecutionDetail.ts` — fetches single execution with full step data
+- `components/ExecutionList/` — `ExecutionList.tsx`, `ExecutionItem.tsx`, SCSS
+- `components/ExecutionFilters/` — `ExecutionFilters.tsx`, SCSS (status + date range)
+- `components/ExecutionDetail/` — `ExecutionDetail.tsx`, `NodeStepList.tsx`, `NodeStepItem.tsx`, SCSS
+- `tests/cloud/ExecutionHistoryPanel.test.ts` — 15 unit tests (formatDuration, formatRelativeTime, buildExecutionQuery)

- **[2026-02-18] CF11-006 complete.** Commit `7d373e0`. Full component tree built:
-  - `ExecutionHistoryPanel` — main panel, registered in `router.setup.ts` at order 8.8 with `IconName.Bug`
-  - `ExecutionList` + `ExecutionItem` — scrollable list with status dots, duration, trigger type
-  - `ExecutionDetail` — summary card, error display, trigger data, node steps
-  - `NodeStepList` + `NodeStepItem` — expandable rows with input/output JSON (pre-formatted)
-  - `ExecutionFilters` — status dropdown + clear button
-  - `useExecutionHistory` — IPC-based fetch via `execution-history:list` channel
-  - `useExecutionDetail` — IPC-based fetch via `execution-history:get` channel
-  - Unit tests in `tests/cloud/ExecutionHistoryPanel.test.ts` (Jasmine, pure utility functions)
-  - All styles use design tokens — zero hardcoded colors
+### Key decisions

- **[2026-02-18] IPC pattern for Electron.** Use `(window as any).require('electron')` not `window.require('electron')` — matches BackendServicesPanel pattern. TS error on `window.require` is expected without the cast.
+- `useExecutionDetail` is always called (even when no execution selected) to avoid React hook ordering violations — returns null when no ID provided
+- All colours via CSS variables (`var(--theme-color-*)`) — no hardcoded values
+- Panel registered via `router.setup.ts` at order 8.8

- **[2026-02-18] Test framework is Jasmine (Electron runner), not Jest.** Tests live in `packages/noodl-editor/tests/` and use global `describe/it/expect`. Hook tests need React renderer — test pure utility functions instead. Register test files via side-effect import in `tests/cloud/index.ts`.
+---

- **[2026-02-18] CF11-007 integration point.** `ExecutionDetail` has `onPinToCanvas?: (executionId: string) => void` prop stub ready for CF11-007 canvas overlay wiring.
+## CF11-007 — Canvas Execution Overlay ✅ COMPLETE

- **[2026-02-18] Cross-branch check.** Richard completed STYLE-001 Phase 3+4 (TokenPicker, CSS injection) and CLEANUP-000H (Migration Wizard SCSS). Zero overlap with Phase 11 scope.
+**Status:** Done  
+**Completed:** 2026-02-18
+
+### What was built
+
+**React components** (`src/editor/src/views/CanvasOverlays/ExecutionOverlay/`):
+
+| File | Purpose |
+|------|---------|
+| `ExecutionOverlay.tsx` | Main overlay — header, transform container, badge list, popup, timeline |
+| `ExecutionNodeBadge.tsx` | Status badge rendered at each node's canvas-space position |
+| `ExecutionDataPopup.tsx` | Floating popup showing input/output/error data for selected node |
+| `ExecutionTimeline.tsx` | Fixed scrubber bar — Prev/Next buttons, range input, step dots |
+| `index.ts` | Barrel exports |
+| `*.module.scss` | SCSS for each component (design tokens only) |
+
+**Integration:**
+
+- `nodegrapheditor.html` — added `#execution-overlay-layer` div
+- `nodegrapheditor.ts` — added `executionOverlayRoot` field, `renderExecutionOverlay()`, `updateExecutionOverlay()`, wired into `render()` and `setPanAndScale()`
+- `ExecutionHistoryPanel.tsx` — added `handlePinToCanvas` callback that emits `execution:pinToCanvas` via `EventDispatcher.instance`
+
+**Tests** (`tests/cloud/ExecutionOverlay.test.ts`):
+
+- 20 unit tests covering: `overlay_formatDuration`, `statusIcon`, `buildNodeStepMap`, `badgePosition`, `popupPosition`
+- Registered in `tests/cloud/index.ts`
+
+### Architecture
+
+```
+ExecutionHistoryPanel
+  └─ "Pin to Canvas" button
+       └─ EventDispatcher.emit('execution:pinToCanvas', { execution })
+            └─ ExecutionOverlay (React, mounted in #execution-overlay-layer)
+                 ├─ Header bar (fixed) — workflow name, status, Unpin button
+                 ├─ Transform container (canvas-space, follows pan/zoom)
+                 │    ├─ ExecutionNodeBadge × N (one per node in step map)
+                 │    └─ ExecutionDataPopup (shown when badge clicked)
+                 └─ ExecutionTimeline (fixed) — scrubber, step dots, Prev/Next
+```
+
+### Key decisions
+
+- Overlay uses same CSS transform pattern as `HighlightOverlay` — parent container gets `scale(zoom) translate(x, y)` so all children use raw canvas coordinates
+- `buildNodeStepMap` uses last-write-wins for repeated nodeIds (a node can appear in multiple steps; we show its latest state up to `currentStepIndex`)
+- `useEventListener` hook used for all EventDispatcher subscriptions (per `.clinerules`)
+- `overlay_formatDuration` prefixed in tests to avoid name collision with CF11-006 test bundle
+
+### Manual verification steps
+
+1. `npm run dev` → open editor
+2. Open Execution History panel (sidebar)
+3. Click an execution to open detail view
+4. Click "Pin to Canvas" button
+5. Verify: header bar appears at top of canvas with workflow name + status
+6. Verify: node badges appear at each node's position (colour-coded by status)
+7. Verify: clicking a badge opens the data popup with input/output/error data
+8. Verify: timeline scrubber at bottom — Prev/Next navigate through steps
+9. Verify: badges update as you scrub through steps
+10. Verify: "Unpin" button dismisses the overlay
+11. Verify: pan/zoom updates badge positions correctly
+
+---
+
+## Next Up
+
+Per sprint doc: **STRUCT-001 — JSON Schema Definition** (Phase 10A, critical path start)