The previous pass aligned the observation overlay with the dsh shell; the
product call is the opposite direction — the floating card should read as a
BrowserSkill surface, not a shell-native widget.
- Reuse @browser-skill/ui directly (Button, cn); status dots spec'd after the
extension popup's ConnectionStatusIndicator; Remix icons for
interrupt/pin/warn/pop-out.
- Compile the BSK tailwind utility sheet scoped under the .bsk-obs root class
(scripts/build-client-css.mjs + postcss-prefix-selector) and ship the oklch
design tokens on the same scope, so nothing leaks into the host shell and
the shell theme cannot bleed back. tsdown injects .nomodule.css verbatim
(minified, unhashed) alongside the hashed CSS modules.
- BSK ships no shared tooltip, so the one-time interrupt semantics hint is a
card-spec bubble (bg-card/border/12px radius), retired after first use.
- Tests: pin react/react-dom to this package's 18.x copies in vitest — the ui
package sources peer on react ^19 and would otherwise emit react-19
(transitional) elements that the react-18 renderer rejects. Production is
unaffected (react stays external, provided by the shell).
- stylelint: ignore the generated bsk-ui.nomodule.css.
Review follow-ups: the card/capsule now default to the top-right (clear
of the composer), and the overlay reads as part of the shell instead of
a foreign widget:
- shared primitives everywhere: Button (outline/ghost sm) for
Interrupt/Pop out with the shell's danger hover token, Tooltip for
the one-time interrupt semantics hint (native span anchor — Button
does not forward refs), StateDot for status, and outline icons
(Stop/RightUp/ChevronDown/Warning) replacing text glyphs;
- every color/surface/shadow/label now uses --dsw-alias-* semantic
tokens (bg-overlay, border-l1/l2, state-*-primary, label-*,
interactive-bg-hover[-danger], brand-primary focus rings,
dsw-shadow-lv1/lv2) — no invented tokens, no literal colors (dsh 0.1
ships no spacing/radius scale; those stay px like dsh's own code);
- strip item focus ring uses brand-primary; focus-visible and
reduced-motion preserved.
- Strip (meeting-style multi-session layout): one item per session
(mini frame + id + status dot), horizontal row with scroll overflow;
hover reveals a per-item interrupt button that acts without
refocusing; click pins the focus view (pin badge, click again to
release); auto-follow picks the most recently active session but
never steals focus for errored or dead sessions (red edge / greyed
item instead).
- Edge states: the host flips an availability flag after repeated
global capture failures (client shows 'browser unavailable', keeps
the last frame, greys interrupt, and recovers on the next success);
a session_not_found envelope marks the session dead (no more frame
requests, grey strip item, removable as usual); lastError now clears
when the next action starts or succeeds.
- State/SSE wire gains { available } and an 'availability' event;
SessionObservation gains dead?.
Tests (+8, 97 total): host availability flip, dead marking +
instrumentation drop + clean removal, lastError lifecycle; client
strip render/pin/unpin/auto-follow, error no-steal, unavailable strip,
dead grey, strip-item interrupt without refocus.
Client half of the PiP observation window, wired to the host
ObservationService over the /bsk-observation HTTP+SSE seam:
- ObservationClientStore: initial state fetch + SSE increments +
on-demand thumbnail blob loading (session-authorized readAttachment,
same path as the toolview) + interrupt POST. All I/O injectable.
- ObservationOverlay registered into the shell.overlay list seat (the
sanctioned frame-wide surface; root is off-limits). Hidden with no
owned sessions; appears on first start; vanishes when all stop.
- Focus view: status row (green/grey/red dot + session + action + mm:ss
ticking), breathing thumbnail (new frames fade in, failures keep the
last frame with a warning badge, pre-navigate placeholder), and the
action area.
- Interrupt: single click, no confirm; greys into 'Interrupting…' and
back; disabled when nothing is in flight; one-time tooltip explains
the semantics (stops the current action only; the run continues).
- Card: drag-move via the header, corner-handle resize (min 240x180,
max 80% viewport), both clamped and kept for the page lifetime;
collapsible status capsule.
- PiP: Pop out (user gesture) opens Document PiP with the card's
current size, portals the same content in, and clones the document's
style nodes; pagehide falls back to the card with state intact;
unsupported browsers hide the button; nothing auto-pops.
Tests (+17, 89 total): store (fetch/SSE apply/malformed frames/
thumbnail lifecycle/interrupt wire/stop cleanup) and overlay (hidden->
visible lifecycle, status row, thumbnail via loader, interrupt
disabled/active/hint-once, capsule, resize clamps, move clamps, PiP
unsupported, PiP pop/fallback). Styling follows web-styling (dsw-alias
tokens, CSS Modules, focus-visible, reduced-motion).
Make the package dual-face: a dsh.client declaration (platform 'web')
plus an exports["./client"] bundle built in dsh's closure-factory shape
(window.__ModuleLoader__.load handoff, platform modules external,
everything else inlined, CSS Modules via lightningcss).
The client registers a keyed 'tool.call.toolview' view for
browser_screenshot that keeps the terminal block (command + output) and,
when the settled result carries an image block, resolves the durable
attachment through the client session's authorized readAttachment RPC
and renders it with the shared MessageImage thumbnail/lightbox atoms.
Path-only results render unchanged; every other browser_* tool keeps
the stock terminal card.
Tests: view-model derivation (running/ok/error, image vs path-only),
component rendering through @testing-library/react + happy-dom, and the
registration key. biome.json now excludes the package's lib/ build
output (same treatment as dist/).
BB-fat