dsh-coding-sidebar 1.0.3 → 1.0.5

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/SandboxStatusBar.tsx

@@ -1,15 +1,18 @@
 /**
- * The live sandbox status row of the two built-in web surfaces (HTML
- * preview and the browser tab): a green "sandbox on" state with a one-tap
- * TEMPORARY unlock, or a RED "sandbox off" state (global setting or the
- * temporary unlock) with a restore action.
+ * The live sandbox status row of the built-in browser tab: a green
+ * "sandbox on" state with a one-tap TEMPORARY unlock, or a RED "sandbox
+ * off" state (global setting or the temporary unlock) with a restore
+ * action.
  *
  * The temporary unlock is component state only — it never writes the
- * global side card setting (`htmlViewerNoSandbox` / `browserNoSandbox`);
- * it lasts until the surface unmounts (tab switch / file switch) or the
- * user restores the sandbox from the row. When the global setting already
- * drops the sandbox, no unlock/restore action is offered (changing the
- * global setting is the settings page's job) — the red warning stands.
+ * global side card setting (`browserNoSandbox`); it lasts until the
+ * surface unmounts (tab switch) or the user restores the sandbox from the
+ * row. When the global setting already drops the sandbox, no
+ * unlock/restore action is offered (changing the global setting is the
+ * settings page's job) — the red warning stands.
+ *
+ * (v1.0.4: the HTML preview surface was retired with the file-viewer line;
+ * this row now serves the browser tab only.)
  */
 import clsx from 'clsx'
 import { t } from './locales.ts'

package/src/client/SideCardSection.tsx

@@ -12,8 +12,9 @@
  *    external plugins alike), laid out in a responsive grid that wraps
  *    several cards per row — icon chip + title + type id, clicked to toggle
  *    the switch persisted in `prefs.tabsEnabled[id]`.
