setHover(true)}
+ onPointerLeave={() => setHover(false)}
+ >
+
+ {hover && !pinned && obs.dead !== true ? (
+
+ ) : null}
+
+ );
+}
+
+/** The floating card / PiP shared content. */
+function OverlayBody(props: {
+ store: ObservationClientStore;
+ focus: SessionObservation | undefined;
+ sessions: readonly SessionObservation[];
+ available: boolean;
+ pinnedId: string | null;
+ onTogglePin: (sessionId: string) => void;
+ now: number;
+ onPopOut?: (() => void) | undefined;
+ onCollapse?: (() => void) | undefined;
+ inPip: boolean;
+ onHeaderPointerDown?: (event: ReactPointerEvent
+
+ );
+}
+
+/** Clone the host document's style/link nodes into a PiP window. */
+function cloneStylesInto(pipWindow: Window): void {
+ for (const node of document.querySelectorAll('link[rel="stylesheet"], style')) {
+ pipWindow.document.head.appendChild(node.cloneNode(true));
+ }
+}
+
+export function ObservationOverlay({ store }: { store: ObservationClientStore }) {
+ const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot);
+ useEffect(() => {
+ store.start();
+ return () => store.stop();
+ }, [store]);
+
+ const [collapsed, setCollapsed] = useState(false);
+ const [pos, setPos] = useState
+
+
+ {displayUrl !== undefined ? (
+ 
+ ) : (
+
+ {sessions.length >= 2 ? (
+
+ {!available
+ ? "last frame kept"
+ : thumb?.status === "error"
+ ? "frame unavailable"
+ : "waiting for page"}
+
+ )}
+ {thumb?.status === "error" ? (
+
+
+ {sessions.map((obs) => (
+
+ ) : null}
+
+
+
+ {onPopOut !== undefined ? (
+
+
+ ) : null}
+
+
+ {body}
+ {(["nw", "ne", "sw", "se"] as const).map((corner) => (
+ ;
+
+export type ScreenshotToolViewProps = ToolCallViewProps & {
+ loadImage: ScreenshotImageLoader;
+};
+
+type ViewState = "running" | "ok" | "error";
+
+interface ViewModel {
+ readonly state: ViewState;
+ readonly command: string;
+ readonly output: string | null;
+ readonly image: ImageAttachmentRef | null;
+ readonly summary: string;
+}
+
+const TERMINAL_LABELS: Partial = {
+ running: "Running",
+ failed: "Failed",
+ done: "Done",
+ copy: "Copy",
+ copied: "Copied",
+ noOutput: "No output",
+ collapseAria: "Collapse output",
+ collapse: "Collapse",
+ expandAria: (hidden) => `Expand the remaining ${hidden} output lines`,
+ expand: (hidden) => `… ${hidden} more lines`,
+};
+
+const IMAGE_LABELS: MessageImageLabels = {
+ image: "screenshot",
+ open: "Open the original screenshot",
+ openNamed: (label) => `Open screenshot ${label}`,
+ loading: "Loading…",
+ loadFailed: "Load failed — retry",
+ lightbox: { dialog: "Screenshot preview", close: "Close preview" },
+};
+
+function firstLine(text: string): string {
+ const newline = text.indexOf("\n");
+ return newline === -1 ? text : text.slice(0, newline);
+}
+
+/** Rebuild the command line from the logged arguments (mirrors the host presenter). */
+function commandOf(argsRaw: string, callId: string): string {
+ try {
+ const args = JSON.parse(argsRaw) as { session?: unknown; ref?: unknown };
+ const parts = ["bsk", "screenshot", "--session"];
+ parts.push(
+ typeof args.session === "string" && args.session !== "" ? args.session : "(current)",
+ );
+ if (typeof args.ref === "string" && args.ref !== "") parts.push("--ref", args.ref);
+ return parts.join(" ");
+ } catch {
+ // Streaming can expose a truncated JSON prefix; it is still the best label.
+ return argsRaw === "" ? `bsk screenshot (${callId})` : `bsk screenshot ${firstLine(argsRaw)}`;
+ }
+}
+
+/** Derive the display model from the frozen block only. */
+export function viewModelOf(block: ToolCallViewProps["block"]): ViewModel {
+ const settled = "kind" in block;
+ const argsRaw = (settled ? block.call?.argsRaw : block.argsRaw) ?? "";
+ const command = commandOf(argsRaw, block.callId);
+ if (!settled) {
+ return { state: "running", command, output: null, image: null, summary: command };
+ }
+ const textBlock = block.content.find((item) => item.type === "text");
+ const imageBlock = block.content.find((item) => item.type === "image");
+ const output = textBlock !== undefined && textBlock.type === "text" ? textBlock.text : null;
+ const image =
+ imageBlock !== undefined && imageBlock.type === "image" ? imageBlock.attachment : null;
+ const state: ViewState = block.isError ? "error" : "ok";
+ const summary = output !== null ? firstLine(output) : command;
+ return { state, command, output, image, summary };
+}
+
+function dotState(state: ViewState): StateDotState {
+ switch (state) {
+ case "running":
+ return "ongoing";
+ case "error":
+ return "error";
+ default:
+ return "done";
+ }
+}
+
+/**
+ * Render one browser_screenshot call: a disclosure row over a terminal block
+ * (command + output) plus the screenshot image when the result carries one.
+ */
+export function ScreenshotToolView({ block, cwd, inspect, loadImage }: ScreenshotToolViewProps) {
+ const model = viewModelOf(block);
+ const [expanded, setExpanded] = useState(false);
+ const expandable = model.state === "running" || model.output !== null || model.image !== null;
+ const open = expanded && expandable;
+ return (
+
{
+ const step = 16;
+ const dx =
+ event.key === "ArrowRight" ? step : event.key === "ArrowLeft" ? -step : 0;
+ const dy = event.key === "ArrowDown" ? step : event.key === "ArrowUp" ? -step : 0;
+ if (dx === 0 && dy === 0) return;
+ event.preventDefault();
+ const next = applyResize(cardOrigin(), "se", dx, dy, viewport());
+ setPos(next.pos);
+ setSize(next.size);
+ }
+ : undefined
+ }
+ />
+ ))}
+
+ );
+}
diff --git a/packages/dsh-plugin-browserskill/src/client/ScreenshotToolView.module.css b/packages/dsh-plugin-browserskill/src/client/ScreenshotToolView.module.css
new file mode 100644
index 0000000..87047b5
--- /dev/null
+++ b/packages/dsh-plugin-browserskill/src/client/ScreenshotToolView.module.css
@@ -0,0 +1,57 @@
+/* browser_screenshot toolview: disclosure row over a terminal block plus the
+ screenshot image. Semantic tokens only (--dsw-alias-*), no literal colors. */
+
+.card {
+ display: flex;
+ flex-direction: column;
+}
+
+.summary {
+ min-width: 0;
+ margin-left: 6px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--dsw-alias-label-secondary);
+}
+
+.card[data-state="error"] .summary {
+ color: var(--dsw-alias-label-error);
+}
+
+.body {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding: 4px 0 4px 22px;
+}
+
+.image-wrap {
+ display: flex;
+}
+
+.inspect-button {
+ align-self: flex-start;
+ border: none;
+ background: none;
+ padding: 0;
+ font: inherit;
+ font-size: 12px;
+ color: var(--dsw-alias-label-tertiary);
+ cursor: pointer;
+}
+
+.inspect-button:hover {
+ color: var(--dsw-alias-label-secondary);
+}
+
+.inspect-button:focus-visible {
+ outline: 2px solid var(--dsw-alias-border-focus);
+ outline-offset: 2px;
+ border-radius: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+ .inspect-button {
+ transition: none;
+ }
+}
diff --git a/packages/dsh-plugin-browserskill/src/client/ScreenshotToolView.tsx b/packages/dsh-plugin-browserskill/src/client/ScreenshotToolView.tsx
new file mode 100644
index 0000000..1107aec
--- /dev/null
+++ b/packages/dsh-plugin-browserskill/src/client/ScreenshotToolView.tsx
@@ -0,0 +1,161 @@
+// browser_screenshot keyed toolview: the terminal card's command line and
+// output stay exactly as the host renders them, and a result carrying an
+// image block additionally renders the screenshot itself (thumbnail with the
+// shared click-to-open lightbox). Pure function of the frozen call/result
+// slice — live and replay paths render identically.
+
+import type { ImageAttachmentRef } from "@deepseek-ai/dsh-attachment";
+import {
+ type ImageLoader,
+ MessageImage,
+ type MessageImageLabels,
+} from "@deepseek-ai/dsh-client-ui-attachment";
+import {
+ DisclosureRow,
+ StateDot,
+ type StateDotState,
+ TerminalBlock,
+ type TerminalBlockLabels,
+} from "@deepseek-ai/dsh-client-ui-primitives";
+import type { ToolCallViewProps } from "@deepseek-ai/dsh-client-ui-tool/client";
+import { useState } from "react";
+import css from "./ScreenshotToolView.module.css";
+
+/** Resolved loader bound to the owning session at registration time. */
+export type ScreenshotImageLoader = (attachment: ImageAttachmentRef) => Promise
+
+ );
+}
diff --git a/packages/dsh-plugin-browserskill/src/client/bsk-tokens.nomodule.css b/packages/dsh-plugin-browserskill/src/client/bsk-tokens.nomodule.css
new file mode 100644
index 0000000..f557c79
--- /dev/null
+++ b/packages/dsh-plugin-browserskill/src/client/bsk-tokens.nomodule.css
@@ -0,0 +1,49 @@
+/*
+ * BrowserSkill UI design tokens, scoped to the observation overlay root.
+ * VALUES MIRROR packages/ui/src/styles/tailwind.css (:root and .dark) — keep
+ * in sync with that file; it is the canonical source. Scoped here (instead of
+ * :root) so the dsh host theme can neither leak in nor be polluted by us.
+ * Dark follows prefers-color-scheme, same as the extension popup.
+ */
+.bsk-obs {
+ color-scheme: light dark;
+ --background: oklch(0.99 0.005 50);
+ --foreground: oklch(0.14 0.03 50);
+ --card: oklch(0.995 0.003 50 / 0.82);
+ --card-foreground: oklch(0.14 0.03 50);
+ --primary: oklch(0.62 0.22 45);
+ --primary-foreground: oklch(0.99 0.01 50);
+ --secondary: oklch(0.96 0.04 65);
+ --secondary-foreground: oklch(0.25 0.08 65);
+ --muted: oklch(0.96 0.01 50);
+ --muted-foreground: oklch(0.55 0.04 50);
+ --accent: oklch(0.96 0.04 65);
+ --accent-foreground: oklch(0.25 0.08 65);
+ --destructive: oklch(0.6 0.25 25);
+ --destructive-foreground: oklch(0.99 0.01 50);
+ --border: oklch(0.9 0.025 60);
+ --input: oklch(0.9 0.025 60);
+ --ring: oklch(0.62 0.22 45);
+ --radius: 0.75rem;
+}
+@media (prefers-color-scheme: dark) {
+ .bsk-obs {
+ --background: oklch(0.2 0.02 50);
+ --foreground: oklch(0.98 0.01 50);
+ --card: oklch(0.24 0.02 50 / 0.82);
+ --card-foreground: oklch(0.98 0.01 50);
+ --primary: oklch(0.7 0.18 45);
+ --primary-foreground: oklch(0.14 0.03 50);
+ --secondary: oklch(0.32 0.03 60);
+ --secondary-foreground: oklch(0.98 0.01 50);
+ --muted: oklch(0.3 0.02 50);
+ --muted-foreground: oklch(0.75 0.03 50);
+ --accent: oklch(0.32 0.03 60);
+ --accent-foreground: oklch(0.98 0.01 50);
+ --destructive: oklch(0.45 0.2 25);
+ --destructive-foreground: oklch(0.98 0.01 50);
+ --border: oklch(0.35 0.02 60);
+ --input: oklch(0.35 0.02 60);
+ --ring: oklch(0.7 0.18 45);
+ }
+}
diff --git a/packages/dsh-plugin-browserskill/src/client/index.ts b/packages/dsh-plugin-browserskill/src/client/index.ts
new file mode 100644
index 0000000..ad22171
--- /dev/null
+++ b/packages/dsh-plugin-browserskill/src/client/index.ts
@@ -0,0 +1,84 @@
+/**
+ * dsh-plugin-browserskill browser half: the `browser_screenshot` keyed
+ * toolview plus the observation overlay (live thumbnails + interrupt) floating
+ * over the shell via the `shell.overlay` seat.
+ */
+
+import type { ImageAttachmentRef } from "@deepseek-ai/dsh-attachment";
+import type { ClientContext, ISessions, SessionId } from "@deepseek-ai/dsh-client-runtime/client";
+// Type-only: pulls the 'shell.overlay' SlotMap merge into scope.
+import type {} from "@deepseek-ai/dsh-client-ui-layout/client";
+import type { ToolCallViewProps } from "@deepseek-ai/dsh-client-ui-tool/client";
+import { createElement } from "react";
+// Scope-prefixed BSK design tokens and utility sheet (injected verbatim as
+//
+
+
+
+
+ ) : null}
+ {inspect !== undefined ? (
+
+ ) : null}
+