mirror of
https://github.com/Tencent/BrowserSkill.git
synced 2026-09-10 13:01:23 +08:00
feat(dsh-plugin): better-sidebar 集成、会话关停与归档清理、悬浮窗修复 (#130)
* better-sidebar 集成：observation 视图迁入 better-sidebar 载体，按会话作用域展示 bsk 会话 * 会话关停与归档清理：支持会话 dispose 与归档自动清理 * 悬浮窗修复：悬浮 overlay 拖拽/缩放/PiP 弹出等问题修复 * 修复 Document PiP 空白窗口：载体卸载（关 tab、切会话、插件 HMR）时主动 close() PiP 窗口，避免残留空白窗口
This commit is contained in:
BB-fat
@@ -4,7 +4,7 @@
|
||||
// upgrade/fallback (mocked documentPictureInPicture). NOTE: use RTL's waitFor
|
||||
// (act-flushing), not vi.waitFor, when asserting store-driven UI updates.
|
||||
|
||||
import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { applyResize, ObservationOverlay } from "../../src/client/ObservationOverlay";
|
||||
import { type EventSourceLike, ObservationClientStore } from "../../src/client/observation-store";
|
||||
@@ -157,6 +157,45 @@ describe("ObservationOverlay", () => {
|
||||
await screen.findByText(/s1 · clicking/);
|
||||
});
|
||||
|
||||
it("stop session: the first click only arms the confirm, the second posts", async () => {
|
||||
const h = makeHarness([{ sessionId: "s1", action: "idle", since: Date.now() }]);
|
||||
render(<ObservationOverlay store={h.store} />);
|
||||
await screen.findByText(/s1 · idle/);
|
||||
const stop = screen.getByRole("button", { name: "Stop session s1" });
|
||||
fireEvent.click(stop);
|
||||
// Armed: a plain click must never close an Agent Window by itself.
|
||||
expect(h.fetches.some((f) => f.url === "/bsk-observation/stop")).toBe(false);
|
||||
const confirm = await screen.findByRole("button", { name: "Confirm stop session s1" });
|
||||
expect(confirm.getAttribute("aria-pressed")).toBe("true");
|
||||
fireEvent.click(confirm);
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
h.fetches.some(
|
||||
(f) => f.url === "/bsk-observation/stop" && f.init?.body === '{"sessionId":"s1"}',
|
||||
),
|
||||
).toBe(true),
|
||||
);
|
||||
});
|
||||
|
||||
it("disarms the stop confirm after the expiry window", async () => {
|
||||
const h = makeHarness([{ sessionId: "s1", action: "idle", since: Date.now() }]);
|
||||
render(<ObservationOverlay store={h.store} />);
|
||||
const stop = await screen.findByRole("button", { name: "Stop session s1" });
|
||||
vi.useFakeTimers();
|
||||
try {
|
||||
fireEvent.click(stop);
|
||||
// Synchronous queries only: waitFor-style finds hang under fake timers.
|
||||
expect(screen.getByRole("button", { name: "Confirm stop session s1" })).toBeTruthy();
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(3100);
|
||||
});
|
||||
expect(screen.getByRole("button", { name: "Stop session s1" })).toBeTruthy();
|
||||
expect(h.fetches.some((f) => f.url === "/bsk-observation/stop")).toBe(false);
|
||||
} finally {
|
||||
vi.useRealTimers();
|
||||
}
|
||||
});
|
||||
|
||||
it("resizes within min/max clamps", async () => {
|
||||
const h = makeHarness([BUSY]);
|
||||
render(<ObservationOverlay store={h.store} />);
|
||||
@@ -222,6 +261,7 @@ describe("ObservationOverlay", () => {
|
||||
addEventListener: (name: string, fn: () => void) => {
|
||||
listeners.set(name, [...(listeners.get(name) ?? []), fn]);
|
||||
},
|
||||
close: vi.fn(),
|
||||
} as unknown as Window;
|
||||
});
|
||||
(window as unknown as Record<string, unknown>).documentPictureInPicture = { requestWindow };
|
||||
@@ -236,6 +276,28 @@ describe("ObservationOverlay", () => {
|
||||
await screen.findByTestId("obs-card");
|
||||
});
|
||||
|
||||
it("closes the PiP window when the carrier unmounts", async () => {
|
||||
const h = makeHarness([BUSY]);
|
||||
const pipDoc = document.implementation.createHTMLDocument("pip");
|
||||
const close = vi.fn();
|
||||
const requestWindow = vi.fn(async () => {
|
||||
return {
|
||||
document: pipDoc,
|
||||
addEventListener: () => {},
|
||||
close,
|
||||
} as unknown as Window;
|
||||
});
|
||||
(window as unknown as Record<string, unknown>).documentPictureInPicture = { requestWindow };
|
||||
const { unmount } = render(<ObservationOverlay store={h.store} />);
|
||||
const popout = await screen.findByRole("button", { name: /Pop out/ });
|
||||
fireEvent.click(popout);
|
||||
await waitFor(() => expect(pipDoc.body.textContent).toContain("s1"));
|
||||
// Unmounting (tab close, conversation switch, plugin HMR) closes the PiP
|
||||
// instead of leaving a blank window behind.
|
||||
unmount();
|
||||
expect(close).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("renders the strip for two sessions and pins focus on click", async () => {
|
||||
const older: SessionObservation = {
|
||||
sessionId: "s1",
|
||||
|
||||
@@ -0,0 +1,331 @@
|
||||
// @vitest-environment happy-dom
|
||||
// better-sidebar carrier: tab registration + auto-open, the sidebar-mode
|
||||
// flag hiding the floating overlay, PiP pop-out from the tab, and the
|
||||
// store's refcounted acquire/release across overlapping carriers.
|
||||
|
||||
import { cleanup, render, screen, waitFor } from "@testing-library/react";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { ObservationOverlay } from "../../src/client/ObservationOverlay";
|
||||
import {
|
||||
type BetterSidebarLike,
|
||||
OBSERVATION_TAB_PATH,
|
||||
OBSERVATION_TAB_TYPE,
|
||||
ObservationSidebarTab,
|
||||
observationTabOpen,
|
||||
registerObservationSidebar,
|
||||
type SidebarNodeLike,
|
||||
type SidebarStateLike,
|
||||
type TabDescriptorLike,
|
||||
} from "../../src/client/observation-sidebar";
|
||||
import { type EventSourceLike, ObservationClientStore } from "../../src/client/observation-store";
|
||||
import { getSidebarMode, setSidebarMode } from "../../src/client/sidebar-mode";
|
||||
import type { SessionObservation } from "../../src/observation";
|
||||
|
||||
// Owned by the sidebar mock's active conversation ("conv-1") so the scoped
|
||||
// visibility logic lets it through; FOREIGN belongs to another conversation.
|
||||
const BUSY: SessionObservation = {
|
||||
sessionId: "s1",
|
||||
action: "clicking",
|
||||
since: Date.now() - 7000,
|
||||
dshSessionIds: ["conv-1"],
|
||||
};
|
||||
const FOREIGN: SessionObservation = {
|
||||
sessionId: "s9",
|
||||
action: "clicking",
|
||||
since: Date.now() - 5000,
|
||||
dshSessionIds: ["other-conv"],
|
||||
};
|
||||
|
||||
interface Harness {
|
||||
store: ObservationClientStore;
|
||||
es: () => EventSourceLike | undefined;
|
||||
push: (sessions: SessionObservation[]) => void;
|
||||
}
|
||||
|
||||
function makeHarness(initial: SessionObservation[]): Harness {
|
||||
let es: EventSourceLike | undefined;
|
||||
let current = initial;
|
||||
const store = new ObservationClientStore({
|
||||
fetchFn: async (url: string) => {
|
||||
if (url === "/bsk-observation/state") {
|
||||
return { ok: true, json: async () => ({ sessions: current }) };
|
||||
}
|
||||
return { ok: true, json: async () => ({ interrupted: true }) };
|
||||
},
|
||||
eventSourceFactory: () => {
|
||||
es = { onmessage: null, close: vi.fn() };
|
||||
return es;
|
||||
},
|
||||
loadImage: async (id: string) => `blob:${id}`,
|
||||
});
|
||||
return {
|
||||
store,
|
||||
es: () => es,
|
||||
push: (sessions) => {
|
||||
current = sessions;
|
||||
for (const s of sessions) {
|
||||
es?.onmessage?.({ data: JSON.stringify({ type: "upsert", session: s }) });
|
||||
}
|
||||
if (sessions.length === 0) es?.onmessage?.({ data: JSON.stringify({ type: "reset" }) });
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function leafWith(type: string, panelOpen = true): SidebarStateLike {
|
||||
return {
|
||||
panelOpen,
|
||||
splits: {
|
||||
kind: "split",
|
||||
id: "root",
|
||||
dir: "row",
|
||||
sizes: [1],
|
||||
children: [
|
||||
{
|
||||
kind: "leaf",
|
||||
id: "pane-1",
|
||||
active: type,
|
||||
tabs: [{ id: type, type, title: type }],
|
||||
},
|
||||
],
|
||||
},
|
||||
bottomSplits: { kind: "leaf", id: "pane-2", active: null, tabs: [] },
|
||||
};
|
||||
}
|
||||
|
||||
interface SidebarMock {
|
||||
service: BetterSidebarLike;
|
||||
descriptor: () => TabDescriptorLike;
|
||||
openTab: ReturnType<typeof vi.fn>;
|
||||
disposeTab: ReturnType<typeof vi.fn>;
|
||||
setState: (state: SidebarStateLike | undefined) => void;
|
||||
}
|
||||
|
||||
/** Insert a tab into the first leaf of the main tree (mirrors a real open). */
|
||||
function withTabOpened(state: SidebarStateLike, type: string): SidebarStateLike {
|
||||
let done = false;
|
||||
const walk = (node: SidebarNodeLike): SidebarNodeLike => {
|
||||
if (done) return node;
|
||||
if (node.kind === "leaf") {
|
||||
done = true;
|
||||
return { ...node, active: type, tabs: [...node.tabs, { id: type, type, title: type }] };
|
||||
}
|
||||
return { ...node, children: node.children.map(walk) };
|
||||
};
|
||||
return { ...state, splits: walk(state.splits) };
|
||||
}
|
||||
|
||||
function makeSidebar(
|
||||
initialState: SidebarStateLike | undefined = leafWith("explorer"),
|
||||
): SidebarMock {
|
||||
let descriptor: TabDescriptorLike | undefined;
|
||||
let state: SidebarStateLike | undefined = initialState;
|
||||
const openTab = vi.fn((seed: { type: string }) => {
|
||||
// Mirror the real feedback loop: a created tab lands in the state, so
|
||||
// later evaluations see it open (single-instance dedupe re-focuses).
|
||||
if (state !== undefined && !observationTabOpen(state)) {
|
||||
state = withTabOpened(state, seed.type);
|
||||
}
|
||||
});
|
||||
const disposeTab = vi.fn();
|
||||
const service: BetterSidebarLike = {
|
||||
registerTab: (next) => {
|
||||
descriptor = next;
|
||||
return disposeTab;
|
||||
},
|
||||
openTab,
|
||||
getSnapshot: () => ({ sessionId: "conv-1", state }),
|
||||
isTabEnabled: () => true,
|
||||
};
|
||||
return {
|
||||
service,
|
||||
descriptor: () => {
|
||||
if (descriptor === undefined) throw new Error("no tab registered");
|
||||
return descriptor;
|
||||
},
|
||||
openTab,
|
||||
disposeTab,
|
||||
setState: (next) => {
|
||||
state = next;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
setSidebarMode(false);
|
||||
});
|
||||
|
||||
describe("registerObservationSidebar", () => {
|
||||
it("registers a single-instance tab and holds the feed for its lifetime", () => {
|
||||
const h = makeHarness([]);
|
||||
const sidebar = makeSidebar();
|
||||
expect(getSidebarMode()).toBe(false);
|
||||
const dispose = registerObservationSidebar(sidebar.service, h.store);
|
||||
expect(getSidebarMode()).toBe(true);
|
||||
// The fiber holds the observation feed itself, so the auto-open watcher
|
||||
// sees new sessions even while the tab is closed.
|
||||
expect(h.es()).toBeDefined();
|
||||
const descriptor = sidebar.descriptor();
|
||||
expect(descriptor.id).toBe(OBSERVATION_TAB_TYPE);
|
||||
expect(descriptor.single).toBe(true);
|
||||
expect(descriptor.title).toBe("Browser Skill");
|
||||
dispose();
|
||||
expect(getSidebarMode()).toBe(false);
|
||||
expect(sidebar.disposeTab).toHaveBeenCalledTimes(1);
|
||||
expect(h.es()?.close).toHaveBeenCalled?.();
|
||||
});
|
||||
|
||||
it("opens the tab right away when a session is already live at activation", async () => {
|
||||
const h = makeHarness([BUSY]);
|
||||
const sidebar = makeSidebar();
|
||||
registerObservationSidebar(sidebar.service, h.store);
|
||||
// The initial state fetch lands asynchronously; the 0→N watcher then fires.
|
||||
await waitFor(() =>
|
||||
expect(sidebar.openTab).toHaveBeenCalledWith({
|
||||
type: OBSERVATION_TAB_TYPE,
|
||||
path: OBSERVATION_TAB_PATH,
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it("auto-opens on the first session but never re-focuses an open tab", async () => {
|
||||
const h = makeHarness([]);
|
||||
const sidebar = makeSidebar();
|
||||
registerObservationSidebar(sidebar.service, h.store);
|
||||
expect(sidebar.openTab).not.toHaveBeenCalled();
|
||||
// First session arrives: the tab lands in the sidebar.
|
||||
h.push([BUSY]);
|
||||
await waitFor(() => expect(sidebar.openTab).toHaveBeenCalledTimes(1));
|
||||
// The sidebar now reports the tab open (persisted/restored): further
|
||||
// session arrivals must not steal focus from whatever the user reads.
|
||||
sidebar.setState(leafWith(OBSERVATION_TAB_TYPE));
|
||||
h.push([]);
|
||||
h.push([{ ...BUSY, sessionId: "s2" }]);
|
||||
h.push([]);
|
||||
h.push([{ ...BUSY, sessionId: "s3" }]);
|
||||
await waitFor(() => expect(h.store.getSnapshot().sessions.length).toBe(1));
|
||||
expect(sidebar.openTab).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("does not open while the sidebar has no active session state", () => {
|
||||
const h = makeHarness([BUSY]);
|
||||
const sidebar = makeSidebar(undefined);
|
||||
registerObservationSidebar(sidebar.service, h.store);
|
||||
expect(sidebar.openTab).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("nudges an existing tab back into sight when the panel is collapsed", async () => {
|
||||
const h = makeHarness([]);
|
||||
// Tab already open (persisted), but the panel is collapsed: a new
|
||||
// session should surface the tracking view again (focus + expand via a
|
||||
// content open), like the floating card reappearing.
|
||||
const sidebar = makeSidebar(leafWith(OBSERVATION_TAB_TYPE, false));
|
||||
registerObservationSidebar(sidebar.service, h.store);
|
||||
h.push([BUSY]);
|
||||
await waitFor(() =>
|
||||
expect(sidebar.openTab).toHaveBeenCalledWith({
|
||||
type: OBSERVATION_TAB_TYPE,
|
||||
path: OBSERVATION_TAB_PATH,
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it("shows the visible session count as the tab badge", () => {
|
||||
const h = makeHarness([]);
|
||||
const sidebar = makeSidebar();
|
||||
registerObservationSidebar(sidebar.service, h.store);
|
||||
const badge = sidebar.descriptor().badge;
|
||||
const scope = { sessionId: "conv-1" };
|
||||
expect(badge?.(undefined, scope, undefined)).toBeNull();
|
||||
h.store.acquire();
|
||||
h.push([BUSY, FOREIGN]);
|
||||
expect(badge?.(undefined, scope, undefined)).toBe(1);
|
||||
expect(badge?.(undefined, { sessionId: "other-conv" }, undefined)).toBe(1);
|
||||
expect(badge?.(undefined, { sessionId: "nobody" }, undefined)).toBeNull();
|
||||
h.store.release();
|
||||
});
|
||||
|
||||
it("does not auto-open for sessions owned by other conversations", async () => {
|
||||
const h = makeHarness([]);
|
||||
const sidebar = makeSidebar();
|
||||
registerObservationSidebar(sidebar.service, h.store);
|
||||
h.push([FOREIGN]);
|
||||
await waitFor(() => expect(h.store.getSnapshot().sessions.length).toBe(1));
|
||||
expect(sidebar.openTab).not.toHaveBeenCalled();
|
||||
// A session visible to the active conversation does open the tab.
|
||||
h.push([BUSY]);
|
||||
await waitFor(() => expect(sidebar.openTab).toHaveBeenCalledTimes(1));
|
||||
});
|
||||
});
|
||||
|
||||
describe("observationTabOpen", () => {
|
||||
it("finds the tab in either workbench tree", () => {
|
||||
expect(observationTabOpen(undefined)).toBe(false);
|
||||
expect(observationTabOpen(leafWith("explorer"))).toBe(false);
|
||||
expect(observationTabOpen(leafWith(OBSERVATION_TAB_TYPE))).toBe(true);
|
||||
const inBottom: SidebarStateLike = {
|
||||
splits: { kind: "leaf", id: "p1", active: null, tabs: [] },
|
||||
bottomSplits: {
|
||||
kind: "leaf",
|
||||
id: "p2",
|
||||
active: OBSERVATION_TAB_TYPE,
|
||||
tabs: [{ id: OBSERVATION_TAB_TYPE, type: OBSERVATION_TAB_TYPE, title: "Browser" }],
|
||||
},
|
||||
};
|
||||
expect(observationTabOpen(inBottom)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("ObservationSidebarTab", () => {
|
||||
it("renders the tracking view without card chrome (no collapse, no drag header)", async () => {
|
||||
const h = makeHarness([BUSY]);
|
||||
render(<ObservationSidebarTab store={h.store} scopeId="conv-1" />);
|
||||
await screen.findByText(/s1 · clicking/);
|
||||
expect(screen.queryByRole("button", { name: "Collapse" })).toBeNull();
|
||||
expect(screen.getByTestId("obs-header").dataset.draggable).toBeUndefined();
|
||||
// No resize handles — the sidebar owns the geometry.
|
||||
expect(screen.queryByTestId("obs-resize-se")).toBeNull();
|
||||
// Session controls ride along: interrupt + stop-with-confirm.
|
||||
expect(screen.getByRole("button", { name: "Stop session s1" })).toBeTruthy();
|
||||
});
|
||||
|
||||
it("scopes the view to the sidebar's conversation", async () => {
|
||||
const h = makeHarness([BUSY, FOREIGN]);
|
||||
render(<ObservationSidebarTab store={h.store} scopeId="conv-1" />);
|
||||
// Focus and content belong to the owned session; the foreign one never
|
||||
// reaches the stage, the status line, or the strip (which needs 2+).
|
||||
await screen.findByText(/s1 · clicking/);
|
||||
expect(screen.queryByText(/s9/)).toBeNull();
|
||||
expect(screen.queryByTestId("obs-strip")).toBeNull();
|
||||
// Scoping to the other conversation swaps what's visible.
|
||||
render(<ObservationSidebarTab store={h.store} scopeId="other-conv" />);
|
||||
await screen.findByText(/s9 · clicking/);
|
||||
});
|
||||
});
|
||||
|
||||
describe("carrier switching", () => {
|
||||
it("hides the floating overlay while sidebar mode is active", async () => {
|
||||
const h = makeHarness([]);
|
||||
const { container } = render(<ObservationOverlay store={h.store} />);
|
||||
h.push([BUSY]);
|
||||
await screen.findByTestId("obs-card");
|
||||
setSidebarMode(true);
|
||||
await waitFor(() => expect(container.firstChild).toBeNull());
|
||||
setSidebarMode(false);
|
||||
await screen.findByTestId("obs-card");
|
||||
});
|
||||
|
||||
it("keeps the feed alive across overlapping carriers (refcount)", async () => {
|
||||
const h = makeHarness([]);
|
||||
const overlay = render(<ObservationOverlay store={h.store} />);
|
||||
await waitFor(() => expect(h.es()).toBeDefined());
|
||||
// A second carrier mounts (the sidebar tab), then the overlay unmounts:
|
||||
// the stream must survive for the remaining consumer.
|
||||
const tab = render(<ObservationSidebarTab store={h.store} scopeId="conv-1" />);
|
||||
overlay.unmount();
|
||||
h.push([BUSY]);
|
||||
await screen.findByText(/s1 · clicking/);
|
||||
expect(h.es()?.close ?? vi.fn()).not.toHaveBeenCalled();
|
||||
tab.unmount();
|
||||
});
|
||||
});
|
||||
@@ -137,6 +137,9 @@ describe("client plugin registration", () => {
|
||||
const sessions = { binding: () => undefined };
|
||||
const ctx = {
|
||||
get: (key: string) => (key === "sessions" ? sessions : undefined),
|
||||
// cordis ctx.inject: the betterSidebar carrier upgrade stays dormant in
|
||||
// this composition (the callback only runs once the service exists).
|
||||
inject: (_deps: string[], _fn: (injected: unknown) => unknown) => {},
|
||||
slots: {
|
||||
inject: (_name: string, fn: () => unknown) => fn(),
|
||||
register: (slot: { name: string; key?: string; id?: string }, view: unknown) => {
|
||||
|
||||
Reference in New Issue
Block a user