feat(record): add popup quick-actions launcher and make record --url optional

Add a popup launcher + action-recording panel that builds a copyable `bsk record start` prompt, add `--browser` targeting, and default `--url` to https://example.com/ when omitted. Drop the popup browser-alias field.
2026-09-10 13:01:23 +08:00 · 2026-07-22 13:27:30 +08:00
parent ac028a7a18
commit 585308df45
18 changed files with 546 additions and 177 deletions
@@ -1,5 +1,5 @@
 import { useTranslation } from "@browser-skill/i18n/react";
-import { RiCheckboxCircleLine } from "@remixicon/react";
+import { RiStopCircleLine } from "@remixicon/react";
 import { useEffect, useState } from "react";

 export interface RecordRequestData {
@@ -105,7 +105,7 @@ export function RecordOverlay({ request }: Props) {
            flexShrink: 0,
          }}
        >
-          <RiCheckboxCircleLine size={18} color="#fff" />
+          <RiStopCircleLine size={18} color="#fff" />
          {t("recordOverlay.finish")}
        </button>
      </div>
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { handleRecordContentMessage, startRecordCapture } from "../record-capture";
 import { RECORD_STOP, type RecordStepPayload } from "@/lib/record-bridge";
+import { handleRecordContentMessage, startRecordCapture } from "../record-capture";

 vi.stubGlobal("chrome", {
  runtime: {
@@ -128,12 +128,8 @@ describe("record-capture semantic", () => {
    const capture = startRecordCapture("rec-press", (step) => steps.push(step));
    const input = document.querySelector("input")!;
    input.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
-    input.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "a", bubbles: true }),
-    );
-    input.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
-    );
+    input.dispatchEvent(new KeyboardEvent("keydown", { key: "a", bubbles: true }));
+    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
    capture.dispose();
    expect(steps.filter((s) => s.op === "press")).toEqual([
      expect.objectContaining({ op: "press", key: "Enter" }),
@@ -1,8 +1,4 @@
-import {
-  describeEventTarget,
-  describeTarget,
-  type TargetDescriptor,
-} from "@/lib/describe-target";
+import { describeEventTarget, describeTarget, type TargetDescriptor } from "@/lib/describe-target";
 import {
  isRecordCancelMessage,
  isRecordStartMessage,
@@ -24,6 +24,11 @@ const baseSnapshot: SnapshotInfo = {
  connectionEnabled: true,
 };

+function openRecordView() {
+  fireEvent.click(screen.getByRole("button", { name: "快捷功能" }));
+  fireEvent.click(screen.getByRole("button", { name: /操作录制/ }));
+}
+
 describe("App", () => {
  const setLabel = vi.fn();
  const setConnectionEnabled = vi.fn();
@@ -63,13 +68,35 @@ describe("App", () => {
    expect(screen.queryByText("请先打开 BrowserSkill。")).toBeNull();
  });

-  it("uses flex gap for label field spacing", () => {
-    const { container } = render(<App />);
+  it("does not render record UI on the main view", () => {
+    render(<App />);

-    const labelField = container.querySelector("[data-slot='popup-label-field']");
-    expect(labelField?.className).toContain("flex");
-    expect(labelField?.className).toContain("flex-col");
-    expect(labelField?.className).toContain("gap-3");
+    expect(screen.queryByRole("button", { name: "复制录制指令" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "操作录制" })).toBeNull();
+  });
+
+  it("opens the feature list from the launcher and navigates to record", () => {
+    render(<App />);
+
+    fireEvent.click(screen.getByRole("button", { name: "快捷功能" }));
+
+    expect(screen.getByText("操作录制")).toBeTruthy();
+    expect(screen.getByText("录制你的操作，供 Agent 复用")).toBeTruthy();
+    expect(screen.queryByText("未连接")).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: /操作录制/ }));
+
+    expect(screen.getByRole("button", { name: "复制录制指令" })).toBeTruthy();
+  });
+
+  it("returns from the feature list to the main view", () => {
+    render(<App />);
+
+    fireEvent.click(screen.getByRole("button", { name: "快捷功能" }));
+    fireEvent.click(screen.getByRole("button", { name: "返回" }));
+
+    expect(screen.getByText("未连接")).toBeTruthy();
+    expect(screen.queryByText("录制你的操作，供 Agent 复用")).toBeNull();
  });

  it("shows single-line compact metadata and copies the instance id", async () => {
@@ -136,4 +163,82 @@ describe("App", () => {
      screen.getByRole("switch", { name: "BrowserSkill 连接" }).getAttribute("aria-checked"),
    ).toBe("false");
  });
+
+  it("copies the record prompt with instance id and --browser when connected", async () => {
+    mockUseConnectionState.mockReturnValue({
+      snapshot: {
+        ...baseSnapshot,
+        state: "connected",
+        instanceId: "03c3e47f",
+        handshake: {
+          server: "bh",
+          version: mockDaemonVersion,
+          protocol_version: "1.0",
+        },
+      },
+      statusState: "connected",
+      setLabel,
+      setConnectionEnabled,
+    });
+
+    render(<App />);
+    openRecordView();
+
+    fireEvent.change(screen.getByPlaceholderText("例如：发布一篇文章"), {
+      target: { value: "发布 wiki 文档" },
+    });
+
+    const copyButton = screen.getByRole("button", { name: "复制录制指令" });
+    expect(copyButton.getAttribute("disabled")).toBeNull();
+
+    fireEvent.click(copyButton);
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledTimes(1);
+    const copied = vi.mocked(navigator.clipboard.writeText).mock.calls[0]?.[0] ?? "";
+    expect(copied).toContain("03c3e47f");
+    expect(copied).toContain("--browser 03c3e47f");
+    expect(copied).toContain('--purpose "发布 wiki 文档"');
+    expect(copied).not.toMatch(/bsk record start[^\n]*--url/);
+    await waitFor(() => expect(copyButton.textContent).toContain("已复制"));
+  });
+
+  it("includes --url in record prompt when a start URL is provided", async () => {
+    mockUseConnectionState.mockReturnValue({
+      snapshot: {
+        ...baseSnapshot,
+        state: "connected",
+        instanceId: "03c3e47f",
+        handshake: {
+          server: "bh",
+          version: mockDaemonVersion,
+          protocol_version: "1.0",
+        },
+      },
+      statusState: "connected",
+      setLabel,
+      setConnectionEnabled,
+    });
+
+    render(<App />);
+    openRecordView();
+
+    fireEvent.change(screen.getByPlaceholderText("https://…"), {
+      target: { value: "https://example.com/" },
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "复制录制指令" }));
+
+    const copied = vi.mocked(navigator.clipboard.writeText).mock.calls[0]?.[0] ?? "";
+    expect(copied).toContain("--url https://example.com/");
+    expect(copied).not.toContain("--purpose");
+  });
+
+  it("disables record copy when disconnected", () => {
+    render(<App />);
+    openRecordView();
+
+    const copyButton = screen.getByRole("button", { name: "复制录制指令" });
+    expect(copyButton.getAttribute("disabled")).not.toBeNull();
+    expect(screen.getByText("连接后可用")).toBeTruthy();
+  });
 });
@@ -1,9 +1,16 @@
 import { useTranslation } from "@browser-skill/i18n/react";
 import { Badge, Button, cn, Input, Label } from "@browser-skill/ui";
-import { RiCheckLine, RiFileCopyLine } from "@remixicon/react";
+import {
+  RiApps2Line,
+  RiArrowLeftLine,
+  RiArrowRightSLine,
+  RiCheckLine,
+  RiFileCopyLine,
+} from "@remixicon/react";
 import { type ChangeEvent, useEffect, useState } from "react";
 import { PROTOCOL_VERSION } from "@/transport/handshake";
 import { ConnectionStatusIndicator } from "./connection-status-indicator";
+import { POPUP_FEATURES, type PopupView } from "./features";
 import { type PopupStatusState, useConnectionState } from "./use-connection-state";

 const STATE_LABEL_KEYS = {
@@ -29,9 +36,12 @@ function getLogoSrc() {

 export function App() {
  const { t } = useTranslation("extension");
-  const { snapshot, statusState, setLabel, setConnectionEnabled } = useConnectionState();
-  const [labelDraft, setLabelDraft] = useState(snapshot.label);
+  const { snapshot, statusState, setConnectionEnabled } = useConnectionState();
+  const [view, setView] = useState<PopupView>("main");
  const [copiedInstanceId, setCopiedInstanceId] = useState(false);
+  const [purposeDraft, setPurposeDraft] = useState("");
+  const [startUrlDraft, setStartUrlDraft] = useState("");
+  const [copiedPrompt, setCopiedPrompt] = useState(false);

  useEffect(() => {
    const query = window.matchMedia("(prefers-color-scheme: dark)");
@@ -44,18 +54,11 @@ export function App() {
    return () => query.removeEventListener("change", onChange);
  }, []);

-  useEffect(() => {
-    setLabelDraft(snapshot.label);
-  }, [snapshot.label]);
-
  useEffect(() => {
    setCopiedInstanceId(false);
+    setCopiedPrompt(false);
  }, [snapshot.instanceId]);

-  const onLabelBlur = () => {
-    if (labelDraft !== snapshot.label) setLabel(labelDraft);
-  };
-
  const isSkewed = statusState === "version_skew";
  const daemonVersion = snapshot.handshake?.version ?? "—";
  const daemonProtocol = snapshot.handshake?.protocol_version ?? "—";
@@ -68,134 +71,286 @@ export function App() {
    setCopiedInstanceId(true);
  };

+  const recordReady = statusState === "connected" && Boolean(snapshot.instanceId);
+  const recordPurpose = purposeDraft.trim();
+  const recordStartUrl = startUrlDraft.trim();
+  const recordCommand = snapshot.instanceId
+    ? [
+        `bsk record start --browser ${snapshot.instanceId}`,
+        recordStartUrl ? `--url ${recordStartUrl}` : "",
+        recordPurpose ? `--purpose "${recordPurpose}"` : "",
+      ]
+        .filter(Boolean)
+        .join(" ")
+    : "";
+  const recordPrompt = snapshot.instanceId
+    ? t("popup.record.promptTemplate", {
+        command: recordCommand,
+      })
+    : "";
+
+  const copyRecordPrompt = async () => {
+    if (!recordReady || !navigator.clipboard?.writeText) return;
+    await navigator.clipboard.writeText(recordPrompt);
+    setCopiedPrompt(true);
+  };
+
+  const headerTitle =
+    view === "features"
+      ? t("popup.launcher.title")
+      : view === "record"
+        ? t("popup.record.sectionTitle")
+        : t("popup.brandName");
+
  return (
    <main
      className="min-w-[320px] max-w-[340px] space-y-3 bg-background p-3 text-foreground"
      data-slot="popup-root"
+      data-view={view}
      data-version-skew={isSkewed ? "true" : undefined}
    >
-      <header className="flex items-center gap-2" data-slot="popup-brand-header">
-        <img src={getLogoSrc()} alt="" className="size-7 rounded-lg" data-slot="popup-brand-logo" />
-        <h1 className="text-sm font-semibold tracking-tight">{t("popup.brandName")}</h1>
-      </header>
-
-      <section
-        className="rounded-xl border border-border/80 bg-card/60 px-3 py-2.5"
-        data-slot="popup-connection-card"
+      <header
+        className="flex items-center gap-2"
+        data-slot={view === "main" ? "popup-brand-header" : "popup-subview-header"}
      >
-        <div className="flex items-center justify-between gap-2" data-slot="popup-status">
-          <div className="flex min-w-0 items-center gap-2">
-            <ConnectionStatusIndicator state={statusState} />
-            <span className="truncate text-sm font-medium" data-slot="popup-state-label">
-              {t(STATE_LABEL_KEYS[statusState])}
-            </span>
-          </div>
-          <div className="flex shrink-0 items-center gap-2">
-            <Badge
-              variant="outline"
-              className="px-1.5 py-0 text-[10px] font-medium uppercase"
-              data-slot="popup-state-badge"
-            >
-              {t(STATE_BADGE_KEYS[statusState])}
-            </Badge>
-            <button
-              type="button"
-              role="switch"
-              aria-checked={snapshot.connectionEnabled}
-              aria-label={t("popup.connectionToggleTitle")}
-              data-slot="popup-connection-toggle"
-              className={cn(
-                "relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
-                snapshot.connectionEnabled ? "bg-primary" : "bg-muted",
-              )}
-              onClick={() => setConnectionEnabled(!snapshot.connectionEnabled)}
-            >
-              <span
-                className={cn(
-                  "pointer-events-none block size-4 rounded-full bg-background shadow-sm transition-transform",
-                  snapshot.connectionEnabled ? "translate-x-4" : "translate-x-0.5",
-                )}
-                aria-hidden
-              />
-            </button>
-          </div>
-        </div>
-        {isSkewed && (
-          <p
-            className="mt-2 text-xs leading-snug text-amber-600 dark:text-amber-400"
-            data-slot="popup-version-skew-warning"
-          >
-            {t("popup.versionSkewWarning", {
-              extensionProtocol: PROTOCOL_VERSION,
-              daemonProtocol,
-            })}
-          </p>
-        )}
-      </section>
-
-      {snapshot.lastError && (
-        <div
-          className="rounded-lg border border-destructive/25 bg-destructive/10 px-3 py-2 text-xs leading-snug text-destructive"
-          data-slot="popup-error"
-        >
-          {snapshot.lastError}
-        </div>
-      )}
-
-      <div className="flex flex-col gap-3" data-slot="popup-label-field">
-        <Label htmlFor="bh-label" className="block text-xs text-muted-foreground">
-          {t("popup.labelTitle")}
-        </Label>
-        <Input
-          id="bh-label"
-          type="text"
-          value={labelDraft}
-          onChange={(event: ChangeEvent<HTMLInputElement>) => setLabelDraft(event.target.value)}
-          onBlur={onLabelBlur}
-          placeholder={t("popup.labelPlaceholder")}
-          className="mt-0 h-8 text-sm"
-          data-slot="popup-label-input"
-        />
-      </div>
-
-      <section
-        className="flex min-w-0 items-center justify-between gap-2 border-t border-border/70 pt-2 text-[10px] leading-tight text-muted-foreground"
-        data-slot="popup-meta"
-      >
-        <div className="flex shrink-0 items-center gap-1">
-          <span title={t("popup.extensionVersionHint")}>{extensionVersion}</span>
-          <span aria-hidden>/</span>
-          <span title={t("popup.daemonVersionHint")}>{daemonVersion}</span>
-        </div>
-        <div className="flex min-w-0 items-center justify-end gap-1">
-          <span className="shrink-0">{t("popup.instanceTitle")}</span>
-          <code
-            className="max-w-[88px] truncate font-mono text-[10px] text-foreground/80"
-            data-slot="popup-instance-id"
-          >
-            {instanceId}
-          </code>
+        {view !== "main" ? (
          <Button
            type="button"
            variant="ghost"
            size="icon"
-            className="size-5 rounded-md"
-            disabled={!snapshot.instanceId}
-            aria-label={t("popup.copyInstanceId")}
-            title={copiedInstanceId ? t("popup.copied") : t("popup.copyInstanceId")}
-            onClick={() => {
-              void copyInstanceId();
-            }}
-            data-slot="popup-copy-instance-id"
+            className="size-7 shrink-0 rounded-md"
+            aria-label={t("popup.back")}
+            onClick={() => setView(view === "record" ? "features" : "main")}
+            data-slot="popup-back"
          >
-            {copiedInstanceId ? (
-              <RiCheckLine className="size-3" aria-hidden />
-            ) : (
-              <RiFileCopyLine className="size-3" aria-hidden />
-            )}
+            <RiArrowLeftLine className="size-4" aria-hidden />
          </Button>
-        </div>
-      </section>
+        ) : (
+          <img src={getLogoSrc()} alt="" className="size-7 rounded-lg" data-slot="popup-brand-logo" />
+        )}
+        <h1 className="min-w-0 flex-1 truncate text-sm font-semibold tracking-tight">{headerTitle}</h1>
+        {view === "main" && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="size-7 shrink-0 rounded-md"
+            aria-label={t("popup.launcher.title")}
+            onClick={() => setView("features")}
+            data-slot="popup-launcher"
+          >
+            <RiApps2Line className="size-4" aria-hidden />
+          </Button>
+        )}
+      </header>
+
+      {view === "main" && (
+        <>
+          <section
+            className="rounded-xl border border-border/80 bg-card/60 px-3 py-2.5"
+            data-slot="popup-connection-card"
+          >
+            <div className="flex items-center justify-between gap-2" data-slot="popup-status">
+              <div className="flex min-w-0 items-center gap-2">
+                <ConnectionStatusIndicator state={statusState} />
+                <span className="truncate text-sm font-medium" data-slot="popup-state-label">
+                  {t(STATE_LABEL_KEYS[statusState])}
+                </span>
+              </div>
+              <div className="flex shrink-0 items-center gap-2">
+                <Badge
+                  variant="outline"
+                  className="px-1.5 py-0 text-[10px] font-medium uppercase"
+                  data-slot="popup-state-badge"
+                >
+                  {t(STATE_BADGE_KEYS[statusState])}
+                </Badge>
+                <button
+                  type="button"
+                  role="switch"
+                  aria-checked={snapshot.connectionEnabled}
+                  aria-label={t("popup.connectionToggleTitle")}
+                  data-slot="popup-connection-toggle"
+                  className={cn(
+                    "relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+                    snapshot.connectionEnabled ? "bg-primary" : "bg-muted",
+                  )}
+                  onClick={() => setConnectionEnabled(!snapshot.connectionEnabled)}
+                >
+                  <span
+                    className={cn(
+                      "pointer-events-none block size-4 rounded-full bg-background shadow-sm transition-transform",
+                      snapshot.connectionEnabled ? "translate-x-4" : "translate-x-0.5",
+                    )}
+                    aria-hidden
+                  />
+                </button>
+              </div>
+            </div>
+            {isSkewed && (
+              <p
+                className="mt-2 text-xs leading-snug text-amber-600 dark:text-amber-400"
+                data-slot="popup-version-skew-warning"
+              >
+                {t("popup.versionSkewWarning", {
+                  extensionProtocol: PROTOCOL_VERSION,
+                  daemonProtocol,
+                })}
+              </p>
+            )}
+          </section>
+
+          {snapshot.lastError && (
+            <div
+              className="rounded-lg border border-destructive/25 bg-destructive/10 px-3 py-2 text-xs leading-snug text-destructive"
+              data-slot="popup-error"
+            >
+              {snapshot.lastError}
+            </div>
+          )}
+
+          <section
+            className="flex min-w-0 items-center justify-between gap-2 border-t border-border/70 pt-2 text-[10px] leading-tight text-muted-foreground"
+            data-slot="popup-meta"
+          >
+            <div className="flex shrink-0 items-center gap-1">
+              <span title={t("popup.extensionVersionHint")}>{extensionVersion}</span>
+              <span aria-hidden>/</span>
+              <span title={t("popup.daemonVersionHint")}>{daemonVersion}</span>
+            </div>
+            <div className="flex min-w-0 items-center justify-end gap-1">
+              <span className="shrink-0">{t("popup.instanceTitle")}</span>
+              <code
+                className="max-w-[88px] truncate font-mono text-[10px] text-foreground/80"
+                data-slot="popup-instance-id"
+              >
+                {instanceId}
+              </code>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="size-5 rounded-md"
+                disabled={!snapshot.instanceId}
+                aria-label={t("popup.copyInstanceId")}
+                title={copiedInstanceId ? t("popup.copied") : t("popup.copyInstanceId")}
+                onClick={() => {
+                  void copyInstanceId();
+                }}
+                data-slot="popup-copy-instance-id"
+              >
+                {copiedInstanceId ? (
+                  <RiCheckLine className="size-3" aria-hidden />
+                ) : (
+                  <RiFileCopyLine className="size-3" aria-hidden />
+                )}
+              </Button>
+            </div>
+          </section>
+        </>
+      )}
+
+      {view === "features" && (
+        <section className="space-y-2" data-slot="popup-feature-list">
+          {POPUP_FEATURES.map((feature) => {
+            const Icon = feature.icon;
+            return (
+              <button
+                key={feature.id}
+                type="button"
+                className="flex w-full items-center gap-3 rounded-xl border border-border/80 bg-card/60 px-3 py-2.5 text-left transition-colors hover:bg-card/80"
+                onClick={() => setView(feature.id)}
+                data-slot={`popup-feature-${feature.id}`}
+              >
+                <Icon className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+                <span className="min-w-0 flex-1">
+                  <span className="block text-xs font-medium text-foreground">{t(feature.titleKey)}</span>
+                  <span className="mt-0.5 block text-[11px] leading-snug text-muted-foreground">
+                    {t(feature.descKey)}
+                  </span>
+                </span>
+                <RiArrowRightSLine className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+              </button>
+            );
+          })}
+        </section>
+      )}
+
+      {view === "record" && (
+        <section className="space-y-2.5" data-slot="popup-record-body">
+          <p
+            className="text-[11px] leading-snug text-muted-foreground"
+            data-slot="popup-record-hint-desc"
+          >
+            {t("popup.record.sectionHint")}
+          </p>
+          <div className="flex flex-col gap-1.5" data-slot="popup-record-purpose-field">
+            <Label htmlFor="bh-record-purpose" className="block text-xs text-muted-foreground">
+              {t("popup.record.topicLabel")}
+            </Label>
+            <Input
+              id="bh-record-purpose"
+              type="text"
+              value={purposeDraft}
+              onChange={(event: ChangeEvent<HTMLInputElement>) => setPurposeDraft(event.target.value)}
+              placeholder={t("popup.record.topicPlaceholder")}
+              className="mt-0 h-8 text-sm"
+              data-slot="popup-record-purpose-input"
+            />
+          </div>
+          <div className="flex flex-col gap-1.5" data-slot="popup-record-start-url-field">
+            <Label htmlFor="bh-record-start-url" className="block text-xs text-muted-foreground">
+              {t("popup.record.startUrlLabel")}
+            </Label>
+            <Input
+              id="bh-record-start-url"
+              type="url"
+              value={startUrlDraft}
+              onChange={(event: ChangeEvent<HTMLInputElement>) => setStartUrlDraft(event.target.value)}
+              placeholder={t("popup.record.startUrlPlaceholder")}
+              className="mt-0 h-8 text-sm"
+              data-slot="popup-record-start-url-input"
+            />
+          </div>
+          <textarea
+            readOnly
+            value={recordPrompt}
+            rows={5}
+            className="w-full resize-none rounded-md border border-input bg-muted/40 px-2.5 py-2 font-mono text-[10px] leading-snug text-foreground/90 focus-visible:outline-none"
+            data-slot="popup-record-prompt"
+          />
+          <div className="flex items-center justify-between gap-2">
+            {!recordReady && (
+              <p className="text-[10px] text-muted-foreground" data-slot="popup-record-hint">
+                {t("popup.record.hintDisconnected")}
+              </p>
+            )}
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              className="ml-auto h-7 shrink-0 px-2.5 text-xs"
+              disabled={!recordReady}
+              onClick={() => {
+                void copyRecordPrompt();
+              }}
+              data-slot="popup-record-copy"
+            >
+              {copiedPrompt ? (
+                <>
+                  <RiCheckLine className="size-3.5" aria-hidden />
+                  {t("popup.record.copied")}
+                </>
+              ) : (
+                <>
+                  <RiFileCopyLine className="size-3.5" aria-hidden />
+                  {t("popup.record.copyButton")}
+                </>
+              )}
+            </Button>
+          </div>
+        </section>
+      )}
    </main>
  );
 }
@@ -0,0 +1,22 @@
+import { RiRecordCircleLine } from "@remixicon/react";
+import type { RemixiconComponentType } from "@remixicon/react";
+
+export type PopupFeatureId = "record";
+
+export type PopupView = "main" | "features" | PopupFeatureId;
+
+export type PopupFeature = {
+  id: PopupFeatureId;
+  icon: RemixiconComponentType;
+  titleKey: "popup.record.sectionTitle";
+  descKey: "popup.record.cardDesc";
+};
+
+export const POPUP_FEATURES: PopupFeature[] = [
+  {
+    id: "record",
+    icon: RiRecordCircleLine,
+    titleKey: "popup.record.sectionTitle",
+    descKey: "popup.record.cardDesc",
+  },
+];
@@ -1,3 +1,13 @@
@import "@browser-skill/ui/styles";
@source "../../";
@source "../../../../../packages/ui/src";
+
+/* The shared base sets html/body/#root to height:100%, which is meant for
+   full-page surfaces. In a popup that pins the window to the tallest content
+   it ever showed, so collapsing the record section leaves blank space. Size
+   to content instead so Chrome can grow and shrink the popup to fit. */
+html,
+body,
+#root {
+  height: auto;
+}
@@ -1,9 +1,5 @@
 import { beforeEach, describe, expect, it } from "vitest";
-import {
-  describeEventTarget,
-  describeTarget,
-  isMeaningfulClickTarget,
-} from "../describe-target";
+import { describeEventTarget, describeTarget, isMeaningfulClickTarget } from "../describe-target";

 describe("describeTarget", () => {
  beforeEach(() => {
@@ -140,7 +140,10 @@ export function accessibleName(el: Element): string | undefined {

  if (el instanceof HTMLInputElement || el instanceof HTMLButtonElement) {
    const value = normalizeWhitespace(el.value);
-    if (value && (el instanceof HTMLButtonElement || el.type === "submit" || el.type === "button")) {
+    if (
+      value &&
+      (el instanceof HTMLButtonElement || el.type === "submit" || el.type === "button")
+    ) {
      return truncate(value);
    }
  }
@@ -2,11 +2,18 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import {
  ensureBrowserObservationListeners,
  isBrowserObservationAttachedForTests,
+  RECORD_DEFAULT_START_URL,
  releaseBrowserObservationListenersIfIdle,
  resetBrowserObservationForTests,
  setBrowserObservationAttachForTests,
 } from "../record";

+describe("record defaults", () => {
+  it("uses Baidu as the default injectable start URL", () => {
+    expect(RECORD_DEFAULT_START_URL).toBe("https://www.baidu.com/");
+  });
+});
+
 describe("browser observation lifecycle", () => {
  afterEach(() => {
    resetBrowserObservationForTests();
@@ -77,6 +77,9 @@ function sleep(ms: number): Promise<void> {
  return new Promise((resolve) => setTimeout(resolve, ms));
 }

+/** Injectable http(s) landing page when `tool.record_start` omits `url`. */
+export const RECORD_DEFAULT_START_URL = "https://www.baidu.com/";
+
 /** Pages where MV3 content scripts cannot attach (Agent Window boots here). */
 function isContentScriptRestrictedUrl(url: string | undefined): boolean {
  if (!url) return true;
@@ -568,12 +571,12 @@ export async function handleRecordStart(
    resolveFinish = resolve;
    rejectFinish = reject;
  });
-  const provisionalUrl = params.url;
+  const navigateUrl = params.url ?? RECORD_DEFAULT_START_URL;
  recordings.set(params.session_id, {
    requestId,
    tabId: target.tabId,
    agentWindowId: ctx.agentWindowId,
-    startUrl: provisionalUrl,
+    startUrl: navigateUrl,
    ...(params.purpose ? { purpose: params.purpose } : {}),
    steps: [],
    startedAt: new Date().toISOString(),
@@ -582,7 +585,7 @@ export async function handleRecordStart(
    rejectFinish,
    settled: false,
    finishing: false,
-    currentUrl: provisionalUrl,
+    currentUrl: navigateUrl,
    pendingNavigation: false,
    pendingNavigationDeadline: undefined,
  });
@@ -629,12 +632,12 @@ export async function handleRecordStart(
    if (cancelled) return cancelled;
  }

-  if (params.url && deps.cdp) {
+  if (deps.cdp) {
    const nav = await handleNavigate(
      manager,
      {
        session_id: params.session_id,
-        url: params.url,
+        url: navigateUrl,
        tab_id: target.tabId,
      },
      { cdp: deps.cdp, tabsApi: deps.tabsApi, signal: deps.signal },
@@ -663,7 +666,7 @@ export async function handleRecordStart(
    const tab = await deps.tabsApi.get(target.tabId);
    startUrl = tab.url;
  } catch {
-    startUrl = params.url;
+    startUrl = navigateUrl;
  }

  const active = recordings.get(params.session_id);
@@ -680,7 +683,7 @@ export async function handleRecordStart(
      code: "invalid_params",
      message: params.url
        ? `cannot record on restricted URL (${startUrl}); use an http(s) page`
-        : "Agent Window starts on about:blank where the content script cannot inject — pass --url https://… before recording",
+        : `cannot record on restricted URL (${startUrl}); default start page must be injectable http(s)`,
    };
  }

@@ -713,7 +716,7 @@ export async function handleRecordStart(
    return {
      code: "protocol_error",
      message:
-        "failed to start recording in content script — reload the BrowserSkill extension, then retry with --url https://…",
+        "failed to start recording in content script — reload the BrowserSkill extension, then retry",
    };
  }

@@ -25,7 +25,15 @@ export default defineConfig({
    name: "BrowserSkill",
    description:
      "Let AI agents use your logged-in browser in a separate Agent Window—without interrupting your work. Powered by the bsk CLI.",
-    permissions: ["alarms", "debugger", "notifications", "tabs", "storage", "webNavigation", "windows"],
+    permissions: [
+      "alarms",
+      "debugger",
+      "notifications",
+      "tabs",
+      "storage",
+      "webNavigation",
+      "windows",
+    ],
    host_permissions: ["<all_urls>"],
    icons: {
      16: "icon/logo.png",