dsh-coding-sidebar 1.0.4 → 1.0.6

package/lib/index.js

@@ -3971,6 +3971,15 @@ function buildApi(ctx, ptyManager, agentPtyRegistry, resolved, terminalShell, ge
 				throw new SidebarError("settings-rejected", error instanceof Error ? error.message : String(error), 400);
 			}
 		},
+		"cdp.targets": async () => {
+			const res = await fetch("http://127.0.0.1:9223/json/list", { signal: AbortSignal.timeout(3e3) });
+			if (!res.ok) throw new SidebarError("cdp-down", `browser host unreachable (${res.status})`, 502);
+			return { targets: (await res.json()).filter((t) => t.type === "page").map((t) => ({
+				id: t.id,
+				url: t.url,
+				title: t.title
+			})) };
+		},
 		"browser.probe": async (payload) => {
 			const raw = requireString(payload, "url");
 			let parsed;

package/lib/types/client/LiveView.d.ts

@@ -0,0 +1 @@
+export declare function LiveView(): React.JSX.Element;

package/lib/types/client/api.d.ts

@@ -253,6 +253,14 @@ export declare const api: {
     /** Probe a URL's response headers (the sidebar browser's embeddability
      *  check; see the host's browser.probe route). */
     browserProbe: (url: string, signal?: AbortSignal) => Promise<BrowserProbeResult>;
+    /** Agent 浏览器宿主的 page target 列表（host 代理 CDP /json/list）。 */
+    cdpTargets: (signal?: AbortSignal) => Promise<{
+        targets: Array<{
+            id: string;
+            url: string;
+            title: string;
+        }>;
+    }>;
     /** External open for the file tree's "open with" menu: reveal a path in
      *  the OS file manager, or hand a custom-scheme URL (vscode://, cursor://,
      *  zed://, custom editors) to its registered handler. The host launches

package/lib/types/client/locales.d.ts

@@ -244,6 +244,12 @@ export declare const zh: {
     browserBack: string;
     browserForward: string;
     browserStart: string;
+    browserLive: string;
+    browserLiveFree: string;
+    browserLiveConnecting: string;
+    browserLiveDown: string;
+    browserLiveTargetNone: string;
+    browserLiveFollowLatest: string;
     browserBlockedScheme: string;
     browserBlockedLoopback: string;
     browserInvalid: string;

package/lib/types/wire.d.ts

@@ -6,7 +6,7 @@
  */
 import type { SidebarHttpRequest, SidebarHttpResponse } from './context-types.ts';
 /** Machine-readable error codes of the sidebar API. */
-export type SidebarErrorCode = 'bad-request' | 'not-found' | 'forbidden' | 'method-error' | 'too-large' | 'fs-error' | 'git-error' | 'pty-error' | 'pty-deps-missing' | 'job-error' | 'sidechat-error' | 'subagents-unavailable' | 'settings-rejected' | 'settings-conflict' | 'internal';
+export type SidebarErrorCode = 'bad-request' | 'not-found' | 'forbidden' | 'method-error' | 'too-large' | 'fs-error' | 'git-error' | 'pty-error' | 'pty-deps-missing' | 'job-error' | 'cdp-down' | 'sidechat-error' | 'subagents-unavailable' | 'settings-rejected' | 'settings-conflict' | 'internal';
 /** One API failure with its wire code and HTTP status. */
 export declare class SidebarError extends Error {
     readonly code: SidebarErrorCode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-coding-sidebar",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "DSH web plugin: a VSCode-like right sidebar (explorer / editor / terminal / git / browser), isolated per conversation session. Exposes the betterSidebar service for other plugins to register sidebar tabs and file viewers. KCoder-maintained fork of DSH-better-sidebar 0.17.2 (bottom panel removed, upstream-decoupled release line).",
   "type": "module",
   "repository": {

package/src/client/BrowserView.tsx

@@ -16,7 +16,7 @@
  * address-bar navigations (in-frame link clicks are cross-origin and
  * invisible — a documented limitation).
  */
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import {
   IconChevronLeftOutline14,
   IconChevronRightOutline14,
@@ -24,12 +24,13 @@ import {
   IconRefreshOutline14,
   IconWarningOutline16,
 } from '@deepseek-ai/dsh-client-ui-primitives'
-import { VscLinkExternal } from 'react-icons/vsc'
+import { VscLinkExternal, VscRemoteExplorer } from 'react-icons/vsc'
 import { api } from './api.ts'
 import { embeddabilityOf, isAllowedLoopbackUrl, normalizeBrowserUrl } from './browser.ts'
 import { patchTab } from './state.ts'
 import { SandboxStatusBar } from './SandboxStatusBar.tsx'
 import { t } from './locales.ts'
+import { LiveView } from './LiveView.tsx'
 import type { TabComponentProps } from './service.ts'
 import css from './sidebar.module.css'
 
@@ -80,7 +81,7 @@ export function iframeSandboxFor(url: string | undefined, allowedLoopback: strin
 }
 
 export function BrowserView(props: TabComponentProps) {
-  const { store, tab } = props
+  const { store, tab, ctx } = props
   // The current address (initialized from the persisted tab.path so a
   // reload restores the visited page).
   const [url, setUrl] = useState<string | undefined>(tab.path)
@@ -101,6 +102,9 @@ export function BrowserView(props: TabComponentProps) {
   const [embedBlocked, setEmbedBlocked] = useState<string | null>(null)
   /** The user asked to load the refused site anyway (keeps the plain iframe). */
   const [forceEmbed, setForceEmbed] = useState(false)
+  /** Agent 实况模式（CDP screencast）：开启后本 tab 只显示 agent 无头
+   *  浏览器的实况画面，地址栏/iframe 暂停。会话态开关，不持久化。 */
+  const [live, setLive] = useState(false)
 
   // Probe every navigation (address bar, history, restored path): when the
   // target forbids embedding, show the reason + open-in-browser instead of
@@ -117,6 +121,32 @@ export function BrowserView(props: TabComponentProps) {
     return () => { cancelled = true }
   }, [url])
 
+  // Agent 实况自动切换(2026-09-12):非实况态轮询浏览器宿主的 page
+  // target——出现 agent 页面(非 about: 空页)即自动开实况并把浏览器 tab
+  // 顶到前台。一次性:首次自动切换后不再抢控制权(用户手动关掉实况
+  // 也不会被再次强制打开)。
+  const autoRaised = useRef(false)
+  useEffect(() => {
+    if (live || autoRaised.current) return
+    const timer = setInterval(async () => {
+      if (autoRaised.current) return
+      try {
+        const { targets: list } = await api.cdpTargets()
+        const agentPages = list.filter((t) => t.url !== '' && !t.url.startsWith('about:'))
+        const had = autoRaised.current
+        if (agentPages.length > 0 && !had) {
+          autoRaised.current = true
+          setLive(true)
+          try {
+            const better = (ctx as unknown as { betterSidebar?: { openTab?: (r: { type: string }) => unknown } }).betterSidebar
+            better?.openTab?.({ type: 'browser' })
+          } catch { /* 顶起失败:实况仍已在 tab 内容里生效 */ }
+        }
+      } catch { /* 宿主未起:静默等下次轮询 */ }
+    }, 3000)
+    return () => { clearInterval(timer) }
+  }, [live, ctx])
+
   const persist = (nextUrl: string): void => {
     let host = nextUrl
     try { host = new URL(nextUrl).hostname } catch { /* keep the URL as title */ }
@@ -212,6 +242,16 @@ export function BrowserView(props: TabComponentProps) {
         >
           <IconLinkOutline14 />
         </button>
+        <button
+          type="button"
+          className={css.iconButton}
+          aria-label={t('browserLive')}
+          title={t('browserLive')}
+          aria-pressed={live}
+          onClick={() => { setLive(value => !value) }}
+        >
+          <VscRemoteExplorer size={15} />
+        </button>
         <button
           type="button"
           className={css.iconButton}
@@ -233,7 +273,9 @@ export function BrowserView(props: TabComponentProps) {
         onUnlock={() => { setLocalUnlock(true) }}
         onRestore={() => { setLocalUnlock(false) }}
       />
-      {url === undefined ? (
+      {live ? (
+        <LiveView />
+      ) : url === undefined ? (
         <div className={css.browserStart}>{t('browserStart')}</div>
       ) : embedBlocked !== null && !forceEmbed ? (
         <BrowserEmbedBlocked

package/src/client/LiveView.tsx

@@ -0,0 +1,229 @@
+/**
+ * Agent 浏览器实况（CDP screencast + 输入回传，2026-09-12 方案 2）。
+ *
+ * 数据面：KCoder 桌面端 browser-host 维护一个无头 Chromium（固定 CDP
+ * 转发地址 127.0.0.1:9223，与 playwright MCP `--cdp-endpoint` 共用）。
+ * 本组件作为第二个 CDP 客户端：
+ * - target 列表经宿主代理 `/sidebar/api`（CDP HTTP 无 CORS 头）；
+ * - screencast/输入走 renderer 直连 `ws://127.0.0.1:9223/devtools/page/<id>`
+ *   （WebSocket 不受 CORS 约束，宿主未设 CSP）。
+ *
+ * 连接模型：`attachedId`（用户显式选择）优先，否则自动跟随「最新创建的
+ * page target」；连接按 effectiveId 建立与重建，列表仅在内容变化时更新
+ * state（JSON 比对），避免轮询引起重连抖动。
+ *
+ * 交互：screencast 帧绘到 canvas；指针/滚轮按 canvas→viewport 比例回传
+ * （Input.dispatchMouseEvent）；可打印字符经 Input.insertText，控制键走
+ * rawKeyDown/keyUp。视口统一 1280×800（Emulation.setDeviceMetricsOverride），
+ * canvas 等比缩放显示。
+ */
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { api } from './api.ts'
+import { t } from './locales.ts'
+
+/** 与 KCoder desktop/main/browser-host.ts 的 BROWSER_HOST_PORT 一致。 */
+const CDP_WS = 'ws://127.0.0.1:9223'
+/** 实况视口（CDP 侧强制，帧与输入坐标以此为基准）。 */
+const VIEW_W = 1280
+const VIEW_H = 800
+
+type Target = { id: string; url: string; title: string }
+type Status = 'connecting' | 'live' | 'down' | 'idle'
+
+export function LiveView(): React.JSX.Element {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+  const wsRef = useRef<WebSocket | null>(null)
+  const [status, setStatus] = useState<Status>('connecting')
+  const [targets, setTargets] = useState<Target[]>([])
+  const [hostDown, setHostDown] = useState(false)
+  /** 用户显式钉住的 target（null = 自动跟随最新）。 */
+  const [pinnedId, setPinnedId] = useState<string | null>(null)
+  /** 连接代数：手动重连/换 target 时 +1。 */
+  const [epoch, setEpoch] = useState(0)
+
+  /* target 列表轮询(3s):内容变化才更新 state,避免无谓重连 */
+  useEffect(() => {
+    let alive = true
+    const poll = async (): Promise<void> => {
+      try {
+        const { targets: list } = await api.cdpTargets()
+        if (!alive) return
+        setHostDown(false)
+        setTargets((prev) => (JSON.stringify(prev) === JSON.stringify(list) ? prev : list))
+      } catch {
+        if (alive) setHostDown(true)
+      }
+    }
+    void poll()
+    const timer = setInterval(() => { void poll() }, 3000)
+    return () => { alive = false; clearInterval(timer) }
+  }, [])
+
+  /** 实际附加的 target:id 钉住且存活 → 它;否则自动跟随最新页。 */
+  const effectiveId = useMemo<string | null>(() => {
+    if (pinnedId !== null && targets.some((tg) => tg.id === pinnedId)) return pinnedId
+    return targets.length > 0 ? targets[targets.length - 1]!.id : null
+  }, [pinnedId, targets])
+
+  /* 连接与 screencast(按 effectiveId 建立,变化即重连) */
+  useEffect(() => {
+    if (effectiveId === null) { setStatus('idle'); return }
+    let cancelled = false
+    let socket: WebSocket | null = null
+    let msgId = 0
+
+    setStatus('connecting')
+    socket = new WebSocket(`${CDP_WS}/devtools/page/${effectiveId}`)
+    wsRef.current = socket
+
+    const send = (method: string, params?: Record<string, unknown>): void => {
+      if (socket !== null && socket.readyState === WebSocket.OPEN) {
+        socket.send(JSON.stringify({ id: ++msgId, method, params: params ?? {} }))
+      }
+    }
+
+    const draw = (data: string): void => {
+      const el = canvasRef.current
+      if (el === null || cancelled) return
+      const img = new Image()
+      img.onload = () => {
+        if (cancelled) return
+        el.width = img.naturalWidth
+        el.height = img.naturalHeight
+        el.getContext('2d')?.drawImage(img, 0, 0)
+      }
+      img.src = `data:image/jpeg;base64,${data}`
+    }
+
+    socket.onopen = () => {
+      if (cancelled) return
+      setStatus('live')
+      send('Page.enable')
+      send('Runtime.enable')
+      send('Emulation.setDeviceMetricsOverride', {
+        width: VIEW_W, height: VIEW_H, deviceScaleFactor: 1, mobile: false,
+      })
+      send('Page.startScreencast', {
+        format: 'jpeg', quality: 62, maxWidth: VIEW_W, maxHeight: VIEW_H, everyNthFrame: 1,
+      })
+    }
+    socket.onmessage = (event) => {
+      const msg = JSON.parse(event.data as string) as {
+        id?: number
+        method?: string
+        params?: { data?: string; screencastFrameId?: string }
+      }
+      if (msg.method === 'Page.screencastFrame') {
+        const p = msg.params ?? {}
+        if (typeof p.data === 'string') draw(p.data)
+        if (typeof p.screencastFrameId === 'string') {
+          send('Page.screencastFrameAck', { screencastFrameId: p.screencastFrameId })
+        }
+      }
+    }
+    socket.onclose = () => { if (!cancelled) setStatus('connecting') }
+    socket.onerror = () => { if (!cancelled) setStatus('down') }
+
+    return () => {
+      cancelled = true
+      socket?.close()
+      wsRef.current = null
+    }
+  }, [effectiveId])
+
+  /* 输入回传:坐标按 canvas 显示比例换算到 1280×800 视口 */
+  const sendInput = (method: string, params: Record<string, unknown>): void => {
+    wsRef.current?.send(JSON.stringify({ id: Math.floor(Math.random() * 1e9), method, params }))
+  }
+  const scaleOf = (el: HTMLCanvasElement): number => {
+    const shown = el.getBoundingClientRect().width
+    return shown > 0 ? VIEW_W / shown : 1
+  }
+  const posOf = (e: { clientX: number; clientY: number; currentTarget: HTMLCanvasElement }): { x: number; y: number } => {
+    const rect = e.currentTarget.getBoundingClientRect()
+    const k = scaleOf(e.currentTarget)
+    return { x: (e.clientX - rect.left) * k, y: (e.clientY - rect.top) * k }
+  }
+  const posOfWheel = (e: React.WheelEvent<HTMLCanvasElement>): { x: number; y: number } => {
+    const rect = e.currentTarget.getBoundingClientRect()
+    const k = scaleOf(e.currentTarget)
+    return { x: (e.clientX - rect.left) * k, y: (e.clientY - rect.top) * k }
+  }
+  const onPointerDown = (e: React.PointerEvent<HTMLCanvasElement>): void => {
+    const p = posOf(e)
+    sendInput('Input.dispatchMouseEvent', { type: 'mousePressed', x: p.x, y: p.y, button: 'left', clickCount: 1 })
+  }
+  const onPointerUp = (e: React.PointerEvent<HTMLCanvasElement>): void => {
+    const p = posOf(e)
+    sendInput('Input.dispatchMouseEvent', { type: 'mouseReleased', x: p.x, y: p.y, button: 'left', clickCount: 1 })
+  }
+  const onPointerMove = (e: React.PointerEvent<HTMLCanvasElement>): void => {
+    if (e.buttons === 0) return
+    const p = posOf(e)
+    sendInput('Input.dispatchMouseEvent', { type: 'mouseMoved', x: p.x, y: p.y, button: 'left' })
+  }
+  const onWheel = (e: React.WheelEvent<HTMLCanvasElement>): void => {
+    const p = posOf(e)
+    sendInput('Input.dispatchMouseEvent', { type: 'mouseWheel', x: p.x, y: p.y, deltaX: e.deltaX, deltaY: e.deltaY })
+  }
+  const onKeyDown = (e: React.KeyboardEvent<HTMLCanvasElement>): void => {
+    const vk: Record<string, number> = {
+      Enter: 13, Backspace: 8, Tab: 9, Escape: 27,
+      ArrowUp: 38, ArrowDown: 40, ArrowLeft: 37, ArrowRight: 39,
+    }
+    const code = vk[e.key]
+    if (code !== undefined) {
+      sendInput('Input.dispatchKeyEvent', { type: 'rawKeyDown', windowsVirtualKeyCode: code, key: e.key })
+      sendInput('Input.dispatchKeyEvent', { type: 'keyUp', windowsVirtualKeyCode: code, key: e.key })
+      return
+    }
+    if (e.key.length === 1) sendInput('Input.insertText', { text: e.key })
+  }
+
+  const statusText = hostDown || status === 'down'
+    ? t('browserLiveDown')
+    : status === 'live'
+      ? (targets.find((tg) => tg.id === effectiveId)?.url ?? t('browserLiveTargetNone'))
+      : effectiveId === null
+        ? t('browserLiveTargetNone')
+        : t('browserLiveConnecting')
+
+  return (
+    <div className="browserLive">
+      <div className="browserLiveStatus">
+        <button type="button" onClick={() => { setEpoch(e => e + 1) }}>{t('refresh')}</button>
+        <select
+          className="browserLiveTarget"
+          value={effectiveId ?? ''}
+          onChange={(e) => { setPinnedId(e.target.value === '' ? null : e.target.value) }}
+        >
+          <option value="">{t('browserLiveFollowLatest')}</option>
+          {targets.map((tg) => (
+            <option key={tg.id} value={tg.id}>{tg.title || tg.url}</option>
+          ))}
+        </select>
+        <span>{statusText}</span>
+      </div>
+      {effectiveId !== null && status !== 'idle'
+        ? (
+        <canvas
+          ref={canvasRef}
+          className="browserLiveCanvas"
+          width={VIEW_W}
+          height={VIEW_H}
+          tabIndex={0}
+          onPointerDown={onPointerDown}
+          onPointerUp={onPointerUp}
+          onPointerMove={onPointerMove}
+          onWheel={onWheel}
+          onKeyDown={onKeyDown}
+        />
+        )
+        : (
+        <div className="browserStart">
+          {hostDown ? t('browserLiveDown') : t('browserLiveTargetNone')}
+        </div>
+        )}
+    </div>
+  )
+}

package/src/client/api.ts

@@ -316,6 +316,9 @@ export const api = {
    *  check; see the host's browser.probe route). */
   browserProbe: (url: string, signal?: AbortSignal) =>
     call<BrowserProbeResult>('browser.probe', { url }, signal),
+  /** Agent 浏览器宿主的 page target 列表（host 代理 CDP /json/list）。 */
+  cdpTargets: (signal?: AbortSignal) =>
+    call<{ targets: Array<{ id: string; url: string; title: string }> }>('cdp.targets', {}, signal),
   /** External open for the file tree's "open with" menu: reveal a path in
    *  the OS file manager, or hand a custom-scheme URL (vscode://, cursor://,
    *  zed://, custom editors) to its registered handler. The host launches

package/src/client/locales.ts

@@ -245,6 +245,12 @@ export const zh = {
   browserBack: '后退',
   browserForward: '前进',
   browserStart: '输入网址开始浏览（沙箱模式）',
+  browserLive: 'Agent 实况',
+  browserLiveFree: '自由浏览',
+  browserLiveConnecting: '连接 agent 浏览器宿主…',
+  browserLiveDown: '宿主不可达：确认 KCoder 已启动（端口 9223）',
+  browserLiveTargetNone: '暂无打开的页面——agent 发起浏览后此处实时显示',
+  browserLiveFollowLatest: '跟随最新页面',
   browserBlockedScheme: '已阻止：仅支持 http/https 链接',
   browserBlockedLoopback: '已阻止：不允许在浏览器中访问本机或内部地址',
   browserInvalid: '无效的网址',
@@ -575,6 +581,12 @@ export const en: Record<keyof typeof zh, string> = {
   browserBack: 'Back',
   browserForward: 'Forward',
   browserStart: 'Enter a URL to start browsing (sandbox mode)',
+  browserLive: 'Agent live',
+  browserLiveFree: 'Free browse',
+  browserLiveConnecting: 'connecting to the agent browser host…',
+  browserLiveDown: 'host unreachable: make sure KCoder is running (port 9223)',
+  browserLiveTargetNone: 'No open pages yet — they appear here live once the agent browses',
+  browserLiveFollowLatest: 'Follow latest',
   browserBlockedScheme: 'Blocked: only http/https URLs are allowed',
   browserBlockedLoopback: 'Blocked: local and internal addresses cannot be browsed here',
   browserInvalid: 'Invalid URL',

package/src/client/sidebar.module.css

@@ -2362,3 +2362,35 @@ body[data-dsh-sidebar-dragging] .panel {
   0%, 60% { background: var(--dsw-alias-interactive-bg-hover); }
   100% { background: transparent; }
 }
+
+/* ═══ Agent 浏览器实况（CDP screencast，2026-09-12 方案 2）═══ */
+.browserLive {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 10px;
+  overflow: hidden;
+}
+.browserLiveStatus {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  opacity: 0.75;
+}
+.browserLiveCanvas {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  object-fit: contain;
+  border: 1px solid var(--dsw-alias-border-l, rgba(128, 128, 128, 0.25));
+  border-radius: 8px;
+  background: #fff;
+  cursor: crosshair;
+}
+.browserLiveTarget {
+  max-width: 260px;
+  font-size: 12px;
+}

package/src/index.ts

@@ -517,6 +517,16 @@ function buildApi(
     // probe is display-only (headers back to the caller), restricted to
     // http(s) non-loopback URLs with a hard timeout, and gated by the same
     // trust fence as every other route — a cross-site page cannot reach it.
+    'cdp.targets': async () => {
+      // Agent 浏览器宿主（KCoder 桌面端维护，固定 127.0.0.1:9223）的
+      // page target 列表。host 侧代理：CDP 端点无 CORS 头，renderer 直连
+      // /json/list 会被拦，WS（screencast/输入）则由 renderer 直连。
+      // 端口/地址是编译期常量，无用户输入，无 SSRF 面。
+      const res = await fetch('http://127.0.0.1:9223/json/list', { signal: AbortSignal.timeout(3000) })
+      if (!res.ok) throw new SidebarError('cdp-down', `browser host unreachable (${res.status})`, 502)
+      const list = (await res.json()) as Array<{ id: string; type: string; title: string; url: string }>
+      return { targets: list.filter((t) => t.type === 'page').map((t) => ({ id: t.id, url: t.url, title: t.title })) }
+    },
     'browser.probe': async (payload) => {
       const raw = requireString(payload, 'url')
       let parsed: URL

package/src/wire.ts

@@ -18,6 +18,7 @@ export type SidebarErrorCode =
   | 'pty-error'
   | 'pty-deps-missing'
   | 'job-error'
+  | 'cdp-down'
   | 'sidechat-error'
   | 'subagents-unavailable'
   | 'settings-rejected'