@canglongcl/dsh-web-review

Usage

pnpm install
pnpm gen-config      # regenerate machine-specific launch files after moving the repo
pnpm dev             # dsh web + the external client-bundle watcher
pnpm dev:acceptance  # persistent isolated profile/history + demo + bundle watcher
pnpm demo            # optional fixture page on port 5173

For repeat manual testing, pnpm dev:acceptance keeps its dedicated DSH home at .artifacts/acceptance/dsh-home. It creates or reuses a provider-free, settled 网页批注验收 history through the Harness persistence service; open that conversation and click its Demo link to enter Preview. Workspace state and other conversation history survive later restarts without changing the normal user profile. The first free port pair is saved to .artifacts/acceptance/ports.json, so Preview URLs remain valid on later restarts (DSH_WEB_PORT and DEMO_PORT can temporarily override it). On first initialization, an existing DSH credential file is copied only when no provider environment key is available, with mode 0600; the ignored acceptance directory never enters the package or repository history.

Open http://127.0.0.1:3090, connect the workspace whose source the agent may edit, then:

1. Open the Web Preview conversation tab.
2. Enter an absolute HTTP(S) URL and press Enter. The node face creates a short-lived session on a random Preview Origin, and the iframe loads only that Origin. Public, LAN, and loopback targets use the same isolated path.
3. Toggle Add page comments and click a page element. The solid-white host editor accepts a comment; Select opens the DOM hierarchy and Adjust expands text, fill, typography, dimensions, layout, spacing, border, and effects controls. Changes preview live on the page, and each changed row can restore its original value. Numeric fields that also accept CSS keywords keep free-form entry and expose common values such as auto, normal, and none from a trailing menu. The hierarchy toolbar moves to the first child, parent, previous sibling, or next sibling. Each compact label includes a small shortcut keycap. The focused preview canvas uses Enter, Backslash, Shift+Tab, and Tab for the same actions and briefly identifies the new target below the comment field. Inside the tree those shortcuts keep moving the selection, while arrow keys navigate and expand/collapse visible rows. Adjust begins with a compact Use UI optimization Skills disclosure. Its first expanded line points to /skills, followed by eight per-batch Skill checkboxes.
4. Confirm the editor. A numbered marker appears in the page and one compact annotation capsule appears above the stock composer. The preview is temporary and never edits workspace source.
5. Hover or keyboard-focus the capsule to inspect every target, comment, and source/selector hint. Clicking a row reopens that comment in Preview.
6. Wait for the capsule's Inject on send check, then send the normal prompt through the stock composer. The plugin never replaces the composer and never edits the prompt.
7. Refresh Preview after the agent edits the workspace source.

Annotation mode also provides a counted Send button. When the composer has a draft, it submits that draft through the stock input machine together with the prepared browser comments. With no draft, it sends the fixed localized request “Please apply the page comments to the frontend implementation.” because the stock input machine deliberately treats an empty draft as a no-op. After the send starts successfully, the conversation switches back to the Chat tab.

The agent may also provide a Markdown link to any HTTP(S) page. An ordinary click on that assistant link activates Preview and loads the target. Modifier clicks and links outside assistant rows retain normal browser behavior.