ridge scene behind the whole app, tight bubble wrap, sharper portraits, long-post fixtures #30

Merged

void merged 2 commits from void/ridge-scene-and-bubbles into dev 2026-11-07 19:51:23 +00:00

Conversation 1 Commits 2 Files changed 45 +389 -10

void commented 2026-11-07 19:51:11 +00:00

Member

Copy link

Meta's four defects on the dev preview (follow-up void-body:chat-s3948-3949).

1. Blurry portraits. The demo thumbs were 160 px wide palette PNGs (~4 KB), shown at up to 210 CSS px on phones: 195 CSS px x DPR 3 = 585 device px from 160, a 3.6x upscale. No fractional-size or transform cause was needed. They are now 480 px (about 2.5x at DPR 3, 25-70 KB each), generated from /opt/commons/cast-art/poses by scripts/make-pose-thumbs.mjs (no dependencies), for every pose the catalogue lists for the three demo Minds.
2. Bubble wrap. On phones the message content is a flex column, which forms a block formatting context and so sat whole beside the floated portrait for the bubble's full height: text stayed as narrow as the gap beside the portrait. It is now a plain block there, so lines wrap the silhouette then run full width.
3. Fixtures. Three long Mind posts (paragraphs, lists, code, an unbroken long code line) in the demo Ratatoskr room, sent with formatted_body.
4. Scene behind the app. The scene was already mounted at the app root; the shell painted over it. With html[data-scene], Background/Surface container tokens are clear on #root only (menus, dialogs, tooltips live in #portalContainer and keep their fills). Bubbles and the composer are the filled surfaces: 50% over a 12 px blur. Avatar initials read the surface colour through a variable captured above the override.

Verified in Chrome 156 on Starfire, 390x844 @ DPR 3 with touch emulation, built with the demo flags: screenshots of home and a room with long posts; DOM audit of opaque backgrounds in view lists only bubbles, composer (50%, blur) and a code block inside a bubble. vitest: 243 pass, 1 fails (soundscape.test.ts, window is not defined, a file this PR does not touch).

Not tested: see the comment below.

🤖 Generated with Claude Code

Meta's four defects on the dev preview (follow-up void-body:chat-s3948-3949). 1. **Blurry portraits.** The demo thumbs were 160 px wide palette PNGs (~4 KB), shown at up to 210 CSS px on phones: 195 CSS px x DPR 3 = 585 device px from 160, a 3.6x upscale. No fractional-size or transform cause was needed. They are now 480 px (about 2.5x at DPR 3, 25-70 KB each), generated from /opt/commons/cast-art/poses by `scripts/make-pose-thumbs.mjs` (no dependencies), for every pose the catalogue lists for the three demo Minds. 2. **Bubble wrap.** On phones the message content is a flex column, which forms a block formatting context and so sat whole beside the floated portrait for the bubble's full height: text stayed as narrow as the gap beside the portrait. It is now a plain block there, so lines wrap the silhouette then run full width. 3. **Fixtures.** Three long Mind posts (paragraphs, lists, code, an unbroken long code line) in the demo Ratatoskr room, sent with `formatted_body`. 4. **Scene behind the app.** The scene was already mounted at the app root; the shell painted over it. With `html[data-scene]`, Background/Surface container tokens are clear on `#root` only (menus, dialogs, tooltips live in `#portalContainer` and keep their fills). Bubbles and the composer are the filled surfaces: 50% over a 12 px blur. Avatar initials read the surface colour through a variable captured above the override. Verified in Chrome 156 on Starfire, 390x844 @ DPR 3 with touch emulation, built with the demo flags: screenshots of home and a room with long posts; DOM audit of opaque backgrounds in view lists only bubbles, composer (50%, blur) and a code block inside a bubble. vitest: 243 pass, 1 fails (soundscape.test.ts, `window is not defined`, a file this PR does not touch). Not tested: see the comment below. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

void added 2 commits 2026-11-07 19:51:11 +00:00

preview: portrait thumbs at 480px (were 160px), long-post demo fixtures ... d73599d2cf

The demo pose thumbnails were 160px wide palette PNGs, about 4 KB, shown at up to 210 CSS px
on phones: 195 CSS px x DPR 3 = 585 device px from 160, a 3.6x upscale. They are now 480px
wide (about 2.5x the phone portrait at DPR 3, still 25-70 KB each), generated from
/opt/commons/cast-art/poses by scripts/make-pose-thumbs.mjs, and cover every pose the
catalogue lists for the three demo Minds.

