@keith9681/dsh-sidebar 0.15.2

package/src/client/editable-state.ts

@@ -0,0 +1,70 @@
+/**
+ * Per-session write-permission state shared between the main client bundle
+ * and the lazy editor chunk.
+ *
+ * The sidebar is READ-ONLY by default: the host refuses every fs.write and
+ * git mutation unless the session has been explicitly switched to
+ * "editable" from the editor toolbar toggle (see TextEditor.tsx). The
+ * AUTHORITATIVE flag lives on the host (config.get / config.set-editable);
+ * this module is only the client mirror that keeps the main bundle and the
+ * editor chunk in lockstep — chunks bypass the module loader (see
+ * chunk-loader.ts), so they cannot import state from the main bundle and
+ * must rendezvous on a shared global instead, exactly like
+ * `globalThis.__dshChunks__`.
+ */
+
+/** The shared global slot (one per page; survives chunk re-activation). */
+const GLOBAL_KEY = '__dshSidebarEditable__'
+
+interface EditableGlobal {
+  /** Per-session editable cache; an absent key means read-only. */
+  bySession: Map<string, boolean>
+  /** Change listeners per session (component subscriptions). */
+  listeners: Map<string, Set<(editable: boolean) => void>>
+}
+
+function globalState(): EditableGlobal {
+  const g = globalThis as unknown as Record<string, EditableGlobal | undefined>
+  let state = g[GLOBAL_KEY]
+  if (state === undefined) {
+    state = { bySession: new Map(), listeners: new Map() }
+    g[GLOBAL_KEY] = state
+  }
+  return state
+}
+
+/**
+ * Whether the session may write files. Defaults to false — every session
+ * starts read-only and only becomes writable through the toolbar toggle.
+ */
+export function isSessionEditable(sessionId: string): boolean {
+  return globalState().bySession.get(sessionId) === true
+}
+
+/**
+ * Update the local editable flag and notify subscribers. The caller issues
+ * the host call (config.set-editable) separately; a host failure should
+ * flip the flag back through this same setter.
+ */
+export function setSessionEditable(sessionId: string, editable: boolean): void {
+  const state = globalState()
+  state.bySession.set(sessionId, editable)
+  const set = state.listeners.get(sessionId)
+  if (set === undefined) return
+  for (const callback of set) callback(editable)
+}
+
+/** Subscribe to editable changes of one session; returns an unsubscribe fn. */
+export function subscribeSessionEditable(sessionId: string, callback: (editable: boolean) => void): () => void {
+  const state = globalState()
+  let set = state.listeners.get(sessionId)
+  if (set === undefined) {
+    set = new Set()
+    state.listeners.set(sessionId, set)
+  }
+  set.add(callback)
+  return () => {
+    set!.delete(callback)
+    if (set!.size === 0) state.listeners.delete(sessionId)
+  }
+}

package/src/client/editor-load.ts

