OpenProgram · Web UI · current design

Settings secondary-navigation header

Goal: retain the Settings secondary header. Align its button top edge and the vertical grid of category buttons with the main application sidebar. Provider pages keep the full large title above list and details. The list stays expanded; the third-level toolbar contains only a full-width search field.

Audience
Web / Desktop UI implementation
Scope
Settings secondary navigation
Expanded
Reuse current column widths
Collapsed
Settings: 49px

Target structure

Primary and secondary headers

Both columns align the top edges of their 32px header buttons; the first and subsequent 32px navigation rows also align.

OpenProgram‹
Programs
Settings‹
General
LLM Providers
LLM Providers
Search providers…

Secondary collapsed state

Settings still collapses to 49px. The Provider list stays expanded with full-width search and no list-collapse button.

OpenProgram›
Settings›
LLM Providers
Search providers…

Narrow Provider model-card layout

›◉ GPT-5.6 Solgpt-5.6-sol ◉⌕◈1M

At detail widths of 420px or less, pin the switch at the card’s upper right; name and model ID use the flexible middle column. Capability tags begin at the name column, fill the next row, and wrap naturally. Wide layout, expanded panels, and model-enabling behavior remain unchanged.

Provider credential hierarchy

Each credential uses a bounded account card. Combine validation result and revalidation into one control; keep enabled state as a Switch. Rename, replace, and delete use icon buttons with accessible names. Peer actions share 28px height, 6px corners, and 14px icons. Icon-only actions are 28px squares; status-text buttons grow only to fit content. New-entry forms default to collapsed so they do not compete visually with existing credentials.

Column contract

RegionExpandedCollapsedPersistenceHeader
Settings category column--sidebar-width - 1px49pxsettingsNavOpenSettings + collapse button
Provider list columnMaximum --sidebar-width - 1px; at most 42% in narrow content areasAlways expanded; no 49px icon stripNoneFull-width search; always show Enabled / Not enabled groups and Add Custom Provider
Content areaUse remaining width. Memory controls wrap at narrow widths without changing navigation state.Providers shows the full page title; Memory adds no duplicate header

Interaction and state boundaries

Independent controlsCollapsing Settings categories does not affect the Provider list, which has no independent collapse control. User state takes precedenceResizing the window does not automatically expand or collapse Settings categories. PersistenceRestore the category column’s last choice after refresh or returning to Settings (settingsNavOpen). Keyboard and screen readersThe Settings collapse button retains native button, aria-expanded, aria-controls and an explicit name. Content adaptationNarrow windows only cause form controls to wrap; detail data, selection, and scroll state remain unchanged. Provider detailsThe Provider list always stays expanded, shrinking continuously to at most 42% of narrow content areas and leaving remaining width for details. The Provider switch belongs in the title row, not a separate row. Each credential is an account card: name and validation status in the header, key in the body, usage state in the footer. Rename, replace, revalidate, and delete become icon actions at narrow widths. Adding credentials first shows a single entry point; the form appears only after expansion. Visual hierarchyThe OpenProgram brand title is 20px. The Settings secondary-navigation title and right-side content title are 18px, one level below it. The Provider third level adds no separate named header. Vertical gridMove the entire Settings category list down 15px so General, LLM Providers, and subsequent rows align with New chat, Programs, and subsequent main-sidebar rows. Preserve row height and 1px gaps. Navigation orderGeneral → LLM Providers → Memory → Web Search → Browser → Channels → Token Usage → System; basic settings first, models and memory adjacent, statistics and system last.

Adopted and excluded

Adopted

  • Reuse the existing two-state collapse behavior and icons in Settings categories.
  • Remove the global Settings topbar.
  • Add no duplicate Memory header; restore the complete Providers page header.
  • Show name and button only in the Settings secondary header; provide no Provider-list collapse control.

Excluded

  • No draggable column resizing.
  • No breakpoint-driven overrides of user state.
  • No changes to Memory, Provider, or model data.
  • No changes to the main application sidebar.

Comparison with standards and existing framework

ReferenceAvailable capabilityAdopted hereUnavailable or excluded
WAI-ARIA APG DisclosureNative buttons, aria-expanded, optional aria-controls, Enter/Space activationThe Settings category collapse button retains these semanticsAPG does not specify multi-column widths or title placement; the Provider list no longer has a collapse button
MDN aria-expandedState relationship between a control and its controlled regionSynchronize state values with visible column contentDo not use aria-pressed to represent expansion state
Existing OpenProgram Sidebar + CSS Grid49px collapsed strip, existing animated icons, local persistence, and remaining content widthReuse directly without a new component library or state layerNo draggable resize handle or automatic breakpoint state

Acceptance criteria

  • Settings no longer renders a separate global Settings topbar.
  • The OpenProgram brand title is 20px; the Settings category Settings and right-side LLM Providers content title are both 18px. Button and name share one row; button tops align with main-sidebar buttons.
  • The first four Settings category rows and main-sidebar rows have identical y coordinates, 32px heights, and 1px gaps.
  • Settings category links appear in General / LLM Providers / Memory / Web Search / Browser / Channels / Token Usage / System order; URLs, icons, active state, and keyboard order follow the same array.
  • The LLM Providers list has no additional named header or collapse button. Search spans the column; group labels and Add Custom Provider remain visible.
  • LLM Providers displays a full page title and introduction above list and details; route loading preserves the same structure.
  • Memory content continues without duplicate titles or introductions.
  • Narrow Provider details have no overlapping controls or horizontal overflow; account name, key, status, and all three action buttons remain usable.
  • API Key name, validation state, masked value, and enabled state occupy one account card. Validation state itself triggers revalidation; no separate Validate button remains.
  • When keys exist, the new-Key form is hidden by default. Users expand it through Add API key and may cancel.
  • Narrow details reduce horizontal padding, keep the Provider switch in the title area, and give icon actions title and aria-label.
  • Narrow details only rearrange internal content: no automatic category collapse, font reduction, or data/interaction changes.
  • Settings categories retain settingsNavOpen, keyboard semantics, icon selection, and 49px collapsed width; the Provider list no longer uses providerListOpen.

