feat(dsh-plugin-browserskill): default the overlay to the top-right + dsh-native styling

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.

packages/dsh-plugin-browserskill/src/client/ObservationOverlay.module.css

@@ -1,6 +1,8 @@
-/* Observation overlay: floating card + collapsed capsule. Semantic tokens
+/* Observation overlay: floating card + collapsed capsule. Every color,
-   only (--dsw-alias-*); the shell overlay layer is click-through, so the card
+   surface, shadow, and label style rides the dsh --dsw-alias-* semantic
-   and capsule opt back into pointer events themselves. */
+   tokens (dsh 0.1 ships no spacing/radius scales — those stay px, same as
+   dsh's own components). The shell overlay layer is click-through, so the
+   card and capsule opt back into pointer events themselves. */
 
 .card {
   position: fixed;
@@ -8,10 +10,10 @@
   display: flex;
   flex-direction: column;
   pointer-events: auto;
-  background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base));
+  background: var(--dsw-alias-bg-overlay);
-  border: 1px solid var(--dsw-alias-border-secondary);
+  border: 1px solid var(--dsw-alias-border-l2);
   border-radius: 10px;
-  box-shadow: 0 8px 28px rgb(0 0 0 / 18%);
+  box-shadow: var(--dsw-shadow-lv2);
   overflow: hidden;
 }
 
@@ -20,6 +22,7 @@
   flex-direction: column;
   height: 100%;
   min-height: 0;
+  font: var(--dsw-font-base-16, inherit);
   font-size: 12px;
   color: var(--dsw-alias-label-primary);
 }
@@ -32,7 +35,7 @@
   cursor: move;
   user-select: none;
   touch-action: none;
-  border-bottom: 1px solid var(--dsw-alias-border-secondary);
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
 }
 
 .dot {
@@ -44,12 +47,12 @@
 }
 
 .dot[data-state="active"] {
-  background: var(--dsw-alias-label-success);
+  background: var(--dsw-alias-state-success-primary);
   animation: bsk-obs-pulse 1.6s ease-in-out infinite;
 }
 
 .dot[data-state="error"] {
-  background: var(--dsw-alias-label-error);
+  background: var(--dsw-alias-state-error-primary);
 }
 @keyframes bsk-obs-pulse {
   0%,
@@ -73,9 +76,12 @@
 
 .icon-button {
   flex: none;
+  display: inline-flex;
+  align-items: center;
   border: none;
   background: none;
-  padding: 0 4px;
+  padding: 2px;
+  border-radius: 4px;
   font: inherit;
   color: var(--dsw-alias-label-tertiary);
   cursor: pointer;
@@ -83,6 +89,7 @@
 
 .icon-button:hover {
   color: var(--dsw-alias-label-secondary);
+  background: var(--dsw-alias-interactive-bg-hover);
 }
 
 .stage {
@@ -127,11 +134,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 11px;
+  color: var(--dsw-alias-state-warn-primary);
-  font-weight: 700;
+  border: 1px solid var(--dsw-alias-state-warn-primary);
-  color: var(--dsw-alias-label-warning);
+  background: var(--dsw-alias-bg-overlay);
-  border: 1px solid var(--dsw-alias-label-warning);
-  background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base));
 }
 
 .actions {
@@ -140,65 +145,17 @@
   justify-content: space-between;
   gap: 8px;
   padding: 6px 8px;
-  border-top: 1px solid var(--dsw-alias-border-secondary);
+  border-top: 1px solid var(--dsw-alias-border-l2);
-}
-
-.interrupt-wrap {
-  position: relative;
-  display: inline-flex;
 }
 
+/* Destructive action, styled like the shell's own danger affordances. */
 .interrupt {
-  border: 1px solid var(--dsw-alias-label-error);
+  color: var(--dsw-alias-state-error-primary);
-  background: none;
+  border-color: var(--dsw-alias-state-error-primary);
-  color: var(--dsw-alias-label-error);
-  border-radius: 6px;
-  padding: 3px 12px;
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.interrupt:disabled {
-  opacity: 0.45;
-  cursor: default;
-}
-
-.interrupt:focus-visible {
-  outline: 2px solid var(--dsw-alias-border-focus);
-  outline-offset: 2px;
 }
 
 .interrupt:not(:disabled):hover {
-  background: var(--dsw-alias-bg-danger-secondary, rgb(220 60 60 / 12%));
+  background: var(--dsw-alias-interactive-bg-hover-danger);
-}
-
-.hint {
-  position: absolute;
-  bottom: calc(100% + 6px);
-  left: 0;
-  width: 220px;
-  padding: 6px 8px;
-  border-radius: 6px;
-  background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base));
-  border: 1px solid var(--dsw-alias-border-secondary);
-  color: var(--dsw-alias-label-secondary);
-  box-shadow: 0 4px 14px rgb(0 0 0 / 16%);
-  z-index: 41;
-}
-
-.popout {
-  border: 1px solid var(--dsw-alias-border-secondary);
-  background: none;
-  color: var(--dsw-alias-label-secondary);
-  border-radius: 6px;
-  padding: 3px 10px;
-  font: inherit;
-  cursor: pointer;
-}
-
-.popout:hover {
-  color: var(--dsw-alias-label-primary);
 }
 
 .resize-handle {
@@ -225,7 +182,7 @@
 .capsule {
   position: fixed;
   right: 16px;
-  bottom: 16px;
+  top: 16px;
   z-index: 40;
   display: inline-flex;
   align-items: center;
@@ -233,28 +190,16 @@
   padding: 6px 12px;
   pointer-events: auto;
   border-radius: 999px;
-  border: 1px solid var(--dsw-alias-border-secondary);
+  border: 1px solid var(--dsw-alias-border-l2);
-  background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base));
+  background: var(--dsw-alias-bg-overlay);
-  box-shadow: 0 4px 14px rgb(0 0 0 / 16%);
+  box-shadow: var(--dsw-shadow-lv1);
   font-size: 12px;
   color: var(--dsw-alias-label-secondary);
   cursor: pointer;
 }
 
-.popout:focus-visible,
+.capsule:hover {
-.icon-button:focus-visible,
+  background: var(--dsw-alias-interactive-bg-hover);
-.capsule:focus-visible {
-  outline: 2px solid var(--dsw-alias-border-focus);
-  outline-offset: 2px;
-}
-@media (prefers-reduced-motion: reduce) {
-  .dot[data-state="active"] {
-    animation: none;
-  }
-
-  .thumb {
-    animation: none;
-  }
 }
 
 .strip {
@@ -262,22 +207,22 @@
   gap: 6px;
   padding: 4px 8px;
   overflow-x: auto;
-  border-top: 1px solid var(--dsw-alias-border-secondary);
+  border-top: 1px solid var(--dsw-alias-border-l2);
 }
 
 .strip-item {
   position: relative;
   flex: none;
   border-radius: 6px;
-  border: 1px solid var(--dsw-alias-border-secondary);
+  border: 1px solid var(--dsw-alias-border-l2);
 }
 
 .strip-item[data-focused] {
-  border-color: var(--dsw-alias-border-focus);
+  border-color: var(--dsw-alias-brand-primary);
 }
 
 .strip-item[data-state="error"] {
-  border-color: var(--dsw-alias-label-error);
+  border-color: var(--dsw-alias-state-error-primary);
 }
 
 .strip-item[data-state="dead"] {
@@ -290,6 +235,7 @@
   gap: 4px;
   padding: 3px 6px;
   border: none;
+  border-radius: 6px;
   background: none;
   font: inherit;
   font-size: 11px;
@@ -297,6 +243,10 @@
   cursor: pointer;
 }
 
+.strip-main:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
 .strip-thumb {
   width: 28px;
   height: 20px;
@@ -324,8 +274,7 @@
 }
 
 .pin-badge {
-  font-size: 9px;
+  color: var(--dsw-alias-brand-primary);
-  line-height: 1;
 }
 
 .strip-interrupt {
@@ -335,11 +284,12 @@
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid var(--dsw-alias-label-error);
+  display: inline-flex;
-  background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base));
+  align-items: center;
-  color: var(--dsw-alias-label-error);
+  justify-content: center;
-  font-size: 8px;
+  border: 1px solid var(--dsw-alias-state-error-primary);
-  line-height: 1;
+  background: var(--dsw-alias-bg-overlay);
+  color: var(--dsw-alias-state-error-primary);
   padding: 0;
   cursor: pointer;
 }
@@ -349,8 +299,19 @@
   cursor: default;
 }
 
+.icon-button:focus-visible,
+.capsule:focus-visible,
 .strip-main:focus-visible,
 .strip-interrupt:focus-visible {
-  outline: 2px solid var(--dsw-alias-border-focus);
+  outline: 2px solid var(--dsw-alias-brand-primary);
-  outline-offset: 1px;
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .dot[data-state="active"] {
+    animation: none;
+  }
+
+  .thumb {
+    animation: none;
+  }
 }

packages/dsh-plugin-browserskill/src/client/ObservationOverlay.tsx

@@ -1,10 +1,20 @@
 // Observation overlay: the default in-app carrier for live session watching.
-// Expanded = draggable/resizable floating card (bottom-right); collapsed = a
+// Expanded = draggable/resizable floating card (top-right, out of the
-// status capsule; "pop out" upgrades the same content to a native Document
+// composer's way); collapsed = a status capsule; "pop out" upgrades the same
-// PiP window (user gesture required by the browser). Multi-session renders a
+// content to a native Document PiP window (user gesture required by the
-// meeting-style strip under the focus view. Pure client state — position,
+// browser). Multi-session renders a meeting-style strip under the focus view.
-// size, collapse, and the pin live for the page lifetime only.
+// Visuals ride dsh's shared primitives and --dsw-alias-* tokens throughout,
+// so the card reads as a native part of the shell, not a foreign widget.
 
+import {
+  Button,
+  IconChevronDownOutline14,
+  IconRightUpOutline16,
+  IconStopFill16,
+  IconWarningOutline16,
+  StateDot,
+  Tooltip,
+} from "@deepseek-ai/dsh-client-ui-primitives";
 import {
   type PointerEvent as ReactPointerEvent,
   useCallback,
@@ -82,6 +92,21 @@ export function statusOf(obs: SessionObservation): "active" | "idle" | "error" {
   return obs.action === "idle" ? "idle" : "active";
 }
 
+function dotStateOf(
+  state: "active" | "idle" | "error" | "dead",
+): "done" | "ongoing" | "error" | "warning" {
+  switch (state) {
+    case "active":
+      return "ongoing";
+    case "error":
+      return "error";
+    case "dead":
+      return "warning";
+    default:
+      return "done";
+  }
+}
+
 /** One strip item: mini frame, id, status dot, hover interrupt, pin toggle. */
 function StripItem(props: {
   store: ObservationClientStore;
@@ -122,11 +147,20 @@ function StripItem(props: {
           )}
         </span>
         <span className={css["strip-id"]}>{obs.sessionId}</span>
-        <span className={css.dot} data-state={state === "dead" ? "idle" : state} aria-hidden />
+        <StateDot state={dotStateOf(state)} />
         {pinned ? (
-          <span className={css["pin-badge"]} aria-label="pinned">
+          <svg
-            📌
+            className={css["pin-badge"]}
-          </span>
+            width="9"
+            height="9"
+            viewBox="0 0 10 10"
+            aria-label="pinned"
+          >
+            <path
+              d="M6.5 0.8 9.2 3.5 8.3 4.4 7.9 4 6.2 6.9 6.6 8.7 6 9.4 3.4 5.4 1 7.9 0.6 7.3 2.5 6 3.1 6.6 5.9 2.1 5.5 1.7Z"
+              fill="currentColor"
+            />
+          </svg>
         ) : null}
       </button>
       {hover && !pinned && obs.dead !== true ? (
@@ -140,7 +174,7 @@ function StripItem(props: {
             void store.interrupt(obs.sessionId);
           }}
         >
-          ■
+          <IconStopFill16 size={8} />
         </button>
       ) : null}
     </div>
@@ -175,7 +209,7 @@ function OverlayBody(props: {
     onHeaderPointerDown,
   } = props;
   const [interrupting, setInterrupting] = useState(false);
-  const [hintOpen, setHintOpen] = useState(false);
+  // One-time semantics hint: a shared Tooltip that retires after first use.
   const [hintSeen, setHintSeen] = useState(false);
 
   const thumbId = focus?.thumbnailAttachmentId;
@@ -193,7 +227,6 @@ function OverlayBody(props: {
   const onInterrupt = (): void => {
     if (!canInterrupt || focus === undefined) return;
     setHintSeen(true);
-    setHintOpen(false);
     setInterrupting(true);
     void store.interrupt(focus.sessionId).finally(() => setInterrupting(false));
   };
@@ -213,7 +246,7 @@ function OverlayBody(props: {
         onPointerDown={onHeaderPointerDown}
         role="presentation"
       >
-        <span className={css.dot} data-state={state} aria-hidden />
+        <StateDot state={state === "error" ? "error" : state === "active" ? "ongoing" : "done"} />
         <span className={css["status-text"]}>{statusText}</span>
         {onCollapse !== undefined ? (
           <button
@@ -222,7 +255,7 @@ function OverlayBody(props: {
             aria-label="Collapse"
             onClick={onCollapse}
           >
-            —
+            <IconChevronDownOutline14 />
           </button>
         ) : null}
       </div>
@@ -245,7 +278,7 @@ function OverlayBody(props: {
         )}
         {thumb?.status === "error" ? (
           <span className={css.badge} aria-label="thumbnail failed">
-            !
+            <IconWarningOutline16 size={12} />
           </span>
         ) : null}
       </div>
@@ -264,36 +297,36 @@ function OverlayBody(props: {
         </div>
       ) : null}
       <div className={css.actions}>
-        <span className={css["interrupt-wrap"]}>
+        <Tooltip
-          <button
+          label="Interrupt stops only the current browser action — the agent run continues (use the chat Stop button to halt the run)."
-            type="button"
+          side="top"
-            className={css.interrupt}
+          maxWidth={240}
-            disabled={!canInterrupt}
+          disabled={hintSeen}
-            aria-label="Interrupt the current browser action"
+        >
-            onPointerEnter={() => {
+          <span className={css["interrupt-wrap"]}>
-              if (!hintSeen) setHintOpen(true);
+            <Button
-            }}
+              variant="outline"
-            onPointerLeave={() => setHintOpen(false)}
+              size="sm"
-            onClick={onInterrupt}
+              className={css.interrupt}
-          >
+              icon={<IconStopFill16 />}
-            {interrupting ? "Interrupting…" : "Interrupt"}
+              disabled={!canInterrupt}
-          </button>
+              aria-label="Interrupt the current browser action"
-          {hintOpen && !hintSeen ? (
+              onClick={onInterrupt}
-            <span className={css.hint} role="tooltip">
+            >
-              Interrupt stops only the current browser action — the agent run continues (use the
+              {interrupting ? "Interrupting…" : "Interrupt"}
-              chat Stop button to halt the run).
+            </Button>
-            </span>
+          </span>
-          ) : null}
+        </Tooltip>
-        </span>
         {onPopOut !== undefined ? (
-          <button
+          <Button
-            type="button"
+            variant="ghost"
-            className={css.popout}
+            size="sm"
+            icon={<IconRightUpOutline16 />}
             aria-label="Pop out into a mini window"
             onClick={onPopOut}
           >
             Pop out
-          </button>
+          </Button>
         ) : null}
       </div>
     </div>
@@ -375,7 +408,7 @@ export function ObservationOverlay({ store }: { store: ObservationClientStore })
     )?.getBoundingClientRect();
     const base = {
       x: rect?.left ?? pos?.x ?? viewport().w - size.w - EDGE_MARGIN,
-      y: rect?.top ?? pos?.y ?? viewport().h - size.h - EDGE_MARGIN,
+      y: rect?.top ?? pos?.y ?? EDGE_MARGIN,
       w: rect?.width ?? size.w,
       h: rect?.height ?? size.h,
     };
@@ -427,7 +460,7 @@ export function ObservationOverlay({ store }: { store: ObservationClientStore })
         aria-label="Expand browser observation overlay"
         onClick={() => setCollapsed(false)}
       >
-        <span className={css.dot} data-state={state} aria-hidden />
+        <StateDot state={dotStateOf(state)} />
         <span className={css["capsule-text"]}>
           {snapshot.sessions.length} session{snapshot.sessions.length === 1 ? "" : "s"}
           {focus !== undefined && focus.action !== "idle"
@@ -441,7 +474,7 @@ export function ObservationOverlay({ store }: { store: ObservationClientStore })
   const style: React.CSSProperties =
     pos !== null
       ? { left: pos.x, top: pos.y, width: size.w, height: size.h }
-      : { right: EDGE_MARGIN, bottom: EDGE_MARGIN, width: size.w, height: size.h };
+      : { right: EDGE_MARGIN, top: EDGE_MARGIN, width: size.w, height: size.h };
   return (
     <div className={css.card} style={style} data-obs-card data-testid="obs-card">
       {body}

packages/dsh-plugin-browserskill/tests/client/observation-overlay.test.tsx

@@ -109,11 +109,11 @@ describe("ObservationOverlay", () => {
     const h = makeHarness([BUSY]);
     render(<ObservationOverlay store={h.store} />);
     const button = await screen.findByRole("button", { name: /Interrupt the current/ });
-    fireEvent.pointerEnter(button);
+    fireEvent.mouseOver(button);
     await screen.findByRole("tooltip");
-    fireEvent.pointerLeave(button);
+    fireEvent.mouseLeave(button);
     fireEvent.click(button);
-    fireEvent.pointerEnter(button);
+    fireEvent.mouseOver(button);
     expect(screen.queryByRole("tooltip")).toBeNull();
   });