@@ -0,0 +1,92 @@
+/**
+ * Pure editor-load planning: the decision logic the editor host needs to
+ * turn a matched file viewer + a host fs.read result into a render action.
+ * Kept dependency-free (no React, no fetch) so the strategy dispatch is
+ * unit-testable and the wire contract (head bytes, binary flag) is pinned.
+ *
+ * The host flow this module drives:
+ *   1. `matchFileViewer(path)` picks a viewer by extension/priority.
+ *   2. `planFirstMatch` dispatches its fetchStrategy.
+ *   3. An fsRead viewer fetches through the host; `planFsReadOutcome`
+ *      decides what to do with the result — including the head-based
+ *      re-match that lets a `detect` viewer claim a binary the extension
+ *      match could not see (the builtin NUL probe on `binary-download`).
+ */
+import type { FileViewerDescriptor } from './service.ts'
+
+/** One host fs.read result (mirror of the wire; `head` present when binary). */
+export interface FsReadOutcome {
+  binary: boolean
+  content: string
+  truncated: boolean
+  /** base64 of the first bytes (present on binary reads; sniffing material). */
+  head?: string
+}
+
+/** What the editor host should do next. */
+export type EditorLoadAction =
+  /** No renderer: show the download UI. */
+  | { kind: 'binary' }
+  /** Render `viewer`'s component with the carried payload. */
+  | { kind: 'render'; viewer: FileViewerDescriptor; content?: string; truncated?: boolean; mediaUrl?: string; customData?: unknown }
+  /** Fetch the file through the host (fsRead strategy). */
+  | { kind: 'fetchFsRead'; viewer: FileViewerDescriptor }
+  /** Call the viewer's load() and render with its return value. */
+  | { kind: 'customLoad'; viewer: FileViewerDescriptor }
+
+/** Decode the host's base64 head bytes into the sniffing buffer. */
+export function decodeHead(headBase64: string): Uint8Array {
+  const binary = atob(headBase64)
+  const bytes = new Uint8Array(binary.length)
+  for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i)
+  return bytes
+}
+
+/**
+ * Dispatch one matched viewer's fetchStrategy. A missing viewer or a
+ * `binary-download` strategy both mean "no client-side renderer" → the
+ * download UI. `mediaUrlOf` builds the media URL for `mediaUrl`/`none`
+ * strategies (pure, but scope-bound — injected by the host).
+ */
+export function planFirstMatch(
+  viewer: FileViewerDescriptor | undefined,
+  mediaUrlOf: () => string,
+): EditorLoadAction {
+  if (viewer === undefined || viewer.fetchStrategy === 'binary-download') return { kind: 'binary' }
+  switch (viewer.fetchStrategy) {
+    case 'mediaUrl':
+    case 'none':
+      return { kind: 'render', viewer, mediaUrl: mediaUrlOf() }
+    case 'custom':
+      return { kind: 'customLoad', viewer }
+    case 'fsRead':
+      return { kind: 'fetchFsRead', viewer }
+  }
+}
+
+/**
+ * Decide what an fsRead result means for the editor.
+ * - Text: the first match stands (content is valid for any fsRead viewer).
+ * - Binary: the host head bytes enable a re-match — a `detect` viewer (e.g.
+ *   a plugin sniffing a binary format) may claim the file. `custom` viewers
+ *   load their own bytes; `mediaUrl`/`none` viewers render the media route;
+ *   an fsRead viewer or nothing cannot render binary → download UI.
+ */
+export function planFsReadOutcome(
+  viewer: FileViewerDescriptor,
+  result: FsReadOutcome,
+  rematch: (head: Uint8Array) => FileViewerDescriptor | undefined,
+  mediaUrlOf: () => string,
+): EditorLoadAction {
+  if (!result.binary) {
+    return { kind: 'render', viewer, content: result.content, truncated: result.truncated }
+  }
+  const claimed = result.head === undefined ? undefined : rematch(decodeHead(result.head))
+  if (claimed !== undefined && claimed.fetchStrategy === 'custom') {
+    return { kind: 'customLoad', viewer: claimed }
+  }
+  if (claimed !== undefined && (claimed.fetchStrategy === 'mediaUrl' || claimed.fetchStrategy === 'none')) {
+    return { kind: 'render', viewer: claimed, mediaUrl: mediaUrlOf() }
+  }
+  return { kind: 'binary' }
+}

package/src/client/frame-batcher.ts

@@ -0,0 +1,56 @@
+/**
+ * Per-frame task coalescing for pointer-driven interactions.
+ *
+ * Pointer streams fire several times faster than the display refresh, and
+ * applying every event (a React setState, a store reduce) re-renders whole
+ * trees at event cadence — the visible drag lag on slower CPUs (#315). This
+ * batcher keeps the LATEST scheduled task, runs it at most once per
+ * animation frame, and lets the caller flush synchronously on release (so
+ * the final pointer position is never lost to a cancelled frame).
+ *
+ * Callers compose the pending value in a ref before scheduling; the
+ * scheduled task reads that ref, so replacing the task on every event is
+ * cheap (one ref write + one rAF check).
+ */
+export interface FrameBatcher {
+  /** Schedule (or replace) the per-frame task. Safe to call on every event. */
+  schedule(task: () => void): void
+  /** Cancel any pending frame and run the scheduled task synchronously
+   *  (no-op when nothing is scheduled). */
+  flushNow(): void
+  /** Cancel any pending frame and drop the task without running it. */
+  dispose(): void
+}
+
+export function createFrameBatcher(): FrameBatcher {
+  let frame: number | null = null
+  let task: (() => void) | null = null
+
+  const run = (): void => {
+    frame = null
+    const current = task
+    task = null
+    current?.()
+  }
+
+  return {
+    schedule(next) {
+      task = next
+      if (frame === null) frame = requestAnimationFrame(run)
+    },
+    flushNow() {
+      if (frame !== null) {
+        cancelAnimationFrame(frame)
+        frame = null
+      }
+      run()
+    },
+    dispose() {
+      if (frame !== null) {
+        cancelAnimationFrame(frame)
+        frame = null
+      }
+      task = null
+    },
+  }
+}

package/src/client/icons.tsx

