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

> Explore the no-mistakes TUI and learn how it visually represents pipeline run status, approval actions, and findings. Understand its three layer interface for clear insights.

- Repository: [Kun Chen/no-mistakes](https://github.com/kunchenguid/no-mistakes)
- Tags: internals
- Published: 2026-07-04

---

**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`](https://github.com/kunchenguid/no-mistakes/blob/main/internal/cli/axi_render.go) converts database and IPC structures into view models.
- **Presentation Layer**: [`internal/tui/pipeline.go`](https://github.com/kunchenguid/no-mistakes/blob/main/internal/tui/pipeline.go) draws the pipeline box and manages the action bar visibility.
- **Content Layer**: [`internal/tui/findings.go`](https://github.com/kunchenguid/no-mistakes/blob/main/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`](https://github.com/kunchenguid/no-mistakes/blob/main/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:

```go
// 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`](https://github.com/kunchenguid/no-mistakes/blob/main/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:

```go
// 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`](https://github.com/kunchenguid/no-mistakes/blob/main/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`](https://github.com/kunchenguid/no-mistakes/blob/main/internal/tui/findings.go), specifically within `renderFindingsRange` and `renderParsedFindingsViewport`. When the awaiting step contains findings, [`pipeline.go`](https://github.com/kunchenguid/no-mistakes/blob/main/pipeline.go) calls `renderFindingsWithSelection`, which:

1. Parses the JSON-encoded findings array (via `parseFindings` in [`tui/review.go`](https://github.com/kunchenguid/no-mistakes/blob/main/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`](https://github.com/kunchenguid/no-mistakes/blob/main/pipeline.go) and reset to `false` automatically when a step completes without diff data, as verified in [`tui/stale_error_test.go`](https://github.com/kunchenguid/no-mistakes/blob/main/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`](https://github.com/kunchenguid/no-mistakes/blob/main/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`](https://github.com/kunchenguid/no-mistakes/blob/main/axi_render.go), pipeline drawing in [`pipeline.go`](https://github.com/kunchenguid/no-mistakes/blob/main/pipeline.go), and findings parsing in [`findings.go`](https://github.com/kunchenguid/no-mistakes/blob/main/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`](https://github.com/kunchenguid/no-mistakes/blob/main/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`](https://github.com/kunchenguid/no-mistakes/blob/main/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`](https://github.com/kunchenguid/no-mistakes/blob/main/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`](https://github.com/kunchenguid/no-mistakes/blob/main/internal/tui/DESIGN.md). This document defines the compact, color-coded layout that keeps the pipeline flow visible while surfacing actionable findings.