kayg/infraternal

Watch

Fork 0

J475b: Remove host design options, pill menu morph and split fade measured (owner, 2026-11-10) #486

New issue

Open

opened 2026-11-10 14:52:24 +00:00 by kayg · 5 comments

kayg commented

2026-11-10 14:52:24 +00:00

Owner

Owner complaints from production (ssh.kayg.org at 92d2f2e9f), 2026-11-10:

"we need a better way to show "Remove host" the current design is horrible." The host details panel foot shows a pink "Remove host" line, then a second plain "Remove host" line. Root cause found: the row's hint was filled from the registry's short label (also "Remove host") instead of a sentence.
The window pill -> menu morph is slow, with blurred empty frames (also #484, J475).
"can we make this animation a fade in instead and speed it up? currently looks weird and takes too long!" Split down (also #484, J475).

Job J475b, branch j475b-remove-host-motion, stacked on origin/j475-motion-pill-split (which already holds the J475 motion commits for 2 and 3, base d7b2e4dc1). Plan:

Remove host: three switchable variants (?removalui=foot|menu|inline), production-build screenshots at 1440x900 and 393x852, dark and light, attached here. Recommendation below. Owner picks; none is final.
Pill morph and split: measure before/after on dev-02 production builds with J475's capture spec, attach frame strips and ms.
TASTE rows with the owner's words; scripts/verify fast on compute01.

Owner complaints from production (ssh.kayg.org at 92d2f2e9f), 2026-11-10: 1. "we need a better way to show "Remove host" the current design is horrible." The host details panel foot shows a pink "Remove host" line, then a second plain "Remove host" line. Root cause found: the row's hint was filled from the registry's short label (also "Remove host") instead of a sentence. 2. The window pill -> menu morph is slow, with blurred empty frames (also #484, J475). 3. "can we make this animation a fade in instead and speed it up? currently looks weird and takes too long!" Split down (also #484, J475). Job J475b, branch `j475b-remove-host-motion`, stacked on `origin/j475-motion-pill-split` (which already holds the J475 motion commits for 2 and 3, base d7b2e4dc1). Plan: - Remove host: three switchable variants (`?removalui=foot|menu|inline`), production-build screenshots at 1440x900 and 393x852, dark and light, attached here. Recommendation below. Owner picks; none is final. - Pill morph and split: measure before/after on dev-02 production builds with J475's capture spec, attach frame strips and ms. - TASTE rows with the owner's words; `scripts/verify fast` on compute01.

kayg commented

2026-11-10 14:52:47 +00:00

Author

Owner

Start: branch j475b-remove-host-motion, base b21e61c31 (J475's motion commits on top of origin/dev d7b2e4dc1).
Finding: the duplicated "Remove host" in the panel is a bug (the row's hint was filled from the registry's short label in details.on-demand.ts), not only a design problem.
J475 (#484) already pushed fixes for complaints 2 and 3 with no measurements. I stack on them and add the measurements instead of redoing the work.

Start: branch j475b-remove-host-motion, base b21e61c31 (J475's motion commits on top of origin/dev d7b2e4dc1). Finding: the duplicated "Remove host" in the panel is a bug (the row's hint was filled from the registry's short label in details.on-demand.ts), not only a design problem. J475 (#484) already pushed fixes for complaints 2 and 3 with no measurements. I stack on them and add the measurements instead of redoing the work.

kayg commented

2026-11-10 15:08:37 +00:00

Author

Owner

Remove host: three review variants, built on a production build on dev-02 (branch j475b-remove-host-motion), none final. Open the details card from a window's host pill on /?mock=1&proto=windows&removal=1&removalui=foot|menu|inline.

Root cause of "two lines, same label": the row's hint was filled from the registry's short label ("Remove host"). Fixed in every variant: the hint is now the effect, in order (D219, D273): "Revokes its access, then uninstalls the infraternal agent from it."

foot (A): one danger row at the panel foot, the label once and the sentence under it, on the keys' left edge. Press it: the D380 glass confirmation card, "Remove ?" with the same sentence and Keep / Remove.
menu (B): nothing on the card's face. A quiet ⋯ ("Host actions") in the card header opens a one-entry menu, "Remove host…", which opens the same glass card.
inline (C): the same row, but pressing it turns the foot into the question inside the panel (name, the sentence, Keep and a red Remove). No floating card; 150 ms ease-out crossfade.

Recommendation: A (foot). It is what the product already uses for destructive rows (TASTE rows "A destructive action is a row", "A confirmation belongs to what it acts on"), it is visible without a hunt, it costs the fewest taps, and its card is the glass card D380 asked for. B hides a destructive action behind a vague ⋯ (TASTE dislikes vague "More"), C makes the panel grow and needs its own confirm code.

Finding (not fixed, shared component): on a 393 px phone the glass confirmation card spans the full window width and touches both edges (see any *-phone-*-confirm.png). It is the shared mountConfirmTip placement; say if you want it inset.

Remove host: three review variants, built on a production build on dev-02 (branch j475b-remove-host-motion), none final. Open the details card from a window's host pill on `/?mock=1&proto=windows&removal=1&removalui=foot|menu|inline`. Root cause of "two lines, same label": the row's hint was filled from the registry's short label ("Remove host"). Fixed in every variant: the hint is now the effect, in order (D219, D273): "Revokes its access, then uninstalls the infraternal agent from it." - **foot (A):** one danger row at the panel foot, the label once and the sentence under it, on the keys' left edge. Press it: the D380 glass confirmation card, "Remove <host>?" with the same sentence and Keep / Remove. - **menu (B):** nothing on the card's face. A quiet ⋯ ("Host actions") in the card header opens a one-entry menu, "Remove host…", which opens the same glass card. - **inline (C):** the same row, but pressing it turns the foot into the question inside the panel (name, the sentence, Keep and a red Remove). No floating card; 150 ms ease-out crossfade. Recommendation: **A (foot).** It is what the product already uses for destructive rows (TASTE rows "A destructive action is a row", "A confirmation belongs to what it acts on"), it is visible without a hunt, it costs the fewest taps, and its card is the glass card D380 asked for. B hides a destructive action behind a vague ⋯ (TASTE dislikes vague "More"), C makes the panel grow and needs its own confirm code. Finding (not fixed, shared component): on a 393 px phone the glass confirmation card spans the full window width and touches both edges (see any `*-phone-*-confirm.png`). It is the shared `mountConfirmTip` placement; say if you want it inset.

sheet-foot-desktop.png

1.8 MiB

sheet-foot-phone.png

1.6 MiB

sheet-inline-desktop.png

1.6 MiB

sheet-inline-phone.png

1.4 MiB

sheet-menu-desktop.png

1.7 MiB

sheet-menu-phone.png

1.7 MiB

kayg commented

2026-11-10 15:08:49 +00:00

Author

Owner

Motion, before and after, production builds on dev-02 through build-slot, 1440x900, CDP screencast (frame times ±16 ms). Before = origin/dev d7b2e4dc1 (already has J428's cb62ffb8f); after = this branch (J475's commits b21e61c31 and earlier, #484). Capture: apps/tracer/test/motion-capture.spec.ts. Strips are frames from the click on; labels are ms since the screencast began (click at about 300).

	before	after
Pill menu open: rows half visible	106 ms	36 ms
Pill menu open: settled	206 ms	152 ms
Pill menu close: settled	199 ms	176 ms
Frames with an open panel but rows under 10 %	4	1
Split down: other windows stop moving	572 ms	5 ms (they snap)
Split down: liquid layer drawn	28 frames, to 622 ms	none
Split down: new window fully opaque	about 5 frames after first paint, ~ 400 ms after liquid start	opacity 0 -> 0.44 -> 0.88 -> 0.95 -> 1 over about 100 ms

Reading: the pill menu was already under 300 ms on dev, but its rows lagged the panel; they are now on screen within about 2 frames. The split no longer draws any liquid layer, so nothing is shown twice.
Another run of the same capture on J475's own tree gave pill open settled 161 ms, rows half visible 61 ms, which is the run-to-run spread on a shared VM.

Motion, before and after, production builds on dev-02 through build-slot, 1440x900, CDP screencast (frame times ±16 ms). Before = origin/dev d7b2e4dc1 (already has J428's cb62ffb8f); after = this branch (J475's commits b21e61c31 and earlier, #484). Capture: `apps/tracer/test/motion-capture.spec.ts`. Strips are frames from the click on; labels are ms since the screencast began (click at about 300). | | before | after | |---|---|---| | Pill menu open: rows half visible | 106 ms | 36 ms | | Pill menu open: settled | 206 ms | 152 ms | | Pill menu close: settled | 199 ms | 176 ms | | Frames with an open panel but rows under 10 % | 4 | 1 | | Split down: other windows stop moving | 572 ms | 5 ms (they snap) | | Split down: liquid layer drawn | 28 frames, to 622 ms | none | | Split down: new window fully opaque | about 5 frames after first paint, ~ 400 ms after liquid start | opacity 0 -> 0.44 -> 0.88 -> 0.95 -> 1 over about 100 ms | Reading: the pill menu was already under 300 ms on dev, but its rows lagged the panel; they are now on screen within about 2 frames. The split no longer draws any liquid layer, so nothing is shown twice. Another run of the same capture on J475's own tree gave pill open settled 161 ms, rows half visible 61 ms, which is the run-to-run spread on a shared VM.

pill-menu-before.jpg

326 KiB

pill-menu-after.jpg

296 KiB

split-down-before.jpg

435 KiB

split-down-after.jpg

217 KiB

kayg commented

2026-11-10 16:46:17 +00:00

Author

Owner

Machine pill: two tabs. Machine (host facts, unchanged except Address and "How it is reached" left it) and Connection. What went into Connection, in order:

Link: Status, Connection delay, Encrypted, then Address and How it is reached (moved from the Machine tab's Access group; "How it is reached" still only with Extended info). On the prototype: Route, Transport, Connection delay, Traffic, Reconnects.
Mesh (prototype only: Mesh, Certificate; the product has no mesh rows in this card yet, so none appear there).
Session: the old third tab's rows (Name, Started, Last used, Running now, Size, Sized by).
Remove host, last, inline: the danger row, then the question in the panel with Keep and a red Remove. Hidden on the Machine tab. Escape or Keep puts the row back and the card stays open.
Note: the product's card had Host, Connection and Session tabs (no separate mesh tab), so "mesh details" are the Link/Mesh rows above; tell me if you meant something else.

Sidebar. The machine row's hover button (the bin, tooltip "Remove host") already existed; it gains a left swipe ("Remove", swipeKeeps: the row stays listed behind the card). Both open the glass confirmation card (D380). Not in the row itself: the sentence on what removal does does not fit a row.

Inset card. The shared mountConfirmTip now keeps a card inside the window its anchor belongs to with the 9 px inset (it ran edge to edge, and past the window's right edge, on a phone). Sidebar cards are inset from the viewport as before.

Sheets: desktop 1440x900 and phone 393x852, ink and paper: machine tab, connection tab end, inline question, sidebar hover button (desktop), swipe mid-gesture and revealed (phone), the sidebar confirmation card.

Test notes: details-removal-row.spec.ts now asserts two tabs, the block only on Connection, label on the keys' edge, hint different from the label, the question in the panel and Keep/Escape restoring it; details-facts.test.ts the tab content. test/host-removal-confirm.spec.ts (6 "solid" cases) and test/machine-sections.spec.ts (2 extended-info cases) fail identically on origin/dev d7b2e4dc1 (run on dev-02 for this comment), so they are not from this change. J475's own split test waited for every animation to end and timed out on the endless caret blink; it now counts finite animations only.

D385 layout built (branch j475b-remove-host-motion, production build on dev-02, preview re-served at http://10.69.69.117:47663; open a machine pill, or on the clusters mock `?proto=clusters&scene=1&removal=1` for the sidebar). Variants A and B and the `?removalui` switch are gone. **Machine pill: two tabs.** Machine (host facts, unchanged except Address and "How it is reached" left it) and Connection. What went into Connection, in order: 1. Link: Status, Connection delay, Encrypted, then Address and How it is reached (moved from the Machine tab's Access group; "How it is reached" still only with Extended info). On the prototype: Route, Transport, Connection delay, Traffic, Reconnects. 2. Mesh (prototype only: Mesh, Certificate; the product has no mesh rows in this card yet, so none appear there). 3. Session: the old third tab's rows (Name, Started, Last used, Running now, Size, Sized by). 4. Remove host, last, inline: the danger row, then the question in the panel with Keep and a red Remove. Hidden on the Machine tab. Escape or Keep puts the row back and the card stays open. Note: the product's card had Host, Connection and Session tabs (no separate mesh tab), so "mesh details" are the Link/Mesh rows above; tell me if you meant something else. **Sidebar.** The machine row's hover button (the bin, tooltip "Remove host") already existed; it gains a left swipe ("Remove", swipeKeeps: the row stays listed behind the card). Both open the glass confirmation card (D380). Not in the row itself: the sentence on what removal does does not fit a row. **Inset card.** The shared `mountConfirmTip` now keeps a card inside the window its anchor belongs to with the 9 px inset (it ran edge to edge, and past the window's right edge, on a phone). Sidebar cards are inset from the viewport as before. Sheets: desktop 1440x900 and phone 393x852, ink and paper: machine tab, connection tab end, inline question, sidebar hover button (desktop), swipe mid-gesture and revealed (phone), the sidebar confirmation card. Test notes: `details-removal-row.spec.ts` now asserts two tabs, the block only on Connection, label on the keys' edge, hint different from the label, the question in the panel and Keep/Escape restoring it; `details-facts.test.ts` the tab content. `test/host-removal-confirm.spec.ts` (6 "solid" cases) and `test/machine-sections.spec.ts` (2 extended-info cases) fail identically on origin/dev d7b2e4dc1 (run on dev-02 for this comment), so they are not from this change. J475's own split test waited for every animation to end and timed out on the endless caret blink; it now counts finite animations only.

d385-sheet-desktop-ink.jpg

710 KiB

d385-sheet-desktop-paper.jpg

729 KiB

d385-sheet-phone-ink.jpg

395 KiB

d385-sheet-phone-paper.jpg

406 KiB

kayg commented

2026-11-10 16:46:18 +00:00

Author

Owner

Correction to the motion table above: the "before" split row said the new window took about 400 ms to become opaque. It does not: in the old build it fades 0 -> 1 over about 6 frames (about 100 ms), but only after the liquid layer has been drawn for several frames; the old split's total visible motion was the liquid layer's 622 ms. After: the fade starts at once and ends in about 100 ms, with no liquid layer.

No labels

launch-qa

No milestone

No project

No assignees

1 participant

Notifications

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

kayg/infraternal#486

No description provided.

Rows
Columns