@@ -0,0 +1,161 @@
+/**
+ * Icons the sidebar needs beyond the primitives set: a terminal glyph (the
+ * icon library has none), a diff glyph, and the two panel-toggle glyphs for
+ * the top-right cluster. Per-tab icons live on the tab descriptors
+ * (`descriptor.icon`), not in a type-keyed switch — the icon mapping was
+ * registry-ized with the tab types.
+ */
+import type { IconProps } from '@deepseek-ai/dsh-client-ui-primitives'
+
+/**
+ * Right-panel toggle glyph (the "侧拉" button): a frame with a filled strip
+ * along its RIGHT edge, in the app's outline style (1.5px stroke,
+ * currentColor).
+ */
+export const IconPanelRightOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="2" width="13" height="12" rx="2.5" stroke="currentColor" strokeWidth="1.5" />
+    <rect x="10.5" y="3.25" width="2.75" height="9.5" rx="1" fill="currentColor" stroke="none" />
+  </svg>
+)
+
+/**
+ * Terminal glyph in the app's outline style (1.5px stroke, currentColor):
+ * a rounded frame with a prompt chevron and underscore cursor.
+ */
+export const IconTerminalOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="2.5" width="13" height="11" rx="2" stroke="currentColor" strokeWidth="1.5" />
+    <path d="M4.5 6.25 6.75 8 4.5 9.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M8.5 10.4h3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)
+
+/** Diff glyph in the app's outline style: a file frame with a plus and a minus row. */
+export const IconDiffOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="1.5" width="13" height="13" rx="2.5" stroke="currentColor" strokeWidth="1.5" />
+    <path d="M4 5h3M5.5 3.5v3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M9.5 12.5h2.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)
+
+/**
+ * Stop glyph for the background-job kill button: a filled square in the
+ * app's outline scale (16), the universal "halt this work" mark.
+ */
+export const IconStopOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="4" y="4" width="8" height="8" rx="1.5" fill="currentColor" stroke="none" />
+  </svg>
+)
+
+/** Upload glyph in the app's outline style: an arrow rising into a tray
+ *  (the file-manager "upload into the workspace" action). */
+export const IconUploadOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 10V2.75M4.75 5.5 8 2.25 11.25 5.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M2.75 10.5v2.25A1.25 1.25 0 0 0 4 14h8a1.25 1.25 0 0 0 1.25-1.25V10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)
+
+// ── File-viewer inventory glyphs (Side card settings page) ────────────────
+
+/** Image viewer glyph: a picture frame with a sun and a mountain. */
+export const IconImageOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="2.5" width="13" height="11" rx="2" stroke="currentColor" strokeWidth="1.5" />
+    <circle cx="5.5" cy="6" r="1.2" stroke="currentColor" strokeWidth="1.5" />
+    <path d="m3.5 12 3-3 2.25 2.25L11.5 8.5 13 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+/** PDF viewer glyph: a document frame with the "PDF" label. */
+export const IconPdfOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.5 1.5h6.5L13.5 5v9.5h-10z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+    <path d="M9.5 1.5V5h4" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+    <path d="M5 13.5v-3h1.4c.75 0 1.1.32 1.1.85 0 .54-.35.85-1.1.85H5.3" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M8.3 13.5v-3h1.05c.8 0 1.35.5 1.35 1.5s-.55 1.5-1.35 1.5z" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M11.6 13.5v-3h1.3" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
+  </svg>
+)
+
+/** Markdown viewer glyph: the classic "M with a down arrow" badge. */
+export const IconMarkdownOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1.5" y="2.5" width="13" height="11" rx="2" stroke="currentColor" strokeWidth="1.5" />
+    <path d="M4 10.5V5.5l2 2.5 2-2.5v5M9.5 10.5v-5l2 2.5 2-2.5v5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+/** HTML viewer glyph: a document frame with a "‹/›" tag pair. */
+export const IconHtmlOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.5 1.5h6.5L13.5 5v9.5h-10z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+    <path d="M9.5 1.5V5h4" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+    <path d="M5.6 13.2 4.2 10l1.4-3.2M7.4 6.8 8.8 10l-1.4 3.2" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+/** Browser tab glyph: a globe with meridians. */
+export const IconGlobeOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.5" />
+    <ellipse cx="8" cy="8" rx="2.8" ry="6.5" stroke="currentColor" strokeWidth="1.5" />
+    <path d="M1.5 8h13M8 1.5c-2.4 1.8-2.4 11.2 0 13M8 1.5c2.4 1.8 2.4 11.2 0 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)
+
+/** History glyph (thread switcher): a clock with a counterclockwise arrow,
+ *  in the app's outline style — the "past conversations" mark. */
+export const IconHistoryOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.4 6.8A5.6 5.6 0 1 1 2.4 9.2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M2.2 3.4v3.4h3.4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M8 5.4V8l1.9 1.2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+/** Save glyph (save-as-new-session): the classic floppy disk, in the app's
+ *  outline style. */
+export const IconSaveOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.2 14.5h7.6a1.2 1.2 0 0 0 1.2-1.2V4.9L10.6 2.5H4.2A1.2 1.2 0 0 0 3 3.7v9.6a1.2 1.2 0 0 0 1.2 1.2z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+    <path d="M10 2.5v2.6H5.6V2.5" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+    <path d="M5.4 14.5v-4.2h5.2v4.2" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+  </svg>
+)
+
+/**
+ * Visual Studio Code brand mark for the file-tree "open with" menu. The
+ * path is the Simple Icons `visualstudiocode` glyph (CC0 1.0,
+ * simple-icons@11.0.0 — later releases dropped it over Microsoft's brand
+ * policy, so it is inlined here rather than pulled from react-icons),
+ * rendered monochrome via currentColor to follow the active skin.
+ */
+export const IconVscode16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
+  </svg>
+)
+
+// ── Write-permission toggle glyphs (read-only by default) ──────────────────
+
+/** Closed padlock: the session is READ-ONLY — click to enable editing. */
+export const IconLockClosedOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="3" y="7" width="10" height="6.5" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
+    <path d="M5.25 7V5.25a2.75 2.75 0 0 1 5.5 0V7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <circle cx="8" cy="10" r="1.1" fill="currentColor" stroke="none" />
+  </svg>
+)
+
+/** Open padlock: the session is EDITABLE — click to go back to read-only. */
+export const IconLockOpenOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="3" y="7" width="10" height="6.5" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
+    <path d="M5.25 7V5.25a2.75 2.75 0 0 1 4.95-1.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <circle cx="8" cy="10" r="1.1" fill="currentColor" stroke="none" />
+  </svg>
+)

