RecordHeader's action-button cluster crowded/overlapped the client name on
narrow phones, and DataTable (Tickets, etc.) ran wider than the viewport,
clipping columns with no way to reach them.
Add a <=640px media query: .wf-rec wraps so .wf-rec-actions drops to its
own full-width row below the avatar/name/meta; desktop layout is untouched
outside the query. Wrap DataTable's <table> in a new .wf-table-wrap div
that scrolls horizontally on overflow at that breakpoint (nowrap cells so
the table can exceed 100% instead of being squeezed illegibly), keeping
the page body itself from scrolling sideways.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Column headers are now sortable across every table in the app (one shared component).
Sort compares cell text — numeric columns by their leading number, else natural text.
Sorting preserves the original row index so onRowClick/rowTone keep pointing at the
right record; action columns (empty label) aren't sortable. asc → desc → off cycle.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Add a `data-palette` theme axis (neutral ground) alongside mode + accent:
Warm (default), Slate, Graphite, Zinc — selectable in Settings > Appearance,
persisted per browser. Backward-compatible: `warm` needs no attribute so the
existing look is unchanged; accent (7 hues) and light/dark stay orthogonal.
Swap the UI font Inter -> Geist Variable + Geist Mono Variable (bundled offline).
Add the `.dash-*` cockpit styles finishing the redesigned Dashboard markup
already in tree (flat Today hero, KPI row, reminder queue, bento sections;
low-colour, red reserved for real failures).
packages/ui theme.ts/tokens.css/ThemeSwitcher.tsx are shared — restyles every
page. Typecheck clean; 410 tests pass.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- The 7-swatch accent selector is removed from the top bar (it now lives only
in Settings > Appearance); the bar keeps a single compact light/dark ModeToggle.
This declutters the header and fixes most of the mobile congestion.
- Mobile pass (<=640px): search takes the bar, Ctrl-K hint + Gmail pill hidden,
avatar-only user chip; pages get real padding + bottom room; toolbars/chips
wrap with air; inputs full-width & 42px tall; stats 2-up; tables padded.
- Billing composer: client search + line-item cards go full-width and stack on
phones (composer-search / composer-line classes) so no container is undersized.
typecheck + web build clean, web tests 4/4.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Red-team frontend clusters (a11y + UX + code quality), three coordinated passes:
Accessibility:
- DataTable clickable rows keyboard-operable (role=button, tabindex, Enter/Space).
- <main> landmark + skip link; icon-only buttons get aria-labels; inputs relying
on placeholder alone get aria-labels; AWS-ranking link is a real <button>;
Login fields wrapped in a <form> so Enter submits from either field; toasts
role=alert for errors (urgency not by color alone).
UX safety:
- 'Notify all' and reminder 'Send' now behind ConfirmDialogs naming the count/
client; document action bar disables while an action is in flight (no
double-submit dupes); SendDialog surfaces why a send is blocked instead of
failing silently; client search + ticket search debounced (~300ms); inline
Client-360 edit failures surface via toast, not an off-screen banner; LivePreview
gets a real Retry; destructive client-status transitions confirm first.
Code quality:
- ErrorBoundary wraps the app (a render throw no longer white-screens).
- useData clears stale data on dep change (no record flashing under a new id).
- Shared ErrorBoundary/SecretField/Pager components extracted; Pager adopted in
Documents; write-call api types tightened off Record<string,unknown>.
typecheck clean (root + both workspaces), web build clean, web tests 4/4, full
suite 388 green.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
27 adversarially-confirmed findings from the multi-agent whole-branch review (2 deferred).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- ConfirmDialog: a rejected onConfirm no longer closes the dialog as if it
succeeded; the rejection is handled (no unhandledrejection), busy clears,
and the error message is shown inline (role=alert)
- ConfirmDialog: Cancel / scrim / Escape / X are gated while busy, so the
dialog cannot be dismissed (and onClose cannot double-fire) mid-flight
- Dialog: Escape + Tab trap moved to a document-level keydown listener so
they still work when focus escapes the card (e.g. lands on <body>)
- Dialog: focus restore now runs via effect cleanup, covering the
{show && <Dialog/>} unmount-while-open pattern
- Dialog: initial focus skips disabled controls
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
POS, back office, store-server, all packages, workspace configs, README/
BUILDING, and the WIP HQ-2 plan — everything except gitignored data
(client import staging, .env, local DBs).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Thomas Joise
Thomas Joise