Repository navigation
feat(ui): MVP UX polish from the heuristic evaluation - #45
Merged
Merged
Conversation
# Conflicts: # CHANGELOG.md
Adds ai / verified / pending and priority tokens (light + dark) so AI-originated, human-validated and awaiting-review content stop sharing the brand red. The red fill moves to #dc2626 so white button labels pass AA (4.83:1); in dark, red used as text takes a lighter step. Muted text, the default focus outline and the active sidebar item now meet AA, and the nav indicator animates with transform.
hlmInput gave textareas the inputs' fixed h-10, so rows were ignored and story statements and Gherkin steps were clipped. Textareas now size to their content (field-sizing) from a two-line minimum. hlmLabel also styles span and legend labels, which rendered unstyled at 16px next to 14px labels.
AI status lines, review-tray and provenance labels, Gherkin hints, story status explanations, the labelled audio-source picker and its two-step virtual-meeting guidance, and the optional/required markers for the project forms. Speakers read "Participante n" in Spanish so they no longer collide with the story role.
…dges Shared presentational pieces: Given/When/Then steps behind a keyword gutter, a priority chip with a direction glyph (critical red, high orange, medium and low neutral), a review-status chip (draft = amber dashed, approved = emerald check) and an origin chip (AI from a session vs manual). Backlog stories in the chat store now keep their review status for the side panel.
…ions as AI The decision queue no longer floats over the viewport: it docks to the feed column, so the session bar (pause/stop), the header actions and the side panel stay reachable. A tray header names it, carries the counter with prev/next and minimize, and announces changes. Suggestion cards carry violet AI provenance, read the story as its sentence and criteria as Gherkin steps, highlight every field an update changes, edit in labelled auto-growing fields, and keep Discard apart from Edit/Cancel.
…reams
A status line at the live edge of each session says whether the AI is listening
(with the last suggestion's age), paused, generating the final stories after
Stop, or failed (with the backend reason). The transcript recedes into neutral
bubbles with always-visible speaker and time; human decisions become compact
rows ("accepted/resolved by the analyst"); AI-generated stories carry violet
provenance plus "awaiting review". Accepting confirms where the content went,
the load error offers a retry, and screen readers hear the review count. The
side panel gains tab semantics, labelled filters, Gherkin steps and status chips.
…te announced The picker becomes a labelled segmented control (In person / Virtual meeting) so it is never confused with the record button, which now shows a record dot and a "Record" label. The virtual-meeting guidance is a calm two-step note (share the meeting tab with its audio; wear headphones), and the missing-audio notice offers "Share again" in place. The session bar keeps its status label for screen readers on mobile and shows the meeting-audio badge on every width.
Sortable column headers with a direction arrow and aria-sort, plus a visible "sorted by" caption. Priority sorting is re-ordered by meaning on the page, since the API sorts the enum alphabetically. Rows show priority, review status and origin (AI from a session vs manual) chips, link their title for keyboard users, collapse into a chip row below sm, and use unambiguous dates. The empty state offers next steps and load errors offer a retry.
…d state The detail page leads with the story's title, review status (with what it means) and origin, linking an AI story back to its capture session. Role, action and benefit read top-down as the story sentence in full-width, auto-growing fields; Save enables only once something changed. Criteria use a Gherkin keyword gutter with labelled fields, flag new or edited rows as unsaved and only enable their own Save then. The create page shares the layout.
…tings Only the name is required, and both forms now say so. The technical profile is one clearly optional section grouped into business context (domain, architecture) and tech stack (chip lists, with an Enter-to-add hint), with placeholders that read as examples. Settings drop from eight one-field cards to General and Technical profile, each with its own Save, and the logo card is titled for the project. Chip inputs accept an id for their label, describe their hint and name each remove button.
The projects page was the only module without a visible heading; it now opens with its title and subtitle like the others, and the search field shows focus.
Light theme, 1440x900, Spanish demo data: projects list, new project and project settings, the live session (review tray, suggestion editing, an update diff, an AI question, processing after Stop), both audio sources, the backlog (default and by priority) and the story detail with its Gherkin criteria.
Tailwind's utilities are imported unlayered, so the layered override lost to .text-primary and red links stayed at 3.3:1 on navy. The override is now unlayered and wins by specificity (4.5:1 or better).
Also rewords the draft status hint so it no longer contradicts "accepted by the analyst": a draft is simply not approved yet.
…edge visible Arrow keys browse the tray and Escape minimizes it (ignored while typing); after a decision focus returns to the tray instead of the page body; focusing a feed control the tray covers minimizes it (WCAG 2.4.11). From sm the tray stops short of the feed bottom so the latest lines and the AI status stay in view; on phones its title is shortened. The audio picker no longer truncates its labels on desktop.
… fields Below sm the backlog page scrolls instead of a nested box that showed about one row. Draft status becomes an amber dashed outline so it is not mistaken for the filled orange High priority beside it. Story create/edit fields now say inline when a required field is left empty (aria-invalid + described message).
Both options split the picker evenly, which truncated "Reunión virtual". From sm each option takes its own width; on phones they still share the full row.
jhosepmyr
requested review from
Eric396,
VarBus and
salimramirez
as code owners
October 7, 2026 08:13
# Conflicts: # CHANGELOG.md
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
UX polish of the MVP screens, driven by a heuristic evaluation with six users. Builds on #43 and #44 (both merged into this branch); merge those first so this diff only shows the polish.
Impeccable critique score: live session 20 → 26 / 40, stories 20 → 24 / 40.
Brand changes to review: filled red moves from
#ef4444to#dc2626(white text failed contrast at 3.76:1, now 4.83:1), and AI content is now violet.Feature module / area: discovery / workspace / layout / shared / i18n
Related issue / US: usability findings #3–#9, #11–#13 of the MVP heuristic evaluation
Type of Change
feat— new feature or UI componentfix— bug fixrefactor— code change without behavior changetest— tests onlydocs— documentation onlybuild/ci— build, dependencies, or CI/CDchore— maintenanceChecklist
develop(notmain)feature/*,bugfix/*, orhotfix/*bun run lintpasses locally (ESLint + angular-eslint)bun run testpasses locally (Vitest) — 393 passedbun run buildpasses locally (no type errors, no budget exceeded)ChangeDetectionStrategy.OnPushand Angular signalslocalStorage/sessionStorageaccess for JWT tokens (use the auth store)bypassSecurityTrust*calls without explicit review.envcontent committedCHANGELOG.mdupdated under[Unreleased]How to Test
Screenshots / recordings (if UI changes)
Light theme, 1440×900, in
docs/screenshots/mvp/(live session, AI question, processing state, audio picker, backlog, story detail with Gherkin).Notes (optional)
Left out on purpose: