# Terminal View Audit

Audit report for the Islandflow terminal view, formatted for handoff and review. This preserves the full findings set: scorecard, anti-pattern verdict, executive summary, detailed issues, systemic patterns, positive findings, and recommended follow-up commands.

Overall Score: 11/20 Rating Band: Acceptable Severity Mix: P0 0, P1 5, P2 3, P3 1 Generated: 2026-05-14 04:32

The terminal does not read as generic AI-generated UI overall. It has a coherent instrument-panel identity, consistent density, and restrained accent use. The biggest problems are implementation quality issues: invalid nested interactive controls, inaccessible drawer behavior, weak focus treatment, mobile layouts that depend on horizontal scrolling, token drift, and repeated banned side-stripe accents.

## Audit Health Score

# | Dimension | Score | Key Finding
--- | --- | --- | ---
1 | Accessibility | 2/4 | Invalid nested interactive controls in options rows.
2 | Performance | 3/4 | Virtualization is good, but blur-heavy chrome and overlays add avoidable cost.
3 | Responsive Design | 2/4 | Core tables rely on large fixed minimum widths and horizontal scrolling.
4 | Theming | 2/4 | Token base exists, but many hard-coded colors and undefined vars bypass it.
5 | Anti-Patterns | 2/4 | Repeated side-stripe accents violate the stated design bans.
Total |  | 11/20 | Acceptable

## Anti-Patterns Verdict

Pass, with caveats.

The terminal does not look AI-generated overall. It has a coherent instrument-panel identity, consistent density, and restrained accent use. The main tells are implementation-level: banned side-stripe accents on live rows, decorative blur-heavy chrome, and some product-UI typography choices that drift toward display styling.

## Executive Summary

- Audit Health Score: 11/20 (Acceptable)
- Total issues found: 9
- Severity mix: P0: 0, P1: 5, P2: 3, P3: 1
- Top issues: nested buttons inside clickable options rows, drawers that are not true accessible dialogs, suppressed focus indicators, mobile dependence on oversized horizontal tables, and repeated banned side-stripe row styling.

## Detailed Findings By Severity

### [P1] Nested Interactive Controls Inside Clickable Row

Location: `apps/web/app/terminal.tsx:7118-7135`, `apps/web/app/terminal.tsx:7155-7179`

Category: Accessibility

Impact: Decorated option rows render as outer `<button>` elements containing inner contract-focus `<button>` elements. This is invalid HTML and can create inconsistent tab order, click handling, and screen-reader output.

WCAG/Standard: WCAG 4.1.2 Name, Role, Value; HTML interactive content nesting rules

Recommendation: Split row selection and contract focus into non-nested controls. Use a non-button row container with one explicit action button, or keep the row as the only button and turn inner controls into non-interactive text.

Suggested command: `$impeccable harden terminal view`

### [P1] Drawer Panels Are Visually Drawers, Not Accessible Dialogs

Location: `apps/web/app/terminal.tsx:4524-4629`, `4639-4737`, `4747-4841`, `4850-4952`, close handling at `5070-5102`

Category: Accessibility

Impact: The drawers close on outside click and `Escape`, but they lack `role="dialog"`, `aria-modal`, focus entry, focus return, and trap behavior. Keyboard users can tab behind the drawer and lose context.

WCAG/Standard: WCAG 2.1.1 Keyboard, 2.4.3 Focus Order, 4.1.2 Name, Role, Value

Recommendation: Promote drawers to true modal dialogs with labelled titles, initial focus, focus containment, inert background, and focus restoration on close.

Suggested command: `$impeccable harden terminal view`

### [P1] Focus Indicators Are Suppressed In Multiple Core Controls

Location: `apps/web/app/globals.css:325-327`, `413-415`, `1054-1058`, `1213-1218`

Category: Accessibility

Impact: Several controls explicitly remove the browser outline. Some surfaces get only a subtle background shift, which is weaker than a reliable visible focus ring, especially in dense data views.

WCAG/Standard: WCAG 2.4.7 Focus Visible

Recommendation: Restore strong `:focus-visible` treatment on inputs, row buttons, and inline instrument actions using a consistent high-contrast ring or border treatment.

Suggested command: `$impeccable harden terminal view`

### [P1] ARIA Table Semantics Are Incomplete

Location: `apps/web/app/terminal.tsx:7061-7075`, `7251-7259`, `7348-7359`, `7496-7505`, `7609-7616`, `7732-7739`

Category: Accessibility

Impact: The app uses `role="table"` and `role="row"` but not full table semantics such as `rowgroup`, `columnheader`, and cell roles. Screen readers will get a weaker structural model than a real table or fully formed ARIA grid.

WCAG/Standard: WCAG 1.3.1 Info and Relationships

Recommendation: Prefer semantic `<table>` markup where possible, or complete the ARIA table structure consistently.

Suggested command: `$impeccable harden terminal view`

### [P1] Narrow-Screen Experience Depends On Oversized Horizontal Tables

