How the no-mistakes TUI Renders Run Status, Findings, and Approval Actions

The no-mistakes TUI renders pipeline runs as a three-layer interface: a color-coded pipeline box showing step statuses, a contextual action bar that appears only during approval steps, and a scrollable findings viewport with severity-sorted issues.

The open-source kunchenguid/no-mistakes repository provides a terminal UI (TUI) that transforms complex CI/CD workflows into an interactive visual experience. Understanding how this no-mistakes TUI renders run status, findings, and approval actions requires examining the specific rendering pipeline that converts raw run data into structured terminal output.

Architecture of the TUI Rendering Pipeline

The rendering system spans three distinct layers across the codebase. Each layer handles a specific concern: data transformation, pipeline visualization, and findings display.

• Data Layer: internal/cli/axi_render.go converts database and IPC structures into view models.
• Presentation Layer: internal/tui/pipeline.go draws the pipeline box and manages the action bar visibility.
• Content Layer: internal/tui/findings.go parses JSON findings and renders the scrollable viewport.

This separation ensures that the UI updates atomically when ipc.EventStepCompleted events arrive, maintaining consistency between the pipeline state and the actionable findings.

Building the Run View from IPC Events

In internal/cli/axi_render.go, the functions runViewFromDB and runViewFromIPC transform a db.Run or RunInfo IPC message into a runView struct. This struct pre-computes the data needed for rendering:

// Conceptual representation of the view construction
type runView struct {
    Steps       []StepView
    awaitingStep *StepView
    findingsTally string // "E 2 W 1 I 0"
}

The runView aggregates findings by severity and identifies the current awaiting step via runView.awaitingStep(). The findingsTally() method generates the title string for the findings box, such as Findings – E 1 W 2, which appears in the viewport header.

Rendering the Pipeline Box and Action Bar

The internal/tui/pipeline.go file contains the renderPipelineBox function, which iterates over runView.Steps to construct the visual pipeline. For each step, it renders:

1. A status icon (▶, ✅, ⏸️)
2. The step name
3. A conditional suffix when StepStatusAwaitingApproval is active

When a step awaits approval, the renderer appends ‑ awaiting approval in a dim style:

// From internal/tui/pipeline.go
if step.Status == StepStatusAwaitingApproval {
    line = dimStyle.Render(step.Name + " - awaiting approval")
}

The action bar appears only when awaitingStep() returns a non-nil value. The bar is assembled at line 376+ in pipeline.go and includes these key bindings:

• a: approve
• r: reject
• s: skip
• d: toggle diff/findings

This conditional rendering ensures that approval shortcuts are never displayed during automatic steps, reducing cognitive load.

Displaying Findings in the Scrollable Viewport

Findings rendering lives in internal/tui/findings.go, specifically within renderFindingsRange and renderParsedFindingsViewport. When the awaiting step contains findings, pipeline.go calls renderFindingsWithSelection, which:

1. Parses the JSON-encoded findings array (via parseFindings in tui/review.go)
2. Groups items by severity (error, warning, info)
3. Renders each finding with an icon (⛔ error, ⚠️ warning, ℹ️ info) and file/line metadata

The viewport limits visible items based on maxVisible and displays a scroll indicator (▾) when additional findings exist below the fold.

When users press d, the UI toggles showDiff, switching the lower panel between diff output and the findings list. This state is managed in pipeline.go and reset to false automatically when a step completes without diff data, as verified in tui/stale_error_test.go.

Example TUI Output

When a Review step awaits approval with one error and two warnings, the interface renders as follows:

┌─ Pipeline ────────────────────────┐
│ ▶ PR          ✅
│ ▶ Lint        ✅
│ ▶ Test        ✅
│ ▶ Review      ⏸️  - awaiting approval
└────────────────────────────────────┘
┌─ Findings – E 1 W 2 ────────────────┐
│ ⛔ error   main.go:12  nil pointer
│ ⚠️ warning file.go:33  unused var
│ ⚠️ warning foo.go:8   shadowed name
│ ▾
└────────────────────────────────────┘
┌─ Actions ──────────────────────────┐
│ a  approve   r  reject   s  skip   d  diff/findings
└────────────────────────────────────┘

This layout follows the design specification in internal/tui/DESIGN.md, ensuring the pipeline flow remains visible while focusing attention on findings requiring decisions.

Summary

• The no-mistakes TUI uses a three-stage rendering pipeline: view construction in axi_render.go, pipeline drawing in pipeline.go, and findings parsing in findings.go.
• The action bar appears conditionally only when StepStatusAwaitingApproval is detected, offering keys a, r, s, and d for immediate interaction.
• Findings are severity-sorted and displayed in a scrollable viewport with icons (⛔, ⚠️, ℹ️) and a dynamic title showing counts (E/W/I).
• The d key toggles between diff and findings views, managed by the showDiff state variable that resets automatically on step completion.
• Layout hierarchy follows the design document: pipeline box → action bar → findings/diff box.

Frequently Asked Questions

What triggers the action bar to appear in the no-mistakes TUI?

The action bar renders only when awaitingStep() returns a non-nil step, which occurs when a step has StepStatusAwaitingApproval. This logic resides in internal/tui/pipeline.go and ensures approval shortcuts are hidden during automatic processing.

How does the TUI handle large numbers of findings?

The findings viewport in internal/tui/findings.go implements pagination via maxVisible limits. When findings exceed the viewport height, a scroll indicator (▾) appears, and users can navigate through the list while the severity count (E/W/I) remains visible in the box title.

What keyboard shortcuts are available during approval steps?

When awaiting approval, the action bar displays four shortcuts: a (approve), r (reject), s (skip), and d (toggle diff/findings). These are hardcoded in pipeline.go and mapped to IPC actions that update the run state.

Where is the layout design documented?

The visual hierarchy—pipeline box above action bar above findings/diff box—is specified in internal/tui/DESIGN.md. This document defines the compact, color-coded layout that keeps the pipeline flow visible while surfacing actionable findings.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}