Parts Search

Measured on YOUR live instance in John's ah just now (1.3.4, 127.0.0.1:8893, viewport 723px), so this is your actual gap list, not a generic one:

You were holding the visual work because I told you to hold it until pup's reference was blessed. That is my miss, not yours — pup finished and I never sent the lift. It is lifted below.

THE HOLD IS LIFTED. Implement the full visual contract now.

pup built the reference implementation, John reviewed it live in his ah across several rounds, and it is done: merged dashboard, two-column panel, icon buttons, real toggle, flush header, fluid width. He is now asking why the other apps do not look like it. You were holding because I told you to; that instruction is withdrawn.

Install/update the pack first: adom-wiki pkg install adom/adom-ui-design (1.22.1). Every number below is in the skills; this is the checklist, not the spec.

The newbie panel (newbie-panel)

• ONE full-width band at the top, a SIBLING of your app body, never inside your app's grid (or it stays a column however wide you style it). Assert appBody.top === panel.bottom.
• TWO COLUMNS: grid-template-columns: 220px 1fr; gap: 24px, with a 1px hairline between them. The demo button lives alone in the left column; the prompts fill the right.
• The prompts are a TABLE, not pills. 40px rows, 1px bottom hairline, phrase truncating with ellipsis (never wrapping), a fixed 72px action cell. Phrases differ in length, so pills go ragged and the eye reads the boxes instead of the words.
• Row packing: the action cell tracks the PHRASE, not the window edge (grid-template-columns: minmax(0,max-content) 72px, left-packed), so Copy and Send do not end up 2000px from their text on a wide monitor.
• Copy and Send are ICON BUTTONS, using the pack's shipped assets/icons/action-copy.svg and action-send.svg, 16px in 28x28 ghost buttons, muted at rest, teal on hover, inside a 44px touch target. Do not draw your own — identical files are the only way seven apps look identical.
• Icon + tooltip + toast is ONE contract: a 600ms tooltip AND a matching aria-label AND a toast on every click. Never a title attribute alongside a custom tooltip or the browser paints its own box on top of yours. Audit: document.querySelectorAll('[title][data-tooltip]') must return zero.
• The demo button is the panel's ONLY filled button: teal fill, --on-accent text, radius 8, padding 10px 18px, 600 14px, with a 16px action-play.svg glyph. Label "Play the demo" or with the real duration. Disabled "Demo running" while it plays; it folds WITH the panel.
• The ✕ FULLY closes the panel — no residual one-liner, no stub — and the app UI moves up.
• The header ? is a REAL TOGGLE: pressing it while open CLOSES it. aria-pressed true/false, a visible difference in at least two ways, and the tooltip/aria-label swapping between "Hide the prompts panel" and "Show the prompts panel". The ✕ and the ? drive the SAME state.
• The content region owns the page padding, not the panel. Minimum 20px under the header, and the gap must be IDENTICAL open and closed.

The header (dash-header)

• Bar 44px, running EDGE TO EDGE (no margins, no radius, no gap above); padding 16px goes INSIDE the bar.
• App mark 18x18, and it is the SAME FILE as your webview.favicon, stroke 1.8.
• Name: Familjen Grotesk 600, 15px, var(--text) — not teal, not uppercase, and the HUMAN name, never the slug.
• Subtitle 13px var(--muted), 8px after the name.
• Right side: 18px glyphs in 28x28 ghosts, ordered target: chip → ? → cog. The cog is the pack's settings-cog-outline.svg, unmodified.
• No version anywhere in the bar. It lives in the brand hover popover.

Fluid width (dock-dashboard)

• NO max-width on the page container, app shell, or panel. A dashboard is an app surface, not an article: it fills whatever it is given, from a 700px pane to a maximised 2500px browser.
• Cap PROSE blocks only (max-width: 70ch on the explainer). Test at a very wide viewport — the cap is invisible until someone maximises.

One app, one dashboard (dock-dashboard)

• List every HTTP surface you serve. If more than one renders something a user would call "the dashboard", you have this bug. Your real UI IS the dock target; merge the contract's regions onto it rather than building a second page.

Status (status-leds)

• One compact LED pill row. The SERVER emits the short state; the page NEVER truncates prose (that is what produced "in talled and pinned").
• Prose on tap only; a red LED always carries its next step; busy escalates to "stuck?" past 15 minutes.

Send to AI (say-strip)

• ONE call: POST /ai-threads/run-prompt {"new":true,"prompt":phrase,"submit":true,"name":"<App> - say it","tags":["dock:<page-slug>"]}. /ai-threads/new never returns an id.
• 120 second client timeout (the tab create alone can take 60s).
• Never retry blind on a create timeout — surface the API's own _hints text in the failure toast.
• Verify by delivered_to, never by the thread's name. Proven both directions: a correctly-named tab that delivered nothing, and an unnamed tab where delivery was confirmed.
• Gate on GET /updater/status → updater.current_version >= 1.0.142, compared numerically (a lexical compare passes 1.0.99).

Icons (icons)

• Line drawings only: fill="none", stroke 1.5–2 on a 24 viewBox, transparent, never a filled silhouette, never a vendor logo.
• Hardcode #e6edf3 in any file loaded as its own document (a favicon has nothing to inherit from, so currentColor renders black and invisible).
• Test through <img src>, not inline — an inline test cannot fail the way production fails. Count bright pixels; invisibility is the failure mode.
• The favicon belongs to the PAGE: re-verify it whenever you change which page the dock opens.

Toasts (toasts)

• Bottom centre, 24px up, z-index 400, newest nearest the bottom, max 3 visible.
• Type colour appears in exactly TWO places: the 16px line icon and the 3px left border. Background stays --surface for all three types.
• Motion: rise 8px and fade in over 180ms, fade out over 140ms. Honour prefers-reduced-motion.

Launch path (docs/dockbar.md on adom/hydrogen)

• No skip_if: command -v <cli> — it skips the install whenever ANY version exists, so users on a plain card click never receive your fixes. Use install-or-update (pkg update || pkg install).
• Install steps must be bounded and loud: no unbounded network work, never redirect output to /dev/null, defer optional tooling to first use.
• Serve prints a direct http://127.0.0.1:<port>/ URL to STDOUT on every path including idempotent reuse, self-backgrounds (setsid, survives its parent), and retires its own older instance by port ownership (argv is a claim, not a fact).
• Serve the dashboard HTML Cache-Control: no-store, must-revalidate.
• CORS * plus OPTIONS on every /api/*.

⛔ How to verify (this is not optional)

1. Ralph-test BOTH panel states — open and closed, at desktop width and 390px, judging each as a whole page. The closed page is where regular users live.
2. Verify on the instance the DOCK runs, not your dev copy. Separate filesystems, separate settings, separate localStorage. "Works on mine" is not evidence about John's.
3. Read the artifact, not the signal: open the screenshot, fetch the served bytes, click the real button. Every defect found today was invisible to the layer above it.