Location: `apps/web/app/globals.css:967-1009`, `1116-1144`, `1645-1714`

Category: Responsive Design

Impact: Major views keep `min-width` values like `1280px`, `1260px`, `900px`, and `820px`. The mobile fallback is horizontal scroll rather than structural adaptation, which increases cognitive load and makes comparison harder on phones and small tablets.

WCAG/Standard: Responsive design best practice

Recommendation: Define compact column sets, progressive disclosure, or cardless stacked row summaries under mobile breakpoints instead of preserving full desktop schema.

Suggested command: `$impeccable adapt terminal view`

### [P2] Touch Targets Are Below Recommended Minimum In Key Controls

Location: `apps/web/app/globals.css:255`, `330-347`, `365-379`, `461-468`

Category: Responsive Design

Impact: Controls and chips commonly bottom out around `32px` height. That is workable on desktop, but it is tight for touch use and increases mis-taps on mobile.

WCAG/Standard: WCAG 2.5.5 Target Size (AAA), platform mobile guidance

Recommendation: Raise interactive height to at least `40px`, ideally `44px`, for topbar controls, focus chips, and filter triggers under touch breakpoints.

Suggested command: `$impeccable adapt terminal view`

### [P2] Token Discipline Is Partial, Not Consistent

Location: `apps/web/app/globals.css:41`, `306`, `321`, `362`, `375`, `479`, `502`, `565`, `616`, `763`, `1452-1470`

Category: Theming

Impact: The file starts with a clear token layer, but many later rules bypass it with hard-coded hex values. That makes palette evolution and future theme work harder.

WCAG/Standard: Theming and system quality

Recommendation: Replace one-off literals with named variables, especially amber text variants, chart surface background, and severity-strip foreground colors.

Suggested command: `$impeccable polish terminal view`

### [P2] Undefined CSS Variables Create Silent Theming Bugs

Location: `apps/web/app/globals.css:398`, `1186`

Category: Theming

Impact: `var(--text-muted)` and `var(--muted)` are referenced but not defined in `:root`. Those declarations will fail and fall back to inherited color, which makes the result fragile and inconsistent.

WCAG/Standard: CSS correctness

Recommendation: Replace them with existing tokens such as `--text-dim` or define the missing variables explicitly.

Suggested command: `$impeccable harden terminal view`

### [P2] Blur-Heavy Chrome Is Overused For Product UI

Location: `apps/web/app/globals.css:174-176`, `518-525`, `1504-1506`

Category: Performance / Anti-Pattern

Impact: `backdrop-filter: blur(12px)` and `blur(18px)` on persistent UI surfaces add cost and push the product UI slightly toward decorative glass treatment, which the design rules explicitly warn against as a default.

WCAG/Standard: Performance and product-design guidance

Recommendation: Keep blur only where separation is essential, or replace it with tonal contrast and border treatment.

Suggested command: `$impeccable quieter terminal view`

### [P3] Side-Stripe Row Accents Are Repeated Across Tables

Location: `apps/web/app/globals.css:1092-1114`, `1221-1224`

Category: Anti-Pattern

Impact: The interface repeatedly uses `border-left: 3px` to communicate severity, direction, and classifier state. That is one of the skill's explicit banned patterns and makes rows feel more template-like than intentional.

WCAG/Standard: Design-system rule

Recommendation: Move semantic emphasis into full-row tinting, chips, iconography, or stronger text hierarchy instead of colored side rails.

Suggested command: `$impeccable polish terminal view`

## Patterns And Systemic Issues

- Accessibility semantics are strongest at the surface level, labels and buttons exist, but weaker in composite patterns, drawers, virtualized tables, and focus handling.
- The responsive strategy is mostly preserve desktop density and allow scrolling, not restructure the workflow for narrow screens.
- The CSS starts from a tokenized system, then drifts into literal color values in later component rules.
- The visual system is disciplined overall, but a few repeated product bans, side stripes and default blur, show up across multiple components.

## Positive Findings

- The terminal has a clear, distinctive product identity without falling into meme-trader styling.
- Virtualized list rendering is the right performance baseline for these dense live data views.
- The top-level shell and pane structure are predictable and support fast scanning.
- Core inputs are labelled, and many actionable rows are implemented as real buttons instead of click-only divs.
- Color usage is generally restrained and semantically meaningful, even where implementation cleanup is still needed.

## Recommended Actions

1. [P1] `$impeccable harden terminal view`: Fix nested buttons, accessible dialog behavior, focus visibility, and incomplete ARIA table semantics.
2. [P1] `$impeccable adapt terminal view`: Redesign narrow-screen table behavior and increase touch target sizes in the shell and filter controls.
3. [P2] `$impeccable quieter terminal view`: Reduce default blur and glass treatment in topbar, popover, and drawer chrome.
4. [P2] `$impeccable polish terminal view`: Normalize tokens, remove hard-coded color drift, and replace banned side-stripe accents.
5. [P2] `$impeccable polish terminal view`: Final cleanup pass once the structural fixes are in.