Skip to content

fix(chat): replace the shattered wordmark with a font-independent one #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ndemianc merged 1 commit into from
Aug 16, 2026
Merged

fix(chat): replace the shattered wordmark with a font-independent one #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 12 additions & 11 deletions extensions/levelcode-ai/media/chat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1259,17 +1259,18 @@
<body>
<div id="log">
<div id="empty">
<div class="lc-ascii-wrap"><pre class="lc-ascii" role="img" aria-label="LevelCode AI">██ ███████ ██ ██ ███████ ██
██ ██ ██ ██ ██ ██
██ ██████ ██ ██ ██████ ██
██ ██ ██ ██ ██ ██
███████ ███████ ███ ███████ ███████

███████ ███████ ██████ ███████
██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██████
██ ██ ██ ██ ██ ██
███████ ███████ ██████ ███████</pre></div>
<div class="lc-ascii-wrap"><pre class="lc-ascii" role="img" aria-label="LevelCode AI">██╗ ███████╗██╗ ██╗███████╗██╗
██║ ██╔════╝██║ ██║██╔════╝██║
██║ █████╗ ██║ ██║█████╗ ██║
██║ ██╔══╝ ╚██╗ ██╔╝██╔══╝ ██║
███████╗███████╗ ╚████╔╝ ███████╗███████╗
╚══════╝╚══════╝ ╚═══╝ ╚══════╝╚══════╝
██████╗ ██████╗ ██████╗ ███████╗
██╔════╝██╔═══██╗██╔══██╗██╔════╝
██║ ██║ ██║██║ ██║█████╗
██║ ██║ ██║██║ ██║██╔══╝
╚██████╗╚██████╔╝██████╔╝███████╗
╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝</pre></div>
<div class="lc-ascii-sub">levelcode.ai</div>
<div class="empty-copy">Ask about your code, or describe what to build. The open file is sent as context; add a selection with <b>+</b> or ⌥⌘A.</div>
<div class="starters">
Expand Down
26 changes: 11 additions & 15 deletions extensions/levelcode-ai/test/webviewCss.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -578,25 +578,21 @@ test('TRANSCRIPT: the user bubble hugs its content, and is capped short of the c
'tint is the secondary cue and still earns its place — side alone would drop on a wrapped log');
});

test('WORDMARK: the empty-state logo is full blocks only, and fits its container', () => {
// Drawn on a 10-row pixel grid with 2px strokes, then packed two pixel rows per text row. Because
// every stroke is an even number of pixels, each pair collapses to a FULL block — no ▀ or ▄ survives.
//
// That is the property worth pinning, and it was learned the hard way. `▀` sits at the top of its
// cell and `▄` at the bottom, so `▀` directly above `▄` leaves a full cell of empty space between
// them: a seam straight through the letterform. A 1px-stroke font produces that constantly and
// shatters. Full blocks tile seamlessly in any monospace font, so this art cannot develop seams no
// matter what the user's editor font is.
test('WORDMARK: the empty-state logo fits its container and has an accessible name', () => {
// NOT asserted here: which characters it is drawn from. A previous version of this test required
// full blocks only, on the theory that `█` tiles seamlessly while `▀`/`▄` can seam. Half of that is
// right — `▀` above `▄` does leave a gap — but the other half is not: whether `█` FILLS its cell is
// a property of the FONT, not of the character. In Monaco it does not, and a wordmark built on that
// assumption shattered into disconnected bars in the editor while looking perfect in a harness
// running SF Mono. The lesson is that this file cannot check the thing that actually matters, so it
// should stop pretending to; ASCII art has to be looked at in the target font.
const m = /<pre class="lc-ascii"[^>]*>([\s\S]*?)<\/pre>/.exec(html);
assert.ok(m, 'the empty-state wordmark is gone');
const art = m[1].replace(/^\n/, '');
const glyphs = new Set(art.replace(/[\n ]/g, ''));
assert.deepStrictEqual([...glyphs], ['█'],
'the wordmark uses partial blocks: ▀ above ▄ leaves a seam through the stroke in most fonts. '
+ 'Found: ' + [...glyphs].join(''));

// It is sized by the container (clamp(5px, 3.6cqi, 13px)) inside #empty, which is capped at 560px.
// Past ~44 columns it stops fitting and the pre grows a horizontal scrollbar under the logo.
// This bound IS checkable and is not about glyphs: the logo is sized from the container
// (clamp(5px, 3.6cqi, 13px)) inside #empty, which is capped at 560px. Past ~44 columns it stops
// fitting and the pre grows a horizontal scrollbar under the logo.
const lines = art.split('\n');
const cols = Math.max(...lines.map((l) => l.length));
assert.ok(cols <= 44, 'the wordmark is ' + cols + ' columns; wider than ~44 overflows #empty (max 560px)');
Expand Down