githubnext/ace2Public

Ace: a collaborative coding environment on the team's own machines

feat(app): rebuild Settings and top-anchor every dialog #171

Mergediamnbutlermerged 2 commits intomainfromrefs/pull/171/head
  1. IA

    Closes #170.

    Dialogs were vertically centered, so Settings jumped whenever late-loading content or a section switch changed its height. Every dialog now sits at a fixed top position. Settings is rebuilt as a fixed two-column shell.

    **Shared dialog geometry** (`packages/ui/src/ui/dialog.tsx`) - The dialog top is fixed at `clamp(1rem, 40dvh - 8rem, 20dvh)`. `--dialog-max` is the room left below it. Generic dialogs, Settings and CommandPalette all size from it, which replaces the palette's inline `100vh` sizing. - Widths use physical `w`/`max-w` utilities. twMerge couldn't override `sm:max-inline-sm`, so Settings and the palette were stuck at 24rem. - The open animation is opacity plus a 98% scale from the top edge, wrapped in `motion-safe`.

    **Settings** - Fixed rail and header with a scrolling content pane, 56rem × min(40rem, room below the top). In narrow windows the rail stacks above the content. - Five sections: - General: the existing theme preference and default model - Providers - Computer use (desktop only) - This Mac/This host - Updates (desktop only) - Label and description on the left, compact controls on the right. Diagnostics such as tool paths, the directory URL, the helper log, Login Items and refresh sit under Troubleshooting. Errors and recovery actions stay visible. - Every existing control and state is kept: key add/replace/check/remove, overrides, helper approval/command-line-host/start/restart/stop, permissions and clipboard policy, automatic check vs explicit install, cancel/resume, and `ace:updates`. - Sections stay mounted after their first visit, so in-flight key and helper actions survive a section switch. Computer use polling runs only while that section is visible. Provider settings, which touch Keychain, are read only for General and Providers.

    **Validation** (local evidence on natembp: `/tmp/ace-ui-refresh-20261006/settings-evidence`)

    | Viewport | Top before (`5194bf7`), while loading and switching sections | Top after (`b11535a`) | |---|---|---| | 1440×900 | 355→166, then 166→350→248 | 180 (896 wide, 184px rail) | | 1280×560 | 42→180→78 | 96 | | 390×700 | 52→250→148 | 140 |

    - Browser, source host: - Ctrl+, opens Settings, and Escape returns focus to the account menu. - A real Anthropic key check verified, and an invalid OpenAI key was rejected. Switching sections mid-request kept the result. - Escape in the key form closes only the form. - Troubleshooting opens and the pane scrolls at 1280×560 without moving the dialog. - Open Project and Rename open at top 180. Rename selects the name and returns focus on Escape. - Native, signed Ace-dev: - The dialog top stayed fixed across seven section switches. - Computer use shows Ready, granted permissions and the clipboard policy. - This Mac shows the command-line host with Restart and Stop… disabled. - Updates shows the development-disabled state. - `bun types`, `bun run ci`, the app build and CI pass. React Doctor scores 90/100; its warnings are the existing icon-export pattern and Settings complexity.

    **Not exercised:** the managed helper's start/stop/restart and approval states (source builds never attach a helper, and Canary's was left alone); update available/download/error states (dev build); the permission "Enable…" prompts (everything was already granted); and CommandPalette, which has no `apps/app` consumer and is reviewed in source and CSS only. Tab focus briefly escaping a modal happens on `5194bf7` too; it is tracked in #172.

    ### Built in Ace

    Built in an Ace channel. Root Codex coordinated and did read-only review outside Ace (#9).

    Gaps: - #50: DOM input, viewport emulation and geometry used a raw DevTools script against Ace's dedicated browser profile, launched headless. - #51: saved screenshots couldn't be viewed directly. - #128: desktop tools weren't available to the Canary worker. Native checks ran from a channel on the `bun desktop dev` host, with `screencapture` for captures. - #8/#73: `desktop_focus` timed out, `desktop_menu` refused the Ace process, `desktop_key` has no comma key, and the Troubleshooting disclosure click failed. - #97: the test hosts also listened on the tailnet.

  2. IA
    Author

    Rename evidence re-measured with an explicit navigation to candidate host 127.0.0.1:4197 (origin asserted), Channels page sidebar RowMenu → Rename channel: top 180, width 320, focus in "Channel name" with full selection [0,13]; Escape closes and returns focus to the rename-target row. Tested head b11535a. CommandPalette has no apps/app consumer, so it has no product route to exercise; its change is source/CSS-reviewed only.

  3. iamnbutlerreferenced this in Keep keyboard focus inside open modal dialogs #172last month on GitHub

  4. iamnbutlermerged 39191bb63434last month on GitHub

  5. iamnbutlerclosedlast month on GitHub