Implementation status

Existing structure: implemented and reviewed.

  • The Settings category list moved down 15px; the first four production rows and main-sidebar rows both occupy y=56/89/122/155px, with 32px heights.
  • The first Settings category icon remains at y=56px when collapsed; 49px width, header-button top edges, localStorage, and ARIA behavior are unchanged.
  • Providers stays expanded with full-width search, no collapse button, and visible group labels/Add Custom Provider. Memory’s non-duplicated header and loading structure were not changed.
  • Focused Settings checks, Memory settings checks, TypeScript, production build, and diff checks passed. Specification and quality re-reviews both PASS.

Navigation order: implemented and reviewed.

  • Production DOM, keyboard order, and collapsed-state titles all follow General / LLM Providers / Memory / Web Search / Browser / Channels / Token Usage / System.
  • Default OpenProgram App visual acceptance confirmed General active state, icon-label binding, and existing vertical alignment.
  • The implementation commit passed focused Settings and Memory checks, TypeScript, production build, and specification/quality re-reviews.

Narrow Provider adaptation: implemented and reviewed.

  • The Provider list stays expanded, taking 42% in narrow content areas and at most 287px in wide areas. The 49px icon strip and list-collapse state are removed.
  • Detail containers rearrange headers, account actions, key editing, common forms, and model information at 680/420/300px boundaries. Wide layouts retain original fixed columns.
  • In the default App at a 750px window width with both navigation levels expanded, measured list width was about 121px and details about 167px. Replace mode’s 103px key area had no horizontal overflow; Base URL and Connectivity wrapped correctly.
  • Focused Settings/Memory checks, TypeScript, production build, and diff checks passed; both reviews PASS.

Provider credential hierarchy: implemented and reviewed.

  • Each credential uses an account card with a title and usage switch; API Key cards also show a masked key. Validation state and revalidation share one control. Rename, API Key Replace, and Remove use accessible icon actions.
  • With existing credentials, the new-Key form defaults to an Add API key entry. Cancelling clears the key draft; Key name and native-login name have separate state.
  • The child detailSurface owns padding: measured values at 681/680/300px detail widths are 20/12/8px. Forms with zero or existing accounts retain correct columns in wide and narrow layouts.
  • Default App normal-window visual acceptance completed. Settings, Memory, TypeScript, production build, target HTML, and diff checks passed; both reviews PASS.
  • Account APIs, polling policy, Provider/Key state semantics, and navigation-column behavior are unchanged.

Provider action-control dimensions: implemented and reviewed.

  • Account-card Rename, Validate, Remove, Replace, and Cancel share 28px height, 6px corners, and 14px icons; icon-only actions also have fixed 28px width.
  • Status colors, text, behavior, and accessible names remain unchanged.
  • The static contract failed on the old implementation and passed on the current one. Settings, Memory, TypeScript, production build, target HTML, and diff checks passed; both reviews PASS.

Narrow Provider model cards: implemented and reviewed.

  • At detail widths ≤420px, model name and ID occupy the upper left, Switch the upper right, and capability tags fill the next row’s remaining width and wrap.
  • Wide layout, expanded content, search, batch operations, and model-enabling behavior are unchanged.
  • Static contracts, Settings, Memory, TypeScript, production build, target HTML, and diff checks passed; both reviews PASS.

Settings header font adjustment (historical phase): implemented and reviewed, now superseded by the later hierarchy correction.

  • The secondary Settings header increased from 18px to 24px with compact line height to remain centered in the 32px header.
  • That step did not change collapse-button or category-list positions, collapsed state, or other page-title sizes.
  • The phase’s static contract fixed the Settings header at 24px. Settings, Memory, TypeScript, production build, target HTML, links, and diff checks passed; both reviews PASS.

Settings content-title font adjustment (historical phase): implemented and reviewed, now superseded by the later hierarchy correction.

  • The shared right-side content title increased from 18px to 24px so LLM Providers and the left-side Settings used the same top-title size.
  • Narrow content areas permit long titles to wrap within words. Descriptions, header padding, navigation state, Provider details, and Memory structure remain unchanged.
  • That phase’s static contract failed on the old 18px implementation and passed on the then-current 24px implementation. Settings, Memory, TypeScript, production build, target HTML, links, and diff checks passed; both reviews PASS.

Settings top-title hierarchy correction: implemented and reviewed.

  • Based on computed styles in the default App, the middle Settings and right-side content title were both set to 18px, below the 20px OpenProgram brand title.
  • Font weight, header height, button positions, descriptions, and page-data behavior remain unchanged.
  • The static contract fixes the brand title at 20px and both Settings titles at 18px. Settings, Memory, TypeScript, production build, target HTML, links, and diff checks passed; both reviews PASS.

Settings title descenders: implemented and reviewed.

  • The Settings secondary header remains 18px; line height increased from 1 to 1.2 to prevent descenders such as g from being clipped by the title’s own clipping rules.
  • 32px header height, collapse-button position, horizontal ellipsis, 49px collapsed state, navigation, and page-data behavior remain unchanged.
  • Chromium with Inter Variable confirmed the lower edge of g is fully retained. Settings, Memory, TypeScript, production build, target HTML, links, and diff checks passed; both reviews PASS.