Repository navigation
style(editor): solid VSCode-style CodeMirror theme + bordered editor card (#98, #99) - #107
Merged
Conversation
…card #98 #99 Two visual issues from the post-#95 review, landed together because they touch exactly the same surface (the editor theme and its host). ## Issue #98 — solid VSCode-style theme The CodeMirror theme painted `transparent` over the frosted modal glass. New dedicated `--app-editor-*` tokens in index.css (both `data-theme` blocks — dark tracks VSCode Dark Modern values, light its slate/white counterparts): --app-editor-bg / gutter-bg / active-line / selection / border The theme object is rebuilt on them: solid canvas, opaque gutter with a borderRight of the new border token, visible indigo-alpha selection, clear active-line and active-line-gutter, matching/non-matching bracket colors, and the Ctrl+F search panel now sits on the solid editor background instead of the glass. ## Issue #99 — margin + bordered card The editor host now sits inside a padded body (`p-3 sm:p-4`) and a rounded card (`data-testid="editor-card"`, rounded-lg + the editor border/background tokens). Loading and error states render inside the card so the layout does not jump between states; the host stays a plain `h-full` child. ## TDD evidence - RED: 3 new vitest chrome tests failed for the right reasons (no token-backed canvas rule, tokens absent from index.css, no card). Two test refinements while redder than the code: CodeMirror merges built-in base-theme rules into the same <style> node, so the `transparent` ban is asserted on the shipped theme source instead of the merged stylesheet; the token-sheet check reads index.css via node:fs because vitest virtual module URLs cannot be dereferenced. - GREEN: ConfigEditorModal.test.tsx 26/26, full web suite 220/220 (14 files). - `tsc -b` clean; `vite build` regenerated dist (PWA precache refreshed); pytest unchanged (69 pre-existing failures identical to baseline); ruff clean. Closes #98, closes #99
falbany
pushed a commit
that referenced
this pull request
Nov 4, 2026
… dist The manual merge of PRs #107 + #108 dropped the closing chunk of the live-validation describe block in ConfigEditorModal.test.tsx: the final test never closed (`});` for itself and for its describe) and the "editor chrome" comment block lost its `/**` opening, leaving an orphaned ` * ...` surface that stopped the whole file from parsing. Consequences: `npm run build` (tsc) failed with TS1005/TS1434 syntax errors from line 910 on (found by running src/profiles/web/build.py --force as instructed), so no dist refresh could ship. Repairs: - Restored the missing `});`/`});` closing the test_live_validation_skipped_while_gate_parked test and the "live validation (issues #102/#100)" describe, and re-opened the `/**` block comment of the chrome describe. - Rebuilt dist from the merged tree (the abort of the local conflicted dist merge left this branch needing a regeneration anyway). Verification: build.py --force SUCCESS; vitest 226/226 (14 files). No merge body changes otherwise.
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
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.
Closes #98, closes #99 (sub-issues of the config editor #95). Grouped as one PR per the review plan: both issues touch the same code surface — the CodeMirror theme and its host.
Issue #98 — style(editor): solid VSCode-style CodeMirror theme
The theme painted
backgroundColor: "transparent"so the editor showed the modal's frosted glass. The theme is rebuilt on new dedicated tokens:index.cssgains, in bothdata-themeblocks (dark tracks VSCode Dark Modern, light its slate/white counterparts):--app-editor-bg,--app-editor-gutter-bg,--app-editor-active-line,--app-editor-selection,--app-editor-borderprefers-color-schemecode — the editor follows the app's light/dark flip like every surface.Issue #99 — ui(editor): margin + bordered card
Editor body is padded (
p-3 sm:p-4) and the host lives in a rounded bordered card (data-testid="editor-card"with the new background/border tokens). Loading/error states render inside the card so layout never jumps.Verification
<style>node, so thetransparentban is asserted on the shipped theme source rather than the merged stylesheet.ConfigEditorModal.test.tsx26/26; full web suite 220/220 (14 files);tsc -bclean;vite buildregenerateddist/(precommit hooks green).Visual check
Open the editor and confirm: solid dark canvas distinct from the glass modal, dark gutter band with hairline divider, padding on all four sides. Dark is VSCode-Dark-Modern derived; light uses white canvas + slate-50 gutter.