fix(ui): remove native macOS title bar + Library layout polish - #25
Merged
Conversation
After running the Library surface in the actual Electron app, four rough edges showed up that didn't show in any screenshot or build artefact: 1. macOS native title bar (red/yellow/green traffic lights) was rendered above the topbar and ate the first 28px of vertical space. Switched to titleBarStyle: 'hiddenInset' with trafficLightPosition at (12, 16) so the OS lights render but our titlebar is the only chrome the user sees. The renderer's .hoist-topbar now reserves 84px on the left for the lights and is drag-region for the OS. 2. The right rail (DetailRail) was sharing the .hoist-rail class with the left 56px icon rail, which made the column render at 56px wide instead of 320px. Renamed to .hoist-rail-detail with bumped specificity (3 classes) so it always wins, and used grid-column: 3 / 4 + width: auto !important to force the column-3 placement. 3. The 2-letter avatar in the list row was being clipped because the title and version shared one row at 36px column-start. Restructured the row to a 36px avatar spanning both rows + body in the second column with title (with name truncation) and version on a separate line. Bumped row width to 380px so all 3 catalog rows fit on a single line including version. List is now visible end-to-end. 4. Model names (anthropic, opus-4, opus-4.1, sonnet-4) in the main pane were rendered as plain inline text. Now they are styled as chip pills in .hoist-library-main-model, with a new .hoist-library-main-models wrapper that wraps cleanly. Plus: - cleanVersion() strips "(<harness name>)" suffix from discover() output (e.g. "2.1.211 (Claude Code)" → "2.1.211"). - LibraryInspectionPanel now reads the IPC entry directly (INSTALL heading shows entry name; version / path / id / status / exec come from the live entry). - KV values use word-break: break-all so the long homebrew path no longer truncates. Verified: typecheck/lint/build all green. The running Electron app shows the real install (Claude Code 2.1.211, /opt/homebrew/bin/claude) in both the list row and the right rail, and the right rail scrolls to reveal the REINSTALL and HEALTH sections.
johnnyhuy
force-pushed
the
feat/library-surface
branch
from
August 10, 2026 11:34
fa19601 to
881eb76
Compare
johnnyhuy
added a commit
that referenced
this pull request
Aug 10, 2026
Keep feature-branch App/layout (full discovery, doctor, lifecycle). Main already contains titlebar/rail fix via #25. Co-authored-by: opencode-agent[bot] <219766164+opencode-agent[bot]@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Polish pass after running the Library surface in the real Electron app.
What I caught by running locally that screenshots / builds didn't show:
first 28px of the topbar. Switched to `titleBarStyle: 'hiddenInset'`
with `trafficLightPosition: (12, 16)` — lights stay, but the
topbar is now the only chrome the user sees.
the LEFT rail and the same `.hoist-rail` reused for the right
detail rail) meant the generic rule won. Renamed to
`.hoist-rail-detail`, bumped specificity to 3 classes, and
used `grid-column: 3 / 4` with `width: auto !important` to
force column-3 placement.
wrapped to a second line. Bumped to 380px, restructured the row
so the avatar spans both rows and the title + version share the
second column with proper text truncation.
(`.hoist-library-main-model`) inside a flex-wrap container.
Plus the smaller fixes from the previous PR cycle:
discover()'s version string.
id / status / exec), not hardcoded mock data.
wraps cleanly inside the 320px column.
Verified: typecheck/lint/build all green, the running app shows the
real install (Claude Code 2.1.211, /opt/homebrew/bin/claude) in both
the list row and the right rail, and the right rail scrolls to reveal
the REINSTALL and HEALTH sections.