dsh-coding-sidebar 1.0.3 → 1.0.5

package/src/client/sidebar.module.css

@@ -1418,17 +1418,6 @@ body[data-dsh-sidebar-dragging] .panel {
   background: var(--dsw-alias-interactive-bg-hover);
 }
 
-/* The HTML preview iframe: fills the editor body. Route-src (never srcdoc)
-   so the frame is cross-origin by construction even if the sandbox
-   attribute is ever dropped; sandboxed by default (see TextEditor). */
-.editorHtml {
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-  border: none;
-  background: var(--dsw-alias-bg-base);
-}
-
 /* ── Browser tab ──────────────────────────────────────────────────────── */
 
 .browser {
@@ -1545,10 +1534,6 @@ body[data-dsh-sidebar-dragging] .panel {
   background: transparent;
 }
 
-.editorCmHidden {
-  display: none;
-}
-
 /* CodeMirror fills the pane; the theme supplies its own token palette
    (a designed dark theme, same policy as the xterm palette). */
 .editorCm :global(.cm-editor) {
@@ -1565,229 +1550,6 @@ body[data-dsh-sidebar-dragging] .panel {
   outline: none;
 }
 
-/* Preview / edit segmented toggle (markdown and other previewable files). */
-.editorModeToggle {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  padding: 2px;
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 6px;
-  background: var(--dsw-alias-bg-layer-1);
-}
-
-.editorModeButton {
-  padding: 2px 8px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--dsw-alias-label-tertiary);
-  font: var(--dsw-font-xxxs-11);
-  cursor: pointer;
-}
-
-.editorModeButton:hover {
-  color: var(--dsw-alias-label-primary);
-}
-
-.editorModeActive {
-  background: var(--dsw-alias-bg-base);
-  color: var(--dsw-alias-label-primary);
-}
-
-.editorImageWrap {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: auto;
-  padding: 12px;
-}
-
-.editorImage {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-}
-
-.editorMd {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 12px 16px;
-  font: var(--dsw-font-xs-13);
-}
-
-/* ── Mermaid diagram block (markdown preview, mermaid lazy chunk) ────────
-   Mirrors the md-code-block chrome the DSH CodeBlock renders, so a diagram
-   reads as a peer of the surrounding fences: hairline border, layer-2
-   header with the info string + copy action, layer-1 body. The SVG body is
-   static (no bindFunctions) and sanitized (no foreignObject/script/@attrs/
-   hrefs), so it carries no event surface beyond the copy button; the body
-   click opens the zoom modal on a sanitized clone. */
-
-.mermaidWrap {
-  margin: 6px 0;
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 6px;
-  background: var(--dsw-alias-bg-layer-1);
-  overflow: hidden;
-}
-
-.mermaidHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 6px;
-  padding: 4px 8px;
-  border-bottom: 1px solid var(--dsw-alias-border-l1);
-  background: var(--dsw-alias-bg-layer-2);
-}
-
-.mermaidInfo {
-  font: var(--dsw-font-xxxs-strong-11);
-  color: var(--dsw-alias-label-tertiary);
-}
-
-.mermaidCopy {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0 6px;
-  height: 20px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--dsw-alias-label-secondary);
-  font: var(--dsw-font-xxxs-11);
-  cursor: pointer;
-}
-
-.mermaidCopy:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-primary);
-}
-
-.mermaidBody {
-  display: flex;
-  justify-content: center;
-  padding: 10px;
-  overflow: auto;
-  cursor: zoom-in;
-}
-
-.mermaidBody :global(svg) {
-  max-width: 100%;
-  height: auto;
-}
-
-.mermaidError {
-  padding: 6px 10px;
-  border-bottom: 1px solid var(--dsw-alias-border-l1);
-  color: var(--dsw-alias-state-error-primary);
-  font: var(--dsw-font-xxxs-11);
-}
-
-/* The diagram source shown under a render error (helps fixing the fence). */
-.mermaidCode {
-  margin: 0;
-  padding: 8px 10px;
-  overflow: auto;
-  font: var(--dsw-font-xxxs-11);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-}
-
-/* The mermaid markdown container (single MarkdownText pass): a swapped
-   code block keeps its React-managed .md-code-block wrapper in the tree
-   (reconciliation safety), but the wrapper's own box is suppressed so only
-   the diagram chrome renders; the swapped-in host div flows as a block. */
-.mermaidMarkdown :global(.md-code-block[data-mermaid-processed]) {
-  display: contents;
-}
-
-/* ── Mermaid zoom modal (click-to-enlarge; portalled to document.body) ──
-   Fixed overlay above the DSH overlay stack (1000+), token-driven surface.
-   The stage centers the (sanitized, cloned) svg and the modal owns the
-   transform; the drag/zoom listeners live in the component, nothing here
-   targets global class names. */
-
-.mermaidModal {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: var(--dsw-alias-bg-mask-1);
-  backdrop-filter: blur(2px);
-}
-
-.mermaidModalToolbar {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  display: flex;
-  gap: 8px;
-  z-index: 10;
-}
-
-.mermaidModalButton {
-  width: 36px;
-  height: 36px;
-  border-radius: 8px;
-  border: 1px solid var(--dsw-alias-border-l1);
-  background: var(--dsw-alias-bg-layer-2);
-  color: var(--dsw-alias-label-primary);
-  font: var(--dsw-font-xs-strong-13);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mermaidModalButton:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.mermaidModalStage {
-  width: 90vw;
-  height: 80vh;
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mermaidModalStage :global(svg) {
-  max-width: none;
-  max-height: none;
-  cursor: grab;
-  transform-origin: center center;
-  user-select: none;
-  -webkit-user-drag: none;
-  background: var(--dsw-alias-bg-layer-1);
-  padding: 16px;
-  border-radius: 12px;
-}
-
-.mermaidModalStage :global(svg):active {
-  cursor: grabbing;
-}
-
-.mermaidModalHint {
-  position: absolute;
-  bottom: 16px;
-  left: 50%;
-  transform: translateX(-50%);
-  color: var(--dsw-alias-label-tertiary);
-  font: var(--dsw-font-xxxs-11);
-  pointer-events: none;
-}
-
 /* The floating "add to conversation" button anchored above a text
    selection in the preview/code viewers. Portalled to document.body and
    position:fixed, so the editor's overflow clips cannot crop it; flat
@@ -1814,64 +1576,6 @@ body[data-dsh-sidebar-dragging] .panel {
   background: var(--dsw-alias-interactive-bg-hover);
 }
 
-.editorPdf {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  background: var(--dsw-alias-bg-base);
-}
-
-.editorPdfToolbar {
-  flex: none;
-  display: flex;
-  justify-content: flex-end;
-  padding: 6px 8px;
-  border-bottom: 1px solid var(--dsw-alias-border-l1);
-}
-
-.editorPdfStage {
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  display: flex;
-}
-
-.editorPdfFrame {
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-  border: none;
-  background: var(--dsw-alias-bg-base);
-}
-
-.editorPdfFrameBlocked {
-  pointer-events: none;
-}
-
-.editorPdfDragShield {
-  position: absolute;
-  inset: 0;
-  z-index: 4;
-  pointer-events: none;
-  background: transparent;
-}
-
-.editorPdfDragShieldActive {
-  pointer-events: auto;
-}
-
-/* Tab drag must switch iframe hit-testing before the pointer can enter the
-   Chromium PDF browsing context. The body flag is set synchronously by the
-   drag source, avoiding React render timing entirely. */
-:global(body[data-dsh-tab-dragging]) .editorPdfFrame {
-  pointer-events: none !important;
-}
-
-:global(body[data-dsh-tab-dragging]) .editorPdfDragShield {
-  pointer-events: auto !important;
-}
-
 /* ── Terminal ──────────────────────────────────────────────────────────── */
 
 .terminalWrap {
@@ -2552,10 +2256,7 @@ body[data-dsh-sidebar-dragging] .panel {
 .gitDiffFile:focus-visible,
 .gitDiffExpand:focus-visible,
 .terminalRetry:focus-visible,
-.editorModeButton:focus-visible,
-.editorDownloadLink:focus-visible,
-.editorPptxButton:focus-visible,
-.editorDocxZoomRange:focus-visible {
+.editorDownloadLink:focus-visible {
   outline: 2px solid var(--dsw-alias-interactive-bg-hover-accent);
   outline-offset: -1px;
 }
@@ -2655,134 +2356,41 @@ body[data-dsh-sidebar-dragging] .panel {
   color: var(--dsw-alias-state-business-primary);
 }
 
-/* ── Markdown preview: raw-HTML runs + table of contents ─────────────────
-   The HTML runs lifted out of the markdown source (MarkdownHtml.tsx) render
-   as sanitized block leaves; the TOC is a zero-height sticky bar keeping the
-   outline button pinned at the preview's top-right without consuming layout.
-   All visuals ride the alias tokens (skin system follows automatically). */
-
-/* A sanitized HTML run leaf (block-level box; content is DOMPurify output). */
-.editorHtmlBlock {
-  margin: 8px 0;
-}
-
-.editorHtmlBlock img,
-.editorHtmlBlock video {
-  max-width: 100%;
-}
-
-.editorHtmlBlock details {
-  margin: 4px 0;
-  padding: 4px 0;
-}
-
-.editorHtmlBlock summary {
-  cursor: pointer;
-}
-
-/* The zero-height sticky bar: occupies no layout, keeps the button visible
-   while the preview scrolls, and lets pointer events pass through the bar
-   itself (only the interactive children re-enable them). */
-.tocBar {
-  position: sticky;
-  top: 0;
-  z-index: 3;
-  display: flex;
-  justify-content: flex-end;
-  height: 0;
-  pointer-events: none;
-}
-
-.tocButton {
-  pointer-events: auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  margin: 4px 2px 0 0;
-  padding: 0;
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 6px;
-  background: var(--dsw-alias-bg-layer-1);
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-}
-
-.tocButton:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-primary);
+/* The jumped-to heading flashes once (the class is added to the host-rendered
+   heading element by md-toc.tsx; @keyframes rides the CSS module). */
+@keyframes dsh-toc-flash {
+  0%, 60% { background: var(--dsw-alias-interactive-bg-hover); }
+  100% { background: transparent; }
 }
 
-/* The outline popover, anchored under the button (the bar is the containing
-   block; its height is 0, so the panel drops below the pinned button row). */
-.tocPanel {
+/* ═══ Agent 浏览器实况（CDP screencast，2026-09-12 方案 2）═══ */
+.browserLive {
   position: absolute;
-  top: 32px;
-  right: 2px;
+  inset: 0;
   display: flex;
   flex-direction: column;
-  width: min(300px, 82%);
-  max-height: 60vh;
-  overflow-y: auto;
-  padding: 4px;
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 8px;
-  background: var(--dsw-alias-bg-layer-2);
-  box-shadow: var(--dsw-shadow-lv2);
-  pointer-events: auto;
+  gap: 6px;
+  padding: 8px 10px;
+  overflow: hidden;
 }
-
-.tocItem {
+.browserLiveStatus {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   gap: 8px;
-  min-width: 0;
-  padding: 4px 8px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--dsw-alias-label-secondary);
-  font: var(--dsw-font-xxs-12);
-  text-align: left;
-  cursor: pointer;
-}
-
-.tocItem:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-primary);
-}
-
-/* Indent by heading level (h2 = one step, h3 = two steps…). */
-.tocItem[data-level='2'] { padding-left: 18px; }
-.tocItem[data-level='3'] { padding-left: 28px; }
-.tocItem[data-level='4'] { padding-left: 38px; }
-.tocItem[data-level='5'] { padding-left: 48px; }
-.tocItem[data-level='6'] { padding-left: 58px; }
-
-/* The tiny level number keeps deep outlines scannable. */
-.tocItemLevel {
-  flex: none;
-  font: var(--dsw-font-xxxs-11);
-  color: var(--dsw-alias-label-tertiary);
-}
-
-.tocItemText {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  font-size: 12px;
+  opacity: 0.75;
 }
-
-/* The jumped-to heading flashes once (the class is added to the host-rendered
-   heading element by md-toc.tsx; @keyframes rides the CSS module). */
-@keyframes dsh-toc-flash {
-  0%, 60% { background: var(--dsw-alias-interactive-bg-hover); }
-  100% { background: transparent; }
+.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;
 }
-
-.tocFlash {
-  animation: dsh-toc-flash 1.2s ease-out;
-  border-radius: 4px;
+.browserLiveTarget {
+  max-width: 260px;
+  font-size: 12px;
 }

package/src/config.ts

@@ -134,18 +134,15 @@ export const PrefsSchema: z<SidebarPrefs> = z.object({
   customCss: z.string(),
   titleBarCompat: z.boolean().default(false),
   titleBarStripPx: z.number().step(1).min(TITLE_BAR_STRIP_MIN).max(TITLE_BAR_STRIP_MAX).default(TITLE_BAR_STRIP_DEFAULT),
-  htmlViewerNoSandbox: z.boolean().default(false),
-  htmlViewerDefaultUnsafe: z.boolean().default(false),
   browserNoSandbox: z.boolean().default(false),
   browserInterceptLinks: z.boolean().default(true),
   browserInterceptHttp: z.boolean().default(true),
   browserInterceptHttps: z.boolean().default(false),
   browserAllowedLoopback: z.string().default(''),
-  // Per-feature enable switches are OPEN maps (any tab/viewer id, built-in or
+  // Per-feature enable switches are OPEN maps (any tab id, built-in or
   // external): an absent key means enabled, so old documents resolve to {}
   // (everything on) with no migration. Non-boolean values fail validation.
   tabsEnabled: z.dict(z.boolean()).default({}),
-  viewersEnabled: z.dict(z.boolean()).default({}),
   // Plugin-owned settings blobs (v0.12.0+) are an OPEN nested map: any
   // descriptor id may carry any JSON-serializable values. This is the
   // "settings seam" opening — without it the seam would drop third-party

package/src/index.ts

@@ -1,7 +1,7 @@
 /**
  * dsh-coding-sidebar host half: the /sidebar JSON API (explorer listing, file
- * read/write, git), the /sidebar/file media route (images), the /sidebar/html
- * preview route, the /sidebar/bundle lazy-chunk route (client code splits),
+ * read/write, git), the /sidebar/file media route (file bytes / downloads),
+ * the /sidebar/bundle lazy-chunk route (client code splits),
  * and the terminal WebSocket upgrade. Every route passes the same
  * browser-trust fence as the /api gateway — Host-header loopback or the
  * web runtime's `trustedHosts` (LAN IP literals sampled at boot plus
@@ -33,7 +33,6 @@ import { parentOf, requireAbsolute, listDirectory, rootLabel } from './fs-tree.t
 import { writeWorkspaceUpload } from './fs-operations.ts'
 import { ensureWorkspacePath, ensureWorkspaceWritePath } from './path-security.ts'
 import { searchFiles } from './fs-search.ts'
-import { decodeHtmlUrl } from './html-route.ts'
 import { extractFrameAncestors } from './browser-probe.ts'
 import { isTrustedApiRequest, isLoopbackHostname } from './trust-fence.ts'
 import { registerBundleRoute } from './bundle-route.ts'
@@ -62,15 +61,14 @@ export type { SidebarConfig, ResolvedSidebarConfig }
 // `ctx.betterSidebar`; the Context re-export below is the vendored cordis
 // Context intersected with the structural service faces.
 // Also re-export the service descriptor types so consumers can type their
-// registerTab / registerFileViewer arguments without reaching into /client.
+// registerTab arguments without reaching into /client. (v1.0.4: the file
+// viewer types were retired with the file-viewer registry — file preview is
+// the host's job now.)
 export type { Context } from './context-types.ts'
 export type {
   BetterSidebarService,
   TabDescriptor,
   TabComponentProps,
-  FileViewerDescriptor,
-  FileViewerProps,
-  FileFetchStrategy,
 } from './client/service.ts'
 
 /** Plugin identity for cordis.yml rows. */
@@ -90,9 +88,6 @@ const MEDIA_TYPES: Record<string, string> = {
   '.bmp': 'image/bmp',
   '.ico': 'image/x-icon',
   '.avif': 'image/avif',
-  '.pdf': 'application/pdf',
-  '.html': 'text/html',
-  '.htm': 'text/html',
 }
 
 /** Content type served by /sidebar/file (binary-safe fallback for unknowns). */
@@ -522,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
@@ -849,11 +854,11 @@ export function apply(ctx: Context, config?: SidebarConfig): void {
 
   // ── Lazy chunk route (client bundle splits) ─────────────────────────────
   // Serves the client half's split bundles (lib/client-<name>.js) so the
-  // heavy preview/terminal libraries load on first use, not at page start
+  // heavy editor/terminal libraries load on first use, not at page start
   // (see bundle-route.ts / src/client/chunk-loader.ts).
   ctx.effect(() => registerBundleRoute(ctx, fence), 'dsh-coding-sidebar: /sidebar/bundle chunk route')
 
-  // ── Media route (images for the editor) ─────────────────────────────────
+  // ── Media route (file bytes; the binary pane's download link) ───────────
   ctx.effect(() => ctx.webServer.register({
     kind: 'prefix',
     path: '/sidebar/file',
@@ -895,68 +900,6 @@ export function apply(ctx: Context, config?: SidebarConfig): void {
     },
   }), 'dsh-coding-sidebar: /sidebar/file media route')
 
-  // ── HTML preview route (sandboxed HTML + its relative assets) ───────────
-  // Serves files under the session cwd for the built-in HTML previewer. The
-  // URL is path-encoded (see html-route.ts) so the previewed page's relative
-  // assets (./style.css, img/x.png) resolve back into this route with the
-  // session scope intact — a query-encoded URL would drop the scope when the
-  // browser resolves relatives. Every response carries the CSP `sandbox`
-  // directive: inside the editor's iframe the sandbox ATTRIBUTE is the
-  // boundary, this header is defense-in-depth so even a top-level load of
-  // the URL (e.g. a popup opened by a previewed page) stays in an opaque
-  // origin with no same-origin access to the GUI.
-  ctx.effect(() => ctx.webServer.register({
-    kind: 'prefix',
-    path: '/sidebar/html',
-    handler: async (req, res) => {
-      if (!fence(req)) {
-        res.writeHead(403)
-        res.end('forbidden')
-        return
-      }
-      if (req.method !== 'GET') {
-        res.writeHead(405)
-        res.end()
-        return
-      }
-      try {
-        const url = new URL(req.url ?? '/', 'http://dsh.internal')
-        const decoded = decodeHtmlUrl(url.pathname)
-        if (!decoded.ok) {
-          writeError(res, new SidebarError('bad-request', decoded.message, decoded.status))
-          return
-        }
-        const { sessionId, path } = decoded.ref
-        // The session's authoritative cwd (client cwd cannot ride in the URL
-        // — the path encoding has no query; a detached first request falls
-        // back to the process cwd and is normally refused by the workspace
-        // real-path guard, with the same semantics as the media route's
-        // fallback.
-        const cwd = await sessionCwdOf(ctx, sessionId)
-        const absolute = await ensureWorkspacePath(cwd, path)
-        const info = await stat(absolute)
-        if (!info.isFile() || info.size > resolved.mediaLimit) {
-          throw new SidebarError('fs-error', 'not a file or too large', 400)
-        }
-        const type = mediaTypeForPath(absolute)
-        const body = await readFile(absolute)
-        res.writeHead(200, {
-          'content-type': type === 'text/html' ? 'text/html; charset=utf-8' : type,
-          'cache-control': 'no-cache',
-          'x-content-type-options': 'nosniff',
-          'referrer-policy': 'no-referrer',
-          // The sandbox directive (no allow-same-origin → opaque origin) is
-          // the previewer's security boundary even for top-level loads;
-          // object-src 'none' blocks plugin embeds.
-          'content-security-policy': "sandbox allow-scripts allow-popups allow-downloads allow-modals; object-src 'none'",
-        })
-        res.end(body)
-      } catch (error) {
-        writeError(res, error)
-      }
-    },
-  }), 'dsh-coding-sidebar: /sidebar/html preview route')
-
   // ── Terminal WebSocket ──────────────────────────────────────────────────
   // One upgrade endpoint serves both UI-tab terminals (?tab=...) and
   // agent-owned terminals (?uuid=...). The two paths attach to different