transcript/.impeccable/critique/2026-07-11T18-50-55Z__src-app-ts.md

target, total_score, p0_count, p1_count, timestamp, slug

target	total_score	p0_count	p1_count	timestamp	slug
src/app.ts + src/styles.css	23	0	4	2026-07-11T18-50-55Z	src-app-ts

Method: degraded single-context (no sub-agent tool exposed; browser automation unavailable)

Design critique — src/app.ts + src/styles.css

Design Health Score

#	Heuristic	Score	Key issue
1	Visibility of System Status	3	Status exists, but visual priority competes with actions.
2	Match System / Real World	2	Settings copy mixes user language with API/model jargon.
3	User Control and Freedom	2	Modal has close/cancel, but no Escape handling found.
4	Consistency and Standards	2	Many button/control styles and decorative effects for one small tool.
5	Error Prevention	2	Validation exists; settings still exposes too many easy-to-misconfigure fields.
6	Recognition Rather Than Recall	2	Icon compact buttons are accessible, but visually require recognition/hover/title memory.
7	Flexibility and Efficiency	3	Hotkey and compact dictation flow are strong.
8	Aesthetic and Minimalist Design	1	Heavy gradients, glow, blur, shadows, and ambient decoration fight the minimal goal.
9	Error Recovery	3	Inline modal errors and focus recovery are good.
10	Help and Documentation	1	Little contextual help for Docker/API, insertion mode, or failures.
Total		23/40	Acceptable, but visually overworked.

Anti-patterns verdict

LLM assessment: the interface has a recognizable AI-era dark glass look: violet ambient orbs, radial gradients, glow pills, blurred panels, rounded cards, and many icon buttons. The core product is a transcription utility; it should feel calm, direct, and task-first.

Deterministic scan: detect.mjs --json src returned []. No bundled Impeccable detector issues.

Browser evidence: skipped; no browser automation package/MCP available in this session.

What works

• Core workflow is small: record, edit, copy/insert/save/clear.
• Recent accessibility work helped: modal focus trap, inert, visible labels, reduced motion, inline errors.
• Dictation overlay/review is a good product idea and should stay, but quieter.

Priority issues

P1 — CSS height syntax is broken

src/styles.css:52-53 has height: 100dvh without a semicolon before min-height. This can invalidate sizing and risks reviving the window-collapse bug.

Fix: make it two clean declarations.

P1 — The visual system is too decorative for a utility

Metrics: src/styles.css has 1373 lines, 174 selectors, 18 gradients, 8 backdrop-filter references, 15 box-shadows, and ambient animated decoration. For a small desktop transcription tool, this is visual noise.

Fix: remove ambient orbs/grid, most radial gradients, most shadows, and glass blur. Use flat surfaces, one border, one accent.

P1 — Primary screen hierarchy is crowded

The main screen has status, record, four compact action buttons, message, secondary actions, editor, diagnostics. Many elements have similar weight, so the primary job—record and review text—does not dominate.

Fix: keep one primary action, move rare actions into a small overflow/menu or footer row, make the editor the main object.

P1 — Settings modal exposes implementation detail too early

Mode, endpoint, model, API key, hotkey, insertion, privacy are all in one modal. This feels like a developer config panel, not a minimal product UI.

Fix: split into three plain groups: Recording, Output, Advanced. Hide endpoint/model under Advanced unless Docker/API is chosen.

P2 — Frontend is hard to reshape safely

src/app.ts is 1367 lines and src/styles.css is 1373 lines. Design changes require editing a large procedural DOM file and a large global stylesheet.

Fix: minimal split only: Topbar, EditorPane, SettingsDialog, DictationOverlay, plus tokens.css.

P2 — Product copy should be calmer and less technical

Examples: Docker / API, Endpoint, Modelo no servidor, api_key, Whisper integrado. Good for developers, rough for normal users.

Fix: use user-facing labels first, technical details second: “Transcrição local”, “Servidor local”, “Chave da API”, “Modelo”.

Persona red flags

• Alex, power user: wants speed; compact hotkey helps, but action clutter slows scanning.
• Jordan, first-timer: sees Docker/API/model/endpoint and may not know what is safe to touch.
• Sam, keyboard/screen-reader user: core fixes are good, but modal should support Escape and visible grouping should be simpler.

Recommended direction

Make the app quiet: dark flat shell, one accent, editor-first layout, fewer controls visible, settings simplified. Do not add a design system framework or dependency.