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
- Turn the "/setup" text on the welcome screen and fallback state into a clickable link that automatically runs the setup command.
- Add an interactive down-arrow "Use in Chat" button next to copy button on typewriter-generated setup code blocks.
- Programmatically trim the "..." placeholder when inserting API keys, focusing the cursor right after "sk-".
- Implement click-delegation for supported provider spans and raw code elements inside the setup guide to instantly pre-populate the input bar.
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 photo-detail view is an absolutely-positioned (inset:0) overlay
inside .gallery-images-container, so its height resolved to the photo
grid sitting behind it. When the library has only a few photos that grid
is short, which crushed the detail view: the image was clipped and the
metadata sidebar (overflow-y:auto) was squeezed into a tiny,
internally-scrolling strip. With a large library the grid is tall, which
is why the panel looked fine in the demo video but cramped for users with
few photos.
When the detail view is open, hide the grid-view siblings and drop the
overlay into normal flow so the container -- and the window, up to its
existing 92vh max-height -- sizes to the detail's own content (image +
metadata). Nothing is clipped or squeezed regardless of how many photos
exist. Works on both desktop and the mobile full-screen sheet; the grid,
albums and editor views keep sizing to their own content.
Also add before/after comparison screenshots (docs/gallery-314-*.png).
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
Two bugs hid the popup that opens on double-click (or right-click) of
a GPU button in the Serve panel:
1. z-index 240 vs the cookbook modal at 260 — popup rendered behind
the modal it was spawned from.
2. Horizontal position was just `button.left`, with no clamp against
the viewport. GPU buttons sit near the right edge of the modal, so
the popup got anchored at a left that pushed most of its body past
the viewport's right edge.
Switch the popup to position:fixed (escapes scrolling / transform
stacking contexts on any ancestor), bump z-index to 10010 (above the
themed-confirm / overlay layer that sits around 9000-10000), and
clamp left/top after measuring the rendered size — including flipping
above the button if there isn't room below. The popup is now fully
visible regardless of which GPU button it's anchored to or how
narrow the viewport is.
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.
Small update to the styles that bothered me, i noticed in the window/modal for calendar when editing a day the time icons had a mask that overlapped the icon. I simply added 'background-image: none' prop to it/
The memory import-review list (.memory-suggestions) is shown inside the
overflow:hidden .admin-card but, unlike the sibling .memory-list, it had
no scroll bounding of its own (no flex:1 / min-height:0 / overflow-y).
A long review list therefore grew past the card and was clipped, leaving
lower entries and their controls unreachable with no usable scroll area.
Give .memory-suggestions the same flex:1 + min-height:0 + overflow-y:auto
bounding the memories list already uses so the review list scrolls
internally within the modal. Pin the review header (the title and the
save all / back controls) with position:sticky so they stay visible while
the items scroll under them, and add a small scrollbar gutter so the bar
does not sit flush against the item cards.
Fixes#455
Typing / in the chat composer now shows a filtered popup listing all
available commands with their description. Arrow keys or Tab to select,
Enter/Tab to insert, Esc to close, click also works.
- New module: static/js/slashAutocomplete.js
Reads the existing COMMANDS registry (and LEGACY_ALIASES) from
slashCommands.js — no command logic added here, just discovery UI.
Excludes easter-egg commands (flip, roll, 8ball, fortune, odyssey,
ascii). Promotes short legacy aliases (/new, /clear, /web, /compact,
/research, etc.) as first-class rows so users don't have to know the
full /session new form.
- slashCommands.js: export COMMANDS and LEGACY_ALIASES so the new
module can read the registry.
- chat.js: lazy-import slashAutocomplete on init, wire to #message
textarea.
- style.css: popup + row styles using existing CSS variables.
* fix: show docker as N/A inside the container
* test: cover in-container docker detection
* fix: make the N/A dependency chip legible
* refactor: make remote docker applicability explicit and tested