package/src/client/image-types.ts

@@ -0,0 +1,8 @@
+/** Image extension dispatch, separate from React for unit testing. */
+export const IMAGE_EXTENSIONS = [
+  '.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.bmp', '.ico', '.avif',
+] as readonly string[]
+
+export function isImageExt(ext: string): boolean {
+  return IMAGE_EXTENSIONS.includes(ext)
+}

package/src/client/ime-guard.ts

@@ -0,0 +1,47 @@
+/**
+ * IME-composition key guard.
+ *
+ * While a Chinese/Japanese/Korean input method is composing (the user is
+ * picking a candidate from the IME window), every pressed key BELONGS to the
+ * input method: arrows move the candidate highlight, Enter/Space confirm the
+ * composition, Escape cancels it. Page code must not process those keys —
+ * a component that does (a number stepper calling preventDefault() on
+ * ArrowUp/ArrowDown, a submit handler reacting to Enter, ...) silently
+ * breaks the IME: candidates stop responding, the composition gets torn
+ * apart, and only bare letters come out.
+ *
+ * This guard enforces that rule at the document boundary: a capture-phase
+ * keydown/keyup listener that stops the event from propagating further
+ * whenever a composition is in progress. Because it runs in the capture
+ * phase on `document` — the outermost node — it fires BEFORE React's
+ * delegated handlers (attached at the root container) and before any native
+ * target/bubble listener, so an inlined third-party component (e.g. the
+ * Univer office UI bundled into this plugin) can never intercept
+ * composition keys. The browser's native IME processing is untouched:
+ * stopPropagation only silences page JS, not the default action.
+ *
+ * The composition signal follows the DSH core convention (InputBar's IME
+ * guard, issue #535): `isComposing` for modern engines, keyCode 229 as the
+ * legacy signal engines emit without isComposing.
+ */
+
+/** The pure decision: is this keyboard event part of an IME composition? */
+export function isImeComposition(event: { isComposing: boolean; keyCode: number }): boolean {
+  return event.isComposing || event.keyCode === 229
+}
+
+/**
+ * Register the document-level capture guard. Returns the disposer
+ * (HMR-safe; call through `ctx.effect`).
+ */
+export function registerImeGuard(): () => void {
+  const onKey = (event: KeyboardEvent): void => {
+    if (isImeComposition(event)) event.stopPropagation()
+  }
+  document.addEventListener('keydown', onKey, true)
+  document.addEventListener('keyup', onKey, true)
+  return () => {
+    document.removeEventListener('keydown', onKey, true)
+    document.removeEventListener('keyup', onKey, true)
+  }
+}