Coded flow report (v4, Addendum B)

Analyze live, coded apps in the browser.

The Coded Flow Report is generated when you analyze a live web app using the Blue Painter Inspector browser extension. It applies the same buildability, complexity, and accessibility checks to your implemented flows—plus implementation-specific checks on real DOM and CSS.

Report sections

Coded Flow Overview — Flow steps (URL/route names), implementation complexity score, responsive/A11y/colorblind summary badges
Issues View — Same issue system as Figma analysis, plus implementation-specific types: "Focus trap in modal," "Keyboard navigation skips element," "Text contrast fails WCAG 2.2 at 3.0:1"
Design vs Implementation Comparison — When linked to a design analysis: side-by-side Figma screen vs live step; differences in component usage, layout, states present/missing, A11y and contrast

Checks run on code (Addendum B 7.4)

Flow complexity and path analysis, responsive behavior at multiple viewports (e.g. 320, 375, 768, 1024, 1440), accessibility (contrast using computed colors, ARIA roles, alt text, focus order, label associations), colorblind safety on actual CSS palette, optional performance-related UX flags (CLS, slow transitions).

See Capture from live app for setup. Coded flows integrate with analytics (drop-off correlation) and CI/CD (headless flow replay, gates on A11y/responsive baseline).