Uh oh!
There was an error while loading. Please reload this page.
feat(studio): on-canvas validation badges + Problems panel for the flow builder - #1972
Merged
Conversation
…ow builder
Flow validation only surfaced as a top banner ("…N error(s)") that didn't point
to the offending element. Detection already existed in the simulator's
`validateFlowDraft` (no resolvable entry, unreachable nodes, decision with no
default branch, duplicate ids, dangling edges, un-declared cycles) — it just
wasn't shown on the canvas. This is the surfacing layer.
- flow-sim-validate: tag dangling-edge errors with their endpoints so they key
to the offending connection (per-element issues, not flow-level)
- flow-problems: new module mapping structural validation + the server
`_diagnostics` onto concrete node/edge/flow targets (+ unit tests)
- FlowCanvas / NodeCard: per-node + per-edge badges (icon + message tooltip)
and a reveal-to-element pan driven by the Problems panel
- ProblemsPanel: new panel listing every issue; click selects + reveals it
- FlowPreview: live problems memo, Problems toggle (with count), reveal handshake
- MetadataPreviewProps.diagnostics: thread the server `_diagnostics` through
ResourceEditPage (errors track live client Zod issues; warnings server-sourced)
- restore the MockResults type accidentally dropped from flow-sim-types (build fix)
Badges + rows derive from the live draft, so they clear as issues are resolved.
Closes#1945
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>The latest updates on your projects. Learn more about Vercel for GitHub. |
Contributor
✅ Console Performance Budget
📦 Bundle Size Report
Size Limits
|
os-zhuang added a commit
that referenced
this pull request
Jun 24, 2026
…s panel + canvas badges (#1934) (#1980) Build on the inline data-picker validation (#1975 / #1978) by feeding client-side expression issues into the unified flow-problems list (#1972), so they show as Problems-panel rows and on-canvas node/edge badges — discoverable at the flow level, not only when a node is open. - New pure `flow-expr-problems.ts`: scans every CEL surface (decision conditions + branch expressions, screen visibleWhen, loop collection, edge guards) for ADR-0032 brace / shape ERRORS (deterministic, scope-free) and scope-aware unknown-reference WARNINGS. The START node is skipped for the ref check — its entry condition references trigger-record fields bare, indistinguishable from a typo without the object schema (the inline check, which fetches it, still covers the start node). Template (`{var}`) values are left to the inline check. - buildFlowProblems merges them as a third source ('expression'); ProblemsPanel labels those rows "· expression". Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
os-zhuang added a commit
that referenced
this pull request
Jun 24, 2026
…oblem list Follow-up to #1972 (Problems panel + badges) and #1976 (clickable banner). The flow preview still ran validateFlowDraft TWICE per render — once in buildFlowProblems (badges / banner / panel) and again in a separate memo that derived the red node/edge ring/stroke, with the cycle-highlight logic duplicated. buildFlowProblems is now the single validation pass: a new deriveInvalidElements(problems) produces the red error set (errors only; a cycle paints its whole loop via a per-problem `highlight` set, while its badge + reveal stay on the closing edge). The preview drops its second validateFlowDraft call. The clickable banner (#1976), badges, and panel are unchanged — all four surfaces now derive from one list, so they cannot drift. Browser-verified on showcase_budget_approval (injected an un-declared cycle by flipping the resubmit back-edge → normal): clickable banner, edge badge, full-loop red paint (4 elements), and Problems count all in lock-step; reverting clears all. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
os-zhuang added a commit
that referenced
this pull request
Jun 24, 2026
…oblem list (#1977) Follow-up to #1972 (Problems panel + badges) and #1976 (clickable banner). The flow preview still ran validateFlowDraft TWICE per render — once in buildFlowProblems (badges / banner / panel) and again in a separate memo that derived the red node/edge ring/stroke, with the cycle-highlight logic duplicated. buildFlowProblems is now the single validation pass: a new deriveInvalidElements(problems) produces the red error set (errors only; a cycle paints its whole loop via a per-problem `highlight` set, while its badge + reveal stay on the closing edge). The preview drops its second validateFlowDraft call. The clickable banner (#1976), badges, and panel are unchanged — all four surfaces now derive from one list, so they cannot drift. Browser-verified on showcase_budget_approval (injected an un-declared cycle by flipping the resubmit back-edge → normal): clickable banner, edge badge, full-loop red paint (4 elements), and Problems count all in lock-step; reverting clears all. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This was referenced Jun 24, 2026
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 freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Implements #1945 — on-canvas validation badges + a Problems panel for the Studio flow builder.
Problem
Flow validation surfaced only as a top banner ("…N error(s)") that didn't point to the offending node/edge. Detection already existed in the simulator's
validateFlowDraft; this was a surfacing gap, not a detection one.What's in this PR
validateFlowDraft) + the server_diagnosticsalready attached to the layered record.Changes
flow-sim-validate.ts— dangling-edge errors now carry their endpoints so they key to the offending edge (per-element, not flow-level).flow-problems.ts(new) — maps both sources onto node/edge/flow targets;indexProblemBadgesfolds per-element badges (errors dominate warnings). Unit-tested (flow-problems.test.ts, 12 cases).FlowCanvas.tsx/flow-canvas-parts.tsx— per-element badges + a reveal-to-element pan driven by the panel.ProblemsPanel.tsx(new) — the panel.FlowPreview.tsx— live problems memo, Problems toggle (with count), reveal handshake.preview-registry.ts/ResourceEditPage.tsx— new optionaldiagnosticsprop threads the server_diagnostics(errors track live client Zod issues; warnings server-sourced).MockResultstype accidentally dropped fromflow-sim-types.ts(build fix — it's imported byflow-simulator.ts).Verification
pnpm --filter @object-ui/app-shell build(tsc) — clean.vitest— 12 new + 183 existing previews/simulator tests pass.@object-ui/app-shellpatch).Closes#1945
🤖 Generated with Claude Code