NB - Native Browser Bridge

@@ -0,0 +1,86 @@+---+name: making-the-hero+description: "DEV skill: how to build the nb-bridge hero image - the full-hero-import recipe that finally worked, after every studio-native path produced a window-in-a-window John rejected. Read BEFORE regenerating the hero for adom/nb-bridge (or any bridge page whose vitrine is a real browser window). Covers: why the studio's vitrine container can never show a browser window cleanly, the real-nb-window rule (never pup!), the badged-taskbar capture, matching Pup's hero geometry, and the exact compose-render-import pipeline."+---+Parent skill: **adom-native-browser** (maintainers). Publish flow: **publishing-the-bridge**.++# Making the nb-bridge hero++The hero for adom/nb-bridge is built by the **full-hero import** path, not the studio's native+vitrine slot. This file is the recipe plus every rule John set while we iterated (2026-08-09).++## The one structural fact that forces full-hero import++Hero Studio wraps ANY vitrine image in its own `.window` container: `border 0.67px+rgba(255,255,255,.09)`, `border-radius 9px`, drop shadow + teal glow, and an opaque+`rgb(13,17,23)` background (transparency is lost). `--chrome none` removes only the fake+TITLEBAR, never this container. So an image that already IS a browser window always renders as a+window inside another window. John rejected that three times; do not try to outsmart it again.+Compose the entire 2000x1250 yourself and import with `hero-studio vitrine --file X --full`.+(Filed upstream as part of hero-studio#28 territory; until the studio offers a bare slot, full+import is THE path.)++## John's hero rules for nb (all landed the hard way)++1. **The vitrine window MUST be a real nb window** - opened via `nbrowser_open_window` in a real+   signed-in profile (`chrome:[email protected]`). NEVER a pup window: pup is the sibling product+   (logged-out Chrome-for-Testing). The Work-profile pill + avatar in the toolbar is the proof.+2. **Badge it.** `nbrowser_taskbar {overlay:{badge:"adom"}}` before capturing the taskbar - the+   composited icon (user's photo + Adom mark + active indicator) is nb's visual signature.+3. **Page content: the giant `nb` wordmark**, dark mode, brand gradient. Serve it from the page+   repo (`demo/nb.html`) so the address bar shows a REAL `wiki.adom.inc` URL, never a `data:` URL.+4. **No window-in-a-window** (see above). The Chrome window floats directly on the hero+   background with its own shadow.+5. **Windows taskbar**: real, readable. Icons at 2x what you first think (~60px at 2000px hero),+   TRUE aspect (height-normalise each icon crop; squeezing slot crops into squares smooshes+   them). A floating SEGMENT like Pup's (a rounded dark bar with 3 icons: Chrome, Edge, badged+   nb) - not a full-width bar, no Start/Search needed. Nothing may be "cut off" below a taskbar:+   a taskbar is the bottom of a screen.+6. **Match Pup's geometry** (adom/pup-bridge hero-v9): window ~54% of hero width, chrome+   decoration ~7% of window width (capture the window ~930px wide so the toolbar reads),+   BUT give the right margin ~3% (Pup's own 2% is too tight per John) and align the pill, the+   window and the taskbar segment on ONE right edge.+7. **Upper-right pill says BRIDGE** - pose with `--type bridge` (works even though the studio+   `mode` enum only lists app/component). When the composed image carries its own baked pill,+   `hero-studio set overlay.pill=false` or the studio double-stamps it.+8. Title short form in the IMAGE ("Native Browser", like Pup's says "Pup"); the WIKI title stays+   "NB - Native Browser Bridge". NEVER click "Apply changes to wiki" at the gate - it would+   rename the page to the hero headline.++## The pipeline (exact)++1. Wake + open: `nbrowser_wake_profile` then `nbrowser_open_window {profile:"chrome:[email protected]",+   url:"https://wiki.adom.inc/blob/app/nb-bridge/demo/nb.html"}`; size ~930x650 via+   `nbrowser_window_state` (decoration ratio).+2. Badge: `nbrowser_taskbar {sessionId, overlay:{badge:"adom"}}`.+3. Capture window: `desktop_screenshot_window {hwnd}`. If content is BLACK: Chrome throttles+   occluded windows - take `nbrowser_screenshot` (CDP) and paste the page bitmap into the frame,+   or just recapture while the window paints. Splice out the pink "started debugging this+   browser" banner rows (detect: full-width light rows y~110-260).+4. Capture taskbar: `desktop_screenshot_screen {monitor:0}` with a `reason`, crop the bottom+   ~6.5%, DELETE the full capture immediately (John's screen carries sensitive threads). The+   bar's true top edge is ~20px into that strip - profile rows to find it.+5. Compose 2000x1250 HTML (fonts from the hero-studio pkg: familjen-grotesk-700 + satoshi-400+   base64-embedded, adom-logo.svg inline; teal solid pill, title, accent subtitle, window img,+   taskbar segment). Push as `hero-build.html` to the page repo; open via pup at 2020x1290;+   `pup_screenshot_full_res {clip:{0,0,2000,1250}}`.+6. `hero-studio vitrine --file hero_candidate.png --full --port <N>` + `overlay.pill=false`,+   `overlay.slug=false`. Human ratifies + Generates (provenance stamp). Then: push PNG to+   `screenshots/hero.png` + `hero-vN.png`, `adom-wiki page hero adom/nb-bridge --image ...`,+   re-push complete `page.json` LAST, verify `hero_provenance:"studio"` and sha-match the served+   bytes.+7. Clean up: `nbrowser_close_window {includeSpawned:true}` + `pup_close_window` for every session+   you opened; delete `hero-build.html` from the repo if it is no longer wanted.++## Traps that burned a whole session++- pup `--surface pup` in `hero-studio pose` is broken (still calls dead `browser_*` verbs); pose+  with the port flag, open the gate in pup yourself, and poll `state.approved` - a timed-out pose+  process does NOT kill the studio server.+- The studio renders only the FIRST SENTENCE of `brief` as the hero subtitle. One sentence, commas.+- The studio caches page records per-port; a stale posed brief (old "abe" wording) survives+  republishes - POST /api/pages to refresh it.+- Screenshots cap at 1568px wide; taskbar icons are ~24px there. Upscale 2x + UnsharpMask, or the+  icons are mush.+- `state.lint` stays CLEAN through all of this - none of these mistakes are linted (filed+  hero-studio#28). The eyeball pass at the gate is the only real gate.