Skip to content

[Feature]: Add a redraw heatmap overlay for repaint debugging #282

Description

@forketyfork

Title: [Feature]: Add a redraw heatmap overlay for repaint debugging

Labels: feature, major

Status Quo

Architect has metrics and logging, but there is no spatial debugging tool that shows what part of the UI or terminal content was rerendered on a given frame. When typing feels slow or rendering seems wasteful, the only current options are code inspection and log-based tracing. The overlay system in src/ui/ is already the right place for a developer-facing visualization layer, but no redraw-debug component exists today.

Objectives

Give developers a visual tool to understand redraw behavior in real time. When enabled, Architect should highlight recently rerendered regions with a fading color overlay so it is obvious whether the app is repainting only what changed or repainting much more than necessary.

User Flow

Trigger: The developer enables redraw-debug mode.

  1. The developer turns on redraw visualization through a debug setting or shortcut.
  2. As terminal content or UI changes are rendered, Architect records the affected region and shows a fading overlay.
  3. The developer types, scrolls, opens overlays, or switches modes and watches which regions flash.

Result: Redraw behavior is easy to inspect visually without reading logs.

Scope

In scope:

  • Add a developer-facing redraw-visualization mode with fading colored highlights.
  • Visualize at least terminal-content rerenders, with room to distinguish content rerenders from whole-frame redraws later.

Out of scope:

  • Exact GPU-driver-level damage reporting.
  • Shipping the overlay as always-on user-facing UI.

Implementation Plan

Affected Modules

  • src/render/renderer.zig: emit redraw region information when terminal content is rerendered.
  • src/ui/components/: add a new overlay component that renders fading highlight rectangles.
  • src/ui/root.zig: register and render the new debug component.
  • src/app/runtime.zig: wire toggle behavior and pass per-frame redraw data through the existing UI and render flow.
  • src/config.zig: optional config flag if the mode should be user-configurable.
  • docs/configuration.md: document the debug toggle if it is exposed in config.

Tasks

  1. Define a redraw-debug data model for recording rerendered regions per frame. src/render/renderer.zig or a small shared module
  2. Emit redraw events for terminal content rerenders in grid and full-screen paths. src/render/renderer.zig
  3. Add a UI overlay component that renders fading highlight rectangles on top of the scene. src/ui/components/, src/ui/root.zig
  4. Add a debug toggle path through runtime and optional config or shortcut plumbing. src/app/runtime.zig, src/config.zig
  5. Write tests for region lifecycle, fade timing, toggle behavior, and near-zero overhead when disabled.
  6. Update docs/configuration.md if a config toggle is added.
  7. Update docs/ARCHITECTURE.md to document the redraw-debug overlay and data flow.

New Dependencies

None

Acceptance Criteria

  • Developers can enable and disable redraw visualization without changing production behavior.
  • Recently rerendered regions are highlighted with a visible fade-out effect.
  • The overlay distinguishes meaningful redraw activity well enough to debug repaint behavior.
  • Tests cover the happy path and documented edge cases.
  • docs/configuration.md is updated if config is added.
  • docs/ARCHITECTURE.md is updated.
  • Pre-commit hooks pass.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureNew feature or requestlargeLarge-sized feature work

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions