feat(dsh-plugin-browserskill): multi-session strip, focus pin, and edge states (Phase 1-C)

- 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.

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

@@ -16,6 +16,7 @@ interface Harness {
   store: ObservationClientStore;
   es: () => EventSourceLike;
   push: (sessions: SessionObservation[]) => void;
+  emitRaw: (event: unknown) => void;
   fetches: { url: string; init?: { body?: string } }[];
   loadImage: ReturnType<typeof vi.fn>;
 }
@@ -52,6 +53,9 @@ function makeHarness(initial: SessionObservation[]): Harness {
       }
       if (sessions.length === 0) es?.onmessage?.({ data: JSON.stringify({ type: "reset" }) });
     },
+    emitRaw: (event) => {
+      es?.onmessage?.({ data: JSON.stringify(event) });
+    },
     fetches,
     loadImage,
   };
@@ -183,4 +187,106 @@ describe("ObservationOverlay", () => {
     for (const fn of listeners.get("pagehide") ?? []) fn();
     await screen.findByTestId("obs-card");
   });
+
+  it("renders the strip for two sessions and pins focus on click", async () => {
+    const older: SessionObservation = {
+      sessionId: "s1",
+      action: "idle",
+      since: Date.now() - 60000,
+    };
+    const newer: SessionObservation = { sessionId: "s2", action: "clicking", since: Date.now() };
+    const h = makeHarness([older, newer]);
+    render(<ObservationOverlay store={h.store} />);
+    // Auto-follows the most recently active session.
+    await screen.findByText(/s2 · clicking/);
+    const strip = screen.getByTestId("obs-strip");
+    expect(strip.textContent).toContain("s1");
+    expect(strip.textContent).toContain("s2");
+    // Pin s1: focus moves and stays even when s2 gets newer activity.
+    fireEvent.click(screen.getByRole("button", { name: "Pin session s1" }));
+    await screen.findByText(/s1 · idle/);
+    h.push([{ ...newer, since: Date.now() + 5000, action: "filling" }]);
+    await waitFor(() => expect(screen.queryByText(/s2 · filling/)).toBeNull());
+    expect(screen.getByText(/s1 · idle/)).toBeTruthy();
+    // Unpin: auto-follow resumes.
+    fireEvent.click(screen.getByRole("button", { name: "Unpin session s1" }));
+    await screen.findByText(/s2 · filling/);
+  });
+
+  it("flags an errored strip item without stealing focus", async () => {
+    const s1: SessionObservation = { sessionId: "s1", action: "idle", since: Date.now() - 30000 };
+    const s2: SessionObservation = { sessionId: "s2", action: "idle", since: Date.now() - 10000 };
+    const h = makeHarness([s1, s2]);
+    render(<ObservationOverlay store={h.store} />);
+    await screen.findByText(/s2 · idle/);
+    // s2's latest action failed: red edge on its strip item, focus stays on s2 already…
+    // now push an even-more-recent ERROR for s1 — focus must NOT jump to it.
+    h.push([
+      { ...s2, since: Date.now() - 5000 },
+      { ...s1, since: Date.now(), lastError: "click failed" },
+    ]);
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: "Pin session s1" }).closest("[data-state]"),
+      ).toHaveProperty("dataset", expect.objectContaining({ state: "error" })),
+    );
+    expect(screen.getByText(/s2 · idle/)).toBeTruthy();
+  });
+
+  it("shows browser-unavailable with a kept frame and a greyed interrupt", async () => {
+    const h = makeHarness([{ ...BUSY, thumbnailAttachmentId: "att-1" }]);
+    render(<ObservationOverlay store={h.store} />);
+    await waitFor(() => expect(h.loadImage).toHaveBeenCalledWith("att-1"));
+    await screen.findByRole("img", { name: "session s1 view" });
+    h.emitRaw({ type: "availability", available: false });
+    await screen.findByText("browser unavailable");
+    // Last frame stays on stage; interrupt is greyed.
+    expect(screen.getByRole("img", { name: "session s1 view" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: /Interrupt the current/ })).toHaveProperty(
+      "disabled",
+      true,
+    );
+  });
+
+  it("greys out a dead session in the strip and skips it for focus", async () => {
+    const s1: SessionObservation = { sessionId: "s1", action: "idle", since: Date.now() - 20000 };
+    const s2: SessionObservation = { sessionId: "s2", action: "idle", since: Date.now() - 10000 };
+    const h = makeHarness([s1, s2]);
+    render(<ObservationOverlay store={h.store} />);
+    await screen.findByText(/s2 · idle/);
+    h.push([{ ...s1, dead: true, since: Date.now() }, s2]);
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: "Pin session s1" }).closest("[data-state]"),
+      ).toHaveProperty("dataset", expect.objectContaining({ state: "dead" })),
+    );
+    // Dead sessions never take the stage.
+    expect(screen.getByText(/s2 · idle/)).toBeTruthy();
+  });
+
+  it("interrupts a strip session directly on hover without focusing it", async () => {
+    const s1: SessionObservation = {
+      sessionId: "s1",
+      action: "clicking",
+      since: Date.now() - 30000,
+    };
+    const s2: SessionObservation = { sessionId: "s2", action: "idle", since: Date.now() };
+    const h = makeHarness([s1, s2]);
+    render(<ObservationOverlay store={h.store} />);
+    await screen.findByText(/s2 · idle/);
+    const item = screen.getByRole("button", { name: "Pin session s1" }).closest("div");
+    if (item === null) throw new Error("no strip item");
+    fireEvent.pointerEnter(item);
+    const mini = await screen.findByRole("button", { name: "Interrupt session s1" });
+    fireEvent.click(mini);
+    await waitFor(() =>
+      expect(
+        h.fetches.some(
+          (f) => f.url === "/bsk-observation/interrupt" && f.init?.body === '{"sessionId":"s1"}',
+        ),
+      ).toBe(true),
+    );
+    // Focus did not move to s1.
+    expect(screen.getByText(/s2 · idle/)).toBeTruthy();
+  });
 });

packages/dsh-plugin-browserskill/tests/observation.test.ts

@@ -56,7 +56,9 @@ interface FakeRunner extends BskRunner {
 }
 
 /** Runner that answers screenshot with a real temp PNG and records kills. */
-function fakeRunner(opts: { screenshotFails?: boolean; killCount?: number } = {}): FakeRunner {
+function fakeRunner(
+  opts: { screenshotFails?: boolean; screenshotNotFound?: boolean; killCount?: number } = {},
+): FakeRunner {
   const calls: FakeRunner["calls"] = [];
   const killed: string[] = [];
   return {
@@ -65,6 +67,15 @@ function fakeRunner(opts: { screenshotFails?: boolean; killCount?: number } = {}
     async run(args: string[], options: BskRunOptions = {}): Promise<BskRunResult> {
       calls.push({ args, options });
       if (args[0] === "screenshot") {
+        if (opts.screenshotNotFound) {
+          return {
+            code: 4,
+            stdout: JSON.stringify({ code: "session_not_found", message: "no such session" }),
+            stderr: "",
+            timedOut: false,
+            aborted: false,
+          };
+        }
         if (opts.screenshotFails) {
           return { code: 1, stdout: "", stderr: "boom", timedOut: false, aborted: false };
         }
@@ -257,8 +268,10 @@ describe("observation traffic isolation", () => {
     // The capture upsert carries the thumbnail but the action stays idle…
     const captureEvents = events.filter((e) => e.type === "upsert");
     expect(captureEvents).toHaveLength(1);
-    expect(captureEvents[0].session?.action).toBe("idle");
-    expect(captureEvents[0].session?.thumbnailAttachmentId).toBe("att-1");
+    const captureEvent = captureEvents[0];
+    if (captureEvent.type !== "upsert") throw new Error("unreachable");
+    expect(captureEvent.session?.action).toBe("idle");
+    expect(captureEvent.session?.thumbnailAttachmentId).toBe("att-1");
     // …and the registry's current pointer never moved through observation.
     expect(registry.current()).toBe("s1");
     expect(registry.list()[0].startedAtMs).toBe(1);
@@ -398,6 +411,55 @@ describe("HTTP/SSE interface", () => {
   });
 });
 
+describe("availability and dead sessions", () => {
+  it("flips availability off after repeated global failures and back on success", async () => {
+    const scheduler = fakeScheduler();
+    const runner = fakeRunner({ screenshotFails: true });
+    const { service, events } = setup({ runner, scheduler });
+    service.addSession("s1");
+    for (let i = 1; i <= 3; i++) {
+      scheduler.runNext();
+      await waitFor(() => runner.calls.filter((c) => c.args[0] === "screenshot").length === i);
+    }
+    expect(service.isAvailable()).toBe(false);
+    expect(events.some((e) => e.type === "availability" && e.available === false)).toBe(true);
+    service.dispose();
+  });
+
+  it("marks a session dead on session_not_found and stops asking for frames", async () => {
+    const scheduler = fakeScheduler();
+    const runner = fakeRunner({ screenshotNotFound: true });
+    const { service, events } = setup({ runner, scheduler });
+    service.addSession("s1");
+    scheduler.runNext();
+    await waitFor(() => events.some((e) => e.type === "upsert" && e.session?.dead === true));
+    expect(service.getState()[0].dead).toBe(true);
+    expect(service.getState()[0].action).toBe("idle");
+    // No further captures are scheduled for a dead session.
+    expect(scheduler.pending()).toEqual([]);
+    // Instrumentation is dropped for dead sessions.
+    service.beginAction("s1", "clicking");
+    expect(service.getState()[0].action).toBe("idle");
+    // A dead session leaves cleanly.
+    service.removeSession("s1");
+    expect(service.getState()).toEqual([]);
+  });
+
+  it("clears lastError on the next action and keeps it on failure", () => {
+    const { service } = setup({});
+    service.addSession("s1");
+    service.endAction("s1", "click failed");
+    expect(service.getState()[0].lastError).toBe("click failed");
+    service.beginAction("s1", "clicking");
+    expect(service.getState()[0].lastError).toBeUndefined();
+    service.endAction("s1");
+    expect(service.getState()[0].lastError).toBeUndefined();
+    service.endAction("s1", "fill failed");
+    expect(service.getState()[0].lastError).toBe("fill failed");
+    service.dispose();
+  });
+});
+
 describe("actionForLabel", () => {
   it("maps tool labels onto observation verbs", () => {
     expect(actionForLabel("navigate")).toBe("navigating");