feat(ui): ProcessMapBase — interactive river-styled SIPOC map component#71
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
jukka-matti
added a commit
that referenced
this pull request
Apr 18, 2026
Wires the ProcessMapBase component from PR #71 into the PWA as a first-class workspace. Minimal, deterministic integration — the FRAME tab appears alongside Analysis / Investigation / Improvement / Report, loads a FrameView that reads processContext.processMap from projectStore, runs live gap detection, and lets the user edit the map in place. Changes: - apps/pwa/src/components/views/FrameView.tsx — new view. Reads processContext / rawData / specs / outcome from projectStore, seeds an empty ProcessMap when none exists, computes gaps via detectGaps() on every render, and renders ProcessMapBase with onChange → setProcessContext and onSpecsChange → setSpecs. - apps/pwa/src/features/panels/panelsStore.ts — extend activeView type to include 'frame', add showFrame() action (mirrors showInvestigation: closes findings panel on entry). - apps/pwa/src/features/panels/__tests__/panelsStore.test.ts — test for showFrame. - apps/pwa/src/App.tsx — lazy-load FrameView, insert Frame tab as the first workspace in the nav, add the view-dispatch branch for activeView === 'frame'. V1 deliberately keeps the default landing view as 'analysis' — users opt into FRAME by clicking the tab. Changing the default to 'frame' for new analyses is a follow-up (wants copy review + template seeding so first-time users aren't dropped on an empty map). Tests: 111 PWA tests pass (+1 from showFrame). pr-ready-check.sh green (tests, lint, docs:check). Stacked on feat/frame-ui (PR #71) — consumes ProcessMapBase from @variscout/ui and ProcessMap types + detectGaps from @variscout/core/frame. Plan: .claude/plans/i-was-interviewing-greg-dynamic-umbrella.md Spec: docs/superpowers/specs/2026-04-18-frame-process-map-design.md ADR: docs/07-decisions/adr-070-frame-workspace.md Co-Authored-By: ruflo <ruv@ruv.net>
3 tasks
jukka-matti
added a commit
that referenced
this pull request
Apr 18, 2026
Azure-app equivalent of PR #72. Adds the FRAME workspace tab between Overview and Analysis, loads a FrameView that reads processContext.processMap from projectStore via @variscout/stores, runs live gap detection, and reuses ProcessMapBase from #71. Changes: - apps/azure/src/components/editor/FrameView.tsx — new view mirroring apps/pwa/src/components/views/FrameView.tsx. - apps/azure/src/features/panels/panelsStore.ts — extend activeView type to include 'frame', add showFrame() action, update initFromViewState type. - apps/azure/src/features/panels/__tests__/panelsStore.test.ts — test for showFrame. - apps/azure/src/components/AppHeader.tsx — Frame tab between Overview and Analysis with data-testid="view-toggle-frame". - apps/azure/src/pages/Editor.tsx — import FrameView, add view dispatch branch for activeView === 'frame' before the investigation branch. Same deliberate non-changes as PR #72: default landing view is unchanged ('analysis' for new projects; 'dashboard' for returning projects per existing viewState persistence). Users opt into FRAME by clicking the tab. Data-seeded skeleton and CoScout-drafted flows are V2+ per the plan. Tests: 770 Azure tests pass (+1 for showFrame). pr-ready-check green. Stacked on feat/frame-pwa-integration (PR #72) so both slices land in reviewable order. Plan: .claude/plans/i-was-interviewing-greg-dynamic-umbrella.md Spec: docs/superpowers/specs/2026-04-18-frame-process-map-design.md ADR: docs/07-decisions/adr-070-frame-workspace.md Co-Authored-By: ruflo <ruv@ruv.net>
3 tasks
jukka-matti
added a commit
that referenced
this pull request
Apr 18, 2026
… microcopy End-to-end walk of the FRAME umbrella in browser surfaced four issues; this commit fixes all of them so the umbrella (ADR-070, PRs #69–74) is ready to merge after MBB review. 1. PWA showFrame hook forwarding (fixes runtime crash on Frame tab click) - apps/pwa/src/hooks/useAppPanels.ts: the hook wrapped panelsStore but stripped showFrame and left 'frame' out of activeView typing. Clicking Frame tab threw "panels.showFrame is not a function". 2. WorkspaceView type gained 'frame' (unblocks Azure build) - packages/core/src/ui-types/index.ts (ViewState.activeView) - packages/stores/src/sessionStore.ts (WorkspaceView) - apps/azure/src/components/AppHeader.tsx (local WorkspaceView) - Pre-existing breakage from c4872d1 that tsc caught: Frame route in AppHeader/usePanelsPersistence/Editor typed against a view enum that still didn't list 'frame'. All three build paths now clean. 3. Investigation-showcase seeds processMap (ADR-070) - packages/data/src/types.ts: SampleConfig gains optional processMap. - packages/hooks/src/useDataIngestion.ts: loadSample now writes sample.config.processMap into projectStore.processContext (merging with whatever context already exists), and clears a prior processMap when loading a mapless sample. - apps/pwa/src/hooks/useDataIngestion.ts + apps/azure/src/hooks/...: thread setProcessContext/getProcessContext through to the base hook. - packages/data/src/samples/investigation-showcase.ts: seeds the Fill Weight showcase with a single "Fill" step, 4 tributaries (Line as the nominated subgroup axis), CTS=Fill_Weight_g with 495/500/505, and two hunches. The Frame workspace now opens ready-made for the pre-built Findings/Questions story — no rebuild required. 4. Gap detector microcopy polish - packages/core/src/frame/gapDetector.ts: unnamed steps produced "No CTQ at "". Add …" and Step "" has no tributaries.". Now reads "No CTQ at this step …" and "This step has no tributaries …" when step.name is empty/whitespace. Named steps still get quoted. - +2 tests in gapDetector.test.ts covering both branches. Tests green: 44 frame (core), 21 ProcessMapBase (ui), 10 useDataIngestion (hooks). pr-ready-check green (turbo tests + lint + docs:check). Part of the FRAME umbrella (PRs #69/#70/#71/#72/#73/#74, ADR-070). Co-Authored-By: ruflo <ruv@ruv.net>
Third deliverable from the FRAME umbrella (ADR-070). Adds the interactive component the FRAME workspace will render, consuming the core primitives from PR #70. No app integration in this PR — FrameView + nav tab insertion land in PR #5 alongside capability-leg wiring and end-to-end verification. Changes: - packages/ui/src/components/ProcessMap/ProcessMapBase.tsx — the interactive component. Renders three regions on one canvas: • left→right spine of process-step cards (SIPOC / temporal) • tributaries (little xs) as checkbox rows on each step, with the checkbox doubling as the rational-subgroup-axis toggle • an ocean card at the right carrying the CTS (customer-felt outcome) dropdown + target / LSL / USL inputs Plus a hunches panel (pin to step or tributary, promoted to SuspectedCause hubs later in the investigation workspace) and a gap strip at the bottom rendering the global gaps from detectGaps(). Step-scoped gaps render inline next to the affected step card. V1 interactions are deliberately structured (buttons, dropdowns, inline inputs) — not a freeform drag-and-drop canvas. That comes in V2+ per ADR-070. Props-based. Parent owns state; the component is a thin controller over the existing ProcessMap type. data-testid on every interactive surface for RTL + future E2E selectors. - packages/ui/src/components/ProcessMap/__tests__/ProcessMapBase.test.tsx — 21 tests covering step CRUD (add / rename / remove with order re-packing and orphan cleanup of tributaries + hunches), tributary CRUD + subgroup- axis toggling (both directions), CTS + specs wiring, hunch add/remove with pinning, gap rendering (global gap strip + step-scoped inline), and disabled mode hiding destructive controls. - packages/ui/src/index.ts — export ProcessMapBase + type. Tests: 1179 ui tests pass (+21 from this PR). Lint clean (0 errors; 15 pre-existing warnings unchanged). packages/hooks/src/__tests__/ index.test.ts flaked under turbo's concurrent run (known issue per MEMORY.md — passes when run alone). Stacked on feat/frame-data-model (PR #70) — imports ProcessMap, Gap, ProcessMapTributary, ProcessMapHunch from @variscout/core/frame. Plan: .claude/plans/i-was-interviewing-greg-dynamic-umbrella.md Spec: docs/superpowers/specs/2026-04-18-frame-process-map-design.md ADR: docs/07-decisions/adr-070-frame-workspace.md Co-Authored-By: ruflo <ruv@ruv.net>
3d7468a to
588d030
Compare
jukka-matti
added a commit
that referenced
this pull request
Apr 18, 2026
Wires the ProcessMapBase component from PR #71 into the PWA as a first-class workspace. Minimal, deterministic integration — the FRAME tab appears alongside Analysis / Investigation / Improvement / Report, loads a FrameView that reads processContext.processMap from projectStore, runs live gap detection, and lets the user edit the map in place. Changes: - apps/pwa/src/components/views/FrameView.tsx — new view. Reads processContext / rawData / specs / outcome from projectStore, seeds an empty ProcessMap when none exists, computes gaps via detectGaps() on every render, and renders ProcessMapBase with onChange → setProcessContext and onSpecsChange → setSpecs. - apps/pwa/src/features/panels/panelsStore.ts — extend activeView type to include 'frame', add showFrame() action (mirrors showInvestigation: closes findings panel on entry). - apps/pwa/src/features/panels/__tests__/panelsStore.test.ts — test for showFrame. - apps/pwa/src/App.tsx — lazy-load FrameView, insert Frame tab as the first workspace in the nav, add the view-dispatch branch for activeView === 'frame'. V1 deliberately keeps the default landing view as 'analysis' — users opt into FRAME by clicking the tab. Changing the default to 'frame' for new analyses is a follow-up (wants copy review + template seeding so first-time users aren't dropped on an empty map). Tests: 111 PWA tests pass (+1 from showFrame). pr-ready-check.sh green (tests, lint, docs:check). Stacked on feat/frame-ui (PR #71) — consumes ProcessMapBase from @variscout/ui and ProcessMap types + detectGaps from @variscout/core/frame. Plan: .claude/plans/i-was-interviewing-greg-dynamic-umbrella.md Spec: docs/superpowers/specs/2026-04-18-frame-process-map-design.md ADR: docs/07-decisions/adr-070-frame-workspace.md Co-Authored-By: ruflo <ruv@ruv.net>
jukka-matti
added a commit
that referenced
this pull request
Apr 18, 2026
Wires the ProcessMapBase component from PR #71 into the PWA as a first-class workspace. Minimal, deterministic integration — the FRAME tab appears alongside Analysis / Investigation / Improvement / Report, loads a FrameView that reads processContext.processMap from projectStore, runs live gap detection, and lets the user edit the map in place. Changes: - apps/pwa/src/components/views/FrameView.tsx — new view. Reads processContext / rawData / specs / outcome from projectStore, seeds an empty ProcessMap when none exists, computes gaps via detectGaps() on every render, and renders ProcessMapBase with onChange → setProcessContext and onSpecsChange → setSpecs. - apps/pwa/src/features/panels/panelsStore.ts — extend activeView type to include 'frame', add showFrame() action (mirrors showInvestigation: closes findings panel on entry). - apps/pwa/src/features/panels/__tests__/panelsStore.test.ts — test for showFrame. - apps/pwa/src/App.tsx — lazy-load FrameView, insert Frame tab as the first workspace in the nav, add the view-dispatch branch for activeView === 'frame'. V1 deliberately keeps the default landing view as 'analysis' — users opt into FRAME by clicking the tab. Changing the default to 'frame' for new analyses is a follow-up (wants copy review + template seeding so first-time users aren't dropped on an empty map). Tests: 111 PWA tests pass (+1 from showFrame). pr-ready-check.sh green (tests, lint, docs:check). Stacked on feat/frame-ui (PR #71) — consumes ProcessMapBase from @variscout/ui and ProcessMap types + detectGaps from @variscout/core/frame. Plan: .claude/plans/i-was-interviewing-greg-dynamic-umbrella.md Spec: docs/superpowers/specs/2026-04-18-frame-process-map-design.md ADR: docs/07-decisions/adr-070-frame-workspace.md Co-authored-by: ruflo <ruv@ruv.net>
jukka-matti
added a commit
that referenced
this pull request
Apr 18, 2026
Azure-app equivalent of PR #72. Adds the FRAME workspace tab between Overview and Analysis, loads a FrameView that reads processContext.processMap from projectStore via @variscout/stores, runs live gap detection, and reuses ProcessMapBase from #71. Changes: - apps/azure/src/components/editor/FrameView.tsx — new view mirroring apps/pwa/src/components/views/FrameView.tsx. - apps/azure/src/features/panels/panelsStore.ts — extend activeView type to include 'frame', add showFrame() action, update initFromViewState type. - apps/azure/src/features/panels/__tests__/panelsStore.test.ts — test for showFrame. - apps/azure/src/components/AppHeader.tsx — Frame tab between Overview and Analysis with data-testid="view-toggle-frame". - apps/azure/src/pages/Editor.tsx — import FrameView, add view dispatch branch for activeView === 'frame' before the investigation branch. Same deliberate non-changes as PR #72: default landing view is unchanged ('analysis' for new projects; 'dashboard' for returning projects per existing viewState persistence). Users opt into FRAME by clicking the tab. Data-seeded skeleton and CoScout-drafted flows are V2+ per the plan. Tests: 770 Azure tests pass (+1 for showFrame). pr-ready-check green. Stacked on feat/frame-pwa-integration (PR #72) so both slices land in reviewable order. Plan: .claude/plans/i-was-interviewing-greg-dynamic-umbrella.md Spec: docs/superpowers/specs/2026-04-18-frame-process-map-design.md ADR: docs/07-decisions/adr-070-frame-workspace.md Co-Authored-By: ruflo <ruv@ruv.net>
jukka-matti
added a commit
that referenced
this pull request
Apr 18, 2026
Azure-app equivalent of PR #72. Adds the FRAME workspace tab between Overview and Analysis, loads a FrameView that reads processContext.processMap from projectStore via @variscout/stores, runs live gap detection, and reuses ProcessMapBase from #71. Changes: - apps/azure/src/components/editor/FrameView.tsx — new view mirroring apps/pwa/src/components/views/FrameView.tsx. - apps/azure/src/features/panels/panelsStore.ts — extend activeView type to include 'frame', add showFrame() action, update initFromViewState type. - apps/azure/src/features/panels/__tests__/panelsStore.test.ts — test for showFrame. - apps/azure/src/components/AppHeader.tsx — Frame tab between Overview and Analysis with data-testid="view-toggle-frame". - apps/azure/src/pages/Editor.tsx — import FrameView, add view dispatch branch for activeView === 'frame' before the investigation branch. Same deliberate non-changes as PR #72: default landing view is unchanged ('analysis' for new projects; 'dashboard' for returning projects per existing viewState persistence). Users opt into FRAME by clicking the tab. Data-seeded skeleton and CoScout-drafted flows are V2+ per the plan. Tests: 770 Azure tests pass (+1 for showFrame). pr-ready-check green. Stacked on feat/frame-pwa-integration (PR #72) so both slices land in reviewable order. Plan: .claude/plans/i-was-interviewing-greg-dynamic-umbrella.md Spec: docs/superpowers/specs/2026-04-18-frame-process-map-design.md ADR: docs/07-decisions/adr-070-frame-workspace.md Co-authored-by: ruflo <ruv@ruv.net>
jukka-matti
added a commit
that referenced
this pull request
Apr 18, 2026
… microcopy End-to-end walk of the FRAME umbrella in browser surfaced four issues; this commit fixes all of them so the umbrella (ADR-070, PRs #69–74) is ready to merge after MBB review. 1. PWA showFrame hook forwarding (fixes runtime crash on Frame tab click) - apps/pwa/src/hooks/useAppPanels.ts: the hook wrapped panelsStore but stripped showFrame and left 'frame' out of activeView typing. Clicking Frame tab threw "panels.showFrame is not a function". 2. WorkspaceView type gained 'frame' (unblocks Azure build) - packages/core/src/ui-types/index.ts (ViewState.activeView) - packages/stores/src/sessionStore.ts (WorkspaceView) - apps/azure/src/components/AppHeader.tsx (local WorkspaceView) - Pre-existing breakage from c4872d1 that tsc caught: Frame route in AppHeader/usePanelsPersistence/Editor typed against a view enum that still didn't list 'frame'. All three build paths now clean. 3. Investigation-showcase seeds processMap (ADR-070) - packages/data/src/types.ts: SampleConfig gains optional processMap. - packages/hooks/src/useDataIngestion.ts: loadSample now writes sample.config.processMap into projectStore.processContext (merging with whatever context already exists), and clears a prior processMap when loading a mapless sample. - apps/pwa/src/hooks/useDataIngestion.ts + apps/azure/src/hooks/...: thread setProcessContext/getProcessContext through to the base hook. - packages/data/src/samples/investigation-showcase.ts: seeds the Fill Weight showcase with a single "Fill" step, 4 tributaries (Line as the nominated subgroup axis), CTS=Fill_Weight_g with 495/500/505, and two hunches. The Frame workspace now opens ready-made for the pre-built Findings/Questions story — no rebuild required. 4. Gap detector microcopy polish - packages/core/src/frame/gapDetector.ts: unnamed steps produced "No CTQ at "". Add …" and Step "" has no tributaries.". Now reads "No CTQ at this step …" and "This step has no tributaries …" when step.name is empty/whitespace. Named steps still get quoted. - +2 tests in gapDetector.test.ts covering both branches. Tests green: 44 frame (core), 21 ProcessMapBase (ui), 10 useDataIngestion (hooks). pr-ready-check green (turbo tests + lint + docs:check). Part of the FRAME umbrella (PRs #69/#70/#71/#72/#73/#74, ADR-070). Co-Authored-By: ruflo <ruv@ruv.net>
jukka-matti
added a commit
that referenced
this pull request
Apr 18, 2026
…es (#74) * feat(capability): wire SubgroupConfigPopover to processMap.subgroupAxes Completes the capability-storytelling leg of the FRAME umbrella (ADR-070): the rational-subgroup selector in the capability view now reads from the tributaries the user nominated in FRAME, not from the full factors list. Same microcopy, same popover, but the candidates now reflect process structure. Changes: - packages/core/src/frame/subgroupAxes.ts — new pure helper `subgroupAxisColumns(map)` that resolves tributary IDs in processMap.subgroupAxes to their column names, preserving order and tolerating dangling references (axes pointing at deleted tributaries). - packages/core/src/frame/__tests__/subgroupAxes.test.ts — 6 tests for null / undefined / empty / populated / ordering / dangling cases. - packages/core/src/frame/index.ts — export the helper from the /frame barrel alongside inferMode and detectGaps. - apps/pwa/src/components/Dashboard.tsx — read processContext from projectStore, derive subgroup candidates via subgroupAxisColumns, fall back to factors when the map has no axes set (backward compat). - apps/azure/src/components/Dashboard.tsx — mirror of the PWA wiring. Tests: 2580 core (+6 from subgroupAxes), 1179 ui, 111 pwa, 771 azure; pr-ready-check green (tests + lint + docs:check). Stacked on feat/frame-azure-integration (PR #73) — uses @variscout/core/frame. When #73 merges, this rebases onto main. Plan: .claude/plans/i-was-interviewing-greg-dynamic-umbrella.md Spec: docs/superpowers/specs/2026-04-18-frame-process-map-design.md ADR: docs/07-decisions/adr-070-frame-workspace.md Co-Authored-By: ruflo <ruv@ruv.net> * fix(frame): chrome-walk polish — wire showFrame, seed showcase, clean microcopy End-to-end walk of the FRAME umbrella in browser surfaced four issues; this commit fixes all of them so the umbrella (ADR-070, PRs #69–74) is ready to merge after MBB review. 1. PWA showFrame hook forwarding (fixes runtime crash on Frame tab click) - apps/pwa/src/hooks/useAppPanels.ts: the hook wrapped panelsStore but stripped showFrame and left 'frame' out of activeView typing. Clicking Frame tab threw "panels.showFrame is not a function". 2. WorkspaceView type gained 'frame' (unblocks Azure build) - packages/core/src/ui-types/index.ts (ViewState.activeView) - packages/stores/src/sessionStore.ts (WorkspaceView) - apps/azure/src/components/AppHeader.tsx (local WorkspaceView) - Pre-existing breakage from c4872d1 that tsc caught: Frame route in AppHeader/usePanelsPersistence/Editor typed against a view enum that still didn't list 'frame'. All three build paths now clean. 3. Investigation-showcase seeds processMap (ADR-070) - packages/data/src/types.ts: SampleConfig gains optional processMap. - packages/hooks/src/useDataIngestion.ts: loadSample now writes sample.config.processMap into projectStore.processContext (merging with whatever context already exists), and clears a prior processMap when loading a mapless sample. - apps/pwa/src/hooks/useDataIngestion.ts + apps/azure/src/hooks/...: thread setProcessContext/getProcessContext through to the base hook. - packages/data/src/samples/investigation-showcase.ts: seeds the Fill Weight showcase with a single "Fill" step, 4 tributaries (Line as the nominated subgroup axis), CTS=Fill_Weight_g with 495/500/505, and two hunches. The Frame workspace now opens ready-made for the pre-built Findings/Questions story — no rebuild required. 4. Gap detector microcopy polish - packages/core/src/frame/gapDetector.ts: unnamed steps produced "No CTQ at "". Add …" and Step "" has no tributaries.". Now reads "No CTQ at this step …" and "This step has no tributaries …" when step.name is empty/whitespace. Named steps still get quoted. - +2 tests in gapDetector.test.ts covering both branches. Tests green: 44 frame (core), 21 ProcessMapBase (ui), 10 useDataIngestion (hooks). pr-ready-check green (turbo tests + lint + docs:check). Part of the FRAME umbrella (PRs #69/#70/#71/#72/#73/#74, ADR-070). Co-Authored-By: ruflo <ruv@ruv.net> --------- Co-authored-by: ruflo <ruv@ruv.net>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Third deliverable from the FRAME umbrella (ADR-070). Adds the interactive component the FRAME workspace will render, consuming the core primitives from #70.
Stacked on #70 (auto-rebases onto main when #70 merges). No app integration in this PR —
FrameView+ nav tab insertion land in PR #5 alongside capability-leg wiring and the end-to-end verification walk.What ships
packages/ui/src/components/ProcessMap/ProcessMapBase.tsx— the interactive component. Three regions on one canvas:Plus a hunches panel (pin to step or tributary — promoted to
SuspectedCausehubs later in Investigation) and a gap strip at the bottom rendering global gaps fromdetectGaps(). Step-scoped gaps render inline next to the affected step.V1 interactions are deliberately structured (buttons, dropdowns, inline inputs) — not a freeform drag-and-drop canvas. That comes in V2+ per ADR-070.
__tests__/ProcessMapBase.test.tsx— 21 RTL tests:packages/ui/src/index.ts— exportProcessMapBase+ProcessMapBaseProps.Test plan
pnpm --filter @variscout/ui test— 1179 tests pass (+21 from this PR)pnpm --filter @variscout/ui lint— 0 errors (15 pre-existing warnings unchanged)ProcessMapBaseinto a newFrameView.tsxin both PWA and Azure, inserts the FRAME nav tab (amends ADR-055), wires the SubgroupConfig popover to read fromprocessMap.subgroupAxes, and walks the journey end-to-end withclaude --chrome(
packages/hooks/src/__tests__/index.test.tsflakes under turbo's concurrent run — known issue perMEMORY.mdTesting Notes; passes when run alone.)Context
Plan:
.claude/plans/i-was-interviewing-greg-dynamic-umbrella.mdSpec: docs/superpowers/specs/2026-04-18-frame-process-map-design.md
ADR: docs/07-decisions/adr-070-frame-workspace.md
🤖 Generated with ruflo