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

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

Re-run $impeccable audit after fixes to see the score improve.