Skip to content

style(web): polish the viewer without touching the locked palette - #488

Merged
bbingz merged 1 commit into
mainfrom
web/viewer-visual-polish-20261020
Oct 20, 2026
Merged

bbingz merged 1 commit into
mainfrom
web/viewer-visual-polish-20261020

Conversation

@bbingz

@bbingz bbingz commented Oct 20, 2026

Copy link
Copy Markdown
Owner

Summary

  • CSS-only visual polish of the shipped Web viewer (macos/EngramRemoteServer/Core/WebUIRoutes.swift): type scale and tracking, spacing rhythm, 12px card radii, pill badges and filter chips, hover/active/focus-visible states, a soft card shadow, tabular numerals, and transcript bubbles with a source-tinted assistant border plus a blurred sticky header.
  • The locked dark slate/green palette (--bg:#0f172a, --panel:#1e293b, --accent:#22c55e and the rest of the legacy :root line) is byte-for-byte unchanged, as are the 960px centered layout, the list/detail toggle, and every DOM id. No HTML or JavaScript changed.

Test plan

  • xcodebuild test -scheme EngramRemoteServerCore -only-testing:EngramRemoteServerCoreTests/WebUIRoutesTests — 9 tests passed
  • npx vitest run tests/scripts/collector-web-ui.test.ts — 180 tests passed
  • Visual check of the rendered viewer after deploy (no local remote-server instance was running)

🤖 Generated with Claude Code

CSS-only refinement of the shipped Web viewer: type scale, spacing,
radii, hover/focus states, and transcript bubbles. The legacy dark
slate/green palette, the 960px layout, and every DOM id stay
byte-for-byte unchanged, and no HTML or JavaScript changed.

Co-Authored-By: Claude Code <noreply@anthropic.com>
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 20, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-20T02:49:15.432320Z ba04957 PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: ba0495752f

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

button { margin: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); }
input, select { margin: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--bg) 55%, var(--panel)); color: var(--text); transition: border-color 0.12s ease, background 0.12s ease; }
input:hover, select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
input:focus, select:focus { border-color: var(--accent); background: var(--bg); outline: none; }

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Preserve the keyboard focus ring on form controls

When a keyboard user focuses any input or select, this more-specific rule overrides the newly added :focus-visible outline with outline: none. Text fields retain only a thin border change, while native checkboxes such as “Hide tool-only sessions” may have no reliable visible focus indicator because their author-specified border/background are not consistently rendered; removing outline: none or limiting it to non-keyboard focus preserves the intended focus-visible state.

Useful? React with 👍 / 👎.

@bbingz
bbingz merged commit 881d3ff into main Oct 20, 2026
16 checks passed
@bbingz
bbingz deleted the web/viewer-visual-polish-20261020 branch October 20, 2026 03:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant