Illustration assets for the PR: login submit-button contrast and the
sidebar keyboard focus ring, before vs after. Whitelist docs/ subfolder
images in .gitignore so curated screenshots are tracked.
First incremental pass at issue #86, focused on the universal entry
points and primary navigation. All changes verified in-browser with the
axe-core engine (0 violations on the surfaces below) plus manual keyboard
testing, on both desktop (1280px) and mobile (390px).
Login / first-run setup (static/login.html)
- Add a real <h1>, wrap content in <main> + <footer> landmarks.
- Mark the decorative boat SVG aria-hidden.
- Errors now use role="alert" so screen readers announce them.
- "Remember me" checkbox is keyboard-focusable (was display:none) with an
accessible name and a focus ring; dynamic 2FA field gets a linked label.
- Darken the brand-red submit button so white text clears WCAG AA 4.5:1
(was ~3.2:1); add visible :focus-visible rings.
App shell (static/index.html, static/style.css)
- Remove invalid role="region" from the <main> chat container (it was
overriding the implicit main landmark).
- Add a persistent, visually-hidden <h1> inside <main> so the page always
exposes one logical level-1 heading — works even on mobile where the
sidebar (with the visible brand) is hidden off-canvas.
- Add a reusable .a11y-visually-hidden utility.
- Raise chat-title, model-picker, settings-helper and notes text contrast
above 4.5:1 (were 2.8-3.9:1).
Keyboard nav + dialogs (static/js/a11y.js - new)
- Make the click-only <div> sidebar navigation (New Chat, Search, Brain,
Calendar, Compare, Cookbook, Deep Research, Gallery, Library, Notes,
Tasks, Theme, account) focusable and Enter/Space-activatable, announced
as buttons (skipping role=button where a nested control would create a
nested-interactive violation). Visible focus ring reused from existing
.list-item:focus-visible.
- Upgrade modals (.modal-content and the docked .notes-pane) to labelled
role="dialog" + aria-modal, and normalise their title to heading level 2
so heading order stays valid. A MutationObserver covers runtime-rendered
rows and modals.
Decorative background canvases (static/js/theme.js)
- Mark all 7 bg-effect canvases aria-hidden.
Notes & Tasks (static/js/notes.js, static/js/tasks.js)
- Label the icon-only Note/To-do toggle pills (fixes a critical
button-name issue) and track aria-pressed state.
- Improve Notes header-button + empty-state contrast.
- Give the Tasks sort <select> an accessible name (fixes a critical
select-name issue).
Remaining data-dense tool modals (Tasks cards, Calendar, Gallery, Email,
Cookbook, Compare, Deep Research) still have muted-text contrast to polish
and are the next incremental step, per the issue's own guidance.
Replace the flat dump of every model in the chat-input picker with a
quick-switch. Opening the picker now shows a search box, an auto-tracked
Recent list (last 5 picks), and a manual Favorites list instead of every
available model crammed into a 280px dropdown. With large catalogs
(e.g. OpenRouter's 350+ models) this was unusable as both a quick-switch
and a browser.
- Recent: each pick is recorded most-recent-first (capped at 5) under a
new odysseus-model-recent key, so the next open has it one click away.
- Favorites: an inline star on every row toggles favorite state and
writes the existing odysseus-model-favorites key, so the sidebar Models
section stays in sync. The star toggles only — it never picks the model.
- Search filters a flat list across the whole catalog; favorited rows
keep their filled star while filtered.
- Small catalogs (<=12 models) still list everything in browse mode so
tiny installs aren't forced to search for a model.
- Touch friendly: stars are always visible (no hover-reveal) and tap
targets grow on narrow screens.
No changes to sidebar visibility defaults.
Closes#399
Library, Notes, and the other floating tool windows (Tasks, Calendar,
Gallery, Email, Cookbook, Brain, Settings, Theme, Compare, Research,
Sessions) could be moved and snapped but never resized — there were no
resize handles and dragging the edges did nothing.
Add a shared makeWindowResizable() helper and wire it into the existing
makeWindowDraggable() so every draggable window gains native-style
edge/corner resizing from one place:
- Grab any of the four edges or four corners to resize; the cursor
reflects the active handle (ew/ns/nwse/nesw-resize).
- Detects pointer proximity to the border instead of injecting handle
elements, so it works regardless of each window's overflow model
(.modal-content scrolls its body; .notes-pane scrolls an inner el).
- Min-size clamp (320x200) and viewport clamping so a window can't be
collapsed to nothing or dragged off-screen.
- Per-window size is remembered and restored on reopen.
- Disabled on mobile (windows are full-screen sheets there) and while a
window is docked or fullscreen-snapped.
- Touch supported at tablet width and up; self-heals a missed pointer-up
so a lost mouseup can't leave a window stuck in resize mode.
The Settings window inherited the base `.modal` vertical centering
(`align-items:center`). Its height is content-driven, so every tab is a
different height — and a vertically centered window grows and shrinks
around its own midpoint, making the in-modal nav rail (and the whole
window) appear to jump vertically when switching between pages.
Top-anchor the Settings window on desktop (`align-items:flex-start` plus
a fixed `margin-top`) so the top edge stays put and the panel only ever
grows downward. Scoped to desktop only — on mobile the panel is a
full-height bottom sheet that is already stable. Opening and dragging the
window both clear the inline margin/top, so window placement is otherwise
unchanged.
Fixes#208
The collapse handler waited a fixed itemCount*25+230ms for the
section-domino-out keyframes, but the CSS rule only targeted .list-item.
#models-section uses .models-row, so the rule matched nothing: no
animation played and itemCount was 0, leaving a flat ~230ms pause before
the section snapped shut.
- CSS: the collapse/expand animation rules now match
:is(.list-item, .models-row) so the Models rows actually animate.
- JS: drive the collapse off the real animations via getAnimations()
instead of a hard-coded timeout. Wait only on the section-domino-out
keyframes (ignoring unrelated/infinite animations); collapse
immediately when nothing animates so there is never a dead pause. A
generation token neutralizes stale callbacks from rapid toggles, with
a 600ms safety net so a section can't get stuck open.
Zeus-Deus