- *  - 文件预览: one SMALL CARD per REGISTERED file viewer — icon chip + title
- *    + the extensions it covers, clicked to toggle `prefs.viewersEnabled[id]`.
+ *
+ * (v1.0.4: the 文件预览 viewer inventory was retired with the file-viewer
+ * registry — file preview is the host's job now.)
  *
  * Every group lives in a container card (the DSH PluginCard recipe: l2
  * hairline, 16px radius, layer-3 fill) with a heading and an inventory count
@@ -64,14 +65,13 @@ import {
 } from '../prefs-shared.ts'
 import { api } from './api.ts'
 import { parsePrefs } from './prefs.ts'
-import { AddPluginModal, type PluginKind } from './add-plugin-modal.tsx'
+import { AddPluginModal } from './add-plugin-modal.tsx'
 import { t } from './locales.ts'
 import { parseDesktopEnv } from './desktop-env.ts'
 import { getShellPreset, getShellPresets } from './shell-presets.ts'
 import type { SidebarStore } from './state.ts'
 import type {
   BetterSidebarService,
-  FileViewerDescriptor,
   SidebarSettingsRenderProps,
   SidebarSettingToggle,
   TabDescriptor,
@@ -124,13 +124,8 @@ function titleBarSchemeValue(prefs: SidebarPrefs): string {
   return preset !== undefined ? `preset:${preset.id}` : 'auto'
 }
 
-/** Viewer inventory order: priority desc (the catch-all `code` comes last). */
-function viewerOrder(a: FileViewerDescriptor, b: FileViewerDescriptor): number {
-  return (b.priority ?? 0) - (a.priority ?? 0)
-}
-
 /** Whether a feature declares any secondary settings (gear button shows). */
-function hasSettings(feature: TabDescriptor | FileViewerDescriptor): boolean {
+function hasSettings(feature: TabDescriptor): boolean {
   const settings = feature.settings
   return settings !== undefined && (
     (settings.toggles?.length ?? 0) > 0
@@ -139,9 +134,9 @@ function hasSettings(feature: TabDescriptor | FileViewerDescriptor): boolean {
   )
 }
 
-/** A feature's display name (viewers fall back to their id). */
-function featureNameOf(feature: TabDescriptor | FileViewerDescriptor): string {
-  return textOf('title' in feature ? feature.title : undefined) || feature.id
+/** A feature's display name. */
+function featureNameOf(feature: TabDescriptor): string {
+  return textOf(feature.title) || feature.id
 }
 
 /**
@@ -491,7 +486,7 @@ function SelectRow(props: {
 }
 
 /**
- * The secondary settings popup body of one feature (tab or viewer):
+ * The secondary settings popup body of one registered tab:
  * - the host-prefs `toggles` rows, then the plugin-owned `pluginToggles`
  *   rows (their values live in `pluginSettings[feature.id]`, projected onto
  *   the prefs face so the shared row renderer reads them);
@@ -501,7 +496,7 @@ function SelectRow(props: {
  *   open-behavior picker) and still ship a custom configuration area.
  */
 export function SettingsBody(props: {
-  feature: TabDescriptor | FileViewerDescriptor
+  feature: TabDescriptor
   prefs: SidebarPrefs
   store: SidebarStore
   service: BetterSidebarService
@@ -576,19 +571,18 @@ export function SideCardSection({ store, service }: SideCardSectionProps) {
   const [widthDraft, setWidthDraft] = useState<string>(String(store.getPrefs().defaultWidthPercent))
   const [error, setError] = useState<string | null>(null)
   // Which feature's secondary settings popup is open (null = closed).
-  const [settingsFor, setSettingsFor] = useState<TabDescriptor | FileViewerDescriptor | null>(null)
+  const [settingsFor, setSettingsFor] = useState<TabDescriptor | null>(null)
   // Whether the position-compat strip popup (the gear on the 常规 row) is open.
   const [stripSettingsOpen, setStripSettingsOpen] = useState(false)
   // The parsed desktop environment (URL stamps — see desktop-env.ts). Used
   // ONLY to badge matching presets in the scheme dropdown ("已检测");
   // nothing is auto-applied.
   const detectedEnv = useMemo(() => parseDesktopEnv(), [])
-  // Whether the "add plugin" modal (a dashed card at the end of the
-  // 侧边栏内容 / 文件预览 grids) is open, and for which extension point
-  // (null = closed).
-  const [addPluginsOpen, setAddPluginsOpen] = useState<PluginKind | null>(null)
+  // Whether the "add plugin" modal (the dashed card at the end of the
+  // 侧边栏内容 grid) is open.
+  const [addPluginsOpen, setAddPluginsOpen] = useState(false)
   // The LATEST optimistic prefs, kept in sync with the state. Nested-map
-  // merges (tabsEnabled / viewersEnabled / pluginSettings) MUST build from
+  // merges (tabsEnabled / pluginSettings) MUST build from
   // this ref, not from the render-time `prefs`: two same-tick writes (e.g.
   // a settings panel updating several plugin keys at once) would otherwise
   // both spread the stale map and the later patch would drop the earlier
@@ -596,14 +590,12 @@ export function SideCardSection({ store, service }: SideCardSectionProps) {
   const optimisticRef = useRef(prefs)
   useEffect(() => { optimisticRef.current = prefs }, [prefs])
 
-  // The declarative inventory: the registered tab types and file viewers.
-  // Local state + service.subscribe (registry changes are rare — plugin
-  // load/unload — so a plain effect is enough; no external-store ceremony).
+  // The declarative inventory: the registered tab types. Local state +
+  // service.subscribe (registry changes are rare — plugin load/unload — so
+  // a plain effect is enough; no external-store ceremony).
   const [tabs, setTabs] = useState<TabDescriptor[]>(() => [...service.getTabs()].sort(tabOrder))
-  const [viewers, setViewers] = useState<FileViewerDescriptor[]>(() => [...service.getFileViewers()].sort(viewerOrder))
   useEffect(() => service.subscribe(() => {
     setTabs([...service.getTabs()].sort(tabOrder))
-    setViewers([...service.getFileViewers()].sort(viewerOrder))
   }), [service])
 
   // The settings document revision (guards concurrent writes). A ref: commits
@@ -682,11 +674,6 @@ export function SideCardSection({ store, service }: SideCardSectionProps) {
     applyPref({ tabsEnabled: { ...optimisticRef.current.tabsEnabled, [id]: next } })
   }
 
-  /** Flip one per-viewer enable switch (merge into the viewersEnabled map). */
-  const onToggleViewer = (id: string, next: boolean): void => {
-    applyPref({ viewersEnabled: { ...optimisticRef.current.viewersEnabled, [id]: next } })
-  }
-
   /** Flip one declaratively-declared toggle (a SidebarPrefs boolean field). */
   const onToggleSetting = (toggle: SidebarSettingToggle, next: boolean): void => {
     applyPref({ [toggle.key]: next })
@@ -1001,7 +988,7 @@ export function SideCardSection({ store, service }: SideCardSectionProps) {
           <button
             type="button"
             className={clsx(css.card, css.addCard)}
-            onClick={() => { setAddPluginsOpen('tab') }}
+            onClick={() => { setAddPluginsOpen(true) }}
           >
             <span className={css.cardTop}>
               <span className={css.cardIconChip}>
@@ -1014,45 +1001,6 @@ export function SideCardSection({ store, service }: SideCardSectionProps) {
         </div>
       </div>
 
-      {/* 文件预览: one small card per registered file viewer. */}
-      <div className={css.group}>
-        <div className={css.groupHeading}>
-          <span>{t('settingsViewersTitle')}</span>
-          <span className={css.count}>{viewers.length}</span>
-        </div>
-        <div className={css.grid}>
-          {viewers.map(viewer => (
-            <Fragment key={viewer.id}>
-              {renderCard({
-                title: textOf(viewer.title) || viewer.id,
-                desc: viewer.exts.length === 0 ? t('settingsViewerCatchAll') : viewer.exts.join(' · '),
-                icon: iconOf(viewer.icon, 16),
-                enabled: prefs.viewersEnabled[viewer.id] !== false,
-                onToggle: (next) => { onToggleViewer(viewer.id, next) },
-                onOpenSettings: prefs.viewersEnabled[viewer.id] !== false && hasSettings(viewer)
-                  ? () => { setSettingsFor(viewer) }
-                  : undefined,
-              })}
-            </Fragment>
-          ))}
-          {/* The "add preview plugin" entry: dashed card opening the
-              FILE-PREVIEWER registration modal. */}
-          <button
-            type="button"
-            className={clsx(css.card, css.addCard)}
-            onClick={() => { setAddPluginsOpen('viewer') }}
-          >
-            <span className={css.cardTop}>
-              <span className={css.cardIconChip}>
-                <IconPlusOutline16 size={16} />
-              </span>
-              <span className={css.cardTitle}>{t('addPluginsViewerCard')}</span>
-            </span>
-            <span className={css.cardDesc}>{t('addPluginsViewerCardDesc')}</span>
-          </button>
-        </div>
-      </div>
-
       {/* The secondary settings popup: a feature's declared related settings
           as title/desc + switch rows in a wider-than-default Modal with a
           Done footer (Modal chrome is the app's own). Mounted only while a
@@ -1138,18 +1086,17 @@ export function SideCardSection({ store, service }: SideCardSectionProps) {
         </Modal>
       )}
 
-      {/* The "add plugin" modal (opened by the dashed cards above): declares
-          the extension point of the clicked kind, opens the GitHub topic,
-          and lists the matching recommended plugin catalog with per-entry
-          install buttons (the install flow opens a ~/.dsh terminal with
-          the command pre-typed; failures render inline here, in settings
-          only). Mounted only while open (Modal runs hooks unconditionally
-          — same SSR rule as the settings popup above). */}
-      {addPluginsOpen !== null && (
+      {/* The "add plugin" modal (opened by the dashed card above): declares
+          the tab extension point, opens the GitHub topic, and lists the
+          recommended plugin catalog with per-entry install buttons (the
+          install flow opens a ~/.dsh terminal with the command pre-typed;
+          failures render inline here, in settings only). Mounted only while
+          open (Modal runs hooks unconditionally — same SSR rule as the
+          settings popup above). */}
+      {addPluginsOpen && (
         <AddPluginModal
           service={service}
-          onClose={() => { setAddPluginsOpen(null) }}
-          kind={addPluginsOpen}
+          onClose={() => { setAddPluginsOpen(false) }}
         />
       )}