feat: advance browser agent integration workflows

.env

@@ -1 +0,0 @@
-NODE_ENV=development

.gitignore

@@ -3,26 +3,39 @@ build.crx
 build.zip
 build.pem
 .idea/
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.output
+stats.html
+stats-*.json
+.wxt
+web-ext.config.ts
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
+ord/
+.artifacts/
+
+# Tool-specific clients are developed and packaged outside this repository.
+/integrations/browser-transform/
+
+# Product and research documents are maintained locally and are not versioned.
+/docs/

ARCHITECTURE.md

@@ -0,0 +1,242 @@
+# Yakit Browser Agent Architecture
+
+## Goals
+
+- Reuse a user's real, authenticated browser session without exporting a complete browser profile.
+- Let an AI agent inspect a deliberately shared tab and request human takeover for QR codes, MFA, CAPTCHA, or device confirmation.
+- Keep proxy, Cookie, User-Agent, page-context, page-function, recording, Chromium debugger and browser transform capabilities behind one typed command boundary.
+- Make grants short lived, tab scoped, visible, and revocable.
+
+## Layers
+
+### Capability layer
+
+The background service owns browser capabilities. Every remote command passes through one router before it reaches browser APIs.
+
+| Method | Required scope | Effect |
+| --- | --- | --- |
+| `browser.tabs` | `browser.tabs.read` | Lists only tabs included in the active grant |
+| `browser.frames` | `browser.tabs.read` | Lists main, same-origin, and cross-origin frames for a granted tab |
+| `browser.context` | `browser.dom.read` | Captures a bounded structured snapshot and diff; Storage and Cookie require their own scopes |
+| `browser.node.inspect` | `browser.dom.read` | Inspects a document-bound node without returning the current input value |
+| `browser.node.action` | `browser.dom.write` | Clicks, focuses, scrolls, or writes a value through a current node reference |
+| `browser.cookies` | `browser.cookies.read` | Reads cookies for a granted tab |
+| `browser.takeover` | `browser.tab.activate` | Focuses a granted tab for a human step |
+| `browser.handoff.request` | `browser.human.takeover` | Starts a visible QR/MFA/CAPTCHA/device-confirmation handoff |
+| `browser.handoff.status` | `browser.human.takeover` | Reads the current task's handoff state |
+| `browser.network.status/list` | `browser.network.read` | Reads capture state and request metadata |
+| `browser.network.start/stop/clear` | `browser.network.capture` | Controls a bounded capture session for a granted document |
+| `browser.network.export` | `browser.network.sensitive.read` | Builds a replay packet from explicitly captured headers/body |
+| `browser.invoke` | `browser.page.invoke` | Calls an existing page-world function by path |
+| `browser.eval` expression | `browser.page.eval.expression` | Executes one parenthesized expression in a granted page world |
+| `browser.eval` program | `browser.page.eval.program` | Executes statements and side effects under an independent high-risk scope |
+| `browser.recording.status/get` | `browser.recording.read` | Reads bounded business Traces, Pipeline events and value links for a granted document |
+| `browser.recording.start/stop/clear` | `browser.recording.control` | Controls the document-bound MAIN-world recorder |
+| recording value previews | `browser.recording.sensitive.read` | Includes bounded short-lived input/output previews; off by default |
+| `browser.callable.list` | `browser.recording.read` | Lists callable metadata retained by the current granted document |
+| `browser.callable.create/execute/delete` | `browser.callable.execute` | Creates or invokes a recorded call or captured business closure without exporting keys; deep-capture creation also requires debugger control |
+| `browser.deep_capture.status` | `browser.debugger.read` | Reads bounded pause state, frames and scopes |
+| `browser.deep_capture.start/keepalive/resume/detach` | `browser.debugger.control` | Controls a one-shot Chromium function/request breakpoint and its pause lifecycle |
+| `browser.transform.profile.list` | `browser.transform.read` | Lists document-bound plaintext/wire transform profiles visible to the active grant |
+| `browser.transform.profile.save/delete` | `browser.transform.manage` | Creates, updates or removes a validated transform pipeline for a granted document |
+| `browser.transform.execute` | `browser.transform.execute` | Runs one request or response through the selected live-page function pipeline |
+| `proxy.list` | `browser.proxy.read` | Lists extension proxy profiles |
+| `proxy.switch` | `browser.proxy.write` | Switches the browser proxy profile |
+
+The transport never calls browser APIs directly.
+
+### Grant layer
+
+A grant contains:
+
+- an unpredictable session ID;
+- a task ID;
+- one or more explicit tab, frame, and document IDs with their origin and grant-time URL;
+- an explicit set of capability scopes;
+- creation and expiration timestamps.
+
+Expired grants are rejected and removed. Reloading or navigating a document returns `stale_document`; navigation to a different origin returns `origin_changed`. Neither condition silently retargets an operation. The UI still offers read/control presets, but those presets only create concrete scope sets and are not stored as authorization levels. A remote caller cannot expand a grant. Only extension UI initiated by the user can create or replace one.
+
+### Transport layer
+
+Bridge v3 supports authenticated loopback WebSocket and optional Native Messaging:
+
+```text
+Browser extension -> ws://127.0.0.1:<port>/extension -> Yak engine / AI session
+```
+
+The Yak gRPC process owns this listener and starts it on `127.0.0.1:64333` by default. Yakit controls it through the existing `RequestYakURL` RPC with the `browser-extension://` schema, so pairing, approval, device rename and revocation do not add dedicated gRPC methods.
+
+First-time pairing uses `/pairing`. The extension generates an origin-bound ECDSA P-256 installation identity and keeps its non-extractable private key in IndexedDB. Yak keeps a persistent engine identity under the Yakit home directory with owner-only file permissions. The plugin and Yakit derive the same six-digit code from both nonces, identities, origin and public keys; the user approves only after comparing that code. No bearer token is stored or copied.
+
+The browser-profile `installationId` is stable across disconnects and local unpairing; clearing a pairing destroys the local signing key but does not manufacture a new browser installation. A later approved pairing with the same installation ID rotates the public credential in place while preserving the Yak `deviceId`, user-visible name and creation time. If browser storage was actually erased and a new installation ID is unavoidable, Yakit must explicitly choose whether to replace a matching offline identity or add a separate browser profile. Replacement is restricted to the same extension origin and client, so a shared Chrome extension ID is never used as an unsafe global deduplication key.
+
+Every `/extension` connection starts with a signed engine challenge. The extension verifies the approved engine public key and replies with a signature from its paired installation key. Yak verifies both the installation ID and browser extension Origin before returning `hello_ack`. The connection is not reported ready until that acknowledgement confirms protocol, capabilities, engine identity, engine instance, connection and session identities. The authentication message also carries the current task/grant identity. A disconnected installation can resume its logical session while each physical connection receives a new ID. Revoking a device immediately closes its active connection. Heartbeats carry sequence/timestamps and expose round-trip latency.
+
+Request IDs allow concurrent calls in both directions. The extension accepts at most eight engine-initiated in-flight requests, rejects duplicate IDs, supports cancellation, and applies a 16 MiB aggregate limit. Messages above 512 KiB are split into bounded 256 KiB chunks with transfer count/timeout limits. Yak forwards context cancellation and buffers extension events in a bounded queue exposed as `browser.ExtensionWaitEvent`.
+
+### Yakit device tasks
+
+Pairing and device CRUD remain on `RequestYakURL`. Executable work uses one server-streaming RPC, `ExecuteBrowserExtensionTask`, with stable routing fields (`task_id`, `device_id`, `schema`, JSON payload and timeout). The stable schemas are:
+
+- `capability.call`: invokes one extension capability with `{method, params}` and returns its JSON result;
+- `yak.script`: executes Yak in the owning gRPC process and injects a request-bound `browser.ExtensionCall` and `browser.ExtensionStatus` for the selected device.
+
+Yakit treats `capability.call` as a schema-controlled command channel rather than adding one gRPC method per browser feature. Its selected-device workspace defaults to a browser-workflow view with Plaintext Gateway, Recorder and Deep Capture modes; raw capability JSON and Yak scripts remain advanced modes. Recording, `browser.callable.*`, `browser.deep_capture.*` and `browser.transform.*` calls therefore use the same streamed task lifecycle, cancellation, device routing and output limits as every other extension capability.
+
+The engine supports multiple simultaneous browser connections. Calls are routed by paired device ID, pending responses are bound to the target WebSocket, and a disconnect immediately fails that device's outstanding calls. A schema handler cannot silently fall back to another online browser.
+
+Task events use a small common vocabulary (`queued`, `running`, `log`, `result`, `warning`, `error`, `cancelled`, `completed`) with monotonic sequence and timestamp fields. The RPC bounds payload size, timeout, concurrent scripts, per-event data and aggregate output; cancelling the stream propagates through the Yak context to the extension request.
+
+The Yak runner is a controlled in-process context, not an operating-system sandbox. It prevents process exit, recovers VM panics and enforces resource bounds, but only trusted operator-authored code should use it. Untrusted or remotely supplied scripts require a future isolated worker. The generic `ExecYakScript` path is intentionally not reused because its child process does not own the parent process's live Bridge manager.
+
+Native Messaging uses the same Bridge v3 challenge/auth envelope and paired identity contract:
+
+```text
+Browser extension -> registered Yakit Native Host -> loopback Yak Bridge -> running Yak engine
+```
+
+The Yak repository contains `common/browser/nativehostcmd`, a stdio framing proxy with loopback/origin validation. `native-host/install.sh` and `install.ps1` register per-user Chrome/Chromium/Edge/Brave/Firefox manifests. `nativeMessaging` is optional and requested only when the user explicitly saves Native mode.
+
+## Human takeover
+
+Agent workflows treat human participation as an explicit, persisted state transition:
+
+1. The agent detects a QR code, MFA prompt, CAPTCHA, or device confirmation.
+2. It calls `browser.handoff.request` for a document in the active control grant.
+3. The extension focuses the tab, shows a badge, expands the target page panel, and displays the same request in Popup and Options.
+4. The Agent pauses without polling sensitive content.
+5. The user chooses **操作已完成** or **取消任务**.
+6. The extension emits `browser.handoff.changed`; Yak receives it through `ExtensionWaitEvent`.
+7. The Agent matches the handoff ID, captures a fresh context, and continues only after `completed`.
+
+`browser.takeover` remains a short-lived focus action without a completion lifecycle.
+
+## Network capture
+
+Network capture uses the browser `webRequest` API rather than page-world Fetch/XHR monkey patches. This preserves the actual outgoing request headers, browser-added Cookie header, request body, redirect status, cache state, and timing. The listener is filtered to Fetch/XHR, ping, and related programmatic requests; images, stylesheets, scripts, fonts, and media are not collected.
+
+Each capture session is bound to one tab, frame, and document. Chrome MV3 stores the bounded session in `storage.session`, so Service Worker suspension does not move sensitive records into persistent settings. Firefox MV2 keeps the same data in background memory. Defaults are metadata-only, 100 entries, and no request headers or body. Explicit sensitive capture is capped at 200 entries and 64 KiB per request body; the UI currently uses 100 entries and 32 KiB.
+
+Generating a replay packet requires captured request headers. The packet is reconstructed as HTTP/1.1 with the observed header values and bounded body bytes. Truncated or omitted bodies produce an explicit limitation warning. Sending to Yakit is a confirmed Bridge request: Yak validates a maximum 2 MiB packet, saves a Web Fuzzer page configuration in the current project database, broadcasts the new tab to Yakit, and returns its `pageId` before the extension reports success.
+
+## Browser recording and page callables
+
+The independent `page-recorder-main-world.js` entrypoint temporarily wraps user-visible interactions, Fetch, XHR, form submission, Beacon, WebSocket, Worker/SharedWorker/MessagePort boundaries, a crypto-adapter registry, `btoa`, and `atob`. WebCrypto, CryptoJS, JSEncrypt, sm-crypto, and node-forge feed one open-but-bounded `crypto` event contract rather than library-specific event kinds. Worker and MessagePort round trips inherit their originating Trace through a bounded channel context, but are explicitly labeled `correlated` rather than being misrepresented as exact value equality. It does not replace `webRequest`: recording explains page-side data flow, while network capture preserves the browser's actual outbound request.
+
+Each click or submit begins a five-second business Trace. Nested and subsequent events share that Trace. Inputs and outputs are reduced to bounded evidence paths, byte lengths, encodings, and a randomly seeded 64-bit correlation fingerprint. The seed remains inside one page document and is regenerated for every document observer, so fingerprints cannot be compared across document boundaries. Matching an earlier output fingerprint to a later input fingerprint creates an exact Pipeline link. This is evidence of value equality inside one document segment, not proof of semantic causality.
+
+Raw previews are disabled by default. Enabling them requires `browser.recording.sensitive.read` and caps each preview at 8 KiB. A user-started recording is a tab/frame-scoped Session: the current document keeps live hooks and handles, while the background merges bounded document segments into extension-only `storage.session`. A full navigation is recorded as a first-class Trace event; the previous segment is sealed, the destination document receives a new observer with the same Session identity and a synchronized global sequence, and recording continues until explicit stop, expiry, clear, or tab close. The single per-target Session is removed by a new recording, explicit clear, tab close, or browser-session end. Previews are never written to persistent storage or included in audit or AI request-analysis payloads. Recording is bounded to 500 aggregate events, 48 evidence items per side, 1,000 links, and 64 live callable handles per document.
+
+Navigation is both a business event and a strict execution-context boundary. Full document navigation, reload, browser Back/Forward, same-document History changes and fragment changes are distinguished. If Back/Forward restores the original document from BFCache, its recorder, handles and callables are resumed without clearing earlier evidence; if the browser performs a hard reload, the historical evidence remains but the destroyed closure heap is truthfully unavailable. MAIN-world lifecycle and the tab-scoped Session are separate states, so a temporary document transition no longer appears as a completed recording. A grant-owned recording remains document-bound and stops at navigation instead of silently extending an Agent's authority into a new document.
+
+When an observed stateless or receiver-bound operation can be replayed, the recorder retains an opaque reference to the original function, actual receiver, argument template, and non-extractable `CryptoKey` or library key object. Stateful and streaming node-forge sessions instead expose correlated create/init/update/final evidence and direct the user to retain their one-shot business wrapper. Creating a `BrowserPageCallable` places only metadata and a named data slot in the shared current-document registry; key material remains in the retained call template. Library adapters expose only key kind, modulus size, and a document-salted fingerprint—never PEM/private-key material, modulus, exponent, or an instance. Retained call handles are bounded by count, a 2 MiB per-handle limit, and an 8 MiB aggregate limit; oversized calls remain visible as metadata but cannot pin their arguments as replay handles. A manual stop restores wrapped APIs but keeps callables usable in the same live document. Navigation or refresh destroys the page heap and intentionally invalidates every handle. Clear, grant expiry, and grant revocation restore APIs and destroy events, retained handles, and recorded-call entries.
+
+Inference is request-centered. One exact crypto-output-to-request-field edge plus a live handle can produce a ready profile directly, including JSEncrypt RSA into form, JSON, header, query, or raw body destinations. Multiple crypto outputs in one request become one request-level candidate. Even when every edge is exact, those primitives are not replayed separately because AES keys, RSA-wrapped keys, IVs, nonces, signatures, and timestamps may share one dynamic business context; Deep Capture is required to retain that higher-level callable. Known-library adapters are semantic accelerators rather than the generality boundary: ESM/bundler closures, Worker/WASM paths and unknown business wrappers must remain usable through request/message boundary evidence and business-callable capture even when the algorithm cannot yet be named. The adapter refactor, high-value provider order and anti-fixture acceptance matrix are defined in [`docs/FRONTEND_CRYPTO_GENERALIZATION_ROADMAP.md`](docs/FRONTEND_CRYPTO_GENERALIZATION_ROADMAP.md).
+
+Options and Yakit expose the same Session -> Trace -> event/evidence/callable model. The UI uses one oldest-to-newest recording timeline, numbered execution cards and relative timestamps. A neutral vertical rail communicates execution order; exact value links use a separate success treatment so temporal order is never mistaken for data-flow proof. Navigation cards show source, destination, lifecycle phase and document availability. The workspace validates a callable with new arguments before it is used by a Yak or AI workflow.
+
+## Chromium Deep Capture and business callables
+
+The Recorder remains the low-overhead discovery layer. When a Trace identifies the relevant unified crypto call or request, Chromium Deep Capture attaches through `chrome.debugger`, enables the Runtime/Debugger/DOMDebugger domains and installs one one-shot breakpoint. Crypto matching uses `Debugger.setBreakpointOnFunctionCall` on the real installed adapter wrapper function, so production minification and page CSP cannot remove or block the breakpoint. Request matching uses a bounded XHR/fetch URL substring.
+
+Pause processing is two-stage. The background publishes at most 14 call-frame skeletons immediately, schedules a 45-second alarm watchdog, then reads up to six local/closure/module scopes for the first eight frames in parallel. UI keepalive extends the deadline; loss of all control surfaces resumes the page. Status, keepalive, resume, detach and adapter creation use only grant identity, `webNavigation`, session state and CDP while paused. They never inject a script into the paused document, avoiding a control-plane deadlock.
+
+`browser.callable.create` with `source: deep-capture` defaults to a backend-trusted `selected-frame` strategy. Multi-source stack hints and deterministic CDP inspection select a unique page business frame, resolve its real function object from the frame name, receiver descriptor or scope binding, verify its function location and block network/DOM/navigation/storage side effects. A user expression is an advanced fallback and passes the same gate. The resulting function and receiver enter the same page-owned callable registry used by recorded calls; metadata alone crosses the extension boundary. Formal parameters, including those after default values, become ordered input slots. Options can use exact same-name values already present in the authorized paused scope to initialize a non-persistent local replay sample and `body.<parameter>` guide. After resume, `browser.callable.execute` invokes that closure with at most 64 JSON arguments and returns a bounded structured result. Non-extractable keys, key promises and other closure objects remain in the page. Navigation destroys every callable.
+
+Debugger read, debugger control and callable execution are separate scopes. A grant cannot control a local or different grant's debugger session. Replacement, expiry, revocation and tab closure release owned sessions. Firefox does not request `debugger` or advertise Deep Capture, but it can retain recorder-created page callables. Detailed invariants and real AES-GCM/HMAC acceptance criteria are in [`docs/DEEP_CAPTURE_ARCHITECTURE.md`](docs/DEEP_CAPTURE_ARCHITECTURE.md).
+
+## Browser Transform Gateway
+
+The Transform Gateway turns retained page callables into a native Web Fuzzer data plane. Yakit keeps the request and response editor in plaintext. The owning Yak gRPC process calls the selected paired browser after the user's `beforeRequest` hot patch and before network transmission, then calls it again immediately after receiving a response and before the user's `afterRequest` hot patch. `RequestRaw`/`ResponseRaw` remain logical plaintext; `WireRequestRaw`/`WireResponseRaw` preserve the actual transmitted packets for side-by-side inspection and history.
+
+Profiles are bound to one current `tabId + frameId + documentId + origin`, route-filtered by HTTP method and wildcard URL, and composed as a Pipeline v2 ordered DAG of `context.read`, whitelisted `builtin`, `page.call` and `output.write` nodes. Nodes may reference only earlier results. After the background validates route, origin and document identity, the complete bounded DAG executes in the target MAIN world with one extension-to-page round trip rather than one round trip per node. Outputs support complete/field-level bodies, headers and query parameters. Paths reject prototype traversal, header mappings reject CR/LF injection, and Yak independently rejects any returned URL that changes scheme, host, port or path. Execution values are lossless within an 8 MiB body limit and fail explicitly outside their structural bounds. A bounded per-profile gate protects page functions that are not safely re-entrant.
+
+Request conversion is fail-closed: no error path sends the plaintext packet. Response conversion failure returns an explicit synthetic failure while retaining the wire response for diagnosis. Navigation, refresh, grant expiry, callable loss, route mismatch and browser disconnect never silently retarget or fall back. Chromium exposes the workspace because Deep Capture can retain business closures; Firefox hides the unavailable Gateway/Deep Capture modes.
+
+The complete product contract, schema, ordering and acceptance fixture are documented in [`docs/BROWSER_TRANSFORM_GATEWAY.md`](docs/BROWSER_TRANSFORM_GATEWAY.md).
+
+## Page-world code
+
+### Structured context and node references
+
+`browser.context` no longer returns a full HTML document. A snapshot contains a 20 KiB body-text excerpt, bounded headings/forms, up to 400 actionable nodes discovered while scanning at most 10,000 elements, a full frame inventory, optional bounded Web Storage values, optional IndexedDB database/store/key metadata, optional CacheStorage names, bounded document/SPA lifecycle events, optional Cookie values, authentication signals, and a diff against the preceding snapshot for the same tab/frame. IndexedDB and Cache values are never collected. Open Shadow Roots are traversed recursively; the extension's own edge-panel Shadow Root is excluded.
+
+Each actionable element is registered in the page's MAIN world and identified by `captureId + tabId + frameId + documentId + nodeId`. `browser.node.inspect` and `browser.node.action` resolve the registered `Element` directly instead of re-running a CSS selector. A new capture replaces the registry, a detached element is rejected, and a changed document fails target resolution. These paths return `stale_node` or `stale_document`; they never silently retarget a similar element.
+
+Frame inventory combines `webNavigation.getAllFrames` with a bounded packaged probe in every accessible frame. Grants store an explicit target for each selected `tabId + frameId + documentId + origin`; selecting a tab authorizes only its main frame until the user separately selects child frames. `webNavigation.getFrame` verifies each remote operation against the current frame URL and document. Cross-origin navigation returns `origin_changed`, while same-origin document replacement returns `stale_document`.
+
+Node inspection returns bounded identity, safe attributes, visibility, state, and viewport bounds. It deliberately excludes the current input value. Node actions support `click`, `focus`, `scroll`, and `setValue`; `setValue` uses native value setters plus input/change events, rejects file inputs, requires `browser.dom.write`, and never sends the supplied value to the audit writer. Programmatic click is a page-world click and is not represented as a trusted physical mouse event.
+
+The authentication classification is a heuristic based on bounded DOM controls plus explicitly requested Cookie names and Storage keys. It is useful for workflow routing, but it is not proof that the server accepts the current session.
+
+`PageExecutionAdapter` selects an execution mechanism at build time. Production/store Chrome builds use the Web Store-permitted User Scripts API:
+
+```text
+Background capability router
+    -> userScripts.execute({ world: "MAIN" })
+    -> structured { ok, result | error }
+```
+
+The default production build declares Chrome 138+, requires the user to enable Allow User Scripts, and physically omits `page-main-world.js`. It never silently falls back to direct Eval.
+
+User Scripts receive the selected expression or program as direct script source; the Store path never calls `eval` on Bridge-provided text. Expression mode automatically returns its expression. Program mode is an async function body and requires an explicit `return` to produce a value; without one it returns `undefined`.
+
+Development and local Firefox MV2 builds use WXT's packaged injection pattern. Enterprise Chrome prefers User Scripts and retains this pattern only as a managed fallback:
+
+```text
+Background capability router
+    | tabs.sendMessage (extension-only)
+Isolated content script
+    | correlated CustomEvent on the injected script element
+Unlisted page-main-world script
+    | indirect eval / function invocation
+The page's real window context
+```
+
+The old extension established the essential behavior by injecting `inject.js` and forwarding `CONTENT_EVAL_CODE` through `window.postMessage`. The current bridge preserves that capability while adding request IDs, Promise resolution, response timeouts, error propagation, cycle-safe result serialization, output limits, and content-script lifecycle cleanup. A timeout stops the extension from waiting for an asynchronous result; JavaScript cannot safely interrupt synchronous code, so an infinite loop can still block the target page.
+
+Both adapters share the same expression/program return rules, result serializer, Promise behavior, timeout bounds, and error envelope. Local Eval is initiated by an explicit user action. Remote expression and program modes require separate scopes and a target whose tab, frame, document and origin still match. Because the page controls its JavaScript environment, all results remain untrusted input.
+
+The public Firefox MV3 AMO channel is invoke-only at the extension boundary: it requests neither `userScripts` nor general page invocation/Eval, does not package `page-main-world.js`, and advertises neither Bridge capability. This follows Mozilla's current restriction of `userScripts` to user-script managers. Structured context, stable node commands, network capture, browser recording and human handoff remain available.
+
+The same page bridge supports `browser.invoke` for the narrower case where the Agent already knows a concrete global function path. Browser recording uses the same target/grant boundary through a separately packaged, bounded MAIN-world recorder and does not depend on general Eval.
+
+## Proxy routing
+
+Proxy routing is a compile-and-apply subsystem, not an extension-side per-request rules engine. Durable endpoint/rule/source summaries remain in `settings.proxy.v1`; downloaded source revisions, normalized 512-rule chunks, and the eight newest compiled artifacts live in `yakit-proxy-rules` IndexedDB. Large exact/suffix host sets compile to PAC tries, while wildcard and regex conditions are instantiated once outside `FindProxyForURL`.
+
+Automatic order is manual rules, ordered sources, then the default endpoint. Source exclusions run before positive rules unless a SwitchyOmega `@with result` list explicitly owns file order. Rule-source updates stage a new revision and only replace the state reference after parse, compilation, `browser.proxy.settings`, and serialized state commit succeed. The last live PAC and source revision remain active on failure.
+
+Yakit MITM is a built-in fixed endpoint, not a remotely managed MITM process. Popup keeps two operations visually and behaviorally separate: a current-hostname assignment can target any Direct or fixed HTTP(S)/SOCKS endpoint and atomically enables automatic routing, while the global mode list changes the entire browser without creating a rule. “Automatic” clears the exact-host override so subscriptions and the default endpoint resume control. The extension does not control Yak MITM lifecycle or downstream interception policy. Full formats, budgets, failure behavior, and verification requirements are documented in `docs/PROXY_ARCHITECTURE.md`.
+
+## Popup and Options tool boundary
+
+The popup is the current-tab command surface. It uses a fixed 48px icon rail with four modules: overview, proxy, Cookie Editor and User-Agent. The Yak SVG mark remains visible in the header without repeating the full product name. Bridge state is represented by a focusable status dot with a tooltip and explicit accessible label; green means connected, amber means connecting/negotiating, gray means unpaired or offline, and red means an error.
+
+Cookie Editor and User-Agent are exposed as rail modules for actions that should complete in one or two steps:
+
+- Cookie values are masked by default and only revealed by an explicit click; the quick editor supports the common name/value/path/SameSite/flag fields and preserves existing partition metadata.
+- User-Agent quick switching offers browser default, built-in device templates and saved custom profiles, then applies the selected header to the current hostname and reloads the target tab.
+- Both quick views report the current target hostname and link to the full Options tool. They never implement a second browser API path; all reads and mutations use the typed runtime request map.
+
+Options is the durable management surface. Its `常用工具` navigation group contains the full Cookie Editor and User-Agent manager, including filtering, import/export, CHIPS fields, per-host assignments, custom profile editing and deletion. This split keeps the popup small enough for repeated use while retaining the security controls and information density required for deep workflows.
+
+## Page UI loading
+
+The content script is a roughly 10-12.2 KiB native DOM shell. It owns the Yak launcher, bridge indicator, drag position, left/right snapping, and handoff-triggered expansion. React, Radix, and the floating workbench are loaded in `floating.html` only after the user expands the launcher or a handoff targets that tab; the iframe is released after 60 seconds collapsed. Build auditing reports the content-script size as an advisory trend; lazy loading and the 60-second release policy are verified from runtime behavior rather than enforced through a fixed bundle-size gate.
+
+Popup, Options, and the floating workbench share one token-based design system in `src/styles/`: `tokens.css` defines the palette, type scale (11-20px), radii, and shadows, including a full dark set under `[data-theme='dark']`; `ui.css` styles the shared Radix-backed components. The vivid brand orange is reserved for non-text accents; filled primary buttons and text links use a deeper AA-contrast orange. All surfaces are light-first — the orange yak mark is shown bare without a backing tile. The theme preference (`system`/`light`/`dark`) lives in its own `settings.appearance.v1` local-storage key, is written only from extension UI, and is applied to `<html data-theme>` by each entrypoint through `src/platform/storage/appearance.ts`; the content-script launcher reads the same key in-page (falling back to the OS scheme) to theme its shadow-DOM shell.
+
+## Audit boundary
+
+Audit events live under a separate storage key and are serialized independently from settings and active session state. The bounded log retains the latest 500 events. It records category, method/action, outcome, task ID, tab ID, duration, error code, and a fixed safe summary where applicable. Capability parameters and results are never passed to the audit writer. The Options activity view reads the latest 200 entries and lets the user clear them locally.
+
+## Production operations
+
+- State v7 uses separate durable proxy/UA/Bridge/panel keys and separate session grant/Bridge/action keys; mutation is serialized across domains and no legacy migration path exists.
+- Agent actions have a session timeline and user pause/resume/revoke controls. Persistent audit remains metadata-only.
+- Managed storage can lock transport, endpoint/host, grant duration/origins, program Eval and panel availability. Enforcement is in background handlers.
+- Aggregate Service Worker, Bridge, heartbeat and capability metrics stay local. Explicit diagnostics export omits URLs, values, payloads, Eval code and task/grant identifiers.
+- Public review artifacts live under `docs/store-review`; privacy, permission and enterprise deployment contracts live under `docs/`.
+- Store/Enterprise Chromium E2E covers 320/390/desktop UI, service-worker restart, frame/document/origin boundaries, request/recording workflows, exact value and correlated channel links, document callable replay, all five crypto adapters, node-forge stateful sessions, independent SM2/SM4/RSA/AES/digest/HMAC/signature validation, randomized non-global ESM + WebAssembly closure recovery, Worker holdout, recorder load/memory budgets, JSEncrypt RSA receiver retention and guided form-field profiles, distinct WebCrypto operation breakpoints, real closure-held AES-GCM/HMAC request encryption, encrypted-response restoration and server validation, handoff, audit/diagnostic redaction and state concurrency. Go tests cover Bridge v3 pairing, code derivation, signed challenge/auth, revocation, YakURL control, chunking/session recovery, transform URL confinement and Native Messaging proxy framing.

DESIGN.md

@@ -0,0 +1,69 @@
+# Design System: Yakit Browser Agent
+**Project ID:** yakit-chrome-client (derived from codebase design tokens, `src/styles/tokens.css` — no Stitch project)
+
+## 1. Visual Theme & Atmosphere
+
+A **focused security instrument panel**: utilitarian, information-dense, and calm. The aesthetic philosophy is "console first, chrome second" — content surfaces stay quiet and neutral so that state (connection, capture, risk) can carry all the visual signal. The mood is airy-but-dense: compact 13px typography and tight 8px-rhythm spacing, balanced by generous card padding and breathing room between functional groups.
+
+The brand presence is deliberately restrained: a light, continuous surface carries every view, signed by the bare orange yak mark and a single ember-orange accent reserved for moments of genuine emphasis. Nothing glows, nothing gradients, no black slabs; depth comes from whisper-soft shadows and hairline separators, not borders. The system ships in twin themes — a cool light canvas and a true-dark console — with identical geometry and hierarchy, switched by a user preference (`system` / `light` / `dark`).
+
+## 2. Color Palette & Roles
+
+### Light theme (default)
+
+- **Canvas Mist (#f3f4f6)** — application background; lets white cards float without borders.
+- **Card White (#ffffff)** — primary content surfaces: cards, tables, panels, inputs.
+- **Inset Pebble (#eceef1)** — recessed fills: stat tiles, code-free inset areas, toggle-off track.
+- **Ink (#1d232a)** — primary text and strong values.
+- **Slate Note (#68727d)** — secondary text, descriptions, timestamps.
+- **Label Slate (#474f59)** — field labels, section labels, ghost-button text.
+- **Hairline (#e1e4e8)** — non-structural separators (table rows, list dividers); used sparingly.
+- **Frame Line (#c8cfd6)** — input strokes and secondary-button outlines.
+- **Yak Orange (#ee7815)** — brand accent for *non-text* signal only: toggle-on tracks, active nav indicator, icon highlights, focus halo. Never carries text.
+- **Ember (#b54f08)** — the accessible action orange: filled primary buttons (white text, 5.1:1 AA) and text links on light surfaces.
+- **Ember Deep (#9e4607)** — hover state for filled primary buttons.
+- **Ember Wash (#fdf0e1)** — soft selection tint: active list rows, selected table lines.
+- **Pine (#1e7f52)** on **Mint Mist (#e4f3eb)** — connected, captured, success states.
+- **Umber (#94650d)** on **Parchment (#fcf2d9)** — warning states and the human-handoff surface.
+- **Brick (#bf3d3d)** on **Blush (#fbeaea)** — destructive actions, errors, failed states.
+- **Bare Yak (the orange brand mark, #f97a04 family)** — shown directly on the surface with no backing tile; it is the only persistent brand signature.
+
+### Dark theme (`[data-theme='dark']`)
+
+- **Deep Space (#0e1116)** — application background; true console dark, not navy.
+- **Panel Slate (#161b21)** — cards and surfaces.
+- **Raised Slate (#1e242c)** — inset fills and hover states.
+- **Fog Text (#e2e7ec)** — primary text; **Ash (#8a949f)** secondary; **Mist Strong (#b2bcc5)** labels.
+- **Ember Glow (#f5832a)** — filled primary buttons with **Roasted Ink (#201205)** text (7.5:1 AA); brighter than light theme to hold contrast on dark.
+- **Ember Light (#f7a15c)** — text links and code accents on dark surfaces.
+- Semantic tints deepen to translucent darkness: **Pine Glow (#45b981 / #122a1f)**, **Amber Glow (#d9a441 / #2c2311)**, **Coral Glow (#e06e6e / #2f1b1b)**.
+
+## 3. Typography Rules
+
+- **Family:** A system-native sans stack (Inter falling back to ui-sans-serif, system-ui, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans CJK SC) — chosen for crisp CJK rendering at small sizes without bundling font files. Code and packets use a mono stack (ui-monospace, SF Mono, Consolas).
+- **Scale (six steps, no more):** 11px for uppercase micro-labels only, 12px secondary/description, **13px as the reading base**, 14px emphasized values, 16px section titles, 20px page titles.
+- **Weight hierarchy:** 500 for navigation, 600 for interactive text and labels, 650 for card titles and strong values, 700 reserved for page titles and hero numerals.
+- **Micro-labels:** 11px, weight 650, letter-spacing .04em, uppercase, Slate Note color — the "eyebrow" voice used above data.
+- **Rhythm:** line-heights stay tight (16–18px for body); Chinese text is never set below 12px except uppercase micro-labels.
+
+## 4. Component Stylings
+
+* **Buttons:** 36px tall with gently squared corners (6px radius) and 13px semibold labels. The *filled primary* is Ember (light) / Ember Glow (dark) with contrasting text — strictly one per view. *Secondary* buttons are Card White with a Frame Line stroke. *Ghost* buttons are transparent until hovered. *Danger* is a Brick outline that fills with Blush on hover. Small (30px) and icon (34px square) variants share the same geometry.
+* **Cards/Containers:** Generously rounded corners (12px radius), Card White fill, and a whisper-soft two-layer shadow (a 1px key line of shade plus a faint 4px lift) — no borders. Recessed stat tiles inside cards use Inset Pebble with softly rounded corners (8px). Nothing nests a shadowed card inside another.
+* **Inputs/Forms:** 36px tall, 6px corner radius, 1px Frame Line stroke on Card White; textareas keep the same stroke. Focus never shows a hard outline — instead a soft ember halo (3px of translucent Yak Orange). Field labels are 12px semibold Label Slate; hints in 12px Slate Note.
+* **Toggles:** Pill-shaped switches (40×22px), Pebble track when off, Yak Orange track when on, white 16px thumb gliding on a short ease.
+* **Navigation rail:** A 238px rail in the same surface as the workspace, separated by a single hairline. Items are 40px rows with softly rounded corners (8px); the active item shows a subtle raised fill plus a 3px inset Yak Orange indicator bar on its leading edge, with its icon tinted orange.
+* **Status pills:** Fully rounded (pill-shaped, 999px) badges pairing each semantic color with its soft wash — connected/capturing in Pine-on-Mint, waiting/warning in Umber-on-Parchment, error in Brick-on-Blush.
+* **Code & packets:** Deep slate panels (#171b20, light mono text) with 8px rounded corners; they remain dark in both themes as "terminal territory."
+* **Handoff surface:** A Parchment card with a 3px Umber leading edge and the warning icon — the single interruptive pattern in the system, reserved for QR/MFA/CAPTCHA human takeover.
+
+## 5. Layout Principles
+
+- **Shell:** A fixed 238px dark rail plus a fluid workspace. The workspace column is capped at a comfortable 1440px reading width and **horizontally centered**, so ultra-wide monitors frame the console instead of stretching tables into unreadability.
+- **Grid alignment:** The 60px sticky topbar shares the exact content grid — its padding is computed from the same 1440px cap (`max(28px, (100% − 1440px)/2 + 28px)`), keeping the target-tab chip and the page content on one vertical line.
+- **Spacing rhythm:** An 8px base unit; 16px gaps between cards, 16–20px inner card padding, 22–28px page padding. Groups are separated by space and shadow, not rules.
+- **Two-column workbenches:** Data pages (network, cookies, context, engine) use a fluid primary column with a 320–440px inspector column that sticks below the topbar; below 1080px they stack to a single column.
+- **Grid discipline:** Every single-column vertical grid declares an explicit `minmax(0, 1fr)` track, so long URLs and code strings truncate with ellipses instead of overflowing narrow (320–390px) viewports.
+- **Popup:** A fixed 390px single-sheet column — sections divided by hairlines, not floating cards — designed to a strict 600px height budget, keeping every action including the bottom primary capture button visible without scrolling.
+- **Floating panel:** A 46px edge launcher — a white stadium orb with the bare yak mark (dark in dark theme, theme-aware in-page) — that expands to a 326px rounded workbench over the page; its header shares the panel surface with a single hairline seam.
+- **Motion:** Short (140–180ms) ease transitions on color and slide only; `prefers-reduced-motion` collapses all animation.

README.md

@@ -1,90 +1,84 @@
-# Yet Another Chrome Extension for Yakit CyberSecurity
+# Yakit Browser Agent
 
-This is a Chrome Extension for Yakit CyberSecurity. U can use it to...
+Browser security tools and a consent-gated context bridge for Yak AI agents.
 
-1. Change your proxy between Yakit and other proxy or your system.
-2. As a sandbox for your Yakit Client
+The WXT extension includes proxy profiles and PAC routing rules, Cookie and User-Agent tools, a Shadow DOM edge panel, authenticated-tab context capture, controlled execution in the page's real JavaScript world, and a Chromium Deep Capture debugger for real frontend crypto workflows. Structured context uses bounded text, forms, authentication signals, open Shadow DOM traversal, context diffs, and document-bound node references instead of exporting full page HTML. The Recorder discovers business Traces through one crypto-adapter model for WebCrypto, CryptoJS, JSEncrypt, sm-crypto, and node-forge, plus Beacon/Worker/SharedWorker/MessagePort boundaries. An exact receiver-bound primitive-to-request-field chain can become a plaintext gateway directly, while stateful or multi-call AES/RSA/signature envelopes are promoted to a request-level graph and captured as one business callable. Deep Capture can pause the next selected crypto call, message boundary, or request, deterministically rank live page frames, recover ESM/module script URLs, and retain an in-scope closure—including a closure holding a `CryptoKey` or `WebAssembly.Instance`—without exporting key material. The Browser Transform Gateway composes those callables with typed Pipeline v2 nodes so Yakit Web Fuzzer can edit plaintext while the live browser produces and consumes the real wire format. AI access is bound to a concrete tab, frame, document, origin, task, scope set, and expiration time. Yak/Yakit product assets are kept in `public/` and exposed to content scripts through explicit web-accessible resources.
 
-# CRA: Getting Started with Create React App
+When an Agent reaches a QR code, MFA, CAPTCHA, or device confirmation, it can create a human handoff. The target tab is focused, the extension presents the request in Popup, Options, and the edge panel, and the Agent receives a completion or cancellation event after the user decides. The network workspace can capture a granted document's real Fetch/XHR requests and open an authenticated replay packet in Yakit Web Fuzzer. Sensitive headers, Cookie, and body capture are off by default and session-only. A separate local audit log stores only method, target, timing, and outcome metadata; it does not store page content, Cookie values, Eval source, network payloads, arguments, or results.
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## Development
 
-## Available Scripts
+```bash
+pnpm install
+pnpm dev
+```
 
-In the project directory, you can run:
+WXT intentionally refuses to launch browsers automatically when it detects WSL, even when WSLg and a Linux Chrome are available. Use the project runner instead:
 
-### `npm start`
+```bash
+pnpm dev:wsl
+```
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+It keeps the development profile in `.wxt/chrome-wsl-profile`. Official Chrome 137+ no longer accepts `--load-extension`, so the first run opens `chrome://extensions`: enable Developer mode and load `.output/chrome-mv3-dev` once. The profile remembers it on later runs.
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+Chromium and Chrome for Testing still support automatic loading. Select one with:
 
-### `npm test`
+```bash
+CHROME_PATH=/path/to/chromium pnpm dev:wsl
+```
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more
-information.
+Production builds:
 
-### `npm run build`
+```bash
+# Chrome Web Store: User Scripts MAIN, no direct Eval bridge
+pnpm build
+# Explicitly named store output
+pnpm build:store
+# Managed/local deployment: User Scripts MAIN with packaged bridge fallback
+pnpm build:enterprise
+# Local/enterprise Firefox MV2 injected bridge
+pnpm build:firefox
+# Public Firefox MV3 AMO invoke-only package
+pnpm build:firefox:amo
+```
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+Chrome 138+ requires the user to enable **Allow User Scripts** on the extension details page before the store build can run page-world Eval. The extension reports this condition explicitly and does not fall back to direct Eval.
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+Production verification:
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+```bash
+pnpm verify:production
+pnpm verify:ui:store
+pnpm verify:ui:enterprise
+pnpm verify:ui:enterprise:fallback
+pnpm verify:native
+```
 
-### `npm run eject`
+`verify:production` runs Vitest and enforces permission, managed-policy, execution-channel, `webRequest`, `debugger`, fixture-leakage, and web-accessible-resource policies across four packages. Content-script, background, recorder, compressed-background, and total package sizes remain visible as advisory reference metrics; exceeding those references does not block a build. Runtime performance is verified with bounded workloads and real browser flows instead of treating bundle size as a proxy for responsiveness. Browser E2E covers Chrome Store User Scripts, Enterprise User Scripts, and the Enterprise injected fallback, including document-bound grants, context diff, stable node operations, expression/program scope separation, pause/resume/revoke, human handoff, request capture, exact value and correlated channel Trace links, form/query field evidence, short-sample replay, recording-to-callable interaction, callable lifecycle management, same-tab navigation continuation and browser Back, deep-capture frame provenance/scope expansion, Yakit workflows, split storage, Service Worker restart, audit/diagnostic redaction, strict CSP, fail-closed tab teardown, and 320/390/desktop UI bounds. The Chromium fixture additionally uses real sm-crypto and minified node-forge browser bundles, a randomized non-global ESM closure holding a real WebAssembly instance, and an opaque Worker path; every retained callable/profile is checked by an independent server. The performance gate covers 1,000 small calls, 10 × 1 MiB calls, event exhaustion, oversized replay-handle rejection, and post-stop API restoration. `verify:native` builds the Go host and exercises Chromium Native Messaging through the host into a loopback Yak Bridge fixture; because Playwright cannot operate Chrome's toolbar permission prompt, only its disposable test copy pre-grants `nativeMessaging`, while the source Store package is asserted to remain optional.
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+Browser verification prefers `CHROMIUM_PATH`, then `CHROME_PATH`, Playwright's Chromium cache, Chrome for Testing, or system Chromium. It deliberately does not auto-select stable Google Chrome because current stable Chrome ignores unattended `--load-extension` startup flags.
 
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will
-remove the single build dependency from your project.
+## Pair with Yak and Yakit
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right
-into your project so you have full control over them. All of the commands except `eject` will still work, but they will
-point to the copied scripts so you can tweak them. At this point you're on your own.
+The Yak gRPC process owns the local browser Bridge. The standard command starts Bridge v3 on `127.0.0.1:64333` automatically, so there is no separate Bridge script or shared token to configure:
 
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you
-shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't
-customize it when you are ready for it.
+```bash
+go run common/yak/cmd/yak.go grpc --host 0.0.0.0
+```
 
-## Learn More
+Open **系统设置 -> 浏览器集成** in Yakit, then open **引擎连接** in the extension and choose **查找本机 Yakit**. Both surfaces display the same six-digit verification code. Compare the code and approve the pending browser in Yakit. The approval persists an origin-bound device identity; later connections authenticate automatically with signed challenges. Removing the device in Yakit immediately disconnects it and requires a new approval.
 
-You can learn more in
-the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+To run a browser task, create a control sharing grant for the target tab in the extension, return to **系统设置 -> 浏览器集成**, and click the online browser row. The default browser-workspace view contains Plaintext Gateway, Recorder and Deep Capture modes; raw capability JSON and Yak code with request-bound `browser.ExtensionCall` remain advanced modes. Select a saved browser/profile pair from Web Fuzzer's **浏览器明文** control to make its editor the logical plaintext view; **明文 / 线上** shows the actual transmitted request and response beside it. Task state, logs, JSON results, cancellation, and errors are streamed in that workspace. Do not use the generic `ExecYakScript`/`grpc_execYak` runner for this flow: that runner starts a child Yak process and cannot own the parent gRPC process's live browser connections.
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+Advanced transport settings remain available for a non-default loopback port or Native Messaging deployment. `--browser-extension-bridge-port` changes the Yak listener, and `--disable-browser-extension-bridge` disables it explicitly.
 
-### Code Splitting
+## Native Host and deployment
 
-This section has moved
-here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+Build the Native Messaging transport from the Yak repository and register it with the signed or unpacked extension ID:
 
-### Analyzing the Bundle Size
+```bash
+go build -o yakit-browser-agent-host ./common/browser/nativehostcmd
+./native-host/install.sh --host-binary /absolute/path/to/yakit-browser-agent-host --extension-id YOUR_EXTENSION_ID
+```
 
-This section has moved
-here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved
-here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved
-here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved
-here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved
-here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+Windows uses `native-host/install.ps1`. Native Messaging is an optional browser permission requested only when Native mode is selected. See [Browser Transform Gateway](docs/BROWSER_TRANSFORM_GATEWAY.md), [Deep Capture architecture](docs/DEEP_CAPTURE_ARCHITECTURE.md), the [frontend crypto generalization roadmap](docs/FRONTEND_CRYPTO_GENERALIZATION_ROADMAP.md), [Native Host installation](native-host/README.md), [enterprise policy](docs/ENTERPRISE_POLICY.md), [permissions](docs/PERMISSIONS.md), [privacy](docs/PRIVACY_POLICY.md), and the [release review packet](docs/store-review/RELEASE_CHECKLIST.md).

config/env.js

@@ -1,104 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
-
-// Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve('./paths')];
-
-const NODE_ENV = process.env.NODE_ENV;
-if (!NODE_ENV) {
-  throw new Error(
-    'The NODE_ENV environment variable is required but was not specified.'
-  );
-}
-
-// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
-const dotenvFiles = [
-  `${paths.dotenv}.${NODE_ENV}.local`,
-  // Don't include `.env.local` for `test` environment
-  // since normally you expect tests to produce the same
-  // results for everyone
-  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
-  `${paths.dotenv}.${NODE_ENV}`,
-  paths.dotenv,
-].filter(Boolean);
-
-// Load environment variables from .env* files. Suppress warnings using silent
-// if this file is missing. dotenv will never modify any environment variables
-// that have already been set.  Variable expansion is supported in .env files.
-// https://github.com/motdotla/dotenv
-// https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach(dotenvFile => {
-  if (fs.existsSync(dotenvFile)) {
-    require('dotenv-expand')(
-      require('dotenv').config({
-        path: dotenvFile,
-      })
-    );
-  }
-});
-
-// We support resolving modules according to `NODE_PATH`.
-// This lets you use absolute paths in imports inside large monorepos:
-// https://github.com/facebook/create-react-app/issues/253.
-// It works similar to `NODE_PATH` in Node itself:
-// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
-// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
-// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
-// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
-// We also resolve them to make sure all tools using them work consistently.
-const appDirectory = fs.realpathSync(process.cwd());
-process.env.NODE_PATH = (process.env.NODE_PATH || '')
-  .split(path.delimiter)
-  .filter(folder => folder && !path.isAbsolute(folder))
-  .map(folder => path.resolve(appDirectory, folder))
-  .join(path.delimiter);
-
-// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
-// injected into the application via DefinePlugin in webpack configuration.
-const REACT_APP = /^REACT_APP_/i;
-
-function getClientEnvironment(publicUrl) {
-  const raw = Object.keys(process.env)
-    .filter(key => REACT_APP.test(key))
-    .reduce(
-      (env, key) => {
-        env[key] = process.env[key];
-        return env;
-      },
-      {
-        // Useful for determining whether we’re running in production mode.
-        // Most importantly, it switches React into the correct mode.
-        NODE_ENV: process.env.NODE_ENV || 'development',
-        // Useful for resolving the correct path to static assets in `public`.
-        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
-        // This should only be used as an escape hatch. Normally you would put
-        // images into the `src` and `import` them in code to get their paths.
-        PUBLIC_URL: publicUrl,
-        // We support configuring the sockjs pathname during development.
-        // These settings let a developer run multiple simultaneous projects.
-        // They are used as the connection `hostname`, `pathname` and `port`
-        // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
-        // and `sockPort` options in webpack-dev-server.
-        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
-        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
-        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
-        // Whether or not react-refresh is enabled.
-        // It is defined here so it is available in the webpackHotDevClient.
-        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
-      }
-    );
-  // Stringify all values so we can feed into webpack DefinePlugin
-  const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
-      env[key] = JSON.stringify(raw[key]);
-      return env;
-    }, {}),
-  };
-
-  return { raw, stringified };
-}
-
-module.exports = getClientEnvironment;

config/getHttpsConfig.js

@@ -1,66 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const crypto = require('crypto');
-const chalk = require('react-dev-utils/chalk');
-const paths = require('./paths');
-
-// Ensure the certificate and key provided are valid and if not
-// throw an easy to debug error
-function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
-  let encrypted;
-  try {
-    // publicEncrypt will throw an error with an invalid cert
-    encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
-  } catch (err) {
-    throw new Error(
-      `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
-    );
-  }
-
-  try {
-    // privateDecrypt will throw an error with an invalid key
-    crypto.privateDecrypt(key, encrypted);
-  } catch (err) {
-    throw new Error(
-      `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
-        err.message
-      }`
-    );
-  }
-}
-
-// Read file and throw an error if it doesn't exist
-function readEnvFile(file, type) {
-  if (!fs.existsSync(file)) {
-    throw new Error(
-      `You specified ${chalk.cyan(
-        type
-      )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
-    );
-  }
-  return fs.readFileSync(file);
-}
-
-// Get the https config
-// Return cert files if provided in env, otherwise just true or false
-function getHttpsConfig() {
-  const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
-  const isHttps = HTTPS === 'true';
-
-  if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
-    const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
-    const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
-    const config = {
-      cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
-      key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
-    };
-
-    validateKeyAndCerts({ ...config, keyFile, crtFile });
-    return config;
-  }
-  return isHttps;
-}
-
-module.exports = getHttpsConfig;

config/jest/babelTransform.js

@@ -1,29 +0,0 @@
-'use strict';
-
-const babelJest = require('babel-jest').default;
-
-const hasJsxRuntime = (() => {
-  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
-    return false;
-  }
-
-  try {
-    require.resolve('react/jsx-runtime');
-    return true;
-  } catch (e) {
-    return false;
-  }
-})();
-
-module.exports = babelJest.createTransformer({
-  presets: [
-    [
-      require.resolve('babel-preset-react-app'),
-      {
-        runtime: hasJsxRuntime ? 'automatic' : 'classic',
-      },
-    ],
-  ],
-  babelrc: false,
-  configFile: false,
-});

config/jest/cssTransform.js

@@ -1,14 +0,0 @@
-'use strict';
-
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process() {
-    return 'module.exports = {};';
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return 'cssTransform';
-  },
-};

config/jest/fileTransform.js

@@ -1,40 +0,0 @@
-'use strict';
-
-const path = require('path');
-const camelcase = require('camelcase');
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process(src, filename) {
-    const assetFilename = JSON.stringify(path.basename(filename));
-
-    if (filename.match(/\.svg$/)) {
-      // Based on how SVGR generates a component name:
-      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
-      const pascalCaseFilename = camelcase(path.parse(filename).name, {
-        pascalCase: true,
-      });
-      const componentName = `Svg${pascalCaseFilename}`;
-      return `const React = require('react');
-      module.exports = {
-        __esModule: true,
-        default: ${assetFilename},
-        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
-          return {
-            $$typeof: Symbol.for('react.element'),
-            type: 'svg',
-            ref: ref,
-            key: null,
-            props: Object.assign({}, props, {
-              children: ${assetFilename}
-            })
-          };
-        }),
-      };`;
-    }
-
-    return `module.exports = ${assetFilename};`;
-  },
-};

config/modules.js

@@ -1,134 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
-const chalk = require('react-dev-utils/chalk');
-const resolve = require('resolve');
-
-/**
- * Get additional module paths based on the baseUrl of a compilerOptions object.
- *
- * @param {Object} options
- */
-function getAdditionalModulePaths(options = {}) {
-  const baseUrl = options.baseUrl;
-
-  if (!baseUrl) {
-    return '';
-  }
-
-  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
-
-  // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
-  // the default behavior.
-  if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
-    return null;
-  }
-
-  // Allow the user set the `baseUrl` to `appSrc`.
-  if (path.relative(paths.appSrc, baseUrlResolved) === '') {
-    return [paths.appSrc];
-  }
-
-  // If the path is equal to the root directory we ignore it here.
-  // We don't want to allow importing from the root directly as source files are
-  // not transpiled outside of `src`. We do allow importing them with the
-  // absolute path (e.g. `src/Components/Button.js`) but we set that up with
-  // an alias.
-  if (path.relative(paths.appPath, baseUrlResolved) === '') {
-    return null;
-  }
-
-  // Otherwise, throw an error.
-  throw new Error(
-    chalk.red.bold(
-      "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
-        ' Create React App does not support other values at this time.'
-    )
-  );
-}
-
-/**
- * Get webpack aliases based on the baseUrl of a compilerOptions object.
- *
- * @param {*} options
- */
-function getWebpackAliases(options = {}) {
-  const baseUrl = options.baseUrl;
-
-  if (!baseUrl) {
-    return {};
-  }
-
-  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
-
-  if (path.relative(paths.appPath, baseUrlResolved) === '') {
-    return {
-      src: paths.appSrc,
-    };
-  }
-}
-
-/**
- * Get jest aliases based on the baseUrl of a compilerOptions object.
- *
- * @param {*} options
- */
-function getJestAliases(options = {}) {
-  const baseUrl = options.baseUrl;
-
-  if (!baseUrl) {
-    return {};
-  }
-
-  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
-
-  if (path.relative(paths.appPath, baseUrlResolved) === '') {
-    return {
-      '^src/(.*)$': '<rootDir>/src/$1',
-    };
-  }
-}
-
-function getModules() {
-  // Check if TypeScript is setup
-  const hasTsConfig = fs.existsSync(paths.appTsConfig);
-  const hasJsConfig = fs.existsSync(paths.appJsConfig);
-
-  if (hasTsConfig && hasJsConfig) {
-    throw new Error(
-      'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
-    );
-  }
-
-  let config;
-
-  // If there's a tsconfig.json we assume it's a
-  // TypeScript project and set up the config
-  // based on tsconfig.json
-  if (hasTsConfig) {
-    const ts = require(resolve.sync('typescript', {
-      basedir: paths.appNodeModules,
-    }));
-    config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
-    // Otherwise we'll check if there is jsconfig.json
-    // for non TS projects.
-  } else if (hasJsConfig) {
-    config = require(paths.appJsConfig);
-  }
-
-  config = config || {};
-  const options = config.compilerOptions || {};
-
-  const additionalModulePaths = getAdditionalModulePaths(options);
-
-  return {
-    additionalModulePaths: additionalModulePaths,
-    webpackAliases: getWebpackAliases(options),
-    jestAliases: getJestAliases(options),
-    hasTsConfig,
-  };
-}
-
-module.exports = getModules();

config/paths.js

@@ -1,77 +0,0 @@
-'use strict';
-
-const path = require('path');
-const fs = require('fs');
-const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
-
-// Make sure any symlinks in the project folder are resolved:
-// https://github.com/facebook/create-react-app/issues/637
-const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
-
-// We use `PUBLIC_URL` environment variable or "homepage" field to infer
-// "public path" at which the app is served.
-// webpack needs to know it to put the right <script> hrefs into HTML even in
-// single-page apps that may serve index.html for nested URLs like /todos/42.
-// We can't use a relative path in HTML because we don't want to load something
-// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
-const publicUrlOrPath = getPublicUrlOrPath(
-  process.env.NODE_ENV === 'development',
-  require(resolveApp('package.json')).homepage,
-  process.env.PUBLIC_URL
-);
-
-const buildPath = process.env.BUILD_PATH || 'build';
-
-const moduleFileExtensions = [
-  'web.mjs',
-  'mjs',
-  'web.js',
-  'js',
-  'web.ts',
-  'ts',
-  'web.tsx',
-  'tsx',
-  'json',
-  'web.jsx',
-  'jsx',
-];
-
-// Resolve file paths in the same order as webpack
-const resolveModule = (resolveFn, filePath) => {
-  const extension = moduleFileExtensions.find(extension =>
-    fs.existsSync(resolveFn(`${filePath}.${extension}`))
-  );
-
-  if (extension) {
-    return resolveFn(`${filePath}.${extension}`);
-  }
-
-  return resolveFn(`${filePath}.js`);
-};
-
-// config after eject: we're in ./config/
-module.exports = {
-  dotenv: resolveApp('.env'),
-  appPath: resolveApp('.'),
-  appBuild: resolveApp(buildPath),
-  appPublic: resolveApp('public'),
-  appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveModule(resolveApp, 'src/index'),
-  appPackageJson: resolveApp('package.json'),
-  appSrc: resolveApp('src'),
-  appTsConfig: resolveApp('tsconfig.json'),
-  appJsConfig: resolveApp('jsconfig.json'),
-  yarnLockFile: resolveApp('yarn.lock'),
-  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
-  proxySetup: resolveApp('src/setupProxy.js'),
-  appNodeModules: resolveApp('node_modules'),
-  appWebpackCache: resolveApp('node_modules/.cache'),
-  appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
-  swSrc: resolveModule(resolveApp, 'src/service-worker'),
-  publicUrlOrPath,
-};
-
-
-
-module.exports.moduleFileExtensions = moduleFileExtensions;

config/webpack.config.js

@@ -1,758 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const webpack = require('webpack');
-const resolve = require('resolve');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
-const ESLintPlugin = require('eslint-webpack-plugin');
-const paths = require('./paths');
-const modules = require('./modules');
-const getClientEnvironment = require('./env');
-const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-const ForkTsCheckerWebpackPlugin =
-  process.env.TSC_COMPILE_ON_ERROR === 'true'
-    ? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
-    : require('react-dev-utils/ForkTsCheckerWebpackPlugin');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-
-const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
-
-// Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
-
-const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime');
-const reactRefreshWebpackPluginRuntimeEntry = require.resolve(
-  '@pmmmwh/react-refresh-webpack-plugin'
-);
-const babelRuntimeEntry = require.resolve('babel-preset-react-app');
-const babelRuntimeEntryHelpers = require.resolve(
-  '@babel/runtime/helpers/esm/assertThisInitialized',
-  { paths: [babelRuntimeEntry] }
-);
-const babelRuntimeRegenerator = require.resolve('@babel/runtime/regenerator', {
-  paths: [babelRuntimeEntry],
-});
-
-// Some apps do not need the benefits of saving a web request, so not inlining the chunk
-// makes for a smoother build process.
-const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
-
-const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
-const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
-
-const imageInlineSizeLimit = parseInt(
-  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
-);
-
-// Check if TypeScript is setup
-const useTypeScript = fs.existsSync(paths.appTsConfig);
-
-// Check if Tailwind config exists
-const useTailwind = fs.existsSync(
-  path.join(paths.appPath, 'tailwind.config.js')
-);
-
-// Get the path to the uncompiled service worker (if it exists).
-const swSrc = paths.swSrc;
-
-// style files regexes
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
-
-const hasJsxRuntime = (() => {
-  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
-    return false;
-  }
-
-  try {
-    require.resolve('react/jsx-runtime');
-    return true;
-  } catch (e) {
-    return false;
-  }
-})();
-
-// This is the production and development configuration.
-// It is focused on developer experience, fast rebuilds, and a minimal bundle.
-module.exports = function (webpackEnv) {
-  const isEnvDevelopment = webpackEnv === 'development';
-  const isEnvProduction = webpackEnv === 'production';
-
-  // Variable used for enabling profiling in Production
-  // passed into alias object. Uses a flag if passed into the build command
-  const isEnvProductionProfile =
-    isEnvProduction && process.argv.includes('--profile');
-
-  // We will provide `paths.publicUrlOrPath` to our app
-  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-  // Get environment variables to inject into our app.
-  const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
-
-  const shouldUseReactRefresh = env.raw.FAST_REFRESH;
-
-  // common function to get style loaders
-  const getStyleLoaders = (cssOptions, preProcessor) => {
-    const loaders = [
-      isEnvDevelopment && require.resolve('style-loader'),
-      isEnvProduction && {
-        loader: MiniCssExtractPlugin.loader,
-        // css is located in `static/css`, use '../../' to locate index.html folder
-        // in production `paths.publicUrlOrPath` can be a relative path
-        options: paths.publicUrlOrPath.startsWith('.')
-          ? { publicPath: '../../' }
-          : {},
-      },
-      {
-        loader: require.resolve('css-loader'),
-        options: cssOptions,
-      },
-      {
-        // Options for PostCSS as we reference these options twice
-        // Adds vendor prefixing based on your specified browser support in
-        // package.json
-        loader: require.resolve('postcss-loader'),
-        options: {
-          postcssOptions: {
-            // Necessary for external CSS imports to work
-            // https://github.com/facebook/create-react-app/issues/2677
-            ident: 'postcss',
-            config: false,
-            plugins: !useTailwind
-              ? [
-                  'postcss-flexbugs-fixes',
-                  [
-                    'postcss-preset-env',
-                    {
-                      autoprefixer: {
-                        flexbox: 'no-2009',
-                      },
-                      stage: 3,
-                    },
-                  ],
-                  // Adds PostCSS Normalize as the reset css with default options,
-                  // so that it honors browserslist config in package.json
-                  // which in turn let's users customize the target behavior as per their needs.
-                  'postcss-normalize',
-                ]
-              : [
-                  'tailwindcss',
-                  'postcss-flexbugs-fixes',
-                  [
-                    'postcss-preset-env',
-                    {
-                      autoprefixer: {
-                        flexbox: 'no-2009',
-                      },
-                      stage: 3,
-                    },
-                  ],
-                ],
-          },
-          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
-        },
-      },
-    ].filter(Boolean);
-    if (preProcessor) {
-      loaders.push(
-        {
-          loader: require.resolve('resolve-url-loader'),
-          options: {
-            sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
-            root: paths.appSrc,
-          },
-        },
-        {
-          loader: require.resolve(preProcessor),
-          options: {
-            sourceMap: true,
-          },
-        }
-      );
-    }
-    return loaders;
-  };
-
-  return {
-    target: ['browserslist'],
-    // Webpack noise constrained to errors and warnings
-    stats: 'errors-warnings',
-    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
-    // Stop compilation early in production
-    bail: isEnvProduction,
-    devtool: isEnvProduction
-      ? shouldUseSourceMap
-        ? 'source-map'
-        : false
-      : isEnvDevelopment && 'cheap-module-source-map',
-    // These are the "entry points" to our application.
-    // This means they will be the "root" imports that are included in JS bundle.
-    entry: paths.appIndexJs,
-    output: {
-      // The build folder.
-      path: paths.appBuild,
-      // Add /* filename */ comments to generated require()s in the output.
-      pathinfo: isEnvDevelopment,
-      // There will be one main bundle, and one file per asynchronous chunk.
-      // In development, it does not produce real files.
-      filename: isEnvProduction
-        ? 'static/js/[name].[contenthash:8].js'
-        : isEnvDevelopment && 'static/js/bundle.js',
-      // There are also additional JS chunk files if you use code splitting.
-      chunkFilename: isEnvProduction
-        ? 'static/js/[name].[contenthash:8].chunk.js'
-        : isEnvDevelopment && 'static/js/[name].chunk.js',
-      assetModuleFilename: 'static/media/[name].[hash][ext]',
-      // webpack uses `publicPath` to determine where the app is being served from.
-      // It requires a trailing slash, or the file assets will get an incorrect path.
-      // We inferred the "public path" (such as / or /my-project) from homepage.
-      publicPath: paths.publicUrlOrPath,
-      // Point sourcemap entries to original disk location (format as URL on Windows)
-      devtoolModuleFilenameTemplate: isEnvProduction
-        ? info =>
-            path
-              .relative(paths.appSrc, info.absoluteResourcePath)
-              .replace(/\\/g, '/')
-        : isEnvDevelopment &&
-          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
-    },
-    cache: {
-      type: 'filesystem',
-      version: createEnvironmentHash(env.raw),
-      cacheDirectory: paths.appWebpackCache,
-      store: 'pack',
-      buildDependencies: {
-        defaultWebpack: ['webpack/lib/'],
-        config: [__filename],
-        tsconfig: [paths.appTsConfig, paths.appJsConfig].filter(f =>
-          fs.existsSync(f)
-        ),
-      },
-    },
-    infrastructureLogging: {
-      level: 'none',
-    },
-    optimization: {
-      minimize: isEnvProduction,
-      minimizer: [
-        // This is only used in production mode
-        new TerserPlugin({
-          terserOptions: {
-            parse: {
-              // We want terser to parse ecma 8 code. However, we don't want it
-              // to apply any minification steps that turns valid ecma 5 code
-              // into invalid ecma 5 code. This is why the 'compress' and 'output'
-              // sections only apply transformations that are ecma 5 safe
-              // https://github.com/facebook/create-react-app/pull/4234
-              ecma: 8,
-            },
-            compress: {
-              ecma: 5,
-              warnings: false,
-              // Disabled because of an issue with Uglify breaking seemingly valid code:
-              // https://github.com/facebook/create-react-app/issues/2376
-              // Pending further investigation:
-              // https://github.com/mishoo/UglifyJS2/issues/2011
-              comparisons: false,
-              // Disabled because of an issue with Terser breaking valid code:
-              // https://github.com/facebook/create-react-app/issues/5250
-              // Pending further investigation:
-              // https://github.com/terser-js/terser/issues/120
-              inline: 2,
-            },
-            mangle: {
-              safari10: true,
-            },
-            // Added for profiling in devtools
-            keep_classnames: isEnvProductionProfile,
-            keep_fnames: isEnvProductionProfile,
-            output: {
-              ecma: 5,
-              comments: false,
-              // Turned on because emoji and regex is not minified properly using default
-              // https://github.com/facebook/create-react-app/issues/2488
-              ascii_only: true,
-            },
-          },
-        }),
-        // This is only used in production mode
-        new CssMinimizerPlugin(),
-      ],
-    },
-    resolve: {
-      // This allows you to set a fallback for where webpack should look for modules.
-      // We placed these paths second because we want `node_modules` to "win"
-      // if there are any conflicts. This matches Node resolution mechanism.
-      // https://github.com/facebook/create-react-app/issues/253
-      modules: ['node_modules', paths.appNodeModules].concat(
-        modules.additionalModulePaths || []
-      ),
-      // These are the reasonable defaults supported by the Node ecosystem.
-      // We also include JSX as a common component filename extension to support
-      // some tools, although we do not recommend using it, see:
-      // https://github.com/facebook/create-react-app/issues/290
-      // `web` extension prefixes have been added for better support
-      // for React Native Web.
-      extensions: paths.moduleFileExtensions
-        .map(ext => `.${ext}`)
-        .filter(ext => useTypeScript || !ext.includes('ts')),
-      alias: {
-        '@assets': path.resolve(__dirname, '../src/assets'),
-        '@components': path.resolve(__dirname, '../src/components'),
-        '@network': path.resolve(__dirname, '../src/network'),
-        // Support React Native Web
-        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-        'react-native': 'react-native-web',
-        // Allows for better profiling with ReactDevTools
-        ...(isEnvProductionProfile && {
-          'react-dom$': 'react-dom/profiling',
-          'scheduler/tracing': 'scheduler/tracing-profiling',
-        }),
-        ...(modules.webpackAliases || {}),
-      },
-      plugins: [
-        // Prevents users from importing files from outside of src/ (or node_modules/).
-        // This often causes confusion because we only process files within src/ with babel.
-        // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-        // please link the files into your node_modules/ and let module-resolution kick in.
-        // Make sure your source files are compiled, as they will not be processed in any way.
-        new ModuleScopePlugin(paths.appSrc, [
-          paths.appPackageJson,
-          reactRefreshRuntimeEntry,
-          reactRefreshWebpackPluginRuntimeEntry,
-          babelRuntimeEntry,
-          babelRuntimeEntryHelpers,
-          babelRuntimeRegenerator,
-        ]),
-      ],
-    },
-    module: {
-      strictExportPresence: true,
-      rules: [
-        // Handle node_modules packages that contain sourcemaps
-        shouldUseSourceMap && {
-          enforce: 'pre',
-          exclude: /@babel(?:\/|\\{1,2})runtime/,
-          test: /\.(js|mjs|jsx|ts|tsx|css)$/,
-          loader: require.resolve('source-map-loader'),
-        },
-        {
-          // "oneOf" will traverse all following loaders until one will
-          // match the requirements. When no loader matches it will fall
-          // back to the "file" loader at the end of the loader list.
-          oneOf: [
-            // TODO: Merge this config once `image/avif` is in the mime-db
-            // https://github.com/jshttp/mime-db
-            {
-              test: [/\.avif$/],
-              type: 'asset',
-              mimetype: 'image/avif',
-              parser: {
-                dataUrlCondition: {
-                  maxSize: imageInlineSizeLimit,
-                },
-              },
-            },
-            // "url" loader works like "file" loader except that it embeds assets
-            // smaller than specified limit in bytes as data URLs to avoid requests.
-            // A missing `test` is equivalent to a match.
-            {
-              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-              type: 'asset',
-              parser: {
-                dataUrlCondition: {
-                  maxSize: imageInlineSizeLimit,
-                },
-              },
-            },
-            {
-              test: /\.svg$/,
-              use: [
-                {
-                  loader: require.resolve('@svgr/webpack'),
-                  options: {
-                    prettier: false,
-                    svgo: false,
-                    svgoConfig: {
-                      plugins: [{ removeViewBox: false }],
-                    },
-                    titleProp: true,
-                    ref: true,
-                  },
-                },
-                {
-                  loader: require.resolve('file-loader'),
-                  options: {
-                    name: 'static/media/[name].[hash].[ext]',
-                  },
-                },
-              ],
-              issuer: {
-                and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
-              },
-            },
-            // Process application JS with Babel.
-            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
-            {
-              test: /\.(js|mjs|jsx|ts|tsx)$/,
-              include: paths.appSrc,
-              loader: require.resolve('babel-loader'),
-              options: {
-                customize: require.resolve(
-                  'babel-preset-react-app/webpack-overrides'
-                ),
-                presets: [
-                  [
-                    require.resolve('babel-preset-react-app'),
-                    {
-                      runtime: hasJsxRuntime ? 'automatic' : 'classic',
-                    },
-                  ],
-                ],
-                
-                plugins: [
-                  isEnvDevelopment &&
-                    shouldUseReactRefresh &&
-                    require.resolve('react-refresh/babel'),
-                ].filter(Boolean),
-                // This is a feature of `babel-loader` for webpack (not Babel itself).
-                // It enables caching results in ./node_modules/.cache/babel-loader/
-                // directory for faster rebuilds.
-                cacheDirectory: true,
-                // See #6846 for context on why cacheCompression is disabled
-                cacheCompression: false,
-                compact: isEnvProduction,
-              },
-            },
-            // Process any JS outside of the app with Babel.
-            // Unlike the application JS, we only compile the standard ES features.
-            {
-              test: /\.(js|mjs)$/,
-              exclude: /@babel(?:\/|\\{1,2})runtime/,
-              loader: require.resolve('babel-loader'),
-              options: {
-                babelrc: false,
-                configFile: false,
-                compact: false,
-                presets: [
-                  [
-                    require.resolve('babel-preset-react-app/dependencies'),
-                    { helpers: true },
-                  ],
-                ],
-                cacheDirectory: true,
-                // See #6846 for context on why cacheCompression is disabled
-                cacheCompression: false,
-                
-                // Babel sourcemaps are needed for debugging into node_modules
-                // code.  Without the options below, debuggers like VSCode
-                // show incorrect code and set breakpoints on the wrong lines.
-                sourceMaps: shouldUseSourceMap,
-                inputSourceMap: shouldUseSourceMap,
-              },
-            },
-            // "postcss" loader applies autoprefixer to our CSS.
-            // "css" loader resolves paths in CSS and adds assets as dependencies.
-            // "style" loader turns CSS into JS modules that inject <style> tags.
-            // In production, we use MiniCSSExtractPlugin to extract that CSS
-            // to a file, but in development "style" loader enables hot editing
-            // of CSS.
-            // By default we support CSS Modules with the extension .module.css
-            {
-              test: cssRegex,
-              exclude: cssModuleRegex,
-              use: getStyleLoaders({
-                importLoaders: 1,
-                sourceMap: isEnvProduction
-                  ? shouldUseSourceMap
-                  : isEnvDevelopment,
-                modules: {
-                  mode: 'icss',
-                },
-              }),
-              // Don't consider CSS imports dead code even if the
-              // containing package claims to have no side effects.
-              // Remove this when webpack adds a warning or an error for this.
-              // See https://github.com/webpack/webpack/issues/6571
-              sideEffects: true,
-            },
-            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
-            // using the extension .module.css
-            {
-              test: cssModuleRegex,
-              use: getStyleLoaders({
-                importLoaders: 1,
-                sourceMap: isEnvProduction
-                  ? shouldUseSourceMap
-                  : isEnvDevelopment,
-                modules: {
-                  mode: 'local',
-                  getLocalIdent: getCSSModuleLocalIdent,
-                },
-              }),
-            },
-            // Opt-in support for SASS (using .scss or .sass extensions).
-            // By default we support SASS Modules with the
-            // extensions .module.scss or .module.sass
-            {
-              test: sassRegex,
-              exclude: sassModuleRegex,
-              use: getStyleLoaders(
-                {
-                  importLoaders: 3,
-                  sourceMap: isEnvProduction
-                    ? shouldUseSourceMap
-                    : isEnvDevelopment,
-                  modules: {
-                    mode: 'icss',
-                  },
-                },
-                'sass-loader'
-              ),
-              // Don't consider CSS imports dead code even if the
-              // containing package claims to have no side effects.
-              // Remove this when webpack adds a warning or an error for this.
-              // See https://github.com/webpack/webpack/issues/6571
-              sideEffects: true,
-            },
-            // Adds support for CSS Modules, but using SASS
-            // using the extension .module.scss or .module.sass
-            {
-              test: sassModuleRegex,
-              use: getStyleLoaders(
-                {
-                  importLoaders: 3,
-                  sourceMap: isEnvProduction
-                    ? shouldUseSourceMap
-                    : isEnvDevelopment,
-                  modules: {
-                    mode: 'local',
-                    getLocalIdent: getCSSModuleLocalIdent,
-                  },
-                },
-                'sass-loader'
-              ),
-            },
-            // "file" loader makes sure those assets get served by WebpackDevServer.
-            // When you `import` an asset, you get its (virtual) filename.
-            // In production, they would get copied to the `build` folder.
-            // This loader doesn't use a "test" so it will catch all modules
-            // that fall through the other loaders.
-            {
-              // Exclude `js` files to keep "css" loader working as it injects
-              // its runtime that would otherwise be processed through "file" loader.
-              // Also exclude `html` and `json` extensions so they get processed
-              // by webpacks internal loaders.
-              exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-              type: 'asset/resource',
-            },
-            // ** STOP ** Are you adding a new loader?
-            // Make sure to add the new loader(s) before the "file" loader.
-          ],
-        },
-      ].filter(Boolean),
-    },
-    plugins: [
-      // Generates an `index.html` file with the <script> injected.
-      new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
-            inject: true,
-            template: paths.appHtml,
-          },
-          isEnvProduction
-            ? {
-                minify: {
-                  removeComments: true,
-                  collapseWhitespace: true,
-                  removeRedundantAttributes: true,
-                  useShortDoctype: true,
-                  removeEmptyAttributes: true,
-                  removeStyleLinkTypeAttributes: true,
-                  keepClosingSlash: true,
-                  minifyJS: true,
-                  minifyCSS: true,
-                  minifyURLs: true,
-                },
-              }
-            : undefined
-        )
-      ),
-      // Inlines the webpack runtime script. This script is too small to warrant
-      // a network request.
-      // https://github.com/facebook/create-react-app/issues/5358
-      isEnvProduction &&
-        shouldInlineRuntimeChunk &&
-        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
-      // Makes some environment variables available in index.html.
-      // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-      // It will be an empty string unless you specify "homepage"
-      // in `package.json`, in which case it will be the pathname of that URL.
-      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
-      // This gives some necessary context to module not found errors, such as
-      // the requesting resource.
-      new ModuleNotFoundPlugin(paths.appPath),
-      // Makes some environment variables available to the JS code, for example:
-      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
-      // It is absolutely essential that NODE_ENV is set to production
-      // during a production build.
-      // Otherwise React will be compiled in the very slow development mode.
-      new webpack.DefinePlugin(env.stringified),
-      // Experimental hot reloading for React .
-      // https://github.com/facebook/react/tree/main/packages/react-refresh
-      isEnvDevelopment &&
-        shouldUseReactRefresh &&
-        new ReactRefreshWebpackPlugin({
-          overlay: false,
-        }),
-      // Watcher doesn't work well if you mistype casing in a path so we use
-      // a plugin that prints an error when you attempt to do this.
-      // See https://github.com/facebook/create-react-app/issues/240
-      isEnvDevelopment && new CaseSensitivePathsPlugin(),
-      isEnvProduction &&
-        new MiniCssExtractPlugin({
-          // Options similar to the same options in webpackOptions.output
-          // both options are optional
-          filename: 'static/css/[name].[contenthash:8].css',
-          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
-        }),
-      // Generate an asset manifest file with the following content:
-      // - "files" key: Mapping of all asset filenames to their corresponding
-      //   output file so that tools can pick it up without having to parse
-      //   `index.html`
-      // - "entrypoints" key: Array of files which are included in `index.html`,
-      //   can be used to reconstruct the HTML if necessary
-      new WebpackManifestPlugin({
-        fileName: 'asset-manifest.json',
-        publicPath: paths.publicUrlOrPath,
-        generate: (seed, files, entrypoints) => {
-          const manifestFiles = files.reduce((manifest, file) => {
-            manifest[file.name] = file.path;
-            return manifest;
-          }, seed);
-          const entrypointFiles = entrypoints.main.filter(
-            fileName => !fileName.endsWith('.map')
-          );
-
-          return {
-            files: manifestFiles,
-            entrypoints: entrypointFiles,
-          };
-        },
-      }),
-      // Moment.js is an extremely popular library that bundles large locale files
-      // by default due to how webpack interprets its code. This is a practical
-      // solution that requires the user to opt into importing specific locales.
-      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-      // You can remove this if you don't use Moment.js:
-      new webpack.IgnorePlugin({
-        resourceRegExp: /^\.\/locale$/,
-        contextRegExp: /moment$/,
-      }),
-      // Generate a service worker script that will precache, and keep up to date,
-      // the HTML & assets that are part of the webpack build.
-      isEnvProduction &&
-        fs.existsSync(swSrc) &&
-        new WorkboxWebpackPlugin.InjectManifest({
-          swSrc,
-          dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
-          exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/],
-          // Bump up the default maximum size (2mb) that's precached,
-          // to make lazy-loading failure scenarios less likely.
-          // See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
-          maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
-        }),
-      // TypeScript type checking
-      useTypeScript &&
-        new ForkTsCheckerWebpackPlugin({
-          async: isEnvDevelopment,
-          typescript: {
-            typescriptPath: resolve.sync('typescript', {
-              basedir: paths.appNodeModules,
-            }),
-            configOverwrite: {
-              compilerOptions: {
-                sourceMap: isEnvProduction
-                  ? shouldUseSourceMap
-                  : isEnvDevelopment,
-                skipLibCheck: true,
-                inlineSourceMap: false,
-                declarationMap: false,
-                noEmit: true,
-                incremental: true,
-                tsBuildInfoFile: paths.appTsBuildInfoFile,
-              },
-            },
-            context: paths.appPath,
-            diagnosticOptions: {
-              syntactic: true,
-            },
-            mode: 'write-references',
-            // profile: true,
-          },
-          issue: {
-            // This one is specifically to match during CI tests,
-            // as micromatch doesn't match
-            // '../cra-template-typescript/template/src/App.tsx'
-            // otherwise.
-            include: [
-              { file: '../**/src/**/*.{ts,tsx}' },
-              { file: '**/src/**/*.{ts,tsx}' },
-            ],
-            exclude: [
-              { file: '**/src/**/__tests__/**' },
-              { file: '**/src/**/?(*.){spec|test}.*' },
-              { file: '**/src/setupProxy.*' },
-              { file: '**/src/setupTests.*' },
-            ],
-          },
-          logger: {
-            infrastructure: 'silent',
-          },
-        }),
-      !disableESLintPlugin &&
-        new ESLintPlugin({
-          // Plugin options
-          extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
-          formatter: require.resolve('react-dev-utils/eslintFormatter'),
-          eslintPath: require.resolve('eslint'),
-          failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
-          context: paths.appSrc,
-          cache: true,
-          cacheLocation: path.resolve(
-            paths.appNodeModules,
-            '.cache/.eslintcache'
-          ),
-          // ESLint class options
-          cwd: paths.appPath,
-          resolvePluginsRelativeTo: __dirname,
-          baseConfig: {
-            extends: [require.resolve('eslint-config-react-app/base')],
-            rules: {
-              ...(!hasJsxRuntime && {
-                'react/react-in-jsx-scope': 'error',
-              }),
-            },
-          },
-        }),
-    ].filter(Boolean),
-    // Turn off performance processing because we utilize
-    // our own hints via the FileSizeReporter
-    performance: false,
-  };
-};

config/webpack/persistentCache/createEnvironmentHash.js

@@ -1,9 +0,0 @@
-'use strict';
-const { createHash } = require('crypto');
-
-module.exports = env => {
-  const hash = createHash('md5');
-  hash.update(JSON.stringify(env));
-
-  return hash.digest('hex');
-};

config/webpackDevServer.config.js

@@ -1,127 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
-const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
-const ignoredFiles = require('react-dev-utils/ignoredFiles');
-const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
-const paths = require('./paths');
-const getHttpsConfig = require('./getHttpsConfig');
-
-const host = process.env.HOST || '0.0.0.0';
-const sockHost = process.env.WDS_SOCKET_HOST;
-const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
-const sockPort = process.env.WDS_SOCKET_PORT;
-
-module.exports = function (proxy, allowedHost) {
-  const disableFirewall =
-    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
-  return {
-    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
-    // websites from potentially accessing local content through DNS rebinding:
-    // https://github.com/webpack/webpack-dev-server/issues/887
-    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
-    // However, it made several existing use cases such as development in cloud
-    // environment or subdomains in development significantly more complicated:
-    // https://github.com/facebook/create-react-app/issues/2271
-    // https://github.com/facebook/create-react-app/issues/2233
-    // While we're investigating better solutions, for now we will take a
-    // compromise. Since our WDS configuration only serves files in the `public`
-    // folder we won't consider accessing them a vulnerability. However, if you
-    // use the `proxy` feature, it gets more dangerous because it can expose
-    // remote code execution vulnerabilities in backends like Django and Rails.
-    // So we will disable the host check normally, but enable it if you have
-    // specified the `proxy` setting. Finally, we let you override it if you
-    // really know what you're doing with a special environment variable.
-    // Note: ["localhost", ".localhost"] will support subdomains - but we might
-    // want to allow setting the allowedHosts manually for more complex setups
-    allowedHosts: disableFirewall ? 'all' : [allowedHost],
-    headers: {
-      'Access-Control-Allow-Origin': '*',
-      'Access-Control-Allow-Methods': '*',
-      'Access-Control-Allow-Headers': '*',
-    },
-    // Enable gzip compression of generated files.
-    compress: true,
-    static: {
-      // By default WebpackDevServer serves physical files from current directory
-      // in addition to all the virtual build products that it serves from memory.
-      // This is confusing because those files won’t automatically be available in
-      // production build folder unless we copy them. However, copying the whole
-      // project directory is dangerous because we may expose sensitive files.
-      // Instead, we establish a convention that only files in `public` directory
-      // get served. Our build script will copy `public` into the `build` folder.
-      // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-      // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-      // Note that we only recommend to use `public` folder as an escape hatch
-      // for files like `favicon.ico`, `manifest.json`, and libraries that are
-      // for some reason broken when imported through webpack. If you just want to
-      // use an image, put it in `src` and `import` it from JavaScript instead.
-      directory: paths.appPublic,
-      publicPath: [paths.publicUrlOrPath],
-      // By default files from `contentBase` will not trigger a page reload.
-      watch: {
-        // Reportedly, this avoids CPU overload on some systems.
-        // https://github.com/facebook/create-react-app/issues/293
-        // src/node_modules is not ignored to support absolute imports
-        // https://github.com/facebook/create-react-app/issues/1065
-        ignored: ignoredFiles(paths.appSrc),
-      },
-    },
-    client: {
-      webSocketURL: {
-        // Enable custom sockjs pathname for websocket connection to hot reloading server.
-        // Enable custom sockjs hostname, pathname and port for websocket connection
-        // to hot reloading server.
-        hostname: sockHost,
-        pathname: sockPath,
-        port: sockPort,
-      },
-      overlay: {
-        errors: true,
-        warnings: false,
-      },
-    },
-    devMiddleware: {
-      // It is important to tell WebpackDevServer to use the same "publicPath" path as
-      // we specified in the webpack config. When homepage is '.', default to serving
-      // from the root.
-      // remove last slash so user can land on `/test` instead of `/test/`
-      publicPath: paths.publicUrlOrPath.slice(0, -1),
-    },
-
-    https: getHttpsConfig(),
-    host,
-    historyApiFallback: {
-      // Paths with dots should still use the history fallback.
-      // See https://github.com/facebook/create-react-app/issues/387.
-      disableDotRule: true,
-      index: paths.publicUrlOrPath,
-    },
-    // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
-    proxy,
-    onBeforeSetupMiddleware(devServer) {
-      // Keep `evalSourceMapMiddleware`
-      // middlewares before `redirectServedPath` otherwise will not have any effect
-      // This lets us fetch source contents from webpack for the error overlay
-      devServer.app.use(evalSourceMapMiddleware(devServer));
-
-      if (fs.existsSync(paths.proxySetup)) {
-        // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(devServer.app);
-      }
-    },
-    onAfterSetupMiddleware(devServer) {
-      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
-      devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
-
-      // This service worker file is effectively a 'no-op' that will reset any
-      // previous service worker registered for the same host:port combination.
-      // We do this in development to avoid hitting the production cache if
-      // it used the same host and port.
-      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
-    },
-  };
-};

native-host/README.md

@@ -0,0 +1,25 @@
+# Yakit Browser Agent Native Host
+
+The Native Host is a small stdio-to-loopback-WebSocket transport. It does not store pairing credentials and does not execute browser commands itself. It forwards the normal Bridge v3 server challenge and extension authentication messages; Yak validates the origin-bound paired device signature and returns the engine identity, engine instance, connection, session, task, grant, protocol, and capability identity.
+
+Build from the Yak repository:
+
+```bash
+go build -o yakit-browser-agent-host ./common/browser/nativehostcmd
+```
+
+Install for Linux or macOS, using the ID shown by `chrome://extensions` for an unpacked build:
+
+```bash
+./native-host/install.sh \
+  --host-binary /absolute/path/to/yakit-browser-agent-host \
+  --extension-id YOUR_CHROME_EXTENSION_ID
+```
+
+On Windows, run PowerShell without administrator privileges:
+
+```powershell
+.\native-host\install.ps1 -HostBinary C:\path\yakit-browser-agent-host.exe -ExtensionId YOUR_CHROME_EXTENSION_ID
+```
+
+The installer registers Chrome, Chromium, Edge, Brave, and Firefox per-user locations. Chrome supplies its extension origin to the host. Firefox supplies the Native Host manifest path and add-on ID; the host verifies that ID against `allowed_extensions` before deriving its Bridge origin. It writes only the loopback endpoint to the user configuration directory. Run with `--uninstall` on POSIX or `-Uninstall` on Windows to remove the registrations; uninstall does not require an extension ID. When Chrome runs on Windows and development runs in WSL, build/install the Windows host with `install.ps1`; a Linux Native Host cannot be launched by Windows Chrome.

native-host/install.ps1

@@ -0,0 +1,71 @@
+param(
+  [string]$ExtensionId = "",
+  [string]$HostBinary = "yakit-browser-agent-host.exe",
+  [string]$FirefoxId = "[email protected]",
+  [string]$Endpoint = "ws://127.0.0.1:64333/extension",
+  [switch]$Uninstall
+)
+
+$ErrorActionPreference = "Stop"
+$Utf8NoBom = New-Object System.Text.UTF8Encoding($false)
+$HostName = "com.yaklang.browser_agent"
+$InstallRoot = Join-Path $env:LOCALAPPDATA "Yakit\BrowserAgent"
+$ConfigRoot = Join-Path $env:APPDATA "yakit"
+$ManifestPath = Join-Path $InstallRoot "$HostName.json"
+$RegistryTargets = @(
+  "HKCU:\Software\Google\Chrome\NativeMessagingHosts\$HostName",
+  "HKCU:\Software\Chromium\NativeMessagingHosts\$HostName",
+  "HKCU:\Software\Microsoft\Edge\NativeMessagingHosts\$HostName",
+  "HKCU:\Software\BraveSoftware\Brave-Browser\NativeMessagingHosts\$HostName",
+  "HKCU:\Software\Mozilla\NativeMessagingHosts\$HostName"
+)
+
+function Write-JsonFile {
+  param([Parameter(Mandatory = $true)][string]$Path, [Parameter(Mandatory = $true)][object]$Value)
+  [System.IO.File]::WriteAllText($Path, ($Value | ConvertTo-Json -Depth 4), $script:Utf8NoBom)
+}
+
+if ($Uninstall) {
+  foreach ($Target in $RegistryTargets) { Remove-Item $Target -Recurse -Force -ErrorAction SilentlyContinue }
+  Remove-Item $InstallRoot -Recurse -Force -ErrorAction SilentlyContinue
+  Remove-Item (Join-Path $ConfigRoot "browser-agent-native-host.json") -Force -ErrorAction SilentlyContinue
+  Write-Host "Removed $HostName."
+  exit 0
+}
+
+if ($Endpoint -notmatch '^wss?://(127\.0\.0\.1|localhost|\[::1\])(:[0-9]+)?/') {
+  throw "Endpoint must use ws:// or wss:// with an explicit loopback host."
+}
+if ([string]::IsNullOrWhiteSpace($ExtensionId)) {
+  throw "ExtensionId is required when installing the Native Host."
+}
+$ResolvedBinary = (Resolve-Path $HostBinary).Path
+New-Item $InstallRoot -ItemType Directory -Force | Out-Null
+New-Item $ConfigRoot -ItemType Directory -Force | Out-Null
+$InstalledBinary = Join-Path $InstallRoot "yakit-browser-agent-host.exe"
+Copy-Item $ResolvedBinary $InstalledBinary -Force
+Write-JsonFile -Path (Join-Path $ConfigRoot "browser-agent-native-host.json") -Value @{ endpoint = $Endpoint }
+
+Write-JsonFile -Path $ManifestPath -Value @{
+  name = $HostName
+  description = "Yakit Browser Agent Native Host"
+  path = $InstalledBinary
+  type = "stdio"
+  allowed_origins = @("chrome-extension://$ExtensionId/")
+}
+
+$FirefoxManifestPath = Join-Path $InstallRoot "$HostName.firefox.json"
+Write-JsonFile -Path $FirefoxManifestPath -Value @{
+  name = $HostName
+  description = "Yakit Browser Agent Native Host"
+  path = $InstalledBinary
+  type = "stdio"
+  allowed_extensions = @($FirefoxId)
+}
+
+foreach ($Target in $RegistryTargets) {
+  New-Item $Target -Force | Out-Null
+  $Value = if ($Target -like "*Mozilla*") { $FirefoxManifestPath } else { $ManifestPath }
+  Set-Item $Target -Value $Value
+}
+Write-Host "Installed $HostName at $InstalledBinary"

native-host/install.sh

@@ -0,0 +1,86 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+host_name="com.yaklang.browser_agent"
+host_binary=""
+extension_id=""
+firefox_id="[email protected]"
+endpoint="ws://127.0.0.1:64333/extension"
+uninstall=false
+
+usage() {
+  printf '%s\n' "Usage: $0 --extension-id ID [--host-binary PATH] [--endpoint WS_URL] [--firefox-id ID] [--uninstall]"
+}
+
+while [[ $# -gt 0 ]]; do
+  case "$1" in
+    --host-binary) host_binary="${2:-}"; shift 2 ;;
+    --extension-id) extension_id="${2:-}"; shift 2 ;;
+    --firefox-id) firefox_id="${2:-}"; shift 2 ;;
+    --endpoint) endpoint="${2:-}"; shift 2 ;;
+    --uninstall) uninstall=true; shift ;;
+    -h|--help) usage; exit 0 ;;
+    *) printf 'Unknown option: %s\n' "$1" >&2; usage >&2; exit 2 ;;
+  esac
+done
+
+case "$(uname -s)" in
+  Darwin)
+    install_root="$HOME/Library/Application Support/Yakit/BrowserAgent"
+    config_root="$HOME/Library/Application Support/yakit"
+    chrome_roots=(
+      "$HOME/Library/Application Support/Google/Chrome/NativeMessagingHosts"
+      "$HOME/Library/Application Support/Chromium/NativeMessagingHosts"
+      "$HOME/Library/Application Support/Microsoft Edge/NativeMessagingHosts"
+      "$HOME/Library/Application Support/BraveSoftware/Brave-Browser/NativeMessagingHosts"
+    )
+    firefox_root="$HOME/Library/Application Support/Mozilla/NativeMessagingHosts"
+    ;;
+  Linux)
+    install_root="${XDG_DATA_HOME:-$HOME/.local/share}/yakit/browser-agent"
+    config_root="${XDG_CONFIG_HOME:-$HOME/.config}/yakit"
+    chrome_roots=(
+      "$HOME/.config/google-chrome/NativeMessagingHosts"
+      "$HOME/.config/chromium/NativeMessagingHosts"
+      "$HOME/.config/microsoft-edge/NativeMessagingHosts"
+      "$HOME/.config/BraveSoftware/Brave-Browser/NativeMessagingHosts"
+    )
+    firefox_root="$HOME/.mozilla/native-messaging-hosts"
+    ;;
+  *) printf 'Unsupported operating system. Use install.ps1 on Windows.\n' >&2; exit 1 ;;
+esac
+
+manifest_name="$host_name.json"
+if [[ "$uninstall" == true ]]; then
+  for directory in "${chrome_roots[@]}" "$firefox_root"; do rm -f "$directory/$manifest_name"; done
+  rm -f "$install_root/yakit-browser-agent-host" "$config_root/browser-agent-native-host.json"
+  printf 'Removed %s manifests and host binary.\n' "$host_name"
+  exit 0
+fi
+
+if [[ -z "$extension_id" ]]; then printf '%s\n' '--extension-id is required for Chrome/Chromium.' >&2; exit 2; fi
+if [[ -z "$host_binary" ]]; then host_binary="$(command -v yakit-browser-agent-host || true)"; fi
+if [[ -z "$host_binary" || ! -x "$host_binary" ]]; then
+  printf '%s\n' 'Host binary not found. Build it with: go build -o yakit-browser-agent-host ./common/browser/nativehostcmd' >&2
+  exit 1
+fi
+if [[ ! "$endpoint" =~ ^wss?://(127\.0\.0\.1|localhost|\[::1\])(:[0-9]+)?/ ]]; then
+  printf '%s\n' 'Endpoint must use ws:// or wss:// with an explicit loopback host.' >&2
+  exit 2
+fi
+
+mkdir -p "$install_root" "$config_root"
+install -m 0755 "$host_binary" "$install_root/yakit-browser-agent-host"
+printf '{"endpoint":"%s"}\n' "$endpoint" > "$config_root/browser-agent-native-host.json"
+
+for directory in "${chrome_roots[@]}"; do
+  mkdir -p "$directory"
+  printf '{\n  "name": "%s",\n  "description": "Yakit Browser Agent Native Host",\n  "path": "%s",\n  "type": "stdio",\n  "allowed_origins": ["chrome-extension://%s/"]\n}\n' \
+    "$host_name" "$install_root/yakit-browser-agent-host" "$extension_id" > "$directory/$manifest_name"
+done
+
+mkdir -p "$firefox_root"
+printf '{\n  "name": "%s",\n  "description": "Yakit Browser Agent Native Host",\n  "path": "%s",\n  "type": "stdio",\n  "allowed_extensions": ["%s"]\n}\n' \
+  "$host_name" "$install_root/yakit-browser-agent-host" "$firefox_id" > "$firefox_root/$manifest_name"
+
+printf 'Installed %s at %s\n' "$host_name" "$install_root/yakit-browser-agent-host"

package.json

@@ -1,153 +1,67 @@
 {
   "name": "yakit-chrome-client",
-  "version": "0.1.0",
+  "description": "Yakit Browser Extension",
   "private": true,
-  "dependencies": {
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@svgr/webpack": "^8.1.0",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "ahooks": "^3.7.10",
-    "antd": "^5.17.2",
-    "babel-jest": "^27.4.2",
-    "babel-plugin-named-asset-import": "^0.3.8",
-    "babel-preset-react-app": "^10.0.1",
-    "bfj": "^7.0.2",
-    "browserslist": "^4.18.1",
-    "camelcase": "^6.2.1",
-    "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "classnames": "^2.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
-    "dotenv": "^10.0.0",
-    "dotenv-expand": "^5.1.0",
-    "eslint": "^8.3.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-webpack-plugin": "^3.1.1",
-    "file-loader": "^6.2.0",
-    "fs-extra": "^10.0.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.4.3",
-    "jest-resolve": "^27.4.2",
-    "jest-watch-typeahead": "^1.0.0",
-    "mini-css-extract-plugin": "^2.4.5",
-    "postcss": "^8.4.4",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-loader": "^6.2.1",
-    "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.0.1",
-    "prompts": "^2.4.2",
-    "react": "^18.2.0",
-    "react-app-polyfill": "^3.0.0",
-    "react-dev-utils": "^12.0.1",
-    "react-dom": "^18.2.0",
-    "react-refresh": "^0.11.0",
-    "resolve": "^1.20.0",
-    "resolve-url-loader": "^5.0.0",
-    "sass-loader": "^12.3.0",
-    "semver": "^7.3.5",
-    "source-map-loader": "^3.0.0",
-    "tailwindcss": "^3.0.2",
-    "terser-webpack-plugin": "^5.2.5",
-    "web-vitals": "^2.1.4",
-    "webpack-dev-server": "^4.6.0",
-    "webpack-manifest-plugin": "^4.0.2",
-    "workbox-webpack-plugin": "^6.4.1"
-  },
+  "version": "0.2.0",
+  "type": "module",
   "scripts": {
-    "start": "node scripts/start.js",
-    "build": "cross-env NODE_ENV=production node scripts/build.js",
-    "watch": "cross-env NODE_ENV=development webpack --config webpack.config.js",
-    "test": "node scripts/test.js"
+    "dev": "wxt",
+    "dev:wsl": "node scripts/dev-wsl.mjs",
+    "dev:firefox": "wxt -b firefox",
+    "build": "wxt build",
+    "build:store": "wxt build -b chrome --mode store",
+    "build:enterprise": "wxt build -b chrome --mode enterprise",
+    "build:firefox": "wxt build -b firefox",
+    "build:firefox:amo": "wxt build -b firefox --mv3 --mode store",
+    "zip": "wxt zip",
+    "zip:firefox": "wxt zip -b firefox",
+    "compile": "tsc --noEmit",
+    "test": "vitest run",
+    "audit:build": "node scripts/audit-build.mjs",
+    "verify:production": "pnpm test && pnpm compile && pnpm build:store && pnpm build:enterprise && pnpm build:firefox && pnpm build:firefox:amo && pnpm audit:build",
+    "verify:ui": "node scripts/verify-ui.mjs",
+    "verify:ui:store": "EXTENSION_PATH=.output/chrome-mv3-store node scripts/verify-ui.mjs",
+    "verify:ui:enterprise": "EXTENSION_PATH=.output/chrome-mv3-enterprise node scripts/verify-ui.mjs",
+    "verify:ui:enterprise:fallback": "ENABLE_USER_SCRIPTS=0 EXTENSION_PATH=.output/chrome-mv3-enterprise node scripts/verify-ui.mjs",
+    "verify:aesrsa": "node scripts/verify-aesrsa-transaction.mjs",
+    "verify:aesserver": "node scripts/verify-aesserver-transaction.mjs",
+    "verify:des": "node scripts/verify-des-transaction.mjs",
+    "verify:agent-contract:aes": "node scripts/verify-aes-agent-contract.mjs",
+    "verify:agent-contract:aesrsa": "node scripts/verify-aesrsa-transaction.mjs",
+    "verify:agent-contract:holdout": "AGENT_CONTRACT_HOLDOUT_ONLY=1 EXTENSION_PATH=.output/chrome-mv3-enterprise node scripts/verify-ui.mjs",
+    "verify:g4": "node scripts/verify-g4-protocols.mjs",
+    "verify:native": "node scripts/verify-native-host.mjs",
+    "postinstall": "wxt prepare"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "jest": {
-    "roots": [
-      "<rootDir>/src"
-    ],
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,ts,tsx}",
-      "!src/**/*.d.ts"
-    ],
-    "setupFiles": [
-      "react-app-polyfill/jsdom"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/setupTests.js"
-    ],
-    "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
-      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
-    ],
-    "testEnvironment": "jsdom",
-    "transform": {
-      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
-      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
-    },
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
-      "^.+\\.module\\.(css|sass|scss)$"
-    ],
-    "modulePaths": [],
-    "moduleNameMapper": {
-      "^react-native$": "react-native-web",
-      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
-    },
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "web.ts",
-      "ts",
-      "web.tsx",
-      "tsx",
-      "json",
-      "web.jsx",
-      "jsx",
-      "node"
-    ],
-    "watchPlugins": [
-      "jest-watch-typeahead/filename",
-      "jest-watch-typeahead/testname"
-    ],
-    "resetMocks": true
-  },
-  "babel": {
-    "presets": [
-      "react-app"
-    ]
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.3.0",
+    "@radix-ui/react-switch": "^1.3.3",
+    "@radix-ui/react-tabs": "^1.1.17",
+    "@radix-ui/react-tooltip": "^1.2.12",
+    "@valibot/to-json-schema": "1.7.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.24.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "uuid": "^14.0.1",
+    "valibot": "^1.4.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.1",
-    "@babel/preset-env": "^7.24.1",
-    "@babel/preset-react": "^7.24.1",
-    "@types/chrome": "^0.0.268",
-    "babel-loader": "^9.1.3",
-    "copy-webpack-plugin": "^12.0.2",
-    "cross-env": "^7.0.3",
-    "css-loader": "^6.10.0",
-    "html-webpack-plugin": "^5.6.0",
-    "style-loader": "^3.3.4",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.4.2",
-    "webpack": "^5.90.3",
-    "webpack-cli": "^5.1.4"
+    "@types/jsrsasign": "10.5.15",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@types/ws": "^8.18.1",
+    "@wxt-dev/module-react": "^1.2.2",
+    "jose": "6.2.3",
+    "jsencrypt": "3.5.4",
+    "jsrsasign": "11.1.3",
+    "node-forge": "1.4.0",
+    "playwright-core": "^1.61.1",
+    "sm-crypto": "0.4.0",
+    "typescript": "^7.0.2",
+    "vitest": "^4.1.10",
+    "ws": "^8.21.1",
+    "wxt": "^0.20.27"
   }
 }

public/background.js

@@ -1,88 +0,0 @@
-import {ActionType, WebSocketManager} from './socket.js';
-
-
-console.info("Chrome Extenstion Background is loaded")
-
-const websocketManager = new WebSocketManager();
-
-
-chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
-    console.log("msg", msg)
-    switch (msg.action) {
-        case ActionType.CONNECT:
-            console.info("Start to connect websocket")
-            const host = msg['host'] || "127.0.0.1"
-            const port = msg['port'] || 11212
-            websocketManager.connectWebsocket(`ws://${host}:${port}/?token=${"a"}`, port)
-            break;
-        case ActionType.DISCONNECT:
-            websocketManager.disconnectWebsocket();
-            break;
-        case ActionType.SET_PROXY:
-            chrome.proxy.settings.set({
-                value: {
-                    mode: "fixed_servers",
-                    rules: {
-                        singleProxy: {
-                            scheme: msg.scheme,
-                            host: msg.host,
-                            port: parseInt(`${msg.port}`)
-                        }
-                    }
-                },
-                scope: 'regular',
-            });
-            break;
-        case ActionType.CLEAR_PROXY:
-            chrome.proxy.settings.clear({})
-            break;
-        case ActionType.PROXY_STATUS:
-            chrome.proxy.settings.get({}, function (details) {
-                if (details.value && details.value.mode === "fixed_servers") {
-                    let proxyConfig = details.value.rules.singleProxy;
-                    chrome.runtime.sendMessage({
-                        enable: true,
-                        proxy: `${proxyConfig.scheme}://${proxyConfig.host}:${proxyConfig.port}`
-                    })
-                } else {
-                    chrome.runtime.sendMessage({enable: false, proxy: ""})
-                }
-            });
-            break;
-        case ActionType.INJECT_SCRIPT:
-            (async () => {
-                try {
-                    // 注入 JS 脚本
-                    await chrome.scripting.executeScript({
-                        target: {tabId: msg.tabId},
-                        files: ['content.js']
-                    });
-
-                    // 发送消息
-                    const response = await chrome.tabs.sendMessage(msg.tabId, {
-                        type: ActionType.INJECT_SCRIPT,
-                        value: msg.value
-                    });
-
-                    console.log("response", response);
-                    if (response && response.action === ActionType.TO_EXTENSION_PAGE) {
-                        await chrome.runtime.sendMessage(response);
-                    }
-                } catch (err) {
-                    console.error('Script or CSS injection failed:', err);
-                }
-            })();
-            break
-    }
-
-})
-
-const pageFunction = (code) => {
-    chrome.runtime.sendMessage({code}, response => {
-        if (response && response.success) {
-            console.log('Result:', response.result);
-        } else {
-            console.error('Error:', response.error);
-        }
-    });
-}

public/content.js

@@ -1,55 +0,0 @@
-(() => {
-    if (window.contentScriptInjected) {
-        return;
-    }
-    window.contentScriptInjected = true;
-    // 检查并插入 CSS 样式
-    const styleId = 'injected-css-style';
-    if (!document.getElementById(styleId)) {
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-            body {
-                border: 3px solid red;
-                position: relative; /* Ensure the body is positioned to allow the pseudo-element */
-            }
-            body::after {
-                content: "Injection successful";
-                display: block;
-                position: fixed;
-                top: 10px;
-                right: 10px;
-                background: green;
-                color: white;
-                padding: 5px 10px;
-                font-size: 16px;
-                z-index: 1000;
-            }
-        `;
-        document.head.appendChild(style);
-    }
-    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-        if (request.type === 'yakit_inject_script') {
-            const injectedScriptURL = chrome.runtime.getURL('inject.js');
-            const script = document.createElement('script');
-            script.src = injectedScriptURL;
-            script.onload = () => {
-                window.postMessage({type: request.value.mode, value: request.value}, '*');
-                script.remove();
-            };
-            (document.head || document.documentElement).appendChild(script);
-            window.addEventListener('message', function onMessage(event) {
-                if (event.source !== window || event.data.type !== 'FROM_INJECT_JS') {
-                    return;
-                }
-                window.removeEventListener('message', onMessage);
-                // Send the result to the background script
-                // chrome.runtime.sendMessage({ action: 'yakit_to_extension_page', result: event.data.result });
-                // 直接向向发送端返回结果
-                sendResponse({action: 'yakit_to_extension_page', result: event.data.result});
-            });
-            return true;
-        }
-    });
-})()
-

public/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <meta name="theme-color" content="#000000"/>
-    <title>React App</title>
-</head>
-<body>
-<div id="root"></div>
-</body>
-</html>

public/inject.js

@@ -1,37 +0,0 @@
-(() => {
-    if (window.injectedMessageListener) {
-        return;
-    }
-    window.injectedMessageListener = true;
-
-    window.addEventListener('message', function onMessage(event) {
-        if (event.source !== window) {
-            return;
-        }
-        let result
-        switch (event.data.type) {
-            case 'CONTENT_CALL_FUNCTION':
-                const fn_name = event.data.value.fn_name;
-                const args = event.data.value.args;
-                result = window[fn_name](args);
-                window.postMessage({type: 'FROM_INJECT_JS', result: result}, '*');
-                break;
-            case 'CONTENT_EVAL_CODE':
-                const code = event.data.value.code;
-                result = (() => {
-                    try {
-                        return eval(code);
-                    } catch (e) {
-                        // console.error("Error evaluating code:", e);
-                        return e.toString();
-                    }
-                })();
-                // console.log("CONTENT_EVAL_CODE result: ", result);
-                window.postMessage({type: 'FROM_INJECT_JS', result: result}, '*');
-                break;
-            default:
-                break;
-        }
-    });
-})();
-

public/managed-storage-schema.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "http://json-schema.org/draft-03/schema#",
+  "type": "object",
+  "properties": {
+    "bridgeTransport": {
+      "title": "Bridge transport",
+      "description": "Lock the extension to native or loopback WebSocket transport.",
+      "type": "string",
+      "enum": ["native", "websocket"]
+    },
+    "bridgeEndpoint": {
+      "title": "Bridge endpoint",
+      "description": "Managed loopback WebSocket endpoint.",
+      "type": "string"
+    },
+    "nativeHost": {
+      "title": "Native Messaging host",
+      "type": "string"
+    },
+    "autoConnect": {
+      "title": "Connect automatically",
+      "type": "boolean"
+    },
+    "disableWebSocket": {
+      "title": "Require Native Messaging",
+      "type": "boolean"
+    },
+    "floatingPanelEnabled": {
+      "title": "Enable the page floating panel",
+      "type": "boolean"
+    },
+    "maxGrantMinutes": {
+      "title": "Maximum grant duration in minutes",
+      "type": "integer",
+      "minimum": 5,
+      "maximum": 1440
+    },
+    "grantAllowedOrigins": {
+      "title": "Origins that may be shared with an Agent",
+      "type": "array",
+      "items": { "type": "string" }
+    },
+    "allowProgramEval": {
+      "title": "Allow program Eval grants",
+      "type": "boolean"
+    }
+  }
+}

public/manifest.json

@@ -1,43 +0,0 @@
-{
-  "manifest_version": 3,
-  "name": "Yakit Chrome Endpoint",
-  "version": "1.0",
-  "description": "A Endpoint for Yakit MITM or more",
-  "action": {
-    "default_popup": "index.html",
-    "default_icon": {
-      "16": "/images/icon16.png",
-      "48": "/images/icon48.png",
-      "128": "/images/icon128.png"
-    }
-  },
-  "background": {
-    "service_worker": "background.js",
-    "type": "module"
-  },
-  "permissions": [
-    "webNavigation",
-    "activeTab",
-    "scripting",
-    "tabs",
-    "proxy",
-    "storage",
-    "webRequest"
-  ],
-  "host_permissions": [
-    "<all_urls>"
-  ],
-
-  "web_accessible_resources": [
-    {
-      "resources": ["inject.js"],
-      "matches": ["<all_urls>"],
-      "use_dynamic_url": true
-    }
-  ],
-  "icons": {
-    "16": "/images/icon16.png",
-    "48": "/images/icon48.png",
-    "128": "/images/icon128.png"
-  }
-}

public/socket.js

@@ -1,83 +0,0 @@
-export const ActionType = {
-    CONNECT: 'connect',
-    DISCONNECT: 'disconnect',
-    STATUS: 'status',
-    PROXY_STATUS: 'proxy_status',
-    SET_PROXY: 'set_proxy',
-    CLEAR_PROXY: 'clear_proxy',
-    INJECT_SCRIPT: 'yakit_inject_script',
-    TO_EXTENSION_PAGE: "yakit_to_extension_page",
-}
-
-export class WebSocketManager {
-    constructor() {
-        this.socket = null;
-        this.intervalId = null;
-    }
-
-    connectWebsocket(url, port) {
-        this.disconnectWebsocket();
-        this.socket = new WebSocket(url);
-
-        this.socket.onopen = () => {
-            chrome.runtime.sendMessage({action: ActionType.STATUS, connected: true, port: port});
-            this.startHeartbeat();
-        };
-
-        this.socket.onmessage = (event) => {
-            this.handleMessage(event.data);
-        };
-
-        this.socket.onclose = () => {
-            chrome.runtime.sendMessage({action: ActionType.STATUS, connected: false});
-        };
-
-        this.socket.onerror = (error) => {
-            console.error("WebSocket Error:", error);
-        };
-    }
-
-    disconnectWebsocket() {
-        if (this.socket) {
-            try {
-                this.socket.close();
-                chrome.runtime.sendMessage({action: ActionType.STATUS, connected: false});
-            } catch (e) {
-                console.error("Error closing websocket:", e);
-            }
-            this.socket = null;
-            this.stopHeartbeat();
-        }
-    }
-
-    startHeartbeat() {
-        this.intervalId = setInterval(() => this.heartbeat(), 3000);
-    }
-
-    stopHeartbeat() {
-        if (this.intervalId) {
-            clearInterval(this.intervalId);
-            this.intervalId = null;
-        }
-    }
-
-    heartbeat() {
-        if (this.isConnected()) {
-            try {
-                this.socket.send(JSON.stringify({"type": "heartbeat"}));
-            } catch (e) {
-                console.error("Error sending heartbeat:", e);
-            }
-        } else {
-            this.disconnectWebsocket();
-        }
-    }
-
-    isConnected() {
-        return this.socket && this.socket.readyState === WebSocket.OPEN;
-    }
-
-    handleMessage(message) {
-        console.log("message", message)
-    }
-}

scripts/audit-build.mjs

@@ -0,0 +1,141 @@
+import { access, readFile, stat } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
+import { gzipSync } from 'node:zlib';
+
+const root = resolve(import.meta.dirname, '..');
+const MIB = 1024 * 1024;
+const TOTAL_PACKAGE_BUDGET = Math.floor(1.25 * MIB);
+// Bundle sizes remain visible in the audit report, but are advisory. Product
+// acceptance is based on runtime behavior, security boundaries and measured
+// responsiveness rather than a fixed package-size gate.
+const BRIDGE_BACKGROUND_BUDGET = 204 * 1024;
+const BRIDGE_BACKGROUND_GZIP_BUDGET = 60 * 1024;
+const ENTERPRISE_BACKGROUND_GZIP_BUDGET = 61 * 1024;
+// Recorder, callable registry and Pipeline runtime are installed only for an
+// explicitly selected document. Keep their budget separate from the always-on
+// Service Worker so moving work out of startup code remains measurable.
+const MAIN_WORLD_PIPELINE_BUDGET = 36 * 1024;
+const FIXTURE_LEAK_SIGNATURES = [
+  '127.0.0.1:82',
+  '192.168.3.3:8080',
+  '/encrypt/aes.php',
+  '/encrypt/rsa.php',
+  '/semantic-adapter-submit',
+  '/opaque-worker-submit',
+  'recorder-webcrypto-envelope-474',
+  'worker-boundary-holdout-811',
+  'semantic-sm-plaintext-821',
+  'semantic-forge-plaintext-822',
+  'module-recording-',
+  '"password":"123456"',
+];
+
+const targets = [
+  { name: 'store', dir: '.output/chrome-mv3-store', contentBudget: 12 * 1024, backgroundBudget: BRIDGE_BACKGROUND_BUDGET, backgroundGzipBudget: BRIDGE_BACKGROUND_GZIP_BUDGET, totalBudget: TOTAL_PACKAGE_BUDGET, directEval: false, userScripts: true, execution: 'user-scripts' },
+  { name: 'enterprise', dir: '.output/chrome-mv3-enterprise', contentBudget: 16 * 1024, backgroundBudget: BRIDGE_BACKGROUND_BUDGET, backgroundGzipBudget: ENTERPRISE_BACKGROUND_GZIP_BUDGET, totalBudget: TOTAL_PACKAGE_BUDGET, directEval: true, userScripts: true, execution: 'user-scripts+injected-fallback' },
+  { name: 'firefox', dir: '.output/firefox-mv2', contentBudget: 16 * 1024, backgroundBudget: BRIDGE_BACKGROUND_BUDGET, backgroundGzipBudget: BRIDGE_BACKGROUND_GZIP_BUDGET, totalBudget: TOTAL_PACKAGE_BUDGET, directEval: true, userScripts: false, execution: 'injected-bridge' },
+  { name: 'firefox-amo', dir: '.output/firefox-mv3-store', contentBudget: 12 * 1024, backgroundBudget: BRIDGE_BACKGROUND_BUDGET, backgroundGzipBudget: BRIDGE_BACKGROUND_GZIP_BUDGET, totalBudget: TOTAL_PACKAGE_BUDGET, directEval: false, userScripts: false, execution: 'invoke-only' },
+];
+
+async function fileSize(path) {
+  return (await stat(path)).size;
+}
+
+async function exists(path) {
+  try {
+    await access(path);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function assert(condition, message) {
+  if (!condition) throw new Error(message);
+}
+
+async function directorySize(path) {
+  const { readdir } = await import('node:fs/promises');
+  let total = 0;
+  for (const entry of await readdir(path, { withFileTypes: true })) {
+    const child = join(path, entry.name);
+    total += entry.isDirectory() ? await directorySize(child) : await fileSize(child);
+  }
+  return total;
+}
+
+async function assertNoFixtureLeakage(path, targetName) {
+  const { readdir } = await import('node:fs/promises');
+  const findings = [];
+  async function visit(directory) {
+    for (const entry of await readdir(directory, { withFileTypes: true })) {
+      const child = join(directory, entry.name);
+      if (entry.isDirectory()) {
+        await visit(child);
+        continue;
+      }
+      if (!/\.(?:css|html|js|json|map)$/i.test(entry.name)) continue;
+      const source = await readFile(child, 'utf8');
+      for (const signature of FIXTURE_LEAK_SIGNATURES) {
+        if (source.includes(signature)) findings.push(`${child.slice(path.length + 1)} -> ${signature}`);
+      }
+    }
+  }
+  await visit(path);
+  assert(findings.length === 0, `${targetName} 生产产物混入靶场 fixture：${findings.join(', ')}`);
+}
+
+const report = [];
+for (const target of targets) {
+  const isFirefox = target.name.startsWith('firefox');
+  const output = resolve(root, target.dir);
+  assert(await exists(output), `${target.name} 产物不存在，请先运行对应构建命令`);
+  await assertNoFixtureLeakage(output, target.name);
+  const manifest = JSON.parse(await readFile(join(output, 'manifest.json'), 'utf8'));
+  const contentBytes = await fileSize(join(output, 'content-scripts/agent.js'));
+  const backgroundSource = await readFile(join(output, 'background.js'));
+  const backgroundBytes = backgroundSource.byteLength;
+  const backgroundGzipBytes = gzipSync(backgroundSource).byteLength;
+  const recorderBytes = await fileSize(join(output, 'page-recorder-main-world.js'));
+  const totalBytes = await directorySize(output);
+  const sizeAdvisories = [];
+  const directEvalExists = await exists(join(output, 'page-main-world.js'));
+  const resources = (manifest.web_accessible_resources || []).flatMap((entry) => typeof entry === 'string' ? [entry] : entry.resources || []);
+  const dynamicResourceGroup = (manifest.web_accessible_resources || []).find((entry) => typeof entry !== 'string' && entry.resources?.includes('floating.html'));
+
+  if (contentBytes > target.contentBudget) sizeAdvisories.push(`content script ${contentBytes}B > ${target.contentBudget}B reference`);
+  if (backgroundBytes > target.backgroundBudget) sizeAdvisories.push(`background ${backgroundBytes}B > ${target.backgroundBudget}B reference`);
+  if (backgroundGzipBytes > target.backgroundGzipBudget) sizeAdvisories.push(`background gzip ${backgroundGzipBytes}B > ${target.backgroundGzipBudget}B reference`);
+  if (recorderBytes > MAIN_WORLD_PIPELINE_BUDGET) sizeAdvisories.push(`MAIN-world runtime ${recorderBytes}B > ${MAIN_WORLD_PIPELINE_BUDGET}B reference`);
+  if (totalBytes > target.totalBudget) sizeAdvisories.push(`package ${totalBytes}B > ${target.totalBudget}B reference`);
+  assert(directEvalExists === target.directEval, `${target.name} page-main-world.js 存在状态不符合构建策略`);
+  assert(resources.includes('page-main-world.js') === target.directEval, `${target.name} page-main-world.js 暴露状态不符合构建策略`);
+  assert((manifest.permissions || []).includes('userScripts') === target.userScripts, `${target.name} userScripts 权限不符合构建策略`);
+  if (target.name === 'store' || target.name === 'firefox-amo') {
+    assert(!backgroundSource.toString().includes('(0,eval)'), `${target.name} background 不得包含间接 Eval 实现`);
+  }
+  assert((manifest.permissions || []).includes('webRequest'), `${target.name} 缺少网络捕获所需 webRequest 权限`);
+  assert((manifest.permissions || []).includes('webNavigation'), `${target.name} 缺少 frame/document 生命周期所需 webNavigation 权限`);
+  assert((manifest.permissions || []).includes('debugger') === !isFirefox, `${target.name} debugger 权限不符合 Chromium-only 深度捕获策略`);
+  assert(!(manifest.permissions || []).includes('activeTab'), `${target.name} 不应申请未使用的 activeTab 权限`);
+  assert(!(manifest.permissions || []).includes('nativeMessaging') && (manifest.optional_permissions || []).includes('nativeMessaging'), `${target.name} Native Messaging 必须按需授权`);
+  assert((manifest.permissions || []).includes(isFirefox ? 'webRequestBlocking' : 'webRequestAuthProvider'), `${target.name} 缺少代理认证权限`);
+  assert(manifest.storage?.managed_schema === 'managed-storage-schema.json', `${target.name} 缺少企业 managed storage schema`);
+  assert(await exists(join(output, 'managed-storage-schema.json')), `${target.name} managed storage schema 未打包`);
+  if (!isFirefox) assert(!(manifest.permissions || []).includes('webRequestBlocking'), `${target.name} 不应申请阻断或修改网络请求的 webRequestBlocking 权限`);
+  assert(resources.includes('floating.html'), `${target.name} 没有公开按需浮动页`);
+  if (manifest.manifest_version === 3) assert(dynamicResourceGroup?.use_dynamic_url === true, `${target.name} 浮动页必须使用动态资源 URL`);
+
+  report.push({
+    target: target.name,
+    contentScriptKiB: Number((contentBytes / 1024).toFixed(2)),
+    backgroundKiB: Number((backgroundBytes / 1024).toFixed(2)),
+    backgroundGzipKiB: Number((backgroundGzipBytes / 1024).toFixed(2)),
+    recorderKiB: Number((recorderBytes / 1024).toFixed(2)),
+    totalKiB: Number((totalBytes / 1024).toFixed(2)),
+    sizeAdvisories,
+    execution: target.execution,
+  });
+}
+
+console.log(JSON.stringify(report, null, 2));

scripts/browser-agent-contract-harness.mjs

@@ -0,0 +1,105 @@
+import {mkdtemp, readFile, rm} from 'node:fs/promises'
+import {tmpdir} from 'node:os'
+import {join, resolve} from 'node:path'
+import {chromium} from 'playwright-core'
+import {resolveChromiumPath} from './resolve-chromium.mjs'
+
+const root = resolve(import.meta.dirname, '..')
+
+export async function extensionRequest(page, action, payload = {}) {
+  return page.evaluate(async ({requestAction, requestPayload}) => {
+    const response = await chrome.runtime.sendMessage({action: requestAction, payload: requestPayload})
+    if (!response?.ok) throw new Error(response?.error?.message || response?.error || requestAction)
+    return response.data
+  }, {requestAction: action, requestPayload: payload})
+}
+
+export async function waitFor(page, action, payload, predicate, timeoutMs = 15_000) {
+  const deadline = Date.now() + timeoutMs
+  let value
+  while (Date.now() < deadline) {
+    value = await extensionRequest(page, action, payload)
+    if (predicate(value)) return value
+    await page.waitForTimeout(150)
+  }
+  throw new Error(`Timed out waiting for ${action}: ${JSON.stringify(value)}`)
+}
+
+export async function launchBrowserAgentContractHarness({
+  profilePrefix,
+  targetURL,
+  extensionPath = resolve(root, process.env.EXTENSION_PATH || '.output/chrome-mv3-enterprise'),
+}) {
+  const manifest = JSON.parse(await readFile(resolve(extensionPath, 'manifest.json'), 'utf8'))
+  const executablePath = await resolveChromiumPath()
+  const userDataDir = await mkdtemp(join(tmpdir(), profilePrefix))
+  const context = await chromium.launchPersistentContext(userDataDir, {
+    executablePath,
+    headless: true,
+    viewport: {width: 1280, height: 760},
+    args: [
+      `--disable-extensions-except=${extensionPath}`,
+      `--load-extension=${extensionPath}`,
+      '--no-first-run',
+      '--no-default-browser-check',
+    ],
+  })
+  try {
+    let serviceWorker = context.serviceWorkers()[0]
+    if (!serviceWorker) serviceWorker = await context.waitForEvent('serviceworker', {timeout: 15_000})
+    const extensionId = new URL(serviceWorker.url()).host
+
+    if (manifest.permissions?.includes('userScripts')) {
+      const extensionsPage = await context.newPage()
+      await extensionsPage.goto(`chrome://extensions/?id=${extensionId}`)
+      const toggle = extensionsPage.locator('#allow-user-scripts cr-toggle')
+      await toggle.waitFor({state: 'visible', timeout: 10_000})
+      if (!await toggle.evaluate((element) => Boolean(element.checked))) await toggle.click()
+      await extensionsPage.close()
+    }
+
+    const targetPage = await context.newPage()
+    targetPage.on('dialog', (dialog) => void dialog.dismiss())
+    await targetPage.goto(targetURL)
+
+    const controlPage = await context.newPage()
+    await controlPage.goto(`chrome-extension://${extensionId}/options.html`)
+    const tabId = await controlPage.evaluate(async (url) => {
+      const tabs = await chrome.tabs.query({})
+      return tabs.find((tab) => tab.url === url)?.id
+    }, targetPage.url())
+    if (!tabId) throw new Error(`Could not resolve target tab ${targetPage.url()}`)
+
+    return {
+      context,
+      controlPage,
+      extensionId,
+      tabId,
+      targetPage,
+      async close() {
+        await context.close().catch(() => undefined)
+        await rm(userDataDir, {recursive: true, force: true})
+      },
+    }
+  } catch (error) {
+    await context.close().catch(() => undefined)
+    await rm(userDataDir, {recursive: true, force: true})
+    throw error
+  }
+}
+
+export function transformedFetchOptions(execution, originalHeaders) {
+  const headers = new Map(originalHeaders.map((header) => [header.name.toLowerCase(), {
+    name: header.name,
+    value: header.value,
+  }]))
+  for (const name of execution.removeHeaders || []) headers.delete(name.toLowerCase())
+  for (const header of execution.setHeaders || []) {
+    headers.set(header.name.toLowerCase(), {name: header.name, value: header.value})
+  }
+  return {
+    method: 'POST',
+    headers: Object.fromEntries([...headers.values()].map((header) => [header.name, header.value])),
+    body: Buffer.from(execution.bodyBase64, 'base64'),
+  }
+}

scripts/build.js

@@ -1,217 +0,0 @@
-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'production';
-process.env.NODE_ENV = 'production';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-const path = require('path');
-const chalk = require('react-dev-utils/chalk');
-const fs = require('fs-extra');
-const bfj = require('bfj');
-const webpack = require('webpack');
-const configFactory = require('../config/webpack.config');
-const paths = require('../config/paths');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
-const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
-const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
-const printBuildError = require('react-dev-utils/printBuildError');
-
-const measureFileSizesBeforeBuild =
-  FileSizeReporter.measureFileSizesBeforeBuild;
-const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
-const useYarn = fs.existsSync(paths.yarnLockFile);
-
-// These sizes are pretty large. We'll warn for bundles exceeding them.
-const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
-const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
-
-const isInteractive = process.stdout.isTTY;
-
-// Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
-  process.exit(1);
-}
-
-const argv = process.argv.slice(2);
-const writeStatsJson = argv.indexOf('--stats') !== -1;
-
-// Generate configuration
-const config = configFactory('production');
-
-// We require that you explicitly set browsers and do not fall back to
-// browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
-checkBrowsers(paths.appPath, isInteractive)
-  .then(() => {
-    // First, read the current file sizes in build directory.
-    // This lets us display how much they changed later.
-    return measureFileSizesBeforeBuild(paths.appBuild);
-  })
-  .then(previousFileSizes => {
-    // Remove all content but keep the directory so that
-    // if you're in it, you don't end up in Trash
-    fs.emptyDirSync(paths.appBuild);
-    // Merge with the public folder
-    copyPublicFolder();
-    // Start the webpack build
-    return build(previousFileSizes);
-  })
-  .then(
-    ({ stats, previousFileSizes, warnings }) => {
-      if (warnings.length) {
-        console.log(chalk.yellow('Compiled with warnings.\n'));
-        console.log(warnings.join('\n\n'));
-        console.log(
-          '\nSearch for the ' +
-            chalk.underline(chalk.yellow('keywords')) +
-            ' to learn more about each warning.'
-        );
-        console.log(
-          'To ignore, add ' +
-            chalk.cyan('// eslint-disable-next-line') +
-            ' to the line before.\n'
-        );
-      } else {
-        console.log(chalk.green('Compiled successfully.\n'));
-      }
-
-      console.log('File sizes after gzip:\n');
-      printFileSizesAfterBuild(
-        stats,
-        previousFileSizes,
-        paths.appBuild,
-        WARN_AFTER_BUNDLE_GZIP_SIZE,
-        WARN_AFTER_CHUNK_GZIP_SIZE
-      );
-      console.log();
-
-      const appPackage = require(paths.appPackageJson);
-      const publicUrl = paths.publicUrlOrPath;
-      const publicPath = config.output.publicPath;
-      const buildFolder = path.relative(process.cwd(), paths.appBuild);
-      printHostingInstructions(
-        appPackage,
-        publicUrl,
-        publicPath,
-        buildFolder,
-        useYarn
-      );
-    },
-    err => {
-      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
-      if (tscCompileOnError) {
-        console.log(
-          chalk.yellow(
-            'Compiled with the following type errors (you may want to check these before deploying your app):\n'
-          )
-        );
-        printBuildError(err);
-      } else {
-        console.log(chalk.red('Failed to compile.\n'));
-        printBuildError(err);
-        process.exit(1);
-      }
-    }
-  )
-  .catch(err => {
-    if (err && err.message) {
-      console.log(err.message);
-    }
-    process.exit(1);
-  });
-
-// Create the production build and print the deployment instructions.
-function build(previousFileSizes) {
-  console.log('Creating an optimized production build...');
-
-  const compiler = webpack(config);
-  return new Promise((resolve, reject) => {
-    compiler.run((err, stats) => {
-      let messages;
-      if (err) {
-        if (!err.message) {
-          return reject(err);
-        }
-
-        let errMessage = err.message;
-
-        // Add additional information for postcss errors
-        if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
-          errMessage +=
-            '\nCompileError: Begins at CSS selector ' +
-            err['postcssNode'].selector;
-        }
-
-        messages = formatWebpackMessages({
-          errors: [errMessage],
-          warnings: [],
-        });
-      } else {
-        messages = formatWebpackMessages(
-          stats.toJson({ all: false, warnings: true, errors: true })
-        );
-      }
-      if (messages.errors.length) {
-        // Only keep the first error. Others are often indicative
-        // of the same problem, but confuse the reader with noise.
-        if (messages.errors.length > 1) {
-          messages.errors.length = 1;
-        }
-        return reject(new Error(messages.errors.join('\n\n')));
-      }
-      if (
-        process.env.CI &&
-        (typeof process.env.CI !== 'string' ||
-          process.env.CI.toLowerCase() !== 'false') &&
-        messages.warnings.length
-      ) {
-        // Ignore sourcemap warnings in CI builds. See #8227 for more info.
-        const filteredWarnings = messages.warnings.filter(
-          w => !/Failed to parse source map/.test(w)
-        );
-        if (filteredWarnings.length) {
-          console.log(
-            chalk.yellow(
-              '\nTreating warnings as errors because process.env.CI = true.\n' +
-                'Most CI servers set it automatically.\n'
-            )
-          );
-          return reject(new Error(filteredWarnings.join('\n\n')));
-        }
-      }
-
-      const resolveArgs = {
-        stats,
-        previousFileSizes,
-        warnings: messages.warnings,
-      };
-
-      if (writeStatsJson) {
-        return bfj
-          .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
-          .then(() => resolve(resolveArgs))
-          .catch(error => reject(new Error(error)));
-      }
-
-      return resolve(resolveArgs);
-    });
-  });
-}
-
-function copyPublicFolder() {
-  fs.copySync(paths.appPublic, paths.appBuild, {
-    dereference: true,
-    filter: file => file !== paths.appHtml,
-  });
-}

scripts/dev-wsl.mjs

@@ -0,0 +1,81 @@
+import { createInterface } from 'node:readline';
+import { spawn } from 'node:child_process';
+import { access, mkdir, realpath } from 'node:fs/promises';
+import { constants } from 'node:fs';
+import { resolve } from 'node:path';
+
+const root = process.cwd();
+const output = resolve(root, '.output/chrome-mv3-dev');
+const manifest = resolve(output, 'manifest.json');
+const profile = resolve(root, '.wxt/chrome-wsl-profile');
+const chrome = process.env.CHROME_PATH || '/usr/bin/google-chrome';
+
+await access(chrome, constants.X_OK).catch(() => {
+  throw new Error(`Chrome is not executable: ${chrome}. Set CHROME_PATH to override it.`);
+});
+await mkdir(profile, { recursive: true });
+const resolvedChrome = await realpath(chrome);
+const isBrandedChrome = resolvedChrome.startsWith('/opt/google/chrome/');
+
+const wxt = spawn(process.execPath, [resolve(root, 'node_modules/wxt/bin/wxt.mjs')], {
+  cwd: root,
+  env: process.env,
+  stdio: ['inherit', 'pipe', 'pipe'],
+});
+
+const pipeLines = (stream, destination) => {
+  const reader = createInterface({ input: stream });
+  reader.on('line', (line) => {
+    if (!line.includes('Cannot open browser when using WSL')) destination.write(`${line}\n`);
+  });
+};
+pipeLines(wxt.stdout, process.stdout);
+pipeLines(wxt.stderr, process.stderr);
+
+const waitForManifest = async () => {
+  for (let attempt = 0; attempt < 200; attempt += 1) {
+    if (wxt.exitCode !== null) throw new Error(`WXT exited before producing ${manifest}`);
+    try {
+      await access(manifest, constants.R_OK);
+      return;
+    } catch {
+      await new Promise((resolveWait) => setTimeout(resolveWait, 100));
+    }
+  }
+  throw new Error(`Timed out waiting for ${manifest}`);
+};
+
+let chromeProcess;
+const shutdown = async (signal) => {
+  if (chromeProcess?.exitCode === null) chromeProcess.kill(signal);
+  if (wxt.exitCode === null) wxt.kill(signal);
+};
+process.once('SIGINT', () => void shutdown('SIGINT'));
+process.once('SIGTERM', () => void shutdown('SIGTERM'));
+
+try {
+  await waitForManifest();
+  const chromeArgs = [
+    `--user-data-dir=${profile}`,
+    '--disable-gpu',
+    '--no-first-run',
+    '--no-default-browser-check',
+  ];
+  if (!isBrandedChrome || process.env.WXT_AUTO_LOAD_EXTENSION === '1') {
+    chromeArgs.push(`--disable-extensions-except=${output}`, `--load-extension=${output}`, 'about:blank');
+  } else {
+    chromeArgs.push('chrome://extensions');
+  }
+  chromeProcess = spawn(chrome, chromeArgs, { cwd: root, env: process.env, stdio: 'inherit' });
+  if (isBrandedChrome && process.env.WXT_AUTO_LOAD_EXTENSION !== '1') {
+    process.stdout.write(`\nOpened official Chrome with the persistent WXT profile.\nChrome 137+ ignores --load-extension in branded builds. On first run, enable Developer mode and load:\n${output}\nProfile: ${profile}\n`);
+  } else {
+    process.stdout.write(`\nOpened ${chrome} with the WXT development extension.\nProfile: ${profile}\n`);
+  }
+} catch (error) {
+  await shutdown('SIGTERM');
+  throw error;
+}
+
+await new Promise((resolveExit) => wxt.once('exit', resolveExit));
+if (chromeProcess?.exitCode === null) chromeProcess.kill('SIGTERM');

scripts/resolve-chromium.mjs

@@ -0,0 +1,44 @@
+import { constants } from 'node:fs';
+import { access, readdir } from 'node:fs/promises';
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+import { spawnSync } from 'node:child_process';
+
+async function executable(path) {
+  if (!path) return false;
+  try {
+    await access(path, constants.X_OK);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export async function resolveChromiumPath() {
+  for (const candidate of [process.env.CHROMIUM_PATH, process.env.CHROME_PATH]) {
+    if (await executable(candidate)) return candidate;
+  }
+
+  const cacheRoot = process.env.PLAYWRIGHT_BROWSERS_PATH || join(homedir(), '.cache', 'ms-playwright');
+  let entries = [];
+  try {
+    entries = (await readdir(cacheRoot, { withFileTypes: true }))
+      .filter((entry) => entry.isDirectory() && entry.name.startsWith('chromium-'))
+      .map((entry) => entry.name)
+      .sort((left, right) => Number(right.slice(9)) - Number(left.slice(9)));
+  } catch {
+    // The final error below lists the supported configuration options.
+  }
+  for (const entry of entries) {
+    for (const relative of ['chrome-linux64/chrome', 'chrome-linux/chrome']) {
+      const candidate = join(cacheRoot, entry, relative);
+      if (await executable(candidate)) return candidate;
+    }
+  }
+
+  for (const command of ['google-chrome-for-testing', 'chromium', 'chromium-browser']) {
+    const resolved = spawnSync('which', [command], { encoding: 'utf8' }).stdout.trim();
+    if (await executable(resolved)) return resolved;
+  }
+  throw new Error('Unpacked-capable Chromium not found. Set CHROMIUM_PATH or install Chromium/Playwright Chromium.');
+}

scripts/start.js

@@ -1,154 +0,0 @@
-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'development';
-process.env.NODE_ENV = 'development';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-const fs = require('fs');
-const chalk = require('react-dev-utils/chalk');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const clearConsole = require('react-dev-utils/clearConsole');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-const {
-  choosePort,
-  createCompiler,
-  prepareProxy,
-  prepareUrls,
-} = require('react-dev-utils/WebpackDevServerUtils');
-const openBrowser = require('react-dev-utils/openBrowser');
-const semver = require('semver');
-const paths = require('../config/paths');
-const configFactory = require('../config/webpack.config');
-const createDevServerConfig = require('../config/webpackDevServer.config');
-const getClientEnvironment = require('../config/env');
-const react = require(require.resolve('react', { paths: [paths.appPath] }));
-
-const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
-const useYarn = fs.existsSync(paths.yarnLockFile);
-const isInteractive = process.stdout.isTTY;
-
-// Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
-  process.exit(1);
-}
-
-// Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
-const HOST = process.env.HOST || '0.0.0.0';
-
-if (process.env.HOST) {
-  console.log(
-    chalk.cyan(
-      `Attempting to bind to HOST environment variable: ${chalk.yellow(
-        chalk.bold(process.env.HOST)
-      )}`
-    )
-  );
-  console.log(
-    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
-  );
-  console.log(
-    `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
-  );
-  console.log();
-}
-
-// We require that you explicitly set browsers and do not fall back to
-// browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
-checkBrowsers(paths.appPath, isInteractive)
-  .then(() => {
-    // We attempt to use the default port but if it is busy, we offer the user to
-    // run on a different port. `choosePort()` Promise resolves to the next free port.
-    return choosePort(HOST, DEFAULT_PORT);
-  })
-  .then(port => {
-    if (port == null) {
-      // We have not found a port.
-      return;
-    }
-
-    const config = configFactory('development');
-    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-    const appName = require(paths.appPackageJson).name;
-
-    const useTypeScript = fs.existsSync(paths.appTsConfig);
-    const urls = prepareUrls(
-      protocol,
-      HOST,
-      port,
-      paths.publicUrlOrPath.slice(0, -1)
-    );
-    // Create a webpack compiler that is configured with custom messages.
-    const compiler = createCompiler({
-      appName,
-      config,
-      urls,
-      useYarn,
-      useTypeScript,
-      webpack,
-    });
-    // Load proxy config
-    const proxySetting = require(paths.appPackageJson).proxy;
-    const proxyConfig = prepareProxy(
-      proxySetting,
-      paths.appPublic,
-      paths.publicUrlOrPath
-    );
-    // Serve webpack assets generated by the compiler over a web server.
-    const serverConfig = {
-      ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig),
-      host: HOST,
-      port,
-    };
-    const devServer = new WebpackDevServer(serverConfig, compiler);
-    // Launch WebpackDevServer.
-    devServer.startCallback(() => {
-      if (isInteractive) {
-        clearConsole();
-      }
-
-      if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
-        console.log(
-          chalk.yellow(
-            `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
-          )
-        );
-      }
-
-      console.log(chalk.cyan('Starting the development server...\n'));
-      openBrowser(urls.localUrlForBrowser);
-    });
-
-    ['SIGINT', 'SIGTERM'].forEach(function (sig) {
-      process.on(sig, function () {
-        devServer.close();
-        process.exit();
-      });
-    });
-
-    if (process.env.CI !== 'true') {
-      // Gracefully exit when stdin ends
-      process.stdin.on('end', function () {
-        devServer.close();
-        process.exit();
-      });
-    }
-  })
-  .catch(err => {
-    if (err && err.message) {
-      console.log(err.message);
-    }
-    process.exit(1);
-  });

scripts/test.js

@@ -1,52 +0,0 @@
-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'test';
-process.env.NODE_ENV = 'test';
-process.env.PUBLIC_URL = '';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-const jest = require('jest');
-const execSync = require('child_process').execSync;
-let argv = process.argv.slice(2);
-
-function isInGitRepository() {
-  try {
-    execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function isInMercurialRepository() {
-  try {
-    execSync('hg --cwd . root', { stdio: 'ignore' });
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-// Watch unless on CI or explicitly running all tests
-if (
-  !process.env.CI &&
-  argv.indexOf('--watchAll') === -1 &&
-  argv.indexOf('--watchAll=false') === -1
-) {
-  // https://github.com/facebook/create-react-app/issues/5210
-  const hasSourceControl = isInGitRepository() || isInMercurialRepository();
-  argv.push(hasSourceControl ? '--watch' : '--watchAll');
-}
-
-
-jest.run(argv);

scripts/verify-aes-agent-contract.mjs

@@ -0,0 +1,140 @@
+import {
+  extensionRequest,
+  launchBrowserAgentContractHarness,
+  transformedFetchOptions,
+} from './browser-agent-contract-harness.mjs'
+
+const targetURL = process.env.AES_TARGET || 'http://127.0.0.1:82/'
+const plaintext = {username: 'admin', password: '123456'}
+let harness
+
+try {
+  harness = await launchBrowserAgentContractHarness({
+    profilePrefix: 'yakit-aes-contract-',
+    targetURL,
+  })
+  const {controlPage, tabId, targetPage} = harness
+  let browserRequestCount = 0
+  targetPage.on('request', (request) => {
+    if (new URL(request.url()).pathname === '/encrypt/aes.php') browserRequestCount += 1
+  })
+
+  await extensionRequest(controlPage, 'recording.start', {
+    tabId,
+    frameId: 0,
+    captureValues: true,
+    maxEntries: 120,
+    maxValueBytes: 8_192,
+  })
+  await targetPage.locator('#username').fill('admin')
+  await targetPage.locator('#password').fill('wrong-password')
+  await targetPage.getByRole('button', {name: '登录', exact: true}).click()
+  await targetPage.getByRole('button', {name: 'AES固定Key', exact: true}).click()
+  await targetPage.waitForTimeout(500)
+  if (browserRequestCount !== 1) {
+    throw new Error(`Initial AES recording expected one real request, received ${browserRequestCount}`)
+  }
+
+  const snapshot = await extensionRequest(
+    controlPage,
+    'recording.get',
+    {tabId, frameId: 0, limit: 120},
+  )
+  const candidate = snapshot.profileCandidates?.find((item) => (
+    item.status === 'ready'
+      && new URL(item.request?.url, targetURL).pathname === '/encrypt/aes.php'
+      && item.source?.callHandleId
+  ))
+  if (!candidate) {
+    throw new Error(`Single-call AES candidate was not ready after one recording: ${JSON.stringify(snapshot)}`)
+  }
+
+  const callable = await extensionRequest(controlPage, 'callable.create', {
+    tabId,
+    frameId: 0,
+    source: 'recording',
+    callHandleId: candidate.source.callHandleId,
+    name: 'CryptoJS AES recorded call',
+  })
+  if (callable.kind !== 'recorded-call') {
+    throw new Error(`AES callable was not retained from the recording: ${JSON.stringify(callable)}`)
+  }
+
+  const plainPacket = {
+    method: 'POST',
+    url: new URL('/encrypt/aes.php', targetURL).toString(),
+    headers: [{name: 'Content-Type', value: 'application/json'}],
+    bodyBase64: Buffer.from(JSON.stringify(plaintext)).toString('base64'),
+  }
+  const proposal = await extensionRequest(controlPage, 'analysis.profile.propose', {
+    tabId,
+    frameId: 0,
+    candidateId: candidate.id,
+    callableId: callable.id,
+    inputPaths: ['body'],
+    name: 'AES deterministic contract',
+  })
+  if (proposal?.proposal?.compiler !== 'browser-transform-guided-v1') {
+    throw new Error(`AES Profile was not deterministically compiled: ${JSON.stringify(proposal)}`)
+  }
+
+  const validation = await extensionRequest(controlPage, 'analysis.profile.validate', {
+    tabId,
+    frameId: 0,
+    candidateId: candidate.id,
+    callableId: callable.id,
+    inputPaths: ['body'],
+    name: 'AES deterministic contract',
+    packet: plainPacket,
+    comparisonMode: 'structure',
+  })
+  if (!validation?.valid || !validation?.saveEligible
+    || validation.proofLevel !== 'structure'
+    || validation.validationDraft?.contractVersion !== 1) {
+    throw new Error(`AES Profile validation failed: ${JSON.stringify(validation)}`)
+  }
+  if (browserRequestCount !== 1) {
+    throw new Error(`AES Profile validation leaked a real browser request; observed ${browserRequestCount}`)
+  }
+
+  const validationDraft = await extensionRequest(
+    controlPage,
+    'analysis.profile.validation.latest',
+    {tabId, frameId: 0},
+  )
+  if (!validationDraft || validationDraft.id !== validation.validationDraft.id
+    || validationDraft.contractVersion !== 1 || validationDraft.profile?.id) {
+    throw new Error(`AES Yakit handoff draft is invalid: ${JSON.stringify(validationDraft)}`)
+  }
+  const savedProfile = await extensionRequest(
+    controlPage,
+    'transform.profile.save',
+    validationDraft.profile,
+  )
+  const execution = await extensionRequest(controlPage, 'transform.execute', {
+    profileId: savedProfile.id,
+    direction: 'request',
+    packet: plainPacket,
+  })
+  const wireBody = Buffer.from(execution.bodyBase64, 'base64').toString('utf8')
+  const form = new URLSearchParams(wireBody)
+  const encryptedData = form.get('encryptedData')
+  if (!encryptedData || encryptedData.startsWith('{') || form.size !== 1) {
+    throw new Error(`AES Profile produced an invalid or nested form envelope: ${wireBody}`)
+  }
+  if (browserRequestCount !== 1) {
+    throw new Error(`Saved AES Profile leaked a real browser request; observed ${browserRequestCount}`)
+  }
+
+  const response = await fetch(
+    execution.url,
+    transformedFetchOptions(execution, plainPacket.headers),
+  )
+  const result = await response.json()
+  if (!result.success) throw new Error(`Target server rejected the AES Profile output: ${JSON.stringify(result)}`)
+  process.stdout.write(
+    'AES Agent contract verified: one recording produced a callable, deterministic Profile, Yakit confirmation draft, and server-accepted wire request.\n',
+  )
+} finally {
+  await harness?.close()
+}

scripts/verify-aesrsa-transaction.mjs

@@ -0,0 +1,330 @@
+import {
+  extensionRequest,
+  launchBrowserAgentContractHarness,
+  transformedFetchOptions,
+  waitFor,
+} from './browser-agent-contract-harness.mjs'
+
+const targetURL = process.env.AESRSA_TARGET || 'http://127.0.0.1:82/'
+let harness
+
+try {
+  harness = await launchBrowserAgentContractHarness({
+    profilePrefix: 'yakit-aesrsa-',
+    targetURL,
+  })
+  const {controlPage, tabId, targetPage} = harness
+  let browserRequestCount = 0
+  targetPage.on('request', (request) => {
+    if (new URL(request.url()).pathname === '/encrypt/aesrsa.php') browserRequestCount += 1
+  })
+
+  await extensionRequest(controlPage, 'recording.start', {
+    tabId, frameId: 0, captureValues: true, maxEntries: 120, maxValueBytes: 8_192,
+  })
+  await targetPage.locator('#username').fill('admin')
+  await targetPage.locator('#password').fill('wrong-password')
+  await targetPage.getByRole('button', { name: '登录', exact: true }).click()
+  await targetPage.getByRole('button', { name: 'AES+Rsa加密', exact: true }).click()
+  await targetPage.waitForTimeout(500)
+  if (browserRequestCount !== 1) throw new Error(`Initial recording expected one real request, received ${browserRequestCount}`)
+
+  const snapshot = await extensionRequest(controlPage, 'recording.get', { tabId, frameId: 0, limit: 120 })
+  const candidate = snapshot.profileCandidates?.find((item) => (
+    item.status === 'capture-required'
+      && item.sources?.length === 3
+      && new URL(item.request?.url, targetURL).pathname === '/encrypt/aesrsa.php'
+  ))
+  if (!candidate) throw new Error(`AES+RSA request-level candidate was not inferred: ${JSON.stringify(snapshot)}`)
+  const matcherEvent = snapshot.events?.find((event) => event.id === candidate.capturePlan?.matcherEventId)
+  if (!matcherEvent?.crypto?.adapterId || !matcherEvent.wrapperHandleId) {
+    throw new Error(`AES+RSA candidate has no deep-capture matcher: ${JSON.stringify(candidate)}`)
+  }
+  await extensionRequest(controlPage, 'deep.capture.start', {
+    tabId,
+    frameId: 0,
+    matcher: {
+      kind: 'crypto',
+      adapterId: matcherEvent.crypto.adapterId,
+      operation: matcherEvent.crypto.operation,
+      wrapperHandleId: matcherEvent.wrapperHandleId,
+      scriptUrl: matcherEvent.scriptUrl,
+      frameHints: candidate.capturePlan.frameHints,
+    },
+  })
+
+  await targetPage.locator('#username').fill('admin')
+  await targetPage.locator('#password').fill('wrong-password')
+  await targetPage.getByRole('button', { name: '登录', exact: true }).click()
+  let replayClickFailure
+  const replayClick = targetPage.getByRole('button', { name: 'AES+Rsa加密', exact: true })
+    .click({ noWaitAfter: true, timeout: 20_000 })
+    .catch((reason) => { replayClickFailure = reason })
+  const paused = await waitFor(controlPage, 'deep.capture.status', { tabId, frameId: 0 }, (value) => (
+    value?.state === 'paused' && value.pause?.collecting !== true
+  ), 20_000)
+  const automatic = paused.pause?.automaticCapture
+  const frame = paused.pause?.frames?.find((item) => item.id === automatic?.frameId)
+  if (automatic?.state !== 'ready' || automatic.strategy !== 'request-transaction'
+    || frame?.functionName !== 'sendDataAesRsa') {
+    throw new Error(`Deep capture did not select sendDataAesRsa as a request transaction: ${JSON.stringify(paused)}`)
+  }
+
+  const callable = await extensionRequest(controlPage, 'callable.create', {
+    tabId,
+    frameId: 0,
+    source: 'deep-capture',
+    strategy: 'request-transaction',
+    callFrameId: frame.id,
+    name: 'sendDataAesRsa 请求事务',
+    candidateId: candidate.id,
+  })
+  if (callable.kind !== 'request-transaction' || callable.inputSlots?.[0]?.name !== 'body') {
+    throw new Error(`Captured callable is not a request transaction: ${JSON.stringify(callable)}`)
+  }
+  await replayClick
+  if (replayClickFailure) throw replayClickFailure
+  await targetPage.waitForTimeout(300)
+  if (browserRequestCount !== 1) {
+    throw new Error(`Deep-capture replay leaked a real request; observed ${browserRequestCount}`)
+  }
+
+  const plaintext = { username: 'admin', password: '123456' }
+  let execution
+  try {
+    execution = await extensionRequest(controlPage, 'callable.execute', {
+      tabId,
+      frameId: 0,
+      callableId: callable.id,
+      args: [plaintext],
+    })
+  } catch (reason) {
+    const diagnostics = await controlPage.evaluate(async ({ targetTabId, callableId }) => {
+      const tab = await chrome.tabs.get(targetTabId).catch(() => undefined)
+      const [injection] = await chrome.scripting.executeScript({
+        target: { tabId: targetTabId, frameIds: [0] },
+        world: 'MAIN',
+        func: async (registryKey, protocolVersion, requestedCallableId) => {
+          const controller = globalThis[registryKey]
+          let directExecution
+          try {
+            directExecution = {
+              ok: true,
+              value: await controller?.command('callable.execute', {
+                callableId: requestedCallableId,
+                args: [{ username: 'admin', password: '123456' }],
+              }),
+            }
+          } catch (error) {
+            directExecution = {
+              ok: false,
+              error: error instanceof Error ? `${error.name}: ${error.message}\n${error.stack || ''}` : String(error),
+            }
+          }
+          return {
+            href: location.href,
+            controllerVersion: controller?.version,
+            expectedVersion: protocolVersion,
+            callables: typeof controller?.command === 'function' ? controller.command('callable.list', {}) : [],
+            directExecution,
+          }
+        },
+        args: ['__YAKIT_PAGE_RECORDER_V8__', 8, callableId],
+      }).catch(() => [])
+      return { tabUrl: tab?.url, page: injection?.result }
+    }, { targetTabId: tabId, callableId: callable.id })
+    const selectedFrame = {
+      functionName: frame.functionName,
+      functionInspection: frame.functionInspection,
+      scopes: frame.scopes,
+    }
+    throw new Error(`Callable execution failed: ${reason instanceof Error ? reason.message : String(reason)}; browserRequests=${browserRequestCount}; frame=${JSON.stringify(selectedFrame)}; diagnostics=${JSON.stringify(diagnostics)}`)
+  }
+  const envelope = execution.value
+  for (const field of ['encryptedData', 'encryptedKey', 'encryptedIv']) {
+    if (typeof envelope?.[field] !== 'string' || !envelope[field]) {
+      throw new Error(`Transaction output is missing ${field}: ${JSON.stringify(execution)}`)
+    }
+  }
+  if (browserRequestCount !== 1) {
+    throw new Error(`Transaction execution leaked a real browser request; observed ${browserRequestCount}`)
+  }
+  try {
+    await extensionRequest(controlPage, 'callable.execute', {
+      tabId,
+      frameId: 0,
+      callableId: callable.id,
+      args: [plaintext],
+    })
+  } catch (reason) {
+    throw new Error(
+      `Captured request transaction is not repeatable: ${reason instanceof Error ? reason.message : String(reason)}`,
+    )
+  }
+
+  const plainPacket = {
+    method: 'POST',
+    url: new URL('/encrypt/aesrsa.php', targetURL).toString(),
+    headers: [{ name: 'Content-Type', value: 'application/json' }],
+    bodyBase64: Buffer.from(JSON.stringify(plaintext)).toString('base64'),
+  }
+  const proposal = await extensionRequest(controlPage, 'analysis.profile.propose', {
+    tabId,
+    frameId: 0,
+    candidateId: candidate.id,
+    callableId: callable.id,
+    inputPaths: ['body'],
+    name: 'AES+RSA deterministic contract',
+  })
+  if (proposal?.proposal?.compiler !== 'browser-transform-guided-v1'
+    || proposal?.profile?.request?.enabled !== true) {
+    throw new Error(`Deterministic profile proposal was not compiled: ${JSON.stringify(proposal)}`)
+  }
+
+  let validation
+  try {
+    validation = await extensionRequest(controlPage, 'analysis.profile.validate', {
+      tabId,
+      frameId: 0,
+      candidateId: candidate.id,
+      callableId: callable.id,
+      inputPaths: ['body'],
+      name: 'AES+RSA deterministic contract',
+      packet: plainPacket,
+      comparisonMode: 'structure',
+    })
+  } catch (reason) {
+    throw new Error(
+      `Deterministic profile validation could not execute: ${reason instanceof Error ? reason.message : String(reason)}; `
+      + `packet=${JSON.stringify(plainPacket)}; profile=${JSON.stringify(proposal.profile)}`,
+    )
+  }
+  if (!validation?.valid || !validation?.saveEligible
+    || validation.proofLevel !== 'structure'
+    || validation.validationDraft?.contractVersion !== 1
+    || !validation.validationDraft?.id) {
+    throw new Error(`Deterministic profile validation failed: ${JSON.stringify(validation)}`)
+  }
+  if (browserRequestCount !== 1) {
+    throw new Error(`Profile validation leaked a real browser request; observed ${browserRequestCount}`)
+  }
+
+  const validationDraft = await extensionRequest(
+    controlPage,
+    'analysis.profile.validation.latest',
+    { tabId, frameId: 0 },
+  )
+  if (!validationDraft || validationDraft.contractVersion !== 1
+    || validationDraft.id !== validation.validationDraft.id
+    || validationDraft.profile?.id) {
+    throw new Error(`Yakit handoff draft is missing or already persisted: ${JSON.stringify(validationDraft)}`)
+  }
+
+  const savedProfile = await extensionRequest(
+    controlPage,
+    'transform.profile.save',
+    validationDraft.profile,
+  )
+  const profiles = await extensionRequest(controlPage, 'transform.profile.list', { tabId, frameId: 0 })
+  if (!savedProfile?.id || !profiles.some((profile) => profile.id === savedProfile.id)) {
+    throw new Error(`Confirmed profile was not persisted: ${JSON.stringify({ savedProfile, profiles })}`)
+  }
+
+  const profileExecution = await extensionRequest(controlPage, 'transform.execute', {
+    profileId: savedProfile.id,
+    direction: 'request',
+    packet: plainPacket,
+  })
+  const transformedEnvelope = JSON.parse(
+    Buffer.from(profileExecution.bodyBase64, 'base64').toString('utf8'),
+  )
+  for (const field of ['encryptedData', 'encryptedKey', 'encryptedIv']) {
+    if (typeof transformedEnvelope?.[field] !== 'string' || !transformedEnvelope[field]) {
+      throw new Error(`Saved profile output is missing ${field}: ${JSON.stringify(profileExecution)}`)
+    }
+  }
+  if (browserRequestCount !== 1) {
+    throw new Error(`Saved profile execution leaked a real browser request; observed ${browserRequestCount}`)
+  }
+
+  const response = await fetch(
+    profileExecution.url,
+    transformedFetchOptions(profileExecution, plainPacket.headers),
+  )
+  const result = await response.json()
+  if (!result.success) throw new Error(`Target server rejected the saved Profile output: ${JSON.stringify(result)}`)
+
+  await targetPage.reload()
+  const staleProfile = await waitFor(
+    controlPage,
+    'transform.profile.list',
+    { tabId, frameId: 0 },
+    (items) => items?.find((item) => item.id === savedProfile.id)?.recovery?.state === 'stale',
+    10_000,
+  ).then((items) => items.find((item) => item.id === savedProfile.id))
+  if (staleProfile.enabled || staleProfile.recovery?.capture?.automatic !== true) {
+    throw new Error(`Reloaded Profile did not fail closed with an automatic Recovery Plan: ${JSON.stringify(staleProfile)}`)
+  }
+
+  await extensionRequest(controlPage, 'transform.recovery.start', { id: savedProfile.id })
+  await targetPage.locator('#username').fill('admin')
+  await targetPage.locator('#password').fill('wrong-password')
+  await targetPage.getByRole('button', { name: '登录', exact: true }).click()
+  let recoveryClickFailure
+  const recoveryClick = targetPage.getByRole('button', { name: 'AES+Rsa加密', exact: true })
+    .click({ noWaitAfter: true, timeout: 20_000 })
+    .catch((reason) => { recoveryClickFailure = reason })
+  const recoveryPause = await waitFor(controlPage, 'deep.capture.status', {
+    tabId, frameId: 0,
+  }, (value) => value?.state === 'paused' && value.pause?.collecting !== true, 20_000)
+  const recoveryAutomatic = recoveryPause.pause?.automaticCapture
+  if (recoveryAutomatic?.state !== 'ready' || !recoveryAutomatic.frameId
+    || recoveryAutomatic.strategy !== 'request-transaction') {
+    throw new Error(`Recovery Plan did not locate the request transaction: ${JSON.stringify(recoveryPause)}`)
+  }
+  const recovery = await extensionRequest(controlPage, 'transform.recovery.capture', {
+    id: savedProfile.id,
+    ...recoveryPause.target,
+    callFrameId: recoveryAutomatic.frameId,
+    strategy: recoveryAutomatic.strategy,
+  })
+  await recoveryClick
+  if (recoveryClickFailure) throw recoveryClickFailure
+  if (recovery.state !== 'validation-required' || !recovery.pending?.callableId) {
+    throw new Error(`Recovery capture was not staged for validation: ${JSON.stringify(recovery)}`)
+  }
+  const recoveryValidation = await extensionRequest(controlPage, 'transform.recovery.validate', {
+    id: savedProfile.id,
+    packet: plainPacket,
+  })
+  if (recoveryValidation.recovery?.state !== 'confirmation-required'
+    || !recoveryValidation.recovery.validation?.id) {
+    throw new Error(`Recovered Profile did not require explicit confirmation: ${JSON.stringify(recoveryValidation)}`)
+  }
+  const recoveredProfile = await extensionRequest(controlPage, 'transform.recovery.confirm', {
+    id: savedProfile.id,
+    validationId: recoveryValidation.recovery.validation.id,
+  })
+  if (recoveredProfile.id !== savedProfile.id || recoveredProfile.recovery?.state !== 'ready'
+    || recoveredProfile.target.documentId === savedProfile.target.documentId) {
+    throw new Error(`Recovery confirmation did not atomically replace the document binding: ${JSON.stringify(recoveredProfile)}`)
+  }
+  const recoveredExecution = await extensionRequest(controlPage, 'transform.execute', {
+    profileId: recoveredProfile.id,
+    direction: 'request',
+    packet: plainPacket,
+  })
+  const recoveredResponse = await fetch(
+    recoveredExecution.url,
+    transformedFetchOptions(recoveredExecution, plainPacket.headers),
+  )
+  const recoveredResult = await recoveredResponse.json()
+  if (!recoveredResult.success) {
+    throw new Error(`Target server rejected the recovered Profile output: ${JSON.stringify(recoveredResult)}`)
+  }
+  process.stdout.write(
+    'AES+RSA Agent contract verified: evidence compiled, validated, saved, reloaded stale, recovered through one request-boundary capture, revalidated, explicitly confirmed, and accepted by the target server.\n',
+  )
+} finally {
+  await harness?.close()
+}

scripts/verify-aesserver-transaction.mjs

@@ -0,0 +1,251 @@
+import {
+  extensionRequest,
+  launchBrowserAgentContractHarness,
+  transformedFetchOptions,
+  waitFor,
+} from './browser-agent-contract-harness.mjs'
+
+const targetURL = process.env.AESSERVER_TARGET || 'http://127.0.0.1:82/'
+const keyPath = '/encrypt/server_generate_key.php'
+const requestPath = '/encrypt/aesserver.php'
+const plaintext = {username: 'admin', password: '123456'}
+let harness
+
+function pathOf(url) {
+  return new URL(url, targetURL).pathname
+}
+
+function snapshotSummary(snapshot) {
+  return {
+    events: snapshot.events?.map((event) => ({
+      sequence: event.sequence,
+      kind: event.kind,
+      operation: event.operation,
+      url: event.url ? pathOf(event.url) : undefined,
+    })),
+    candidates: snapshot.profileCandidates?.map((candidate) => ({
+      status: candidate.status,
+      request: pathOf(candidate.request?.url || ''),
+      prerequisites: candidate.capturePlan?.transaction?.prerequisites?.map((step) => pathOf(step.url)),
+    })),
+  }
+}
+
+function dependencySummary(snapshot, candidate) {
+  const eventIds = new Set(candidate.evidence?.flatMap((item) => item.eventIds || []))
+  return {
+    evidence: candidate.evidence?.filter((item) => item.kind === 'response-boundary'),
+    events: snapshot.events?.filter((event) => eventIds.has(event.id)).map((event) => ({
+      id: event.id,
+      sequence: event.sequence,
+      kind: event.kind,
+      operation: event.operation,
+      inputs: event.inputs?.map((item) => item.path),
+      outputs: event.outputs?.map((item) => item.path),
+    })),
+    links: snapshot.links?.filter((link) => eventIds.has(link.fromEventId) || eventIds.has(link.toEventId))
+      .map((link) => ({kind: link.kind, fromPath: link.fromPath, toPath: link.toPath})),
+  }
+}
+
+async function performLogin(targetPage, password = 'wrong-password') {
+  await targetPage.locator('#username').fill('admin')
+  await targetPage.locator('#password').fill(password)
+  await targetPage.getByRole('button', {name: '登录', exact: true}).click()
+  return targetPage.getByRole('button', {name: 'AES服务端获取Key', exact: true})
+}
+
+try {
+  harness = await launchBrowserAgentContractHarness({
+    profilePrefix: 'yakit-aesserver-',
+    targetURL,
+  })
+  const {controlPage, tabId, targetPage} = harness
+  const observed = {key: 0, terminal: 0}
+  targetPage.on('request', (request) => {
+    const path = pathOf(request.url())
+    if (path === keyPath) observed.key += 1
+    if (path === requestPath) observed.terminal += 1
+  })
+
+  await extensionRequest(controlPage, 'recording.start', {
+    tabId,
+    frameId: 0,
+    captureValues: true,
+    maxEntries: 160,
+    maxValueBytes: 8_192,
+  })
+  await (await performLogin(targetPage)).click()
+  await targetPage.waitForTimeout(600)
+  if (observed.key !== 1 || observed.terminal !== 1) {
+    throw new Error(`Initial operation did not produce the expected two-request flow: ${JSON.stringify(observed)}`)
+  }
+
+  const snapshot = await extensionRequest(
+    controlPage,
+    'recording.get',
+    {tabId, frameId: 0, limit: 160},
+  )
+  const candidate = snapshot.profileCandidates?.find((item) => (
+    item.status === 'capture-required'
+      && pathOf(item.request?.url || '') === requestPath
+      && item.capturePlan?.transaction?.prerequisites?.some((step) => pathOf(step.url) === keyPath)
+  ))
+  if (!candidate) {
+    throw new Error(`Recording did not infer the online key dependency: ${JSON.stringify(snapshotSummary(snapshot))}`)
+  }
+  const transaction = candidate.capturePlan.transaction
+  if (transaction.version !== 2
+    || transaction.prerequisites.length !== 1
+    || transaction.prerequisites[0].boundary !== 'fetch'
+    || transaction.prerequisites[0].response.bodyFormat !== 'json'
+    || !transaction.prerequisites[0].response.requiredPaths.includes('body.aes_key')
+    || !transaction.prerequisites[0].response.requiredPaths.includes('body.aes_iv')
+    || transaction.request.boundary !== 'fetch'
+    || pathOf(transaction.request.url) !== requestPath) {
+    throw new Error(`Inferred request transaction is not evidence-complete: ${JSON.stringify({
+      transaction,
+      dependency: dependencySummary(snapshot, candidate),
+    })}`)
+  }
+
+  const matcherEvent = snapshot.events?.find((event) => event.id === candidate.capturePlan.matcherEventId)
+  if (!matcherEvent?.crypto?.adapterId || !matcherEvent.wrapperHandleId) {
+    throw new Error(`Online-key candidate has no deep-capture matcher: ${JSON.stringify(candidate)}`)
+  }
+  await extensionRequest(controlPage, 'deep.capture.start', {
+    tabId,
+    frameId: 0,
+    matcher: {
+      kind: 'crypto',
+      adapterId: matcherEvent.crypto.adapterId,
+      operation: matcherEvent.crypto.operation,
+      wrapperHandleId: matcherEvent.wrapperHandleId,
+      scriptUrl: matcherEvent.scriptUrl,
+      frameHints: candidate.capturePlan.frameHints,
+    },
+  })
+
+  const replayButton = await performLogin(targetPage)
+  let replayFailure
+  const replay = replayButton.click({noWaitAfter: true, timeout: 20_000})
+    .catch((reason) => { replayFailure = reason })
+  const paused = await waitFor(
+    controlPage,
+    'deep.capture.status',
+    {tabId, frameId: 0},
+    (value) => value?.state === 'paused' && value.pause?.collecting !== true,
+    20_000,
+  )
+  const automatic = paused.pause?.automaticCapture
+  const frame = paused.pause?.frames?.find((item) => item.id === automatic?.frameId)
+  if (automatic?.state !== 'ready'
+    || automatic.strategy !== 'request-transaction'
+    || frame?.functionName !== 'fetchAndSendDataAes') {
+    throw new Error(`Deep capture selected an invalid strategy: ${JSON.stringify({automatic, functionName: frame?.functionName})}`)
+  }
+  const callable = await extensionRequest(controlPage, 'callable.create', {
+    tabId,
+    frameId: 0,
+    source: 'deep-capture',
+    strategy: 'request-transaction',
+    callFrameId: frame.id,
+    name: '在线取钥请求事务',
+    candidateId: candidate.id,
+  })
+  await replay
+  if (replayFailure) throw replayFailure
+  await targetPage.waitForTimeout(300)
+  if (observed.key !== 2 || observed.terminal !== 1) {
+    throw new Error(`Deep capture did not preserve the prerequisite/terminal boundary: ${JSON.stringify(observed)}`)
+  }
+
+  const beforeCallable = {...observed}
+  const callableExecution = await extensionRequest(controlPage, 'callable.execute', {
+    tabId,
+    frameId: 0,
+    callableId: callable.id,
+    args: [plaintext],
+  })
+  if (typeof callableExecution.value?.encryptedData !== 'string') {
+    throw new Error(`Request transaction did not return the terminal envelope: ${JSON.stringify(callableExecution)}`)
+  }
+  if (observed.key !== beforeCallable.key + 1 || observed.terminal !== beforeCallable.terminal) {
+    throw new Error(`Callable execution leaked or skipped a request: ${JSON.stringify({beforeCallable, observed})}`)
+  }
+
+  const plainPacket = {
+    method: 'POST',
+    url: new URL(requestPath, targetURL).toString(),
+    headers: [{name: 'Content-Type', value: 'application/json'}],
+    bodyBase64: Buffer.from(JSON.stringify(plaintext)).toString('base64'),
+  }
+  const validation = await extensionRequest(controlPage, 'analysis.profile.validate', {
+    tabId,
+    frameId: 0,
+    candidateId: candidate.id,
+    callableId: callable.id,
+    inputPaths: ['body'],
+    name: '在线取钥明文网关',
+    packet: plainPacket,
+    comparisonMode: 'structure',
+  })
+  if (!validation?.valid || !validation?.saveEligible || !validation.validationDraft?.id) {
+    throw new Error(`Online-key Profile validation failed: ${JSON.stringify({
+      valid: validation?.valid,
+      saveEligible: validation?.saveEligible,
+      proofLevel: validation?.proofLevel,
+    })}`)
+  }
+  const validationDraft = await extensionRequest(
+    controlPage,
+    'analysis.profile.validation.latest',
+    {tabId, frameId: 0},
+  )
+  if (!validationDraft?.profile || validationDraft.id !== validation.validationDraft.id) {
+    throw new Error('Validated online-key Profile draft was not available for confirmation')
+  }
+  const savedProfile = await extensionRequest(
+    controlPage,
+    'transform.profile.save',
+    validationDraft.profile,
+  )
+  if (
+    savedProfile.requestTransaction?.callableId !== callable.id
+    || savedProfile.requestTransaction?.transaction?.version !== 2
+  ) {
+    throw new Error('Saved Profile did not retain its trusted request-transaction binding')
+  }
+
+  const beforeProfile = {...observed}
+  const execution = await extensionRequest(controlPage, 'transform.execute', {
+    profileId: savedProfile.id,
+    direction: 'request',
+    packet: plainPacket,
+  })
+  if (observed.key !== beforeProfile.key + 1 || observed.terminal !== beforeProfile.terminal) {
+    throw new Error(`Saved Profile leaked or skipped a request: ${JSON.stringify({beforeProfile, observed})}`)
+  }
+  const sessionHeader = execution.setHeaders?.find((header) => header.name.toLowerCase() === 'cookie')
+  if (!sessionHeader?.value.includes('PHPSESSID=')) {
+    throw new Error(`Saved Profile did not bind the browser session to the outgoing packet: ${JSON.stringify(execution)}`)
+  }
+  const wireBody = JSON.parse(Buffer.from(execution.bodyBase64, 'base64').toString('utf8'))
+  if (typeof wireBody.encryptedData !== 'string' || Object.keys(wireBody).length !== 1) {
+    throw new Error(`Saved Profile produced an invalid terminal envelope: ${JSON.stringify(wireBody)}`)
+  }
+
+  const response = await fetch(
+    execution.url,
+    transformedFetchOptions(execution, plainPacket.headers),
+  )
+  const result = await response.json()
+  if (!result.success) {
+    throw new Error(`Target server rejected the session-bound Profile output: ${JSON.stringify(result)}`)
+  }
+  process.stdout.write(
+    'Online-key transaction verified: evidence inferred one bounded prerequisite, the browser sent no terminal request during replay, the saved Profile exported its browser session, and the target server accepted the final packet.\n',
+  )
+} finally {
+  await harness?.close()
+}

scripts/verify-des-transaction.mjs

@@ -0,0 +1,147 @@
+import {
+  extensionRequest,
+  launchBrowserAgentContractHarness,
+  transformedFetchOptions,
+  waitFor,
+} from './browser-agent-contract-harness.mjs'
+
+const targetURL = process.env.DES_TARGET || 'http://127.0.0.1:82/'
+const requestPath = '/encrypt/des.php'
+const plaintext = {username: 'admin', password: '123456'}
+let harness
+
+function pathOf(url) {
+  return new URL(url, targetURL).pathname
+}
+
+async function performLogin(targetPage, password = 'wrong-password') {
+  await targetPage.locator('#username').fill('admin')
+  await targetPage.locator('#password').fill(password)
+  await targetPage.getByRole('button', {name: '登录', exact: true}).click()
+  return targetPage.getByRole('button', {name: 'Des规律Key', exact: true})
+}
+
+try {
+  harness = await launchBrowserAgentContractHarness({
+    profilePrefix: 'yakit-des-',
+    targetURL,
+  })
+  const {controlPage, tabId, targetPage} = harness
+  let browserRequestCount = 0
+  targetPage.on('request', (request) => {
+    if (pathOf(request.url()) === requestPath) browserRequestCount += 1
+  })
+
+  await extensionRequest(controlPage, 'recording.start', {
+    tabId, frameId: 0, captureValues: true, maxEntries: 120, maxValueBytes: 8_192,
+  })
+  await (await performLogin(targetPage)).click()
+  await targetPage.waitForTimeout(500)
+  if (browserRequestCount !== 1) throw new Error(`Initial DES recording expected one request, received ${browserRequestCount}`)
+
+  const snapshot = await extensionRequest(controlPage, 'recording.get', {tabId, frameId: 0, limit: 120})
+  const candidate = snapshot.profileCandidates?.find((item) => pathOf(item.request?.url || '') === requestPath)
+  if (!candidate || candidate.status !== 'capture-required') {
+    throw new Error(`Structured DES output was not routed through business-envelope capture: ${JSON.stringify(candidate)}`)
+  }
+  const matcherEvent = snapshot.events?.find((event) => event.id === candidate.capturePlan?.matcherEventId)
+  if (matcherEvent?.crypto?.family !== 'symmetric'
+    || !matcherEvent.crypto.operation.toLowerCase().includes('des')
+    || !matcherEvent.wrapperHandleId) {
+    throw new Error(`DES candidate has no reusable crypto matcher: ${JSON.stringify(matcherEvent)}`)
+  }
+
+  await extensionRequest(controlPage, 'deep.capture.start', {
+    tabId,
+    frameId: 0,
+    matcher: {
+      kind: 'crypto',
+      adapterId: matcherEvent.crypto.adapterId,
+      operation: matcherEvent.crypto.operation,
+      wrapperHandleId: matcherEvent.wrapperHandleId,
+      scriptUrl: matcherEvent.scriptUrl,
+      frameHints: candidate.capturePlan.frameHints,
+    },
+  })
+  const replayButton = await performLogin(targetPage)
+  let replayFailure
+  const replay = replayButton.click({noWaitAfter: true, timeout: 20_000})
+    .catch((reason) => { replayFailure = reason })
+  const paused = await waitFor(controlPage, 'deep.capture.status', {tabId, frameId: 0}, (value) => (
+    value?.state === 'paused' && value.pause?.collecting !== true
+  ), 20_000)
+  const automatic = paused.pause?.automaticCapture
+  const frame = paused.pause?.frames?.find((item) => item.id === automatic?.frameId)
+  if (automatic?.state !== 'ready' || automatic.strategy !== 'request-transaction'
+    || frame?.functionName !== 'encryptAndSendDataDES') {
+    throw new Error(`DES deep capture did not select its business request envelope: ${JSON.stringify({automatic, frame})}`)
+  }
+  const callable = await extensionRequest(controlPage, 'callable.create', {
+    tabId,
+    frameId: 0,
+    source: 'deep-capture',
+    strategy: 'request-transaction',
+    callFrameId: frame.id,
+    name: 'DES 请求事务',
+    candidateId: candidate.id,
+  })
+  await replay
+  if (replayFailure) throw replayFailure
+  await targetPage.waitForTimeout(250)
+  if (browserRequestCount !== 1) throw new Error(`DES capture leaked a terminal request; observed ${browserRequestCount}`)
+
+  const callableExecution = await extensionRequest(controlPage, 'callable.execute', {
+    tabId, frameId: 0, callableId: callable.id, args: [plaintext],
+  })
+  if (callableExecution.value?.username !== plaintext.username
+    || !/^[a-f0-9]+$/i.test(callableExecution.value?.password || '')) {
+    throw new Error(`DES request transaction did not preserve the Hex envelope: ${JSON.stringify(callableExecution)}`)
+  }
+
+  const plainPacket = {
+    method: 'POST',
+    url: new URL(requestPath, targetURL).toString(),
+    headers: [{name: 'Content-Type', value: 'application/json'}],
+    bodyBase64: Buffer.from(JSON.stringify(plaintext)).toString('base64'),
+  }
+  const validation = await extensionRequest(controlPage, 'analysis.profile.validate', {
+    tabId,
+    frameId: 0,
+    candidateId: candidate.id,
+    callableId: callable.id,
+    inputPaths: ['body'],
+    name: 'DES 明文网关',
+    packet: plainPacket,
+    comparisonMode: 'structure',
+  })
+  if (!validation?.valid || !validation?.saveEligible || !validation.validationDraft?.id) {
+    throw new Error(`DES Profile validation failed: ${JSON.stringify(validation)}`)
+  }
+  const validationDraft = await extensionRequest(controlPage, 'analysis.profile.validation.latest', {tabId, frameId: 0})
+  const savedProfile = await extensionRequest(controlPage, 'transform.profile.save', validationDraft.profile)
+  const explanationText = JSON.stringify(savedProfile.explanation)
+  if (!explanationText.includes('DES') || explanationText.includes(plaintext.password)) {
+    throw new Error(`DES semantic explanation is missing or persisted plaintext: ${explanationText}`)
+  }
+
+  const execution = await extensionRequest(controlPage, 'transform.execute', {
+    profileId: savedProfile.id,
+    direction: 'request',
+    packet: plainPacket,
+  })
+  const wireBody = JSON.parse(Buffer.from(execution.bodyBase64, 'base64').toString('utf8'))
+  if (wireBody.username !== plaintext.username || !/^[a-f0-9]+$/i.test(wireBody.password || '')) {
+    throw new Error(`Saved DES Profile produced an invalid terminal body: ${JSON.stringify(wireBody)}`)
+  }
+  if (!execution.nodeTrace?.length || !execution.fieldChanges?.some((change) => change.path === 'body.password')) {
+    throw new Error(`Saved DES Profile did not return an explainable runtime trace: ${JSON.stringify(execution)}`)
+  }
+  if (browserRequestCount !== 1) throw new Error(`DES Profile execution leaked a browser request; observed ${browserRequestCount}`)
+
+  const response = await fetch(execution.url, transformedFetchOptions(execution, plainPacket.headers))
+  const result = await response.json()
+  if (!result.success) throw new Error(`Target server rejected the saved DES Profile output: ${JSON.stringify(result)}`)
+  process.stdout.write('DES transaction verified: the structured CipherParams result required business-envelope capture, replay preserved Hex serialization, runtime evidence stayed value-free, and the target accepted the final packet.\n')
+} finally {
+  await harness?.close()
+}

scripts/verify-g4-protocols.mjs

@@ -0,0 +1,212 @@
+import { createServer } from 'node:http';
+import { createRequire } from 'node:module';
+import { readFile } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { chromium } from 'playwright-core';
+import { KEYUTIL, KJUR } from 'jsrsasign';
+import { compactDecrypt, jwtVerify } from 'jose';
+
+const require = createRequire(import.meta.url);
+const root = resolve(import.meta.dirname, '..');
+const recorderPath = resolve(root, '.output/chrome-mv3/page-recorder-main-world.js');
+const jsrsasignPath = resolve(dirname(require.resolve('jsrsasign')), 'jsrsasign-all-min.js');
+const joseIndexPath = fileURLToPath(import.meta.resolve('jose'));
+const joseRoot = dirname(joseIndexPath);
+const executablePath = process.env.CHROME_PATH || '/usr/bin/google-chrome';
+
+function assert(condition, message) {
+  if (!condition) throw new Error(message);
+}
+
+function listen(server) {
+  return new Promise((resolveListen, reject) => {
+    server.once('error', reject);
+    server.listen(0, '127.0.0.1', () => resolveListen(server.address()));
+  });
+}
+
+function close(server) {
+  return new Promise((resolveClose) => server.close(() => resolveClose()));
+}
+
+function readBody(request) {
+  return new Promise((resolveBody, reject) => {
+    const chunks = [];
+    let bytes = 0;
+    request.on('data', (chunk) => {
+      bytes += chunk.length;
+      if (bytes > 1024 * 1024) {
+        reject(new Error('G4 browser fixture body exceeded 1 MiB'));
+        request.destroy();
+        return;
+      }
+      chunks.push(chunk);
+    });
+    request.on('end', () => resolveBody(Buffer.concat(chunks).toString('utf8')));
+    request.on('error', reject);
+  });
+}
+
+let capturedRequest;
+const server = createServer(async (request, response) => {
+  try {
+    const url = new URL(request.url || '/', 'http://127.0.0.1');
+    if (url.pathname === '/') {
+      response.setHeader('Content-Type', 'text/html; charset=utf-8');
+      response.end('<!doctype html><html><body><button id="run">Run G4 fixture</button><script src="/jsrsasign.js"></script><script type="module">import * as jose from "/jose/index.js"; window.jose = {...jose}; window.__g4Ready = true;</script></body></html>');
+      return;
+    }
+    if (url.pathname === '/jsrsasign.js') {
+      response.setHeader('Content-Type', 'text/javascript; charset=utf-8');
+      response.end(await readFile(jsrsasignPath));
+      return;
+    }
+    if (url.pathname.startsWith('/jose/')) {
+      const relative = url.pathname.slice('/jose/'.length);
+      const path = resolve(joseRoot, relative);
+      assert(path.startsWith(`${joseRoot}/`) || path === joseRoot, 'Invalid jose module path');
+      response.setHeader('Content-Type', 'text/javascript; charset=utf-8');
+      response.end(await readFile(path));
+      return;
+    }
+    if (url.pathname === '/g4-submit') {
+      capturedRequest = {
+        method: request.method,
+        signature: String(request.headers['x-signature'] || ''),
+        body: JSON.parse(await readBody(request)),
+      };
+      response.setHeader('Content-Type', 'application/json');
+      response.end(JSON.stringify({ ok: true }));
+      return;
+    }
+    response.statusCode = 404;
+    response.end('not found');
+  } catch (error) {
+    response.statusCode = 500;
+    response.end(error instanceof Error ? error.message : String(error));
+  }
+});
+
+let browser;
+try {
+  const address = await listen(server);
+  const origin = `http://127.0.0.1:${address.port}`;
+  const keypair = KEYUTIL.generateKeypair('RSA', 1024);
+  const privateKey = KEYUTIL.getPEM(keypair.prvKeyObj, 'PKCS8PRV');
+  const publicKey = KEYUTIL.getPEM(keypair.pubKeyObj);
+  const secret = crypto.getRandomValues(new Uint8Array(32));
+  const secretBase64 = Buffer.from(secret).toString('base64');
+
+  browser = await chromium.launch({ executablePath, headless: true, args: ['--no-sandbox', '--disable-gpu'] });
+  const page = await browser.newPage();
+  await page.goto(origin, { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(() => window.__g4Ready === true);
+  await page.evaluate(({ privateKey, secretBase64 }) => {
+    const bytes = Uint8Array.from(atob(secretBase64), (character) => character.charCodeAt(0));
+    class Axios {
+      async request(config) {
+        const canonical = JSON.stringify(config.data);
+        const signer = new window.KJUR.crypto.Signature({ alg: 'SHA256withRSA' });
+        signer.init(privateKey);
+        signer.updateString(canonical);
+        const signature = signer.sign();
+        const jwt = await new window.jose.SignJWT({ account: config.data.account })
+          .setProtectedHeader({ alg: 'HS256' })
+          .sign(bytes);
+        const jwe = await new window.jose.CompactEncrypt(new TextEncoder().encode(canonical))
+          .setProtectedHeader({ alg: 'dir', enc: 'A256GCM' })
+          .encrypt(bytes);
+        const response = await fetch('/g4-submit', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', 'X-Signature': signature },
+          body: JSON.stringify({ canonical, jwt, jwe }),
+        });
+        return await response.json();
+      }
+    }
+    window.axios = { Axios };
+    window.__g4Fixture = { privateKey, bytes };
+    window.__g4Originals = {
+      stringify: JSON.stringify,
+      axiosRequest: Axios.prototype.request,
+      signature: window.KJUR.crypto.Signature,
+      signJwt: window.jose.SignJWT,
+      compactEncrypt: window.jose.CompactEncrypt,
+    };
+  }, { privateKey, secretBase64 });
+  await page.addScriptTag({ path: recorderPath });
+  await page.evaluate(() => {
+    window.__YAKIT_PAGE_RECORDER_V9__.command('start', {
+      captureValues: false,
+      maxEntries: 200,
+      maxValueBytes: 2_048,
+    });
+  });
+  await page.click('#run');
+  const result = await page.evaluate(async () => {
+    const client = new window.axios.Axios();
+    return await client.request({ data: { account: 'admin', nonce: '1700000000' } });
+  });
+  assert(result?.ok === true, 'Browser G4 request did not complete');
+  await page.waitForTimeout(50);
+
+  const snapshot = await page.evaluate(() => window.__YAKIT_PAGE_RECORDER_V9__.command('get', { limit: 200 }));
+  const events = snapshot.events || [];
+  const jsrsasignEvents = events.filter((event) => event.crypto?.adapterId === 'jsrsasign');
+  const joseEvents = events.filter((event) => event.crypto?.adapterId === 'jose');
+  const transformOperations = new Set(events.filter((event) => event.kind === 'transform').map((event) => event.operation));
+  const requestEvent = events.find((event) => event.kind === 'fetch' && event.url?.includes('/g4-submit'));
+
+  for (const phase of ['create', 'init', 'update', 'final']) {
+    assert(jsrsasignEvents.some((event) => event.crypto?.state?.phase === phase), `Browser jsrsasign missed ${phase}`);
+  }
+  const jsrsasignCorrelation = new Set(jsrsasignEvents.map((event) => event.crypto?.state?.correlationId).filter(Boolean));
+  assert(jsrsasignCorrelation.size === 1, 'Browser jsrsasign stages did not share one correlation ID');
+  for (const operation of ['SignJWT.create', 'SignJWT.sign', 'CompactEncrypt.create', 'CompactEncrypt.encrypt']) {
+    assert(joseEvents.some((event) => event.crypto?.operation === operation), `Browser jose missed ${operation}`);
+  }
+  assert(joseEvents.filter((event) => ['SignJWT.sign', 'CompactEncrypt.encrypt'].includes(event.crypto?.operation)).every((event) => event.durationMs >= 0), 'Browser jose Promise results did not settle');
+  assert(transformOperations.has('JSON.stringify'), 'Browser fixture missed JSON serialization evidence');
+  assert(transformOperations.has('axios.request'), 'Browser fixture missed Axios request-builder evidence');
+  assert(requestEvent?.inputs?.some((item) => item.path === '$headers.x-signature'), 'Browser fixture missed Header signature evidence');
+  const metadata = JSON.stringify(snapshot);
+  assert(!metadata.includes(privateKey), 'Recorder metadata leaked the private key');
+  assert(!metadata.includes(capturedRequest.body.canonical), 'Metadata-only recording leaked the canonical plaintext');
+
+  const verifier = new KJUR.crypto.Signature({ alg: 'SHA256withRSA' });
+  verifier.init(publicKey);
+  verifier.updateString(capturedRequest.body.canonical);
+  assert(verifier.verify(capturedRequest.signature), 'Independent jsrsasign verifier rejected the browser signature');
+  const jwt = await jwtVerify(capturedRequest.body.jwt, secret, { algorithms: ['HS256'] });
+  assert(jwt.payload.account === 'admin', 'Independent jose verifier rejected the browser JWT');
+  const decrypted = await compactDecrypt(capturedRequest.body.jwe, secret, {
+    keyManagementAlgorithms: ['dir'],
+    contentEncryptionAlgorithms: ['A256GCM'],
+  });
+  assert(new TextDecoder().decode(decrypted.plaintext) === capturedRequest.body.canonical, 'Independent jose decrypt did not recover the canonical request');
+
+  const restored = await page.evaluate(() => {
+    window.__YAKIT_PAGE_RECORDER_V9__.command('stop');
+    return {
+      stringify: JSON.stringify === window.__g4Originals.stringify,
+      axiosRequest: window.axios.Axios.prototype.request === window.__g4Originals.axiosRequest,
+      signature: window.KJUR.crypto.Signature === window.__g4Originals.signature,
+      signJwt: window.jose.SignJWT === window.__g4Originals.signJwt,
+      compactEncrypt: window.jose.CompactEncrypt === window.__g4Originals.compactEncrypt,
+    };
+  });
+  assert(Object.values(restored).every(Boolean), `G4 runtime did not restore page methods: ${JSON.stringify(restored)}`);
+
+  console.log(JSON.stringify({
+    jsrsasignEvents: jsrsasignEvents.length,
+    joseEvents: joseEvents.length,
+    transforms: [...transformOperations],
+    requestHeaderLinked: true,
+    independentVerification: true,
+    restored: true,
+  }, null, 2));
+} finally {
+  await browser?.close();
+  await close(server);
+}

scripts/verify-native-host.mjs

@@ -0,0 +1,241 @@
+import { spawnSync } from 'node:child_process';
+import { randomBytes, webcrypto } from 'node:crypto';
+import { cp, mkdtemp, mkdir, readFile, rm, writeFile } from 'node:fs/promises';
+import { createServer } from 'node:http';
+import { tmpdir } from 'node:os';
+import { dirname, join, resolve } from 'node:path';
+import { chromium } from 'playwright-core';
+import { WebSocketServer } from 'ws';
+import { resolveChromiumPath } from './resolve-chromium.mjs';
+
+const root = resolve(import.meta.dirname, '..');
+const yakRoot = resolve(process.env.YAK_REPO || root, process.env.YAK_REPO ? '.' : '../../go/yaklang');
+const extensionPath = resolve(root, process.env.EXTENSION_PATH || '.output/chrome-mv3-store');
+const executablePath = await resolveChromiumPath();
+const temporary = await mkdtemp(join(tmpdir(), 'yakit-native-host-e2e-'));
+const home = join(temporary, 'home');
+const profile = join(temporary, 'profile');
+const hostBinary = join(temporary, 'yakit-browser-agent-host');
+const testExtensionPath = join(temporary, 'extension');
+const hostName = 'com.yaklang.browser_agent';
+
+const packagedManifest = JSON.parse(await readFile(join(extensionPath, 'manifest.json'), 'utf8'));
+if (!packagedManifest.optional_permissions?.includes('nativeMessaging') || packagedManifest.permissions?.includes('nativeMessaging')) {
+  throw new Error('Native Messaging is not packaged as an optional permission');
+}
+// Chrome's optional-permission prompt is browser chrome and cannot be accepted by
+// Playwright. Pre-grant it only in a disposable copy so the native transport itself
+// can still be exercised through the real extension and browser APIs.
+await cp(extensionPath, testExtensionPath, { recursive: true });
+const testManifest = structuredClone(packagedManifest);
+testManifest.permissions = [...new Set([...(testManifest.permissions || []), 'nativeMessaging'])];
+testManifest.optional_permissions = (testManifest.optional_permissions || []).filter((value) => value !== 'nativeMessaging');
+await writeFile(join(testExtensionPath, 'manifest.json'), JSON.stringify(testManifest, null, 2));
+
+const build = spawnSync('go', ['build', '-o', hostBinary, './common/browser/nativehostcmd'], {
+  cwd: yakRoot, encoding: 'utf8', env: process.env,
+});
+if (build.status !== 0) throw new Error(`Native Host build failed:\n${build.stderr || build.stdout}`);
+
+const bridgeHTTPServer = createServer();
+const pairingServer = new WebSocketServer({ noServer: true });
+const bridgeServer = new WebSocketServer({ noServer: true });
+bridgeHTTPServer.on('upgrade', (request, socket, head) => {
+  const pathname = new URL(request.url || '/', 'http://127.0.0.1').pathname;
+  const target = pathname === '/pairing' ? pairingServer : pathname === '/extension' ? bridgeServer : undefined;
+  if (!target) return socket.destroy();
+  target.handleUpgrade(request, socket, head, (webSocket) => target.emit('connection', webSocket, request));
+});
+await new Promise((resolveListen) => bridgeHTTPServer.listen(0, '127.0.0.1', resolveListen));
+const address = bridgeHTTPServer.address();
+const endpoint = `ws://127.0.0.1:${address.port}/extension`;
+const protocolVersion = 3;
+const engineIdentityId = 'native-e2e-engine-identity';
+const engineInstanceId = 'native-e2e-engine-instance';
+const engineKeys = await webcrypto.subtle.generateKey({ name: 'ECDSA', namedCurve: 'P-256' }, true, ['sign', 'verify']);
+const rawEngineJWK = await webcrypto.subtle.exportKey('jwk', engineKeys.publicKey);
+const enginePublicKey = { kty: 'EC', crv: 'P-256', x: rawEngineJWK.x, y: rawEngineJWK.y };
+let pairedClient;
+let authenticatedConnections = 0;
+let resolveHello;
+const helloReceived = new Promise((resolveMessage) => { resolveHello = resolveMessage; });
+
+const toBase64URL = (value) => Buffer.from(value).toString('base64url');
+const engineChallengePayload = (challenge, timestamp) => ['yak-browser-bridge-v3', 'engine-challenge', engineIdentityId, engineInstanceId, challenge, String(timestamp)].join('\n');
+const clientAuthPayload = (origin, challenge, auth) => [
+  'yak-browser-bridge-v3', 'client-auth', origin, engineIdentityId, engineInstanceId, challenge,
+  auth.installationId || '', auth.client || '', auth.version || '', [...(auth.capabilities || [])].sort().join(','),
+  auth.taskId || '', auth.grantId || '', auth.resumeSessionId || '',
+].join('\n');
+
+pairingServer.on('connection', (socket, request) => socket.once('message', async (raw) => {
+  const pairing = JSON.parse(raw.toString());
+  if (pairing.type !== 'pair_request' || pairing.protocolVersion !== protocolVersion) return socket.close(1008, 'invalid pairing request');
+  const requestId = 'native-e2e-pairing';
+  const serverNonce = toBase64URL(randomBytes(32));
+  const transcript = [
+    'yak-browser-pairing-v1', engineIdentityId, requestId, request.headers.origin, pairing.installationId,
+    pairing.nonce, serverNonce, pairing.publicKey.kty, pairing.publicKey.crv, pairing.publicKey.x, pairing.publicKey.y,
+  ].join('\n');
+  const digest = Buffer.from(await webcrypto.subtle.digest('SHA-256', Buffer.from(transcript)));
+  const code = String(digest.readBigUInt64BE() % 1_000_000n).padStart(6, '0');
+  pairedClient = { installationId: pairing.installationId, publicKey: pairing.publicKey };
+  socket.send(JSON.stringify({
+    type: 'pair_pending', protocolVersion, requestId, serverNonce, engineIdentityId, code,
+    expiresAt: Date.now() + 60_000, publicKey: enginePublicKey,
+  }));
+  setTimeout(() => socket.send(JSON.stringify({
+    type: 'pair_approved', requestId, deviceId: 'native-e2e-device', engineIdentityId, publicKey: enginePublicKey,
+  })), 50);
+}));
+
+bridgeServer.on('connection', async (socket, request) => {
+  const challenge = toBase64URL(randomBytes(32));
+  const timestamp = Date.now();
+  socket.send(JSON.stringify({
+    type: 'challenge', protocolVersion, challenge, timestamp, engineIdentityId, engineInstanceId, publicKey: enginePublicKey,
+    signature: toBase64URL(await webcrypto.subtle.sign(
+      { name: 'ECDSA', hash: 'SHA-256' }, engineKeys.privateKey, Buffer.from(engineChallengePayload(challenge, timestamp)),
+    )),
+  }));
+  socket.once('message', (raw) => void (async () => {
+    const hello = JSON.parse(raw.toString());
+    if (!request.headers.origin?.startsWith('chrome-extension://') || hello.type !== 'auth' || hello.protocolVersion !== protocolVersion || !hello.installationId || hello.challenge !== challenge || !pairedClient) {
+      socket.close(1008, 'invalid native e2e handshake');
+      return;
+    }
+    const clientKey = await webcrypto.subtle.importKey('jwk', pairedClient.publicKey, { name: 'ECDSA', namedCurve: 'P-256' }, false, ['verify']);
+    const verified = await webcrypto.subtle.verify(
+      { name: 'ECDSA', hash: 'SHA-256' }, clientKey, Buffer.from(hello.signature, 'base64url'),
+      Buffer.from(clientAuthPayload(request.headers.origin, challenge, hello)),
+    );
+    if (!verified || pairedClient.installationId !== hello.installationId) return socket.close(1008, 'invalid native e2e signature');
+    socket.send(JSON.stringify({
+      type: 'hello_ack', protocolVersion, version: 'native-e2e-engine', capabilities: [],
+      sessionId: 'native-e2e-session', engineIdentityId, engineInstanceId,
+      connectionId: 'native-e2e-connection', resumed: false,
+    }));
+    socket.on('message', (payload) => {
+      const message = JSON.parse(payload.toString());
+      if (message.type === 'ping') socket.send(JSON.stringify({
+        type: 'pong', id: message.id, sequence: message.sequence, timestamp: message.timestamp, replyTimestamp: Date.now(),
+      }));
+    });
+    authenticatedConnections += 1;
+    if (authenticatedConnections >= 2) resolveHello({ hello, origin: request.headers.origin });
+  })());
+});
+
+await mkdir(join(home, '.config', 'yakit'), { recursive: true });
+await writeFile(join(home, '.config', 'yakit', 'browser-agent-native-host.json'), JSON.stringify({ endpoint }));
+
+let context;
+try {
+  const launch = () => chromium.launchPersistentContext(profile, {
+    executablePath,
+    headless: true,
+    env: { ...process.env, HOME: home },
+    args: [`--disable-extensions-except=${testExtensionPath}`, `--load-extension=${testExtensionPath}`, '--no-first-run'],
+  });
+  context = await launch();
+  let worker = context.serviceWorkers()[0];
+  if (!worker) worker = await context.waitForEvent('serviceworker', { timeout: 15_000 });
+  const extensionId = new URL(worker.url()).host;
+  const manifest = {
+    name: hostName,
+    description: 'Yakit Browser Agent Native Host E2E',
+    path: hostBinary,
+    type: 'stdio',
+    allowed_origins: [`chrome-extension://${extensionId}/`],
+  };
+  const manifestDirectories = [
+    ...['google-chrome', 'google-chrome-for-testing', 'chromium'].map((product) => join(home, '.config', product, 'NativeMessagingHosts')),
+    join(profile, 'NativeMessagingHosts'),
+  ];
+  for (const directory of manifestDirectories) {
+    const path = join(directory, `${hostName}.json`);
+    await mkdir(dirname(path), { recursive: true });
+    await writeFile(path, JSON.stringify(manifest));
+  }
+
+  // Chromium caches native-host registrations at process startup.
+  await context.close();
+  context = await launch();
+  worker = context.serviceWorkers()[0];
+  if (!worker) worker = await context.waitForEvent('serviceworker', { timeout: 15_000 });
+  const restartedExtensionId = new URL(worker.url()).host;
+  if (restartedExtensionId !== extensionId) throw new Error('Extension ID changed after Native Host registration');
+
+  const options = await context.newPage();
+  await options.goto(`chrome-extension://${extensionId}/options.html#engine`);
+  try {
+    await options.evaluate(async ({ bridgeEndpoint }) => {
+      const send = async (action, payload) => {
+        const response = await chrome.runtime.sendMessage({ action, payload });
+        if (!response?.ok) throw new Error(response?.error || action);
+        return response.data;
+      };
+      const state = await send('state.get');
+      await send('bridge.config.save', {
+        transport: 'websocket', nativeHost: 'com.yaklang.browser_agent', endpoint: bridgeEndpoint,
+        autoConnect: false, installationId: state.bridge.installationId,
+      });
+      await send('bridge.pair');
+      for (let attempt = 0; attempt < 50; attempt += 1) {
+        const [next, status] = await Promise.all([send('state.get'), send('bridge.status')]);
+        if (next.bridge.pairedEngine && status.state === 'connected') {
+          await send('bridge.disconnect');
+          await send('bridge.config.save', { ...next.bridge, transport: 'native', autoConnect: false });
+          await send('bridge.connect');
+          return;
+        }
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      }
+      throw new Error('Browser extension pairing did not complete');
+    }, { bridgeEndpoint: endpoint });
+  } catch (error) {
+    const diagnostics = await options.evaluate(async () => ({
+      body: document.body.innerText,
+      permissions: await chrome.permissions.getAll(),
+      bridge: await chrome.runtime.sendMessage({ action: 'bridge.status' }),
+    }));
+    throw new Error(`Native Host pairing and settings failed: ${JSON.stringify(diagnostics)}`, { cause: error });
+  }
+  let connection;
+  try {
+    connection = await Promise.race([
+      helloReceived,
+      new Promise((_, reject) => setTimeout(() => reject(new Error('Native Host did not reach Yak Bridge')), 15_000)),
+    ]);
+  } catch (error) {
+    const diagnostics = await options.evaluate(async () => ({
+      body: document.body.innerText,
+      permissions: await chrome.permissions.getAll(),
+      bridge: await chrome.runtime.sendMessage({ action: 'bridge.status' }),
+    }));
+    throw new Error(`Native Host transport failed: ${JSON.stringify(diagnostics)}`, { cause: error });
+  }
+  const status = await options.evaluate(async () => {
+    const response = await chrome.runtime.sendMessage({ action: 'bridge.status' });
+    if (!response?.ok) throw new Error(response?.error || 'bridge.status');
+    return response.data;
+  });
+  if (status.state !== 'connected' || status.engineInstanceId !== 'native-e2e-engine-instance' || status.connectionId !== 'native-e2e-connection') {
+    throw new Error(`Native Host identity did not reach the extension: ${JSON.stringify(status)}`);
+  }
+  console.log(JSON.stringify({
+    extensionId,
+    endpoint,
+    permissionFixture: 'pre-granted only in temporary E2E copy; production package remains optional',
+    connection,
+    status,
+  }, null, 2));
+} finally {
+  await context?.close();
+  for (const client of bridgeServer.clients) client.terminate();
+  for (const client of pairingServer.clients) client.terminate();
+  bridgeServer.close();
+  pairingServer.close();
+  bridgeHTTPServer.close();
+  await rm(temporary, { recursive: true, force: true });
+}

src/App.css

@@ -1,44 +0,0 @@
-.App {
-  width: 420px;
-  border-radius: 0px 0px 4px 4px;
-  border-right: 1px solid #EAECF3;
-  border-bottom: 1px solid #EAECF3;
-  border-left: 1px solid #EAECF3;
-  background: #fff;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import "./App.css";
-import {ConfigProvider} from "antd";
-import {Contro} from "@components/Contro";
-import {Proxifier} from "@components/Proxifier";
-import {EvalInTab} from "@components/EvalInTab";
-
-function App() {
-    return (
-        <ConfigProvider
-            theme={{
-                token: {
-                    colorPrimary: "#F28B44",
-                },
-            }}
-        >
-            <div className="App">
-                {/*<Contro/>*/}
-                <Proxifier/>
-
-                <EvalInTab/>
-            </div>
-        </ConfigProvider>
-    );
-}
-
-export default App;

src/app/background/handlers/cookies.ts

@@ -0,0 +1,59 @@
+import type { BackgroundRequestHandler } from '../router';
+import { ok } from '../response';
+import { targetTabId } from '../request-context';
+import { listCookies, removeCookie, setCookie } from '@/features/cookies/service';
+import { exportCookies, importCookies } from '@/features/cookies/transfer';
+import { resolveTabCookieStoreId } from '@/platform/browser/isolation';
+import { ExtensionError } from '@/shared/errors';
+
+async function requestCookieStoreId(
+  tabId: number | undefined,
+  sender: Parameters<BackgroundRequestHandler>[1],
+): Promise<string> {
+  const target = targetTabId(tabId, sender);
+  if (!target) {
+    throw new ExtensionError('target_unavailable', '请选择一个可访问的 HTTP(S) 标签页');
+  }
+  return resolveTabCookieStoreId(target);
+}
+
+export const handleCookieRequest: BackgroundRequestHandler = async (request, sender) => {
+  switch (request.action) {
+    case 'cookie.list': return ok(await listCookies(
+      request.payload.url,
+      await requestCookieStoreId(request.payload.tabId, sender),
+    ));
+    case 'cookie.set': {
+      const { tabId, ...input } = request.payload;
+      return ok(await setCookie({
+        ...input,
+        storeId: await requestCookieStoreId(tabId, sender),
+      }));
+    }
+    case 'cookie.remove':
+      await removeCookie(request.payload);
+      return ok();
+    case 'cookie.removeMany': {
+      const results = await Promise.allSettled(
+        request.payload.cookies.map((cookie) => removeCookie(cookie)),
+      );
+      const removed = results.filter((result) => result.status === 'fulfilled').length;
+      return ok({ removed, failed: results.length - removed });
+    }
+    case 'cookie.import': return ok(await importCookies(
+      request.payload.url,
+      request.payload.format,
+      request.payload.text,
+      await requestCookieStoreId(request.payload.tabId, sender),
+    ));
+    case 'cookie.export': return ok(exportCookies(
+      await listCookies(
+        request.payload.url,
+        await requestCookieStoreId(request.payload.tabId, sender),
+      ),
+      request.payload.format,
+      request.payload.includeValues,
+    ));
+    default: return undefined;
+  }
+};

src/app/background/handlers/proxy.ts

@@ -0,0 +1,116 @@
+import type { BackgroundRequestHandler } from '../router';
+import { ok } from '../response';
+import {
+  applyProxyRules,
+  clearCurrentSiteRoute,
+  compileCurrentProxyRules,
+  dirtyProxyState,
+  exportProxyConfiguration,
+  getProxyRuleSourcePage,
+  hasProxyAuthPassword,
+  importProxyConfiguration,
+  previewCurrentProxyRules,
+  refreshProxyRuleSource,
+  removeProxyProfile,
+  removeProxyRuleSource,
+  routeCurrentSite,
+  saveProxyProfile,
+  saveProxyRuleSource,
+  setProxyAuthPassword,
+  switchProxy,
+} from '@/features/proxy/service';
+import { updateState } from '@/platform/storage/state';
+
+export const handleProxyRequest: BackgroundRequestHandler = async (request) => {
+  switch (request.action) {
+    case 'proxy.save': return ok(await saveProxyProfile(request.payload));
+    case 'proxy.delete': return ok(await removeProxyProfile(request.payload.id));
+    case 'proxy.switch': return ok(await switchProxy(request.payload.id));
+    case 'proxy.rule.save': {
+      const rule = request.payload;
+      return ok(await updateState((state) => {
+        if (!state.proxyProfiles.some((profile) => profile.id === rule.proxyProfileId
+          && ['direct', 'fixed_servers'].includes(profile.kind))) {
+          throw new Error('规则 PAC 只能使用直接连接或固定代理出口');
+        }
+        return dirtyProxyState({
+          ...state,
+          proxyRules: [...state.proxyRules.filter((item) => item.id !== rule.id), rule],
+        });
+      }));
+    }
+    case 'proxy.rule.delete': {
+      const { id } = request.payload;
+      return ok(await updateState((state) => dirtyProxyState({
+        ...state,
+        proxyRules: state.proxyRules.filter((item) => item.id !== id),
+      })));
+    }
+    case 'proxy.auto.apply': return ok(await applyProxyRules());
+    case 'proxy.rules.preview': return ok(await previewCurrentProxyRules(request.payload.url));
+    case 'proxy.rules.compile': return ok(await compileCurrentProxyRules());
+    case 'proxy.rules.reorder': {
+      const ids = request.payload.ids;
+      return ok(await updateState((current) => {
+        if (ids.length !== current.proxyRules.length || new Set(ids).size !== ids.length
+          || ids.some((id) => !current.proxyRules.some((rule) => rule.id === id))) {
+          throw new Error('规则排序必须包含当前全部规则且不能重复');
+        }
+        const byId = new Map(current.proxyRules.map((rule) => [rule.id, rule]));
+        return dirtyProxyState({
+          ...current,
+          proxyRules: ids.map((id, order) => ({
+            ...byId.get(id)!, order, updatedAt: Date.now(),
+          })),
+        });
+      }));
+    }
+    case 'proxy.rules.settings': {
+      const input = request.payload;
+      return ok(await updateState((current) => {
+        if (!current.proxyProfiles.some((profile) => profile.id === input.defaultProfileId
+          && ['direct', 'fixed_servers'].includes(profile.kind))) {
+          throw new Error('默认出口必须是直接连接或固定代理');
+        }
+        return dirtyProxyState({ ...current, proxyRouting: input });
+      }));
+    }
+    case 'proxy.source.save': return ok(await saveProxyRuleSource(request.payload));
+    case 'proxy.source.refresh': return ok(await refreshProxyRuleSource(request.payload.id));
+    case 'proxy.source.delete': return ok(await removeProxyRuleSource(request.payload.id));
+    case 'proxy.sources.reorder': {
+      const ids = request.payload.ids;
+      return ok(await updateState((current) => {
+        if (ids.length !== current.proxyRuleSources.length || new Set(ids).size !== ids.length
+          || ids.some((id) => !current.proxyRuleSources.some((source) => source.id === id))) {
+          throw new Error('规则源排序必须包含当前全部订阅且不能重复');
+        }
+        const byId = new Map(current.proxyRuleSources.map((source) => [source.id, source]));
+        return dirtyProxyState({
+          ...current,
+          proxyRuleSources: ids.map((id, order) => ({ ...byId.get(id)!, order })),
+        });
+      }));
+    }
+    case 'proxy.source.rules': return ok(await getProxyRuleSourcePage(
+      request.payload.id,
+      request.payload.offset,
+      request.payload.limit,
+      request.payload.query,
+    ));
+    case 'proxy.site.route': return ok(await routeCurrentSite(
+      request.payload.url,
+      request.payload.profileId,
+    ));
+    case 'proxy.site.route.clear': return ok(await clearCurrentSiteRoute(request.payload.url));
+    case 'proxy.auth.set':
+      await setProxyAuthPassword(request.payload.profileId, request.payload.password);
+      return ok({ configured: hasProxyAuthPassword(request.payload.profileId) });
+    case 'proxy.auth.status': return ok({
+      configured: hasProxyAuthPassword(request.payload.profileId),
+    });
+    case 'proxy.config.export': return ok(await exportProxyConfiguration());
+    case 'proxy.config.import': return ok(await importProxyConfiguration(request.payload.configuration));
+    default: return undefined;
+  }
+};

src/app/background/handlers/recording.ts

@@ -0,0 +1,178 @@
+import type { BackgroundRequestHandler } from '../router';
+import { ok } from '../response';
+import { requiredDebuggerTarget, requiredRequestTarget } from '../request-context';
+import {
+  browserRecordingStatus,
+  clearBrowserRecording,
+  createRecordedPageCallable,
+  getBrowserRecording,
+  startBrowserRecording,
+  stopBrowserRecording,
+} from '@/features/browser-recording/service';
+import {
+  createCapturedPageCallable,
+  deepCaptureStatus,
+  detachDeepCapture,
+  keepDeepCaptureAlive,
+  resumeDeepCapture,
+  startDeepCapture,
+} from '@/features/deep-capture/service';
+import {
+  deletePageCallable,
+  executePageCallable,
+  listPageCallables,
+} from '@/features/page-callable/service';
+import { invalidateBrowserTransformProfilesForCallable } from '@/features/browser-transform/service';
+import { appendAuditEvent } from '@/features/diagnostics/audit';
+import {
+  resolveBrowserProfileCallableAnalysis,
+  resolveBrowserProfileCaptureContext,
+  stageBrowserProfileEvidence,
+} from '@/features/browser-analysis/service';
+
+export const handleRecordingRequest: BackgroundRequestHandler = async (request, sender) => {
+  switch (request.action) {
+    case 'recording.start': {
+      const input = request.payload;
+      const target = await requiredRequestTarget(input, sender);
+      const snapshot = await startBrowserRecording(target, input);
+      void appendAuditEvent({
+        category: 'capability',
+        action: 'recording.start',
+        outcome: 'success',
+        targetTabId: target.tabId,
+        summary: input.captureValues ? '包含用户明确启用的短时值预览' : '仅元数据',
+      });
+      return ok(snapshot);
+    }
+    case 'recording.status': return ok(await browserRecordingStatus(
+      await requiredRequestTarget(request.payload, sender),
+    ));
+    case 'recording.get': {
+      const target = await requiredRequestTarget(request.payload, sender);
+      const snapshot = await getBrowserRecording(target, request.payload.limit, true);
+      await stageBrowserProfileEvidence(snapshot);
+      return ok(snapshot);
+    }
+    case 'recording.clear': {
+      const target = await requiredRequestTarget(request.payload, sender);
+      const snapshot = await clearBrowserRecording(target, true);
+      void appendAuditEvent({
+        category: 'capability',
+        action: 'recording.clear',
+        outcome: 'success',
+        targetTabId: target.tabId,
+      });
+      return ok(snapshot);
+    }
+    case 'recording.stop': {
+      const target = await requiredRequestTarget(request.payload, sender);
+      const snapshot = await stopBrowserRecording(target, true);
+      await stageBrowserProfileEvidence(snapshot);
+      void appendAuditEvent({
+        category: 'capability',
+        action: 'recording.stop',
+        outcome: 'success',
+        targetTabId: target.tabId,
+      });
+      return ok(snapshot);
+    }
+    case 'callable.create': {
+      const payload = request.payload;
+      const target = payload.source === 'deep-capture'
+        ? await requiredDebuggerTarget(payload, sender)
+        : await requiredRequestTarget(payload, sender);
+      let callable;
+      if (payload.source !== 'deep-capture') {
+        callable = await createRecordedPageCallable(target, payload);
+      } else if (payload.strategy === 'request-transaction') {
+        const capture = await resolveBrowserProfileCaptureContext(target, payload.candidateId);
+        callable = await createCapturedPageCallable(target, payload.callFrameId, {
+          strategy: 'request-transaction',
+          name: payload.name,
+          transaction: capture.transaction,
+          analysis: capture.analysis,
+        });
+      } else if (payload.strategy === 'selected-frame') {
+        const analysis = payload.candidateId
+          ? await resolveBrowserProfileCallableAnalysis(target, payload.candidateId)
+          : undefined;
+        callable = await createCapturedPageCallable(target, payload.callFrameId, {
+          strategy: 'selected-frame',
+          name: payload.name,
+          analysis,
+        });
+      } else {
+        callable = await createCapturedPageCallable(target, payload.callFrameId, payload);
+      }
+      void appendAuditEvent({
+        category: 'capability',
+        action: 'callable.create',
+        outcome: 'success',
+        targetTabId: target.tabId,
+        summary: callable.name,
+      });
+      return ok(callable);
+    }
+    case 'callable.list': return ok(await listPageCallables(
+      await requiredRequestTarget(request.payload, sender),
+    ));
+    case 'callable.execute': {
+      const target = await requiredRequestTarget(request.payload, sender);
+      const result = await executePageCallable(
+        target,
+        request.payload.callableId,
+        request.payload.args,
+      );
+      void appendAuditEvent({
+        category: 'capability',
+        action: 'callable.execute',
+        outcome: 'success',
+        targetTabId: target.tabId,
+        summary: `${result.durationMs.toFixed(1)} ms`,
+      });
+      return ok(result);
+    }
+    case 'callable.delete': {
+      const target = await requiredRequestTarget(request.payload, sender);
+      const callables = await deletePageCallable(target, request.payload.callableId);
+      await invalidateBrowserTransformProfilesForCallable(target, request.payload.callableId);
+      return ok(callables);
+    }
+    case 'deep.capture.start': {
+      const target = await requiredRequestTarget(request.payload, sender);
+      const status = await startDeepCapture(target, request.payload.matcher);
+      void appendAuditEvent({
+        category: 'capability',
+        action: 'deep.capture.start',
+        outcome: 'success',
+        targetTabId: target.tabId,
+        summary: request.payload.matcher.kind === 'request'
+          ? request.payload.matcher.urlPattern
+          : request.payload.matcher.operation,
+      });
+      return ok(status);
+    }
+    case 'deep.capture.status': return ok(await deepCaptureStatus(
+      await requiredDebuggerTarget(request.payload, sender),
+    ));
+    case 'deep.capture.keepalive': return ok(await keepDeepCaptureAlive(
+      await requiredDebuggerTarget(request.payload, sender),
+    ));
+    case 'deep.capture.resume': return ok(await resumeDeepCapture(
+      await requiredDebuggerTarget(request.payload, sender),
+    ));
+    case 'deep.capture.detach': {
+      const target = await requiredDebuggerTarget(request.payload, sender);
+      const status = await detachDeepCapture(target);
+      void appendAuditEvent({
+        category: 'capability',
+        action: 'deep.capture.detach',
+        outcome: 'success',
+        targetTabId: target.tabId,
+      });
+      return ok(status);
+    }
+    default: return undefined;
+  }
+};

src/app/background/handlers/transform.ts

@@ -0,0 +1,160 @@
+import type { BackgroundRequestHandler } from '../router';
+import { ok } from '../response';
+import { requiredDebuggerTarget, requiredRequestTarget } from '../request-context';
+import {
+  captureBrowserTransformRecovery,
+  confirmBrowserTransformRecovery,
+  deleteBrowserTransformProfile,
+  executeBrowserTransform,
+  getBrowserTransformRecovery,
+  listBrowserTransformProfiles,
+  resetBrowserTransformRecovery,
+  saveBrowserTransformProfile,
+  startBrowserTransformRecovery,
+  validateBrowserTransformRecovery,
+} from '@/features/browser-transform/service';
+import {
+  latestBrowserTransformValidation,
+  proposeBrowserTransformProfile,
+  validateInferredBrowserTransformProfile,
+} from '@/features/browser-analysis/service';
+import { appendAuditEvent } from '@/features/diagnostics/audit';
+
+export const handleTransformRequest: BackgroundRequestHandler = async (request, sender) => {
+  switch (request.action) {
+    case 'analysis.profile.propose': {
+      const input = request.payload;
+      const target = await requiredRequestTarget(input, sender);
+      return ok(await proposeBrowserTransformProfile(
+        target,
+        input.candidateId,
+        input.callableId,
+        input.inputPaths,
+        input.name,
+      ));
+    }
+    case 'analysis.profile.validate': {
+      const input = request.payload;
+      const target = await requiredRequestTarget(input, sender);
+      const result = await validateInferredBrowserTransformProfile(
+        target,
+        input.candidateId,
+        input.callableId,
+        input.packet,
+        input.inputPaths,
+        input.name,
+        input.observed,
+        input.comparisonMode,
+      );
+      void appendAuditEvent({
+        category: 'capability',
+        action: 'analysis.profile.validate',
+        outcome: result.valid ? 'success' : 'denied',
+        targetTabId: target.tabId,
+        summary: result.proofLevel,
+      });
+      return ok(result);
+    }
+    case 'analysis.profile.validation.latest': return ok(
+      await latestBrowserTransformValidation(
+        await requiredRequestTarget(request.payload, sender),
+      ),
+    );
+    case 'transform.profile.list': {
+      const input = request.payload;
+      const target = input.tabId ? await requiredRequestTarget(input, sender) : undefined;
+      return ok(await listBrowserTransformProfiles(
+        target ? { tabId: target.tabId, frameId: target.frameId } : undefined,
+      ));
+    }
+    case 'transform.profile.save': {
+      const profile = await saveBrowserTransformProfile(request.payload);
+      void appendAuditEvent({
+        category: 'capability',
+        action: 'transform.profile.save',
+        outcome: 'success',
+        targetTabId: profile.target.tabId,
+        summary: profile.name,
+      });
+      return ok(profile);
+    }
+    case 'transform.profile.delete': return ok(
+      await deleteBrowserTransformProfile(request.payload.id),
+    );
+    case 'transform.recovery.get': return ok(
+      await getBrowserTransformRecovery(request.payload.id),
+    );
+    case 'transform.recovery.start': {
+      const status = await startBrowserTransformRecovery(request.payload.id);
+      void appendAuditEvent({
+        category: 'capability',
+        action: 'transform.recovery.start',
+        outcome: 'success',
+        targetTabId: status.target.tabId,
+        summary: '等待一次真实业务操作',
+      });
+      return ok(status);
+    }
+    case 'transform.recovery.capture': {
+      const input = request.payload;
+      const target = await requiredDebuggerTarget(input, sender);
+      const recovery = await captureBrowserTransformRecovery(
+        input.id,
+        target,
+        input.callFrameId,
+        input.strategy,
+      );
+      void appendAuditEvent({
+        category: 'capability',
+        action: 'transform.recovery.capture',
+        outcome: 'success',
+        targetTabId: target.tabId,
+        summary: recovery.binding.name,
+      });
+      return ok(recovery);
+    }
+    case 'transform.recovery.validate': {
+      const result = await validateBrowserTransformRecovery(
+        request.payload.id,
+        request.payload.packet,
+      );
+      void appendAuditEvent({
+        category: 'capability',
+        action: 'transform.recovery.validate',
+        outcome: 'success',
+        durationMs: result.execution.durationMs,
+        summary: result.recovery.validation?.proofLevel,
+      });
+      return ok(result);
+    }
+    case 'transform.recovery.confirm': {
+      const profile = await confirmBrowserTransformRecovery(
+        request.payload.id,
+        request.payload.validationId,
+      );
+      void appendAuditEvent({
+        category: 'capability',
+        action: 'transform.recovery.confirm',
+        outcome: 'success',
+        targetTabId: profile.target.tabId,
+        summary: profile.name,
+      });
+      return ok(profile);
+    }
+    case 'transform.recovery.reset': return ok(
+      await resetBrowserTransformRecovery(request.payload.id),
+    );
+    case 'transform.execute': {
+      const result = await executeBrowserTransform(request.payload);
+      void appendAuditEvent({
+        category: 'capability',
+        action: `transform.${result.direction}`,
+        outcome: 'success',
+        durationMs: result.durationMs,
+        summary: `${result.nodeDurations.length} 个 Pipeline 节点`,
+      });
+      return ok(result);
+    }
+    default: return undefined;
+  }
+};

src/app/background/handlers/user-agent.ts

@@ -0,0 +1,72 @@
+import type { BackgroundRequestHandler } from '../router';
+import { ok } from '../response';
+import { getState } from '@/platform/storage/state';
+import { resolveUserAgent, userAgentHostname } from '@/features/identity/user-agent';
+import {
+  applyUserAgentToSite,
+  deleteUserAgentProfile,
+  resetUserAgentForSite,
+  saveUserAgentProfile,
+} from '@/features/identity/user-agent-service';
+import { getUserAgentProfiles } from '@/features/identity/user-agent-profiles';
+import { appendAuditEvent } from '@/features/diagnostics/audit';
+
+export const handleUserAgentRequest: BackgroundRequestHandler = async (request) => {
+  switch (request.action) {
+    case 'ua.catalog': {
+      const state = await getState();
+      return ok(getUserAgentProfiles(state.customUserAgentProfiles));
+    }
+    case 'ua.resolve': {
+      const state = await getState();
+      return ok(resolveUserAgent(
+        request.payload.url,
+        state.userAgentAssignments,
+        state.customUserAgentProfiles,
+      ));
+    }
+    case 'ua.profile.save': {
+      const { profile } = await saveUserAgentProfile(request.payload);
+      void appendAuditEvent({
+        category: 'settings',
+        action: 'ua.profile.save',
+        outcome: 'success',
+        summary: profile.name,
+      });
+      return ok(profile);
+    }
+    case 'ua.profile.delete': {
+      const state = await deleteUserAgentProfile(request.payload.id);
+      void appendAuditEvent({
+        category: 'settings', action: 'ua.profile.delete', outcome: 'success',
+      });
+      return ok(state);
+    }
+    case 'ua.site.apply': {
+      const input = request.payload;
+      const hostname = userAgentHostname(input.url);
+      const state = await applyUserAgentToSite(input.url, input.profileId);
+      const profile = getUserAgentProfiles(state.customUserAgentProfiles)
+        .find((item) => item.id === input.profileId)!;
+      void appendAuditEvent({
+        category: 'settings',
+        action: 'ua.site.apply',
+        outcome: 'success',
+        summary: `${hostname} · ${profile.name}`,
+      });
+      return ok(state);
+    }
+    case 'ua.site.reset': {
+      const hostname = userAgentHostname(request.payload.url);
+      const state = await resetUserAgentForSite(request.payload.url);
+      void appendAuditEvent({
+        category: 'settings',
+        action: 'ua.site.reset',
+        outcome: 'success',
+        summary: hostname,
+      });
+      return ok(state);
+    }
+    default: return undefined;
+  }
+};

src/app/background/index.ts

@@ -0,0 +1,514 @@
+import { browser, type Browser } from 'wxt/browser';
+import {
+  clearNetworkRequests, exportNetworkRequest, listNetworkRequests, networkCaptureStatus,
+  rebindNetworkCapturesForGrant, startNetworkCapture, stopNetworkCapture,
+} from '@/features/network-capture/service';
+import { capturedRequestEnginePayload } from '@/features/network-capture/workflows';
+import { initializeBrowserRecordingService } from '@/features/browser-recording/service';
+import { initializeDeepCaptureService } from '@/features/deep-capture/service';
+import { initializeBrowserTransformService } from '@/features/browser-transform/service';
+import { initializeFloatingPanelLifecycle } from '@/features/floating-panel/lifecycle';
+import type { ExtensionRequest, ExtensionResponse } from '@/types/messages';
+import { parseExtensionRequest } from '@/protocol/extension';
+import type {
+  BridgeGrantTarget, BrowserRequestAnalysisBundle, BrowserTarget, YakPocGenerateResult, YakitFuzzerOpenResult,
+} from '@/types/models';
+import { engineBridge } from '@/features/engine-bridge/service';
+import { getFrameInventory } from '@/features/page-context/frames';
+import { getActiveTab, getTab } from '@/platform/browser/targets';
+import {
+  actOnPageNode, capturePageContext, evalInPage, inspectPageNode, invokePageFunction,
+} from '@/features/page-context/service';
+import { getState, updateState } from '@/platform/storage/state';
+import {
+  reconcileUserAgentRuntime,
+} from '@/features/identity/user-agent-service';
+import { errorCode, ExtensionError } from '@/shared/errors';
+import { appendAuditEvent, clearAuditEvents, listAuditEvents } from '@/features/diagnostics/audit';
+import {
+  clearAgentActions, getAgentRuntime, setAgentRuntimeState,
+} from '@/features/agent-runtime/service';
+import {
+  configureGrantLifecycleHooks, currentActiveGrant, rebindGrantTargets,
+  registerGrantLifecycleListeners, replaceActiveGrant, requireActiveGrant,
+  restoreGrantLifecycle, revokeActiveGrant,
+} from '@/features/grants/lifecycle';
+import {
+  applyPolicyToBridge, applyPolicyToState, assertGrantPolicy, getEnterprisePolicy,
+} from '@/platform/policy/managed';
+import { createDiagnosticsBundle } from '@/features/diagnostics/export';
+import { getRuntimeMetrics, recordServiceWorkerStart, resetRuntimeMetrics } from '@/features/diagnostics/metrics';
+import {
+  configureAuthorizationPageContextCapture,
+  createBrowserIsolationProof,
+  deleteFirefoxContainerIdentity,
+  inspectBrowserIsolation,
+  listFirefoxContainerIdentities,
+  openFirefoxContainerIdentity,
+  openIncognitoIdentity,
+  resolveTabCookieStoreId,
+} from '@/features/authorization-testing/isolation';
+import { ok, fail } from './response';
+import {
+  requestTarget,
+  requiredRequestTarget,
+  senderBoundTabId,
+  targetTabId,
+} from './request-context';
+import { dispatchBackgroundHandlers, type BackgroundRequestHandler } from './router';
+import { handleProxyRequest } from './handlers/proxy';
+import { handleCookieRequest } from './handlers/cookies';
+import { handleUserAgentRequest } from './handlers/user-agent';
+import { handleRecordingRequest } from './handlers/recording';
+import { handleTransformRequest } from './handlers/transform';
+
+function originOf(url: string): string {
+  const parsed = new URL(url);
+  if (!['http:', 'https:'].includes(parsed.protocol)) throw new Error('只能授权 HTTP(S) 标签页');
+  return parsed.origin;
+}
+
+async function createGrantTargets(inputs: Array<{ tabId: number; frameId: number }>): Promise<BridgeGrantTarget[]> {
+  const unique = [...new Map(inputs.map((target) => [`${target.tabId}:${target.frameId}`, target])).values()];
+  const tabIds = [...new Set(unique.map((target) => target.tabId))];
+  const inventories = new Map(await Promise.all(tabIds.map(async (tabId) => [tabId, await getFrameInventory(tabId)] as const)));
+  return Promise.all(unique.map(async (input) => {
+    const tab = await getTab(input.tabId);
+    if (!tab.isolationContextId) {
+      throw new ExtensionError(
+        'isolation_unavailable',
+        `标签页 ${input.tabId} 无法确认身份隔离上下文，不能加入共享会话`,
+      );
+    }
+    const frame = inventories.get(input.tabId)?.find((item) => item.frameId === input.frameId);
+    if (!frame?.accessible || !frame.documentId || !frame.origin) {
+      throw new ExtensionError('target_unavailable', `Frame ${input.frameId} 当前不可访问，不能加入共享会话`);
+    }
+    originOf(`${frame.origin}/`);
+    return {
+      tabId: input.tabId,
+      frameId: frame.frameId,
+      documentId: frame.documentId,
+      isolationContextId: tab.isolationContextId,
+      cookieStoreId: tab.cookieStoreId,
+      origin: frame.origin,
+      grantedUrl: frame.url,
+      title: frame.isTop ? tab.title : `${tab.title} · ${frame.title || frame.name || `Frame ${frame.frameId}`}`,
+    };
+  }));
+}
+
+const domainHandlers: readonly BackgroundRequestHandler[] = [
+  handleProxyRequest,
+  handleCookieRequest,
+  handleUserAgentRequest,
+  handleRecordingRequest,
+  handleTransformRequest,
+];
+
+async function handleRequest(request: ExtensionRequest, sender: Browser.runtime.MessageSender): Promise<ExtensionResponse> {
+  const domainResponse = await dispatchBackgroundHandlers(request, sender, domainHandlers);
+  if (domainResponse !== undefined) return domainResponse;
+
+  switch (request.action) {
+    case 'state.get': {
+      await currentActiveGrant();
+      return ok(await getState());
+    }
+    case 'tab.active': {
+      const boundTabId = senderBoundTabId(sender);
+      return ok(boundTabId ? await getTab(boundTabId) : await getActiveTab());
+    }
+    case 'tab.get': return ok(await getTab(targetTabId(request.payload.tabId, sender)));
+    case 'tab.list': return ok((await inspectBrowserIsolation()).tabs);
+    case 'frame.list': return ok(await getFrameInventory(targetTabId(request.payload.tabId, sender)!));
+    case 'isolation.inspect': return ok(await inspectBrowserIsolation(request.payload.tabIds));
+    case 'isolation.proof.create': return ok(await createBrowserIsolationProof(
+      request.payload.leftTabId,
+      request.payload.rightTabId,
+    ));
+    case 'isolation.incognito.open': return ok(await openIncognitoIdentity(request.payload.url));
+    case 'isolation.container.open': return ok(await openFirefoxContainerIdentity(request.payload));
+    case 'isolation.container.list': return ok(await listFirefoxContainerIdentities());
+    case 'isolation.container.remove': return ok(await deleteFirefoxContainerIdentity(
+      request.payload.cookieStoreId,
+    ));
+    case 'authorization.engine.task': {
+      const encodedBytes = new TextEncoder().encode(JSON.stringify(request.payload.payload)).byteLength;
+      if (encodedBytes > 256 * 1024) {
+        throw new ExtensionError('payload_too_large', '授权测试任务参数不能超过 256 KiB');
+      }
+      return ok(await engineBridge.requestEngine(
+        'yakit.browser_authorization.task',
+        { schema: request.payload.schema, payload: request.payload.payload },
+        request.payload.timeoutMs,
+      ));
+    }
+    case 'authorization.yakit.open':
+      return ok(await engineBridge.requestEngine(
+        'yakit.browser_authorization.open',
+        { workspaceId: request.payload.workspaceId },
+      ));
+    case 'context.capture': {
+      const { tabId, frameId, documentId, ...options } = request.payload;
+      const target = await requiredRequestTarget({ tabId, frameId, documentId }, sender);
+      const context = await capturePageContext(options, target);
+      void appendAuditEvent({
+        category: 'capability', action: 'context.capture', outcome: 'success', targetTabId: target.tabId,
+        summary: `${context.document.interactive.length} 个节点，${context.diff.kind}`,
+      });
+      return ok(context);
+    }
+    case 'context.node.inspect': {
+      const input = request.payload;
+      const target = await requiredRequestTarget(input, sender);
+      return ok(await inspectPageNode(input.captureId, input.nodeId, target));
+    }
+    case 'context.node.action': {
+      const input = request.payload;
+      const target = await requiredRequestTarget(input, sender);
+      const result = await actOnPageNode(input.captureId, input.nodeId, input.action, target, input.value);
+      void appendAuditEvent({
+        category: 'capability', action: `context.node.${input.action}`, outcome: 'success', targetTabId: target.tabId,
+        summary: input.nodeId,
+      });
+      return ok(result);
+    }
+    case 'context.invoke': {
+      const input = request.payload;
+      return ok(await invokePageFunction(input.path, input.args, await requestTarget(input, sender), input.timeoutMs));
+    }
+    case 'context.eval': {
+      const input = request.payload;
+      return ok(await evalInPage(input.code, input.mode, await requestTarget(input, sender), input.timeoutMs));
+    }
+    case 'panel.update': {
+      const input = request.payload;
+      const policy = (await getEnterprisePolicy()).policy;
+      return ok(await updateState((current) => applyPolicyToState({
+        ...current, floatingPanel: {
+          enabled: input.enabled ?? current.floatingPanel.enabled,
+          side: input.side ?? current.floatingPanel.side,
+          y: typeof input.y === 'number' ? Math.min(Math.max(input.y, 0.08), 0.92) : current.floatingPanel.y,
+          displayMode: input.displayMode ?? current.floatingPanel.displayMode,
+          siteMode: input.siteMode ?? current.floatingPanel.siteMode,
+          siteOrigins: input.siteOrigins
+            ? [...new Set(input.siteOrigins.map((origin) => new URL(origin).origin))]
+            : current.floatingPanel.siteOrigins,
+          shortcutEnabled: input.shortcutEnabled ?? current.floatingPanel.shortcutEnabled,
+          autoCollapseFullscreen: input.autoCollapseFullscreen ?? current.floatingPanel.autoCollapseFullscreen,
+        },
+      }, policy)));
+    }
+    case 'grant.create': {
+      const input = request.payload;
+      const boundTabId = senderBoundTabId(sender);
+      if (boundTabId && input.targets.some((target) => target.tabId !== boundTabId)) {
+        throw new Error('页面内请求只能授权当前标签页');
+      }
+      const now = Date.now();
+      const targets = await createGrantTargets(input.targets);
+      const policy = (await getEnterprisePolicy()).policy;
+      const durationMinutes = assertGrantPolicy(policy, {
+        durationMinutes: input.durationMinutes,
+        origins: targets.map((target) => target.origin),
+        programEval: input.scopes.includes('browser.page.eval.program'),
+      });
+      const { state } = await replaceActiveGrant({
+        id: crypto.randomUUID(),
+        taskId: input.taskId || `manual-${crypto.randomUUID()}`,
+        targets,
+        scopes: [...new Set(input.scopes)],
+        createdAt: now,
+        expiresAt: now + durationMinutes * 60_000,
+      });
+      void appendAuditEvent({
+        category: 'grant', action: 'grant.create', outcome: 'success', taskId: state.activeGrant?.taskId,
+        targetTabId: state.activeGrant?.targets[0]?.tabId,
+        summary: `${state.activeGrant?.targets.length || 0} 个标签页，${state.activeGrant?.scopes.length || 0} 项能力`,
+      });
+      return ok(state);
+    }
+    case 'grant.refresh': {
+      if (senderBoundTabId(sender) !== undefined) {
+        throw new ExtensionError('permission_denied', '只有扩展工作区可以续接共享会话');
+      }
+      const grant = await requireActiveGrant();
+      const targets = await createGrantTargets(
+        grant.targets.map((target) => ({ tabId: target.tabId, frameId: target.frameId })),
+      );
+      for (const target of targets) {
+        const previous = grant.targets.find((item) => (
+          item.tabId === target.tabId && item.frameId === target.frameId
+        ));
+        if (!previous) {
+          throw new ExtensionError('target_denied', '续接结果包含未授权的页面');
+        }
+        if (
+          previous.isolationContextId !== target.isolationContextId
+          || previous.cookieStoreId !== target.cookieStoreId
+        ) {
+          throw new ExtensionError('isolation_stale', '页面的身份隔离上下文已经变化，请重新选择身份');
+        }
+        if (previous.origin !== target.origin) {
+          throw new ExtensionError('origin_changed', '页面已经跨来源导航，请重新选择身份');
+        }
+      }
+      const state = await rebindGrantTargets(grant.id, targets);
+      await rebindNetworkCapturesForGrant(grant.id, targets);
+      const refreshedDocuments = targets.filter((target) => {
+        const previous = grant.targets.find((item) => (
+          item.tabId === target.tabId && item.frameId === target.frameId
+        ));
+        return previous?.documentId !== target.documentId;
+      }).length;
+      void appendAuditEvent({
+        category: 'grant',
+        action: 'grant.refresh',
+        outcome: 'success',
+        taskId: grant.taskId,
+        targetTabId: targets[0]?.tabId,
+        summary: refreshedDocuments > 0
+          ? `已受控续接 ${refreshedDocuments} 个同源页面文档`
+          : '共享会话文档仍然有效',
+      });
+      return ok(state);
+    }
+    case 'grant.revoke': {
+      const { state } = await revokeActiveGrant();
+      return ok(state);
+    }
+    case 'handoff.resolve': {
+      const input = request.payload;
+      const state = await updateState((current) => {
+        if (!current.handoff || current.handoff.id !== input.id || current.handoff.state !== 'waiting_for_user') {
+          throw new ExtensionError('handoff_not_waiting', '人工接管请求不存在或已经结束');
+        }
+        return {
+          ...current,
+          handoff: { ...current.handoff, state: input.outcome, resolvedAt: Date.now() },
+        };
+      });
+      const handoff = state.handoff!;
+      await setAgentRuntimeState(input.outcome === 'completed' ? 'running' : 'paused', state.activeGrant);
+      await browser.action.setBadgeText({ text: '', tabId: handoff.target.tabId });
+      engineBridge.emitEvent('browser.handoff.changed', handoff);
+      void appendAuditEvent({
+        category: 'handoff', action: `handoff.${input.outcome}`, outcome: input.outcome === 'completed' ? 'success' : 'cancelled',
+        taskId: handoff.taskId, targetTabId: handoff.target.tabId,
+      });
+      return ok(state);
+    }
+    case 'network.capture.start': {
+      const input = request.payload;
+      const target = await requiredRequestTarget(input, sender);
+      const grant = (await getState()).activeGrant;
+      const grantTarget = grant?.targets.find((item) => (
+        item.tabId === target.tabId
+        && item.frameId === target.frameId
+        && (!item.documentId || !target.documentId || item.documentId === target.documentId)
+      ));
+      const owner: Parameters<typeof startNetworkCapture>[2] = grant && grantTarget
+        ? { kind: 'grant', grantId: grant.id, expiresAt: grant.expiresAt }
+        : undefined;
+      const status = await startNetworkCapture(target, input, owner);
+      void appendAuditEvent({
+        category: 'capability', action: 'network.capture.start', outcome: 'success', targetTabId: target.tabId,
+        summary: input.captureHeaders || input.captureBody ? '包含用户明确启用的敏感字段' : '仅元数据',
+      });
+      return ok(status);
+    }
+    case 'network.capture.status': return ok(await networkCaptureStatus(await requiredRequestTarget(request.payload, sender)));
+    case 'network.capture.list': {
+      const target = await requiredRequestTarget(request.payload, sender);
+      return ok(await listNetworkRequests(target, request.payload.limit));
+    }
+    case 'network.capture.clear': {
+      const target = await requiredRequestTarget(request.payload, sender);
+      const status = await clearNetworkRequests(target);
+      void appendAuditEvent({ category: 'capability', action: 'network.capture.clear', outcome: 'success', targetTabId: target.tabId });
+      return ok(status);
+    }
+    case 'network.capture.stop': {
+      const target = await requiredRequestTarget(request.payload, sender);
+      const status = await stopNetworkCapture(target);
+      void appendAuditEvent({ category: 'capability', action: 'network.capture.stop', outcome: 'success', targetTabId: target.tabId });
+      return ok(status);
+    }
+    case 'network.capture.export': {
+      const target = await requiredRequestTarget(request.payload, sender);
+      const exported = await exportNetworkRequest(target, request.payload.id);
+      void appendAuditEvent({ category: 'capability', action: 'network.capture.export', outcome: 'success', targetTabId: target.tabId });
+      return ok(exported);
+    }
+    case 'network.capture.send': {
+      const target = await requiredRequestTarget(request.payload, sender);
+      try {
+        const exported = await exportNetworkRequest(target, request.payload.id);
+        const result = await engineBridge.requestEngine<YakitFuzzerOpenResult>('yakit.web_fuzzer.open', {
+          rawRequestBase64: exported.rawRequestBase64,
+          isHttps: exported.isHttps,
+          tabName: `Browser · ${new URL(exported.url).hostname}`,
+        });
+        void appendAuditEvent({
+          category: 'capability', action: 'network.capture.send_to_fuzzer', outcome: 'success', targetTabId: target.tabId,
+          summary: `Web Fuzzer ${result.pageId}`,
+        });
+        return ok(result);
+      } catch (error) {
+        void appendAuditEvent({
+          category: 'capability', action: 'network.capture.send_to_fuzzer', outcome: 'error',
+          targetTabId: target.tabId, errorCode: errorCode(error),
+        });
+        throw error;
+      }
+    }
+    case 'network.capture.poc': {
+      const target = await requiredRequestTarget(request.payload, sender);
+      const result = await engineBridge.requestEngine<YakPocGenerateResult>(
+        'yakit.poc.generate',
+        await capturedRequestEnginePayload(target, request.payload.id, false),
+      );
+      void appendAuditEvent({ category: 'capability', action: 'network.capture.generate_poc', outcome: 'success', targetTabId: target.tabId });
+      return ok(result);
+    }
+    case 'network.capture.analysis': {
+      const target = await requiredRequestTarget(request.payload, sender);
+      const result = await engineBridge.requestEngine<BrowserRequestAnalysisBundle>(
+        'yakit.browser_request.prepare_analysis',
+        await capturedRequestEnginePayload(target, request.payload.id, true),
+      );
+      void appendAuditEvent({ category: 'capability', action: 'network.capture.prepare_analysis', outcome: 'success', targetTabId: target.tabId });
+      return ok(result);
+    }
+    case 'audit.list': return ok(await listAuditEvents(request.payload.limit));
+    case 'audit.clear': {
+      await clearAuditEvents();
+      return ok();
+    }
+    case 'agent.runtime.get': return ok(await getAgentRuntime());
+    case 'agent.pause': {
+      const grant = await requireActiveGrant();
+      engineBridge.cancelActiveRequests();
+      const runtime = await setAgentRuntimeState('paused', grant);
+      void appendAuditEvent({ category: 'grant', action: 'agent.pause', outcome: 'success', taskId: grant.taskId });
+      return ok(runtime);
+    }
+    case 'agent.resume': {
+      const grant = await requireActiveGrant();
+      const runtime = await setAgentRuntimeState('running', grant);
+      void appendAuditEvent({ category: 'grant', action: 'agent.resume', outcome: 'success', taskId: grant.taskId });
+      return ok(runtime);
+    }
+    case 'agent.actions.clear': return ok(await clearAgentActions());
+    case 'policy.status': return ok(await getEnterprisePolicy());
+    case 'diagnostics.export': return ok(await createDiagnosticsBundle(engineBridge.getStatus()));
+    case 'metrics.get': return ok(await getRuntimeMetrics());
+    case 'metrics.reset': return ok(await resetRuntimeMetrics());
+    case 'bridge.config.save': {
+      const config = applyPolicyToBridge(request.payload, (await getEnterprisePolicy()).policy);
+      const state = await updateState((current) => ({ ...current, bridge: config }));
+      if (config.autoConnect && config.pairedEngine) await engineBridge.connect(config);
+      else engineBridge.disconnect();
+      return ok(state);
+    }
+    case 'bridge.pair': {
+      const status = await engineBridge.startPairing();
+      void appendAuditEvent({ category: 'bridge', action: 'bridge.pair', outcome: 'success' });
+      return ok(status);
+    }
+    case 'bridge.pair.cancel': return ok(engineBridge.cancelPairing());
+    case 'bridge.pair.status': return ok(engineBridge.getPairingStatus());
+    case 'bridge.unpair': {
+      await engineBridge.unpair();
+      void appendAuditEvent({ category: 'bridge', action: 'bridge.unpair', outcome: 'success' });
+      return ok(await getState());
+    }
+    case 'bridge.connect': {
+      await engineBridge.connect();
+      void appendAuditEvent({ category: 'bridge', action: 'bridge.connect', outcome: 'success' });
+      return ok(engineBridge.getStatus());
+    }
+    case 'bridge.disconnect': {
+      engineBridge.disconnect();
+      void appendAuditEvent({ category: 'bridge', action: 'bridge.disconnect', outcome: 'success' });
+      return ok(engineBridge.getStatus());
+    }
+    case 'bridge.status': return ok(engineBridge.getStatus());
+    default: return fail('未知扩展操作');
+  }
+}
+
+let backgroundStarted = false;
+
+async function restoreBackgroundState(): Promise<void> {
+  const storedState = await restoreGrantLifecycle();
+  const state = applyPolicyToState(storedState, (await getEnterprisePolicy()).policy);
+  if (JSON.stringify(state.bridge) !== JSON.stringify(storedState.bridge)
+    || JSON.stringify(state.floatingPanel) !== JSON.stringify(storedState.floatingPanel)) {
+    await updateState(() => state);
+  }
+  try {
+    await reconcileUserAgentRuntime();
+  } catch (error) {
+    console.error('User-Agent runtime restoration failed', error);
+    void appendAuditEvent({
+      category: 'settings',
+      action: 'ua.runtime.restore',
+      outcome: 'error',
+      errorCode: errorCode(error),
+      summary: (error instanceof Error ? error.message : String(error)).slice(0, 512),
+    });
+  }
+  if (state.bridge.autoConnect && state.bridge.pairedEngine) {
+    await engineBridge.connect(state.bridge).catch(console.error);
+  }
+}
+
+export function runBackground(): void {
+  if (backgroundStarted) return;
+  backgroundStarted = true;
+
+  configureGrantLifecycleHooks({
+    cancelActiveRequests: () => engineBridge.cancelActiveRequests(),
+    emitHandoffChanged: (handoff) => engineBridge.emitEvent('browser.handoff.changed', handoff),
+  });
+  registerGrantLifecycleListeners();
+
+  browser.runtime.onMessage.addListener((
+    input: unknown,
+    sender: Browser.runtime.MessageSender,
+    sendResponse,
+  ) => {
+    if ([
+      'bridge.status.changed',
+      'bridge.pairing.status.changed',
+      'network.capture.changed',
+      'deep.capture.changed',
+    ].includes((input as { action?: string })?.action || '')) return undefined;
+    void Promise.resolve()
+      .then(() => parseExtensionRequest(input))
+      .then((request) => handleRequest(request, sender))
+      .then(sendResponse)
+      .catch((error) => sendResponse(fail(error)));
+    return true;
+  });
+
+  configureAuthorizationPageContextCapture(capturePageContext);
+  recordServiceWorkerStart();
+  initializeBrowserRecordingService();
+  initializeFloatingPanelLifecycle();
+  try {
+    initializeDeepCaptureService();
+  } catch (error) {
+    console.error('Deep Capture initialization failed', error);
+  }
+  try {
+    initializeBrowserTransformService();
+  } catch (error) {
+    console.error('Browser Transform initialization failed', error);
+  }
+  void restoreBackgroundState().catch((error) => {
+    console.error('Background state restoration failed', error);
+  });
+}

src/app/background/request-context.ts

@@ -0,0 +1,102 @@
+import { browser, type Browser } from 'wxt/browser';
+import type { BrowserTarget } from '@/types/models';
+import { ExtensionError } from '@/shared/errors';
+import { resolveDocumentTarget } from '@/platform/browser/targets';
+
+export function isFloatingSender(sender: Browser.runtime.MessageSender): boolean {
+  try {
+    const parsed = new URL(sender.url || '');
+    return parsed.origin === new URL(browser.runtime.getURL('/')).origin
+      && parsed.pathname === '/floating.html';
+  } catch {
+    return false;
+  }
+}
+
+export function senderBoundTabId(sender: Browser.runtime.MessageSender): number | undefined {
+  const extensionOrigin = new URL(browser.runtime.getURL('/')).origin;
+  const senderUrl = sender.url || '';
+  try {
+    const parsed = new URL(senderUrl);
+    if (parsed.origin === extensionOrigin && parsed.pathname !== '/floating.html') return undefined;
+  } catch {
+    // Non-URL senders remain bound to their browser tab below.
+  }
+  return sender.tab?.id;
+}
+
+export function targetTabId(
+  requested: number | undefined,
+  sender: Browser.runtime.MessageSender,
+): number | undefined {
+  const senderTabId = senderBoundTabId(sender);
+  if (senderTabId && requested && senderTabId !== requested) {
+    throw new ExtensionError('target_denied', '页面内请求不能操作其他标签页');
+  }
+  return senderTabId || requested;
+}
+
+export async function requestTarget(
+  input: { tabId?: number; frameId?: number; documentId?: string },
+  sender: Browser.runtime.MessageSender,
+): Promise<BrowserTarget | undefined> {
+  const boundTabId = senderBoundTabId(sender);
+  if (boundTabId && input.tabId && boundTabId !== input.tabId) {
+    throw new ExtensionError('target_denied', '页面内请求不能操作其他标签页');
+  }
+  if (boundTabId && !isFloatingSender(sender)) {
+    const frameId = sender.frameId ?? 0;
+    if (input.frameId !== undefined && input.frameId !== frameId) {
+      throw new ExtensionError('target_denied', '页面内请求不能操作其他 frame');
+    }
+    if (input.documentId && sender.documentId && input.documentId !== sender.documentId) {
+      throw new ExtensionError('stale_document', '目标页面已经刷新或导航，请重新选择');
+    }
+    return { tabId: boundTabId, frameId, documentId: sender.documentId };
+  }
+  const tabId = boundTabId || input.tabId;
+  if (!tabId) return undefined;
+  return resolveDocumentTarget({
+    tabId,
+    frameId: input.frameId ?? 0,
+    documentId: input.documentId,
+  });
+}
+
+export async function requiredRequestTarget(
+  input: { tabId?: number; frameId?: number; documentId?: string },
+  sender: Browser.runtime.MessageSender,
+): Promise<BrowserTarget> {
+  const target = await requestTarget(input, sender);
+  if (!target) {
+    throw new ExtensionError('target_unavailable', '请选择一个可访问的 HTTP(S) 标签页');
+  }
+  return target;
+}
+
+export async function requiredDebuggerTarget(
+  input: { tabId?: number; frameId?: number; documentId?: string },
+  sender: Browser.runtime.MessageSender,
+): Promise<BrowserTarget> {
+  const boundTabId = senderBoundTabId(sender);
+  if (boundTabId && input.tabId && boundTabId !== input.tabId) {
+    throw new ExtensionError('target_denied', '页面内请求不能操作其他标签页');
+  }
+  const tabId = boundTabId || input.tabId;
+  if (!tabId) {
+    throw new ExtensionError('target_unavailable', '请选择一个可访问的 HTTP(S) 标签页');
+  }
+  const frameId = boundTabId && !isFloatingSender(sender)
+    ? sender.frameId ?? 0
+    : input.frameId ?? 0;
+  if (boundTabId && !isFloatingSender(sender)
+    && input.frameId !== undefined && input.frameId !== frameId) {
+    throw new ExtensionError('target_denied', '页面内请求不能操作其他 frame');
+  }
+  const frame = await browser.webNavigation.getFrame({ tabId, frameId });
+  if (!frame) throw new ExtensionError('target_unavailable', '目标 frame 已不存在');
+  if (input.documentId && frame.documentId && input.documentId !== frame.documentId) {
+    throw new ExtensionError('stale_document', '目标页面已经刷新或导航');
+  }
+  return { tabId, frameId, documentId: frame.documentId || input.documentId };
+}

src/app/background/response.ts

@@ -0,0 +1,15 @@
+import type { ExtensionResponse } from '@/types/messages';
+import { errorCode, ExtensionError } from '@/shared/errors';
+
+export function ok<T>(data?: T): ExtensionResponse<T> {
+  return { ok: true, data };
+}
+
+export function fail(error: unknown): ExtensionResponse {
+  return {
+    ok: false,
+    error: error instanceof Error ? error.message : String(error),
+    errorCode: errorCode(error),
+    errorData: error instanceof ExtensionError ? error.details : undefined,
+  };
+}

src/app/background/router.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it, vi } from 'vitest';
+import type { Browser } from 'wxt/browser';
+import type { BackgroundRequestHandler } from './router';
+import { dispatchBackgroundHandlers } from './router';
+
+describe('background domain router', () => {
+  it('stops at the first domain that owns an action', async () => {
+    const first: BackgroundRequestHandler = vi.fn(async () => undefined);
+    const second: BackgroundRequestHandler = vi.fn(async () => ({ ok: true, data: 'handled' }));
+    const third: BackgroundRequestHandler = vi.fn(async () => ({ ok: true, data: 'wrong' }));
+    const request = { action: 'state.get' as const };
+    const sender = {} as Browser.runtime.MessageSender;
+
+    await expect(dispatchBackgroundHandlers(request, sender, [first, second, third]))
+      .resolves.toEqual({ ok: true, data: 'handled' });
+    expect(first).toHaveBeenCalledOnce();
+    expect(second).toHaveBeenCalledOnce();
+    expect(third).not.toHaveBeenCalled();
+  });
+
+  it('returns undefined when no domain owns the action', async () => {
+    const handler: BackgroundRequestHandler = vi.fn(async () => undefined);
+    await expect(dispatchBackgroundHandlers(
+      { action: 'state.get' },
+      {} as Browser.runtime.MessageSender,
+      [handler],
+    )).resolves.toBeUndefined();
+  });
+});

src/app/background/router.ts

@@ -0,0 +1,19 @@
+import type { Browser } from 'wxt/browser';
+import type { ExtensionRequest, ExtensionResponse } from '@/types/messages';
+
+export type BackgroundRequestHandler = (
+  request: ExtensionRequest,
+  sender: Browser.runtime.MessageSender,
+) => Promise<ExtensionResponse | undefined>;
+
+export async function dispatchBackgroundHandlers(
+  request: ExtensionRequest,
+  sender: Browser.runtime.MessageSender,
+  handlers: readonly BackgroundRequestHandler[],
+): Promise<ExtensionResponse | undefined> {
+  for (const handler of handlers) {
+    const response = await handler(request, sender);
+    if (response !== undefined) return response;
+  }
+  return undefined;
+}

src/assets/icon/icon.tsx

@@ -1,168 +0,0 @@
-import Icon from "@ant-design/icons";
-import { CustomIconComponentProps } from "@ant-design/icons/lib/components/Icon";
-import React from "react";
-
-interface IconProps extends CustomIconComponentProps {
-  onClick: (e: React.MouseEvent) => void;
-  ref?: any;
-}
-
-const X = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-  >
-    <path
-      d="M4 12L12 4M4 4L12 12"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-/**
- * @description Icon/Outline/x
- */
-export const XIcon = (props: Partial<IconProps>) => {
-  return <Icon component={X} {...props} />;
-};
-
-const Check = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-  >
-    <path
-      d="M3.33337 8.66669L6.00004 11.3334L12.6667 4.66669"
-      stroke="#56C991"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-/**
- * @description Icon/Outline/check
- */
-export const CheckIcon = (props: Partial<IconProps>) => {
-  return <Icon component={Check} {...props} />;
-};
-
-const PencilAlt = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-  >
-    <path
-      d="M7.33329 3.33334H3.99996C3.26358 3.33334 2.66663 3.93029 2.66663 4.66667V12C2.66663 12.7364 3.26358 13.3333 3.99996 13.3333H11.3333C12.0697 13.3333 12.6666 12.7364 12.6666 12V8.66667M11.7238 2.39052C12.2445 1.86983 13.0887 1.86983 13.6094 2.39052C14.1301 2.91122 14.1301 3.75544 13.6094 4.27614L7.88557 10H5.99996L5.99996 8.11438L11.7238 2.39052Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-/**
- * @description Icon/Outline/pencil-alt
- */
-export const PencilAltIcon = (props: Partial<IconProps>) => {
-  return <Icon component={PencilAlt} {...props} />;
-};
-
-const Refresh = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-  >
-    <path
-      d="M2.66663 2.66669V6.00002H3.0543M13.292 7.33335C12.964 4.70248 10.7197 2.66669 7.99996 2.66669C5.76171 2.66669 3.84549 4.04547 3.0543 6.00002M3.0543 6.00002H5.99996M13.3333 13.3334V10H12.9456M12.9456 10C12.1544 11.9546 10.2382 13.3334 7.99996 13.3334C5.28021 13.3334 3.03595 11.2976 2.70789 8.66669M12.9456 10H9.99996"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-/**
- * @description Icon/Outline/refresh
- */
-export const RefreshIcon = (props: Partial<IconProps>) => {
-  return <Icon component={Refresh} {...props} />;
-};
-
-const Exit = () => (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M9.33333 6.66668C9.10226 6.78107 8.87965 6.90988 8.66667 7.0519C7.05869 8.12418 6 9.95027 6 12.0227C6 15.3239 8.68629 18 12 18C15.3137 18 18 15.3239 18 12.0227C18 9.95027 16.9413 8.12418 15.3333 7.0519C15.1204 6.90988 14.8977 6.78107 14.6667 6.66668M12 5.33334V10.6667"
-      stroke="#F7544A"
-      strokeLinecap="round"
-    />
-  </svg>
-);
-/**
- * @description 退出
- */
-export const ExitIcon = (props: Partial<IconProps>) => {
-  return <Icon component={Exit} {...props} />;
-};
-
-const PlusSm = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-  >
-    <path
-      d="M8 4V8M8 8V12M8 8H12M8 8L4 8"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-/**
- * @description Icon/Outline/plus-sm
- */
-export const PlusSmIcon = (props: Partial<IconProps>) => {
-  return <Icon component={PlusSm} {...props} />;
-};
-
-const Trash = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-  >
-    <path
-      d="M12.6666 4.66667L12.0884 12.7617C12.0386 13.4594 11.458 14 10.7585 14H5.24145C4.54193 14 3.96135 13.4594 3.91151 12.7617L3.33329 4.66667M6.66663 7.33333V11.3333M9.33329 7.33333V11.3333M9.99996 4.66667V2.66667C9.99996 2.29848 9.70148 2 9.33329 2H6.66663C6.29844 2 5.99996 2.29848 5.99996 2.66667V4.66667M2.66663 4.66667H13.3333"
-      stroke="#F7544A"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-/**
- * @description Icon/Outline/trash
- */
-export const TrashIcon = (props: Partial<IconProps>) => {
-  return <Icon component={Trash} {...props} />;
-};

src/components/Contro.css

@@ -1,73 +0,0 @@
-.Contro {
-  display: flex;
-  align-items: center;
-  height: 40px;
-  padding: 8px 16px;
-  font-size: 12px;
-}
-
-.Contro-error-bg {
-  background-color: rgba(244, 115, 107, .10);
-}
-
-.Contro-success-bg {
-  background-color: rgba(86, 201, 145, .10);
-}
-
-.Contro-cont-input {
-  height: 24px;
-  margin-right: 8px;
-}
-
-.Contro-lable {
-  color: #85899E;
-}
-
-.Contro-cont {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex: 1;
-}
-
-.Contro-cont-text-error {
-  color: #F6544A;
-}
-
-.Contro-cont-text-success {
-  color: #56C991;
-}
-
-.Contro-handle-icon {
-  display: flex;
-  align-items: center;
-}
-
-.Contro-handle-icon svg {
-  cursor: pointer;
-}
-
-.contro-handle-icon-check {
-  margin-left: 8px;
-}
-
-.icon-p {
-  display: inline-block;
-  padding: 4px;
-}
-
-.icon-p svg {
-  color: #85899E;
-}
-
-.Contro-cont span.anticon:hover {
-  background: #F0F1F3;
-}
-
-.grey-icon svg {
-  color: #85899E;
-}
-
-.icon-active:active svg {
-  color: #F28B44;
-}

src/components/Contro.tsx

@@ -1,191 +0,0 @@
-import React, {useEffect, useMemo, useRef, useState} from "react";
-import {Divider, Tooltip, Input} from "antd";
-import classNames from "classnames";
-import {
-    CheckIcon,
-    ExitIcon,
-    PencilAltIcon,
-    RefreshIcon,
-    XIcon,
-} from "@assets/icon/icon";
-import {wsc} from "@network/chrome";
-import "./Contro.css";
-
-interface ControProps {
-}
-
-export const Contro: React.FC<ControProps> = () => {
-    const [isEdit, setIsEdit] = useState<boolean>(false);
-    const [connected, setConnected] = useState(false);
-    const [autoFindFailedReason, setAutoFindFailedReason] = useState<string>("");
-    const [enginePort, setEnginePort] = useState<string>("");
-    const [enginePortTemp, setEnginePortTemp] = useState<string>(enginePort);
-    const enginePortRef = useRef<string>(enginePort);
-
-    useEffect(() => {
-        enginePortRef.current = enginePort;
-    }, [enginePort]);
-
-    useEffect(() => {
-        const yakitConnectInfo = localStorage.getItem("yakit-connect");
-        if (!yakitConnectInfo) {
-            findPort(11212, 11222);
-        } else {
-            const {port, connected} = JSON.parse(yakitConnectInfo);
-            setConnected(connected);
-            setEnginePort(port + "");
-            setAutoFindFailedReason("");
-        }
-
-        wsc.onWSCMessage((message) => {
-            if (message.action === wsc.ActionType.STATUS) {
-                if (message.connected === false) {
-                    handleConnectFail();
-                } else {
-                    localStorage.setItem(
-                        "yakit-connect",
-                        JSON.stringify({connected: true, port: message.port})
-                    );
-                    setEnginePort(message.port + "");
-                    setConnected(true);
-                    setAutoFindFailedReason("");
-                }
-            }
-        });
-    }, []);
-
-    const findPort = (port: number, max: number) => {
-        const ws = new WebSocket(`ws://127.0.0.1:${port}`);
-        ws.onclose = (e: CloseEvent) => {
-            if (enginePortRef.current) {
-                handleConnectFail();
-                return;
-            }
-            if (e.reason !== `FoundYakitWebSocketController` && port + 1 <= max) {
-                setTimeout(() => findPort(port + 1, max), 200);
-            }
-
-            if (port + 1 > max) {
-                setConnected(false);
-                setEnginePort("");
-                setAutoFindFailedReason("Cannot found Yakit");
-                localStorage.setItem("yakit-connect", "");
-            }
-        };
-        ws.onopen = () => {
-            setConnected(true);
-            setEnginePort(port + "");
-            ws.close(1000, "FoundYakitWebSocketController");
-            connectPort(port);
-        };
-    };
-
-    const handleConnectFail = () => {
-        setConnected(false);
-        setAutoFindFailedReason("Yakit WebSocket Controller Connect Fail");
-        localStorage.setItem("yakit-connect", "");
-    };
-
-    const connectPort = (port: number) => {
-        setAutoFindFailedReason("");
-        wsc.connect(port);
-    };
-
-    const safeConnected = useMemo(() => {
-        return connected && enginePort;
-    }, [connected, enginePort]);
-
-    const failConnected = useMemo(() => {
-        return !connected && autoFindFailedReason;
-    }, [connected, autoFindFailedReason]);
-
-    return (
-        <>
-            {safeConnected || failConnected ? (
-                <div
-                    className={classNames("Contro", {
-                        ["Contro-success-bg"]: safeConnected,
-                        ["Contro-error-bg"]: failConnected,
-                    })}
-                >
-                    <div className="Contro-lable">Yakit 引擎连接状态：</div>
-                    <div className="Contro-cont">
-                        {isEdit ? (
-                            <>
-                                <Input
-                                    rootClassName="Contro-cont-input"
-                                    value={enginePortTemp}
-                                    placeholder="输入范围 11212 - 11222"
-                                    onChange={(e) => {
-                                        const value = e.target.value;
-                                        setEnginePortTemp(value);
-                                    }}
-                                />
-                                <div className="Contro-handle-icon">
-                                    <XIcon
-                                        className="grey-icon icon-p icon-active"
-                                        onClick={() => {
-                                            setIsEdit(false);
-                                        }}
-                                    />
-                                    <CheckIcon
-                                        className="contro-handle-icon-check icon-p"
-                                        onClick={() => {
-                                            if (enginePortTemp) {
-                                                setIsEdit(false);
-                                                setEnginePort(enginePortTemp);
-                                                connectPort(Number(enginePortTemp));
-                                            }
-                                        }}
-                                    />
-                                </div>
-                            </>
-                        ) : (
-                            <>
-                                <div
-                                    className={classNames("Contro-cont-text", {
-                                        ["Contro-cont-text-success"]: safeConnected,
-                                        ["Contro-cont-text-error"]: failConnected,
-                                    })}
-                                >
-                                    {safeConnected && "已连接（" + enginePort + "）"}
-                                    {failConnected &&
-                                        (enginePort
-                                            ? autoFindFailedReason + "（" + enginePort + "）"
-                                            : autoFindFailedReason)}
-                                </div>
-                                <div className="Contro-handle-icon">
-                                    <Tooltip title="修改监听端口">
-                                        <PencilAltIcon
-                                            className="grey-icon icon-p icon-active"
-                                            onClick={() => {
-                                                setIsEdit(true);
-                                                setEnginePortTemp(enginePort);
-                                            }}
-                                        />
-                                    </Tooltip>
-                                    <Divider type="vertical" style={{height: 16}}/>
-                                    {safeConnected && (
-                                        <ExitIcon onClick={() => wsc.disconnect()}/>
-                                    )}
-                                    {failConnected && (
-                                        <RefreshIcon
-                                            className="grey-icon icon-active"
-                                            onClick={() => {
-                                                if (enginePort) {
-                                                    connectPort(Number(enginePort));
-                                                } else {
-                                                    findPort(11212, 11222);
-                                                }
-                                            }}
-                                        />
-                                    )}
-                                </div>
-                            </>
-                        )}
-                    </div>
-                </div>
-            ) : null}
-        </>
-    );
-};

src/components/EvalInTab.tsx

@@ -1,77 +0,0 @@
-import React, {useEffect, useState} from "react";
-import {Button, Input} from "antd";
-import TextArea from "antd/lib/input/TextArea";
-import {wsc} from "@network/chrome";
-
-interface EvalInTabProps {
-}
-
-export const EvalInTab: React.FC<EvalInTabProps> = () => {
-    const [funcName, setFuncName] = useState("");
-    const [inputArgsData, setInputArgsData] = useState("");
-    const [code, setCode] = useState("");
-
-    useEffect(() => {
-        wsc.onWSCMessage((message) => {
-            if (message.action === wsc.ActionType.TO_EXTENSION_PAGE) {
-                console.log("res:", message.result);
-                alert("from content script: " + JSON.stringify(message.result));
-            }
-        });
-    }, []);
-
-    const handleClick = async () => {
-        try {
-            const [tab] = await wsc.getTab();
-            await chrome.runtime.sendMessage({
-                action: wsc.ActionType.INJECT_SCRIPT,
-                tabId: tab.id,
-                value: {mode: "CONTENT_CALL_FUNCTION", fn_name: funcName, args: inputArgsData},
-            });
-        } catch (error) {
-        }
-    };
-
-    const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-        setInputArgsData(event.target.value);
-    };
-
-
-    const handleEvalCodeClick = async () => {
-        try {
-            const [tab] = await wsc.getTab();
-            await chrome.runtime.sendMessage({
-                action: wsc.ActionType.INJECT_SCRIPT,
-                tabId: tab.id,
-                value: {
-                    mode: "CONTENT_EVAL_CODE",
-                    code: code,
-                },
-            });
-        } catch (error) {
-        }
-    }
-
-    return (
-        <div>
-            <Input
-                value={funcName}
-                onChange={(e) => setFuncName(e.target.value)}
-                placeholder="Enter function name"
-            ></Input>
-            <TextArea
-                value={inputArgsData}
-                onChange={handleInputChange}
-                placeholder="Enter function args"
-            />
-            <Button onClick={handleClick}>eval func in tab</Button>
-
-            <TextArea
-                value={code}
-                onChange={(e) => setCode(e.target.value)}
-                placeholder="Enter your expression (e.g., 22 * 33)"
-            />
-            <Button onClick={handleEvalCodeClick}>eval code in tab</Button>
-        </div>
-    );
-};

src/components/Proxifier.css

@@ -1,113 +0,0 @@
-.Prox-title-wrap {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 24px 8px;
-}
-
-.Prox-title-wrap-left {
-  display: flex;
-  align-items: center;
-}
-
-.Prox-title-wrap-left .prox-title {
-  margin-right: 4px;
-  color: #31343F;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.Prox-title-wrap-left .prox-number {
-  display: inline-block;
-  width: 18px;
-  height: 16px;
-  text-align: center;
-  color: #85899E;
-  border-radius: 8px;
-  background: #F0F1F3;
-  font-size: 10px;
-}
-
-.Prox-title-wrap-right {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.Prox-title-wrap-right .Prox-add-text {
-  margin-right: 4px;
-  color: var(--yakit-primary);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.Prox-title-wrap-right .Prox-add-icon svg {
-  color: var(--yakit-primary);
-}
-
-.Prox-list-wrap {
-  overflow-y: auto;
-  max-height: 305px;
-  padding: 16px;
-  padding-top: 0;
-}
-
-.add-list {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 28px;
-  cursor: pointer;
-  border: 1px solid #EAECF3;
-  border-radius: 4px;
-  background-color: #FFFFFF;
-}
-
-.add-list:hover {
-  border: 1px solid var(--yakit-primary);
-}
-
-.add-list .add-list-icon svg {
-  color: #85899E;
-}
-
-.Prox-list-wrap .add-list .add-list-text {
-  margin-left: 4px;
-  color: #31343F;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.Prox-list-wrap .Prox-list-item-wrap {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 8px;
-  border-radius: 8px;
-}
-
-.Prox-list-wrap .Prox-list-item-wrap:hover {
-  background-color: #F8F8F8;
-}
-
-.Prox-list-item-space .ant-space-item .ant-space-compact {
-  height: 28px;
-}
-
-.Prox-list-item-space .ant-space-item .ant-space-compact .ant-select-single {
-  height: 28px;
-}
-
-.Prox-list-wrap .Prox-list-item-wrap:hover .proxy-list-del-icon {
-  display: block;
-}
-
-.proxy-list-del-icon {
-  display: none;
-  cursor: pointer;
-  padding: 4px;
-}
-
-.proxy-list-del-icon:hover {
-  background: #F0F1F3;
-}

src/components/Proxifier.tsx

@@ -1,310 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Space, Select, Input, Switch } from "antd";
-import { PlusSmIcon, TrashIcon } from "@assets/icon/icon";
-import { wsc } from "@network/chrome";
-import "./Proxifier.css";
-
-type Scheme = "http" | "socks5";
-interface ProxyConfig {
-  id: string;
-  scheme: Scheme;
-  host: string;
-  port: string;
-  hostStatus: "error" | "";
-  portStatus: "error" | "";
-  open: boolean;
-  proxy: string;
-}
-
-export interface ProxifierProps {}
-export const Proxifier: React.FC<ProxifierProps> = () => {
-  const [proxyList, setProxyList] = useState<ProxyConfig[]>(() => {
-    const storageProxyList = localStorage.getItem("yakit-proxy-list") || "[]";
-    return JSON.parse(storageProxyList);
-  });
-
-  useEffect(() => {
-    localStorage.setItem("yakit-proxy-list", JSON.stringify(proxyList));
-  }, [proxyList]);
-
-  const addNewProxyListItem = (
-    scheme: Scheme,
-    host: string,
-    port: string,
-    open: boolean,
-    proxy: string
-  ) => {
-    const proxyItem: ProxyConfig = {
-      id: Math.random() + "",
-      scheme: scheme as Scheme,
-      host: host,
-      port: port,
-      hostStatus: "",
-      portStatus: "",
-      open: open,
-      proxy: proxy,
-    };
-    return proxyItem;
-  };
-
-  const parseUrl = (url: string) => {
-    const regex = /^(.*?):\/\/(.*?):(\d+)/;
-    const match = url.match(regex);
-    if (match) {
-      const scheme = match[1];
-      const host = match[2];
-      const port = match[3];
-      return {
-        scheme,
-        host,
-        port,
-      };
-    } else {
-      return null; // 不匹配格式
-    }
-  };
-
-  useEffect(() => {
-    wsc.updateProxyStatus();
-
-    wsc.onProxyStatusMessage((msg) => {
-      if (msg.proxy === undefined || msg.enable === undefined) {
-        return;
-      }
-      if (msg.proxy === "" || msg.enable === false) {
-        if (proxyList.some((i) => i.open)) {
-          const copyProxyList = [...proxyList];
-          copyProxyList.forEach((i) => {
-            i.open = false;
-          });
-          setProxyList(copyProxyList);
-        }
-        return;
-      }
-
-      if (msg.proxy && msg.enable) {
-        const copyProxyList = [...proxyList];
-        let newProxyItem: ProxyConfig = undefined;
-        if (!copyProxyList.length) {
-          const urlObj = parseUrl(msg.proxy);
-          if (urlObj) {
-            newProxyItem = addNewProxyListItem(
-              urlObj.scheme as Scheme,
-              urlObj.host,
-              urlObj.port,
-              true,
-              msg.proxy
-            );
-          }
-        } else {
-          const proxyExist = copyProxyList.some((i) => i.proxy === msg.proxy);
-          if (proxyExist) {
-            const proxyOpen = copyProxyList.some(
-              (i) => i.open && i.proxy === msg.proxy
-            );
-            if (!proxyOpen) {
-              copyProxyList.forEach((i) => {
-                i.open = false;
-              });
-              for (let i = 0; i < copyProxyList.length; i++) {
-                if (copyProxyList[i].proxy === msg.proxy) {
-                  copyProxyList[i].open = true;
-                  break;
-                }
-              }
-            }
-          } else {
-            copyProxyList.forEach((i) => {
-              i.open = false;
-            });
-            const urlObj = parseUrl(msg.proxy);
-            if (urlObj) {
-              newProxyItem = addNewProxyListItem(
-                urlObj.scheme as Scheme,
-                urlObj.host,
-                urlObj.port,
-                true,
-                msg.proxy
-              );
-            }
-          }
-        }
-
-        if (newProxyItem) {
-          copyProxyList.unshift(newProxyItem);
-        }
-        setProxyList(copyProxyList);
-      }
-    });
-  }, []);
-
-  const hostOnchange = (value: string, id: string) => {
-    const ipPattern = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
-    const domainPattern = /^[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-    const copyProxyList = structuredClone(proxyList);
-    if (value === "" || ipPattern.test(value) || domainPattern.test(value)) {
-      copyProxyList.forEach((i) => {
-        if (i.id === id) {
-          i.hostStatus = "";
-          i.host = value;
-          i.proxy = i.scheme + "://" + value + ":" + i.port;
-        }
-      });
-    } else {
-      copyProxyList.forEach((i) => {
-        if (i.id === id) {
-          i.hostStatus = "error";
-          i.host = value;
-          i.proxy = i.scheme + "://" + value + ":" + i.port;
-        }
-      });
-    }
-    setProxyList(copyProxyList);
-  };
-
-  const portOnchange = (value: string, id: string) => {
-    const portNumber = parseInt(value, 10);
-    const copyProxyList = structuredClone(proxyList);
-    if (
-      value === "" ||
-      (/^\d+$/.test(value) && portNumber >= 0 && portNumber <= 65535)
-    ) {
-      copyProxyList.forEach((i) => {
-        if (i.id === id) {
-          i.portStatus = "";
-          const port = value === "" ? "" : portNumber + "";
-          i.port = port;
-          i.proxy = i.scheme + "://" + i.host + ":" + port;
-        }
-      });
-    } else {
-      copyProxyList.forEach((i) => {
-        if (i.id === id) {
-          i.portStatus = "error";
-          i.port = value;
-          i.proxy = i.scheme + "://" + i.host + ":" + value;
-        }
-      });
-    }
-    setProxyList(copyProxyList);
-  };
-
-  return (
-    <div className="Prox">
-      <div className="Prox-title-wrap">
-        <div className="Prox-title-wrap-left">
-          <span className="prox-title">设置代理</span>
-          <span className="prox-number">{proxyList.length}</span>
-        </div>
-        <div
-          className="Prox-title-wrap-right"
-          onClick={() => {
-            setProxyList([
-              ...proxyList,
-              addNewProxyListItem("http", "", "", false, "http://"),
-            ]);
-          }}
-        >
-          <span className="Prox-add-text">添加</span>
-          <PlusSmIcon className="Prox-add-icon" />
-        </div>
-      </div>
-      <div className="Prox-list-wrap">
-        {proxyList.length ? (
-          proxyList.map((item) => (
-            <div className="Prox-list-item-wrap" key={item.id}>
-              <Space className="Prox-list-item-space">
-                <Space.Compact>
-                  <Select
-                    value={item.scheme}
-                    style={{ width: 88 }}
-                    disabled={item.open}
-                    onChange={(value, option) => {
-                      const copyProxyList = structuredClone(proxyList);
-                      copyProxyList.forEach((i) => {
-                        if (i.id === item.id) {
-                          i.scheme = value;
-                          i.proxy = value + "://" + i.host + ":" + i.port;
-                        }
-                      });
-                      setProxyList(copyProxyList);
-                    }}
-                  >
-                    <Select.Option value="http">HTTP</Select.Option>
-                    <Select.Option value="socks5">Socks5</Select.Option>
-                  </Select>
-                  <Input
-                    value={item.host}
-                    style={{ width: 136 }}
-                    disabled={item.open}
-                    status={item.hostStatus}
-                    onChange={(e) => hostOnchange(e.target.value, item.id)}
-                  />
-                  <Input
-                    value={item.port}
-                    style={{ width: 64 }}
-                    disabled={item.open}
-                    status={item.portStatus}
-                    onChange={(e) => portOnchange(e.target.value, item.id)}
-                  />
-                </Space.Compact>
-              </Space>
-              {!item.open && (
-                <TrashIcon
-                  className="proxy-list-del-icon"
-                  onClick={() => {
-                    setProxyList(proxyList.filter((i) => i.id !== item.id));
-                  }}
-                />
-              )}
-              <Switch
-                checkedChildren="启"
-                unCheckedChildren="停"
-                value={item.open}
-                disabled={
-                  item.hostStatus === "error" ||
-                  item.portStatus === "error" ||
-                  item.host === "" ||
-                  item.port === ""
-                }
-                onChange={(checked: boolean) => {
-                  wsc.clearProxy();
-                  const copyProxyList = structuredClone(proxyList);
-                  copyProxyList.forEach((i) => {
-                    if (i.id === item.id) {
-                      i.open = checked;
-                      if (checked) {
-                        wsc.setProxy(item.scheme, item.host, Number(item.port));
-                      }
-                    } else {
-                      i.open = false;
-                    }
-                  });
-                  setProxyList(copyProxyList);
-                }}
-              />
-            </div>
-          ))
-        ) : (
-          <div
-            className="add-list"
-            onClick={() => {
-              setProxyList([
-                addNewProxyListItem(
-                  "http",
-                  "127.0.0.1",
-                  "8083",
-                  false,
-                  "http://127.0.0.1:8083"
-                ),
-              ]);
-            }}
-          >
-            <PlusSmIcon className="add-list-icon" />
-            <span className="add-list-text">添加</span>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

src/components/brand/Brand.tsx

@@ -0,0 +1,21 @@
+import { cn } from '@/lib/cn';
+
+export function YakMark({ className, alt = 'Yak' }: { className?: string; alt?: string }) {
+  return <img className={cn('yak-mark', className)} src="/yak.svg" alt={alt} />;
+}
+
+export function YakitMark({ className }: { className?: string }) {
+  return <img className={cn('yakit-mark', className)} src="/icon/yakitlogo.png" alt="Yakit" />;
+}
+
+export function ProductBrand({ compact = false, className }: { compact?: boolean; className?: string }) {
+  return (
+    <div className={cn('product-brand', compact && 'product-brand--compact', className)}>
+      <span className="product-brand__art"><YakMark /></span>
+      <span className="product-brand__copy">
+        <strong>Yakit Browser Agent</strong>
+        {!compact && <small>Authenticated browser security workspace</small>}
+      </span>
+    </div>
+  );
+}

src/components/ui/badge.tsx

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+
+export function Badge({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn('ui-badge', className)} {...props} />;
+}

src/components/ui/button.tsx

@@ -0,0 +1,31 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ButtonHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+
+const buttonVariants = cva('ui-button', {
+  variants: {
+    variant: {
+      primary: 'ui-button--primary',
+      secondary: 'ui-button--secondary',
+      ghost: 'ui-button--ghost',
+      danger: 'ui-button--danger',
+    },
+    size: {
+      sm: 'ui-button--sm',
+      md: 'ui-button--md',
+      icon: 'ui-button--icon',
+    },
+  },
+  defaultVariants: { variant: 'secondary', size: 'md' },
+});
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+export function Button({ className, variant, size, asChild, ...props }: ButtonProps) {
+  const Component = asChild ? Slot : 'button';
+  return <Component className={cn(buttonVariants({ variant, size }), className)} {...props} />;
+}

src/components/ui/field.tsx

@@ -0,0 +1,16 @@
+import type { LabelHTMLAttributes, ReactNode } from 'react';
+import { cn } from '@/lib/cn';
+
+export function Field({ label, hint, children, className, ...props }: {
+  label: string;
+  hint?: string;
+  children: ReactNode;
+} & Omit<LabelHTMLAttributes<HTMLLabelElement>, 'children'>) {
+  return (
+    <label className={cn('ui-field', className)} {...props}>
+      <span className="ui-field__label">{label}</span>
+      {children}
+      {hint && <small className="ui-field__hint">{hint}</small>}
+    </label>
+  );
+}

src/components/ui/switch.tsx

@@ -0,0 +1,11 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import type { ComponentProps } from 'react';
+import { cn } from '@/lib/cn';
+
+export function Switch({ className, ...props }: ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root className={cn('ui-switch', className)} {...props}>
+      <SwitchPrimitive.Thumb className="ui-switch__thumb" />
+    </SwitchPrimitive.Root>
+  );
+}

src/components/ui/tabs.tsx

@@ -0,0 +1,17 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import type { ComponentProps } from 'react';
+import { cn } from '@/lib/cn';
+
+export const Tabs = TabsPrimitive.Root;
+
+export function TabsList({ className, ...props }: ComponentProps<typeof TabsPrimitive.List>) {
+  return <TabsPrimitive.List className={cn('ui-tabs-list', className)} {...props} />;
+}
+
+export function TabsTrigger({ className, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return <TabsPrimitive.Trigger className={cn('ui-tabs-trigger', className)} {...props} />;
+}
+
+export function TabsContent({ className, ...props }: ComponentProps<typeof TabsPrimitive.Content>) {
+  return <TabsPrimitive.Content className={cn('ui-tabs-content', className)} {...props} />;
+}

src/components/ui/tooltip.tsx

@@ -0,0 +1,23 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import type { ComponentProps, ReactNode } from 'react';
+import { cn } from '@/lib/cn';
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+
+export function Tooltip({ label, children, side = 'top' }: {
+  label: string;
+  children: ReactNode;
+  side?: ComponentProps<typeof TooltipPrimitive.Content>['side'];
+}) {
+  return (
+    <TooltipPrimitive.Root>
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content side={side} sideOffset={6} className={cn('ui-tooltip')}>
+          {label}
+          <TooltipPrimitive.Arrow className="ui-tooltip__arrow" />
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
+  );
+}

src/entrypoints/agent.content/index.ts

@@ -0,0 +1,317 @@
+import { browser } from 'wxt/browser';
+import { installPageWorldBridge } from '@/features/page-context/content-bridge';
+import { installPageRecorderBridge } from '@/features/browser-recording/content-bridge';
+import { isStateStorageChange } from '@/protocol/storage';
+import type { ActiveTabInfo, BridgeStatus, ExtensionState } from '@/types/models';
+import {
+  createLazyUnloadController,
+  floatingPanelVisible,
+  isFloatingPanelShortcut,
+  mergeFloatingTabUpdate,
+  resolvePanelPlacement,
+  shouldCollapseForFullscreen,
+} from '@/features/floating-panel/host-controller';
+import { createOpaqueId } from '@/shared/id';
+
+const PANEL_IDLE_UNLOAD_MS = 60_000;
+
+const shellCss = `
+  :host { all: initial; position: fixed !important; inset: 0 !important; z-index: 2147483646 !important; pointer-events: none !important; }
+  .floating-panel { position: fixed; width: 46px; height: 46px; transform: translateY(-50%); pointer-events: auto; transition: width .16s ease; }
+  .floating-panel--left { left: 0; }
+  .floating-panel--right { right: 0; }
+  .floating-panel.is-expanded { width: min(326px, calc(100vw - 8px)); }
+  .floating-panel__header { position: absolute; top: 0; z-index: 2; width: 46px; height: 46px; display: flex; align-items: center; overflow: hidden; border: 1px solid #d7dce1; background: #fff; color: #1d232b; box-sizing: border-box; touch-action: none; user-select: none; transition: width .16s ease; }
+  .floating-panel--left .floating-panel__header { left: 0; }
+  .floating-panel--right .floating-panel__header { right: 0; }
+  .floating-panel.is-expanded .floating-panel__header { width: 100%; border-radius: 8px 8px 0 0; box-shadow: 0 7px 20px rgba(20,24,28,.14); }
+  .floating-panel--right.is-expanded .floating-panel__header { flex-direction: row-reverse; }
+  .floating-panel__brand { position: relative; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; box-shadow: 0 8px 20px rgba(20,24,28,.18); transition: background-color .16s ease, box-shadow .16s ease; }
+  .floating-panel__brand:hover { background: #f1f3f5; }
+  :host([data-theme='dark']) .floating-panel__header { border-color: #343a40; background: #1d232b; color: #f1f3f5; }
+  :host([data-theme='dark']) .floating-panel__brand { background: #1d232b; }
+  :host([data-theme='dark']) .floating-panel__brand:hover { background: #262d36; }
+  .floating-panel--left:not(.is-expanded) .floating-panel__header { border-left: 0; border-radius: 0 23px 23px 0; }
+  .floating-panel--right:not(.is-expanded) .floating-panel__header { border-right: 0; border-radius: 23px 0 0 23px; }
+  .floating-panel--left:not(.is-expanded) .floating-panel__brand { border-radius: 0 23px 23px 0; }
+  .floating-panel--right:not(.is-expanded) .floating-panel__brand { border-radius: 23px 0 0 23px; }
+  .floating-panel.is-expanded .floating-panel__brand { box-shadow: none; }
+  .floating-panel__brand:focus-visible { outline: 2px solid #ee7815; outline-offset: -3px; }
+  .floating-panel__brand img { width: 42px; height: 42px; display: block; object-fit: contain; pointer-events: none; }
+  .floating-panel__signal { position: absolute; right: 5px; bottom: 5px; width: 7px; height: 7px; border: 1px solid #fff; border-radius: 50%; background: #90979e; }
+  :host([data-theme='dark']) .floating-panel__signal { border-color: #1d232b; }
+  .floating-panel__signal.connected { background: #45b77d; }
+  .floating-panel__signal.connecting, .floating-panel__signal.negotiating { background: #e3a632; }
+  .floating-panel__signal.error { background: #dc5e5e; }
+  .floating-panel__title { min-width: 0; flex: 1; padding: 0 9px; display: none; }
+  .floating-panel.is-expanded .floating-panel__title { display: grid; gap: 1px; }
+  .floating-panel__title strong, .floating-panel__title span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: system-ui, sans-serif; }
+  .floating-panel__title strong { font-size: 12px; line-height: 16px; font-weight: 650; }
+  .floating-panel__title span { color: #697078; font-size: 10px; line-height: 14px; }
+  :host([data-theme='dark']) .floating-panel__title span { color: #a7afb8; }
+  .floating-panel__grip { width: 20px; flex: 0 0 20px; display: none; color: #90979e; font: 14px/1 system-ui, sans-serif; letter-spacing: -2px; }
+  .floating-panel.is-expanded .floating-panel__grip { display: block; }
+  iframe { width: 100%; height: 320px; margin-top: 46px; display: block; border: 0; border-radius: 0 0 8px 8px; box-shadow: 0 10px 28px rgba(22,28,33,.18); }
+  .floating-panel:not(.is-expanded) iframe { visibility: hidden; pointer-events: none; }
+`;
+
+async function send<T>(action: string, payload?: unknown): Promise<T> {
+  const response = await browser.runtime.sendMessage({ action, payload }) as { ok?: boolean; data?: T; error?: string };
+  if (!response?.ok) throw new Error(response?.error || action);
+  return response.data as T;
+}
+
+export default defineContentScript({
+  matches: ['http://*/*', 'https://*/*'],
+  runAt: 'document_start',
+
+  async main(ctx) {
+    if (import.meta.env.FIREFOX) {
+      await installPageRecorderBridge(ctx).catch((error) => {
+        console.warn('[Yakit Browser Agent] Firefox page recorder bridge is unavailable.', error);
+      });
+    }
+    if ((import.meta.env.FIREFOX && import.meta.env.MODE !== 'store')
+      || (!import.meta.env.FIREFOX && import.meta.env.MODE !== 'production' && import.meta.env.MODE !== 'store')) {
+      await installPageWorldBridge(ctx).catch((error) => {
+        console.warn('[Yakit Browser Agent] MAIN-world bridge is unavailable; continuing without page Eval/Invoke.', error);
+      });
+    }
+
+    const host = document.createElement('yakit-browser-agent');
+    const shadow = host.attachShadow({ mode: 'open' });
+    const style = document.createElement('style');
+    style.textContent = shellCss;
+    const panel = document.createElement('div');
+    panel.className = 'floating-panel floating-panel--right';
+    const header = document.createElement('div');
+    header.className = 'floating-panel__header';
+    const launcher = document.createElement('button');
+    launcher.type = 'button';
+    launcher.className = 'floating-panel__brand';
+    launcher.setAttribute('aria-label', '展开 Yakit Browser Agent');
+    const logo = document.createElement('img');
+    logo.src = browser.runtime.getURL('/yak.svg');
+    logo.alt = 'Yak';
+    logo.draggable = false;
+    const signal = document.createElement('span');
+    signal.className = 'floating-panel__signal disconnected';
+    launcher.append(logo, signal);
+    const headerTitle = document.createElement('span');
+    headerTitle.className = 'floating-panel__title';
+    const headerPageTitle = document.createElement('strong');
+    const headerPageUrl = document.createElement('span');
+    headerTitle.append(headerPageTitle, headerPageUrl);
+    const grip = document.createElement('span');
+    grip.className = 'floating-panel__grip';
+    grip.textContent = '⠿';
+    grip.setAttribute('aria-hidden', 'true');
+    header.append(launcher, headerTitle, grip);
+    panel.append(header);
+    shadow.append(style, panel);
+    document.documentElement.append(host);
+
+    // Launcher theme follows the extension appearance setting (settings.appearance.v1), falling back to the OS scheme.
+    const themeKey = 'settings.appearance.v1';
+    const applyTheme = (theme?: string) => {
+      host.dataset.theme = theme === 'light' || theme === 'dark'
+        ? theme
+        : (globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    };
+    void browser.storage.local.get(themeKey).then((stored) => {
+      applyTheme((stored[themeKey] as { theme?: string } | undefined)?.theme);
+    });
+
+    let state: ExtensionState | undefined;
+    let currentTab: ActiveTabInfo | undefined;
+    let frame: HTMLIFrameElement | undefined;
+    let expanded = false;
+    let drag: { pointerId: number; startX: number; startY: number; moved: boolean } | undefined;
+    const frameChannel = createOpaqueId('floating-channel');
+
+    const setBridgeStatus = (status: BridgeStatus) => {
+      signal.className = `floating-panel__signal ${status.state}`;
+    };
+    const updateHeaderPage = () => {
+      headerPageTitle.textContent = currentTab?.title || document.title || '当前页面';
+      headerPageTitle.title = headerPageTitle.textContent;
+      headerPageUrl.textContent = currentTab?.url || location.href;
+      headerPageUrl.title = headerPageUrl.textContent;
+    };
+    const postTabToFrame = () => {
+      if (!frame?.contentWindow || !currentTab) return;
+      frame.contentWindow.postMessage({
+        channel: 'yakit-floating-host', token: frameChannel, type: 'tab.changed',
+        tab: { tabId: currentTab.id, title: currentTab.title, url: currentTab.url },
+      }, '*');
+    };
+    const applyTabUpdate = (update: { tabId: number; title?: string; url?: string }) => {
+      const next = mergeFloatingTabUpdate(currentTab, update);
+      if (next === currentTab) return;
+      currentTab = next;
+      updateHeaderPage();
+      postTabToFrame();
+      if (state) applyState(state);
+    };
+    const adjustForEdgeConflict = () => {
+      if (host.style.display === 'none') return;
+      const x = state?.floatingPanel.side === 'left' ? 8 : innerWidth - 8;
+      const desiredY = (state?.floatingPanel.y || 0.46) * innerHeight;
+      const previous = host.style.visibility;
+      host.style.visibility = 'hidden';
+      const behind = document.elementFromPoint(x, desiredY);
+      host.style.visibility = previous;
+      if (!behind) return;
+      const position = getComputedStyle(behind).position;
+      const bounds = behind.getBoundingClientRect();
+      if (!['fixed', 'sticky'].includes(position) || bounds.width < 32 || bounds.height < 32) return;
+      const offset = desiredY < innerHeight / 2 ? bounds.bottom + 30 : bounds.top - 30;
+      panel.style.top = `${Math.min(Math.max(offset / innerHeight, 0.08), 0.92) * 100}%`;
+    };
+    const applyState = (next: ExtensionState) => {
+      const previousHandoffId = state?.handoff?.state === 'waiting_for_user' ? state.handoff.id : undefined;
+      state = next;
+      const visible = floatingPanelVisible(next, currentTab, location.origin);
+      host.style.display = visible ? '' : 'none';
+      panel.classList.toggle('floating-panel--left', next.floatingPanel.side === 'left');
+      panel.classList.toggle('floating-panel--right', next.floatingPanel.side === 'right');
+      panel.style.top = `${next.floatingPanel.y * 100}%`;
+      if (!visible) collapse();
+      const nextHandoff = next.handoff?.state === 'waiting_for_user' && next.handoff.target.tabId === currentTab?.id
+        ? next.handoff
+        : undefined;
+      if (nextHandoff && nextHandoff.id !== previousHandoffId) expand();
+      requestAnimationFrame(adjustForEdgeConflict);
+    };
+    const ensureFrame = () => {
+      if (frame) return;
+      frame = document.createElement('iframe');
+      frame.title = 'Yakit Browser Agent';
+      frame.src = `${browser.runtime.getURL('/floating.html')}?tabId=${currentTab?.id || ''}&channel=${encodeURIComponent(frameChannel)}`;
+      frame.addEventListener('load', postTabToFrame, { once: true });
+      panel.prepend(frame);
+    };
+    const unloadFrame = () => {
+      frame?.remove();
+      frame = undefined;
+    };
+    const lazyUnload = createLazyUnloadController(PANEL_IDLE_UNLOAD_MS, unloadFrame);
+    function collapse() {
+      expanded = false;
+      panel.classList.remove('is-expanded');
+      launcher.setAttribute('aria-label', '展开 Yakit Browser Agent');
+      lazyUnload.schedule();
+    }
+    const expand = () => {
+      lazyUnload.cancel();
+      ensureFrame();
+      expanded = true;
+      panel.classList.add('is-expanded');
+      launcher.setAttribute('aria-label', '收起 Yakit Browser Agent');
+    };
+
+    const [initialState, initialTab, initialBridge] = await Promise.all([
+      send<ExtensionState>('state.get'),
+      send<ActiveTabInfo>('tab.active').catch(() => undefined),
+      send<BridgeStatus>('bridge.status'),
+    ]);
+    currentTab = initialTab;
+    updateHeaderPage();
+    applyState(initialState);
+    setBridgeStatus(initialBridge);
+
+    header.addEventListener('pointerdown', (event) => {
+      if (event.button !== 0) return;
+      drag = { pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, moved: false };
+      header.setPointerCapture(event.pointerId);
+    });
+    header.addEventListener('pointermove', (event) => {
+      if (!drag || drag.pointerId !== event.pointerId) return;
+      if (Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) > 4) drag.moved = true;
+      if (!drag.moved) return;
+      const { side, y } = resolvePanelPlacement(event.clientX, event.clientY, innerWidth, innerHeight);
+      panel.classList.toggle('floating-panel--left', side === 'left');
+      panel.classList.toggle('floating-panel--right', side === 'right');
+      panel.style.top = `${y * 100}%`;
+    });
+    header.addEventListener('pointerup', (event) => {
+      if (!drag || drag.pointerId !== event.pointerId) return;
+      const moved = drag.moved;
+      drag = undefined;
+      if (moved) {
+        const { side, y } = resolvePanelPlacement(event.clientX, event.clientY, innerWidth, innerHeight);
+        void send<ExtensionState>('panel.update', { side, y }).then(applyState).catch(() => undefined);
+      } else if (expanded) collapse(); else expand();
+    });
+    header.addEventListener('pointercancel', () => { drag = undefined; });
+
+    const onStorageChange = (changes: Record<string, unknown>) => {
+      if (isStateStorageChange(changes)) void send<ExtensionState>('state.get').then(applyState).catch(() => undefined);
+      if (themeKey in changes) applyTheme((changes[themeKey] as { newValue?: { theme?: string } } | undefined)?.newValue?.theme);
+    };
+    const onRuntimeMessage = (message: unknown) => {
+      const input = message as { action?: string; payload?: unknown };
+      if (input?.action === 'bridge.status.changed' && input.payload) setBridgeStatus(input.payload as BridgeStatus);
+      if (input?.action === 'floating.tab.changed' && input.payload) {
+        applyTabUpdate(input.payload as { tabId: number; title?: string; url?: string });
+      }
+    };
+    const onFrameMessage = (event: MessageEvent) => {
+      const data = event.data as { channel?: string; token?: string; type?: string; height?: number };
+      if (event.source !== frame?.contentWindow || data?.channel !== 'yakit-floating-host' || data.token !== frameChannel) return;
+      if (data.type === 'collapse') collapse();
+      if (data.type === 'resize' && typeof data.height === 'number' && frame) {
+        const availableHeight = Math.max(160, Math.min(480, innerHeight - 62));
+        frame.style.height = `${Math.min(Math.max(Math.ceil(data.height), 160), availableHeight)}px`;
+      }
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (!state) return;
+      const target = event.target as HTMLElement | null;
+      const editable = Boolean(target?.isContentEditable || target?.closest('input, textarea, select, [contenteditable="true"]'));
+      if (!isFloatingPanelShortcut(state.floatingPanel, event, editable)) return;
+      if (host.style.display === 'none') return;
+      event.preventDefault();
+      if (expanded) collapse(); else expand();
+    };
+    const onFullscreenChange = () => {
+      if (state && shouldCollapseForFullscreen(state.floatingPanel, Boolean(document.fullscreenElement))) collapse();
+    };
+    const onResize = () => requestAnimationFrame(adjustForEdgeConflict);
+    const syncDocumentMetadata = () => {
+      if (!currentTab) return;
+      applyTabUpdate({ tabId: currentTab.id, title: document.title, url: location.href });
+    };
+    let titleObserver: MutationObserver | undefined;
+    const installTitleObserver = () => {
+      if (titleObserver || !document.head) return;
+      titleObserver = new MutationObserver(syncDocumentMetadata);
+      titleObserver.observe(document.head, { subtree: true, childList: true, characterData: true });
+      syncDocumentMetadata();
+    };
+    if (document.head) installTitleObserver();
+    else document.addEventListener('DOMContentLoaded', installTitleObserver, { once: true });
+    browser.storage.onChanged.addListener(onStorageChange);
+    browser.runtime.onMessage.addListener(onRuntimeMessage);
+    globalThis.addEventListener('message', onFrameMessage);
+    globalThis.addEventListener('keydown', onKeyDown, true);
+    globalThis.addEventListener('popstate', syncDocumentMetadata);
+    globalThis.addEventListener('hashchange', syncDocumentMetadata);
+    document.addEventListener('fullscreenchange', onFullscreenChange);
+    globalThis.addEventListener('resize', onResize);
+    ctx.onInvalidated(() => {
+      lazyUnload.dispose();
+      titleObserver?.disconnect();
+      document.removeEventListener('DOMContentLoaded', installTitleObserver);
+      browser.storage.onChanged.removeListener(onStorageChange);
+      browser.runtime.onMessage.removeListener(onRuntimeMessage);
+      globalThis.removeEventListener('message', onFrameMessage);
+      globalThis.removeEventListener('keydown', onKeyDown, true);
+      globalThis.removeEventListener('popstate', syncDocumentMetadata);
+      globalThis.removeEventListener('hashchange', syncDocumentMetadata);
+      document.removeEventListener('fullscreenchange', onFullscreenChange);
+      globalThis.removeEventListener('resize', onResize);
+      host.remove();
+    });
+  },
+});

src/entrypoints/agent.content/style.css

@@ -0,0 +1,86 @@
+html, body { width: 100%; height: 100%; margin: 0; pointer-events: none; }
+
+.floating-panel {
+  position: fixed;
+  z-index: 2147483646;
+  width: 46px;
+  transform: translateY(-50%);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  font-size: var(--text-md);
+  letter-spacing: 0;
+  filter: drop-shadow(0 9px 20px rgba(20, 24, 28, .2));
+  transition: width .18s ease;
+  pointer-events: auto;
+}
+.floating-panel--left { left: 0; }
+.floating-panel--right { right: 0; }
+.floating-panel.is-expanded { width: min(326px, calc(100vw - 8px)); }
+
+.floating-panel__body {
+  overflow: hidden;
+  border: 1px solid var(--border-strong);
+  border-top: 0;
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
+  background: var(--surface);
+  box-shadow: var(--shadow-md);
+}
+.floating-tabs { width: auto; height: 34px; margin: 8px 10px 0; padding: 3px; display: grid; grid-template-columns: repeat(3, 1fr); border: 0; border-radius: 10px; background: var(--surface-subtle); }
+.floating-tabs .ui-tabs-trigger { min-width: 0; height: 28px; display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 8px; font-size: var(--text-sm); }
+.floating-tab-content { min-height: 208px; padding: 10px; display: grid; align-content: start; gap: 10px; }
+.floating-section-heading { height: 28px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
+
+.floating-option-list { max-height: 224px; overflow-y: auto; display: grid; gap: 4px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
+.floating-option-list::-webkit-scrollbar { width: 8px; }
+.floating-option-list::-webkit-scrollbar-track { background: transparent; }
+.floating-option-list::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--border-strong); }
+.floating-option-list > button { width: 100%; min-height: 46px; padding: 6px 10px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--foreground); text-align: left; transition: background-color .13s ease; }
+.floating-option-list > button:hover { background: var(--surface-subtle); }
+.floating-option-list > button.is-active { background: var(--primary-soft); color: var(--primary-text); }
+.floating-radio { width: 15px; height: 15px; flex: 0 0 auto; padding: 2.5px; border: 1.5px solid var(--border-strong); border-radius: 50%; background-clip: content-box; transition: border-color .13s ease; }
+.floating-option-list > button.is-active .floating-radio { border-color: var(--primary); background-color: var(--primary); }
+.floating-option-list strong, .floating-option-list small { display: block; }
+.floating-option-list > button > span { min-width: 0; }
+.floating-option-list strong { font-size: var(--text-md); font-weight: 600; line-height: 17px; }
+.floating-option-list small { margin-top: 2px; color: var(--muted); font-size: var(--text-sm); line-height: 15px; }
+
+.floating-page-meta { min-width: 0; padding: 9px 12px; display: grid; gap: 3px; border-radius: var(--radius-md); background: var(--surface-subtle); }
+.floating-page-meta strong, .floating-page-meta span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.floating-page-meta strong { font-size: var(--text-md); font-weight: 600; }
+.floating-page-meta span { color: var(--muted); font-size: var(--text-sm); }
+
+.floating-result { min-height: 34px; padding: 4px 6px 4px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: var(--radius-md); background: var(--success-soft); color: var(--success); font-size: var(--text-sm); }
+
+.floating-status-row { min-height: 54px; padding: 8px 10px; display: grid; grid-template-columns: 8px 1fr auto; gap: 9px; align-items: center; border-radius: var(--radius-md); background: var(--surface-subtle); }
+.floating-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
+.floating-dot.connected { background: var(--success); }
+.floating-dot.connecting { background: var(--warning); }
+.floating-dot.negotiating { background: var(--warning); }
+.floating-dot.error { background: var(--danger); }
+.floating-status-row strong, .floating-status-row small { display: block; }
+.floating-status-row strong { font-size: var(--text-md); font-weight: 600; }
+.floating-status-row small { margin-top: 2px; color: var(--muted); font-size: var(--text-sm); }
+
+.floating-agent-task { min-height: 46px; padding: 8px 8px 8px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; border-radius: var(--radius-md); background: var(--success-soft); }
+.floating-agent-task.paused, .floating-agent-task.waiting_for_human { background: var(--warning-soft); }
+.floating-agent-task strong, .floating-agent-task small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.floating-agent-task strong { color: var(--success); font-size: var(--text-md); font-weight: 600; }
+.floating-agent-task.paused strong, .floating-agent-task.waiting_for_human strong { color: var(--warning); }
+.floating-agent-task small { margin-top: 3px; color: var(--muted); font-size: var(--text-sm); }
+
+.floating-share-row { min-height: 54px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: var(--radius-md); background: var(--surface-subtle); }
+.floating-share-row strong, .floating-share-row small { display: block; }
+.floating-share-row strong { font-size: var(--text-md); font-weight: 600; }
+.floating-share-row small { margin-top: 3px; color: var(--muted); font-size: var(--text-sm); }
+
+.floating-handoff { min-height: 112px; padding: 12px; display: grid; align-content: space-between; gap: 12px; border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--surface)); border-radius: var(--radius-md); background: var(--warning-soft); }
+.floating-handoff__copy { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
+.floating-handoff__copy > svg { margin-top: 1px; color: var(--warning); }
+.floating-handoff__copy strong, .floating-handoff__copy small { display: block; }
+.floating-handoff__copy strong { color: var(--warning); font-size: var(--text-md); font-weight: 600; line-height: 17px; }
+.floating-handoff__copy small { margin-top: 4px; color: var(--muted); font-size: var(--text-sm); line-height: 16px; overflow-wrap: anywhere; }
+.floating-handoff__actions { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
+
+.floating-notice { margin: 0 10px 10px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--danger-soft); color: var(--danger); font-size: var(--text-sm); line-height: 1.45; }
+.spin { animation: floating-spin .8s linear infinite; }
+@keyframes floating-spin { to { transform: rotate(360deg); } }

src/entrypoints/background.ts

@@ -0,0 +1,6 @@
+import { runBackground } from '@/app/background';
+
+export default defineBackground({
+  type: 'module',
+  main: runBackground,
+});

src/entrypoints/floating/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Yakit Browser Agent</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./main.tsx"></script>
+</body>
+</html>

src/entrypoints/floating/main.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { FloatingPanel } from '@/features/floating-panel/FloatingPanel';
+import type { ActiveTabInfo, BridgeStatus, ExtensionState } from '@/types/models';
+import { request } from '@/platform/messaging/runtime';
+import { watchTheme } from '@/platform/storage/appearance';
+import '@/styles/global.css';
+import '../agent.content/style.css';
+import './style.css';
+
+watchTheme();
+
+function FloatingApp() {
+  const [initial, setInitial] = useState<{ state: ExtensionState; tab?: ActiveTabInfo; bridge: BridgeStatus }>();
+  const [error, setError] = useState('');
+  const hostChannel = new URLSearchParams(location.search).get('channel') || '';
+
+  useEffect(() => {
+    const tabId = Number(new URLSearchParams(location.search).get('tabId'));
+    void Promise.all([
+      request('state.get'),
+      Number.isSafeInteger(tabId) && tabId > 0
+        ? request('tab.get', { tabId }).catch(() => undefined)
+        : Promise.resolve(undefined),
+      request('bridge.status'),
+    ]).then(([state, tab, bridge]) => setInitial({ state, tab, bridge }))
+      .catch((reason) => setError(reason instanceof Error ? reason.message : String(reason)));
+  }, []);
+
+  if (error) return <div className="floating-frame-error">{error}</div>;
+  if (!initial) return <div className="floating-frame-loading">正在加载</div>;
+  return (
+    <FloatingPanel
+      initialState={initial.state}
+      initialTab={initial.tab}
+      initialBridge={initial.bridge}
+      hostChannel={hostChannel}
+    />
+  );
+}
+
+createRoot(document.getElementById('app')!).render(
+  <TooltipProvider delayDuration={350}><FloatingApp /></TooltipProvider>,
+);

src/entrypoints/floating/style.css

@@ -0,0 +1,6 @@
+html, body, #app { width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; overflow: hidden; }
+body { background: transparent; }
+.floating-panel.floating-panel--embedded { position: relative; inset: auto; width: 100%; height: auto; transform: none; filter: none; }
+.floating-panel--embedded .floating-panel__body { max-height: 100%; overflow: auto; box-shadow: none; }
+.floating-frame-loading, .floating-frame-error { height: 100%; display: grid; place-items: center; padding: 16px; box-sizing: border-box; color: var(--muted); background: var(--surface); font: 13px var(--font-sans); }
+.floating-frame-error { color: var(--danger); }

src/entrypoints/options/App.css

@@ -0,0 +1,818 @@
+/* Options 工作台 —— 基于 src/styles/tokens.css 令牌,暗色由 html[data-theme='dark'] 自动切换 */
+
+code, pre { font-family: var(--font-mono); }
+pre { margin: 0; }
+
+input[type='checkbox'] { width: 15px; height: 15px; flex: 0 0 auto; padding: 0; accent-color: var(--primary); }
+
+/* ---------- 原生按钮(组件库之外的 <button>) ---------- */
+.primary-button, .danger-button, .icon-button,
+.page-heading > button:not(.ui-button),
+.editor-actions > button:not(.ui-button),
+.panel-title > button:not(.ui-button) {
+  min-height: 36px;
+  padding: 0 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--foreground);
+  font-size: var(--text-md);
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
+}
+.page-heading > button:not(.ui-button):hover,
+.editor-actions > button:not(.ui-button):hover,
+.panel-title > button:not(.ui-button):hover { border-color: var(--muted); background: var(--surface-subtle); }
+.primary-button { border-color: var(--primary-strong); background: var(--primary-strong); color: var(--primary-on-strong); }
+.primary-button:hover { border-color: var(--primary-strong-hover); background: var(--primary-strong-hover); }
+.danger-button { border-color: color-mix(in srgb, var(--danger) 35%, var(--surface)); color: var(--danger); }
+.danger-button:hover { background: var(--danger-soft); }
+.icon-button { width: 34px; height: 34px; min-height: 34px; padding: 0; }
+.icon-button:hover { background: var(--surface-subtle); }
+.icon-button.danger { color: var(--danger); }
+.icon-button.danger:hover { background: var(--danger-soft); }
+.primary-button:disabled, .danger-button:disabled, .icon-button:disabled,
+.page-heading > button:not(.ui-button):disabled,
+.editor-actions > button:not(.ui-button):disabled { border-color: var(--border); background: var(--surface-subtle); color: var(--muted); cursor: not-allowed; }
+.primary-button:focus-visible, .danger-button:focus-visible, .icon-button:focus-visible,
+.page-heading > button:not(.ui-button):focus-visible,
+.editor-actions > button:not(.ui-button):focus-visible,
+.panel-title > button:not(.ui-button):focus-visible,
+.data-row:focus-visible, .network-row:focus-visible, .recording-traces button:focus-visible,
+.recording-pipeline-step > button:focus-visible,
+.task-workflow-list button:focus-visible, .context-node-list button:focus-visible,
+.sidebar nav button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--focus);
+}
+
+/* ---------- 布局骨架 ---------- */
+.app-shell { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
+/* 所有单列纵向 grid 容器必须显式 minmax(0,1fr),否则子元素 max-content 会撑破窄屏 */
+.content-area, .section-view, .settings-form, .list-pane, .editor-pane, .rule-editor,
+.pairing-workspace, .panel-policy-settings, .grant-editor, .protocol-panel,
+.recording-section, .network-inspector, .context-primary, .context-inspector,
+.context-inspector > section, .context-diff, .context-inventory, .context-node-browser,
+.context-mode, .context-json, .context-utility-panel, .tab-picker, .tab-picker-group, .data-list,
+.task-workflow-list, .cookie-transfer, .network-artifact { grid-template-columns: minmax(0, 1fr); }
+.workspace { min-width: 0; position: relative; }
+.content-area { max-width: 1440px; margin: 0 auto; padding: 22px 28px 36px; display: grid; gap: 16px; }
+.workspace-loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: var(--text-md); }
+.spin { animation: spin .8s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes pulse { 50% { opacity: .35; } }
+
+/* ---------- 侧栏(与全局表面一致,暗色主题随令牌切换) ---------- */
+.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--surface); color: var(--foreground); }
+.sidebar-brand { height: 64px; padding: 0 14px; display: flex; align-items: center; border-bottom: 1px solid var(--border); }
+.sidebar-brand .product-brand { width: 100%; color: var(--foreground); }
+.sidebar nav { min-height: 0; padding: 10px 10px 16px; overflow-y: auto; display: grid; gap: 10px; scrollbar-width: thin; }
+.sidebar-group { display: grid; gap: 2px; }
+.sidebar-group__label { min-height: 24px; padding: 0 10px; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; }
+.sidebar-group__label svg { color: var(--primary); }
+.sidebar nav button { width: 100%; height: 40px; padding: 0 10px; display: grid; grid-template-columns: 20px 1fr 14px; align-items: center; gap: 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--muted-strong); font-size: var(--text-md); font-weight: 500; text-align: left; cursor: pointer; transition: background-color .14s ease, color .14s ease; }
+.sidebar nav button:hover { background: var(--surface-subtle); color: var(--foreground); }
+.sidebar nav button.active { background: var(--surface-subtle); color: var(--foreground); box-shadow: inset 3px 0 0 var(--primary); }
+.sidebar nav button.active svg:first-child { color: var(--primary); }
+.sidebar nav button > svg:last-child { opacity: 0; }
+.sidebar nav button.active > svg:last-child { opacity: 1; }
+.sidebar-theme { margin-top: auto; padding: 12px 14px; display: grid; gap: 7px; border-top: 1px solid var(--border); }
+.sidebar-theme > span { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
+.sidebar-theme select { height: 34px; }
+.sidebar-status { min-height: 64px; padding: 12px 14px; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; border-top: 1px solid var(--border); }
+.sidebar-yakit-mark { position: relative; width: 28px; height: 28px; }
+.sidebar-yakit-mark .yakit-mark { width: 28px; height: 28px; border-radius: 6px; }
+.sidebar-status strong, .sidebar-status span { display: block; }
+.sidebar-status strong { font-size: var(--text-sm); line-height: 17px; }
+.sidebar-status div > span { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: var(--text-xs); line-height: 14px; white-space: nowrap; text-overflow: ellipsis; }
+.connection-dot { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; background: var(--muted); }
+.connection-dot.connected { background: #45b981; }
+.connection-dot.connecting, .connection-dot.negotiating { background: #e3a632; animation: pulse 1.3s infinite; }
+.connection-dot.error { background: #e06e6e; }
+
+/* ---------- 顶栏 ---------- */
+.topbar { position: sticky; top: 0; z-index: 5; height: 60px; padding: 0 max(28px, (100% - 1440px) / 2 + 28px); display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); background: var(--background); }
+.topbar-tab { min-width: 0; flex: 0 1 420px; height: 38px; padding: 0 6px 0 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
+.topbar-tab__favicon { width: 16px; height: 16px; flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); }
+.topbar-tab__favicon img { width: 16px; height: 16px; object-fit: contain; }
+.topbar-workspace-context { min-width: 0; display: flex; align-items: center; gap: 9px; color: var(--muted-strong); }
+.topbar-workspace-context > svg { color: var(--primary); }
+.topbar-workspace-context strong, .topbar-workspace-context small { display: block; }
+.topbar-workspace-context strong { color: var(--foreground); font-size: var(--text-sm); line-height: 16px; }
+.topbar-workspace-context small { margin-top: 1px; color: var(--muted); font-size: var(--text-xs); line-height: 14px; }
+.target-tab-select { min-width: 0; flex: 1; height: 36px; padding: 0 4px; border: 0; background: transparent; font-size: var(--text-md); }
+.target-tab-select:focus-visible { box-shadow: none; }
+.topbar-actions { display: flex; align-items: center; gap: 8px; }
+
+/* ---------- 状态徽章 ---------- */
+.permission-state, .large-status, .agent-runtime-state, .capture-state {
+  min-height: 30px;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 3px 12px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--muted-strong);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  white-space: nowrap;
+}
+.permission-state.enabled, .large-status.connected, .agent-runtime-state.running {
+  border-color: color-mix(in srgb, var(--success) 38%, var(--surface));
+  background: var(--success-soft);
+  color: var(--success);
+}
+.large-status.connecting, .large-status.negotiating, .agent-runtime-state.paused, .agent-runtime-state.waiting_for_human {
+  border-color: color-mix(in srgb, var(--warning) 42%, var(--surface));
+  background: var(--warning-soft);
+  color: var(--warning);
+}
+.large-status.error, .agent-runtime-state.revoked, .agent-runtime-state.expired {
+  border-color: color-mix(in srgb, var(--danger) 38%, var(--surface));
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+.capture-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
+.capture-state.active { border-color: color-mix(in srgb, var(--success) 38%, var(--surface)); background: var(--success-soft); color: var(--success); }
+.capture-state.active i { background: var(--success); animation: pulse 1.4s infinite; }
+
+/* ---------- 页面通用 ---------- */
+.section-view { display: grid; gap: 16px; align-content: start; }
+.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
+.page-heading h1 { margin: 0; font-size: var(--text-2xl); font-weight: 700; line-height: 28px; }
+.page-heading p { margin: 5px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 17px; }
+.section-view h2 { margin: 0; font-size: var(--text-lg); font-weight: 650; }
+.page-eyebrow { display: block; margin-bottom: 4px; color: var(--primary); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+
+/* User-Agent 常用工具 */
+.ua-current-site { min-height: 82px; padding: 14px 16px; display: grid; grid-template-columns: minmax(210px, .9fr) minmax(260px, 1fr) auto; align-items: center; gap: 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
+.ua-current-site > div:first-child { min-width: 0; }
+.ua-current-site > div:first-child span, .ua-current-site > div:first-child strong, .ua-current-site > div:first-child small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.ua-current-site > div:first-child span { color: var(--muted); font-size: var(--text-xs); }
+.ua-current-site > div:first-child strong { margin-top: 3px; font-size: var(--text-lg); }
+.ua-current-site > div:first-child small { margin-top: 3px; color: var(--muted-strong); font-size: var(--text-sm); }
+.ua-management { min-height: 420px; display: grid; grid-template-columns: minmax(420px, 1.35fr) minmax(320px, .8fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
+.ua-assignments { min-width: 0; padding: 16px; border-right: 1px solid var(--border); }
+.ua-profile-editor { min-width: 0; padding: 16px; display: grid; gap: 12px; align-content: start; }
+.ua-assignment-list { margin-top: 12px; display: grid; }
+.ua-assignment-list > div { min-height: 58px; display: grid; grid-template-columns: minmax(160px, .55fr) minmax(220px, 1fr) 34px; align-items: center; gap: 12px; border-top: 1px solid var(--border); }
+.ua-assignment-list > div:last-child { border-bottom: 1px solid var(--border); }
+.ua-assignment-list strong, .ua-assignment-list small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.ua-assignment-list strong { font-size: var(--text-sm); }
+.ua-assignment-list small { margin-top: 3px; color: var(--muted); font-size: var(--text-xs); }
+.ua-assignment-list code { overflow: hidden; color: var(--muted-strong); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
+.custom-ua-list { display: grid; }
+.custom-ua-list > div { min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; border-top: 1px solid var(--border); }
+.custom-ua-list > div:last-child { border-bottom: 1px solid var(--border); }
+.custom-ua-list > div > button:first-child { min-width: 0; padding: 7px 0; border: 0; background: transparent; color: var(--foreground); text-align: left; cursor: pointer; }
+.custom-ua-list strong, .custom-ua-list small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.custom-ua-list strong { font-size: var(--text-sm); }
+.custom-ua-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }
+.empty-state { min-height: 130px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border-radius: var(--radius-md); color: var(--muted); font-size: var(--text-md); text-align: center; }
+.status-good { color: var(--success); font-weight: 600; }
+.status-error { color: var(--danger); font-weight: 600; }
+.status-muted { color: var(--muted); }
+.active-label { padding: 2px 7px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-text); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
+
+/* 代码/报文块 —— 浅色主题用浅灰嵌底,暗色主题用深面板 */
+.network-packet, .invoke-result, .network-artifact pre, .context-json pre,
+.proxy-tools pre, .recording-values pre, .recording-evidence pre, .recording-recipe-result pre {
+  margin: 0;
+  padding: 12px 13px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface-subtle);
+  color: var(--foreground);
+  font-size: var(--text-sm);
+  line-height: 1.55;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+[data-theme='dark'] .network-packet, [data-theme='dark'] .invoke-result, [data-theme='dark'] .network-artifact pre,
+[data-theme='dark'] .context-json pre, [data-theme='dark'] .proxy-tools pre,
+[data-theme='dark'] .recording-values pre, [data-theme='dark'] .recording-evidence pre,
+[data-theme='dark'] .recording-recipe-result pre {
+  border-color: #262c33;
+  background: #12161b;
+  color: #d6dde4;
+}
+
+/* Toast */
+.toast { position: fixed; right: 22px; bottom: 22px; z-index: 30; max-width: 420px; display: flex; align-items: center; gap: 8px; padding: 11px 15px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--text-md); font-weight: 500; }
+.toast.ok { border: 1px solid color-mix(in srgb, var(--success) 38%, var(--surface)); background: var(--success-soft); color: var(--success); }
+.toast.error { border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--surface)); background: var(--danger-soft); color: var(--danger); }
+
+/* 人工接管横幅 */
+.handoff-banner { padding: 14px 18px; display: flex; align-items: center; gap: 13px; border-left: 3px solid var(--warning); border-radius: var(--radius-lg); background: var(--warning-soft); box-shadow: var(--shadow-sm); }
+.handoff-banner > svg { flex: 0 0 auto; color: var(--warning); }
+.handoff-banner__copy { min-width: 0; flex: 1; }
+.handoff-banner__copy span, .handoff-banner__copy strong, .handoff-banner__copy small { display: block; }
+.handoff-banner__copy span { color: var(--warning); font-size: var(--text-sm); font-weight: 650; }
+.handoff-banner__copy strong { margin-top: 2px; font-size: var(--text-md); line-height: 18px; overflow-wrap: anywhere; }
+.handoff-banner__copy small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
+.handoff-banner__actions { display: flex; gap: 8px; }
+
+/* ---------- 运行概览 ---------- */
+.task-command-bar { padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
+.task-site-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
+.task-site-identity > svg { flex: 0 0 auto; color: var(--primary); }
+.task-site-identity strong, .task-site-identity small { display: block; }
+.task-site-identity strong { font-size: var(--text-md); font-weight: 650; line-height: 18px; }
+.task-site-identity small { margin-top: 2px; color: var(--muted); font-size: var(--text-sm); }
+.task-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.task-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
+.task-status-grid section { min-width: 0; padding: 15px 16px 12px; display: grid; gap: 3px; align-content: start; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
+.task-status-grid section.needs-attention { box-shadow: inset 3px 0 0 var(--warning), var(--shadow-sm); }
+.task-status-grid span { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
+.task-status-grid strong { margin-top: 4px; overflow: hidden; font-size: var(--text-lg); font-weight: 650; line-height: 19px; white-space: nowrap; text-overflow: ellipsis; }
+.task-status-grid small { min-height: 32px; color: var(--muted); font-size: var(--text-sm); line-height: 16px; }
+.task-status-grid button { margin: 8px -6px 0; padding: 4px 6px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--primary-text); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
+.task-status-grid button:hover { background: var(--primary-soft); }
+.task-workflow-list { display: grid; gap: 10px; }
+.task-workflow-list button { min-height: 62px; padding: 10px 16px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; gap: 13px; align-items: center; border: 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--foreground); text-align: left; cursor: pointer; transition: background-color .14s ease; }
+.task-workflow-list button:hover { background: var(--surface-subtle); }
+.task-workflow-list button > svg:first-child { color: var(--muted-strong); }
+.task-workflow-list button:hover > svg:first-child { color: var(--primary); }
+.task-workflow-list button > svg:last-child { color: var(--muted); }
+.task-workflow-list strong, .task-workflow-list small { display: block; }
+.task-workflow-list strong { font-size: var(--text-md); font-weight: 650; line-height: 18px; }
+.task-workflow-list small { margin-top: 2px; color: var(--muted); font-size: var(--text-sm); line-height: 16px; }
+
+/* ---------- 操作记录 ---------- */
+.activity-view .activity-heading-actions, .network-heading-actions { display: flex; align-items: center; gap: 8px; }
+.agent-runtime-band { padding: 15px 18px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
+.agent-runtime-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; }
+.agent-runtime-summary span { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
+.agent-runtime-summary strong, .agent-runtime-summary small { display: block; }
+.agent-runtime-summary strong { margin-top: 4px; overflow: hidden; font-size: var(--text-lg); font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
+.agent-runtime-summary small { margin-top: 2px; color: var(--muted); font-size: var(--text-sm); }
+.agent-runtime-controls { display: flex; gap: 8px; }
+.agent-action-list { margin-top: 14px; display: grid; border-top: 1px solid var(--border); }
+.agent-action-row { padding: 8px 2px; display: grid; grid-template-columns: 12px 84px minmax(160px, 1.4fr) minmax(80px, .6fr) 110px 76px; gap: 10px; align-items: center; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
+.agent-action-row code { overflow: hidden; font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
+.agent-action-row strong { font-size: var(--text-sm); }
+.agent-action-row strong.success { color: var(--success); }
+.agent-action-row strong.error { color: var(--danger); }
+.agent-actions-empty { margin-top: 14px; padding: 14px 4px 2px; color: var(--muted); font-size: var(--text-sm); }
+.action-state { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
+.action-state.success { background: var(--success); }
+.action-state.error { background: var(--danger); }
+.action-state.running { background: var(--primary); animation: pulse 1.2s infinite; }
+.activity-subheading { margin-top: 6px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
+.activity-subheading p { margin: 4px 0 0; color: var(--muted); font-size: var(--text-sm); }
+.activity-loading { min-height: 120px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: var(--text-md); }
+.activity-loading.error { color: var(--danger); }
+.activity-table { border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
+.activity-table__head, .activity-table__row { padding: 0 16px; display: grid; grid-template-columns: 150px 86px minmax(150px, 1.1fr) minmax(150px, 1.2fr) 88px 72px; gap: 12px; align-items: center; }
+.activity-table__head { min-height: 38px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
+.activity-table__row { min-height: 42px; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
+.activity-table__row:last-child { border-bottom: 0; }
+.activity-table__row > * { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.activity-table__row code { font-size: var(--text-sm); }
+.audit-outcome.success { color: var(--success); font-weight: 600; }
+.audit-outcome.error { color: var(--danger); font-weight: 600; }
+
+/* ---------- 分栏编辑页(代理配置 / 代理规则 / UA / Cookie) ---------- */
+.split-view { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
+.split-view, .rule-layout { display: grid; }
+.rule-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 16px; align-items: start; }
+.list-pane, .editor-pane { min-width: 0; display: grid; gap: 14px; align-content: start; }
+.editor-pane { padding: 18px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
+.editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.editor-heading p { margin: 4px 0 0; color: var(--muted); font-size: var(--text-sm); word-break: break-all; }
+.data-list { display: grid; gap: 8px; }
+.data-row { min-height: 58px; padding: 8px 12px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto 15px; gap: 10px; align-items: center; border: 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--foreground); text-align: left; cursor: pointer; }
+.data-row:hover { background: var(--surface-subtle); }
+.data-row.selected { box-shadow: inset 3px 0 0 var(--primary), var(--shadow-sm); }
+.data-row > svg:last-child { color: var(--muted); }
+.data-row strong, .data-row small { display: block; }
+.data-row strong { font-size: var(--text-md); font-weight: 600; }
+.data-row small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
+.row-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--surface-subtle); color: var(--muted-strong); }
+.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.form-grid .ui-field:has(textarea), .form-grid .check-row { grid-column: 1 / -1; }
+.check-row { display: flex; align-items: center; gap: 8px; font-size: var(--text-md); }
+.editor-actions { display: flex; gap: 8px; }
+.rule-editor { min-width: 0; padding: 18px; display: grid; gap: 13px; align-content: start; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
+.rule-editor > h2 { margin-bottom: 2px; }
+.rule-editor > p { margin: -4px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
+
+.rule-table { border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
+.table-head, .table-row { padding: 0 16px; display: grid; gap: 12px; align-items: center; }
+.table-head { min-height: 38px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
+.table-row { min-height: 46px; border-bottom: 1px solid var(--border); font-size: var(--text-md); }
+.table-row:last-child { border-bottom: 0; }
+.table-row > * { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.table-row code { font-size: var(--text-sm); }
+.rule-table .table-head, .rule-table .table-row { grid-template-columns: minmax(110px, 1fr) minmax(180px, 2fr) minmax(110px, 1fr) 64px 34px; }
+
+/* Cookie Editor */
+.url-bar { display: flex; align-items: center; gap: 12px; }
+.url-bar input { flex: 1; }
+.url-bar > span { flex: 0 0 auto; color: var(--muted); font-size: var(--text-sm); }
+.cookie-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.cookie-toolbar select { width: auto; min-width: 108px; }
+.cookie-toolbar .ui-button { margin-left: auto; }
+.network-search { position: relative; min-width: 200px; flex: 1; }
+.network-search > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
+.network-search input { padding-left: 31px; }
+.cookie-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 16px; align-items: start; }
+.cookie-table { border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
+.cookie-columns { padding: 0 14px; display: grid; grid-template-columns: 24px minmax(120px, 1fr) minmax(150px, 1.2fr) minmax(120px, .9fr) minmax(110px, .8fr) 34px; gap: 10px; align-items: center; }
+.cookie-group__heading { padding: 8px 14px 5px; display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
+.cookie-group__heading span { font-weight: 500; text-transform: none; }
+.cookie-name-button { padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--foreground); text-align: left; cursor: pointer; }
+.cookie-name-button strong { display: block; overflow: hidden; font-size: var(--text-md); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
+.cookie-name-button:hover strong { color: var(--primary-text); }
+.cookie-value { min-width: 0; padding: 3px 6px; overflow: hidden; color: var(--muted-strong); font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
+.cookie-columns > span > small { display: block; overflow: hidden; color: var(--muted); font-size: var(--text-sm); line-height: 15px; white-space: nowrap; text-overflow: ellipsis; }
+.tag-list { display: flex; flex-wrap: wrap; gap: 4px; }
+.tag-list i { padding: 1px 6px; border-radius: 999px; background: var(--surface-subtle); color: var(--muted-strong); font-size: var(--text-xs); font-style: normal; font-weight: 600; }
+.cookie-editor-pane { position: sticky; top: 76px; }
+.cookie-transfer { display: grid; gap: 10px; }
+.cookie-transfer .segmented { justify-self: start; }
+.transfer-status { color: var(--muted); font-size: var(--text-sm); }
+
+/* 分段选择器 */
+.segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-subtle); }
+.segmented button { min-width: 72px; height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
+.segmented button.active { background: var(--surface); color: var(--foreground); box-shadow: var(--shadow-sm); }
+.segmented button:disabled { opacity: .45; cursor: not-allowed; }
+
+/* ---------- 网络活动 ---------- */
+.network-control-bar { padding: 10px 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
+.network-control-bar > label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
+.network-control-bar > label > span { display: block; }
+.network-control-bar strong { font-size: var(--text-md); font-weight: 600; line-height: 17px; }
+.network-control-bar small { display: block; margin-top: 1px; color: var(--muted); font-size: var(--text-sm); }
+.network-control-bar .network-search { flex: 1; min-width: 180px; }
+.network-error { padding: 12px 16px; display: flex; align-items: center; gap: 9px; border-radius: var(--radius-lg); background: var(--danger-soft); color: var(--danger); font-size: var(--text-md); }
+.network-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 16px; align-items: start; }
+.network-timeline { border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
+.network-table-head { padding: 0 16px; min-height: 38px; display: grid; grid-template-columns: 62px 58px minmax(0, 1fr) 88px 72px; gap: 10px; align-items: center; border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
+.network-row { width: 100%; padding: 9px 16px; display: grid; grid-template-columns: 62px 58px minmax(0, 1fr) 88px 72px; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--foreground); font-size: var(--text-sm); text-align: left; cursor: pointer; }
+.network-row:last-child { border-bottom: 0; }
+.network-row:hover { background: var(--surface-subtle); }
+.network-row.selected { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
+.network-row > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.method { font-size: var(--text-sm); font-weight: 700; }
+.method-get { color: var(--success); }
+.method-post { color: var(--primary-text); }
+.method-put, .method-patch { color: var(--warning); }
+.method-delete { color: var(--danger); }
+.network-target strong, .network-target small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.network-target strong { font-size: var(--text-md); font-weight: 600; }
+.network-target small { margin-top: 1px; color: var(--muted); font-size: var(--text-sm); }
+.network-inspector { min-width: 0; padding: 16px; display: grid; gap: 14px; align-content: start; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); position: sticky; top: 76px; }
+.network-inspector__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.network-inspector__heading > div { min-width: 0; }
+.network-inspector__heading > div > span { color: var(--muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
+.network-inspector__heading strong, .network-inspector__heading small { display: block; overflow: hidden; text-overflow: ellipsis; }
+.network-inspector__heading strong { margin-top: 3px; font-size: var(--text-lg); font-weight: 650; word-break: break-all; }
+.network-inspector__heading small { margin-top: 3px; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
+.network-meta { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
+.network-meta > div { min-width: 0; }
+.network-meta dt { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
+.network-meta dd { margin: 3px 0 0; overflow: hidden; font-size: var(--text-md); white-space: nowrap; text-overflow: ellipsis; }
+.network-packet-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.network-packet-heading > strong { font-size: var(--text-md); font-weight: 650; }
+.network-packet-heading > div { display: flex; gap: 6px; align-items: center; }
+.network-packet { max-height: 320px; white-space: pre; }
+.network-limitations { padding: 9px 12px; display: flex; gap: 8px; align-items: flex-start; border-radius: var(--radius-md); background: var(--warning-soft); color: var(--warning); font-size: var(--text-sm); line-height: 1.5; }
+.network-preview-empty { padding: 18px 14px; display: flex; align-items: flex-start; gap: 9px; border-radius: var(--radius-md); background: var(--surface-subtle); color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
+.network-preview-empty svg { flex: 0 0 auto; margin-top: 1px; }
+.network-artifact { display: grid; gap: 8px; }
+.network-artifact > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.network-artifact strong { font-size: var(--text-md); font-weight: 650; }
+.network-artifact pre { max-height: 260px; }
+
+/* 浏览器现场录制：Trace -> Pipeline -> 证据与页面函数 */
+.recording-section { display: grid; gap: 12px; }
+.recording-heading { min-height: 54px; display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(230px, 1fr); align-items: end; gap: 16px; }
+.recording-heading__identity > span { display: block; margin-bottom: 3px; color: var(--primary); font-size: var(--text-xs); font-weight: 700; }
+.recording-heading__actions { min-width: 230px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
+.recording-heading__actions.is-inactive { visibility: hidden; pointer-events: none; }
+.recording-mode-switch { height: 34px; padding: 3px; display: grid; grid-template-columns: repeat(3, auto); gap: 2px; border-radius: var(--radius-md); background: var(--surface-subtle); }
+.recording-mode-switch button { height: 28px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted-strong); font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
+.recording-mode-switch button:disabled { cursor: not-allowed; opacity: .48; }
+.recording-mode-switch button.is-selected { background: var(--surface); color: var(--foreground); box-shadow: var(--shadow-sm); }
+.recording-mode-switch button.is-selected svg { color: var(--primary); }
+.recording-mode-panel[hidden] { display: none; }
+.recording-state { min-height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted-strong); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
+.recording-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
+.recording-state.is-active { border-color: color-mix(in srgb, var(--danger) 32%, var(--border)); background: var(--danger-soft); color: var(--danger); }
+.recording-state.is-active i { background: var(--danger); animation: pulse 1.2s infinite; }
+.recording-controls { min-height: 52px; padding: 8px 10px 8px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
+.recording-controls > label { min-width: 220px; display: flex; align-items: center; gap: 9px; }
+.recording-controls > label span { min-width: 0; }
+.recording-controls > label strong, .recording-controls > label small { display: block; }
+.recording-controls > label strong { font-size: var(--text-sm); font-weight: 650; }
+.recording-controls > label small { margin-top: 1px; color: var(--muted); font-size: var(--text-xs); }
+.recording-summary { min-width: 0; margin-left: auto; overflow: hidden; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
+.recording-navigation { min-height: 58px; padding: 9px 13px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--border)); border-radius: var(--radius-md); background: var(--warning-soft); }
+.recording-navigation > svg { color: var(--warning); }
+.recording-navigation.is-restored { border-color: color-mix(in srgb, var(--success) 32%, var(--border)); background: var(--success-soft); }
+.recording-navigation.is-restored > svg { color: var(--success); }
+.recording-navigation.is-failed { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); background: var(--danger-soft); }
+.recording-navigation.is-failed > svg { color: var(--danger); }
+.recording-navigation > div { min-width: 0; }
+.recording-navigation strong,
+.recording-navigation span,
+.recording-navigation code { display: block; }
+.recording-navigation strong { font-size: var(--text-sm); }
+.recording-navigation span { margin-top: 2px; color: var(--muted-strong); font-size: var(--text-xs); line-height: 1.45; }
+.recording-navigation code { margin-top: 3px; overflow: hidden; color: var(--muted-strong); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
+.recording-error { min-height: 46px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; border-left: 3px solid var(--danger); background: var(--danger-soft); color: var(--danger); font-size: var(--text-sm); }
+.recording-error .ui-button { margin-left: auto; }
+.recording-empty { min-height: 230px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); text-align: center; }
+.recording-empty svg { color: var(--border-strong); }
+.recording-empty strong { font-size: var(--text-lg); }
+.recording-empty span { max-width: 520px; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
+.recording-workbench { min-height: 560px; display: grid; grid-template-columns: minmax(210px, 240px) minmax(340px, 1fr) minmax(310px, 380px); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
+.recording-traces, .recording-pipeline, .recording-inspector { min-width: 0; min-height: 0; }
+.recording-traces { border-right: 1px solid var(--border); background: var(--surface-subtle); }
+.recording-traces > header, .recording-pipeline > header { min-height: 45px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); }
+.recording-traces > header strong, .recording-pipeline > header strong { font-size: var(--text-sm); font-weight: 700; }
+.recording-traces > header > div strong, .recording-traces > header > div small { display: block; }
+.recording-traces > header > div small { margin-top: 1px; color: var(--muted); font-size: 10px; font-weight: 500; }
+.recording-traces > header > span { min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: var(--text-xs); }
+.recording-traces > div { max-height: 700px; overflow: auto; }
+.recording-traces button { position: relative; width: 100%; min-height: 72px; padding: 10px 11px; display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 0 9px; align-items: start; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--foreground); text-align: left; cursor: pointer; }
+.recording-traces button:hover { background: var(--surface); }
+.recording-traces button.is-selected { background: var(--surface); box-shadow: inset 3px 0 0 var(--primary); }
+.recording-trace-index { width: 31px; height: 25px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted-strong); font: 700 10px/1 var(--font-mono); letter-spacing: .03em; }
+.recording-traces button.is-selected .recording-trace-index { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); background: var(--primary-soft); color: var(--primary-text); }
+.recording-traces button > span:nth-child(2) { min-width: 0; }
+.recording-traces button strong, .recording-traces button small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.recording-traces button strong { font-size: var(--text-sm); font-weight: 650; }
+.recording-traces button small { margin-top: 3px; color: var(--muted); font-size: var(--text-xs); }
+.recording-traces button time { grid-column: 2; margin-top: 5px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
+.recording-traces button time i { padding-left: 7px; border-left: 1px solid var(--border); color: var(--muted-strong); font-style: normal; }
+.recording-pipeline { border-right: 1px solid var(--border); }
+.recording-pipeline > header > div { min-width: 0; }
+.recording-pipeline > header > div strong, .recording-pipeline > header > div span { display: block; }
+.recording-pipeline > header > div span { margin-top: 1px; color: var(--muted); font-size: var(--text-xs); }
+.recording-pipeline > header > i { display: inline-flex; align-items: center; gap: 4px; color: var(--success); font-size: var(--text-xs); font-style: normal; white-space: nowrap; }
+.recording-pipeline__body { max-height: 700px; padding: 13px 13px 18px 10px; overflow: auto; }
+.recording-pipeline-step { position: relative; display: grid; grid-template-columns: 31px minmax(0, 1fr); align-items: stretch; }
+.recording-step-rail { min-height: 73px; display: grid; grid-template-rows: 30px minmax(0, 1fr); justify-items: center; color: var(--muted); }
+.recording-step-rail > i { position: relative; z-index: 1; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--muted-strong); font: 700 9px/1 var(--font-mono); font-style: normal; }
+.recording-step-rail > span { width: 1px; min-height: 43px; display: grid; align-items: end; justify-items: center; background: var(--border); color: var(--muted); }
+.recording-step-rail > span svg { width: 11px; margin: 0 0 -5px; padding: 1px 0; background: var(--background); }
+.recording-pipeline-step.is-navigation .recording-step-rail > i { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); background: var(--warning-soft); color: var(--warning); }
+.recording-pipeline-step > button { width: 100%; min-height: 73px; padding: 10px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--foreground); text-align: left; cursor: pointer; transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease; }
+.recording-pipeline-step > button:hover { border-color: var(--border-strong); background: var(--surface-subtle); }
+.recording-pipeline-step > button.is-linked { border-left: 3px solid var(--success); }
+.recording-pipeline-step > button.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--focus); }
+.recording-pipeline-step.is-navigation > button { margin: 4px 0 9px; border-style: dashed; border-color: color-mix(in srgb, var(--warning) 42%, var(--border)); background: color-mix(in srgb, var(--warning-soft) 45%, var(--surface)); }
+.recording-event-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--muted-strong); }
+.recording-event-icon.kind-crypto { background: var(--warning-soft); color: var(--warning); }
+.recording-event-icon.kind-fetch, .recording-event-icon.kind-xhr, .recording-event-icon.kind-form { background: var(--primary-soft); color: var(--primary-text); }
+.recording-event-icon.kind-websocket { background: var(--success-soft); color: var(--success); }
+.recording-event-icon.kind-navigation { background: var(--warning-soft); color: var(--warning); }
+.recording-pipeline-step button > span:nth-child(2) { min-width: 0; }
+.recording-pipeline-step small, .recording-pipeline-step strong, .recording-pipeline-step em, .recording-pipeline-step b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.recording-pipeline-step small { color: var(--muted); font-size: 10px; font-weight: 650; }
+.recording-pipeline-step strong { margin-top: 2px; font-size: var(--text-sm); font-weight: 650; }
+.recording-pipeline-step em { margin-top: 2px; color: var(--muted); font-size: var(--text-xs); font-style: normal; }
+.recording-pipeline-step b { margin-top: 4px; color: var(--warning); font-size: 10px; font-weight: 650; }
+.recording-event-meta { display: grid; justify-items: end; gap: 5px; }
+.recording-event-meta i { padding: 2px 6px; border-radius: 999px; background: var(--warning-soft); color: var(--warning); font-size: 10px; font-style: normal; white-space: nowrap; }
+.recording-event-meta i.is-history { background: var(--surface-strong); color: var(--muted); }
+.recording-event-meta time { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
+.recording-event-meta small { color: var(--muted); font-size: 10px; font-weight: 500; white-space: nowrap; }
+.recording-inspector > dl.recording-navigation-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.recording-inspector > dl.recording-navigation-detail div:nth-child(odd) { border-left: 0; }
+.recording-inspector > dl.recording-navigation-detail div:nth-child(n + 3) { border-top: 1px solid var(--border); }
+.recording-navigation-detail dd { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.recording-column-empty { min-height: 180px; padding: 24px; display: grid; place-items: center; color: var(--muted); font-size: var(--text-sm); text-align: center; }
+.recording-inspector { max-height: 746px; padding: 14px; overflow: auto; display: grid; gap: 14px; align-content: start; }
+.recording-inspector > header { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
+.recording-inspector > header > div { min-width: 0; }
+.recording-inspector > header span, .recording-inspector > header strong, .recording-inspector > header small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.recording-inspector > header span { color: var(--primary); font-size: var(--text-xs); font-weight: 700; }
+.recording-inspector > header strong { margin-top: 3px; font-size: var(--text-lg); }
+.recording-inspector > header small { margin-top: 3px; color: var(--muted); font-size: var(--text-xs); }
+.recording-inspector > header > i { flex: 0 0 auto; color: var(--muted); font-size: var(--text-xs); font-style: normal; }
+.recording-inspector > header > i.is-error { color: var(--danger); font-weight: 700; }
+.recording-inspector > dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
+.recording-inspector > dl div { min-width: 0; padding: 9px 5px; text-align: center; }
+.recording-inspector > dl div + div { border-left: 1px solid var(--border); }
+.recording-inspector dt { color: var(--muted); font-size: 10px; }
+.recording-inspector dd { margin: 3px 0 0; overflow: hidden; font-size: var(--text-sm); font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
+.recording-values { display: grid; gap: 6px; }
+.recording-values > strong { font-size: var(--text-sm); }
+.recording-values pre, .recording-evidence pre { max-height: 160px; }
+.recording-evidence { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
+.recording-evidence summary { padding: 9px 0; color: var(--muted-strong); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
+.recording-evidence[open] { padding-bottom: 10px; }
+.profile-inference { padding: 11px 0 0; display: grid; gap: 10px; border-top: 2px solid var(--primary); }
+.profile-inference.is-medium { border-top-color: var(--warning); }
+.profile-inference.is-low { border-top-color: var(--border-strong); }
+.profile-inference__heading { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 8px; }
+.profile-inference__mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary); }
+.profile-inference__heading > span:nth-child(2) { min-width: 0; }
+.profile-inference__heading small, .profile-inference__heading strong { display: block; }
+.profile-inference__heading small { color: var(--primary-text); font-size: var(--text-xs); font-weight: 700; }
+.profile-inference__heading strong { margin-top: 2px; font-size: var(--text-sm); line-height: 1.45; }
+.profile-inference__heading > i { min-height: 23px; padding: 0 7px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid color-mix(in srgb, var(--success) 34%, var(--border)); border-radius: 999px; color: var(--success); font-size: 10px; font-style: normal; font-weight: 650; white-space: nowrap; }
+.profile-inference.is-medium .profile-inference__heading > i { border-color: color-mix(in srgb, var(--warning) 34%, var(--border)); color: var(--warning); }
+.profile-inference.is-low .profile-inference__heading > i { border-color: var(--border); color: var(--muted-strong); }
+.profile-inference__flow { min-width: 0; padding: 8px 9px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
+.profile-inference__flow > span { min-width: 0; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
+.profile-inference__flow code { max-width: 210px; overflow: hidden; color: var(--foreground); font-size: 10px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
+.profile-inference__sources { display: grid; gap: 5px; }
+.profile-inference__sources > div { min-width: 0; padding: 7px 8px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-subtle); }
+.profile-inference__sources span { grid-row: span 2; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--warning-soft); color: var(--warning); font-size: 9px; font-weight: 700; }
+.profile-inference__sources strong, .profile-inference__sources small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.profile-inference__sources strong { font-size: var(--text-xs); }
+.profile-inference__sources small { color: var(--muted); font-size: 10px; }
+.profile-inference__arguments { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; }
+.profile-inference__arguments > div { min-width: 0; }
+.profile-inference__arguments dt { color: var(--muted); font-size: 10px; }
+.profile-inference__arguments dd { margin: 2px 0 0; overflow: hidden; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
+.profile-inference__evidence { border-top: 1px solid var(--border); }
+.profile-inference__evidence summary { padding-top: 8px; color: var(--muted-strong); font-size: var(--text-xs); font-weight: 650; cursor: pointer; }
+.profile-inference__evidence ol { margin: 8px 0 0; padding: 0; display: grid; gap: 6px; list-style: none; }
+.profile-inference__evidence li { display: grid; grid-template-columns: 7px minmax(0, 1fr); align-items: start; gap: 7px; color: var(--muted-strong); font-size: var(--text-xs); line-height: 1.45; }
+.profile-inference__evidence li > i { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--border-strong); }
+.profile-inference__evidence li[data-strength='proven'] > i { background: var(--success); }
+.profile-inference__evidence li[data-strength='supported'] > i { background: var(--primary); }
+.profile-inference__next { padding: 9px 0 0; display: grid; gap: 9px; border-top: 1px solid var(--border); }
+.profile-inference__next > span { color: var(--muted-strong); font-size: var(--text-xs); line-height: 1.5; }
+.profile-inference__next .ui-button { justify-self: stretch; }
+.recording-deep-action { padding: 11px; display: grid; gap: 10px; border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border)); border-radius: var(--radius-md); background: var(--primary-soft); }
+.recording-deep-action > div:first-child { display: flex; align-items: center; gap: 8px; color: var(--primary); }
+.recording-deep-action > div:first-child span { min-width: 0; }
+.recording-deep-action strong, .recording-deep-action small { display: block; }
+.recording-deep-action strong { color: var(--foreground); font-size: var(--text-sm); }
+.recording-deep-action small { margin-top: 2px; color: var(--muted-strong); font-size: var(--text-xs); }
+.recording-recipe-action { padding: 11px; display: grid; gap: 10px; border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border)); border-radius: var(--radius-md); background: var(--warning-soft); }
+.recording-recipe-action > div:first-child { display: flex; align-items: center; gap: 8px; color: var(--warning); }
+.recording-recipe-action > div:first-child span { min-width: 0; }
+.recording-recipe-action strong, .recording-recipe-action small { display: block; }
+.recording-recipe-action strong { color: var(--foreground); font-size: var(--text-sm); }
+.recording-recipe-action small { margin-top: 2px; color: var(--muted-strong); font-size: var(--text-xs); }
+.recording-recipe-editor { display: grid; gap: 9px; }
+.recording-recipe-editor > label, .recording-recipe-editor > div:not(.recording-recipe-editor__actions) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.recording-recipe-editor > label { grid-template-columns: minmax(0, 1fr); }
+.recording-recipe-editor label { min-width: 0; display: grid; gap: 4px; }
+.recording-recipe-editor label > span { color: var(--muted-strong); font-size: var(--text-xs); font-weight: 600; }
+.recording-recipe-editor__actions, .recording-recipe-buttons { display: flex; justify-content: flex-end; gap: 7px; }
+.recording-recipes { padding-top: 13px; display: grid; gap: 9px; border-top: 1px solid var(--border); }
+.recording-recipes__heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.recording-recipes__heading strong { font-size: var(--text-sm); }
+.recording-recipes__heading select { width: min(190px, 58%); }
+.recording-recipe-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted-strong); font-size: var(--text-xs); }
+.recording-recipe-meta i { color: var(--primary-text); font-style: normal; }
+.recording-recipes textarea { min-height: 82px; resize: vertical; font-family: var(--font-mono); font-size: var(--text-sm); }
+.recording-recipe-result { display: grid; gap: 6px; }
+.recording-recipe-result > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto 34px; align-items: center; gap: 7px; }
+.recording-recipe-result strong { overflow: hidden; font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
+.recording-recipe-result span { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
+.recording-recipe-result pre { max-height: 190px; }
+
+/* ---------- 登录态工作区 ---------- */
+.context-options { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
+.context-options select { width: auto; min-width: 240px; }
+.context-options > span { overflow: hidden; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
+.context-mode { display: grid; gap: 16px; }
+.context-mode-tabs { justify-self: start; }
+.context-empty { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--muted); }
+.context-empty svg { color: var(--border-strong); }
+.context-empty strong { color: var(--muted-strong); font-size: var(--text-lg); }
+.context-empty span { font-size: var(--text-sm); }
+.context-session-strip { padding: 6px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
+.context-session-strip > div { min-width: 0; padding: 10px 12px; display: grid; gap: 2px; align-content: start; border-radius: var(--radius-md); background: var(--surface-subtle); }
+.context-session-strip small { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
+.context-session-strip strong { overflow: hidden; font-size: var(--text-lg); font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
+.context-session-strip span { overflow: hidden; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
+.context-session-strip .auth-state { grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
+.context-session-strip .auth-state > span { min-width: 0; display: grid; gap: 2px; }
+.context-session-strip .auth-state > svg { color: var(--muted); }
+.context-session-strip .auth-state.authenticated > svg, .context-session-strip .auth-state.authenticated strong { color: var(--success); }
+.context-session-strip .auth-state.unauthenticated strong { color: var(--danger); }
+.context-session-strip .auth-state > i { color: var(--muted); font-size: var(--text-sm); font-style: normal; }
+.context-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 16px; align-items: start; }
+.context-primary { min-width: 0; display: grid; gap: 16px; }
+.context-diff, .context-inventory, .context-node-browser { padding: 16px 18px; display: grid; gap: 13px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
+.context-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.context-section-heading span { color: var(--muted); font-size: var(--text-sm); }
+.diff-state { padding: 3px 9px; border-radius: 999px; background: var(--surface-subtle); color: var(--muted-strong); font-size: var(--text-xs); font-weight: 650; }
+.diff-state.changed, .diff-state.document_changed { background: var(--warning-soft); color: var(--warning); }
+.diff-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
+.diff-summary > span { padding: 10px 12px; display: grid; gap: 2px; border-radius: var(--radius-md); background: var(--surface-subtle); color: var(--muted); font-size: var(--text-sm); }
+.diff-summary strong { color: var(--foreground); font-size: var(--text-xl); font-weight: 700; }
+.diff-events { display: grid; gap: 5px; }
+.diff-events span { display: flex; gap: 7px; align-items: baseline; font-size: var(--text-sm); }
+.diff-events i { color: var(--success); font-style: normal; font-weight: 700; }
+.diff-events .removed i { color: var(--danger); }
+.diff-events .removed { color: var(--muted); text-decoration: line-through; }
+.context-inventory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+.context-inventory-grid > div { min-width: 0; padding: 12px 13px; display: grid; gap: 8px; align-content: start; border-radius: var(--radius-md); background: var(--surface-subtle); }
+.context-inventory-grid > div > strong { font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
+.context-inventory-grid > div > span { font-size: var(--text-xl); font-weight: 700; }
+.context-inventory-grid ul { margin: 0; padding: 0; display: grid; gap: 6px; list-style: none; }
+.context-inventory-grid li { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); }
+.context-inventory-grid li b { font-weight: 600; }
+.context-inventory-grid li span, .context-inventory-grid li small { overflow: hidden; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
+.context-inventory-grid li i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--border-strong); }
+.context-inventory-grid li i.ready, .context-inventory-grid li i.document { background: var(--success); }
+.context-inventory-grid li i.history { background: var(--primary); }
+.context-inventory-grid p { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
+.context-node-search { position: relative; width: 240px; }
+.context-node-search > svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
+.context-node-search input { height: 32px; padding-left: 29px; font-size: var(--text-sm); }
+.context-node-head { padding: 0 12px 6px; display: grid; grid-template-columns: minmax(0, 1.6fr) 92px 62px 64px; gap: 10px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
+.context-node-list { max-height: 320px; overflow-y: auto; display: grid; }
+.context-node-list > button { width: 100%; padding: 8px 12px; display: grid; grid-template-columns: minmax(0, 1.6fr) 92px 62px 64px; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--foreground); font-size: var(--text-sm); text-align: left; cursor: pointer; }
+.context-node-list > button:last-child { border-bottom: 0; }
+.context-node-list > button:hover { background: var(--surface-subtle); }
+.context-node-list > button.active { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
+.context-node-list strong, .context-node-list small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.context-node-list strong { font-size: var(--text-md); font-weight: 600; }
+.context-node-list small { margin-top: 1px; color: var(--muted); }
+.context-node-list code { overflow: hidden; font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
+.context-node-list i { padding: 1px 6px; border-radius: 999px; background: var(--surface-subtle); color: var(--muted); font-size: var(--text-xs); font-style: normal; font-weight: 600; text-align: center; }
+.context-node-list i.ready { background: var(--success-soft); color: var(--success); }
+.context-inspector { min-width: 0; display: grid; gap: 16px; position: sticky; top: 76px; }
+.context-inspector > section { padding: 16px; display: grid; gap: 13px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
+.context-inspector-empty { padding: 14px 12px; border-radius: var(--radius-md); background: var(--surface-subtle); color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
+.context-node-error { padding: 9px 12px; display: flex; gap: 8px; align-items: flex-start; border-radius: var(--radius-md); background: var(--danger-soft); color: var(--danger); font-size: var(--text-sm); }
+.node-identity { display: grid; gap: 3px; }
+.node-identity code { color: var(--muted); font-size: var(--text-sm); }
+.node-identity strong { font-size: var(--text-lg); font-weight: 650; overflow-wrap: anywhere; }
+.node-identity span { color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
+.node-properties { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
+.node-properties dt { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
+.node-properties dd { margin: 3px 0 0; overflow: hidden; font-size: var(--text-md); white-space: nowrap; text-overflow: ellipsis; }
+.node-actions { display: flex; gap: 8px; }
+.node-value-editor { display: flex; gap: 8px; align-items: flex-end; }
+.node-value-editor .ui-field { flex: 1; }
+.auth-evidence ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--text-sm); line-height: 1.5; }
+.signal-names { display: grid; gap: 4px; font-size: var(--text-sm); }
+.signal-names strong { font-weight: 650; }
+.signal-names span { color: var(--muted); overflow-wrap: anywhere; }
+.context-utility-panel { max-width: 760px; display: grid; gap: 13px; align-content: start; }
+.context-utility-panel > p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
+.eval-mode { justify-self: start; }
+.eval-warning { padding: 10px 13px; display: flex; gap: 9px; align-items: flex-start; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary-text); font-size: var(--text-sm); line-height: 1.5; }
+.eval-warning svg { flex: 0 0 auto; margin-top: 1px; }
+.code-editor { font-family: var(--font-mono); font-size: var(--text-sm); }
+.eval-result-meta { display: flex; flex-wrap: wrap; gap: 7px; }
+.eval-result-meta span { padding: 3px 9px; border-radius: 999px; background: var(--surface-subtle); color: var(--muted-strong); font-size: var(--text-xs); font-weight: 600; }
+.invoke-result { max-height: 320px; }
+.context-json { display: grid; gap: 10px; }
+.context-json pre { max-height: 560px; }
+.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.panel-title > span { font-size: var(--text-lg); font-weight: 650; }
+
+/* ---------- 引擎连接 ---------- */
+.managed-policy-banner { padding: 12px 16px; display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius-lg); background: var(--warning-soft); box-shadow: var(--shadow-sm); }
+.managed-policy-banner > svg { flex: 0 0 auto; margin-top: 2px; color: var(--warning); }
+.managed-policy-banner strong, .managed-policy-banner small { display: block; }
+.managed-policy-banner strong { font-size: var(--text-md); font-weight: 650; }
+.managed-policy-banner small { margin-top: 2px; color: var(--muted-strong); font-size: var(--text-sm); }
+.managed-policy-banner i { display: block; margin-top: 3px; color: var(--warning); font-size: var(--text-sm); font-style: normal; }
+.bridge-identity-strip { padding: 13px 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
+.bridge-identity-strip > div { min-width: 0; }
+.bridge-identity-strip span { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
+.bridge-identity-strip code, .bridge-identity-strip strong { display: block; margin-top: 4px; overflow: hidden; font-size: var(--text-md); white-space: nowrap; text-overflow: ellipsis; }
+.engine-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 16px; align-items: start; }
+.settings-form { min-width: 0; display: grid; gap: 16px; }
+.pairing-workspace { padding: 18px; display: grid; gap: 15px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
+.pairing-workspace.pending { box-shadow: inset 3px 0 0 var(--warning), var(--shadow-sm); }
+.pairing-workspace.paired { box-shadow: inset 3px 0 0 var(--success), var(--shadow-sm); }
+.pairing-workspace.error { box-shadow: inset 3px 0 0 var(--danger), var(--shadow-sm); }
+.pairing-workspace__heading { display: flex; gap: 13px; align-items: flex-start; }
+.pairing-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary-text); }
+.pairing-workspace__heading p { margin: 4px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
+/* 未配对 idle 态:居中 hero,配对是该页此时的主任务 */
+.pairing-workspace.idle { padding: 30px 22px 22px; justify-items: center; text-align: center; }
+.pairing-workspace.idle .pairing-workspace__heading { flex-direction: column; align-items: center; gap: 12px; }
+.pairing-workspace.idle .pairing-icon { width: 52px; height: 52px; border-radius: var(--radius-lg); }
+.pairing-workspace.idle .pairing-icon svg { width: 24px; height: 24px; }
+.pairing-workspace.idle .editor-actions { justify-content: center; }
+.pairing-code { padding: 16px; display: grid; gap: 4px; justify-items: center; border-radius: var(--radius-md); background: var(--surface-subtle); text-align: center; }
+.pairing-code span { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
+.pairing-code strong { font-family: var(--font-mono); font-size: 30px; font-weight: 700; letter-spacing: .12em; }
+.pairing-code small { color: var(--muted); font-size: var(--text-sm); }
+.paired-engine-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.paired-engine-meta > div { min-width: 0; }
+.paired-engine-meta span { color: var(--muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
+.paired-engine-meta code { display: block; margin-top: 3px; overflow: hidden; font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
+.advanced-connection { border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
+.advanced-connection > summary { padding: 15px 18px; font-size: var(--text-md); font-weight: 650; cursor: pointer; list-style-position: inside; }
+.advanced-connection__body { padding: 2px 18px 16px; display: grid; gap: 13px; }
+.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
+.toggle-row > span { min-width: 0; }
+.toggle-row strong { font-size: var(--text-md); font-weight: 600; }
+.toggle-row small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--text-sm); }
+.panel-policy-settings { padding: 18px; display: grid; gap: 14px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
+.panel-policy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.grant-editor { padding: 18px; display: grid; gap: 14px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
+.grant-editor > p { margin: -6px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
+.tab-picker { display: grid; gap: 10px; }
+.tab-picker-group { padding: 6px; display: grid; gap: 2px; border-radius: var(--radius-md); background: var(--surface-subtle); }
+.tab-picker-group label { padding: 7px 9px; display: flex; align-items: flex-start; gap: 10px; border-radius: var(--radius-sm); cursor: pointer; }
+.tab-picker-group label:hover { background: var(--surface); }
+.tab-picker-group label > input { margin-top: 2px; }
+.tab-picker-group label > span { min-width: 0; }
+.tab-picker-group label strong, .tab-picker-group label small { display: block; }
+.tab-picker-group label strong { font-size: var(--text-md); font-weight: 600; }
+.tab-picker-group label small { margin-top: 1px; overflow: hidden; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
+.tab-picker-group .frame-target { margin-left: 25px; }
+.grant-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.grant-risk-toggle { padding: 10px 13px; border-radius: var(--radius-md); background: var(--warning-soft); }
+.grant-scope-list { display: flex; flex-wrap: wrap; gap: 6px; }
+.grant-scope-list span { padding: 3px 9px; border-radius: 999px; background: var(--surface-subtle); color: var(--muted-strong); font-size: var(--text-xs); font-weight: 600; }
+.grant-status { padding: 11px 14px; display: grid; gap: 2px; border-radius: var(--radius-md); background: var(--success-soft); }
+.grant-status strong { color: var(--success); font-size: var(--text-md); font-weight: 650; }
+.grant-status span { color: var(--muted-strong); font-size: var(--text-sm); }
+.protocol-panel { padding: 18px; display: grid; gap: 4px; align-content: start; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); position: sticky; top: 76px; }
+.protocol-panel h2 { margin-bottom: 10px; }
+.protocol-panel > div { padding: 9px 0; display: grid; gap: 3px; border-bottom: 1px solid var(--border); }
+.protocol-panel > div:last-child { border-bottom: 0; }
+.protocol-panel code { color: var(--primary-text); font-size: var(--text-sm); font-weight: 600; }
+.protocol-panel span { color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
+
+/* ---------- 窄屏适配 ---------- */
+@media (max-width: 1080px) {
+  .task-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .network-layout, .context-workspace, .engine-layout, .rule-layout, .cookie-layout, .split-view { grid-template-columns: minmax(0, 1fr); }
+  .network-inspector, .context-inspector, .cookie-editor-pane, .protocol-panel { position: static; }
+  .recording-workbench { grid-template-columns: 220px minmax(0, 1fr); }
+  .recording-inspector { grid-column: 1 / -1; max-height: none; border-top: 1px solid var(--border); }
+  .recording-pipeline { border-right: 0; }
+  .proxy-tools { grid-template-columns: minmax(0, 1fr); }
+  .bridge-identity-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .ua-management { grid-template-columns: minmax(0, 1fr); }
+  .ua-assignments { border-right: 0; border-bottom: 1px solid var(--border); }
+  .ua-current-site { grid-template-columns: minmax(200px, .8fr) minmax(240px, 1fr); }
+  .ua-current-site > .editor-actions { grid-column: 1 / 3; justify-content: flex-end; }
+  .recording-heading { grid-template-columns: minmax(0, 1fr) auto; }
+  .recording-heading__actions { grid-column: 1 / -1; min-width: 0; }
+}
+
+@media (max-width: 720px) {
+  .app-shell { grid-template-columns: minmax(0, 1fr); }
+  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
+  .sidebar-brand { height: 56px; }
+  .sidebar nav { display: flex; overflow-x: auto; overflow-y: hidden; padding: 10px; }
+  .sidebar-group { display: contents; }
+  .sidebar-group__label { display: none; }
+  .sidebar nav button { width: auto; flex: 0 0 auto; grid-template-columns: 18px max-content; white-space: nowrap; }
+  .sidebar nav button > svg:last-child { display: none; }
+  .sidebar-theme { margin-top: 0; grid-auto-flow: column; align-items: center; justify-content: space-between; }
+  .sidebar-theme select { width: 150px; }
+  .sidebar-status { min-height: 54px; }
+  .topbar { padding: 0 16px; }
+  .content-area { padding: 16px; }
+  .page-heading { flex-direction: column; align-items: flex-start; }
+  .ua-current-site { grid-template-columns: minmax(0, 1fr); }
+  .ua-current-site > .editor-actions { grid-column: auto; justify-content: stretch; }
+  .ua-current-site > .editor-actions .ui-button { flex: 1; }
+  .ua-assignment-list > div { grid-template-columns: minmax(0, 1fr) 34px; }
+  .ua-assignment-list code { display: none; }
+  .task-command-bar, .agent-runtime-summary { flex-direction: column; display: flex; align-items: stretch; }
+  .task-status-grid, .context-session-strip, .diff-summary, .context-inventory-grid, .grant-options, .panel-policy-grid, .form-grid, .paired-engine-meta { grid-template-columns: minmax(0, 1fr); }
+  .agent-action-row { grid-template-columns: 12px 76px minmax(0, 1fr) 76px; }
+  .agent-action-row span:nth-child(4), .agent-action-row span:last-child { display: none; }
+  .activity-table__head, .activity-table__row { grid-template-columns: 120px minmax(0, 1fr) 80px; }
+  .activity-table__head span:nth-child(2), .activity-table__head span:nth-child(4), .activity-table__head span:last-child,
+  .activity-table__row > span:nth-child(2), .activity-table__row > span:nth-child(4), .activity-table__row > span:last-child { display: none; }
+  .network-table-head, .network-row { grid-template-columns: 56px 50px minmax(0, 1fr) 66px; }
+  .network-table-head span:nth-child(4), .network-row > span:nth-child(4) { display: none; }
+  .recording-heading { grid-template-columns: minmax(0, 1fr); align-items: flex-start; }
+  .recording-mode-switch { justify-self: start; }
+  .recording-heading__actions { grid-column: auto; justify-self: stretch; justify-content: flex-start; }
+  .recording-controls { flex-wrap: wrap; }
+  .recording-summary { width: 100%; order: 3; margin-left: 0; }
+  .recording-navigation { grid-template-columns: 22px minmax(0, 1fr); }
+  .recording-navigation > .ui-button { grid-column: 1 / -1; justify-self: stretch; }
+  .recording-workbench { grid-template-columns: minmax(0, 1fr); }
+  .recording-traces, .recording-pipeline { border-right: 0; border-bottom: 1px solid var(--border); }
+  .recording-traces > div, .recording-pipeline__body { max-height: 420px; }
+  .recording-inspector { grid-column: auto; border-top: 0; }
+  .recording-event-meta i { display: none; }
+  .cookie-columns { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 34px; }
+  .cookie-columns > span:nth-child(4), .cookie-columns > span:nth-child(5) { display: none; }
+  .cookie-toolbar select { min-width: 0; flex: 1; }
+  .context-node-head { display: none; }
+  .context-node-list > button { grid-template-columns: minmax(0, 1fr) 64px; }
+  .context-node-list code, .context-node-list i { display: none; }
+  .rule-table .table-head, .rule-table .table-row { grid-template-columns: minmax(0, 1fr) 34px; }
+  .rule-table .table-row > span, .rule-table .table-head > span { display: none; }
+  .proxy-rule-table .table-head, .proxy-rule-table .table-row { grid-template-columns: minmax(0, 1fr) 34px; }
+  .proxy-rule-table .table-row > span, .proxy-rule-table .table-row > svg, .proxy-rule-table .table-head > span { display: none; }
+}

src/entrypoints/options/App.tsx

@@ -0,0 +1,888 @@
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
+import { browser, type Browser } from 'wxt/browser';
+import {
+  Activity, AlertTriangle, Bot, Braces, Check, ChevronRight, CircleGauge, CloudDownload, Cookie, Copy,
+  Database, Download, Eye, Fingerprint, History, KeyRound, MousePointer2, Network, Play, Power, Radio,
+  RefreshCw, Route, Save, Search, Send, Server, ShieldCheck, Square, Trash2, Upload, UserRoundCog, Wrench, X,
+} from 'lucide-react';
+import { ProductBrand, YakitMark } from '@/components/brand/Brand';
+import { Button } from '@/components/ui/button';
+import { Field } from '@/components/ui/field';
+import { Switch } from '@/components/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  AUDIT_CATEGORY_LABELS, AUDIT_OUTCOME_LABELS, HANDOFF_REASON_LABELS, waitingHandoff,
+} from '@/features/handoff/presentation';
+import { cookieKey, cookieRemovalInput } from '@/features/cookies/presentation';
+import { AutoSwitchView } from '@/features/proxy/ui/AutoSwitchView';
+import { ProxyProfilesView } from '@/features/proxy/ui/ProxyProfilesView';
+import { RuleSourcesView } from '@/features/proxy/ui/RuleSourcesView';
+import { RecordingWorkspace } from '@/features/browser-recording/RecordingWorkspace';
+import { AuthorizationTestingWorkspace } from '@/features/authorization-testing/ui/AuthorizationTestingWorkspace';
+import { gatewayShareActive, gatewayShareGrantInput } from '@/features/grants/gateway-share';
+import { CAPABILITY_LABELS, CONTROL_CAPABILITY_SCOPES, READ_CAPABILITY_SCOPES, isControlScopeSet } from '@/protocol/capabilities';
+import { AGENT_RUNTIME_STORAGE_KEY, AUDIT_STORAGE_KEY, isStateStorageChange } from '@/protocol/storage';
+import type {
+  ActiveTabInfo, AgentRuntime, AuditEvent, BridgePairingStatus, BridgeStatus, BrowserCookie, BrowserRequestAnalysisBundle, CookieInput, CookieTransferFormat, EnterprisePolicyStatus, ExtensionState, HumanHandoff,
+  NetworkCaptureStatus, NetworkRequestExport, NetworkRequestRecord, PageContext, PageEvalResult,
+  PageFrameSummary, PageNodeDetails, PageNodeSummary,
+  UserAgentProfile, UserAgentProfileInput, YakPocGenerateResult,
+} from '@/types/models';
+import { errorMessage, request } from '@/platform/messaging/runtime';
+import { APPEARANCE_STORAGE_KEY, getAppearance, setThemePreference, type ThemePreference } from '@/platform/storage/appearance';
+import './App.css';
+
+type Section = 'overview' | 'authorization' | 'proxies' | 'rules' | 'sources' | 'cookies' | 'user-agent' | 'network' | 'context' | 'engine' | 'activity';
+const FIREFOX_AMO_BUILD = import.meta.env.FIREFOX && import.meta.env.MODE === 'store';
+
+const NAVIGATION: Array<{ label: string; icon?: ReactNode; items: Array<{ id: Section; label: string; icon: ReactNode }> }> = [
+  {
+    label: '工作区',
+    items: [
+      { id: 'overview', label: '运行概览', icon: <CircleGauge size={17} /> },
+      { id: 'authorization', label: '授权测试', icon: <Fingerprint size={17} /> },
+    ],
+  },
+  {
+    label: '网络与流量',
+    items: [
+      { id: 'proxies', label: '代理出口', icon: <Network size={17} /> },
+      { id: 'rules', label: '自动切换', icon: <Route size={17} /> },
+      { id: 'sources', label: '规则订阅', icon: <CloudDownload size={17} /> },
+      { id: 'network', label: '网络活动', icon: <Activity size={17} /> },
+    ],
+  },
+  {
+    label: '常用工具', icon: <Wrench size={13} />,
+    items: [
+      { id: 'cookies', label: 'Cookie Editor', icon: <Cookie size={17} /> },
+      { id: 'user-agent', label: 'UA 快速切换', icon: <UserRoundCog size={17} /> },
+    ],
+  },
+  {
+    label: 'Agent 与系统',
+    items: [
+      { id: 'context', label: '登录态工作区', icon: <KeyRound size={17} /> },
+      { id: 'engine', label: '引擎连接', icon: <Server size={17} /> },
+      { id: 'activity', label: '操作记录', icon: <History size={17} /> },
+    ],
+  },
+];
+const SECTIONS = NAVIGATION.flatMap((group) => group.items);
+
+const CONTEXT_SECTION_LABELS: Record<PageContext['diff']['changedSections'][number], string> = {
+  capture_options: '采集范围',
+  document: '文档',
+  authentication: '认证',
+  forms: '表单',
+  interactive: '可操作元素',
+  storage: 'Storage',
+  cookies: 'Cookie',
+};
+
+function Empty({ children }: { children: ReactNode }) {
+  return <div className="empty-state"><Database size={22} /><span>{children}</span></div>;
+}
+
+function App() {
+  const initialHash = location.hash.slice(1) as Section;
+  const [section, setSection] = useState<Section>(SECTIONS.some((item) => item.id === initialHash) ? initialHash : 'overview');
+  const [state, setState] = useState<ExtensionState>();
+  const [tab, setTab] = useState<ActiveTabInfo>();
+  const [tabs, setTabs] = useState<ActiveTabInfo[]>([]);
+  const [bridge, setBridge] = useState<BridgeStatus>({ state: 'disconnected', message: '未连接引擎' });
+  const [busy, setBusy] = useState(false);
+  const [notice, setNotice] = useState<{ kind: 'ok' | 'error'; text: string }>();
+  const [theme, setTheme] = useState<ThemePreference>('system');
+
+  const load = useCallback(async () => {
+    const requestedTabId = Number(new URLSearchParams(location.search).get('tabId'));
+    const [nextState, nextTab, nextTabs, nextBridge] = await Promise.all([
+      request('state.get'),
+      Number.isSafeInteger(requestedTabId) && requestedTabId > 0
+        ? request('tab.get', { tabId: requestedTabId }).catch(() => request('tab.active').catch(() => undefined))
+        : request('tab.active').catch(() => undefined),
+      request('tab.list'),
+      request('bridge.status'),
+    ]);
+    setState(nextState);
+    setTab(nextTab);
+    setTabs(nextTabs);
+    setBridge(nextBridge);
+  }, []);
+
+  const refreshTabs = useCallback(async () => {
+    const nextTabs = await request('tab.list');
+    setTabs(nextTabs);
+    setTab((current) => current ? nextTabs.find((item) => item.id === current.id) : current);
+  }, []);
+
+  useEffect(() => { void load(); }, [load]);
+  useEffect(() => {
+    let timer: ReturnType<typeof globalThis.setTimeout> | undefined;
+    const scheduleRefresh = () => {
+      if (timer) globalThis.clearTimeout(timer);
+      timer = globalThis.setTimeout(() => void refreshTabs().catch(() => undefined), 80);
+    };
+    const onCreated = () => scheduleRefresh();
+    const onUpdated = (_tabId: number, change: Browser.tabs.OnUpdatedInfo) => {
+      if (change.url !== undefined || change.title !== undefined || change.status === 'complete') scheduleRefresh();
+    };
+    const onRemoved = () => scheduleRefresh();
+    browser.tabs.onCreated.addListener(onCreated);
+    browser.tabs.onUpdated.addListener(onUpdated);
+    browser.tabs.onRemoved.addListener(onRemoved);
+    return () => {
+      if (timer) globalThis.clearTimeout(timer);
+      browser.tabs.onCreated.removeListener(onCreated);
+      browser.tabs.onUpdated.removeListener(onUpdated);
+      browser.tabs.onRemoved.removeListener(onRemoved);
+    };
+  }, [refreshTabs]);
+  useEffect(() => {
+    const listener = (changes: Record<string, unknown>) => {
+      if (isStateStorageChange(changes)) void request('state.get').then(setState).catch(() => undefined);
+    };
+    browser.storage.onChanged.addListener(listener);
+    return () => browser.storage.onChanged.removeListener(listener);
+  }, []);
+  useEffect(() => {
+    const listener = (message: unknown) => {
+      const input = message as { action?: string; payload?: BridgeStatus };
+      if (input?.action === 'bridge.status.changed' && input.payload) setBridge(input.payload);
+    };
+    browser.runtime.onMessage.addListener(listener);
+    return () => browser.runtime.onMessage.removeListener(listener);
+  }, []);
+  useEffect(() => {
+    void getAppearance().then((appearance) => setTheme(appearance.theme));
+    const listener = (changes: Record<string, unknown>, area: string) => {
+      if (area !== 'local' || !(APPEARANCE_STORAGE_KEY in changes)) return;
+      const next = (changes[APPEARANCE_STORAGE_KEY] as { newValue?: { theme?: ThemePreference } })?.newValue;
+      setTheme(next?.theme && ['system', 'light', 'dark'].includes(next.theme) ? next.theme : 'system');
+    };
+    browser.storage.onChanged.addListener(listener);
+    return () => browser.storage.onChanged.removeListener(listener);
+  }, []);
+  useEffect(() => {
+    const onHash = () => {
+      const value = location.hash.slice(1) as Section;
+      if (SECTIONS.some((item) => item.id === value)) setSection(value);
+    };
+    window.addEventListener('hashchange', onHash);
+    return () => window.removeEventListener('hashchange', onHash);
+  }, []);
+
+  const navigate = (next: Section) => {
+    setSection(next);
+    history.replaceState(null, '', `#${next}`);
+  };
+
+  const selectTab = async (tabId: number) => {
+    const next = await request('tab.get', { tabId });
+    setTab(next);
+    const url = new URL(location.href);
+    url.searchParams.set('tabId', String(tabId));
+    history.replaceState(null, '', `${url.pathname}${url.search}${url.hash}`);
+  };
+
+  const run = async (task: () => Promise<void>, success?: string) => {
+    setBusy(true);
+    setNotice(undefined);
+    try {
+      await task();
+      if (success) setNotice({ kind: 'ok', text: success });
+    } catch (error) {
+      setNotice({ kind: 'error', text: errorMessage(error) });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (!state) return <div className="workspace-loading"><RefreshCw className="spin" size={19} /> 正在初始化 Yakit Browser Agent</div>;
+  const handoff = waitingHandoff(state.handoff);
+
+  return (
+    <div className="app-shell">
+      <aside className="sidebar">
+        <div className="sidebar-brand"><ProductBrand /></div>
+        <nav>{NAVIGATION.map((group) => <div className="sidebar-group" key={group.label}><span className="sidebar-group__label">{group.icon}{group.label}</span>{group.items.map((item) => <button key={item.id} className={section === item.id ? 'active' : ''} onClick={() => navigate(item.id)}>{item.icon}<span>{item.label}</span><ChevronRight size={14} /></button>)}</div>)}</nav>
+        <div className="sidebar-theme">
+          <span>外观</span>
+          <select aria-label="界面主题" value={theme} onChange={(event) => { const next = event.target.value as ThemePreference; setTheme(next); void setThemePreference(next); }}>
+            <option value="system">跟随系统</option>
+            <option value="light">浅色</option>
+            <option value="dark">深色</option>
+          </select>
+        </div>
+        <div className="sidebar-status"><span className="sidebar-yakit-mark"><YakitMark /><i className={`connection-dot ${bridge.state}`} /></span><div><strong>{bridge.state === 'connected' ? '引擎在线' : '引擎离线'}</strong><span>{state.bridge.transport === 'native' ? state.bridge.nativeHost : state.bridge.endpoint}</span></div></div>
+      </aside>
+
+      <main className="workspace">
+        <header className="topbar">
+          {section === 'authorization' ? <div className="topbar-workspace-context">
+            <Fingerprint size={16} />
+            <div><strong>授权测试</strong><small>A/B 页面在工作区内选择</small></div>
+          </div> : <div className="topbar-tab">
+            <span className="topbar-tab__favicon">{tab?.favIconUrl ? <img src={tab.favIconUrl} alt="" /> : <Radio size={13} />}</span>
+            <select className="target-tab-select" aria-label="目标标签页" value={tab?.id || ''} onChange={(event) => void selectTab(Number(event.target.value))}><option value="" disabled>选择目标标签页</option>{tabs.map((item) => <option value={item.id} key={item.id}>{item.title}</option>)}</select>
+          </div>}
+          <div className="topbar-actions"><span className={`permission-state ${state.activeGrant ? 'enabled' : ''}`}><ShieldCheck size={14} />{state.activeGrant ? `${isControlScopeSet(state.activeGrant.scopes) ? '控制' : '只读'}会话` : '未共享'}</span><Button size="icon" variant="ghost" title="刷新状态" onClick={() => void load()}><RefreshCw size={17} /></Button></div>
+        </header>
+
+        {handoff && <HandoffBanner handoff={handoff} setState={setState} run={run} busy={busy} />}
+
+        <div className="content-area">
+          {section === 'overview' && <Overview state={state} bridge={bridge} tab={tab} navigate={navigate} run={run} busy={busy} />}
+          {section === 'authorization' && <AuthorizationTestingWorkspace state={state} setState={setState} tabs={tabs} activeTab={tab} bridge={bridge} refreshTabs={refreshTabs} run={run} busy={busy} />}
+          {section === 'proxies' && <ProxyProfilesView state={state} setState={setState} run={run} busy={busy} tab={tab} />}
+          {section === 'rules' && <AutoSwitchView state={state} setState={setState} tab={tab} run={run} busy={busy} />}
+          {section === 'sources' && <RuleSourcesView state={state} setState={setState} tab={tab} run={run} busy={busy} />}
+          {section === 'cookies' && <CookieEditor key={tab?.id || 0} tab={tab} run={run} busy={busy} />}
+          {section === 'user-agent' && <UserAgents state={state} setState={setState} tab={tab} run={run} busy={busy} />}
+          {section === 'network' && <NetworkActivity key={tab?.id || 0} state={state} setState={setState} tab={tab} bridge={bridge} run={run} busy={busy} />}
+          {section === 'context' && <ContextTool key={tab?.id || 0} tab={tab} run={run} busy={busy} />}
+          {section === 'engine' && <EngineSettings state={state} setState={setState} bridge={bridge} setBridge={setBridge} tabs={tabs} run={run} busy={busy} />}
+          {section === 'activity' && <ActivityLog run={run} busy={busy} />}
+        </div>
+        {notice && <div className={`toast ${notice.kind}`}>{notice.kind === 'ok' ? <Check size={15} /> : <X size={15} />}{notice.text}</div>}
+      </main>
+    </div>
+  );
+}
+
+function HandoffBanner({ handoff, setState, run, busy }: { handoff: HumanHandoff; setState: (state: ExtensionState) => void; run: (task: () => Promise<void>, success?: string) => Promise<void>; busy: boolean }) {
+  const resolve = (outcome: 'completed' | 'cancelled') => run(
+    async () => setState(await request('handoff.resolve', { id: handoff.id, outcome })),
+    outcome === 'completed' ? '已通知 Agent 继续执行' : '人工接管已取消',
+  );
+  return <section className="handoff-banner" aria-live="assertive">
+    <AlertTriangle size={20} />
+    <div className="handoff-banner__copy">
+      <span>{HANDOFF_REASON_LABELS[handoff.reason]}</span>
+      <strong>{handoff.message}</strong>
+      <small title={handoff.target.grantedUrl}>{handoff.target.title} · {handoff.target.origin}</small>
+    </div>
+    <div className="handoff-banner__actions">
+      <Button variant="primary" disabled={busy} onClick={() => void resolve('completed')}><Check size={15} />操作已完成</Button>
+      <Button variant="ghost" disabled={busy} onClick={() => void resolve('cancelled')}><X size={15} />取消任务</Button>
+    </div>
+  </section>;
+}
+
+function ActivityLog({ run, busy }: { run: (task: () => Promise<void>, success?: string) => Promise<void>; busy: boolean }) {
+  const [events, setEvents] = useState<AuditEvent[]>([]);
+  const [runtime, setRuntime] = useState<AgentRuntime>({ state: 'idle', updatedAt: Date.now(), actions: [] });
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState('');
+  const loadEvents = useCallback(async () => {
+    try {
+      setLoadError('');
+      setEvents(await request('audit.list', { limit: 200 }));
+    } catch (error) {
+      setLoadError(errorMessage(error));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const loadRuntime = useCallback(() => request('agent.runtime.get').then(setRuntime), []);
+  useEffect(() => {
+    void Promise.all([loadEvents(), loadRuntime()]);
+    const listener = (changes: Record<string, unknown>) => {
+      if (AUDIT_STORAGE_KEY in changes) void loadEvents();
+      if (AGENT_RUNTIME_STORAGE_KEY in changes) void loadRuntime();
+    };
+    browser.storage.onChanged.addListener(listener);
+    return () => browser.storage.onChanged.removeListener(listener);
+  }, [loadEvents, loadRuntime]);
+
+  const runtimeLabel = {
+    idle: '无活动任务', running: 'Agent 运行中', paused: '已暂停', waiting_for_human: '等待用户',
+    revoked: '授权已撤销', expired: '授权已过期',
+  }[runtime.state];
+  const downloadDiagnostics = () => run(async () => {
+    const bundle = await request('diagnostics.export');
+    const url = URL.createObjectURL(new Blob([JSON.stringify(bundle, null, 2)], { type: 'application/json' }));
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `yakit-browser-agent-diagnostics-${new Date().toISOString().replaceAll(':', '-')}.json`;
+    link.click();
+    URL.revokeObjectURL(url);
+  }, '脱敏诊断包已导出');
+
+  return <div className="section-view activity-view">
+    <div className="page-heading"><div><h1>Agent 操作时间线</h1><p>实时动作保存在浏览器 session；长期审计只保存脱敏摘要，不记录参数、页面内容、Cookie 或执行结果。</p></div><div className="activity-heading-actions"><span className={`agent-runtime-state ${runtime.state}`}><Activity size={15} />{runtimeLabel}</span><Button variant="ghost" disabled={busy} onClick={() => void downloadDiagnostics()}><Download size={15} />导出诊断</Button></div></div>
+    <section className="agent-runtime-band">
+      <div className="agent-runtime-summary"><div><span>当前任务</span><strong>{runtime.taskId || '未共享'}</strong><small>{runtime.grantId ? `Grant ${runtime.grantId.slice(0, 8)}` : '没有活动授权'}</small></div><div><span>最近更新</span><strong>{new Date(runtime.updatedAt).toLocaleTimeString()}</strong><small>{runtime.actions.length} 条 session 动作</small></div><div className="agent-runtime-controls">{runtime.state === 'running' || runtime.state === 'waiting_for_human' ? <Button disabled={busy} onClick={() => void run(async () => setRuntime(await request('agent.pause')), 'Agent 已暂停')}><Square size={15} />暂停</Button> : runtime.state === 'paused' ? <Button variant="primary" disabled={busy} onClick={() => void run(async () => setRuntime(await request('agent.resume')), 'Agent 已恢复')}><Play size={15} />恢复</Button> : null}{runtime.grantId && !['revoked', 'expired'].includes(runtime.state) && <Button variant="danger" disabled={busy} onClick={() => void run(async () => { await request('grant.revoke'); setRuntime(await request('agent.runtime.get')); }, '共享会话已撤销')}><X size={15} />撤销</Button>}<Button variant="ghost" disabled={busy || runtime.actions.length === 0} onClick={() => void run(async () => setRuntime(await request('agent.actions.clear')), 'Session 时间线已清空')}><Trash2 size={15} />清空</Button></div></div>
+      {runtime.actions.length === 0 ? <div className="agent-actions-empty">当前 session 尚无 Agent 能力调用。</div> : <div className="agent-action-list" role="list">{[...runtime.actions].reverse().slice(0, 50).map((action) => <div key={action.id} className="agent-action-row" role="listitem"><span className={`action-state ${action.state}`} /> <time>{new Date(action.startedAt).toLocaleTimeString()}</time><code title={action.method}>{action.method}</code><span>{action.targetTabId ? `Tab ${action.targetTabId}` : '扩展本机'}</span><strong className={action.state}>{action.state}</strong><span>{action.durationMs === undefined ? '进行中' : `${action.durationMs} ms`}</span></div>)}</div>}
+    </section>
+    <div className="activity-subheading"><div><h2>持久化脱敏审计</h2><p>最近 500 条授权、Bridge、接管与能力结果。</p></div><Button variant="ghost" disabled={busy || events.length === 0} onClick={() => void run(async () => { await request('audit.clear'); setEvents([]); }, '操作记录已清空')}><Trash2 size={15} />清空审计</Button></div>
+    {loading ? <div className="activity-loading"><RefreshCw className="spin" size={16} />正在读取记录</div> : loadError ? <div className="activity-loading error"><AlertTriangle size={16} />{loadError}<Button size="sm" variant="ghost" onClick={() => void loadEvents()}>重试</Button></div> : events.length === 0 ? <Empty>还没有操作记录。</Empty> : <div className="activity-table" role="table" aria-label="扩展操作记录">
+      <div className="activity-table__head" role="row"><span>时间</span><span>类型</span><span>动作</span><span>目标 / 摘要</span><span>结果</span><span>耗时</span></div>
+      {events.map((event) => <div className="activity-table__row" role="row" key={event.id}>
+        <time dateTime={new Date(event.timestamp).toISOString()}>{new Date(event.timestamp).toLocaleString()}</time>
+        <span>{AUDIT_CATEGORY_LABELS[event.category]}</span>
+        <code title={event.action}>{event.action}</code>
+        <span title={event.summary}>{event.summary || (event.targetTabId ? `标签页 ${event.targetTabId}` : event.taskId ? `任务 ${event.taskId}` : '扩展本机')}</span>
+        <span className={`audit-outcome ${event.outcome}`} title={event.errorCode}>{AUDIT_OUTCOME_LABELS[event.outcome]}</span>
+        <span>{event.durationMs === undefined ? '—' : `${event.durationMs} ms`}</span>
+      </div>)}
+    </div>}
+  </div>;
+}
+
+function Overview({ state, bridge, tab, navigate, run, busy }: { state: ExtensionState; bridge: BridgeStatus; tab?: ActiveTabInfo; navigate: (value: Section) => void; run: (task: () => Promise<void>, success?: string) => Promise<void>; busy: boolean }) {
+  const activeProxy = state.proxyProfiles.find((profile) => profile.id === state.activeProxyId)?.name || (state.activeProxyId === 'auto' ? '自动切换' : '未知');
+  const [runtime, setRuntime] = useState<AgentRuntime>({ state: 'idle', updatedAt: Date.now(), actions: [] });
+  const [network, setNetwork] = useState<NetworkCaptureStatus>();
+  const [loginContext, setLoginContext] = useState<PageContext>();
+  useEffect(() => {
+    void request('agent.runtime.get').then(setRuntime).catch(() => undefined);
+    if (tab) void request('network.capture.status', { tabId: tab.id }).then(setNetwork).catch(() => setNetwork(undefined));
+    const listener = (changes: Record<string, unknown>) => {
+      if (AGENT_RUNTIME_STORAGE_KEY in changes) void request('agent.runtime.get').then(setRuntime).catch(() => undefined);
+    };
+    browser.storage.onChanged.addListener(listener);
+    return () => browser.storage.onChanged.removeListener(listener);
+  }, [tab?.id]);
+  const site = tab?.url ? new URL(tab.url) : undefined;
+  const latestAction = [...runtime.actions].reverse()[0];
+  const captureLoginEnvironment = () => run(async () => {
+    if (!tab) throw new Error('请先选择 HTTP(S) 标签页');
+    setLoginContext(await request('context.capture', {
+      tabId: tab.id, includeDom: true, includeStorage: true, includeCookies: true,
+    }));
+  }, '登录环境已采集');
+  const startCapture = () => run(async () => {
+    if (!tab) throw new Error('请先选择 HTTP(S) 标签页');
+    setNetwork(await request('network.capture.start', { tabId: tab.id, captureHeaders: false, captureBody: false }));
+    navigate('network');
+  }, '网络元数据捕获已启动');
+  return <div className="section-view overview-view">
+    <div className="page-heading"><div><h1>运行概览</h1><p>{tab?.title || '选择一个 HTTP(S) 标签页，建立浏览器现场。'}</p></div><span className={`large-status ${bridge.state}`}><Radio size={16} />{bridge.state === 'connected' ? `Yak ${bridge.engineVersion || '引擎'} 在线` : 'Yak 引擎离线'}</span></div>
+    <div className="task-command-bar">
+      <div className="task-site-identity"><KeyRound size={18} /><span><strong>{loginContext?.authentication.status === 'authenticated' ? '检测到登录环境' : loginContext?.authentication.status === 'unauthenticated' ? '未检测到登录态' : '登录环境待采集'}</strong><small>{site ? `${site.protocol.replace(':', '').toUpperCase()} · ${site.origin}` : '当前页面不可访问'}</small></span></div>
+      <div className="task-quick-actions"><Button disabled={busy || !tab} onClick={() => void captureLoginEnvironment()}><Braces size={15} />采集登录环境</Button><Button disabled={busy || !tab || network?.active} onClick={() => void startCapture()}><Activity size={15} />{network?.active ? '正在捕获' : '抓取请求'}</Button><Button variant="primary" onClick={() => navigate('engine')}><Bot size={15} />共享给 Agent</Button></div>
+    </div>
+    <div className="task-status-grid">
+      <section><span>浏览器现场</span><strong>{loginContext ? `${loginContext.document?.forms.length || 0} 表单 / ${loginContext.document?.interactive.length || 0} 节点` : '尚未采集'}</strong><small>{loginContext?.authentication.evidence[0] || 'Cookie、Storage 与认证信号仅在用户点击后读取'}</small><button onClick={() => navigate('context')}>打开上下文<ChevronRight size={15} /></button></section>
+      <section><span>代理与流量</span><strong>{activeProxy}</strong><small>{network?.active ? `${network.count} 条请求，${network.droppedCount} 条丢弃` : `${state.proxyRules.filter((rule) => rule.enabled).length} 条手动规则 · ${state.proxyRuleSources.filter((source) => source.enabled).length} 个订阅源`}</small><button onClick={() => navigate(network?.active ? 'network' : 'rules')}>查看流量策略<ChevronRight size={15} /></button></section>
+      <section><span>Agent 会话</span><strong>{state.activeGrant ? `${isControlScopeSet(state.activeGrant.scopes) ? '控制' : '只读'} · ${runtime.state}` : '未共享'}</strong><small>{state.activeGrant ? `${state.activeGrant.targets.length} 个 frame · ${new Date(state.activeGrant.expiresAt).toLocaleTimeString()} 到期` : '创建 task-bound grant 后才允许远程读取'}</small><button onClick={() => navigate('activity')}>查看动作时间线<ChevronRight size={15} /></button></section>
+      <section className={state.handoff?.state === 'waiting_for_user' ? 'needs-attention' : ''}><span>需要用户处理</span><strong>{state.handoff?.state === 'waiting_for_user' ? HANDOFF_REASON_LABELS[state.handoff.reason] : runtime.state === 'paused' ? 'Agent 已暂停' : '没有待办步骤'}</strong><small>{state.handoff?.state === 'waiting_for_user' ? state.handoff.message : latestAction ? `最近 ${latestAction.method} · ${latestAction.state}` : '二维码、MFA 与 CAPTCHA 会在这里出现'}</small><button onClick={() => navigate('activity')}>会话控制<ChevronRight size={15} /></button></section>
+    </div>
+    <div className="task-workflow-list">
+      <button onClick={() => navigate('cookies')}><Cookie size={18} /><span><strong>检查 Cookie 与登录线索</strong><small>直接检查原始值，导出默认脱敏。</small></span><ChevronRight size={16} /></button>
+      <button onClick={() => navigate('network')}><Send size={18} /><span><strong>请求转到 Yakit</strong><small>选择捕获记录后打开 Web Fuzzer、生成 Yak PoC 或准备 AI 分析。</small></span><ChevronRight size={16} /></button>
+      <button onClick={() => navigate('context')}><Braces size={18} /><span><strong>观测签名与加解密</strong><small>短时观测 WebCrypto、CryptoJS、JSEncrypt、WebSocket 和请求调用栈。</small></span><ChevronRight size={16} /></button>
+    </div>
+  </div>;
+}
+
+
+function CookieEditor({ tab, run, busy }: { tab?: ActiveTabInfo; run: (task: () => Promise<void>, success?: string) => Promise<void>; busy: boolean }) {
+  const [url, setUrl] = useState(tab?.url || '');
+  const [cookies, setCookies] = useState<BrowserCookie[]>([]);
+  const [query, setQuery] = useState('');
+  const [filter, setFilter] = useState<'all' | 'session' | 'persistent' | 'httpOnly' | 'partitioned'>('all');
+  const [sort, setSort] = useState<'name' | 'domain' | 'expires' | 'size'>('name');
+  const [group, setGroup] = useState<'none' | 'domain' | 'path'>('domain');
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [transferFormat, setTransferFormat] = useState<CookieTransferFormat>('json');
+  const [includeExportValues, setIncludeExportValues] = useState(false);
+  const [importText, setImportText] = useState('');
+  const [transferStatus, setTransferStatus] = useState('');
+  const [draft, setDraft] = useState<Omit<CookieInput, 'url'>>({
+    name: '', value: '', path: '/', secure: url.startsWith('https:'), httpOnly: false, sameSite: 'unspecified',
+  });
+  const keyOf = cookieKey;
+  const reload = () => run(async () => {
+    if (!tab?.id) throw new Error('请选择目标标签页');
+    setCookies(await request('cookie.list', { url, tabId: tab.id }));
+    setSelected(new Set());
+  });
+  const editCookie = (cookie: BrowserCookie) => {
+    setDraft({
+      name: cookie.name, value: cookie.value, domain: cookie.hostOnly ? undefined : cookie.domain,
+      path: cookie.path, secure: cookie.secure, httpOnly: cookie.httpOnly,
+      sameSite: cookie.sameSite as CookieInput['sameSite'], expirationDate: cookie.expirationDate,
+      storeId: cookie.storeId, firstPartyDomain: cookie.firstPartyDomain, partitionKey: cookie.partitionKey,
+    });
+  };
+  const visibleCookies = cookies.filter((cookie) => {
+    const needle = query.trim().toLowerCase();
+    const queryMatch = !needle || [cookie.name, cookie.domain, cookie.path].some((value) => value.toLowerCase().includes(needle));
+    const filterMatch = filter === 'all' || (filter === 'session' && cookie.session) || (filter === 'persistent' && !cookie.session)
+      || (filter === 'httpOnly' && cookie.httpOnly) || (filter === 'partitioned' && Boolean(cookie.partitionKey));
+    return queryMatch && filterMatch;
+  }).sort((left, right) => {
+    if (sort === 'domain') return `${left.domain}${left.path}${left.name}`.localeCompare(`${right.domain}${right.path}${right.name}`);
+    if (sort === 'expires') return (left.expirationDate || Number.MAX_SAFE_INTEGER) - (right.expirationDate || Number.MAX_SAFE_INTEGER);
+    if (sort === 'size') return right.value.length - left.value.length;
+    return left.name.localeCompare(right.name);
+  });
+  const groupedCookies = new Map<string, BrowserCookie[]>();
+  for (const cookie of visibleCookies) {
+    const key = group === 'domain' ? cookie.domain : group === 'path' ? cookie.path : '全部 Cookie';
+    groupedCookies.set(key, [...(groupedCookies.get(key) || []), cookie]);
+  }
+  const removeInputs = (items: BrowserCookie[]) => items.map(cookieRemovalInput);
+  const downloadExport = async () => {
+    if (!tab?.id) throw new Error('请选择目标标签页');
+    const text = await request('cookie.export', {
+      url,
+      tabId: tab.id,
+      format: transferFormat,
+      includeValues: includeExportValues,
+    });
+    const blobUrl = URL.createObjectURL(new Blob([text], { type: 'text/plain;charset=utf-8' }));
+    const anchor = document.createElement('a');
+    anchor.href = blobUrl;
+    anchor.download = `cookies-${new URL(url).hostname}.${transferFormat === 'json' ? 'json' : 'txt'}`;
+    anchor.click();
+    URL.revokeObjectURL(blobUrl);
+  };
+  useEffect(() => { if (url.startsWith('http')) void reload(); }, []);
+  return <div className="section-view">
+    <div className="page-heading"><div><h1>Cookie Editor</h1><p>HttpOnly、Cookie Store、CHIPS 分区与多格式交换。</p></div><button disabled={busy || !url} onClick={() => void reload()}><RefreshCw size={16} />刷新</button></div>
+    <div className="url-bar"><input value={url} onChange={(event) => setUrl(event.target.value)} /><span>{cookies.length} cookies</span></div>
+    <div className="cookie-toolbar"><div className="network-search"><Search size={14} /><input aria-label="搜索 Cookie" placeholder="搜索名称、Domain 或 Path" value={query} onChange={(event) => setQuery(event.target.value)} /></div><select aria-label="Cookie 筛选" value={filter} onChange={(event) => setFilter(event.target.value as typeof filter)}><option value="all">全部</option><option value="session">Session</option><option value="persistent">持久</option><option value="httpOnly">HttpOnly</option><option value="partitioned">Partitioned</option></select><select aria-label="Cookie 排序" value={sort} onChange={(event) => setSort(event.target.value as typeof sort)}><option value="name">按名称</option><option value="domain">按 Domain</option><option value="expires">按过期时间</option><option value="size">按值大小</option></select><select aria-label="Cookie 分组" value={group} onChange={(event) => setGroup(event.target.value as typeof group)}><option value="domain">Domain 分组</option><option value="path">Path 分组</option><option value="none">不分组</option></select><Button variant="danger" disabled={busy || selected.size === 0} onClick={() => void run(async () => { if (!tab?.id) throw new Error('请选择目标标签页'); const result = await request('cookie.removeMany', { cookies: removeInputs(cookies.filter((cookie) => selected.has(keyOf(cookie)))) }); setTransferStatus(`删除 ${result.removed}，失败 ${result.failed}`); setCookies(await request('cookie.list', { url, tabId: tab.id })); setSelected(new Set()); }, '已执行批量删除')}><Trash2 size={14} />删除 {selected.size || ''}</Button></div>
+    <div className="cookie-layout"><div className="cookie-table"><div className="table-head cookie-columns"><input aria-label="选择全部可见 Cookie" type="checkbox" checked={visibleCookies.length > 0 && visibleCookies.every((cookie) => selected.has(keyOf(cookie)))} onChange={(event) => setSelected(event.target.checked ? new Set(visibleCookies.map(keyOf)) : new Set())} /><span>名称</span><span>值</span><span>Domain / Path</span><span>属性</span><span /></div>{visibleCookies.length === 0 ? <Empty>没有符合条件的 Cookie。</Empty> : [...groupedCookies].map(([groupName, items]) => <div className="cookie-group" key={groupName}><div className="cookie-group__heading"><strong>{groupName}</strong><span>{items.length}</span></div>{items.map((cookie) => {
+        const cookieKey = keyOf(cookie);
+        return <div className="table-row cookie-columns" key={cookieKey}><input aria-label={`选择 ${cookie.name}`} type="checkbox" checked={selected.has(cookieKey)} onChange={(event) => setSelected((current) => { const next = new Set(current); if (event.target.checked) next.add(cookieKey); else next.delete(cookieKey); return next; })} /><button className="cookie-name-button" title="编辑 Cookie" onClick={() => editCookie(cookie)}><strong>{cookie.name}</strong></button><code className="cookie-value" title={cookie.value}>{cookie.value}</code><span><small>{cookie.domain}</small><small>{cookie.path}</small></span><span className="tag-list">{cookie.httpOnly && <i>HttpOnly</i>}{cookie.secure && <i>Secure</i>}{cookie.partitionKey && <i>Partitioned</i>}{cookie.sameSite && <i>{cookie.sameSite}</i>}{cookie.priority && <i>{cookie.priority}</i>}{cookie.sameParty && <i>SameParty</i>}</span><button className="icon-button danger" title="删除 Cookie" onClick={() => void run(async () => { if (!tab?.id) throw new Error('请选择目标标签页'); await request('cookie.remove', removeInputs([cookie])[0]); setCookies(await request('cookie.list', { url, tabId: tab.id })); }, 'Cookie 已删除')}><Trash2 size={15} /></button></div>;
+      })}</div>)}</div>
+      <div className="rule-editor cookie-editor-pane"><h2>写入 Cookie</h2><Field label="名称"><input value={draft.name} onChange={(event) => setDraft({ ...draft, name: event.target.value })} /></Field><Field label="值"><textarea rows={4} value={draft.value} onChange={(event) => setDraft({ ...draft, value: event.target.value })} /></Field><Field label="Domain" hint="留空创建 HostOnly Cookie"><input value={draft.domain || ''} onChange={(event) => setDraft({ ...draft, domain: event.target.value || undefined })} /></Field><Field label="Path"><input value={draft.path} onChange={(event) => setDraft({ ...draft, path: event.target.value })} /></Field><Field label="过期时间"><input type="datetime-local" value={draft.expirationDate ? new Date(draft.expirationDate * 1_000).toISOString().slice(0, 16) : ''} onChange={(event) => setDraft({ ...draft, expirationDate: event.target.value ? new Date(event.target.value).getTime() / 1_000 : undefined })} /></Field><Field label="SameSite"><select value={draft.sameSite} onChange={(event) => setDraft({ ...draft, sameSite: event.target.value as CookieInput['sameSite'] })}><option value="unspecified">Unspecified</option><option value="lax">Lax</option><option value="strict">Strict</option><option value="no_restriction">None</option></select></Field><Field label="Partition top-level site"><input placeholder="https://top.example" value={draft.partitionKey?.topLevelSite || ''} onChange={(event) => setDraft({ ...draft, partitionKey: event.target.value ? { ...draft.partitionKey, topLevelSite: event.target.value } : undefined })} /></Field><label className="check-row"><input type="checkbox" checked={draft.secure} onChange={(event) => setDraft({ ...draft, secure: event.target.checked })} />Secure</label><label className="check-row"><input type="checkbox" checked={draft.httpOnly} onChange={(event) => setDraft({ ...draft, httpOnly: event.target.checked })} />HttpOnly</label><label className="check-row"><input type="checkbox" disabled={!draft.partitionKey} checked={draft.partitionKey?.hasCrossSiteAncestor || false} onChange={(event) => setDraft({ ...draft, partitionKey: { ...draft.partitionKey, hasCrossSiteAncestor: event.target.checked } })} />Cross-site ancestor</label><button className="primary-button" disabled={busy || !url || !draft.name || !tab?.id} onClick={() => void run(async () => { if (!tab?.id) throw new Error('请选择目标标签页'); await request('cookie.set', { url, tabId: tab.id, ...draft }); setCookies(await request('cookie.list', { url, tabId: tab.id })); }, 'Cookie 已写入')}><Save size={16} />保存 Cookie</button><div className="cookie-transfer"><h2>导入 / 导出</h2><div><select value={transferFormat} onChange={(event) => setTransferFormat(event.target.value as CookieTransferFormat)}><option value="json">JSON</option><option value="netscape">Netscape</option><option value="set-cookie">Set-Cookie</option></select><label className="check-row"><input type="checkbox" checked={includeExportValues} onChange={(event) => setIncludeExportValues(event.target.checked)} />导出原始值</label></div><textarea rows={6} value={importText} onChange={(event) => setImportText(event.target.value)} placeholder="粘贴 Cookie 数据" /><div className="editor-actions"><Button variant="primary" disabled={busy || !importText.trim() || !tab?.id} onClick={() => void run(async () => { if (!tab?.id) throw new Error('请选择目标标签页'); const result = await request('cookie.import', { url, tabId: tab.id, format: transferFormat, text: importText }); setTransferStatus(`导入 ${result.imported}，失败 ${result.failed}${result.warnings.length ? `；${result.warnings.join('；')}` : ''}`); setCookies(await request('cookie.list', { url, tabId: tab.id })); }, 'Cookie 导入完成')}><Upload size={14} />导入</Button><Button variant="ghost" disabled={busy || cookies.length === 0} onClick={() => void run(downloadExport, includeExportValues ? 'Cookie 已导出（包含值）' : 'Cookie 已脱敏导出')}><Download size={14} />导出</Button></div>{transferStatus && <p className="transfer-status">{transferStatus}</p>}</div></div>
+    </div>
+  </div>;
+}
+
+function UserAgents({ state, setState, tab, run, busy }: { state: ExtensionState; setState: (state: ExtensionState) => void; tab?: ActiveTabInfo; run: (task: () => Promise<void>, success?: string) => Promise<void>; busy: boolean }) {
+  const [profiles, setProfiles] = useState<UserAgentProfile[]>([]);
+  const [selectedProfileId, setSelectedProfileId] = useState('chrome-windows');
+  const [draft, setDraft] = useState<UserAgentProfileInput>({ name: '', userAgent: '' });
+  const url = tab?.url?.startsWith('http') ? tab.url : '';
+  let hostname = '';
+  try { hostname = url ? new URL(url).hostname : ''; } catch { hostname = ''; }
+  const currentAssignment = state.userAgentAssignments.find((assignment) => assignment.hostname === hostname);
+  const profileMap = new Map(profiles.map((profile) => [profile.id, profile]));
+  const selectedProfile = profileMap.get(selectedProfileId);
+  const effectiveProfile = currentAssignment ? profileMap.get(currentAssignment.profileId) : undefined;
+
+  const loadProfiles = useCallback(async () => {
+    const next = await request('ua.catalog');
+    setProfiles(next);
+    const current = state.userAgentAssignments.find((assignment) => assignment.hostname === hostname);
+    if (current && next.some((profile) => profile.id === current.profileId)) setSelectedProfileId(current.profileId);
+  }, [hostname, state.userAgentAssignments]);
+  useEffect(() => { void loadProfiles(); }, [loadProfiles, state.customUserAgentProfiles]);
+
+  const applyAndReload = () => run(async () => {
+    if (!tab || !url || !selectedProfile) throw new Error('请选择可访问的目标页面和 User-Agent 预设');
+    setState(await request('ua.site.apply', { url, profileId: selectedProfile.id }));
+    await browser.tabs.reload(tab.id);
+  }, `${selectedProfile?.name || 'User-Agent'} 已应用并刷新页面`);
+  const resetAndReload = () => run(async () => {
+    if (!tab || !url) throw new Error('请选择可访问的目标页面');
+    setState(await request('ua.site.reset', { url }));
+    await browser.tabs.reload(tab.id);
+  }, '已恢复浏览器默认 User-Agent 并刷新页面');
+  const saveProfile = () => run(async () => {
+    const saved = await request('ua.profile.save', draft);
+    const next = await request('ua.catalog');
+    setProfiles(next);
+    setSelectedProfileId(saved.id);
+    setDraft({ name: '', userAgent: '' });
+  }, '自定义 User-Agent 预设已保存');
+
+  return <div className="section-view ua-view">
+    <div className="page-heading"><div><span className="page-eyebrow">常用工具</span><h1>User-Agent 快速切换</h1><p>为单个 hostname 修改真实网络请求头；不伪装 Navigator、Client Hints、屏幕或 TLS 指纹。</p></div></div>
+    <section className="ua-current-site">
+      <div><span>当前目标</span><strong>{hostname || '当前标签页不可配置'}</strong><small>{effectiveProfile ? `正在使用 ${effectiveProfile.name}` : '使用浏览器默认 User-Agent'}</small></div>
+      <select aria-label="当前站点 User-Agent" disabled={!hostname || busy} value={selectedProfileId} onChange={(event) => setSelectedProfileId(event.target.value)}>{profiles.map((profile) => <option key={profile.id} value={profile.id}>{profile.name}{profile.builtin ? '' : ' · 自定义'}</option>)}</select>
+      <div className="editor-actions"><Button variant="ghost" disabled={!currentAssignment || busy} onClick={() => void resetAndReload()}>恢复默认</Button><Button variant="primary" disabled={!hostname || !selectedProfile || busy} onClick={() => void applyAndReload()}><RefreshCw size={14} />应用并刷新</Button></div>
+    </section>
+    <div className="ua-management">
+      <section className="ua-assignments"><div className="context-section-heading"><div><h2>站点绑定</h2><span>每个 hostname 只保留一个生效预设</span></div></div>{state.userAgentAssignments.length === 0 ? <Empty>还没有站点 User-Agent 绑定。</Empty> : <div className="ua-assignment-list">{[...state.userAgentAssignments].sort((left, right) => left.hostname.localeCompare(right.hostname)).map((assignment) => { const profile = profileMap.get(assignment.profileId); return <div key={assignment.id}><span><strong>{assignment.hostname}</strong><small>{profile?.name || '预设已删除'}</small></span><code title={profile?.userAgent}>{profile?.userAgent || assignment.profileId}</code><Button size="icon" variant="ghost" title="恢复该站点默认 UA" aria-label={`移除 ${assignment.hostname} 的 UA 绑定`} onClick={() => void run(async () => setState(await request('ua.site.reset', { url: `https://${assignment.hostname}/` })), '站点 UA 绑定已移除')}><Trash2 size={14} /></Button></div>; })}</div>}
+      </section>
+      <aside className="ua-profile-editor"><div className="context-section-heading"><div><h2>{draft.id ? '编辑自定义预设' : '自定义预设'}</h2><span>保存后可在 Popup 和当前站点中复用</span></div></div><Field label="名称"><input value={draft.name} onChange={(event) => setDraft({ ...draft, name: event.target.value })} placeholder="例如 API Client" /></Field><Field label="User-Agent"><textarea rows={5} value={draft.userAgent} onChange={(event) => setDraft({ ...draft, userAgent: event.target.value })} placeholder="Custom-Agent/1.0" /></Field><div className="editor-actions">{draft.id && <Button variant="ghost" onClick={() => setDraft({ name: '', userAgent: '' })}>取消编辑</Button>}<Button variant="primary" disabled={busy || !draft.name.trim() || !draft.userAgent.trim()} onClick={() => void saveProfile()}><Save size={14} />保存预设</Button></div><div className="custom-ua-list">{profiles.filter((profile) => !profile.builtin).map((profile) => <div key={profile.id}><button onClick={() => setDraft({ id: profile.id, name: profile.name, userAgent: profile.userAgent })}><strong>{profile.name}</strong><small>{profile.userAgent}</small></button><Button size="icon" variant="ghost" title="删除自定义预设" aria-label={`删除 ${profile.name}`} onClick={() => void run(async () => { setState(await request('ua.profile.delete', { id: profile.id })); await loadProfiles(); }, '自定义 UA 预设已删除')}><Trash2 size={14} /></Button></div>)}</div></aside>
+    </div>
+  </div>;
+}
+
+function networkLabel(record: NetworkRequestRecord): { host: string; path: string } {
+  try {
+    const parsed = new URL(record.url);
+    return { host: parsed.host, path: `${parsed.pathname}${parsed.search}` };
+  } catch {
+    return { host: record.url, path: '' };
+  }
+}
+
+function NetworkActivity({
+  state,
+  setState,
+  tab,
+  bridge,
+  run,
+  busy,
+}: {
+  state: ExtensionState;
+  setState: (state: ExtensionState) => void;
+  tab?: ActiveTabInfo;
+  bridge: BridgeStatus;
+  run: (task: () => Promise<void>, success?: string) => Promise<void>;
+  busy: boolean;
+}) {
+  const [status, setStatus] = useState<NetworkCaptureStatus>();
+  const [records, setRecords] = useState<NetworkRequestRecord[]>([]);
+  const [selectedId, setSelectedId] = useState('');
+  const [exported, setExported] = useState<NetworkRequestExport>();
+  const [previewError, setPreviewError] = useState('');
+  const [generatedPoc, setGeneratedPoc] = useState<YakPocGenerateResult>();
+  const [analysisBundle, setAnalysisBundle] = useState<BrowserRequestAnalysisBundle>();
+  const [loadError, setLoadError] = useState('');
+  const [captureHeaders, setCaptureHeaders] = useState(false);
+  const [captureBody, setCaptureBody] = useState(false);
+  const [query, setQuery] = useState('');
+  const transformShared = gatewayShareActive(state.activeGrant, tab);
+
+  const shareTransform = async () => {
+    if (!tab) throw new Error('请先选择需要共享的页面');
+    setState(await request('grant.create', gatewayShareGrantInput(state, tab)));
+  };
+
+  const load = useCallback(async () => {
+    if (!tab) return;
+    try {
+      setLoadError('');
+      const nextStatus = await request('network.capture.status', { tabId: tab.id });
+      setStatus(nextStatus);
+      if (nextStatus.options) {
+        setCaptureHeaders(nextStatus.options.captureHeaders);
+        setCaptureBody(nextStatus.options.captureBody);
+      }
+      const nextRecords = nextStatus.active
+        ? await request('network.capture.list', { ...nextStatus.target, limit: 200 })
+        : [];
+      setRecords(nextRecords);
+      setSelectedId((current) => nextRecords.some((record) => record.id === current) ? current : nextRecords[0]?.id || '');
+    } catch (error) {
+      setLoadError(errorMessage(error));
+    }
+  }, [tab]);
+
+  useEffect(() => {
+    void load();
+    const listener = (message: unknown) => {
+      const input = message as { action?: string; payload?: { tabId?: number } };
+      if (input?.action === 'network.capture.changed' && input.payload?.tabId === tab?.id) void load();
+    };
+    browser.runtime.onMessage.addListener(listener);
+    return () => browser.runtime.onMessage.removeListener(listener);
+  }, [load, tab?.id]);
+
+  const selected = records.find((record) => record.id === selectedId);
+  useEffect(() => {
+    setExported(undefined);
+    setPreviewError('');
+    setGeneratedPoc(undefined);
+    setAnalysisBundle(undefined);
+    if (!selected || !status?.active || !selected.requestHeadersCaptured) return;
+    void request('network.capture.export', { ...status.target, id: selected.id })
+      .then(setExported)
+      .catch((error) => setPreviewError(errorMessage(error)));
+  }, [selected, status]);
+
+  const visibleRecords = records.filter((record) => {
+    const needle = query.trim().toLowerCase();
+    return !needle || record.url.toLowerCase().includes(needle) || record.method.toLowerCase().includes(needle)
+      || String(record.statusCode || '').includes(needle);
+  });
+  const canSendToYakit = bridge.state === 'connected' && Boolean(bridge.capabilities?.includes('yakit.web_fuzzer.open'));
+  const canGeneratePoc = bridge.state === 'connected' && Boolean(bridge.capabilities?.includes('yakit.poc.generate'));
+  const canPrepareAnalysis = bridge.state === 'connected' && Boolean(bridge.capabilities?.includes('yakit.browser_request.prepare_analysis'));
+  const captureTarget = status?.active ? status.target : tab ? { tabId: tab.id } : undefined;
+  const persistenceHint = status?.persistence === 'degraded'
+    ? `会话存储失败，当前记录仅保留在内存中${status.persistenceError ? `：${status.persistenceError}` : ''}`
+    : status?.persistence === 'memory-only'
+      ? '当前浏览器不提供会话存储，记录仅保留在内存中'
+      : status?.persistence === 'pending'
+        ? '最新记录正在写入浏览器会话存储'
+        : status?.persistence === 'persisted' ? '记录已写入浏览器会话存储' : undefined;
+  const persistenceSuffix = status?.persistence === 'degraded' || status?.persistence === 'memory-only' ? ' · 仅内存' : '';
+
+  const start = () => run(async () => {
+    if (!tab) throw new Error('请选择目标标签页');
+    const next = await request('network.capture.start', {
+      tabId: tab.id, captureHeaders, captureBody, maxEntries: 100, maxBodyBytes: 32 * 1024,
+    });
+    setStatus(next);
+    setRecords([]);
+    setSelectedId('');
+  }, captureHeaders || captureBody ? '网络捕获已开始，敏感字段仅保存在本次浏览器会话' : '网络元数据捕获已开始');
+
+  return <div className="section-view network-view">
+    <div className="page-heading"><div><h1>网络活动</h1><p>HTTP 请求、表单导航、实时通信与前端加密调用。</p></div><div className="network-heading-actions">
+      <span className={`capture-state ${status?.active ? 'active' : ''}`} title={persistenceHint}><i />{status?.active ? `${status.count} 条请求${persistenceSuffix}` : '未捕获'}</span>
+      {status?.active ? <Button variant="ghost" disabled={busy || !captureTarget} onClick={() => void run(async () => { setStatus(await request('network.capture.stop', captureTarget!)); setRecords([]); setSelectedId(''); }, '网络捕获已停止')}><Square size={14} />停止</Button> : <Button variant="primary" disabled={busy || !tab?.url?.startsWith('http')} onClick={() => void start()}><Play size={14} />开始捕获</Button>}
+    </div></div>
+
+    <div className="network-control-bar">
+      <label><Switch checked={captureHeaders} disabled={status?.active || busy} onCheckedChange={setCaptureHeaders} /><span><strong>请求头与 Cookie</strong><small>生成可重放请求所必需</small></span></label>
+      <label><Switch checked={captureBody} disabled={status?.active || busy} onCheckedChange={setCaptureBody} /><span><strong>请求体</strong><small>每条最多保留 32 KiB</small></span></label>
+      <div className="network-search"><Search size={14} /><input aria-label="筛选网络请求" placeholder="筛选 URL、方法或状态码" value={query} onChange={(event) => setQuery(event.target.value)} /></div>
+      <Button size="icon" variant="ghost" title="刷新网络记录" aria-label="刷新网络记录" onClick={() => void load()}><RefreshCw size={15} /></Button>
+      <Button size="icon" variant="ghost" title="清空网络记录" aria-label="清空网络记录" disabled={!status?.active || records.length === 0 || busy} onClick={() => void run(async () => { const next = await request('network.capture.clear', status!.target); setStatus(next); setRecords([]); setSelectedId(''); }, '网络记录已清空')}><Trash2 size={15} /></Button>
+    </div>
+
+    {loadError ? <div className="network-error"><AlertTriangle size={15} />{loadError}<Button size="sm" variant="ghost" onClick={() => void load()}>重试</Button></div> : <div className="network-layout">
+      <div className="network-timeline">
+        <div className="network-table-head"><span>方法</span><span>状态</span><span>目标</span><span>类型</span><span>耗时</span></div>
+        {visibleRecords.length === 0 ? <Empty>{status?.active ? '等待目标页面发出 Fetch/XHR 请求。' : '开始捕获后，网络请求会显示在这里。'}</Empty> : visibleRecords.map((record) => {
+          const label = networkLabel(record);
+          return <button className={`network-row ${selectedId === record.id ? 'selected' : ''}`} key={record.id} onClick={() => setSelectedId(record.id)}>
+            <strong className={`method method-${record.method.toLowerCase()}`}>{record.method}</strong>
+            <span className={record.error || (record.statusCode || 0) >= 400 ? 'status-error' : 'status-good'}>{record.error ? 'ERR' : record.statusCode || '...'}</span>
+            <span className="network-target"><strong>{label.path || '/'}</strong><small>{label.host}</small></span>
+            <span>{record.resourceType}</span>
+            <span>{record.durationMs === undefined ? '—' : `${record.durationMs} ms`}</span>
+          </button>;
+        })}
+      </div>
+
+      <aside className="network-inspector">
+        {!selected ? <Empty>选择一条请求查看详情。</Empty> : <>
+          <div className="network-inspector__heading"><div><span>{selected.method}</span><strong>{networkLabel(selected).path || '/'}</strong><small title={selected.url}>{selected.url}</small></div><span className={selected.error || (selected.statusCode || 0) >= 400 ? 'status-error' : 'status-good'}>{selected.error || selected.statusLine || selected.statusCode || 'Pending'}</span></div>
+          <dl className="network-meta"><div><dt>来源</dt><dd>{selected.resourceType}</dd></div><div><dt>文档</dt><dd>{selected.documentId ? selected.documentId.slice(0, 12) : `frame ${selected.frameId}`}</dd></div><div><dt>大小</dt><dd>{selected.responseSize === undefined ? '未知' : `${selected.responseSize} B`}</dd></div><div><dt>耗时</dt><dd>{selected.durationMs === undefined ? '进行中' : `${selected.durationMs} ms`}</dd></div></dl>
+          <div className="network-packet-heading"><strong>原始请求</strong><div><Button size="icon" variant="ghost" title="复制原始请求" aria-label="复制原始请求" disabled={!exported} onClick={() => void run(async () => { await navigator.clipboard.writeText(exported!.rawRequest); }, '原始请求已复制')}><Copy size={14} /></Button><Button size="sm" variant="ghost" disabled={!exported || !canGeneratePoc || busy} title={!canGeneratePoc ? '当前 Yak 引擎不支持 PoC 生成' : undefined} onClick={() => void run(async () => { setGeneratedPoc(await request('network.capture.poc', { ...status!.target, id: selected.id })); }, 'Yak PoC 已生成')}><Braces size={14} />PoC</Button><Button size="sm" variant="ghost" disabled={!exported || !canPrepareAnalysis || busy} title={!canPrepareAnalysis ? '当前 Yak 引擎不支持分析上下文' : undefined} onClick={() => void run(async () => { setAnalysisBundle(await request('network.capture.analysis', { ...status!.target, id: selected.id })); }, 'AI 分析上下文已生成')}><Bot size={14} />分析</Button><Button size="sm" variant="primary" disabled={!exported || !canSendToYakit || busy} title={!canSendToYakit ? '连接支持 Web Fuzzer 的 Yak 引擎后可用' : undefined} onClick={() => void run(async () => { await request('network.capture.send', { ...status!.target, id: selected.id }); }, '已在 Yakit 中打开 Web Fuzzer')}><Send size={14} />Yakit</Button></div></div>
+          {exported ? <><pre className="network-packet">{exported.rawRequest}</pre>{exported.limitations.length > 0 && <div className="network-limitations"><AlertTriangle size={14} />{exported.limitations.join('；')}</div>}</> : <div className="network-preview-empty"><ShieldCheck size={16} /><span>{previewError || '该请求只保存了元数据。重新开始捕获并启用“请求头与 Cookie”后可生成重放包。'}</span></div>}
+          {generatedPoc && <div className="network-artifact"><div><strong>{generatedPoc.fileName}</strong><Button size="icon" variant="ghost" title="复制 Yak PoC" aria-label="复制 Yak PoC" onClick={() => void run(async () => navigator.clipboard.writeText(generatedPoc.code), 'Yak PoC 已复制')}><Copy size={14} /></Button></div><pre>{generatedPoc.code}</pre></div>}
+          {analysisBundle && <div className="network-artifact analysis"><div><strong>AI 分析上下文</strong><Button size="icon" variant="ghost" title="复制 AI 分析上下文" aria-label="复制 AI 分析上下文" onClick={() => void run(async () => navigator.clipboard.writeText(JSON.stringify(analysisBundle, null, 2)), 'AI 分析上下文已复制')}><Copy size={14} /></Button></div><pre>{JSON.stringify(analysisBundle, null, 2)}</pre></div>}
+        </>}
+      </aside>
+    </div>}
+
+    <RecordingWorkspace
+      tab={tab}
+      busy={busy}
+      run={run}
+      gatewayShared={transformShared}
+      gatewayShareExpiresAt={transformShared ? state.activeGrant?.expiresAt : undefined}
+      gatewayBridgeConnected={bridge.state === 'connected'}
+      onShareGateway={shareTransform}
+    />
+  </div>;
+}
+
+function ContextTool({ tab, run, busy }: { tab?: ActiveTabInfo; run: (task: () => Promise<void>, success?: string) => Promise<void>; busy: boolean }) {
+  const [context, setContext] = useState<PageContext>();
+  const [frames, setFrames] = useState<PageFrameSummary[]>([]);
+  const [selectedFrameId, setSelectedFrameId] = useState(0);
+  const [includeStorage, setIncludeStorage] = useState(false);
+  const [includeCookies, setIncludeCookies] = useState(false);
+  const [selectedNodeId, setSelectedNodeId] = useState('');
+  const [nodeDetails, setNodeDetails] = useState<PageNodeDetails>();
+  const [nodeError, setNodeError] = useState('');
+  const [nodeQuery, setNodeQuery] = useState('');
+  const [nodeValue, setNodeValue] = useState('');
+  const [path, setPath] = useState('');
+  const [args, setArgs] = useState('[]');
+  const [result, setResult] = useState('');
+  const [code, setCode] = useState(`({\n  title: document.title,\n  href: location.href,\n  appGlobals: Object.keys(window).filter((key) => /encrypt|sign|crypto/i.test(key)).slice(0, 20)\n})`);
+  const [evalMode, setEvalMode] = useState<'expression' | 'program'>('expression');
+  const [evalResult, setEvalResult] = useState<PageEvalResult>();
+
+  useEffect(() => {
+    if (!tab) return;
+    void request('frame.list', { tabId: tab.id }).then((items) => {
+      setFrames(items);
+      if (!items.some((frame) => frame.frameId === selectedFrameId && frame.accessible)) setSelectedFrameId(0);
+    }).catch(() => setFrames([]));
+  }, [tab, selectedFrameId]);
+
+  const capture = () => run(async () => {
+    const selectedSemanticKey = context?.document.interactive.find((node) => node.nodeId === selectedNodeId)?.semanticKey;
+    const next = await request('context.capture', { includeDom: true, includeStorage, includeCookies, tabId: tab?.id, frameId: selectedFrameId });
+    setContext(next);
+    setSelectedNodeId(next.document.interactive.find((node) => node.semanticKey === selectedSemanticKey)?.nodeId || next.document.interactive[0]?.nodeId || '');
+    setNodeDetails(undefined);
+    setNodeError('');
+  }, context ? '页面上下文与变化已刷新' : '页面上下文已采集');
+
+  useEffect(() => {
+    setNodeDetails(undefined);
+    setNodeError('');
+    setNodeValue('');
+    if (!context || !selectedNodeId) return;
+    void request('context.node.inspect', { ...context.target, captureId: context.captureId, nodeId: selectedNodeId })
+      .then(setNodeDetails)
+      .catch((error) => setNodeError(errorMessage(error)));
+  }, [context, selectedNodeId]);
+
+  const selectedNode = context?.document.interactive.find((node) => node.nodeId === selectedNodeId);
+  const visibleNodes = context?.document.interactive.filter((node) => {
+    const needle = nodeQuery.trim().toLowerCase();
+    return !needle || node.accessibleName.toLowerCase().includes(needle) || node.text.toLowerCase().includes(needle)
+      || node.tag.toLowerCase().includes(needle) || node.role.toLowerCase().includes(needle) || node.nodeId.includes(needle);
+  }) || [];
+  const authLabel = context?.authentication.status === 'authenticated' ? '可能已登录'
+    : context?.authentication.status === 'unauthenticated' ? '可能未登录' : '登录态未知';
+  const diffLabel = context?.diff.kind === 'initial' ? '首次快照' : context?.diff.kind === 'unchanged' ? '没有变化'
+    : context?.diff.kind === 'document_changed' ? '文档已变化' : '发现变化';
+  const canSetValue = selectedNode && ['input', 'textarea', 'select'].includes(selectedNode.tag) && selectedNode.type !== 'file';
+  const act = (action: 'click' | 'focus' | 'scroll' | 'setValue') => run(async () => {
+    if (!context || !selectedNode) throw new Error('请选择页面元素');
+    const response = await request('context.node.action', {
+      ...context.target, captureId: context.captureId, nodeId: selectedNode.nodeId, action,
+      ...(action === 'setValue' ? { value: nodeValue } : {}),
+    });
+    setNodeDetails(response.node);
+  }, action === 'click' ? '已向页面元素发送点击' : action === 'setValue' ? '页面字段已写入' : '页面元素已定位');
+
+  return <div className="section-view">
+    <div className="page-heading"><div><h1>登录态工作区</h1><p>生成文档绑定的结构化快照，识别认证信号并跟踪页面变化。</p></div><Button variant="primary" disabled={busy || !tab?.url?.startsWith('http')} onClick={() => void capture()}><RefreshCw size={16} />{context ? '刷新并比较' : '采集页面'}</Button></div>
+    <div className="context-options"><label className="check-row"><input type="checkbox" checked={includeStorage} onChange={(event) => setIncludeStorage(event.target.checked)} />读取 Storage 值与数据库清单</label><label className="check-row"><input type="checkbox" checked={includeCookies} onChange={(event) => setIncludeCookies(event.target.checked)} />读取 Cookie 值</label><select aria-label="目标 frame" value={selectedFrameId} onChange={(event) => { setSelectedFrameId(Number(event.target.value)); setContext(undefined); }}>{frames.filter((frame) => frame.accessible).map((frame) => <option key={frame.frameId} value={frame.frameId}>#{frame.frameId} · {frame.isTop ? '主 frame' : frame.sameOrigin ? '同源' : '跨源'} · {frame.title || frame.origin}</option>)}</select><span>{tab?.url || '当前标签页不可访问'}</span></div>
+    <Tabs defaultValue="workspace" className="context-mode">
+      <TabsList className={`context-mode-tabs ${FIREFOX_AMO_BUILD ? 'invoke-only' : ''}`}><TabsTrigger value="workspace">浏览器现场</TabsTrigger>{!FIREFOX_AMO_BUILD && <><TabsTrigger value="invoke">函数调用</TabsTrigger><TabsTrigger value="eval">主世界 Eval</TabsTrigger></>}<TabsTrigger value="json">原始 JSON</TabsTrigger></TabsList>
+      <TabsContent value="workspace" className="context-workspace-tab">
+        {!context ? <div className="context-empty"><KeyRound size={25} /><strong>尚未建立页面快照</strong><span>采集后显示登录态、上下文变化和可操作元素。</span></div> : <>
+          <div className="context-session-strip">
+            <div className={`auth-state ${context.authentication.status}`}><ShieldCheck size={17} /><span><small>认证判断</small><strong>{authLabel}</strong></span><i>{Math.round(context.authentication.confidence * 100)}%</i></div>
+            <div><small>快照</small><strong>{context.captureId.slice(0, 8)}</strong><span>{new Date(context.capturedAt).toLocaleTimeString()}</span></div>
+            <div><small>变化</small><strong>{diffLabel}</strong><span>{context.diff.changedSections.length ? context.diff.changedSections.map((section) => CONTEXT_SECTION_LABELS[section]).join(' / ') : '当前为比较基线'}</span></div>
+            <div><small>文档</small><strong>{context.target.documentId?.slice(0, 12) || `frame ${context.target.frameId}`}</strong><span>{context.frames.length} 个 frame · {context.document.interactive.length} 个节点</span></div>
+          </div>
+          <div className="context-workspace">
+            <div className="context-primary">
+              <section className="context-diff"><div className="context-section-heading"><div><h2>上下文变化</h2><span>{context.diff.fromCaptureId ? `${context.diff.fromCaptureId.slice(0, 8)} → ${context.captureId.slice(0, 8)}` : '等待下一次快照'}</span></div><span className={`diff-state ${context.diff.kind}`}>{diffLabel}</span></div>
+                <div className="diff-summary"><span><strong>+{context.diff.addedNodes.length}</strong>节点</span><span><strong>-{context.diff.removedNodes.length}</strong>节点</span><span><strong>+{context.diff.addedCookieNames.length}</strong>Cookie</span><span><strong>+{context.diff.addedStorageKeys.length}</strong>Storage</span></div>
+                {(context.diff.addedNodes.length > 0 || context.diff.removedNodes.length > 0) && <div className="diff-events">{context.diff.addedNodes.slice(0, 4).map((node) => <span key={`add:${node.semanticKey}`}><i>+</i>{node.text || node.tag}</span>)}{context.diff.removedNodes.slice(0, 4).map((node) => <span key={`remove:${node.semanticKey}`} className="removed"><i>-</i>{node.text || node.tag}</span>)}</div>}
+              </section>
+              <section className="context-inventory"><div className="context-section-heading"><div><h2>页面现场清单</h2><span>frame、浏览器存储和当前文档生命周期</span></div></div><div className="context-inventory-grid">
+                <div><strong>Frames</strong><span>{context.frames.length}</span><ul>{context.frames.slice(0, 12).map((frame) => <li key={frame.frameId}><i className={frame.accessible ? 'ready' : ''} /> <b>#{frame.frameId}</b><span>{frame.isTop ? '主 frame' : frame.sameOrigin ? '同源' : '跨源'}</span><small title={frame.url}>{frame.origin || frame.url}</small></li>)}</ul></div>
+                <div><strong>IndexedDB / Cache</strong><span>{context.document.storageInventory ? context.document.storageInventory.indexedDB.databases.length + context.document.storageInventory.cacheStorage.names.length : 0}</span>{context.document.storageInventory ? <ul>{context.document.storageInventory.indexedDB.databases.slice(0, 6).map((database) => <li key={`db:${database.name}`}><Database size={11} /><b>{database.name}</b><span>{database.stores.length} stores</span></li>)}{context.document.storageInventory.cacheStorage.names.slice(0, 6).map((name) => <li key={`cache:${name}`}><Database size={11} /><b>{name}</b><span>Cache</span></li>)}</ul> : <p>启用 Storage 后采集数据库与 Cache 名称。</p>}</div>
+                <div><strong>Lifecycle</strong><span>{context.lifecycle.length}</span><ul>{context.lifecycle.slice(-8).reverse().map((event) => <li key={event.id}><i className={event.kind} /><b>{event.kind}</b><span>frame #{event.frameId}</span><small>{new Date(event.timestamp).toLocaleTimeString()}</small></li>)}</ul>{context.lifecycle.length === 0 && <p>当前文档尚未记录 SPA 或导航变化。</p>}</div>
+              </div></section>
+              <section className="context-node-browser"><div className="context-section-heading"><div><h2>可操作元素</h2><span>引用仅在当前快照和文档内有效</span></div><div className="context-node-search"><Search size={14} /><input aria-label="筛选页面元素" placeholder="筛选名称、标签或 nodeId" value={nodeQuery} onChange={(event) => setNodeQuery(event.target.value)} /></div></div>
+                <div className="context-node-head"><span>元素</span><span>类型</span><span>引用</span><span>状态</span></div>
+                <div className="context-node-list">{visibleNodes.length === 0 ? <Empty>当前快照没有匹配的可操作元素。</Empty> : visibleNodes.map((node) => <button key={node.nodeId} className={node.nodeId === selectedNodeId ? 'active' : ''} onClick={() => setSelectedNodeId(node.nodeId)}><span><strong>{node.accessibleName || node.text || node.name || '未命名元素'}</strong><small>{node.selectorHint}</small></span><code>{node.tag}{node.type ? `:${node.type}` : ''}</code><code>{node.nodeId}</code><i className={node.visible && !node.disabled ? 'ready' : ''}>{node.disabled ? '禁用' : node.visible ? '可见' : '隐藏'}</i></button>)}</div>
+              </section>
+            </div>
+            <aside className="context-inspector">
+              <section><div className="context-section-heading"><div><h2>元素检查器</h2><span>{selectedNode?.nodeId || '未选择'}</span></div><Eye size={15} /></div>
+                {!selectedNode ? <div className="context-inspector-empty">选择一个节点查看稳定引用和可用操作。</div> : <>{nodeError ? <div className="context-node-error"><AlertTriangle size={14} />{nodeError}</div> : <>
+                  <div className="node-identity"><code>{selectedNode.tag}{selectedNode.type ? `:${selectedNode.type}` : ''}</code><strong>{selectedNode.accessibleName || selectedNode.text || selectedNode.name || '未命名元素'}</strong><span>{selectedNode.selectorHint}</span></div>
+                  <dl className="node-properties"><div><dt>Capture</dt><dd>{context.captureId.slice(0, 12)}</dd></div><div><dt>Node</dt><dd>{selectedNode.nodeId}</dd></div><div><dt>Frame</dt><dd>{context.target.frameId}</dd></div><div><dt>Shadow</dt><dd>{selectedNode.shadowDepth}</dd></div>{nodeDetails?.bounds && <><div><dt>X / Y</dt><dd>{Math.round(nodeDetails.bounds.x)} / {Math.round(nodeDetails.bounds.y)}</dd></div><div><dt>尺寸</dt><dd>{Math.round(nodeDetails.bounds.width)} × {Math.round(nodeDetails.bounds.height)}</dd></div></>}</dl>
+                  <div className="node-actions"><Button size="sm" variant="ghost" disabled={busy} onClick={() => void act('scroll')}><Radio size={14} />定位</Button><Button size="sm" variant="ghost" disabled={busy} onClick={() => void act('focus')}><Eye size={14} />聚焦</Button><Button size="sm" variant="primary" disabled={busy || selectedNode.disabled} onClick={() => void act('click')}><MousePointer2 size={14} />点击</Button></div>
+                  {canSetValue && <div className="node-value-editor"><Field label="写入字段值"><input type={selectedNode.type === 'password' ? 'password' : 'text'} value={nodeValue} onChange={(event) => setNodeValue(event.target.value)} /></Field><Button size="sm" disabled={busy} onClick={() => void act('setValue')}>写入</Button></div>}
+                </>}</>}
+              </section>
+              <section className="auth-evidence"><div className="context-section-heading"><div><h2>认证信号</h2><span>启发式判断，不等同于服务端会话验证</span></div></div>{context.authentication.evidence.length ? <ul>{context.authentication.evidence.map((item) => <li key={item}>{item}</li>)}</ul> : <div className="context-inspector-empty">没有发现明确的登录或退出信号。</div>}{context.authentication.cookieNames.length > 0 && <div className="signal-names"><strong>Cookie</strong><span>{context.authentication.cookieNames.join(', ')}</span></div>}{context.authentication.storageKeys.length > 0 && <div className="signal-names"><strong>Storage</strong><span>{context.authentication.storageKeys.join(', ')}</span></div>}</section>
+            </aside>
+          </div>
+        </>}
+      </TabsContent>
+      {!FIREFOX_AMO_BUILD && <><TabsContent value="invoke" className="context-utility-panel"><h2>调用页面函数</h2><p>按全局路径复用页面已有的签名、加密或解密逻辑。</p><Field label="函数路径"><input value={path} onChange={(event) => setPath(event.target.value)} placeholder="app.crypto.encrypt" /></Field><Field label="参数 JSON 数组"><textarea rows={7} value={args} onChange={(event) => setArgs(event.target.value)} /></Field><Button variant="primary" disabled={busy || !path} onClick={() => void run(async () => { const parsed = JSON.parse(args); if (!Array.isArray(parsed)) throw new Error('参数必须是 JSON 数组'); setResult(JSON.stringify(await request('context.invoke', { path, args: parsed, tabId: tab?.id }), null, 2)); }, '页面函数调用完成')}><Braces size={16} />执行函数</Button>{result && <pre className="invoke-result">{result}</pre>}</TabsContent>
+      <TabsContent value="eval" className="context-utility-panel">
+        <h2>页面主世界 Eval</h2>
+        <div className="segmented eval-mode"><button className={evalMode === 'expression' ? 'active' : ''} onClick={() => setEvalMode('expression')}>表达式</button><button className={evalMode === 'program' ? 'active' : ''} onClick={() => setEvalMode('program')}>程序</button></div>
+        <div className="eval-warning"><ShieldCheck size={15} /><span>{evalMode === 'program' ? '程序模式是 async 函数体，返回结果需显式使用 return，并需要独立的 browser.page.eval.program 授权。' : '表达式模式自动返回表达式值，Agent 只需要 browser.page.eval.expression 授权。'}</span></div>
+        <Field label={evalMode === 'expression' ? 'JavaScript 表达式' : 'JavaScript 程序'}><textarea className="code-editor" rows={12} value={code} onChange={(event) => setCode(event.target.value)} spellCheck={false} /></Field>
+        <Button variant="primary" disabled={busy || !code.trim()} onClick={() => void run(async () => setEvalResult(await request('context.eval', { mode: evalMode, code, tabId: tab?.id, timeoutMs: 10_000 })), '页面代码执行完成')}><Braces size={16} />预览目标后执行</Button>
+        {evalResult && <div className="eval-result-meta"><span>模式 {evalMode}</span><span>类型 {evalResult.type}</span><span>{evalResult.durationMs} ms</span>{evalResult.truncated && <span>结果已截断</span>}</div>}{evalResult && <pre className="invoke-result">{JSON.stringify(evalResult.value, null, 2)}</pre>}
+      </TabsContent></>}
+      <TabsContent value="json" className="context-json"><div className="panel-title"><span>结构化上下文</span>{context && <button onClick={() => void navigator.clipboard.writeText(JSON.stringify(context, null, 2))}>复制 JSON</button>}</div><pre>{context ? JSON.stringify(context, null, 2) : '尚未采集页面上下文。'}</pre></TabsContent>
+    </Tabs>
+  </div>;
+}
+
+function EngineSettings({ state, setState, bridge, setBridge, tabs, run, busy }: { state: ExtensionState; setState: (state: ExtensionState) => void; bridge: BridgeStatus; setBridge: (status: BridgeStatus) => void; tabs: ActiveTabInfo[]; run: (task: () => Promise<void>, success?: string) => Promise<void>; busy: boolean }) {
+  const [draft, setDraft] = useState(state.bridge);
+  const [pairing, setPairing] = useState<BridgePairingStatus>({ state: 'idle', message: state.bridge.pairedEngine ? '当前浏览器已配对' : '尚未配对' });
+  const [panelDraft, setPanelDraft] = useState(state.floatingPanel);
+  const [framesByTab, setFramesByTab] = useState<Record<number, PageFrameSummary[]>>({});
+  const [selectedTargets, setSelectedTargets] = useState<string[]>(state.activeGrant?.targets.map((target) => `${target.tabId}:${target.frameId}`) || []);
+  const [grantLevel, setGrantLevel] = useState<'read' | 'control'>(state.activeGrant && isControlScopeSet(state.activeGrant.scopes) ? 'control' : 'read');
+  const [allowProgramEval, setAllowProgramEval] = useState(Boolean(state.activeGrant?.scopes.includes('browser.page.eval.program')));
+  const [policy, setPolicy] = useState<EnterprisePolicyStatus>({ managed: false, policy: {}, warnings: [] });
+  const [durationMinutes, setDurationMinutes] = useState(30);
+  const selectedGrantScopes = grantLevel === 'control'
+    ? [...CONTROL_CAPABILITY_SCOPES, ...(allowProgramEval ? ['browser.page.eval.program' as const] : [])]
+    : READ_CAPABILITY_SCOPES;
+  useEffect(() => {
+    void request('policy.status').then(setPolicy).catch(() => undefined);
+    void request('bridge.pair.status').then(setPairing).catch(() => undefined);
+    const listener = (message: unknown) => {
+      const input = message as { action?: string; payload?: BridgePairingStatus };
+      if (input.action === 'bridge.pairing.status.changed' && input.payload) setPairing(input.payload);
+    };
+    browser.runtime.onMessage.addListener(listener);
+    return () => browser.runtime.onMessage.removeListener(listener);
+  }, []);
+  useEffect(() => {
+    let active = true;
+    void Promise.all(tabs.map(async (item) => [item.id, await request('frame.list', { tabId: item.id }).catch(() => [])] as const))
+      .then((inventories) => {
+        if (active) setFramesByTab(Object.fromEntries(inventories));
+      });
+    return () => { active = false; };
+  }, [tabs]);
+  useEffect(() => setDraft(state.bridge), [state.bridge]);
+  const toggleTarget = (key: string, checked: boolean) => setSelectedTargets((current) => checked
+    ? [...new Set([...current, key])]
+    : current.filter((item) => item !== key));
+  const toggleTab = (tabId: number, checked: boolean) => {
+    const mainKey = `${tabId}:0`;
+    if (checked) toggleTarget(mainKey, true);
+    else setSelectedTargets((current) => current.filter((key) => !key.startsWith(`${tabId}:`)));
+  };
+  const save = () => run(async () => {
+    if (draft.transport === 'native') {
+      // Permission requests must be the first browser call made from the click gesture.
+      const granted = await browser.permissions.request({ permissions: ['nativeMessaging'] });
+      if (!granted) throw new Error('使用 Native Host 需要用户授予 Native Messaging 权限');
+    }
+    setState(await request('bridge.config.save', draft));
+  }, 'Bridge 设置已保存');
+  const savePanel = () => run(async () => {
+    const siteOrigins = panelDraft.siteOrigins.map((value) => new URL(value).origin);
+    const next = await request('panel.update', { ...panelDraft, siteOrigins });
+    setState(next);
+    setPanelDraft(next.floatingPanel);
+  }, '悬浮面板策略已保存');
+  return <div className="section-view engine-view">
+    <div className="page-heading"><div><h1>Yak 引擎连接</h1><p>扩展主动连接本机 Bridge，网页无法直接访问此通道。</p></div><span className={`large-status ${bridge.state}`}><Radio size={16} />{bridge.message}</span></div>
+    {policy.managed && <div className="managed-policy-banner"><ShieldCheck size={16} /><span><strong>此浏览器由组织策略管理</strong><small>{policy.policy.disableWebSocket ? '必须使用 Native Messaging' : policy.policy.bridgeTransport ? `传输锁定为 ${policy.policy.bridgeTransport}` : '连接与授权限制已应用'}{policy.policy.maxGrantMinutes ? ` · 授权最长 ${policy.policy.maxGrantMinutes} 分钟` : ''}{policy.policy.allowProgramEval === false ? ' · 程序 Eval 已禁用' : ''}</small>{policy.warnings.map((warning) => <i key={warning}>{warning}</i>)}</span></div>}
+    {bridge.state === 'connected' && <div className="bridge-identity-strip"><div><span>引擎实例</span><code title={bridge.engineInstanceId}>{bridge.engineInstanceId?.slice(0, 18)}</code></div><div><span>连接</span><code title={bridge.connectionId}>{bridge.connectionId?.slice(0, 18)}</code></div><div><span>会话</span><code title={bridge.sessionId}>{bridge.sessionId?.slice(0, 18)}</code></div><div><span>心跳</span><strong>{bridge.latencyMs === undefined ? '等待首个回执' : `${bridge.latencyMs} ms`}</strong></div><div><span>恢复</span><strong>{bridge.resumed ? '已恢复 task session' : '新会话'}</strong></div></div>}
+    <div className="engine-layout"><div className="settings-form">
+      <section className={`pairing-workspace ${state.bridge.pairedEngine ? 'paired' : pairing.state}`}>
+        <div className="pairing-workspace__heading"><span className="pairing-icon"><KeyRound size={19} /></span><div><h2>{state.bridge.pairedEngine ? '浏览器已安全配对' : pairing.state === 'pending' ? '等待 Yakit 确认' : '连接本机 Yakit'}</h2><p>{state.bridge.pairedEngine ? '设备身份已锁定到首次批准的 Yak 引擎。' : pairing.message}</p></div></div>
+        {pairing.state === 'pending' && <div className="pairing-code" aria-live="polite"><span>配对验证码</span><strong>{pairing.code?.slice(0, 3)} {pairing.code?.slice(3)}</strong><small>{pairing.expiresAt ? `${Math.max(0, Math.ceil((pairing.expiresAt - Date.now()) / 1000))} 秒内有效` : ''}</small></div>}
+        {state.bridge.pairedEngine && <div className="paired-engine-meta"><div><span>引擎身份</span><code title={state.bridge.pairedEngine.engineIdentityId}>{state.bridge.pairedEngine.engineIdentityId.slice(0, 24)}</code></div><div><span>设备 ID</span><code title={state.bridge.pairedEngine.deviceId}>{state.bridge.pairedEngine.deviceId.slice(0, 24)}</code></div></div>}
+        <div className="editor-actions">
+          {!state.bridge.pairedEngine && pairing.state !== 'pending' && <Button variant="primary" disabled={busy || pairing.state === 'requesting'} onClick={() => void run(async () => setPairing(await request('bridge.pair')))}><Power size={16} />{pairing.state === 'requesting' ? '正在查找' : '查找本机 Yakit'}</Button>}
+          {!state.bridge.pairedEngine && pairing.state === 'pending' && <Button disabled={busy} onClick={() => void run(async () => setPairing(await request('bridge.pair.cancel')))}><X size={16} />取消申请</Button>}
+          {state.bridge.pairedEngine && <Button variant="primary" disabled={busy} onClick={() => void run(async () => { if (bridge.state === 'connected') await request('bridge.disconnect'); else await request('bridge.connect'); setBridge(await request('bridge.status')); }, bridge.state === 'connected' ? 'Bridge 已断开' : 'Bridge 正在连接')}><Power size={16} />{bridge.state === 'connected' ? '断开连接' : '连接引擎'}</Button>}
+          {state.bridge.pairedEngine && <Button variant="ghost" disabled={busy} onClick={() => { if (window.confirm('解除当前 Yak 引擎的本地配对？浏览器安装身份会保留，重新配对时 Yakit 将更新原可信记录。')) void run(async () => { const next = await request('bridge.unpair'); setState(next); setDraft(next.bridge); }, '本地配对凭据已清除'); }}><Trash2 size={16} />解除配对</Button>}
+        </div>
+      </section>
+      <details className="advanced-connection"><summary>高级连接设置</summary><div className="advanced-connection__body">
+        <div className="segmented"><button disabled={Boolean(policy.policy.bridgeTransport || policy.policy.disableWebSocket)} className={draft.transport === 'websocket' ? 'active' : ''} onClick={() => setDraft({ ...draft, transport: 'websocket' })}>本机 WebSocket</button><button disabled={Boolean(policy.policy.bridgeTransport || policy.policy.disableWebSocket)} className={draft.transport === 'native' ? 'active' : ''} onClick={() => setDraft({ ...draft, transport: 'native' })}>Native Host</button></div>
+        {draft.transport === 'native' ? <Field label="Native Host" hint="仅在已安装 Yakit Native Host 时使用"><input disabled={Boolean(policy.policy.nativeHost)} value={draft.nativeHost} onChange={(event) => setDraft({ ...draft, nativeHost: event.target.value })} /></Field> : <Field label="WebSocket Endpoint" hint="只允许 127.0.0.1、localhost 或 ::1"><input disabled={Boolean(policy.policy.bridgeEndpoint)} value={draft.endpoint} onChange={(event) => setDraft({ ...draft, endpoint: event.target.value })} /></Field>}
+        <label className="toggle-row"><span><strong>启动扩展时自动连接</strong><small>{draft.transport === 'native' ? '由浏览器拉起已注册的 Yakit Host' : 'Service Worker 使用心跳维持本机连接'}</small></span><Switch disabled={policy.policy.autoConnect !== undefined || !draft.pairedEngine} checked={draft.autoConnect} onCheckedChange={(checked) => setDraft({ ...draft, autoConnect: checked })} /></label>
+        <div className="editor-actions"><Button disabled={busy} onClick={() => void save()}><Save size={16} />保存高级设置</Button></div>
+      </div></details>
+      <section className="panel-policy-settings"><h2>网页侧边工具</h2>
+        <label className="toggle-row"><span><strong>启用悬浮面板</strong><small>轻量启动器常驻，React 工作台仅在展开时加载</small></span><Switch disabled={policy.policy.floatingPanelEnabled !== undefined} checked={panelDraft.enabled} onCheckedChange={(enabled) => setPanelDraft({ ...panelDraft, enabled })} /></label>
+        <div className="panel-policy-grid"><Field label="显示条件"><select value={panelDraft.displayMode} onChange={(event) => setPanelDraft({ ...panelDraft, displayMode: event.target.value as 'always' | 'active-task' })}><option value="always">符合站点规则时显示</option><option value="active-task">仅活动任务或人工接管时显示</option></select></Field><Field label="站点规则"><select value={panelDraft.siteMode} onChange={(event) => setPanelDraft({ ...panelDraft, siteMode: event.target.value as 'all' | 'allowlist' | 'denylist' })}><option value="all">所有 HTTP(S) 站点</option><option value="allowlist">仅允许列表</option><option value="denylist">排除列表</option></select></Field></div>
+        {panelDraft.siteMode !== 'all' && <Field label="站点 Origin" hint="每行一个完整 origin"><textarea rows={4} value={panelDraft.siteOrigins.join('\n')} onChange={(event) => setPanelDraft({ ...panelDraft, siteOrigins: event.target.value.split(/\s+/).filter(Boolean) })} placeholder="https://app.example.com" /></Field>}
+        <label className="toggle-row"><span><strong>页面内快捷展开</strong><small>仅在当前站点策略允许显示时生效</small></span><Switch checked={panelDraft.shortcutEnabled} onCheckedChange={(shortcutEnabled) => setPanelDraft({ ...panelDraft, shortcutEnabled })} /></label>
+        <label className="toggle-row"><span><strong>全屏自动收起</strong><small>进入全屏、演示或视频场景时关闭展开内容</small></span><Switch checked={panelDraft.autoCollapseFullscreen} onCheckedChange={(autoCollapseFullscreen) => setPanelDraft({ ...panelDraft, autoCollapseFullscreen })} /></label>
+        <div className="editor-actions"><Button disabled={busy} onClick={() => void savePanel()}><Save size={16} />保存面板策略</Button></div>
+      </section>
+      <div className="grant-editor"><h2>浏览器共享会话</h2><p>只把明确勾选的 frame 和能力授权给当前 Agent；子 frame、刷新和跨来源导航不会静默继承授权。</p><div className="tab-picker">{tabs.map((tabItem) => { const frames = framesByTab[tabItem.id] || []; const mainSelected = selectedTargets.includes(`${tabItem.id}:0`); return <div className="tab-picker-group" key={tabItem.id}><label><input type="checkbox" checked={mainSelected} onChange={(event) => toggleTab(tabItem.id, event.target.checked)} /><span><strong>{tabItem.title}</strong><small>{tabItem.url}</small></span></label>{mainSelected && frames.filter((frame) => !frame.isTop).map((frame) => <label className="frame-target" key={frame.frameId}><input type="checkbox" disabled={!frame.accessible || !frame.origin} checked={selectedTargets.includes(`${tabItem.id}:${frame.frameId}`)} onChange={(event) => toggleTarget(`${tabItem.id}:${frame.frameId}`, event.target.checked)} /><span><strong>{frame.title || frame.name || `Frame ${frame.frameId}`}</strong><small>#{frame.frameId} · {frame.sameOrigin ? '同源' : '跨源'} · {frame.origin || frame.url}</small></span></label>)}</div>; })}</div><div className="grant-options"><Field label="权限预设"><select value={grantLevel} onChange={(event) => setGrantLevel(event.target.value as 'read' | 'control')}><option value="read">只读：页面、Storage、Cookie</option><option value="control">控制：页面操作、网络敏感字段、深度捕获、代理</option></select></Field><Field label="有效期"><select value={durationMinutes} onChange={(event) => setDurationMinutes(Number(event.target.value))}><option value="15">15 分钟</option><option value="30">30 分钟</option><option value="60">1 小时</option><option value="240">4 小时</option></select></Field></div>{grantLevel === 'control' && <label className="toggle-row grant-risk-toggle"><span><strong>允许程序 Eval</strong><small>独立高风险 scope，可执行多条语句并产生页面副作用</small></span><Switch disabled={policy.policy.allowProgramEval === false} checked={allowProgramEval && policy.policy.allowProgramEval !== false} onCheckedChange={setAllowProgramEval} /></label>}<div className="grant-scope-list">{selectedGrantScopes.filter((scope) => policy.policy.allowProgramEval !== false || scope !== 'browser.page.eval.program').map((scope) => <span key={scope}>{CAPABILITY_LABELS[scope]}</span>)}</div><div className="editor-actions"><button className="primary-button" disabled={busy || selectedTargets.length === 0} onClick={() => void run(async () => setState(await request('grant.create', { targets: selectedTargets.map((key) => { const [tabId, frameId] = key.split(':').map(Number); return { tabId, frameId }; }), scopes: selectedGrantScopes.filter((scope) => policy.policy.allowProgramEval !== false || scope !== 'browser.page.eval.program'), durationMinutes })), '共享会话已创建')}><ShieldCheck size={16} />创建会话</button>{state.activeGrant && <button className="danger-button" onClick={() => void run(async () => setState(await request('grant.revoke')), '共享会话已撤销')}><X size={16} />立即撤销</button>}</div>{state.activeGrant && <div className="grant-status"><strong>{isControlScopeSet(state.activeGrant.scopes) ? '控制会话' : '只读会话'}</strong><span>{state.activeGrant.targets.length} 个 frame · {state.activeGrant.scopes.length} 项能力 · {new Date(state.activeGrant.expiresAt).toLocaleString()} 到期</span></div>}</div></div>
+      <div className="protocol-panel"><h2>Bridge 方法</h2><div><code>browser.tabs / frames</code><span>列出授权标签页与完整 frame inventory</span></div><div><code>browser.context</code><span>生成结构化快照、存储 inventory、认证信号与上下文 diff</span></div><div><code>browser.node.*</code><span>检查或操作快照内的文档绑定节点引用</span></div><div><code>browser.cookies</code><span>读取指定标签页的浏览器 Cookie</span></div><div><code>browser.network.*</code><span>控制有界网络捕获、读取请求时间线并导出重放包</span></div><div><code>browser.takeover</code><span>将页面切到前台，交给用户扫码或二次验证</span></div><div><code>browser.invoke</code><span>以控制权限调用页面已有全局函数</span></div><div><code>browser.eval</code><span>以控制权限在页面主世界执行代码，支持 Promise 和超时</span></div><div><code>proxy.list / switch</code><span>读取并切换扩展代理配置</span></div></div>
+    </div>
+  </div>;
+}
+
+export default App;

src/entrypoints/options/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Yakit Browser Agent</title>
+  <meta name="manifest.open_in_tab" content="true" />
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./main.tsx"></script>
+</body>
+</html>

src/entrypoints/options/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import {createRoot} from 'react-dom/client';
+import App from './App';
+import { watchTheme } from '@/platform/storage/appearance';
+import '@/styles/global.css'
+import './style.css';
+
+watchTheme();
+
+const root = createRoot(document.getElementById('app')!);
+root.render(<App/>);

src/entrypoints/options/style.css

@@ -0,0 +1,2 @@
+html { scrollbar-gutter: stable; }
+html, body, #app { min-width: 320px; min-height: 100%; margin: 0; }

src/entrypoints/page-main-world.ts

@@ -0,0 +1,141 @@
+import {
+  PAGE_REQUEST_EVENT,
+  PAGE_RESPONSE_EVENT,
+  type PageBridgeRequest,
+  type PageBridgeResponse,
+} from '@/features/page-context/protocol';
+
+export default defineUnlistedScript(() => {
+  const script = document.currentScript;
+  if (!script || script.getAttribute('data-yakit-page-bridge-ready') === 'true') return;
+  script.setAttribute('data-yakit-page-bridge-ready', 'true');
+
+  const MAX_DEPTH = 6;
+  const MAX_ITEMS = 100;
+  const MAX_STRING = 100_000;
+
+  function serialize(value: unknown): { value: unknown; type: string; preview: string; truncated: boolean } {
+    const seen = new WeakSet<object>();
+    let truncated = false;
+
+    const visit = (input: unknown, depth: number): unknown => {
+      if (input === null) return null;
+      if (typeof input === 'string') {
+        if (input.length > MAX_STRING) truncated = true;
+        return input.slice(0, MAX_STRING);
+      }
+      if (typeof input === 'number' || typeof input === 'boolean') return input;
+      if (typeof input === 'undefined') return { $type: 'undefined' };
+      if (typeof input === 'bigint') return { $type: 'bigint', value: input.toString() };
+      if (typeof input === 'symbol') return { $type: 'symbol', value: String(input) };
+      if (typeof input === 'function') {
+        const source = Function.prototype.toString.call(input);
+        if (source.length > 2_000) truncated = true;
+        return { $type: 'function', name: input.name || '', source: source.slice(0, 2_000) };
+      }
+      if (depth >= MAX_DEPTH) {
+        truncated = true;
+        return { $type: 'max-depth', constructor: (input as object).constructor?.name || 'Object' };
+      }
+      if (seen.has(input as object)) return { $type: 'circular' };
+      seen.add(input as object);
+
+      if (input instanceof Error) {
+        return { $type: 'error', name: input.name, message: input.message, stack: input.stack?.slice(0, 10_000) };
+      }
+      if (input instanceof Date) return { $type: 'date', value: input.toISOString() };
+      if (input instanceof RegExp) return { $type: 'regexp', value: String(input) };
+      if (input instanceof Node) {
+        const element = input instanceof Element ? input : input.parentElement;
+        const html = element?.outerHTML || input.textContent || '';
+        if (html.length > 10_000) truncated = true;
+        return {
+          $type: 'node',
+          name: input.nodeName,
+          html: html.slice(0, 10_000),
+        };
+      }
+      if (Array.isArray(input)) {
+        if (input.length > MAX_ITEMS) truncated = true;
+        return input.slice(0, MAX_ITEMS).map((item) => visit(item, depth + 1));
+      }
+
+      const output: Record<string, unknown> = {};
+      const keys = Reflect.ownKeys(input as object).slice(0, MAX_ITEMS);
+      if (Reflect.ownKeys(input as object).length > MAX_ITEMS) truncated = true;
+      for (const key of keys) {
+        const name = typeof key === 'symbol' ? `[${String(key)}]` : key;
+        try {
+          output[name] = visit(Reflect.get(input as object, key), depth + 1);
+        } catch (error) {
+          output[name] = { $type: 'unreadable', message: error instanceof Error ? error.message : String(error) };
+        }
+      }
+      return output;
+    };
+
+    const normalized = visit(value, 0);
+    let preview: string;
+    try {
+      preview = typeof value === 'string' ? value : JSON.stringify(normalized);
+    } catch {
+      preview = String(value);
+    }
+    return {
+      value: normalized,
+      type: value === null ? 'null' : typeof value,
+      preview: preview.slice(0, 2_000),
+      truncated: truncated || preview.length > 2_000,
+    };
+  }
+
+  script.addEventListener(PAGE_REQUEST_EVENT, (rawEvent) => {
+    if (!(rawEvent instanceof CustomEvent) || typeof rawEvent.detail !== 'string') return;
+    void (async () => {
+      let request: PageBridgeRequest;
+      try {
+        request = JSON.parse(rawEvent.detail) as PageBridgeRequest;
+      } catch {
+        return;
+      }
+      const startedAt = performance.now();
+      let response: PageBridgeResponse;
+      try {
+        let rawResult: unknown;
+        if (request.operation === 'eval') {
+          const source = request.mode === 'expression'
+            ? `(${request.code}\n)`
+            : `(async () => {\n${request.code}\n})()`;
+          rawResult = (0, eval)(source);
+        } else {
+          const segments = request.path.split('.').filter(Boolean);
+          let owner: unknown = window;
+          let target: unknown = window;
+          for (const segment of segments) {
+            owner = target;
+            target = Reflect.get(target as object, segment);
+          }
+          if (typeof target !== 'function') throw new TypeError(`${request.path} is not a function`);
+          rawResult = Reflect.apply(target, owner, request.args);
+        }
+        const result = serialize(await rawResult);
+        response = {
+          id: request.id,
+          ok: true,
+          result: { ...result, durationMs: Math.round((performance.now() - startedAt) * 100) / 100 },
+        };
+      } catch (error) {
+        response = {
+          id: request.id,
+          ok: false,
+          error: {
+            name: error instanceof Error ? error.name : 'Error',
+            message: error instanceof Error ? error.message : String(error),
+            stack: error instanceof Error ? error.stack?.slice(0, 10_000) : undefined,
+          },
+        };
+      }
+      script.dispatchEvent(new CustomEvent(PAGE_RESPONSE_EVENT, { detail: JSON.stringify(response) }));
+    })();
+  });
+});

src/entrypoints/page-recorder-main-world.ts

@@ -0,0 +1,970 @@
+import { PAGE_RECORDER_PROTOCOL_VERSION, PAGE_RECORDER_REGISTRY_KEY } from '@/features/browser-recording/constants';
+import {
+  PAGE_RECORDER_REQUEST_EVENT,
+  PAGE_RECORDER_RESPONSE_EVENT,
+  type PageRecorderBridgeCommand,
+  type PageRecorderBridgeRequest,
+  type PageRecorderBridgeResponse,
+} from '@/features/browser-recording/bridge-protocol';
+import { PAGE_CALLABLE_REGISTRY_KEY } from '@/features/page-callable/constants';
+import { executeRequestTransaction, executeSideEffectFreeCallable } from '@/features/page-callable/request-transaction';
+import { callableExecutionPolicy, settleCallableResult } from '@/features/page-callable/execution';
+import {
+  createCryptoAdapterRuntime,
+  PAGE_CRYPTO_ADAPTERS,
+  type CallableOperationKind,
+  type CryptoAdapterInvocationPlan,
+  type CryptoAdapterOperation,
+  type CryptoAdapterRuntime,
+  type CryptoAdapterToolkit,
+} from '@/features/browser-crypto/adapters';
+import { executeTransformDirection } from '@/features/browser-transform/mapping';
+import {
+  createCommunicationBoundaryRuntime,
+  type CommunicationBoundaryRuntime,
+} from '@/features/browser-recording/main-world/boundaries/communication';
+import {
+  createNetworkBoundaryRuntime,
+  type NetworkBoundaryRuntime,
+} from '@/features/browser-recording/main-world/boundaries/network';
+import {
+  createRequestPreparationRuntime,
+  type RequestPreparationRuntime,
+} from '@/features/browser-recording/main-world/boundaries/request-preparation';
+import {
+  createEncodingTransformRuntime,
+  type EncodingTransformRuntime,
+} from '@/features/browser-recording/main-world/transforms/encoding';
+import {
+  createLibraryTransformRuntime,
+  type LibraryTransformRuntime,
+} from '@/features/browser-recording/main-world/transforms/library-transform';
+import {
+  createRecordingEvidenceRuntime,
+  type RecordingEvidenceRuntime,
+} from '@/features/browser-recording/main-world/evidence';
+import {
+  createRecordingTraceRuntime,
+  type RecordingTraceContext,
+  type RecordingTraceRuntime,
+} from '@/features/browser-recording/main-world/trace';
+import { RetainedCallBudget } from '@/features/browser-recording/main-world/retained-call-budget';
+import { estimateRetainedCallBytes } from '@/features/browser-recording/main-world/retained-value-size';
+import { ExtensionError } from '@/shared/errors';
+import type {
+  BrowserPageCallableExecution,
+  BrowserPageCallableExecutionPolicy,
+  BrowserPageCallableTransaction,
+  BrowserRecordingCrypto,
+  BrowserRecordingNavigation,
+  BrowserRecordingTransform,
+  BrowserTransformDirection,
+  BrowserTransformDirectionName,
+  BrowserTransformPacket,
+} from '@/types/models';
+
+type RecordingKind = 'interaction' | 'fetch' | 'xhr' | 'form' | 'beacon' | 'worker' | 'message'
+  | 'websocket' | 'crypto' | 'transform' | 'navigation';
+
+interface RecorderOptions {
+  captureValues: boolean;
+  maxEntries: number;
+  maxValueBytes: number;
+  expiresAt?: number;
+}
+
+interface ValueEvidence {
+  path: string;
+  fingerprint: string;
+  encoding: 'text' | 'bytes' | 'hex' | 'base64' | 'json';
+  byteLength: number;
+  preview?: string;
+}
+
+type CallArgumentRole = 'data' | 'key' | 'iv' | 'algorithm' | 'options' | 'signature'
+  | 'salt' | 'nonce' | 'aad' | 'unknown';
+
+interface CallArgumentEvidence {
+  index: number;
+  role: CallArgumentRole;
+  dataType: string;
+  byteLength?: number;
+  replaceable: boolean;
+  retained: boolean;
+  summary?: string;
+}
+
+interface RecordingEvent {
+  id: string;
+  sequence: number;
+  timestamp: number;
+  durationMs?: number;
+  recordingId: string;
+  traceId: string;
+  interactionId?: string;
+  parentEventId?: string;
+  kind: RecordingKind;
+  source?: 'page' | 'browser';
+  documentId?: string;
+  operation: string;
+  label?: string;
+  url?: string;
+  method?: string;
+  crypto?: BrowserRecordingCrypto;
+  transform?: BrowserRecordingTransform;
+  direction?: 'send' | 'receive';
+  socketId?: string;
+  channelId?: string;
+  byteLength?: number;
+  resultByteLength?: number;
+  dataType?: string;
+  stack?: string;
+  scriptUrl?: string;
+  wrapperHandleId?: string;
+  callHandleId?: string;
+  callableCapable?: boolean;
+  arguments?: CallArgumentEvidence[];
+  inputs: ValueEvidence[];
+  outputs: ValueEvidence[];
+  sensitiveCaptured: boolean;
+  inputPreview?: string;
+  outputPreview?: string;
+  error?: string;
+  navigation?: BrowserRecordingNavigation;
+}
+
+interface PageCallableMetadata {
+  id: string;
+  name: string;
+  kind: 'recorded-call' | 'business-closure' | 'request-transaction' | 'global-function';
+  operation: string;
+  algorithm?: string;
+  crypto?: BrowserRecordingCrypto;
+  origin: string;
+  lifecycle: 'document';
+  execution: BrowserPageCallableExecutionPolicy;
+  inputSlots: Array<{
+    id: string;
+    name: string;
+    index: number;
+    role: CallArgumentRole;
+    dataType: string;
+    required: boolean;
+    retained: boolean;
+  }>;
+  output: {
+    dataType: string;
+    encoding: 'auto' | 'utf8' | 'hex' | 'base64' | 'json';
+    shape: 'value' | 'envelope';
+    paths: string[];
+  };
+  transaction?: BrowserPageCallableTransaction;
+  provenance: {
+    recordingId?: string;
+    traceId?: string;
+    eventId?: string;
+    sourceUrl?: string;
+    lineNumber?: number;
+    functionName?: string;
+  };
+  createdAt: number;
+}
+
+interface PageCallableRegistryEntry {
+  metadata: PageCallableMetadata;
+  invoke(args: unknown[], context?: { domInputCount: number }): unknown;
+}
+
+interface RecorderSnapshot {
+  version: typeof PAGE_RECORDER_PROTOCOL_VERSION;
+  active: boolean;
+  recordingId?: string;
+  startedAt?: number;
+  count: number;
+  droppedCount: number;
+  retainedCallCount: number;
+  retainedCallBytes: number;
+  retainedCallDroppedCount: number;
+  options?: RecorderOptions;
+  events: RecordingEvent[];
+  callables: PageCallableMetadata[];
+}
+
+interface RecordedCallHandle {
+  id: string;
+  retainedBytes: number;
+  kind: CallableOperationKind;
+  operation: string;
+  crypto: BrowserRecordingCrypto;
+  original: Function;
+  thisArg: unknown;
+  args: unknown[];
+  inputIndex: number;
+  originalInput: unknown;
+  eventId?: string;
+  traceId?: string;
+  recordingId?: string;
+  sourceUrl?: string;
+  outputDataType?: string;
+  outputEncoding?: PageCallableMetadata['output']['encoding'];
+  resultMode: 'sync' | 'promise';
+  adaptInput(value: unknown): unknown;
+}
+
+interface RecorderController {
+  version: typeof PAGE_RECORDER_PROTOCOL_VERSION;
+  command(command: string, input?: Record<string, unknown>): unknown;
+}
+
+interface DeepBreakMatcher {
+  wrapperHandleId: string;
+  operation: string;
+  scriptUrl?: string;
+}
+
+type RecordingEventInput = Omit<RecordingEvent,
+  'id' | 'sequence' | 'timestamp' | 'recordingId' | 'traceId' | 'interactionId' | 'parentEventId' | 'sensitiveCaptured' | 'inputs' | 'outputs'
+> & { inputs?: ValueEvidence[]; outputs?: ValueEvidence[] };
+
+export default defineUnlistedScript(() => {
+  const REGISTRY_KEY = PAGE_RECORDER_REGISTRY_KEY;
+  const CALLABLE_REGISTRY_KEY = PAGE_CALLABLE_REGISTRY_KEY;
+  const registry = window as unknown as Record<string, unknown>;
+  const bridgeScript = document.currentScript;
+  if (bridgeScript instanceof HTMLScriptElement) {
+    const bridgeParse = JSON.parse.bind(JSON);
+    const bridgeStringify = JSON.stringify.bind(JSON);
+    const allowedCommands = new Set<PageRecorderBridgeCommand>([
+      'start', 'resume', 'navigation.record', 'stop', 'clear', 'status', 'get',
+      'callable.create', 'callable.list', 'callable.execute', 'callable.delete', 'transform.execute',
+    ]);
+    bridgeScript.addEventListener(PAGE_RECORDER_REQUEST_EVENT, (rawEvent) => {
+      if (!(rawEvent instanceof CustomEvent) || typeof rawEvent.detail !== 'string') return;
+      void (async () => {
+        let request: PageRecorderBridgeRequest;
+        try { request = bridgeParse(rawEvent.detail) as PageRecorderBridgeRequest; } catch { return; }
+        if (!request?.id || !allowedCommands.has(request.command)) return;
+        let response: PageRecorderBridgeResponse;
+        try {
+          const activeController = registry[REGISTRY_KEY] as RecorderController | undefined;
+          if (activeController?.version !== PAGE_RECORDER_PROTOCOL_VERSION || typeof activeController.command !== 'function') {
+            throw new Error('页面录制器尚未就绪');
+          }
+          response = {
+            id: request.id,
+            ok: true,
+            result: await Promise.resolve(activeController.command(request.command, request.input || {})),
+          };
+        } catch (error) {
+          response = {
+            id: request.id,
+            ok: false,
+            error: error instanceof Error ? error.message : String(error),
+          };
+        }
+        try {
+          bridgeScript.dispatchEvent(new CustomEvent(PAGE_RECORDER_RESPONSE_EVENT, { detail: bridgeStringify(response) }));
+        } catch (error) {
+          const fallback: PageRecorderBridgeResponse = {
+            id: request.id,
+            ok: false,
+            error: `页面录制器结果无法序列化：${error instanceof Error ? error.message : String(error)}`,
+          };
+          bridgeScript.dispatchEvent(new CustomEvent(PAGE_RECORDER_RESPONSE_EVENT, { detail: bridgeStringify(fallback) }));
+        }
+      })();
+    });
+  }
+  const existing = registry[REGISTRY_KEY] as RecorderController | undefined;
+  if (existing?.version === PAGE_RECORDER_PROTOCOL_VERSION) return;
+
+  const nativeStringify = JSON.stringify.bind(JSON);
+  const nativeAtob = window.atob.bind(window);
+  const encoder = new TextEncoder();
+  const decoder = new TextDecoder();
+  const restorers: Array<() => void> = [];
+  const handles = new RetainedCallBudget<RecordedCallHandle>();
+  const activeEventStack: string[] = [];
+  let expiryTimer: number | undefined;
+  let active = false;
+  let recordingId: string | undefined;
+  let startedAt: number | undefined;
+  let uniqueSequence = 0;
+  let deepBreakMatcher: DeepBreakMatcher | undefined;
+  let restoreAfterDeepBreak = false;
+  let options: RecorderOptions = { captureValues: false, maxEntries: 200, maxValueBytes: 2_048 };
+  const evidenceRuntime: RecordingEvidenceRuntime = createRecordingEvidenceRuntime(window, () => options);
+  const traceRuntime: RecordingTraceRuntime = createRecordingTraceRuntime({
+    active: () => active,
+    recordingId: () => recordingId,
+    captureValues: () => options.captureValues,
+    maxEntries: () => options.maxEntries,
+    parentEventId: () => activeEventStack.at(-1),
+    unique,
+  });
+
+  function pageCallableRegistry(): Map<string, PageCallableRegistryEntry> {
+    const current = registry[CALLABLE_REGISTRY_KEY];
+    if (current instanceof Map) return current as Map<string, PageCallableRegistryEntry>;
+    const created = new Map<string, PageCallableRegistryEntry>();
+    Object.defineProperty(registry, CALLABLE_REGISTRY_KEY, {
+      value: created,
+      configurable: true,
+      enumerable: false,
+      writable: false,
+    });
+    return created;
+  }
+
+  function callableMetadata(): PageCallableMetadata[] {
+    return [...pageCallableRegistry().values()].slice(-128).map((entry) => entry.metadata);
+  }
+
+  function clearRecordedCallables(): void {
+    const callables = pageCallableRegistry();
+    for (const [id, entry] of callables) {
+      if (entry.metadata.kind === 'recorded-call') callables.delete(id);
+    }
+  }
+
+  function unique(prefix: string): string {
+    uniqueSequence += 1;
+    return `${prefix}-${Date.now().toString(36)}-${Math.floor(performance.now() * 1000).toString(36)}-${uniqueSequence.toString(36)}`;
+  }
+
+  function dataType(value: unknown): string {
+    return evidenceRuntime.dataType(value);
+  }
+
+  function asBytes(value: unknown): Uint8Array | undefined {
+    return evidenceRuntime.asBytes(value);
+  }
+
+  function bytesToBase64(bytes: Uint8Array): string {
+    return evidenceRuntime.bytesToBase64(bytes);
+  }
+
+  function fingerprint(value: string): string {
+    return evidenceRuntime.fingerprint(value);
+  }
+
+  function reseedFingerprints(): void {
+    evidenceRuntime.reseed();
+  }
+
+  function collectEvidence(
+    value: unknown,
+    path = '$',
+    depth = 0,
+    output: ValueEvidence[] = [],
+    parseStringContainers = true,
+  ): ValueEvidence[] {
+    return evidenceRuntime.collect(value, path, depth, output, parseStringContainers);
+  }
+
+  function byteLength(value: unknown): number | undefined {
+    return evidenceRuntime.byteLength(value);
+  }
+
+  function preview(value: unknown): string | undefined {
+    return evidenceRuntime.preview(value);
+  }
+
+  function stackInfo(): { stack?: string; scriptUrl?: string } {
+    try {
+      const stack = new Error().stack?.split('\n').slice(2, 10).join('\n').slice(0, 4_096);
+      const scriptUrl = stack?.match(/https?:\/\/[^\s)]+/)?.[0]?.slice(0, 2_048);
+      return { stack, scriptUrl };
+    } catch { return {}; }
+  }
+
+  function pauseForDeepCapture(wrapperHandleId: string, scriptUrl?: string): void {
+    const matcher = deepBreakMatcher;
+    if (!matcher || matcher.wrapperHandleId !== wrapperHandleId) return;
+    if (matcher.scriptUrl && scriptUrl && !scriptUrl.startsWith(matcher.scriptUrl)) return;
+    const restoreAfterResume = restoreAfterDeepBreak;
+    deepBreakMatcher = undefined;
+    restoreAfterDeepBreak = false;
+    if (restoreAfterResume) stop();
+  }
+
+  function deepCaptureFunction(wrapperHandleId: string): Function | undefined {
+    return cryptoAdapterRuntime.wrapperFunction(wrapperHandleId)
+      || communicationBoundaryRuntime.wrapperFunction(wrapperHandleId);
+  }
+
+  function record(input: RecordingEventInput, context?: RecordingTraceContext): RecordingEvent | undefined {
+    return traceRuntime.record(input, context) as RecordingEvent | undefined;
+  }
+
+  function observe(factory: () => RecordingEventInput, context?: RecordingTraceContext): RecordingEvent | undefined {
+    return traceRuntime.observe(factory, context) as RecordingEvent | undefined;
+  }
+
+  function bestEffort(operation: () => void): void {
+    try { operation(); } catch { /* Recording must not change page behavior. */ }
+  }
+
+  function errorMessage(error: unknown): string {
+    try { return (error instanceof Error ? error.message : String(error)).slice(0, 512); } catch { return 'Unknown error'; }
+  }
+
+  function argumentEvidence(
+    index: number,
+    role: CallArgumentRole,
+    value: unknown,
+    replaceable: boolean,
+    retained: boolean,
+    summary?: string,
+  ): CallArgumentEvidence {
+    const type = dataType(value);
+    const sizeEligible = ['data', 'key', 'iv', 'signature', 'salt', 'nonce', 'aad'].includes(role)
+      && type !== 'CryptoKey';
+    const size = sizeEligible ? byteLength(value) : undefined;
+    return {
+      index,
+      role,
+      dataType: type.slice(0, 120),
+      byteLength: size === undefined ? undefined : Math.max(0, size),
+      replaceable,
+      retained,
+      summary: summary?.slice(0, 240),
+    };
+  }
+
+  function interactionLabel(target: EventTarget | null): string {
+    if (!(target instanceof Element)) return '页面操作';
+    const element = target.closest('button, a, input, select, textarea, [role]') || target;
+    const text = [element.getAttribute('aria-label'), element.getAttribute('name'), element.getAttribute('title'), element.textContent]
+      .find((value) => value?.trim())?.trim().replace(/\s+/g, ' ').slice(0, 120);
+    return text || element.tagName.toLowerCase();
+  }
+
+  function beginInteraction(operation: string, target: EventTarget | null): void {
+    if (!active) return;
+    const interactionId = unique('interaction');
+    const context = { traceId: unique('trace'), interactionId };
+    traceRuntime.bindContext(context);
+    observe(() => ({ kind: 'interaction', operation, label: interactionLabel(target) }), context);
+  }
+
+  function patchInteractions(): void {
+    const onClick = (event: MouseEvent) => { if (event.button === 0) beginInteraction('click', event.target); };
+    const onSubmit = (event: SubmitEvent) => beginInteraction('submit', event.target);
+    document.addEventListener('click', onClick, true);
+    document.addEventListener('submit', onSubmit, true);
+    restorers.push(() => {
+      document.removeEventListener('click', onClick, true);
+      document.removeEventListener('submit', onSubmit, true);
+    });
+  }
+
+  function registerHandle(input: Omit<RecordedCallHandle, 'id' | 'retainedBytes'>): string | undefined {
+    const id = unique('handle');
+    const retainedBytes = estimateRetainedCallBytes(input.args);
+    return handles.add({ id, retainedBytes, ...input }) ? id : undefined;
+  }
+
+  function invokeCryptoAdapter(
+    operation: CryptoAdapterOperation,
+    original: Function,
+    thisArg: unknown,
+    args: unknown[],
+    wrapperHandleId: string,
+    installDynamic: (operations: CryptoAdapterOperation[]) => void,
+  ): unknown {
+    const invokeOriginal = (): unknown => operation.invocationMode === 'construct'
+      ? Reflect.construct(original, args)
+      : Reflect.apply(original, thisArg, args);
+    let plan: CryptoAdapterInvocationPlan;
+    try {
+      plan = operation.describe(thisArg, args, cryptoAdapterToolkit);
+    } catch {
+      return invokeOriginal();
+    }
+    const started = performance.now();
+    const inputIndex = plan.inputIndex;
+    const callHandleId = plan.callableKind && inputIndex >= 0 ? registerHandle({
+      kind: plan.callableKind,
+      operation: `${plan.crypto.adapterId}.${plan.crypto.operation}`,
+      crypto: plan.crypto,
+      original,
+      thisArg,
+      args: [...args],
+      inputIndex,
+      originalInput: args[inputIndex],
+      outputEncoding: plan.outputEncoding || plan.crypto.outputEncoding,
+      resultMode: operation.resultMode,
+      adaptInput: plan.adaptInput || ((value) => defaultAdaptInput(value, args[inputIndex])),
+    }) : undefined;
+    const item = observe(() => ({
+      kind: 'crypto',
+      operation: plan.crypto.operation,
+      crypto: plan.crypto,
+      wrapperHandleId,
+      callHandleId,
+      callableCapable: Boolean(callHandleId),
+      arguments: plan.arguments,
+      byteLength: inputIndex >= 0 ? byteLength(args[inputIndex]) : undefined,
+      dataType: inputIndex >= 0 ? dataType(args[inputIndex]) : undefined,
+      inputPreview: inputIndex >= 0 ? preview(args[inputIndex]) : undefined,
+      inputs: inputIndex >= 0
+        ? plan.inputEvidence?.(args[inputIndex]) || collectEvidence(args[inputIndex], '$input')
+        : [],
+      ...stackInfo(),
+    }));
+    if (item && callHandleId) {
+      const handle = handles.get(callHandleId);
+      if (handle) Object.assign(handle, {
+        eventId: item.id,
+        traceId: item.traceId,
+        recordingId: item.recordingId,
+        sourceUrl: item.scriptUrl,
+      });
+    }
+    pauseForDeepCapture(wrapperHandleId, item?.scriptUrl);
+    if (item) activeEventStack.push(item.id);
+    const complete = (output: unknown): void => {
+      if (plan.discoverResult) {
+        try { installDynamic(plan.discoverResult(output)); } catch { /* Runtime session discovery is optional. */ }
+      }
+      if (!item) return;
+      item.durationMs = Math.max(0, performance.now() - started);
+      item.resultByteLength = byteLength(output);
+      item.outputPreview = preview(output);
+      item.outputs = plan.outputEvidence?.(output) || collectEvidence(output, '$output');
+      item.error = plan.outputError?.(output) || item.error;
+      const handle = callHandleId ? handles.get(callHandleId) : undefined;
+      if (handle) handle.outputDataType = dataType(output);
+    };
+    const fail = (error: unknown): void => {
+      if (item) item.error = errorMessage(error);
+    };
+    try {
+      const output = invokeOriginal();
+      if (operation.resultMode === 'promise') {
+        if (item) activeEventStack.pop();
+        if (output && typeof (output as { then?: unknown }).then === 'function') {
+          void (output as Promise<unknown>).then(complete, fail);
+        } else {
+          complete(output);
+        }
+      } else {
+        if (item) activeEventStack.pop();
+        complete(output);
+      }
+      return output;
+    } catch (error) {
+      if (item) activeEventStack.pop();
+      fail(error);
+      throw error;
+    }
+  }
+
+  const cryptoAdapterToolkit: CryptoAdapterToolkit = {
+    unique,
+    byteLength,
+    dataType,
+    fingerprint,
+    argument: argumentEvidence,
+    collectEvidence: (value, path) => collectEvidence(value, path),
+    defaultOutputEvidence: (value) => collectEvidence(value, '$output'),
+    defaultAdaptInput,
+    bytesForInput,
+    bytesToBase64,
+  };
+
+  const cryptoAdapterRuntime: CryptoAdapterRuntime = createCryptoAdapterRuntime(
+    PAGE_CRYPTO_ADAPTERS,
+    { window, crypto: globalThis.crypto },
+    cryptoAdapterToolkit,
+    {
+      unique,
+      invoke: invokeCryptoAdapter,
+    },
+  );
+
+  const communicationBoundaryRuntime: CommunicationBoundaryRuntime = createCommunicationBoundaryRuntime(window, {
+    unique,
+    describe(value, path) {
+      return {
+        byteLength: byteLength(value),
+        dataType: dataType(value),
+        preview: preview(value),
+        evidence: collectEvidence(value, path),
+      };
+    },
+    stackInfo,
+    emit: (input, context) => {
+      if (context) traceRuntime.bindContext(context);
+      return observe(() => input, context);
+    },
+    afterWrapperInvoke: pauseForDeepCapture,
+  });
+
+  const networkBoundaryRuntime: NetworkBoundaryRuntime = createNetworkBoundaryRuntime(window, {
+    unique,
+    byteLength,
+    dataType,
+    asBytes,
+    preview,
+    collectEvidence: (value, path) => collectEvidence(value, path),
+    stackInfo,
+    context: () => traceRuntime.context(),
+    emit: (event, context) => { observe(() => event, context); },
+  });
+
+  const encodingTransformRuntime: EncodingTransformRuntime = createEncodingTransformRuntime(window, {
+    byteLength,
+    preview,
+    collectEvidence: (value, path) => collectEvidence(value, path),
+    stackInfo,
+    emit: (event) => { observe(() => ({ kind: 'transform', ...event })); },
+  });
+
+  const libraryTransformRuntime: LibraryTransformRuntime = createLibraryTransformRuntime(window, {
+    currentTrace: () => traceRuntime.currentContext(),
+    collectEvidence: (value, path) => collectEvidence(value, path),
+    byteLength,
+    dataType,
+    preview,
+    stackInfo,
+    emit: (event, context) => { observe(() => ({ kind: 'transform', ...event }), context); },
+  });
+
+  const requestPreparationRuntime: RequestPreparationRuntime = createRequestPreparationRuntime(window, {
+    currentTrace: () => traceRuntime.currentContext(),
+    collectEvidence: (value, path) => collectEvidence(value, path),
+    byteLength,
+    dataType,
+    preview,
+    stackInfo,
+    emit: (event, context) => { observe(() => ({ kind: 'transform', ...event }), context); },
+  });
+
+  function installObservers(): void {
+    bestEffort(patchInteractions);
+    cryptoAdapterRuntime.start();
+    communicationBoundaryRuntime.start();
+    networkBoundaryRuntime.start();
+    requestPreparationRuntime.start();
+    encodingTransformRuntime.start();
+    libraryTransformRuntime.start();
+  }
+
+  function stop(): void {
+    active = false;
+    if (expiryTimer !== undefined) window.clearTimeout(expiryTimer);
+    expiryTimer = undefined;
+    cryptoAdapterRuntime.stop();
+    communicationBoundaryRuntime.stop();
+    networkBoundaryRuntime.stop();
+    requestPreparationRuntime.stop();
+    encodingTransformRuntime.stop();
+    libraryTransformRuntime.stop();
+    while (restorers.length) bestEffort(restorers.pop()!);
+    activeEventStack.length = 0;
+    traceRuntime.releaseContext();
+    deepBreakMatcher = undefined;
+    restoreAfterDeepBreak = false;
+  }
+
+  function resumeRecording(): void {
+    if (active || !startedAt) return;
+    active = true;
+    installObservers();
+    if (options.expiresAt) expiryTimer = window.setTimeout(stop, Math.max(0, options.expiresAt - Date.now()));
+  }
+
+  function snapshot(limit = options.maxEntries): RecorderSnapshot {
+    const trace = traceRuntime.snapshot(limit);
+    return {
+      version: PAGE_RECORDER_PROTOCOL_VERSION,
+      active,
+      recordingId,
+      startedAt,
+      count: trace.count,
+      droppedCount: trace.droppedCount,
+      retainedCallCount: handles.size,
+      retainedCallBytes: handles.retainedBytes,
+      retainedCallDroppedCount: handles.droppedCount,
+      options: startedAt ? { ...options } : undefined,
+      events: trace.events as RecordingEvent[],
+      callables: callableMetadata(),
+    };
+  }
+
+  function normalizedBytes(value: unknown): Uint8Array | undefined {
+    const direct = asBytes(value);
+    if (direct) return direct;
+    if (!value || typeof value !== 'object') return undefined;
+    const record = value as Record<string, unknown>;
+    if (record.type !== 'bytes' || typeof record.base64 !== 'string') return undefined;
+    const binary = nativeAtob(record.base64);
+    return Uint8Array.from(binary, (character) => character.charCodeAt(0));
+  }
+
+  function bytesForInput(value: unknown): Uint8Array | undefined {
+    return normalizedBytes(value) || (typeof value === 'string' ? encoder.encode(value) : undefined);
+  }
+
+  function defaultAdaptInput(value: unknown, originalInput: unknown): unknown {
+    if (typeof originalInput === 'string') {
+      const bytes = normalizedBytes(value);
+      return bytes ? decoder.decode(bytes) : typeof value === 'string' ? value : nativeStringify(value);
+    }
+    const bytes = bytesForInput(value);
+    if (!bytes) return value;
+    if (originalInput instanceof ArrayBuffer) return bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
+    if (ArrayBuffer.isView(originalInput)) return bytes;
+    return value;
+  }
+
+  function createRecordedCallable(handle: RecordedCallHandle, name: string): PageCallableMetadata {
+    const id = unique('callable');
+    const metadata: PageCallableMetadata = {
+      id,
+      name: name.trim().slice(0, 120) || handle.operation,
+      kind: 'recorded-call',
+      operation: handle.operation,
+      algorithm: handle.crypto.algorithm,
+      crypto: handle.crypto,
+      origin: location.origin,
+      lifecycle: 'document',
+      execution: callableExecutionPolicy(handle.resultMode),
+      inputSlots: [{
+        id: 'data',
+        name: 'data',
+        index: 0,
+        role: 'data',
+        dataType: dataType(handle.originalInput),
+        required: true,
+        retained: false,
+      }],
+      output: {
+        dataType: handle.outputDataType || 'unknown',
+        encoding: handle.outputEncoding || 'auto',
+        shape: 'value',
+        paths: [],
+      },
+      provenance: {
+        recordingId: handle.recordingId,
+        traceId: handle.traceId,
+        eventId: handle.eventId,
+        sourceUrl: handle.sourceUrl,
+        functionName: handle.original.name || undefined,
+      },
+      createdAt: Date.now(),
+    };
+    pageCallableRegistry().set(id, {
+      metadata,
+      invoke(values) {
+        if (!values.length) throw new Error('页面函数缺少 data 参数');
+        const args = [...handle.args];
+        args[handle.inputIndex] = handle.adaptInput(values[0]);
+        return Reflect.apply(handle.original, handle.thisArg, args);
+      },
+    });
+    return metadata;
+  }
+
+  async function executePageCallable(callableId: string, values: unknown[]): Promise<unknown> {
+    const entry = pageCallableRegistry().get(callableId);
+    if (!entry) throw new Error('页面函数已经失效，页面可能已经刷新');
+    const started = performance.now();
+    const result = entry.metadata.kind === 'request-transaction'
+      ? await executeRequestTransaction({
+        transaction: entry.metadata.transaction || (() => { throw new Error('请求事务缺少边界配置'); })(),
+        logicalInput: values[0],
+        invoke: (context) => entry.invoke(values, context),
+        timeoutMs: entry.metadata.execution.timeoutMs,
+      })
+      : entry.metadata.kind === 'business-closure' || entry.metadata.kind === 'global-function'
+        ? await executeSideEffectFreeCallable(() => entry.invoke(values), entry.metadata.execution)
+        : await settleCallableResult(entry.invoke(values), entry.metadata.execution);
+    const seen = new WeakSet<object>();
+    let nodes = 0;
+    const maxBytes = 8 * 1024 * 1024;
+    const normalize = (value: unknown, depth = 0): unknown => {
+      nodes += 1;
+      if (nodes > 100_000) throw new Error('页面函数结果包含过多节点');
+      if (value === null || value === undefined || typeof value === 'boolean' || typeof value === 'number') return value;
+      if (typeof value === 'string') {
+        if (encoder.encode(value).byteLength > maxBytes) throw new Error('页面函数字符串结果超过 8 MiB');
+        return value;
+      }
+      if (typeof value === 'bigint') return value.toString();
+      if (typeof value === 'function' || typeof value === 'symbol') throw new Error(`页面函数返回了不可序列化的 ${typeof value}`);
+      if (depth >= 32) throw new Error('页面函数结果嵌套超过 32 层');
+      const bytes = asBytes(value);
+      if (bytes) {
+        if (bytes.byteLength > maxBytes) throw new Error('页面函数字节结果超过 8 MiB');
+        return { type: 'bytes', byteLength: bytes.byteLength, base64: bytesToBase64(bytes) };
+      }
+      if (value instanceof Date) return value.toISOString();
+      if (value instanceof URLSearchParams) return value.toString();
+      if (typeof Response !== 'undefined' && value instanceof Response) {
+        return { type: 'Response', status: value.status, statusText: value.statusText, url: value.url, headers: Object.fromEntries(value.headers) };
+      }
+      if (value && typeof value === 'object') {
+        const cryptoValue = value as { sigBytes?: unknown; ciphertext?: unknown; toString?: unknown };
+        if ((typeof cryptoValue.sigBytes === 'number' || cryptoValue.ciphertext) && typeof cryptoValue.toString === 'function') {
+          const text = Reflect.apply(cryptoValue.toString as Function, value, []);
+          if (typeof text === 'string' && text !== '[object Object]') return text;
+        }
+        if (seen.has(value)) throw new Error('页面函数结果包含循环引用');
+        seen.add(value);
+        try {
+          if (Array.isArray(value)) return value.map((item) => normalize(item, depth + 1));
+          const output: Record<string, unknown> = {};
+          for (const [key, item] of Object.entries(value as Record<string, unknown>)) output[key] = normalize(item, depth + 1);
+          return output;
+        } finally {
+          seen.delete(value);
+        }
+      }
+      throw new Error(`页面函数返回了不可序列化的 ${typeof value}`);
+    };
+    const value = normalize(result);
+    let preview: string;
+    try { preview = typeof value === 'string' ? value : nativeStringify(value); } catch { preview = String(value); }
+    return {
+      callableId,
+      type: dataType(result).toLowerCase(),
+      preview: preview.slice(0, 8_192),
+      value,
+      byteLength: encoder.encode(preview).byteLength,
+      durationMs: Math.max(0, performance.now() - started),
+    };
+  }
+
+  const controller: RecorderController = {
+    version: PAGE_RECORDER_PROTOCOL_VERSION,
+    command(command, input = {}) {
+      if (command === 'start') {
+        stop();
+        options = {
+          captureValues: input.captureValues === true,
+          maxEntries: Math.max(20, Math.min(Number(input.maxEntries) || 200, 500)),
+          maxValueBytes: Math.max(256, Math.min(Number(input.maxValueBytes) || 2_048, 8_192)),
+          expiresAt: typeof input.expiresAt === 'number' ? input.expiresAt : undefined,
+        };
+        handles.clear();
+        clearRecordedCallables();
+        traceRuntime.reset(Number.isSafeInteger(input.sequenceStart) && Number(input.sequenceStart) >= 0
+          ? Number(input.sequenceStart)
+          : 0);
+        recordingId = typeof input.recordingId === 'string' && input.recordingId.trim()
+          ? input.recordingId.trim().slice(0, 160)
+          : unique('recording');
+        startedAt = typeof input.startedAt === 'number' && Number.isFinite(input.startedAt)
+          ? input.startedAt
+          : Date.now();
+        reseedFingerprints();
+        active = true;
+        installObservers();
+        if (options.expiresAt) expiryTimer = window.setTimeout(stop, Math.max(0, options.expiresAt - Date.now()));
+        return snapshot();
+      }
+      if (command === 'resume') {
+        if (Number.isSafeInteger(input.sequenceStart)) traceRuntime.advanceSequenceStart(Number(input.sequenceStart));
+        resumeRecording();
+        return snapshot();
+      }
+      if (command === 'navigation.record') {
+        const navigation = input.navigation as BrowserRecordingNavigation | undefined;
+        if (!navigation || typeof navigation.toUrl !== 'string') throw new Error('页面跳转事件无效');
+        record({
+          kind: 'navigation',
+          source: 'browser',
+          documentId: typeof input.documentId === 'string' ? input.documentId.slice(0, 160) : undefined,
+          operation: String(input.operation || 'navigate').slice(0, 160),
+          label: String(input.label || '页面跳转').slice(0, 240),
+          url: navigation.toUrl.slice(0, 8_192),
+          navigation,
+        });
+        return snapshot();
+      }
+      if (command === 'stop') { stop(); return snapshot(); }
+      if (command === 'deep.arm') {
+        if (!startedAt) throw new Error('请先录制一次页面操作，再进入深度捕获');
+        restoreAfterDeepBreak = !active;
+        resumeRecording();
+        const matcherKind = input.kind === 'boundary' ? 'boundary' : 'crypto';
+        const adapterId = String(input.adapterId || '').trim().slice(0, 64);
+        const eventKind = String(input.eventKind || '').trim().slice(0, 32);
+        const operation = String(input.operation || '').trim().slice(0, 240);
+        const wrapperHandleId = String(input.wrapperHandleId || '').trim().slice(0, 160);
+        if (!operation || !wrapperHandleId || (matcherKind === 'crypto' ? !adapterId : !['beacon', 'worker', 'message'].includes(eventKind))) {
+          throw new Error('深度捕获目标、操作或函数句柄不完整');
+        }
+        if (!deepCaptureFunction(wrapperHandleId)) {
+          const shouldRestore = restoreAfterDeepBreak;
+          restoreAfterDeepBreak = false;
+          if (shouldRestore) stop();
+          throw new Error('目标密码函数已经失效，请重新录制一次当前页面操作');
+        }
+        deepBreakMatcher = {
+          wrapperHandleId,
+          operation,
+          scriptUrl: typeof input.scriptUrl === 'string' ? input.scriptUrl.slice(0, 2_048) : undefined,
+        };
+        return { armed: true, kind: matcherKind, adapterId: adapterId || undefined, eventKind: eventKind || undefined, operation, wrapperHandleId };
+      }
+      if (command === 'deep.function') return deepCaptureFunction(String(input.wrapperHandleId || ''));
+      if (command === 'deep.disarm') {
+        const shouldRestore = restoreAfterDeepBreak;
+        deepBreakMatcher = undefined;
+        restoreAfterDeepBreak = false;
+        if (shouldRestore) stop();
+        return { armed: false };
+      }
+      if (command === 'clear') {
+        stop();
+        traceRuntime.reset();
+        handles.clear();
+        clearRecordedCallables();
+        recordingId = undefined;
+        startedAt = undefined;
+        return snapshot();
+      }
+      if (command === 'status' || command === 'get') return snapshot(typeof input.limit === 'number' ? input.limit : options.maxEntries);
+      if (command === 'callable.create') {
+        const callHandleId = String(input.callHandleId || '');
+        const handle = handles.get(callHandleId);
+        if (!handle) throw new Error('加解密调用句柄不存在或已经失效');
+        return createRecordedCallable(handle, String(input.name || handle.operation));
+      }
+      if (command === 'callable.list') return callableMetadata();
+      if (command === 'callable.execute') {
+        return executePageCallable(String(input.callableId || ''), Array.isArray(input.args) ? input.args : []);
+      }
+      if (command === 'callable.delete') {
+        pageCallableRegistry().delete(String(input.callableId || ''));
+        return callableMetadata();
+      }
+      if (command === 'transform.execute') {
+        const directionName = String(input.directionName) as BrowserTransformDirectionName;
+        return executeTransformDirection(
+          String(input.profileId || ''),
+          directionName,
+          input.direction as unknown as BrowserTransformDirection,
+          input.packet as unknown as BrowserTransformPacket,
+          async (callableId, args) => await executePageCallable(callableId, args) as BrowserPageCallableExecution,
+        ).then(
+          (value) => ({ ok: true, value }),
+          (error: unknown) => ({
+            ok: false,
+            error: {
+              code: error instanceof ExtensionError ? error.code : 'transform_page_execution_failed',
+              message: error instanceof Error ? error.message : String(error),
+            },
+          }),
+        );
+      }
+      throw new Error(`不支持的录制命令: ${command}`);
+    },
+  };
+
+  Object.defineProperty(registry, REGISTRY_KEY, { value: controller, configurable: true, enumerable: false, writable: false });
+});

src/entrypoints/popup/App.css

@@ -0,0 +1,214 @@
+.popup-shell { position: relative; width: 390px; height: 600px; min-height: 600px; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); }
+
+/* Header */
+.popup-header { padding: 9px 13px; border-bottom: 1px solid var(--border); color: var(--foreground); background: var(--surface); }
+.popup-header-main { min-height: 42px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
+.popup-brand-mark { width: 32px; height: 32px; padding: 1px; display: grid; place-items: center; border-radius: 9px; background: transparent; cursor: help; }
+.popup-brand-mark:hover, .popup-brand-mark:focus-visible { background: var(--surface-subtle); outline: none; }
+.popup-brand-mark .yak-mark { width: 28px; height: 28px; object-fit: contain; }
+.popup-target { min-width: 0; display: grid; gap: 1px; }
+.popup-target-title { min-width: 0; display: flex; align-items: center; gap: 6px; }
+.popup-target-title strong { min-width: 0; overflow: hidden; font-size: var(--text-sm); line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
+.popup-target-host { overflow: hidden; color: var(--muted); font-size: var(--text-xs); line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
+.popup-brand-actions { display: flex; align-items: center; gap: 3px; }
+.popup-brand-actions .ui-button { color: var(--muted-strong); }
+.popup-brand-actions .ui-button:hover { background: var(--surface-subtle); color: var(--foreground); }
+.popup-engine-status { height: 26px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-subtle); color: var(--muted-strong); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
+.popup-engine-status:hover { background: var(--border); }
+.popup-engine-status:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
+.popup-engine-status:disabled { opacity: .6; cursor: not-allowed; }
+.popup-engine-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
+.popup-engine-status.connected { border-color: color-mix(in srgb, var(--success) 40%, var(--surface)); background: var(--success-soft); color: var(--success); }
+.popup-engine-status.connected i { background: var(--success); }
+.popup-engine-status.connecting i, .popup-engine-status.negotiating i { background: var(--warning); animation: pulse 1.3s infinite; }
+.popup-engine-status.error { border-color: color-mix(in srgb, var(--danger) 35%, var(--surface)); background: var(--danger-soft); color: var(--danger); }
+.popup-engine-status.error i { background: var(--danger); }
+.popup-favicon { width: 16px; height: 16px; flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); }
+.popup-favicon img { width: 16px; height: 16px; object-fit: contain; }
+
+/* Icon rail and workspace */
+.popup-body { min-height: 0; flex: 1; display: grid; grid-template-columns: 50px minmax(0, 1fr); background: var(--background); }
+.popup-rail { min-height: 0; padding: 9px 7px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--border); background: var(--surface-subtle); }
+.popup-rail-main, .popup-rail-bottom { display: grid; justify-items: center; gap: 6px; }
+.popup-rail-bottom { padding-top: 9px; border-top: 1px solid var(--border); }
+.popup-rail button { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted-strong); cursor: pointer; transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease; }
+.popup-rail button:hover { background: var(--border); color: var(--foreground); }
+.popup-rail button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
+.popup-rail button.is-active { border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); background: var(--surface); color: var(--primary-strong); box-shadow: var(--shadow-sm); }
+.popup-workspace { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--background); }
+.popup-overview-view { min-height: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+.popup-overview-lead { padding: 7px 15px; border-bottom: 1px solid var(--border); background: var(--surface); }
+.popup-overview-lead__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--text-xs); line-height: 16px; }
+.popup-overview-lead__meta > span { overflow: hidden; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
+.popup-overview-lead__meta strong { display: inline-flex; align-items: center; gap: 5px; color: var(--success); font-weight: 600; white-space: nowrap; }
+.popup-overview-lead__meta strong.is-unavailable { color: var(--muted-strong); }
+.popup-overview-lead__meta i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.popup-overview-summary { min-height: 0; flex: 1; padding: 0 12px; overflow-y: auto; scrollbar-width: thin; background: var(--surface); }
+.popup-overview-summary > button { width: 100%; min-height: 55px; padding: 8px 2px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; align-items: center; gap: 9px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--foreground); text-align: left; cursor: pointer; transition: background-color .14s ease, padding-left .14s ease; }
+.popup-overview-summary > button:hover { padding-left: 5px; background: var(--surface-subtle); }
+.popup-overview-summary > button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
+.popup-overview-summary > button > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
+.popup-overview-summary small, .popup-overview-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.popup-overview-summary small { color: var(--muted); font-size: var(--text-xs); line-height: 14px; }
+.popup-overview-summary strong { font-size: var(--text-sm); line-height: 17px; }
+.popup-overview-summary > button > svg { color: var(--muted); }
+.popup-overview-icon { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted-strong); }
+.popup-overview-summary > button:hover .popup-overview-icon { background: var(--primary-soft); color: var(--primary); }
+
+/* 人工接管 —— 内嵌警告卡 */
+.popup-handoff { margin: 10px 12px; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px 10px; align-items: start; padding: 12px 14px 12px 13px; border-left: 3px solid var(--warning); border-radius: var(--radius-md); background: var(--warning-soft); }
+.popup-handoff > svg { margin-top: 1px; color: var(--warning); }
+.popup-handoff__copy { min-width: 0; }
+.popup-handoff__copy strong, .popup-handoff__copy span, .popup-handoff__copy small { display: block; }
+.popup-handoff__copy strong { font-size: var(--text-md); font-weight: 600; line-height: 18px; }
+.popup-handoff__copy span { margin-top: 3px; font-size: var(--text-sm); line-height: 16px; overflow-wrap: anywhere; }
+.popup-handoff__copy small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: var(--text-sm); line-height: 16px; white-space: nowrap; text-overflow: ellipsis; }
+.popup-handoff__actions { grid-column: 2; display: flex; gap: 6px; align-items: center; }
+.popup-handoff__actions .ui-button { white-space: nowrap; }
+.popup-handoff__actions .ui-button--icon { width: 30px; height: 30px; }
+
+/* 共享会话 */
+.popup-share { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); transition: background-color .16s ease; }
+.popup-share.is-active { background: var(--success-soft); }
+.popup-share-copy { min-width: 0; display: flex; align-items: flex-start; gap: 10px; }
+.popup-share-copy > svg { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; color: var(--muted-strong); }
+.popup-share.is-active .popup-share-copy > svg { color: var(--success); }
+.popup-share-copy strong, .popup-share-copy span { display: block; }
+.popup-share-copy strong { font-size: var(--text-md); font-weight: 600; line-height: 18px; }
+.popup-share-copy span { margin-top: 2px; color: var(--muted); font-size: var(--text-sm); line-height: 16px; }
+.popup-share.is-active .popup-share-copy span { color: var(--success); }
+
+/* 代理：站点路由与全局模式 */
+.popup-proxy-view { min-height: 0; }
+.popup-site-router { padding: 10px 12px 9px; display: grid; gap: 7px; border-bottom: 1px solid var(--border); background: var(--surface); }
+.popup-site-router__heading { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.popup-site-router__heading > div { min-width: 0; display: flex; align-items: center; gap: 8px; }
+.popup-site-router__heading > div > svg { flex: 0 0 auto; color: var(--primary); }
+.popup-site-router__heading span { min-width: 0; }
+.popup-site-router__heading small, .popup-site-router__heading strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.popup-site-router__heading small { color: var(--muted); font-size: var(--text-xs); line-height: 13px; }
+.popup-site-router__heading strong { max-width: 215px; margin-top: 1px; font-size: var(--text-sm); line-height: 17px; }
+.popup-site-router__heading > i { flex: 0 0 auto; padding: 2px 6px; border-radius: 4px; background: var(--surface-subtle); color: var(--muted-strong); font-size: var(--text-xs); font-style: normal; font-weight: 600; }
+.popup-site-router__heading > i.manual { background: var(--primary-soft); color: var(--primary-text); }
+.popup-site-router__heading > i.source { background: var(--success-soft); color: var(--success); }
+.popup-site-router__heading > i.global { background: var(--warning-soft); color: var(--warning); }
+.popup-site-decision { min-width: 0; min-height: 27px; padding: 5px 8px; display: grid; grid-template-columns: minmax(0, 1fr) 12px minmax(0, .8fr); align-items: center; gap: 5px; border-left: 2px solid var(--primary); background: var(--surface-subtle); }
+.popup-site-decision span, .popup-site-decision strong { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
+.popup-site-decision span { color: var(--muted-strong); }
+.popup-site-decision i { color: var(--muted); font-size: var(--text-xs); font-style: normal; text-align: center; }
+.popup-site-decision strong { color: var(--foreground); }
+.popup-site-picker { display: grid; gap: 5px; }
+.popup-site-picker > label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted-strong); font-size: var(--text-xs); font-weight: 600; }
+.popup-site-picker > label span { color: var(--muted); font-weight: 400; }
+.popup-site-picker select { min-width: 0; height: 32px; padding: 0 9px; font-size: var(--text-xs); }
+.popup-site-status { min-width: 0; height: 15px; display: flex; align-items: center; gap: 5px; color: var(--muted); }
+.popup-site-status svg { flex: 0 0 auto; }
+.popup-site-status small { overflow: hidden; font-size: var(--text-xs); line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
+.popup-site-status.is-applying { color: var(--primary-text); }
+.popup-site-status.is-success { color: var(--success); }
+.popup-site-status.is-error { color: var(--danger); }
+.popup-proxy-unavailable { min-height: 118px; padding: 18px 14px; display: flex; align-items: center; justify-content: center; gap: 9px; border-bottom: 1px solid var(--border); color: var(--muted); text-align: left; }
+.popup-proxy-unavailable strong, .popup-proxy-unavailable small { display: block; }
+.popup-proxy-unavailable strong { color: var(--foreground); font-size: var(--text-sm); }
+.popup-proxy-unavailable small { margin-top: 2px; font-size: var(--text-xs); }
+.popup-mode-heading { min-height: 39px; padding: 6px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
+.popup-mode-heading > span { min-width: 0; }
+.popup-mode-heading strong, .popup-mode-heading small { display: block; }
+.popup-mode-heading strong { font-size: var(--text-sm); line-height: 16px; }
+.popup-mode-heading small { margin-top: 1px; color: var(--muted); font-size: var(--text-xs); line-height: 13px; }
+.popup-mode-heading > i { max-width: 110px; overflow: hidden; color: var(--muted-strong); font-size: var(--text-xs); font-style: normal; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
+.popup-proxy-list { overflow-y: auto; display: grid; align-content: start; gap: 2px; scrollbar-width: thin; }
+.popup-proxy-list--view { min-height: 0; flex: 1; padding: 5px 8px; background: var(--surface); }
+.popup-proxy-list > button { width: 100%; min-height: 43px; padding: 5px 8px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--foreground); text-align: left; cursor: pointer; transition: background-color .13s ease, border-color .13s ease, color .13s ease; }
+.popup-proxy-list > button:hover { background: var(--surface-subtle); }
+.popup-proxy-list > button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
+.popup-proxy-list > button.is-active { border-color: color-mix(in srgb, var(--primary) 20%, var(--border)); background: var(--primary-soft); }
+.popup-proxy-list > button.is-active strong { color: var(--primary-text); }
+.popup-proxy-list > button > span:nth-child(2) { min-width: 0; }
+.popup-proxy-list strong, .popup-proxy-list small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.popup-proxy-list strong { font-size: var(--text-sm); font-weight: 600; line-height: 16px; }
+.popup-proxy-list small { margin-top: 1px; color: var(--muted); font-size: var(--text-xs); line-height: 14px; }
+.popup-proxy-list > button > svg { color: var(--primary); }
+.popup-mode-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--muted-strong); }
+.popup-proxy-list > button.is-active .popup-mode-icon { border-color: color-mix(in srgb, var(--primary) 28%, var(--border)); color: var(--primary); }
+.popup-proxy-list em { padding: 2px 5px; border-radius: 4px; background: var(--warning-soft); color: var(--warning); font-size: var(--text-xs); font-style: normal; white-space: nowrap; }
+.popup-proxy-view .popup-tool-footer > button { color: var(--primary-text); }
+
+/* 专注子页面 */
+.popup-view { min-height: 0; flex: 1; color: var(--foreground); }
+.popup-tool-view { display: flex; flex-direction: column; overflow: hidden; animation: popup-view-in .16s ease-out; }
+.popup-tool-context { min-height: 34px; padding: 0 14px; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 7px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); color: var(--muted-strong); font-size: var(--text-xs); }
+.popup-tool-context span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.popup-tool-context strong { padding: 2px 7px; border-radius: 999px; background: var(--surface-subtle); color: var(--foreground); font-size: var(--text-xs); }
+.popup-view-enter { animation: popup-content-in .16s ease-out; }
+.popup-tool-toolbar { min-height: 46px; padding: 7px 12px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--border); background: var(--surface); }
+.popup-tool-toolbar > label { min-width: 0; flex: 1; height: 32px; padding: 0 9px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); color: var(--muted); }
+.popup-tool-toolbar input { min-width: 0; flex: 1; border: 0; background: transparent; color: var(--foreground); outline: 0; font-size: var(--text-sm); }
+.popup-tool-empty { min-height: 150px; padding: 24px; display: grid; place-items: center; color: var(--muted); font-size: var(--text-sm); text-align: center; }
+.popup-tool-footer { min-height: 38px; padding: 6px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs); }
+.popup-tool-footer > button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--danger); font-size: var(--text-xs); cursor: pointer; }
+.popup-tool-footer > button:disabled { opacity: .45; cursor: not-allowed; }
+
+/* Popup Cookie Editor */
+.popup-cookie-list { min-height: 0; flex: 1; overflow-y: auto; background: var(--surface); scrollbar-width: thin; }
+.popup-cookie-row { min-height: 70px; padding: 9px 10px 8px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; border-bottom: 1px solid var(--border); transition: background-color .13s ease; }
+.popup-cookie-row:hover { background: var(--surface-subtle); }
+.popup-cookie-main { min-width: 0; padding: 0; display: grid; gap: 2px; border: 0; background: transparent; color: var(--foreground); text-align: left; cursor: pointer; }
+.popup-cookie-main > span { min-width: 0; display: flex; align-items: center; gap: 6px; }
+.popup-cookie-main strong { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
+.popup-cookie-main > span i { padding: 1px 5px; border-radius: 999px; background: var(--surface-subtle); color: var(--muted-strong); font-size: var(--text-xs); font-style: normal; }
+.popup-cookie-main code, .popup-cookie-main small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.popup-cookie-main code { color: var(--muted-strong); font-size: var(--text-xs); }
+.popup-cookie-main small { color: var(--muted); font-size: var(--text-xs); }
+.popup-cookie-meta { min-height: 15px; display: flex; align-items: center; gap: 4px; }
+.popup-cookie-meta i { padding: 1px 4px; border-radius: 3px; background: var(--surface-subtle); color: var(--muted); font-size: var(--text-xs); font-style: normal; }
+.popup-cookie-actions { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; }
+.popup-cookie-actions button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
+.popup-cookie-actions button:hover { background: var(--border); color: var(--foreground); }
+.popup-cookie-actions button.danger:hover { color: var(--danger); }
+.popup-cookie-editor, .popup-ua-custom { min-height: 0; flex: 1; padding: 13px 16px 15px; overflow-y: auto; display: grid; gap: 11px; align-content: start; }
+.popup-editor-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
+.popup-editor-title strong, .popup-editor-title span { display: block; }
+.popup-editor-title strong { font-size: var(--text-md); }
+.popup-editor-title span { margin-top: 2px; color: var(--muted); font-size: var(--text-xs); }
+.popup-cookie-editor > label, .popup-ua-custom > label, .popup-editor-grid label { display: grid; gap: 5px; color: var(--muted-strong); font-size: var(--text-xs); }
+.popup-cookie-editor input, .popup-cookie-editor select, .popup-ua-custom input, .popup-ua-custom textarea { width: 100%; min-width: 0; }
+.popup-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.popup-cookie-flags { display: flex; align-items: center; gap: 18px; }
+.popup-cookie-flags label { display: flex; align-items: center; gap: 6px; color: var(--muted-strong); font-size: var(--text-xs); }
+.popup-inline-warning { padding: 8px 10px; border-left: 3px solid var(--warning); background: var(--warning-soft); color: var(--warning); font-size: var(--text-xs); line-height: 16px; }
+
+/* Popup User-Agent */
+.popup-ua-current { padding: 9px 14px; display: grid; gap: 2px; border-bottom: 1px solid var(--border); background: var(--surface); }
+.popup-ua-current > span { color: var(--muted); font-size: var(--text-xs); }
+.popup-ua-current > strong { font-size: var(--text-md); }
+.popup-ua-current > code { overflow: hidden; color: var(--muted-strong); font-size: var(--text-xs); white-space: nowrap; text-overflow: ellipsis; }
+.popup-ua-current > small { margin-top: 3px; color: var(--muted); font-size: var(--text-xs); }
+.popup-ua-list { min-height: 0; flex: 1; padding: 5px 8px; overflow-y: auto; background: var(--surface); scrollbar-width: thin; }
+.popup-ua-list > button { width: 100%; min-height: 43px; padding: 5px 8px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 15px; align-items: center; gap: 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--foreground); text-align: left; cursor: pointer; }
+.popup-ua-list > button:hover { background: var(--surface-subtle); }
+.popup-ua-list > button.is-selected { background: var(--primary-soft); }
+.popup-ua-list > button > span:nth-child(2) { min-width: 0; }
+.popup-ua-list strong, .popup-ua-list small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.popup-ua-list strong { font-size: var(--text-sm); }
+.popup-ua-list small { margin-top: 1px; color: var(--muted); font-size: var(--text-xs); }
+.popup-ua-list > button > i { width: 15px; height: 15px; flex: 0 0 auto; padding: 2.5px; border: 1.5px solid var(--border-strong); border-radius: 50%; background-clip: content-box; transition: border-color .13s ease; }
+.popup-ua-list > button.is-selected > i { border-color: var(--primary); background-color: var(--primary); }
+.popup-ua-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-subtle); color: var(--muted-strong); }
+.popup-ua-list > button.is-selected .popup-ua-icon { background: var(--surface); color: var(--primary); }
+.popup-ua-actions { min-height: 52px; padding: 8px 12px; display: flex; justify-content: flex-end; gap: 7px; border-top: 1px solid var(--border); }
+
+@keyframes popup-view-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
+@keyframes popup-content-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+@media (prefers-reduced-motion: reduce) { .popup-tool-view, .popup-view-enter { animation: none; } }
+
+/* Footer CTA */
+.popup-footer { margin-top: auto; padding: 10px 14px 12px; border-top: 1px solid var(--border); background: var(--surface); }
+.popup-capture { width: 100%; height: 36px; border-radius: 7px; font-size: var(--text-md); box-shadow: 0 1px 0 color-mix(in srgb, var(--primary-strong) 55%, transparent); }
+.popup-notice { display: block; margin-top: 6px; overflow: hidden; color: var(--muted); font-size: var(--text-sm); line-height: 16px; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
+.popup-global-notice { position: absolute; z-index: 20; left: 50%; bottom: 54px; max-width: calc(100% - 28px); padding: 7px 11px; overflow: hidden; border: 1px solid var(--border); border-radius: 999px; background: var(--foreground); color: var(--surface); box-shadow: var(--shadow-md); font-size: var(--text-xs); line-height: 16px; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; transform: translateX(-50%); animation: popup-content-in .16s ease-out; }
+
+.popup-loading { width: 390px; height: 230px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--muted); background: var(--background); font-size: var(--text-md); }
+.spin { animation: spin .8s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes pulse { 50% { opacity: .35; } }

src/entrypoints/popup/App.tsx

@@ -0,0 +1,215 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  AlertTriangle, Braces, Check, Cookie, ExternalLink, Gauge, Network, Radio, RefreshCw, UserRoundCog, X,
+} from 'lucide-react';
+import { browser } from 'wxt/browser';
+import { YakMark } from '@/components/brand/Brand';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipProvider } from '@/components/ui/tooltip';
+import { HANDOFF_REASON_LABELS, waitingHandoff } from '@/features/handoff/presentation';
+import { isStateStorageChange } from '@/protocol/storage';
+import type { ActiveTabInfo, BridgeStatus, ExtensionState, UserAgentResolution } from '@/types/models';
+import { errorMessage, request } from '@/platform/messaging/runtime';
+import { CookieQuickView } from './views/CookieQuickView';
+import { OverviewQuickView } from './views/OverviewQuickView';
+import { ProxyQuickView } from './views/ProxyQuickView';
+import { UserAgentQuickView } from './views/UserAgentQuickView';
+import './App.css';
+
+type PopupView = 'home' | 'proxy' | 'cookies' | 'user-agent';
+
+const FULL_VIEW_TARGETS: Record<PopupView, { section: string; label: string }> = {
+  home: { section: 'overview', label: '打开完整工作台' },
+  proxy: { section: 'rules', label: '打开代理策略' },
+  cookies: { section: 'cookies', label: '打开完整 Cookie Editor' },
+  'user-agent': { section: 'user-agent', label: '打开 User-Agent 管理' },
+};
+
+function engineStatusLabel(state: ExtensionState, bridge: BridgeStatus): string {
+  if (bridge.state === 'connected') return '引擎在线';
+  if (bridge.state === 'connecting') return '正在连接引擎';
+  if (bridge.state === 'negotiating') return '正在验证引擎身份';
+  if (bridge.state === 'error') return bridge.message || '引擎连接失败';
+  return state.bridge.pairedEngine ? bridge.message || '引擎离线' : '尚未配对引擎';
+}
+
+function App() {
+  const [state, setState] = useState<ExtensionState>();
+  const [tab, setTab] = useState<ActiveTabInfo>();
+  const [bridge, setBridge] = useState<BridgeStatus>({ state: 'disconnected', message: '未连接引擎' });
+  const [busy, setBusy] = useState(false);
+  const [notice, setNotice] = useState('');
+  const [view, setView] = useState<PopupView>('home');
+  const [cookieCount, setCookieCount] = useState(0);
+  const [uaResolution, setUaResolution] = useState<UserAgentResolution>();
+
+  const load = useCallback(async () => {
+    const [nextState, nextTab, nextBridge] = await Promise.all([
+      request('state.get'),
+      request('tab.active').catch(() => undefined),
+      request('bridge.status'),
+    ]);
+    setState(nextState);
+    setTab(nextTab);
+    setBridge(nextBridge);
+    if (nextTab?.url?.startsWith('http')) {
+      const [cookies, resolution] = await Promise.all([
+        request('cookie.list', { url: nextTab.url, tabId: nextTab.id }).catch(() => []),
+        request('ua.resolve', { url: nextTab.url }).catch(() => undefined),
+      ]);
+      setCookieCount(cookies.length);
+      setUaResolution(resolution);
+    } else {
+      setCookieCount(0);
+      setUaResolution(undefined);
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+    const listener = (message: { action?: string; payload?: BridgeStatus }) => {
+      if (message.action === 'bridge.status.changed' && message.payload) setBridge(message.payload);
+    };
+    browser.runtime.onMessage.addListener(listener);
+    const onStorageChange = (changes: Record<string, unknown>) => {
+      if (isStateStorageChange(changes)) void load();
+    };
+    browser.storage.onChanged.addListener(onStorageChange);
+    return () => {
+      browser.runtime.onMessage.removeListener(listener);
+      browser.storage.onChanged.removeListener(onStorageChange);
+    };
+  }, [load]);
+
+  useEffect(() => {
+    if (!notice) return undefined;
+    const timer = globalThis.setTimeout(() => setNotice(''), 2_400);
+    return () => globalThis.clearTimeout(timer);
+  }, [notice]);
+
+  const grantActive = Boolean(state?.activeGrant && state.activeGrant.expiresAt > Date.now() && tab && state.activeGrant.targets.some((target) => target.tabId === tab.id));
+  const handoff = waitingHandoff(state?.handoff);
+
+  const run = async (task: () => Promise<void>, success?: string) => {
+    setBusy(true);
+    setNotice('');
+    try {
+      await task();
+      if (success) setNotice(success);
+    } catch (error) {
+      setNotice(errorMessage(error));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const openTool = (tool: string) => {
+    const target = tab ? `?tabId=${tab.id}` : '';
+    return browser.tabs.create({ url: browser.runtime.getURL(`/options.html${target}#${tool}`) });
+  };
+
+  const toggleEngine = () => run(async () => {
+    if (!state!.bridge.pairedEngine) {
+      await request('bridge.pair');
+      await openTool('engine');
+      return;
+    }
+    if (bridge.state === 'connected') await request('bridge.disconnect'); else await request('bridge.connect');
+    setBridge(await request('bridge.status'));
+  });
+
+  const capture = () => run(async () => {
+    const context = await request('context.capture', {
+      includeDom: true,
+      includeStorage: true,
+      includeCookies: true,
+      tabId: tab?.id,
+    });
+    await navigator.clipboard.writeText(JSON.stringify(context, null, 2));
+    setNotice('页面上下文已复制');
+  });
+
+  if (!state) {
+    return <div className="popup-loading"><RefreshCw size={18} className="spin" />正在读取浏览器状态</div>;
+  }
+
+  const engineBusy = bridge.state === 'connecting' || bridge.state === 'negotiating';
+  const currentHost = (() => { try { return tab?.url ? new URL(tab.url).host : ''; } catch { return ''; } })();
+  const statusLabel = engineStatusLabel(state, bridge);
+  const statusActionLabel = bridge.state === 'connected'
+    ? `${statusLabel}，点击断开`
+    : state.bridge.pairedEngine ? `${statusLabel}，点击连接` : `${statusLabel}，点击配对`;
+  const fullViewTarget = FULL_VIEW_TARGETS[view];
+
+  return (
+    <TooltipProvider delayDuration={350}>
+      <main className="popup-shell">
+        <header className="popup-header">
+          <div className="popup-header-main">
+            <Tooltip label="Yakit Browser Agent" side="bottom">
+              <span className="popup-brand-mark" role="img" aria-label="Yakit Browser Agent">
+                <YakMark />
+              </span>
+            </Tooltip>
+            <div className="popup-target">
+              <div className="popup-target-title">
+                <span className="popup-favicon">{tab?.favIconUrl ? <img src={tab.favIconUrl} alt="" /> : <Radio size={12} />}</span>
+                <strong title={tab?.title}>{tab?.title || '当前页面不可访问'}</strong>
+              </div>
+              <span className="popup-target-host" title={tab?.url}>{currentHost || '无法读取当前标签页'}</span>
+            </div>
+            <div className="popup-brand-actions">
+              <Tooltip label={statusActionLabel} side="bottom">
+                <button className={`popup-engine-status ${bridge.state}`} aria-label={statusLabel} disabled={busy || engineBusy} onClick={() => void toggleEngine()}>
+                  <i aria-hidden="true" />
+                  <span>{bridge.state === 'connected' ? '在线' : engineBusy ? '连接中' : state.bridge.pairedEngine ? '离线' : '配对'}</span>
+                </button>
+              </Tooltip>
+              <Tooltip label={fullViewTarget.label} side="bottom">
+                <Button size="icon" variant="ghost" aria-label={fullViewTarget.label} onClick={() => void openTool(fullViewTarget.section)}>
+                  <ExternalLink size={16} />
+                </Button>
+              </Tooltip>
+            </div>
+          </div>
+        </header>
+
+        <div className="popup-body">
+          <nav className="popup-rail" aria-label="Popup 工具导航">
+            <div className="popup-rail-main">
+              <Tooltip label="运行概览" side="right"><button className={view === 'home' ? 'is-active' : ''} aria-label="运行概览" aria-current={view === 'home' ? 'page' : undefined} onClick={() => setView('home')}><Gauge size={18} /></button></Tooltip>
+              <Tooltip label="代理" side="right"><button className={view === 'proxy' ? 'is-active' : ''} aria-label="代理" aria-current={view === 'proxy' ? 'page' : undefined} onClick={() => setView('proxy')}><Network size={18} /></button></Tooltip>
+              <Tooltip label="Cookie Editor" side="right"><button className={view === 'cookies' ? 'is-active' : ''} aria-label="Cookie Editor" aria-current={view === 'cookies' ? 'page' : undefined} onClick={() => setView('cookies')}><Cookie size={18} /></button></Tooltip>
+              <Tooltip label="User-Agent" side="right"><button className={view === 'user-agent' ? 'is-active' : ''} aria-label="User-Agent" aria-current={view === 'user-agent' ? 'page' : undefined} onClick={() => setView('user-agent')}><UserRoundCog size={18} /></button></Tooltip>
+            </div>
+            <div className="popup-rail-bottom">
+              <Tooltip label="登录态工作区" side="right"><button aria-label="打开登录态工作区" onClick={() => void openTool('context')}><Braces size={18} /></button></Tooltip>
+            </div>
+          </nav>
+
+          <section className="popup-workspace">
+            {handoff && <section className="popup-handoff" aria-live="assertive">
+              <AlertTriangle size={18} />
+              <div className="popup-handoff__copy">
+                <strong>{HANDOFF_REASON_LABELS[handoff.reason]}</strong>
+                <span>{handoff.message}</span>
+                <small title={handoff.target.title}>{handoff.target.title}</small>
+              </div>
+              <div className="popup-handoff__actions">
+                <Button size="sm" variant="primary" disabled={busy} onClick={() => void run(async () => setState(await request('handoff.resolve', { id: handoff.id, outcome: 'completed' })))}><Check size={14} />完成</Button>
+                <Button size="icon" variant="ghost" disabled={busy} aria-label="取消人工接管" title="取消人工接管" onClick={() => void run(async () => setState(await request('handoff.resolve', { id: handoff.id, outcome: 'cancelled' })))}><X size={15} /></Button>
+              </div>
+            </section>}
+            {view === 'home' && <OverviewQuickView state={state} tab={tab} grantActive={grantActive} busy={busy} run={run} setState={setState} cookieCount={cookieCount} uaResolution={uaResolution} onNavigate={setView} onOpenContext={() => void openTool('context')} onCapture={() => void capture()} />}
+            {view === 'proxy' && <ProxyQuickView state={state} setState={setState} busy={busy} run={run} tab={tab} onOpenFull={() => void openTool('rules')} />}
+            {view === 'cookies' && <CookieQuickView tab={tab} busy={busy} run={run} onCountChange={setCookieCount} />}
+            {view === 'user-agent' && <UserAgentQuickView tab={tab} state={state} setState={setState} busy={busy} run={run} onResolutionChange={setUaResolution} />}
+          </section>
+        </div>
+        {notice && <span className="popup-global-notice" role="status">{notice}</span>}
+      </main>
+    </TooltipProvider>
+  );
+}
+
+export default App;

src/entrypoints/popup/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Yakit Browser Agent</title>
+    <meta name="manifest.type" content="browser_action" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

src/entrypoints/popup/main.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import { watchTheme } from '@/platform/storage/appearance';
+import '@/styles/global.css';
+import './style.css';
+
+watchTheme();
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

src/entrypoints/popup/style.css

@@ -0,0 +1 @@
+html, body, #root { width: 390px; height: 600px; margin: 0; overflow: hidden; }

src/entrypoints/popup/views/CookieQuickView.tsx

@@ -0,0 +1,113 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Check, Cookie, Copy, Plus, Search, Trash2, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cookieKey, cookieRemovalInput } from '@/features/cookies/presentation';
+import { request } from '@/platform/messaging/runtime';
+import type { ActiveTabInfo, BrowserCookie, CookieInput } from '@/types/models';
+
+type RunTask = (task: () => Promise<void>, success?: string) => Promise<void>;
+
+interface CookieQuickViewProps {
+  tab?: ActiveTabInfo;
+  busy: boolean;
+  run: RunTask;
+  onCountChange: (count: number) => void;
+}
+
+function emptyDraft(url = ''): Omit<CookieInput, 'url'> {
+  return {
+    name: '', value: '', path: '/', secure: url.startsWith('https:'), httpOnly: false, sameSite: 'unspecified',
+  };
+}
+
+export function CookieQuickView({ tab, busy, run, onCountChange }: CookieQuickViewProps) {
+  const url = tab?.url?.startsWith('http') ? tab.url : '';
+  const [cookies, setCookies] = useState<BrowserCookie[]>([]);
+  const [query, setQuery] = useState('');
+  const [draft, setDraft] = useState<Omit<CookieInput, 'url'>>(emptyDraft(url));
+  const [editing, setEditing] = useState<BrowserCookie>();
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [loadError, setLoadError] = useState('');
+
+  const reload = useCallback(async () => {
+    if (!url || !tab?.id) {
+      setCookies([]);
+      onCountChange(0);
+      return;
+    }
+    try {
+      const next = await request('cookie.list', { url, tabId: tab.id });
+      setCookies(next);
+      onCountChange(next.length);
+      setLoadError('');
+    } catch (error) {
+      setLoadError(error instanceof Error ? error.message : String(error));
+    }
+  }, [onCountChange, tab?.id, url]);
+
+  useEffect(() => { void reload(); }, [reload]);
+
+  const visibleCookies = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    return cookies.filter((cookie) => !needle || [cookie.name, cookie.domain, cookie.path]
+      .some((value) => value.toLowerCase().includes(needle)));
+  }, [cookies, query]);
+
+  const startNew = () => {
+    setEditing(undefined);
+    setDraft(emptyDraft(url));
+    setEditorOpen(true);
+  };
+  const startEdit = (cookie: BrowserCookie) => {
+    setEditing(cookie);
+    setDraft({
+      name: cookie.name, value: cookie.value, domain: cookie.hostOnly ? undefined : cookie.domain,
+      path: cookie.path, secure: cookie.secure, httpOnly: cookie.httpOnly,
+      sameSite: cookie.sameSite as CookieInput['sameSite'], expirationDate: cookie.expirationDate,
+      storeId: cookie.storeId, firstPartyDomain: cookie.firstPartyDomain, partitionKey: cookie.partitionKey,
+    });
+    setEditorOpen(true);
+  };
+  const closeEditor = () => {
+    setEditorOpen(false);
+    setEditing(undefined);
+    setDraft(emptyDraft(url));
+  };
+
+  const saveCookie = () => run(async () => {
+    if (!url || !tab?.id || !draft.name) throw new Error('Cookie 名称不能为空');
+    await request('cookie.set', { url, tabId: tab.id, ...draft });
+    await reload();
+    closeEditor();
+  }, editing ? 'Cookie 已更新' : 'Cookie 已创建');
+
+  return <section className="popup-view popup-tool-view popup-cookie-view">
+    <div className="popup-tool-context"><Cookie size={14} /><span title={url}>{url ? new URL(url).host : '当前页面不可访问'}</span><strong>{cookies.length}</strong></div>
+
+    {editorOpen ? <div className="popup-cookie-editor popup-view-enter">
+      <div className="popup-editor-title"><div><strong>{editing ? '编辑 Cookie' : '新增 Cookie'}</strong><span>{editing ? `${editing.domain}${editing.path}` : '默认创建 HostOnly Cookie'}</span></div><Button size="icon" variant="ghost" aria-label="关闭 Cookie 编辑器" onClick={closeEditor}><X size={15} /></Button></div>
+      <label><span>名称</span><input autoFocus={!editing} disabled={Boolean(editing)} value={draft.name} onChange={(event) => setDraft({ ...draft, name: event.target.value })} placeholder="session_id" /></label>
+      <label><span>值</span><input value={draft.value} onChange={(event) => setDraft({ ...draft, value: event.target.value })} /></label>
+      <div className="popup-editor-grid"><label><span>Path</span><input disabled={Boolean(editing)} value={draft.path || '/'} onChange={(event) => setDraft({ ...draft, path: event.target.value || '/' })} /></label><label><span>SameSite</span><select value={draft.sameSite} onChange={(event) => setDraft({ ...draft, sameSite: event.target.value as CookieInput['sameSite'] })}><option value="unspecified">Unspecified</option><option value="lax">Lax</option><option value="strict">Strict</option><option value="no_restriction">None</option></select></label></div>
+      <div className="popup-cookie-flags"><label><input type="checkbox" checked={draft.secure || false} onChange={(event) => setDraft({ ...draft, secure: event.target.checked })} />Secure</label><label><input type="checkbox" checked={draft.httpOnly || false} onChange={(event) => setDraft({ ...draft, httpOnly: event.target.checked })} />HttpOnly</label></div>
+      {editing?.partitionKey && <div className="popup-inline-warning">Partitioned Cookie 将保留现有 top-level site；修改分区请打开完整编辑器。</div>}
+      <Button variant="primary" disabled={busy || !url || !draft.name} onClick={() => void saveCookie()}><Check size={15} />{editing ? '保存修改' : '创建 Cookie'}</Button>
+    </div> : <>
+      <div className="popup-tool-toolbar"><label><Search size={14} /><input aria-label="搜索当前页面 Cookie" value={query} onChange={(event) => setQuery(event.target.value)} placeholder="搜索名称、Domain 或 Path" /></label><Button size="icon" variant="ghost" aria-label="新增 Cookie" title="新增 Cookie" disabled={!url} onClick={startNew}><Plus size={16} /></Button></div>
+      <div className="popup-cookie-list popup-view-enter">
+        {loadError && <div className="popup-tool-empty">{loadError}</div>}
+        {!loadError && visibleCookies.length === 0 && <div className="popup-tool-empty">{cookies.length ? '没有匹配的 Cookie' : '当前页面没有可用 Cookie'}</div>}
+        {visibleCookies.map((cookie) => {
+          const key = cookieKey(cookie);
+          const authRelated = /(auth|token|jwt|session|login|csrf|sid)/i.test(cookie.name);
+          return <article className="popup-cookie-row" key={key}>
+            <button className="popup-cookie-main" onClick={() => startEdit(cookie)}><span><strong>{cookie.name}</strong>{authRelated && <i>认证</i>}</span><code title={cookie.value}>{cookie.value}</code><small>{cookie.domain}{cookie.path}</small></button>
+            <div className="popup-cookie-meta">{cookie.httpOnly && <i>HttpOnly</i>}{cookie.secure && <i>Secure</i>}{cookie.partitionKey && <i>CHIPS</i>}</div>
+            <div className="popup-cookie-actions"><button aria-label={`复制 ${cookie.name}`} onClick={() => void run(async () => navigator.clipboard.writeText(`${cookie.name}=${cookie.value}`), 'Cookie 已复制')}><Copy size={14} /></button><button className="danger" aria-label={`删除 ${cookie.name}`} onClick={() => void run(async () => { await request('cookie.remove', cookieRemovalInput(cookie)); await reload(); }, 'Cookie 已删除')}><Trash2 size={14} /></button></div>
+          </article>;
+        })}
+      </div>
+      <div className="popup-tool-footer"><button disabled={!cookies.length || busy} onClick={() => { if (window.confirm(`删除当前页面可用的 ${cookies.length} 个 Cookie？`)) void run(async () => { await request('cookie.removeMany', { cookies: cookies.map(cookieRemovalInput) }); await reload(); }, '当前页面 Cookie 已清理'); }}><Trash2 size={14} />清理当前页面</button></div>
+    </>}
+  </section>;
+}

src/entrypoints/popup/views/OverviewQuickView.tsx

@@ -0,0 +1,83 @@
+import { Braces, ChevronRight, Cookie, Network, Radio, ShieldCheck, UserRoundCog } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { request } from '@/platform/messaging/runtime';
+import { READ_CAPABILITY_SCOPES } from '@/protocol/capabilities';
+import type { ActiveTabInfo, ExtensionState, UserAgentResolution } from '@/types/models';
+
+type PopupView = 'home' | 'proxy' | 'cookies' | 'user-agent';
+type RunTask = (task: () => Promise<void>, success?: string) => Promise<void>;
+
+interface OverviewQuickViewProps {
+  state: ExtensionState;
+  tab?: ActiveTabInfo;
+  grantActive: boolean;
+  busy: boolean;
+  run: RunTask;
+  setState: (state: ExtensionState) => void;
+  cookieCount: number;
+  uaResolution?: UserAgentResolution;
+  onNavigate: (view: PopupView) => void;
+  onOpenContext: () => void;
+  onCapture: () => void;
+}
+
+export function OverviewQuickView({
+  state, tab, grantActive, busy, run, setState, cookieCount, uaResolution, onNavigate, onOpenContext, onCapture,
+}: OverviewQuickViewProps) {
+  const activeProxy = state.activeProxyId === 'auto'
+    ? '自动切换'
+    : state.proxyProfiles.find((profile) => profile.id === state.activeProxyId)?.name || '未选择';
+  const targetAvailable = Boolean(tab?.url?.startsWith('http'));
+
+  return <section className="popup-overview-view">
+    <section className={`popup-share ${grantActive ? 'is-active' : ''}`}>
+      <div className="popup-share-copy">
+        <ShieldCheck size={18} />
+        <div>
+          <strong>共享当前标签页</strong>
+          <span>{grantActive ? `只读会话 ${new Date(state.activeGrant!.expiresAt).toLocaleTimeString()} 到期` : '创建 30 分钟只读会话'}</span>
+        </div>
+      </div>
+      <Switch checked={grantActive} disabled={!tab || busy} aria-label="共享当前浏览器上下文" onCheckedChange={(checked) => void run(async () => {
+        const updated = checked
+          ? await request('grant.create', { targets: [{ tabId: tab!.id, frameId: 0 }], scopes: READ_CAPABILITY_SCOPES, durationMinutes: 30 })
+          : await request('grant.revoke');
+        setState(updated);
+      })} />
+    </section>
+
+    <div className="popup-overview-lead">
+      <div className="popup-overview-lead__meta"><strong className={targetAvailable ? '' : 'is-unavailable'}><i />{targetAvailable ? '页面已就绪' : '页面不可访问'}</strong><span>{targetAvailable ? '从这里快速查看和调整当前标签页' : '切换到 HTTP(S) 页面后可使用浏览器工具'}</span></div>
+    </div>
+
+    <section className="popup-overview-summary" aria-label="当前页面状态">
+      <button onClick={() => onNavigate('proxy')}>
+        <span className="popup-overview-icon"><Network size={16} /></span>
+        <span><small>当前代理</small><strong>{activeProxy}</strong></span>
+        <ChevronRight size={15} />
+      </button>
+      <button onClick={() => onNavigate('user-agent')}>
+        <span className="popup-overview-icon"><UserRoundCog size={16} /></span>
+        <span><small>当前 User-Agent</small><strong>{uaResolution?.profile?.name || '浏览器默认'}</strong></span>
+        <ChevronRight size={15} />
+      </button>
+      <button onClick={() => onNavigate('cookies')}>
+        <span className="popup-overview-icon"><Cookie size={16} /></span>
+        <span><small>当前页面 Cookie</small><strong>{targetAvailable ? `${cookieCount} 个可用 Cookie` : '当前页面不可用'}</strong></span>
+        <ChevronRight size={15} />
+      </button>
+      <button onClick={onOpenContext}>
+        <span className="popup-overview-icon"><Braces size={16} /></span>
+        <span><small>登录态工作区</small><strong>Storage、数据库与页面上下文</strong></span>
+        <ChevronRight size={15} />
+      </button>
+    </section>
+
+    <footer className="popup-footer">
+      <Button className="popup-capture" variant="primary" disabled={busy || !targetAvailable} onClick={onCapture}>
+        {busy ? <Radio className="spin" size={15} /> : <Radio size={15} />}采集并复制上下文
+      </Button>
+    </footer>
+  </section>;
+}

src/entrypoints/popup/views/ProxyQuickView.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useMemo, useState } from 'react';
+import { AlertCircle, Check, ExternalLink, Globe2, LoaderCircle, Network, Route } from 'lucide-react';
+import { request } from '@/platform/messaging/runtime';
+import type { ActiveTabInfo, ExtensionState, ProxyProfile, ProxyRulePreview } from '@/types/models';
+
+type RunTask = (task: () => Promise<void>, success?: string) => Promise<void>;
+
+interface ProxyQuickViewProps {
+  state: ExtensionState;
+  setState: (state: ExtensionState) => void;
+  busy: boolean;
+  run: RunTask;
+  tab?: ActiveTabInfo;
+  onOpenFull: () => void;
+}
+
+const AUTOMATIC_TARGET = '__automatic__';
+const CURRENT_GLOBAL_TARGET = '__current_global__';
+
+type SiteApplyStatus = 'idle' | 'applying' | 'success' | 'error';
+
+const PROXY_KIND_LABELS: Record<ProxyProfile['kind'], string> = {
+  fixed_servers: '固定代理',
+  pac_script: 'PAC Script',
+  direct: '直连',
+  system: '系统代理',
+};
+
+function proxyDetail(profile: ProxyProfile): string {
+  return profile.kind === 'fixed_servers'
+    ? `${profile.scheme}://${profile.host}:${profile.port}`
+    : PROXY_KIND_LABELS[profile.kind];
+}
+
+function hostname(url?: string): string {
+  try { return url ? new URL(url).hostname.toLowerCase() : ''; } catch { return ''; }
+}
+
+function routeKindLabel(preview?: ProxyRulePreview): string {
+  if (preview?.matchedKind === 'manual') return '站点覆盖';
+  if (preview?.matchedKind === 'source') return '规则订阅';
+  return '自动判断';
+}
+
+export function ProxyQuickView({ state, setState, busy, run, tab, onOpenFull }: ProxyQuickViewProps) {
+  const [preview, setPreview] = useState<ProxyRulePreview>();
+  const currentHostname = hostname(tab?.url);
+  const autoActive = state.activeProxyId === 'auto';
+  const activeProfile = state.proxyProfiles.find((profile) => profile.id === state.activeProxyId);
+  const routableProfiles = useMemo(
+    () => state.proxyProfiles.filter((profile) => profile.kind === 'direct' || profile.kind === 'fixed_servers'),
+    [state.proxyProfiles],
+  );
+  const siteRule = useMemo(() => [...state.proxyRules]
+    .sort((left, right) => left.order - right.order)
+    .find((rule) => rule.enabled && rule.condition.type === 'host_exact'
+      && rule.condition.value.toLowerCase() === currentHostname), [currentHostname, state.proxyRules]);
+  const persistedTarget = siteRule?.proxyProfileId || AUTOMATIC_TARGET;
+  const [siteTarget, setSiteTarget] = useState(autoActive ? persistedTarget : CURRENT_GLOBAL_TARGET);
+  const [siteApplyStatus, setSiteApplyStatus] = useState<SiteApplyStatus>('idle');
+  const [siteApplyMessage, setSiteApplyMessage] = useState('');
+  const sourceRuleCount = state.proxyRuleSources
+    .filter((source) => source.enabled && source.revision)
+    .reduce((total, source) => total + source.supportedRuleCount, 0);
+
+  useEffect(() => {
+    setSiteTarget(autoActive
+      ? routableProfiles.some((profile) => profile.id === persistedTarget) ? persistedTarget : AUTOMATIC_TARGET
+      : CURRENT_GLOBAL_TARGET);
+  }, [autoActive, persistedTarget, routableProfiles]);
+
+  useEffect(() => {
+    setSiteApplyStatus('idle');
+    setSiteApplyMessage('');
+  }, [currentHostname]);
+
+  useEffect(() => {
+    if (siteApplyStatus !== 'success' && siteApplyStatus !== 'error') return undefined;
+    const timer = globalThis.setTimeout(() => {
+      setSiteApplyStatus('idle');
+      setSiteApplyMessage('');
+    }, 2_400);
+    return () => globalThis.clearTimeout(timer);
+  }, [siteApplyStatus]);
+
+  useEffect(() => {
+    if (!tab?.url?.startsWith('http')) {
+      setPreview(undefined);
+      return;
+    }
+    let cancelled = false;
+    void request('proxy.rules.preview', { url: tab.url })
+      .then((result) => { if (!cancelled) setPreview(result); })
+      .catch(() => { if (!cancelled) setPreview(undefined); });
+    return () => { cancelled = true; };
+  }, [tab?.url, state.proxyRuntime.revision, state.proxyRuntime.dirty]);
+
+  const switchAuto = () => run(async () => {
+    setState(await request('proxy.auto.apply'));
+    if (tab?.url) setPreview(await request('proxy.rules.preview', { url: tab.url }));
+  }, '自动切换已启用');
+
+  const applySiteRoute = (nextTarget: string) => {
+    if (!tab?.url || nextTarget === CURRENT_GLOBAL_TARGET) return Promise.resolve();
+    const previousTarget = autoActive ? persistedTarget : CURRENT_GLOBAL_TARGET;
+    const nextProfile = routableProfiles.find((profile) => profile.id === nextTarget);
+    setSiteTarget(nextTarget);
+    setSiteApplyStatus('applying');
+    setSiteApplyMessage(nextTarget === AUTOMATIC_TARGET
+      ? '正在恢复自动判断…'
+      : `正在切换到 ${nextProfile?.name || '所选出口'}…`);
+    return run(async () => {
+      try {
+        const updated = nextTarget === AUTOMATIC_TARGET
+          ? await request('proxy.site.route.clear', { url: tab.url! })
+          : await request('proxy.site.route', { url: tab.url!, profileId: nextTarget });
+        setState(updated);
+        setPreview(await request('proxy.rules.preview', { url: tab.url! }).catch(() => undefined));
+        setSiteApplyStatus('success');
+        setSiteApplyMessage(nextTarget === AUTOMATIC_TARGET
+          ? '已恢复自动判断'
+          : `已应用 · ${nextProfile?.name || '所选出口'}`);
+      } catch (error) {
+        setSiteTarget(previousTarget);
+        setSiteApplyStatus('error');
+        setSiteApplyMessage('切换失败，已恢复原设置');
+        throw error;
+      }
+    });
+  };
+
+  const effectiveProfile = state.proxyProfiles.find((profile) => profile.id === preview?.effectiveProfileId);
+  const activeModeName = autoActive ? '自动切换' : activeProfile?.name || '未选择';
+  const siteHint = !autoActive
+    ? `当前使用“${activeModeName}”；选择网站出口后将启用自动切换。`
+    : siteTarget === AUTOMATIC_TARGET
+      ? '不创建手动覆盖，由订阅源和默认出口决定。'
+      : `最高优先级的精确主机规则，只影响 ${currentHostname}。`;
+  const routeLabel = autoActive ? preview?.matchedName || '正在解析路由' : '当前全局模式';
+  const routeProfile = autoActive ? effectiveProfile : activeProfile;
+  const routeKind = autoActive ? preview?.matchedKind || 'default' : 'global';
+  const routeKindText = autoActive ? routeKindLabel(preview) : '全局模式';
+
+  return <section className="popup-view popup-tool-view popup-proxy-view">
+    {currentHostname ? <section className="popup-site-router" aria-label="当前站点路由">
+      <div className="popup-site-router__heading">
+        <div><Globe2 size={16} /><span><small>当前站点</small><strong title={currentHostname}>{currentHostname}</strong></span></div>
+        <i className={routeKind}>{routeKindText}</i>
+      </div>
+      <div className="popup-site-decision" title={autoActive ? preview?.matchedCondition : activeModeName}>
+        <span>{routeLabel}</span><i>→</i><strong>{routeProfile?.name || '—'}</strong>
+      </div>
+      <div className="popup-site-picker">
+        <label htmlFor="popup-site-proxy">网站出口 <span>选择后立即生效</span></label>
+        <select id="popup-site-proxy" aria-label="当前站点代理出口" value={siteTarget} disabled={busy} aria-busy={siteApplyStatus === 'applying'} onChange={(event) => void applySiteRoute(event.target.value)}>
+          {!autoActive && <option value={CURRENT_GLOBAL_TARGET}>当前全局模式 · {activeModeName}</option>}
+          <option value={AUTOMATIC_TARGET}>跟随自动规则 · 清除站点覆盖</option>
+          {routableProfiles.map((profile) => <option value={profile.id} key={profile.id}>{profile.name} · {proxyDetail(profile)}</option>)}
+        </select>
+      </div>
+      <div className={`popup-site-status is-${siteApplyStatus}`} role="status" aria-live="polite">
+        {siteApplyStatus === 'applying' && <LoaderCircle size={13} className="spin" />}
+        {siteApplyStatus === 'success' && <Check size={13} />}
+        {siteApplyStatus === 'error' && <AlertCircle size={13} />}
+        <small>{siteApplyMessage || siteHint}</small>
+      </div>
+    </section> : <div className="popup-proxy-unavailable"><Globe2 size={17} /><span><strong>当前页面无法设置站点路由</strong><small>请切换到 HTTP(S) 页面。</small></span></div>}
+
+    <div className="popup-mode-heading"><span><strong>浏览器模式</strong><small>全局切换，不会创建站点规则</small></span><i>{activeModeName}</i></div>
+    <div className="popup-proxy-list popup-proxy-list--view" role="radiogroup" aria-label="浏览器代理模式">
+      <button role="radio" aria-checked={autoActive} className={autoActive ? 'is-active' : ''} disabled={busy} onClick={() => void switchAuto()}>
+        <span className="popup-mode-icon"><Route size={15} /></span>
+        <span><strong>自动切换</strong><small>{state.proxyRules.filter((rule) => rule.enabled).length} 条手动 · {sourceRuleCount.toLocaleString()} 条订阅</small></span>
+        {state.proxyRuntime.dirty ? <em>待应用</em> : autoActive ? <Check size={14} /> : null}
+      </button>
+      {state.proxyProfiles.map((profile) => {
+        const active = state.activeProxyId === profile.id;
+        return <button key={profile.id} role="radio" aria-checked={active} className={active ? 'is-active' : ''} disabled={busy} onClick={() => void run(async () => setState(await request('proxy.switch', { id: profile.id })), `${profile.name} 已作为全局模式启用`)}>
+          <span className="popup-mode-icon"><Network size={15} /></span>
+          <span><strong>{profile.name}</strong><small>{proxyDetail(profile)}</small></span>
+          {active && <Check size={14} />}
+        </button>;
+      })}
+    </div>
+    <div className="popup-tool-footer"><span>{state.proxyProfiles.length} 个出口 · {state.proxyRuleSources.length} 个订阅</span><button onClick={onOpenFull}><ExternalLink size={13} />管理策略</button></div>
+  </section>;
+}

src/entrypoints/popup/views/UserAgentQuickView.tsx

@@ -0,0 +1,99 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Bot, Laptop, RefreshCw, Save, Smartphone, UserRoundCog, X } from 'lucide-react';
+import { browser } from 'wxt/browser';
+import { Button } from '@/components/ui/button';
+import { request } from '@/platform/messaging/runtime';
+import type {
+  ActiveTabInfo, ExtensionState, UserAgentProfile, UserAgentProfileCategory, UserAgentResolution,
+} from '@/types/models';
+
+const BROWSER_DEFAULT = '__browser_default__';
+type RunTask = (task: () => Promise<void>, success?: string) => Promise<void>;
+
+interface UserAgentQuickViewProps {
+  tab?: ActiveTabInfo;
+  state: ExtensionState;
+  setState: (state: ExtensionState) => void;
+  busy: boolean;
+  run: RunTask;
+  onResolutionChange: (resolution?: UserAgentResolution) => void;
+}
+
+function categoryIcon(category: UserAgentProfileCategory) {
+  if (category === 'mobile') return <Smartphone size={15} />;
+  if (category === 'bot') return <Bot size={15} />;
+  if (category === 'custom') return <UserRoundCog size={15} />;
+  return <Laptop size={15} />;
+}
+
+export function UserAgentQuickView({ tab, state, setState, busy, run, onResolutionChange }: UserAgentQuickViewProps) {
+  const url = tab?.url?.startsWith('http') ? tab.url : '';
+  const [profiles, setProfiles] = useState<UserAgentProfile[]>([]);
+  const [resolution, setResolution] = useState<UserAgentResolution>();
+  const [selectedProfileId, setSelectedProfileId] = useState(BROWSER_DEFAULT);
+  const [customOpen, setCustomOpen] = useState(false);
+  const [customName, setCustomName] = useState('');
+  const [customValue, setCustomValue] = useState('');
+  const [loadError, setLoadError] = useState('');
+
+  const load = useCallback(async () => {
+    if (!url) {
+      setProfiles(await request('ua.catalog'));
+      setResolution(undefined);
+      onResolutionChange(undefined);
+      return;
+    }
+    try {
+      const [nextProfiles, nextResolution] = await Promise.all([request('ua.catalog'), request('ua.resolve', { url })]);
+      setProfiles(nextProfiles);
+      setResolution(nextResolution);
+      setSelectedProfileId(nextResolution.profile?.id || BROWSER_DEFAULT);
+      onResolutionChange(nextResolution);
+      setLoadError('');
+    } catch (error) {
+      setLoadError(error instanceof Error ? error.message : String(error));
+    }
+  }, [onResolutionChange, url]);
+  useEffect(() => { void load(); }, [load, state.customUserAgentProfiles, state.userAgentAssignments]);
+
+  const applyAndReload = () => run(async () => {
+    if (!tab || !url) throw new Error('当前页面不能修改 User-Agent');
+    const next = selectedProfileId === BROWSER_DEFAULT
+      ? await request('ua.site.reset', { url })
+      : await request('ua.site.apply', { url, profileId: selectedProfileId });
+    setState(next);
+    const resolved = await request('ua.resolve', { url });
+    setResolution(resolved);
+    onResolutionChange(resolved);
+    await browser.tabs.reload(tab.id);
+  }, selectedProfileId === BROWSER_DEFAULT ? '已恢复浏览器默认 UA 并刷新页面' : 'User-Agent 已应用并刷新页面');
+
+  const saveCustomAndApply = () => run(async () => {
+    if (!tab || !url) throw new Error('当前页面不能修改 User-Agent');
+    const profile = await request('ua.profile.save', { name: customName, userAgent: customValue });
+    const next = await request('ua.site.apply', { url, profileId: profile.id });
+    setState(next);
+    setProfiles(await request('ua.catalog'));
+    setSelectedProfileId(profile.id);
+    const resolved = await request('ua.resolve', { url });
+    setResolution(resolved);
+    onResolutionChange(resolved);
+    setCustomOpen(false);
+    setCustomName('');
+    setCustomValue('');
+    await browser.tabs.reload(tab.id);
+  }, '自定义 User-Agent 已保存、应用并刷新页面');
+
+  return <section className="popup-view popup-tool-view popup-ua-view">
+    <div className="popup-tool-context"><UserRoundCog size={14} /><span>{resolution?.hostname || (url ? new URL(url).hostname : '当前页面不可访问')}</span><strong>{resolution?.mode === 'override' ? '已覆盖' : '默认'}</strong></div>
+    <div className="popup-ua-current"><span>当前生效</span><strong>{resolution?.profile?.name || '浏览器默认'}</strong><code title={resolution?.userAgent}>{resolution?.userAgent || navigator.userAgent}</code><small>仅修改网络请求头，不等于完整设备指纹伪装。</small></div>
+    {customOpen ? <div className="popup-ua-custom popup-view-enter"><div className="popup-editor-title"><div><strong>自定义 User-Agent</strong><span>保存为预设并应用到当前 hostname</span></div><Button size="icon" variant="ghost" aria-label="关闭自定义 UA" onClick={() => setCustomOpen(false)}><X size={15} /></Button></div><label><span>预设名称</span><input autoFocus value={customName} onChange={(event) => setCustomName(event.target.value)} placeholder="API Client" /></label><label><span>User-Agent</span><textarea rows={5} value={customValue} onChange={(event) => setCustomValue(event.target.value)} placeholder="Custom-Agent/1.0" /></label><Button variant="primary" disabled={busy || !customName.trim() || !customValue.trim()} onClick={() => void saveCustomAndApply()}><Save size={15} />保存、应用并刷新</Button></div> : <>
+      <div className="popup-ua-list popup-view-enter" role="radiogroup" aria-label="User-Agent 预设">
+        <button role="radio" aria-checked={selectedProfileId === BROWSER_DEFAULT} className={selectedProfileId === BROWSER_DEFAULT ? 'is-selected' : ''} onClick={() => setSelectedProfileId(BROWSER_DEFAULT)}><span className="popup-ua-icon"><RefreshCw size={15} /></span><span><strong>浏览器默认</strong><small>移除当前站点覆盖</small></span><i /></button>
+        {profiles.map((profile) => <button role="radio" aria-checked={selectedProfileId === profile.id} className={selectedProfileId === profile.id ? 'is-selected' : ''} key={profile.id} onClick={() => setSelectedProfileId(profile.id)}><span className="popup-ua-icon">{categoryIcon(profile.category)}</span><span><strong>{profile.name}</strong><small>{profile.builtin ? profile.category === 'mobile' ? '移动设备模板' : profile.category === 'bot' ? '爬虫模板' : '桌面设备模板' : '自定义预设'}</small></span><i /></button>)}
+      </div>
+      {loadError && <div className="popup-inline-warning">{loadError}</div>}
+      <div className="popup-ua-actions"><Button variant="ghost" disabled={!url || busy} onClick={() => setCustomOpen(true)}>自定义…</Button><Button variant="primary" disabled={!url || busy || selectedProfileId === (resolution?.profile?.id || BROWSER_DEFAULT)} onClick={() => void applyAndReload()}><RefreshCw size={15} />应用并刷新</Button></div>
+    </>}
+  </section>;
+}

src/features/agent-runtime/service-recovery.test.ts

@@ -0,0 +1,173 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { BridgeGrant } from '@/types/models';
+import { AGENT_RUNTIME_STORAGE_KEY } from '@/protocol/storage';
+
+const fixture = vi.hoisted(() => ({
+  session: {} as Record<string, unknown>,
+}));
+
+vi.mock('wxt/browser', () => ({
+  browser: {
+    storage: {
+      session: {
+        async get(key: string) {
+          return key in fixture.session
+            ? { [key]: structuredClone(fixture.session[key]) }
+            : {};
+        },
+        async set(items: Record<string, unknown>) {
+          Object.assign(fixture.session, structuredClone(items));
+        },
+      },
+    },
+  },
+}));
+
+function grant(id: string): BridgeGrant {
+  return {
+    id,
+    taskId: `task-${id}`,
+    createdAt: Date.now(),
+    expiresAt: Date.now() + 60_000,
+    scopes: ['browser.tabs.read'],
+    targets: [{
+      tabId: 1,
+      frameId: 0,
+      documentId: `document-${id}`,
+      isolationContextId: 'browser-profile:store-1',
+      cookieStoreId: 'store-1',
+      origin: 'https://example.test',
+      grantedUrl: 'https://example.test/',
+      title: 'Example',
+    }],
+  };
+}
+
+function storedAction(overrides: Record<string, unknown> = {}) {
+  return {
+    id: 'action-valid',
+    requestId: 'request-valid',
+    taskId: 'task-restored',
+    grantId: 'restored',
+    method: 'browser.context',
+    state: 'running',
+    startedAt: Date.now() - 100,
+    ...overrides,
+  };
+}
+
+describe('Agent Runtime restart recovery', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(4_102_444_800_000);
+    for (const key of Object.keys(fixture.session)) delete fixture.session[key];
+    vi.resetModules();
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+    vi.useRealTimers();
+  });
+
+  it('filters corrupted persisted actions and cross-grant records on worker restart', async () => {
+    fixture.session[AGENT_RUNTIME_STORAGE_KEY] = {
+      state: 'running',
+      taskId: 'task-restored',
+      grantId: 'restored',
+      startedAt: Date.now() - 1_000,
+      updatedAt: Date.now(),
+      actions: [
+        null,
+        'not-an-action',
+        storedAction({ id: '', requestId: '' }),
+        storedAction({ id: 'wrong-grant', grantId: 'other' }),
+        storedAction(),
+      ],
+    };
+    const { getAgentRuntime } = await import('./service');
+
+    const runtime = await getAgentRuntime();
+
+    expect(runtime).toMatchObject({
+      state: 'running',
+      taskId: 'task-restored',
+      grantId: 'restored',
+      persistence: 'persisted',
+    });
+    expect(runtime.actions).toEqual([expect.objectContaining({ id: 'action-valid' })]);
+  });
+
+  it('fails closed to idle when a persisted active state has no owning grant', async () => {
+    fixture.session[AGENT_RUNTIME_STORAGE_KEY] = {
+      state: 'running',
+      taskId: 'task-orphaned',
+      updatedAt: Date.now(),
+      actions: [storedAction()],
+    };
+    const { getAgentRuntime } = await import('./service');
+
+    const runtime = await getAgentRuntime();
+    expect(runtime).toMatchObject({ state: 'idle', actions: [] });
+    expect(runtime).not.toHaveProperty('taskId');
+    expect(runtime).not.toHaveProperty('grantId');
+  });
+
+  it('serializes concurrent begin and finish mutations without losing actions', async () => {
+    const {
+      beginAgentAction,
+      finishAgentAction,
+      getAgentRuntime,
+      startAgentRuntime,
+    } = await import('./service');
+    const active = grant('concurrent');
+    await startAgentRuntime(active);
+
+    const actions = await Promise.all(Array.from({ length: 40 }, (_, index) => (
+      beginAgentAction(active, {
+        requestId: `request-${index}`,
+        method: 'browser.context',
+        targetTabId: 1,
+      })
+    )));
+    expect((await getAgentRuntime()).actions).toHaveLength(40);
+
+    await Promise.all(actions.map((action) => finishAgentAction(action.id, 'success')));
+    const runtime = await getAgentRuntime();
+    expect(runtime.actions).toHaveLength(40);
+    expect(runtime.actions.every((action) => action.state === 'success')).toBe(true);
+  });
+
+  it('drops the previous grant actions and ignores their late completion after replacement', async () => {
+    const {
+      beginAgentAction,
+      finishAgentAction,
+      getAgentRuntime,
+      startAgentRuntime,
+    } = await import('./service');
+    const previous = grant('previous');
+    const replacement = grant('replacement');
+    await startAgentRuntime(previous);
+    const oldAction = await beginAgentAction(previous, {
+      requestId: 'request-old',
+      method: 'browser.context',
+      targetTabId: 1,
+    });
+
+    const currentAction = await beginAgentAction(replacement, {
+      requestId: 'request-current',
+      method: 'browser.context',
+      targetTabId: 1,
+    });
+    await finishAgentAction(oldAction.id, 'success');
+
+    const runtime = await getAgentRuntime();
+    expect(runtime).toMatchObject({
+      state: 'running',
+      grantId: replacement.id,
+      taskId: replacement.taskId,
+    });
+    expect(runtime.actions).toEqual([
+      expect.objectContaining({ id: currentAction.id, grantId: replacement.id, state: 'running' }),
+    ]);
+  });
+});

src/features/agent-runtime/service.test.ts

@@ -0,0 +1,133 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { BridgeGrant } from '@/types/models';
+
+const store = vi.hoisted(() => ({} as Record<string, unknown>));
+const persistence = vi.hoisted(() => ({ sets: 0, fail: false }));
+
+vi.mock('wxt/browser', () => ({
+  browser: {
+    storage: {
+      session: {
+        async get(key: string) {
+          return key in store ? { [key]: structuredClone(store[key]) } : {};
+        },
+        async set(items: Record<string, unknown>) {
+          persistence.sets += 1;
+          if (persistence.fail) throw new Error('fixture session quota exceeded');
+          Object.assign(store, structuredClone(items));
+        },
+      },
+    },
+  },
+}));
+
+import {
+  beginAgentAction,
+  endAgentRuntimeForGrant,
+  finishAgentAction,
+  getAgentRuntime,
+  startAgentRuntime,
+} from './service';
+
+function grant(id: string): BridgeGrant {
+  return {
+    id,
+    taskId: `task-${id}`,
+    createdAt: Date.now(),
+    expiresAt: Date.now() + 60_000,
+    scopes: ['browser.tabs.read'],
+    targets: [{
+      tabId: 1,
+      frameId: 0,
+      documentId: `document-${id}`,
+      isolationContextId: 'browser-profile:store-1',
+      cookieStoreId: 'store-1',
+      origin: 'https://example.test',
+      grantedUrl: 'https://example.test/',
+      title: 'Example',
+    }],
+  };
+}
+
+describe('Agent Runtime grant ownership', () => {
+  beforeEach(() => {
+    vi.useRealTimers();
+    for (const key of Object.keys(store)) delete store[key];
+    persistence.sets = 0;
+    persistence.fail = false;
+  });
+
+  it('cancels running actions when their owning grant expires', async () => {
+    const active = grant('active');
+    await startAgentRuntime(active);
+    const action = await beginAgentAction(active, {
+      requestId: 'request-1',
+      method: 'browser.context',
+      targetTabId: 1,
+    });
+
+    const runtime = await endAgentRuntimeForGrant('expired', active);
+
+    expect(runtime.state).toBe('expired');
+    expect(runtime.actions.find((item) => item.id === action.id)).toMatchObject({
+      state: 'cancelled',
+      errorCode: 'expired',
+    });
+  });
+
+  it('does not let cleanup for an old grant overwrite a newer runtime', async () => {
+    const oldGrant = grant('old');
+    const currentGrant = grant('current');
+    await startAgentRuntime(oldGrant);
+    await startAgentRuntime(currentGrant);
+
+    const runtime = await endAgentRuntimeForGrant('revoked', oldGrant);
+
+    expect(runtime).toMatchObject({
+      state: 'running',
+      grantId: currentGrant.id,
+      taskId: currentGrant.taskId,
+    });
+    expect(await getAgentRuntime()).toMatchObject({
+      state: 'running',
+      grantId: currentGrant.id,
+    });
+  });
+
+  it('batches begin and finish action mutations into one deferred session write', async () => {
+    vi.useFakeTimers();
+    const active = grant('batched');
+    await startAgentRuntime(active);
+    expect(persistence.sets).toBe(1);
+
+    const action = await beginAgentAction(active, {
+      requestId: 'request-batched', method: 'browser.context', targetTabId: 1,
+    });
+    await finishAgentAction(action.id, 'success');
+    expect(persistence.sets).toBe(1);
+    expect(await getAgentRuntime()).toMatchObject({ persistence: 'pending', pendingMutations: 2 });
+
+    await vi.advanceTimersByTimeAsync(101);
+    expect(persistence.sets).toBe(2);
+    expect(await getAgentRuntime()).toMatchObject({ persistence: 'persisted', pendingMutations: 0 });
+  });
+
+  it('keeps action state in memory and exposes a session persistence failure', async () => {
+    vi.useFakeTimers();
+    const active = grant('degraded');
+    await startAgentRuntime(active);
+    persistence.fail = true;
+    const action = await beginAgentAction(active, {
+      requestId: 'request-degraded', method: 'browser.context', targetTabId: 1,
+    });
+    await vi.advanceTimersByTimeAsync(101);
+    expect(await getAgentRuntime()).toMatchObject({
+      persistence: 'degraded', pendingMutations: 1, persistenceError: 'fixture session quota exceeded',
+    });
+
+    persistence.fail = false;
+    await finishAgentAction(action.id, 'success');
+    await vi.advanceTimersByTimeAsync(101);
+    expect(await getAgentRuntime()).toMatchObject({ persistence: 'persisted', pendingMutations: 0 });
+  });
+});

src/features/agent-runtime/service.ts

@@ -0,0 +1,329 @@
+import { browser } from 'wxt/browser';
+import { AGENT_RUNTIME_STORAGE_KEY } from '@/protocol/storage';
+import type {
+  AgentActionRecord, AgentActionState, AgentRuntime, AgentRuntimeState, BridgeGrant, RuntimeQueueMetric,
+} from '@/types/models';
+import { ExtensionError } from '@/shared/errors';
+
+interface StorageArea {
+  get(keys: string | string[]): Promise<Record<string, unknown>>;
+  set(items: Record<string, unknown>): Promise<void>;
+}
+
+type AgentRuntimeCore = Omit<AgentRuntime, 'persistence' | 'persistenceError' | 'pendingMutations' | 'droppedActionCount'>;
+
+const MAX_ACTIONS = 200;
+const MAX_QUEUED_MUTATIONS = 1_024;
+const FLUSH_DELAY_MS = 100;
+const sessionStorage = (browser.storage as unknown as { session?: StorageArea }).session;
+
+let runtimeCache: AgentRuntimeCore | undefined;
+let restorePromise: Promise<void> | undefined;
+let mutationQueue: Promise<void> = Promise.resolve();
+let persistenceQueue: Promise<void> = Promise.resolve();
+let flushTimer: ReturnType<typeof globalThis.setTimeout> | undefined;
+let queuedMutations = 0;
+let pendingMutations = 0;
+let droppedActionCount = 0;
+let droppedMutationCount = 0;
+let persistenceErrors = 0;
+let persistenceError: string | undefined;
+
+function emptyRuntime(): AgentRuntimeCore {
+  return { state: 'idle', updatedAt: Date.now(), actions: [] };
+}
+
+function finiteTimestamp(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : undefined;
+}
+
+function boundedString(value: unknown, max = 240): string | undefined {
+  return typeof value === 'string' && value.length > 0 ? value.slice(0, max) : undefined;
+}
+
+function normalizeAction(input: unknown): AgentActionRecord | undefined {
+  if (!input || typeof input !== 'object' || Array.isArray(input)) return undefined;
+  const value = input as Partial<AgentActionRecord>;
+  const states = new Set<AgentActionState>(['running', 'success', 'denied', 'error', 'cancelled']);
+  const id = boundedString(value.id);
+  const requestId = boundedString(value.requestId);
+  const taskId = boundedString(value.taskId);
+  const grantId = boundedString(value.grantId);
+  const method = boundedString(value.method, 500);
+  const startedAt = finiteTimestamp(value.startedAt);
+  if (!id || !requestId || !taskId || !grantId || !method || !value.state
+    || !states.has(value.state) || startedAt === undefined) return undefined;
+  const targetTabId = Number.isSafeInteger(value.targetTabId) && Number(value.targetTabId) > 0
+    ? Number(value.targetTabId)
+    : undefined;
+  return {
+    id,
+    requestId,
+    taskId,
+    grantId,
+    method,
+    targetTabId,
+    isolationContextId: boundedString(value.isolationContextId, 500),
+    state: value.state,
+    startedAt,
+    completedAt: finiteTimestamp(value.completedAt),
+    durationMs: typeof value.durationMs === 'number' && Number.isFinite(value.durationMs) && value.durationMs >= 0
+      ? value.durationMs
+      : undefined,
+    errorCode: boundedString(value.errorCode, 240),
+  };
+}
+
+function normalizeRuntime(input: unknown): AgentRuntimeCore {
+  if (!input || typeof input !== 'object' || Array.isArray(input)) return emptyRuntime();
+  const value = input as Partial<AgentRuntime>;
+  const allowedStates = new Set<AgentRuntimeState>(['idle', 'running', 'paused', 'waiting_for_human', 'revoked', 'expired']);
+  const state = value.state && allowedStates.has(value.state) ? value.state : 'idle';
+  const taskId = boundedString(value.taskId);
+  const grantId = boundedString(value.grantId);
+  if (state !== 'idle' && (!taskId || !grantId)) return emptyRuntime();
+  const actions = Array.isArray(value.actions)
+    ? value.actions
+      .slice(-MAX_ACTIONS)
+      .map(normalizeAction)
+      .filter((action): action is AgentActionRecord => Boolean(action))
+      .filter((action) => state !== 'idle' && action.taskId === taskId && action.grantId === grantId)
+    : [];
+  return {
+    state,
+    taskId: state === 'idle' ? undefined : taskId,
+    grantId: state === 'idle' ? undefined : grantId,
+    startedAt: state === 'idle' ? undefined : finiteTimestamp(value.startedAt),
+    pausedAt: state === 'paused' ? finiteTimestamp(value.pausedAt) : undefined,
+    updatedAt: finiteTimestamp(value.updatedAt) ?? Date.now(),
+    actions,
+  };
+}
+
+async function ensureRestored(): Promise<void> {
+  if (runtimeCache) return;
+  if (!restorePromise) {
+    if (!sessionStorage) {
+      runtimeCache = emptyRuntime();
+      restorePromise = Promise.resolve();
+    } else {
+      restorePromise = sessionStorage.get(AGENT_RUNTIME_STORAGE_KEY).then((stored) => {
+        runtimeCache = normalizeRuntime(stored[AGENT_RUNTIME_STORAGE_KEY]);
+      }).catch((error) => {
+        runtimeCache = emptyRuntime();
+        persistenceErrors += 1;
+        persistenceError = error instanceof Error ? error.message : String(error);
+      });
+    }
+  }
+  await restorePromise;
+}
+
+function persistenceState(): NonNullable<AgentRuntime['persistence']> {
+  if (!sessionStorage) return 'memory-only';
+  if (persistenceError) return 'degraded';
+  return pendingMutations || queuedMutations ? 'pending' : 'persisted';
+}
+
+function publicRuntime(runtime: AgentRuntimeCore): AgentRuntime {
+  return {
+    ...runtime,
+    persistence: persistenceState(),
+    persistenceError: persistenceError?.slice(0, 512),
+    pendingMutations: pendingMutations + queuedMutations,
+    droppedActionCount: droppedActionCount + droppedMutationCount,
+  };
+}
+
+function boundedActions(actions: AgentActionRecord[]): AgentActionRecord[] {
+  if (actions.length <= MAX_ACTIONS) return actions;
+  droppedActionCount += actions.length - MAX_ACTIONS;
+  return actions.slice(-MAX_ACTIONS);
+}
+
+function scheduleFlush(): void {
+  if (!sessionStorage || flushTimer !== undefined) return;
+  flushTimer = globalThis.setTimeout(() => {
+    flushTimer = undefined;
+    void flushAgentRuntime().catch(() => undefined);
+  }, FLUSH_DELAY_MS);
+}
+
+async function mutate(
+  updater: (current: AgentRuntimeCore) => AgentRuntimeCore | Promise<AgentRuntimeCore>,
+  immediate = false,
+): Promise<AgentRuntime> {
+  if (queuedMutations >= MAX_QUEUED_MUTATIONS) {
+    droppedMutationCount += 1;
+    throw new ExtensionError('capacity_exceeded', 'Agent action 状态队列已满，请稍后重试');
+  }
+  queuedMutations += 1;
+  let output: AgentRuntimeCore | undefined;
+  const operation = mutationQueue.then(async () => {
+    await ensureRestored();
+    const base = runtimeCache || emptyRuntime();
+    const updated = await updater(base);
+    if (updated === base) {
+      output = base;
+      return;
+    }
+    output = normalizeRuntime(updated);
+    output.actions = boundedActions(output.actions);
+    runtimeCache = output;
+    pendingMutations += 1;
+  }).finally(() => {
+    queuedMutations -= 1;
+  });
+  mutationQueue = operation.catch(() => undefined);
+  await operation;
+  if (immediate) await flushAgentRuntime();
+  else scheduleFlush();
+  return publicRuntime(output || runtimeCache || emptyRuntime());
+}
+
+export async function flushAgentRuntime(): Promise<void> {
+  if (flushTimer !== undefined) globalThis.clearTimeout(flushTimer);
+  flushTimer = undefined;
+  await mutationQueue;
+  if (!sessionStorage) {
+    pendingMutations = 0;
+    return;
+  }
+  let succeeded = false;
+  const operation = persistenceQueue.then(async () => {
+    await ensureRestored();
+    if (!pendingMutations || !runtimeCache) {
+      succeeded = true;
+      return;
+    }
+    const snapshot = runtimeCache;
+    const batchCount = pendingMutations;
+    try {
+      await sessionStorage.set({ [AGENT_RUNTIME_STORAGE_KEY]: snapshot });
+      pendingMutations = Math.max(0, pendingMutations - batchCount);
+      persistenceError = undefined;
+      succeeded = true;
+    } catch (error) {
+      persistenceErrors += 1;
+      persistenceError = error instanceof Error ? error.message : String(error);
+      throw error;
+    }
+  });
+  persistenceQueue = operation.catch(() => undefined);
+  await operation;
+  if (succeeded && pendingMutations) scheduleFlush();
+}
+
+export async function getAgentRuntime(): Promise<AgentRuntime> {
+  await mutationQueue;
+  await ensureRestored();
+  return publicRuntime(runtimeCache || emptyRuntime());
+}
+
+export function agentRuntimeQueueDiagnostics(): RuntimeQueueMetric {
+  return {
+    pending: pendingMutations + queuedMutations,
+    dropped: droppedActionCount + droppedMutationCount,
+    persistenceErrors,
+    persistence: persistenceState(),
+    error: persistenceError?.slice(0, 512),
+  };
+}
+
+export function startAgentRuntime(grant: BridgeGrant): Promise<AgentRuntime> {
+  const now = Date.now();
+  return mutate((current) => ({
+    state: 'running', taskId: grant.taskId, grantId: grant.id, startedAt: now,
+    updatedAt: now, actions: current.grantId === grant.id ? current.actions : [],
+  }), true);
+}
+
+export function setAgentRuntimeState(state: AgentRuntimeState, grant?: BridgeGrant): Promise<AgentRuntime> {
+  return mutate((current) => {
+    const now = Date.now();
+    return {
+      ...current,
+      state,
+      taskId: grant?.taskId || current.taskId,
+      grantId: grant?.id || current.grantId,
+      pausedAt: state === 'paused' ? now : undefined,
+      updatedAt: now,
+      actions: ['revoked', 'expired'].includes(state)
+        ? current.actions.map((action) => action.state === 'running'
+          ? { ...action, state: 'cancelled', completedAt: now, durationMs: now - action.startedAt, errorCode: state }
+          : action)
+        : current.actions,
+    };
+  }, true);
+}
+
+export function endAgentRuntimeForGrant(
+  state: Extract<AgentRuntimeState, 'revoked' | 'expired'>,
+  grant: BridgeGrant,
+): Promise<AgentRuntime> {
+  return mutate((current) => {
+    if (current.grantId && current.grantId !== grant.id) return current;
+    const now = Date.now();
+    return {
+      ...current,
+      state,
+      taskId: grant.taskId,
+      grantId: grant.id,
+      pausedAt: undefined,
+      updatedAt: now,
+      actions: current.actions.map((action) => action.state === 'running'
+        ? {
+          ...action,
+          state: 'cancelled',
+          completedAt: now,
+          durationMs: now - action.startedAt,
+          errorCode: state,
+        }
+        : action),
+    };
+  }, true);
+}
+
+export function clearAgentActions(): Promise<AgentRuntime> {
+  return mutate((current) => ({ ...current, actions: [], updatedAt: Date.now() }), true);
+}
+
+export async function beginAgentAction(
+  grant: BridgeGrant,
+  input: {
+    requestId: string;
+    method: string;
+    targetTabId?: number;
+    isolationContextId?: string;
+  },
+): Promise<AgentActionRecord> {
+  let created!: AgentActionRecord;
+  await mutate((current) => {
+    const runtime = current.grantId === grant.id
+      ? current
+      : { state: 'running' as const, taskId: grant.taskId, grantId: grant.id, startedAt: Date.now(), updatedAt: Date.now(), actions: [] };
+    if (runtime.state === 'paused' || runtime.state === 'waiting_for_human') {
+      throw new ExtensionError('agent_paused', runtime.state === 'waiting_for_human' ? 'Agent 正在等待用户完成接管步骤' : 'Agent 操作已被用户暂停');
+    }
+    if (runtime.state !== 'running') throw new ExtensionError('grant_expired', 'Agent 会话已经结束');
+    created = {
+      id: crypto.randomUUID(), requestId: input.requestId, taskId: grant.taskId, grantId: grant.id,
+      method: input.method, targetTabId: input.targetTabId,
+      isolationContextId: input.isolationContextId,
+      state: 'running', startedAt: Date.now(),
+    };
+    return { ...runtime, updatedAt: Date.now(), actions: [...runtime.actions, created] };
+  });
+  return created;
+}
+
+export function finishAgentAction(id: string, state: Exclude<AgentActionState, 'running'>, errorCode?: string): Promise<AgentRuntime> {
+  const now = Date.now();
+  return mutate((current) => ({
+    ...current,
+    updatedAt: now,
+    actions: current.actions.map((action) => action.id === id && action.state === 'running'
+      ? { ...action, state, completedAt: now, durationMs: now - action.startedAt, errorCode }
+      : action),
+  }));
+}

src/features/authorization-testing/auth-attestation.ts

@@ -0,0 +1,173 @@
+import { browser } from 'wxt/browser';
+import type {
+  BrowserAuthContextAttestation,
+  BrowserTarget,
+} from '@/types/models';
+import { ExtensionError } from '@/shared/errors';
+import {
+  AUTH_CONTEXT_TTL_MS,
+  captureAuthContextSnapshot,
+  validateAuthContextBinding,
+} from './auth-context';
+
+const MAX_ATTESTATIONS = 32;
+const MAX_ATTESTATION_STORAGE_BYTES = 64 * 1_024;
+const STORAGE_KEY = 'browser.authorization.auth-attestations.v1';
+const attestations = new Map<string, BrowserAuthContextAttestation>();
+let loaded = false;
+
+function validStoredAttestation(value: unknown): value is BrowserAuthContextAttestation {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return false;
+  const attestation = value as Partial<BrowserAuthContextAttestation>;
+  return attestation.version === 1
+    && typeof attestation.id === 'string'
+    && attestation.id.length > 0
+    && attestation.id.length <= 160
+    && typeof attestation.deviceId === 'string'
+    && attestation.deviceId.length > 0
+    && attestation.deviceId.length <= 320
+    && typeof attestation.installationId === 'string'
+    && attestation.installationId.length > 0
+    && attestation.installationId.length <= 320
+    && typeof attestation.isolationContextId === 'string'
+    && attestation.isolationContextId.length > 0
+    && attestation.isolationContextId.length <= 320
+    && typeof attestation.cookieStoreId === 'string'
+    && attestation.cookieStoreId.length > 0
+    && attestation.cookieStoreId.length <= 320
+    && typeof attestation.origin === 'string'
+    && attestation.origin.length > 0
+    && attestation.origin.length <= 8_192
+    && typeof attestation.grantId === 'string'
+    && attestation.grantId.length > 0
+    && attestation.grantId.length <= 160
+    && typeof attestation.fingerprint === 'string'
+    && /^hmac-sha256:[a-f0-9]{64}$/.test(attestation.fingerprint)
+    && Boolean(attestation.target)
+    && Number.isSafeInteger(attestation.target?.tabId)
+    && Number(attestation.target?.tabId) > 0
+    && Number.isSafeInteger(attestation.target?.frameId)
+    && Number(attestation.target?.frameId) >= 0
+    && typeof attestation.target?.documentId === 'string'
+    && attestation.target.documentId.length > 0
+    && attestation.target.documentId.length <= 160
+    && Boolean(attestation.authentication)
+    && ['authenticated', 'unauthenticated', 'unknown'].includes(String(attestation.authentication?.status))
+    && Number.isSafeInteger(attestation.authentication?.cookieCount)
+    && Number(attestation.authentication?.cookieCount) >= 0
+    && Number.isSafeInteger(attestation.authentication?.storageEntryCount)
+    && Number(attestation.authentication?.storageEntryCount) >= 0
+    && Array.isArray(attestation.authentication?.authCookieNames)
+    && attestation.authentication.authCookieNames.length <= 100
+    && attestation.authentication.authCookieNames.every(
+      (name) => typeof name === 'string' && name.length <= 500,
+    )
+    && Array.isArray(attestation.authentication?.authStorageKeys)
+    && attestation.authentication.authStorageKeys.length <= 100
+    && attestation.authentication.authStorageKeys.every(
+      (key) => typeof key === 'string' && key.length <= 520,
+    )
+    && typeof attestation.createdAt === 'number'
+    && typeof attestation.expiresAt === 'number'
+    && attestation.expiresAt > attestation.createdAt
+    && attestation.expiresAt - attestation.createdAt <= AUTH_CONTEXT_TTL_MS;
+}
+
+function purge(now = Date.now(), reserve = 0): boolean {
+  let changed = false;
+  for (const [id, attestation] of attestations) {
+    if (attestation.expiresAt <= now) {
+      attestations.delete(id);
+      changed = true;
+    }
+  }
+  while (attestations.size > MAX_ATTESTATIONS - reserve) {
+    const oldest = attestations.keys().next().value as string | undefined;
+    if (!oldest) break;
+    attestations.delete(oldest);
+    changed = true;
+  }
+  return changed;
+}
+
+async function load(): Promise<void> {
+  if (loaded) return;
+  loaded = true;
+  try {
+    const stored = await browser.storage.session.get(STORAGE_KEY);
+    const values = stored[STORAGE_KEY];
+    if (!Array.isArray(values)) return;
+    for (const value of values.slice(-MAX_ATTESTATIONS)) {
+      if (validStoredAttestation(value)) attestations.set(value.id, value);
+    }
+    purge();
+  } catch {
+    // The bounded in-memory registry remains valid for this service-worker lifetime.
+  }
+}
+
+async function save(): Promise<void> {
+  try {
+    const retained: BrowserAuthContextAttestation[] = [];
+    for (const attestation of [...attestations.values()].reverse()) {
+      const candidate = [attestation, ...retained];
+      if (new TextEncoder().encode(JSON.stringify(candidate)).byteLength > MAX_ATTESTATION_STORAGE_BYTES) break;
+      retained.unshift(attestation);
+    }
+    attestations.clear();
+    for (const attestation of retained) attestations.set(attestation.id, attestation);
+    await browser.storage.session.set({ [STORAGE_KEY]: retained });
+  } catch {
+    // The bounded in-memory registry remains available when storage.session cannot persist.
+  }
+}
+
+export async function captureAuthContextAttestation(input: {
+  target: BrowserTarget;
+  grantId: string;
+  grantExpiresAt: number;
+}): Promise<BrowserAuthContextAttestation> {
+  await load();
+  const now = Date.now();
+  const snapshot = await captureAuthContextSnapshot(input.target);
+  const attestation: BrowserAuthContextAttestation = {
+    version: 1,
+    id: crypto.randomUUID(),
+    ...snapshot,
+    grantId: input.grantId,
+    createdAt: now,
+    expiresAt: Math.min(now + AUTH_CONTEXT_TTL_MS, input.grantExpiresAt),
+  };
+  if (attestation.expiresAt <= now) {
+    throw new ExtensionError('grant_expired', '浏览器共享会话已经过期');
+  }
+  purge(now, 1);
+  attestations.set(attestation.id, attestation);
+  await save();
+  return attestation;
+}
+
+export async function getAuthContextAttestation(
+  id: string,
+  grantId: string,
+): Promise<BrowserAuthContextAttestation> {
+  await load();
+  if (purge()) await save();
+  const attestation = attestations.get(id);
+  if (!attestation || attestation.grantId !== grantId) {
+    throw new ExtensionError(
+      'auth_context_stale',
+      '认证上下文证明不存在、已过期或不属于当前共享会话',
+    );
+  }
+  try {
+    await validateAuthContextBinding(attestation);
+    return attestation;
+  } catch (error) {
+    attestations.delete(id);
+    await save();
+    if (error instanceof ExtensionError && error.code === 'auth_context_stale') throw error;
+    const message = error instanceof Error ? error.message : String(error);
+    throw new ExtensionError('auth_context_stale', `认证上下文证明实时复核失败：${message}`);
+  }
+}

src/features/authorization-testing/auth-context.test.ts

@@ -0,0 +1,96 @@
+import { describe, expect, it } from 'vitest';
+import type { BrowserCookie, PageContext, PageStorageEntry } from '@/types/models';
+import { authenticationFingerprint } from './auth-fingerprint';
+import { AUTHORIZATION_WORKSPACE_TTL_MS } from './lifetime';
+
+function cookie(name: string, value: string): BrowserCookie {
+  return {
+    name,
+    value,
+    domain: 'example.test',
+    path: '/',
+    secure: true,
+    httpOnly: true,
+    sameSite: 'lax',
+    session: true,
+    hostOnly: true,
+    storeId: 'opaque-store',
+  };
+}
+
+function storageEntry(key: string, value: string): PageStorageEntry {
+  return {
+    key,
+    value,
+    byteLength: value.length,
+    authRelated: true,
+    truncated: false,
+  };
+}
+
+function context(cookies: BrowserCookie[], storage: PageStorageEntry[] = []): PageContext {
+  return {
+    cookies,
+    document: {
+      url: 'https://example.test/account',
+      localStorage: {
+        supported: true,
+        entries: storage,
+        totalEntries: storage.length,
+        approximateBytes: 0,
+        truncated: false,
+      },
+      sessionStorage: {
+        supported: true,
+        entries: [],
+        totalEntries: 0,
+        approximateBytes: 0,
+        truncated: false,
+      },
+    },
+  } as unknown as PageContext;
+}
+
+describe('authorization context fingerprint', () => {
+  it('keeps authorization context available for human and Agent review', () => {
+    expect(AUTHORIZATION_WORKSPACE_TTL_MS).toBe(30 * 60_000);
+  });
+
+  it('keeps raw Cookie and Storage values out of the canonical identity fingerprint', async () => {
+    const signed: string[] = [];
+    const signer = async (value: string) => {
+      signed.push(value);
+      return 'f'.repeat(64);
+    };
+
+    const fingerprint = await authenticationFingerprint(
+      context(
+        [cookie('session_id', 'cookie-secret-value')],
+        [storageEntry('access_token', 'storage-secret-value')],
+      ),
+      signer,
+    );
+    const canonical = signed.at(-1) || '';
+
+    expect(fingerprint).toBe(`hmac-sha256:${'f'.repeat(64)}`);
+    expect(canonical).toContain('session_id');
+    expect(canonical).toContain('access_token');
+    expect(canonical).not.toContain('cookie-secret-value');
+    expect(canonical).not.toContain('storage-secret-value');
+  });
+
+  it('fails closed instead of fingerprinting a truncated Cookie collection', async () => {
+    const cookies = Array.from({ length: 501 }, (_, index) => cookie(`cookie-${index}`, 'value'));
+
+    await expect(authenticationFingerprint(context(cookies), async () => 'f'.repeat(64)))
+      .rejects.toThrow('超过 500 个 Cookie');
+  });
+
+  it('fails closed when the shared page-context Storage snapshot is incomplete', async () => {
+    const pageContext = context([cookie('session_id', 'value')]);
+    pageContext.document.localStorage!.truncated = true;
+
+    await expect(authenticationFingerprint(pageContext, async () => 'f'.repeat(64)))
+      .rejects.toThrow('localStorage 快照发生截断');
+  });
+});

src/features/authorization-testing/auth-context.ts

@@ -0,0 +1,366 @@
+import { browser } from 'wxt/browser';
+import type {
+  BrowserAuthContextHandle,
+  BrowserIsolationContext,
+  BrowserTarget,
+} from '@/types/models';
+import { capturePageContext } from '@/features/page-context/service';
+import { getState } from '@/platform/storage/state';
+import { ExtensionError } from '@/shared/errors';
+import {
+  authenticationFingerprint,
+  authenticationStorageEntries,
+} from './auth-fingerprint';
+import {
+  getBrowserIsolationProof,
+  inspectBrowserIsolation,
+} from './isolation';
+import { AUTHORIZATION_WORKSPACE_TTL_MS } from './lifetime';
+
+export const AUTH_CONTEXT_TTL_MS = AUTHORIZATION_WORKSPACE_TTL_MS;
+const MAX_AUTH_CONTEXTS = 32;
+const MAX_AUTH_CONTEXT_STORAGE_BYTES = 64 * 1_024;
+const STORAGE_KEY = 'browser.authorization.auth-contexts.v1';
+const HMAC_KEY_STORAGE_KEY = 'browser.authorization.hmac-key.v1';
+
+const handles = new Map<string, BrowserAuthContextHandle>();
+let handlesLoaded = false;
+let hmacKeyPromise: Promise<CryptoKey> | undefined;
+
+function bytesToBase64(bytes: Uint8Array): string {
+  let binary = '';
+  for (let offset = 0; offset < bytes.length; offset += 8_192) {
+    binary += String.fromCharCode(...bytes.subarray(offset, offset + 8_192));
+  }
+  return btoa(binary);
+}
+
+function base64ToBytes(value: string): Uint8Array {
+  const binary = atob(value);
+  return Uint8Array.from(binary, (character) => character.charCodeAt(0));
+}
+
+function bytesToHex(bytes: Uint8Array): string {
+  return [...bytes].map((byte) => byte.toString(16).padStart(2, '0')).join('');
+}
+
+async function sessionHmacKey(): Promise<CryptoKey> {
+  if (hmacKeyPromise) return hmacKeyPromise;
+  hmacKeyPromise = (async () => {
+    let raw: Uint8Array | undefined;
+    try {
+      const stored = await browser.storage.session.get(HMAC_KEY_STORAGE_KEY);
+      const encoded = stored[HMAC_KEY_STORAGE_KEY];
+      if (typeof encoded === 'string') {
+        const candidate = base64ToBytes(encoded);
+        if (candidate.byteLength === 32) raw = candidate;
+      }
+    } catch {
+      // A fresh in-memory session key is sufficient when storage.session is unavailable.
+    }
+    if (!raw) {
+      raw = crypto.getRandomValues(new Uint8Array(32));
+      try {
+        await browser.storage.session.set({ [HMAC_KEY_STORAGE_KEY]: bytesToBase64(raw) });
+      } catch {
+        // Keep the key in this service worker lifetime as the fallback.
+      }
+    }
+    return crypto.subtle.importKey(
+      'raw',
+      Uint8Array.from(raw).buffer,
+      { name: 'HMAC', hash: 'SHA-256' },
+      false,
+      ['sign'],
+    );
+  })();
+  return hmacKeyPromise;
+}
+
+async function hmac(value: string): Promise<string> {
+  const signature = await crypto.subtle.sign(
+    'HMAC',
+    await sessionHmacKey(),
+    new TextEncoder().encode(value),
+  );
+  return bytesToHex(new Uint8Array(signature));
+}
+
+function authRelated(name: string): boolean {
+  return /(auth|token|jwt|session|login|csrf|xsrf|sid|credential|bearer)/i.test(name);
+}
+
+function validStoredHandle(value: unknown): value is BrowserAuthContextHandle {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return false;
+  const handle = value as Partial<BrowserAuthContextHandle>;
+  return handle.version === 1
+    && typeof handle.id === 'string'
+    && handle.id.length > 0
+    && handle.id.length <= 160
+    && ['left', 'right'].includes(String(handle.slotId))
+    && typeof handle.deviceId === 'string'
+    && handle.deviceId.length > 0
+    && handle.deviceId.length <= 320
+    && typeof handle.installationId === 'string'
+    && handle.installationId.length > 0
+    && handle.installationId.length <= 320
+    && typeof handle.isolationContextId === 'string'
+    && handle.isolationContextId.length > 0
+    && handle.isolationContextId.length <= 320
+    && typeof handle.isolationProofId === 'string'
+    && handle.isolationProofId.length > 0
+    && handle.isolationProofId.length <= 160
+    && typeof handle.cookieStoreId === 'string'
+    && handle.cookieStoreId.length > 0
+    && handle.cookieStoreId.length <= 320
+    && typeof handle.origin === 'string'
+    && handle.origin.length > 0
+    && handle.origin.length <= 8_192
+    && typeof handle.grantId === 'string'
+    && handle.grantId.length > 0
+    && handle.grantId.length <= 160
+    && typeof handle.fingerprint === 'string'
+    && /^hmac-sha256:[a-f0-9]{64}$/.test(handle.fingerprint)
+    && (handle.accountLabel === undefined
+      || (typeof handle.accountLabel === 'string' && handle.accountLabel.length <= 80))
+    && Boolean(handle.target)
+    && Number.isSafeInteger(handle.target?.tabId)
+    && Number(handle.target?.tabId) > 0
+    && Number.isSafeInteger(handle.target?.frameId)
+    && Number(handle.target?.frameId) >= 0
+    && typeof handle.target?.documentId === 'string'
+    && handle.target.documentId.length > 0
+    && handle.target.documentId.length <= 160
+    && Boolean(handle.authentication)
+    && ['authenticated', 'unauthenticated', 'unknown'].includes(String(handle.authentication?.status))
+    && Number.isSafeInteger(handle.authentication?.cookieCount)
+    && Number(handle.authentication?.cookieCount) >= 0
+    && Number.isSafeInteger(handle.authentication?.storageEntryCount)
+    && Number(handle.authentication?.storageEntryCount) >= 0
+    && Array.isArray(handle.authentication?.authCookieNames)
+    && handle.authentication.authCookieNames.length <= 100
+    && handle.authentication.authCookieNames.every((name) => typeof name === 'string' && name.length <= 500)
+    && Array.isArray(handle.authentication?.authStorageKeys)
+    && handle.authentication.authStorageKeys.length <= 100
+    && handle.authentication.authStorageKeys.every((key) => typeof key === 'string' && key.length <= 520)
+    && typeof handle.createdAt === 'number'
+    && typeof handle.expiresAt === 'number'
+    && handle.expiresAt > handle.createdAt
+    && handle.expiresAt - handle.createdAt <= AUTH_CONTEXT_TTL_MS;
+}
+
+function purgeHandles(now = Date.now(), reserve = 0): boolean {
+  let changed = false;
+  for (const [id, handle] of handles) {
+    if (handle.expiresAt <= now) {
+      handles.delete(id);
+      changed = true;
+    }
+  }
+  while (handles.size > MAX_AUTH_CONTEXTS - reserve) {
+    const oldest = handles.keys().next().value as string | undefined;
+    if (!oldest) break;
+    handles.delete(oldest);
+    changed = true;
+  }
+  return changed;
+}
+
+async function loadHandles(): Promise<void> {
+  if (handlesLoaded) return;
+  handlesLoaded = true;
+  try {
+    const stored = await browser.storage.session.get(STORAGE_KEY);
+    const values = stored[STORAGE_KEY];
+    if (!Array.isArray(values)) return;
+    for (const value of values.slice(-MAX_AUTH_CONTEXTS)) {
+      if (validStoredHandle(value)) handles.set(value.id, value);
+    }
+    purgeHandles();
+  } catch {
+    // Keep the bounded memory registry on adapters without storage.session.
+  }
+}
+
+async function saveHandles(): Promise<void> {
+  try {
+    const retained: BrowserAuthContextHandle[] = [];
+    for (const handle of [...handles.values()].reverse()) {
+      const candidate = [handle, ...retained];
+      if (new TextEncoder().encode(JSON.stringify(candidate)).byteLength > MAX_AUTH_CONTEXT_STORAGE_BYTES) break;
+      retained.unshift(handle);
+    }
+    handles.clear();
+    for (const handle of retained) handles.set(handle.id, handle);
+    await browser.storage.session.set({
+      [STORAGE_KEY]: retained,
+    });
+  } catch {
+    // Keep the bounded memory registry on adapters without storage.session.
+  }
+}
+
+function isolationContext(
+  contexts: BrowserIsolationContext[],
+  isolationContextId: string | undefined,
+): BrowserIsolationContext | undefined {
+  return contexts.find((context) => context.contextId === isolationContextId);
+}
+
+export interface CapturedAuthContextSnapshot {
+  deviceId: string;
+  installationId: string;
+  isolationContextId: string;
+  cookieStoreId: string;
+  origin: string;
+  target: BrowserTarget & { documentId: string };
+  fingerprint: string;
+  authentication: BrowserAuthContextHandle['authentication'];
+}
+
+type AuthContextBinding = Pick<
+  BrowserAuthContextHandle,
+  | 'deviceId'
+  | 'installationId'
+  | 'isolationContextId'
+  | 'cookieStoreId'
+  | 'origin'
+  | 'target'
+  | 'fingerprint'
+>;
+
+export async function captureAuthContextSnapshot(
+  target: BrowserTarget,
+): Promise<CapturedAuthContextSnapshot> {
+  const inspection = await inspectBrowserIsolation([target.tabId]);
+  const tab = inspection.tabs[0];
+  const context = isolationContext(inspection.contexts, tab?.isolationContextId);
+  if (!tab || !context?.cookieStoreId || context.level === 'none') {
+    throw new ExtensionError('isolation_unresolved', '目标页面没有可用的隔离上下文，不能创建认证快照');
+  }
+  const pageContext = await capturePageContext(
+    { includeDom: false, includeStorage: true, includeCookies: true },
+    target,
+  );
+  if (!pageContext.target.documentId) {
+    throw new ExtensionError('stale_document', '目标页面缺少稳定 document 标识');
+  }
+  const state = await getState();
+  const deviceId = state.bridge.pairedEngine?.deviceId;
+  if (!deviceId) throw new ExtensionError('bridge_disconnected', '插件尚未与 Yak 引擎配对');
+  const cookies = pageContext.cookies || [];
+  const storage = authenticationStorageEntries(pageContext);
+  return {
+    deviceId,
+    installationId: state.bridge.installationId,
+    isolationContextId: context.contextId,
+    cookieStoreId: context.cookieStoreId,
+    origin: new URL(pageContext.document.url).origin,
+    target: {
+      tabId: pageContext.target.tabId,
+      frameId: pageContext.target.frameId,
+      documentId: pageContext.target.documentId,
+    },
+    fingerprint: await authenticationFingerprint(pageContext, hmac),
+    authentication: {
+      status: pageContext.authentication.status,
+      cookieCount: cookies.length,
+      storageEntryCount: storage.length,
+      authCookieNames: cookies
+        .filter((cookie) => authRelated(cookie.name))
+        .map((cookie) => cookie.name)
+        .slice(0, 100),
+      authStorageKeys: storage
+        .filter((entry) => authRelated(entry.key))
+        .map((entry) => `${entry.area}:${entry.key}`)
+        .slice(0, 100),
+    },
+  };
+}
+
+export async function validateAuthContextBinding(binding: AuthContextBinding): Promise<void> {
+  const state = await getState();
+  if (state.bridge.pairedEngine?.deviceId !== binding.deviceId
+    || state.bridge.installationId !== binding.installationId) {
+    throw new ExtensionError('auth_context_stale', '插件安装身份或配对引擎已经变化');
+  }
+  const current = await captureAuthContextSnapshot(binding.target);
+  if (current.isolationContextId !== binding.isolationContextId
+    || current.cookieStoreId !== binding.cookieStoreId) {
+    throw new ExtensionError('auth_context_stale', '目标页面的 Cookie Store 或隔离上下文已经变化');
+  }
+  if (current.target.documentId !== binding.target.documentId
+    || current.origin !== binding.origin
+    || current.fingerprint !== binding.fingerprint) {
+    throw new ExtensionError('auth_context_stale', '目标文档、来源或认证材料已经变化');
+  }
+}
+
+export async function captureAuthContextHandle(input: {
+  slotId: 'left' | 'right';
+  accountLabel?: string;
+  isolationProofId: string;
+  target: BrowserTarget;
+  grantId: string;
+  grantExpiresAt: number;
+}): Promise<BrowserAuthContextHandle> {
+  await loadHandles();
+  const proof = await getBrowserIsolationProof(input.isolationProofId);
+  if (proof.level === 'none') {
+    throw new ExtensionError('isolation_unresolved', '当前证明没有建立两个身份的隔离关系，不能创建认证句柄');
+  }
+  const expectedTabId = input.slotId === 'left' ? proof.leftTabId : proof.rightTabId;
+  if (input.target.tabId !== expectedTabId) {
+    throw new ExtensionError('target_denied', '认证上下文目标与隔离证明中的身份槽位不一致');
+  }
+  const expectedContextId = input.slotId === 'left'
+    ? proof.leftContextId
+    : proof.rightContextId;
+  const snapshot = await captureAuthContextSnapshot(input.target);
+  if (snapshot.isolationContextId !== expectedContextId) {
+    throw new ExtensionError('isolation_stale', '目标页面的隔离上下文已经变化，请重新执行预检');
+  }
+  const now = Date.now();
+  const handle: BrowserAuthContextHandle = {
+    version: 1,
+    id: crypto.randomUUID(),
+    slotId: input.slotId,
+    accountLabel: input.accountLabel?.trim().slice(0, 80) || undefined,
+    ...snapshot,
+    isolationProofId: proof.id,
+    grantId: input.grantId,
+    createdAt: now,
+    expiresAt: Math.min(now + AUTH_CONTEXT_TTL_MS, proof.expiresAt, input.grantExpiresAt),
+  };
+  if (handle.expiresAt <= now) throw new ExtensionError('grant_expired', '共享会话或隔离证明已经过期');
+  purgeHandles(now, 1);
+  handles.set(handle.id, handle);
+  await saveHandles();
+  return handle;
+}
+
+export async function getAuthContextHandle(id: string, grantId: string): Promise<BrowserAuthContextHandle> {
+  await loadHandles();
+  if (purgeHandles()) await saveHandles();
+  const handle = handles.get(id);
+  if (!handle || handle.grantId !== grantId) {
+    throw new ExtensionError('auth_context_stale', '认证上下文句柄不存在、已过期或不属于当前共享会话');
+  }
+  try {
+    const proof = await getBrowserIsolationProof(handle.isolationProofId);
+    if (proof.level === 'none') throw new ExtensionError('auth_context_stale', '身份隔离证明已经失效');
+    const expectedTabId = handle.slotId === 'left' ? proof.leftTabId : proof.rightTabId;
+    const expectedContextId = handle.slotId === 'left' ? proof.leftContextId : proof.rightContextId;
+    if (handle.target.tabId !== expectedTabId || handle.isolationContextId !== expectedContextId) {
+      throw new ExtensionError('auth_context_stale', '认证句柄与当前隔离证明不一致');
+    }
+    await validateAuthContextBinding(handle);
+    return handle;
+  } catch (error) {
+    handles.delete(id);
+    await saveHandles();
+    if (error instanceof ExtensionError && error.code === 'auth_context_stale') throw error;
+    const message = error instanceof Error ? error.message : String(error);
+    throw new ExtensionError('auth_context_stale', `认证上下文实时复核失败：${message}`);
+  }
+}