#126 - feat: shell UX overhaul — page-scoped search, redesign & mobile - haskytech/operator

mathias commented

2026-06-19 07:25:08 +00:00

Owner

Desktop + mobile UX overhaul of the HaskyOS Shell, built locally and reviewed screenshot-by-screenshot. Four scoped commits: (1) page-scoped search, (2) shell redesign/layout/polish/branding, (3) mobile responsiveness, (4) favicon. tsc clean. Follow-ups (separate): error boundary so a bad page does not blank the SPA, scoped-search sweep to remaining pages, undefined-token/badge cleanup.

mathias added 4 commits

2026-06-19 07:25:08 +00:00

feat(search): page-scoped search in the top bar 569ddbdf27

Add a PageSearch context so list pages can opt into current-page
filtering. The top SearchBar becomes a scoped filter on those pages
(showing e.g. "Search workstreams…") and falls back to the existing
global entity search elsewhere. Wire it into Workstreams and the
client Registry as the first two pages; the magnifier icon is now a
proper SVG.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat(ui): redesign app shell — layout, polish & branding 3e2efd6468

Restructure the shell around a cleaner, lighter frame:

- Right Activity/Chat panel is now an on-demand drawer (closed by
  default) toggled from a bare icon in the top-right corner; widen
  toggle on the left of the tabs, drawer icon (not an X) closes it.
- Sticky page header with a large module-coloured title and the
  search below it; content centred at 1200px on a white canvas.
- Left-nav toggle moved beside the logo; real HaskyOS wordmark logo
  (track src/assets PNGs past the global *.png ignore).
- Cards and table rows are borderless light-grey surfaces; removed
  the chrome separator lines (header, search bar, table header,
  footer) and the sidebar's right border for a cleaner look.
- Restore the module-coloured active nav accent.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat(mobile): responsive top bar, off-canvas nav & scrollable tables

CI / Detect Changes (pull_request) Has been cancelled

Details

CI / Frontend (pull_request) Has been cancelled

Details

CI / Docker Build (pull_request) Has been cancelled

Details

0defbbeb28

Make the shell usable on phones (<=768px):

- Dedicated mobile top bar: hamburger (left) opens the left nav as an
  off-canvas drawer over a backdrop; HaskyOS logo centred; Activity/
  Chat drawer toggle on the right. The desktop sidebar and corner
  toggle hide at this width.
- Tables scroll horizontally (display:block + overflow-x) so wide
  tables never break the layout, with columns staying aligned.
- Status bar / filter chips wrap, cards go single-column, search
  spans full width, title scales down.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat(ui): add HaskyOS favicon

CI / Detect Changes (pull_request) Has been cancelled

Details

CI / Frontend (pull_request) Has been cancelled

Details

CI / Docker Build (pull_request) Has been cancelled

Details

b7ef894eef

Use the "OS" brand mark as the favicon (public/favicon.png) and link
it from index.html. Track public PNGs past the global *.png ignore.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

mathias added 1 commit

2026-06-19 07:59:19 +00:00

fix(mobile): full-screen drawer, kill off-canvas glow, contain page scroll

CI / Detect Changes (pull_request) Has been cancelled

Details

CI / Frontend (pull_request) Has been cancelled

Details

CI / Docker Build (pull_request) Has been cancelled

Details

f8b89a5e22

- Off-canvas sidebar and right drawer only cast their box-shadow while
  open, so the shadow no longer bleeds in as a glow on the screen
  edges when they're parked off-screen.
- Right Activity/Chat drawer goes full-screen on mobile; hide the
  widen toggle (redundant at full width) so there's a single close
  control and no duplicate drawer icon.
- Clamp horizontal overflow on the shell/content containers so pages
  only scroll vertically; wide elements like tables keep their own
  horizontal scroll.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

mathias added 1 commit

2026-06-19 08:27:10 +00:00

fix(mobile): collapse fixed grids and scroll dense rows on small screens

CI / Detect Changes (pull_request) Has been cancelled

Details

CI / Frontend (pull_request) Has been cancelled

Details

CI / Docker Build (pull_request) Has been cancelled

Details

cbac7d79e1

Per-page mobile sweep so detail/admin/finance pages aren't cramped:

- Tag fixed two-column inline grids (deal/contact/issue forms, deal &
  contact detail info blocks, orchestrator, pipeline/contacts/campaigns
  create forms) with `.mcol`, which collapses them to one column under
  768px (stylesheet !important overrides the inline grid).
- Wrap the weekday calendar (Actions) and the deal stage-progress row
  in horizontal scroll containers so they scroll instead of squishing
  or clipping.

Verified at 390px across deal/contact/project/PNL/actions — pages
scroll vertically only; wide elements scroll inside themselves.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

mathias added 3 commits

2026-06-19 08:52:23 +00:00

fix(ui): define missing design tokens, badge & button variants d5e09c8121

A cluster of CSS custom properties and class modifiers were referenced
across the app but never defined, so they rendered wrong:

- Add :root aliases (on-palette) for --text-muted (used in 6 files, was
  rendering dimmed text at full black), --dim, --hover, --primary,
  --success, --danger, --c-red, --healthy, --bg-primary, --accent-bg,
  and --mod-ops/--mod-clients/--mod-knowledge (+ their -bg).
- Add the missing badge--healthy/neutral/muted classes (status badges
  were rendering as colorless pills) and fix badge--closed.
- Add the missing btn--danger/critical/warning/success/info/active
  classes (delete/close buttons had no danger styling).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat(search): extend page-scoped search to more list pages 6347bbfa1d

Wire usePageSearch into Pipeline (deals), Project Registry, Issue
Management and Campaigns so the top search bar scopes to the current
page's list, matching Workstreams and the client Registry.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

fix(ui): drop fake/hardcoded stats on Patrol and Playbooks

CI / Detect Changes (pull_request) Successful in 5s

Details

CI / Frontend (pull_request) Successful in 25s

Details

CI / Docker Build (pull_request) Successful in 44s

Details

2aba54bcbb

- Patrol "All Clear" no longer shows a fake-computed "Next sweep in
  ~30 minutes" (the expression always yielded 30); say it plainly.
- Playbook cards drop the always-zero "Used by: 0 projects" line, and
  the status bar drops the redundant "N in use" (it equalled total).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>