The Ratatoskr demo room gains three long Mind posts with paragraphs, lists and code,
sent with formatted_body like the real Minds' Markdown.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

scene behind the whole app; bubble text wraps around the portrait, not beside it ... 7bdc512836

Signed in, the shell is clear over the ridge scene (html[data-scene]): Background and Surface
container tokens are redefined on #root only, so menus, dialogs and tooltips in #portalContainer
keep their fills. Bubbles and the composer are the filled surfaces: their colour at 50% over a
12px blur. Avatar initials read the surface colour through a variable captured above the override.

On phones the message content (a flex column) formed its own block formatting context and sat
beside the floated portrait for the bubble's whole height, so text stayed as narrow as the gap
beside the portrait. It is a plain block there now: lines wrap around the silhouette and then
run the bubble's full width.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

void commented 2026-11-07 19:51:23 +00:00

Author

Member

Copy link

Not tested (Starfire stopped accepting SSH, Connection reset by 10.77.0.2 port 22, after the last build):

• The final build, with the avatar-initials fix (initials went invisible when the surface token went clear; fixed through a variable captured above the override), was never screenshotted. The earlier build showed the missing 'D'.
• Short (one-line) bubbles on a phone: tight shrink-to-fit is by flex-item sizing and was not looked at after the change.
• Desktop width (1280): wide layout, portraits beside bubbles, scene behind the sidebar.
• DPR 2.5 and 2 renders, and a real phone (only Chrome 156 headless with mobile and touch emulation at DPR 3).
• Noonday Sky / light themes with the clear shell (text over a bright scene), and the stock themes.
• Menus, dialogs and popouts over the clear shell (they keep fills by living in #portalContainer; not opened).
• Scroll performance with backdrop blur on many bubbles on a real phone.
• The logged-in scene transition itself (scene.login() is only called when a session exists at mount).

Seen, not fixed (not in these four asks):

• The pose status lines above the composer ('Ratatoskr: Nibu is console, since...') stack three lines over the composer and Jump to Latest; the composer's half transparency shows them through.
• Portrait text wrap: the shape-outside image is squashed into the float's margin box (negative top margin), so on long posts a few words overlap the portrait's lower art. Same technique as the three-doors mock-up.
• soundscape.test.ts fails in node (window is not defined); present before this PR.

**Not tested** (Starfire stopped accepting SSH, `Connection reset by 10.77.0.2 port 22`, after the last build): - The final build, with the avatar-initials fix (initials went invisible when the surface token went clear; fixed through a variable captured above the override), was never screenshotted. The earlier build showed the missing 'D'. - Short (one-line) bubbles on a phone: tight shrink-to-fit is by flex-item sizing and was not looked at after the change. - Desktop width (1280): wide layout, portraits beside bubbles, scene behind the sidebar. - DPR 2.5 and 2 renders, and a real phone (only Chrome 156 headless with mobile and touch emulation at DPR 3). - Noonday Sky / light themes with the clear shell (text over a bright scene), and the stock themes. - Menus, dialogs and popouts over the clear shell (they keep fills by living in #portalContainer; not opened). - Scroll performance with backdrop blur on many bubbles on a real phone. - The logged-in scene transition itself (scene.login() is only called when a session exists at mount). **Seen, not fixed (not in these four asks):** - The pose status lines above the composer ('Ratatoskr: Nibu is console, since...') stack three lines over the composer and Jump to Latest; the composer's half transparency shows them through. - Portrait text wrap: the shape-outside image is squashed into the float's margin box (negative top margin), so on long posts a few words overlap the portrait's lower art. Same technique as the three-doors mock-up. - `soundscape.test.ts` fails in node (`window is not defined`); present before this PR.

void merged commit fb4eabbf38 into dev 2026-11-07 19:51:23 +00:00

void referenced this pull request from a commit 2026-11-07 19:51:24 +00:00

Merge pull request 'ridge scene behind the whole app, tight bubble wrap, sharper portraits, long-post fixtures' (#30) from void/ridge-scene-and-bubbles into dev

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

GameCult/Ratatoskr!30

No description provided.