dsh-coding-sidebar 1.0.2 → 1.0.4

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

@@ -1,10 +1,13 @@
 /**
  * The BetterSidebar client service: a registry that external plugins use
- * to contribute sidebar tab types and file previewers. The service is
- * published to the cordis context as `ctx.betterSidebar` (see
- * {@link ../context-types.ts}); consumers declare it in `inject` and call
- * `registerTab` / `registerFileViewer`, both returning a disposer that
- * cordis auto-invokes on fiber disposal (HMR-safe).
+ * to contribute sidebar tab types. The service is published to the cordis
+ * context as `ctx.betterSidebar` (see {@link ../context-types.ts});
+ * consumers declare it in `inject` and call `registerTab`, which returns a
+ * disposer that cordis auto-invokes on fiber disposal (HMR-safe).
+ *
+ * (v1.0.4: the file-viewer registry — `registerFileViewer` /
+ * `matchFileViewer` — was retired; file preview is the host's job now and
+ * the sidebar edits text only.)
  *
  * Design notes:
  * - The registry is synchronous-snapshot (Map + listener set) so React
@@ -15,9 +18,6 @@
  *   `single: true` is sugar for `dedupeKey: () => id`.
  * - `createTab` lets a descriptor own tab instantiation (the terminal
  *   builtin uses it to mint `terminal:<n>` ids and bump `nextTerminal`).
- * - `matchFileViewer` walks descriptors in priority order (desc, stable):
- *   per descriptor it tries `detect` first (when `head` bytes are given),
- *   then `exts`; `exts: []` is a catch-all that matches any path.
  */
 import type { ReactNode } from 'react';
 import type { Context } from '../context-types.ts';
@@ -50,7 +50,7 @@ export interface SidebarSettingSelectOption {
      *  option's icon too; without icons both are a single line of text. */
     icon?: ReactNode | ((size: number) => ReactNode);
 }
-/** One declarative setting of a tab/viewer, rendered as a nested row in the
+/** One declarative setting of a registered tab, rendered as a nested row in the
  *  Side card settings page (e.g. the Subagent page's "auto-open when a
  *  subagent appears" switch, or the terminal's custom font rows). `type`
  *  selects the control: 'switch' (default) renders the custom switch,
@@ -93,7 +93,7 @@ export interface SidebarSettingsRenderProps {
     /** Close the settings popup. */
     close(): void;
 }
-/** Declarative settings of one registered tab or file viewer. */
+/** Declarative settings of one registered tab. */
 export interface SidebarSettingsDeclaration {
     /**
      * Extra settings rows rendered under the feature's own row in the
@@ -223,78 +223,17 @@ export interface TabDescriptor {
     onClose?: (tab: SidebarTab, scope: SessionScope) => void;
     component: (props: TabComponentProps) => ReactNode;
 }
-/** How the host loads a file's bytes for one viewer. */
-export type FileFetchStrategy = 'none' | 'fsRead' | 'mediaUrl' | 'custom' | 'binary-download';
-/** Props every file viewer component receives. */
-export interface FileViewerProps {
-    ctx: Context;
-    store: SidebarStore;
-    scope: SessionScope;
-    path: string;
-    title: string;
-    /** The matching descriptor's id (`'code'`, `'my-plugin:csv'`). */
-    viewerId: string;
-    /** fsRead text content (fetchStrategy='fsRead'). */
-    content?: string;
-    truncated?: boolean;
-    /** mediaUrl for the path (fetchStrategy='mediaUrl'). */
-    mediaUrl?: string;
-    /** custom load() return value (fetchStrategy='custom'). */
-    customData?: unknown;
-    /** Internal (built-in text editor): 'host' asks the viewer to skip its own
-     *  toolbar row — the editor host's merged-mode header renders it instead,
-     *  fed through the two callbacks below. Viewers that ignore these fields
-     *  render exactly as before. */
-    toolbar?: 'self' | 'host';
-    /** Internal: the viewer reports its toolbar state (mode/dirty/save). */
-    onToolbarState?: (state: EditorToolbarState) => void;
-    /** Internal: the viewer registers its toolbar commands on mount (null on
-     *  unmount). */
-    onToolbarControls?: (controls: EditorToolbarControls | null) => void;
-}
-/** The toolbar state a text editor reports to the host's merged-mode header. */
+/** The toolbar state the text editor reports to the host's merged-mode header. */
 export interface EditorToolbarState {
-    /** Whether the preview/edit mode toggle applies (markdown/html). */
-    modes: boolean;
-    mode: 'preview' | 'edit';
     dirty: boolean;
     /** Whether saving applies (text content loaded). */
     editable: boolean;
     saveState: 'idle' | 'saving' | 'saved' | 'failed';
 }
-/** The commands the host's merged-mode header sends back to the viewer. */
+/** The commands the host's merged-mode header sends back to the editor. */
 export interface EditorToolbarControls {
-    setMode(mode: 'preview' | 'edit'): void;
     save(): void;
 }
-/** Describes one file previewer (builtins register themselves too). */
-export interface FileViewerDescriptor {
-    /** Unique id (`'image'`, `'pdf'`, `'my-plugin:csv'`). */
-    id: string;
-    /** Display name for the settings inventory (falls back to `id` when absent). */
-    title?: string | (() => string);
-    /** Icon shown in the settings inventory. */
-    icon?: ReactNode | ((size: number) => ReactNode);
-    /** Lowercase extensions without leading dot (`['png','jpg']`). `[]` = match any (catch-all). */
-    exts: readonly string[];
-    /** Higher wins; default 0. Builtins use 0; the catch-all `code` viewer uses -100. */
-    priority?: number;
-    fetchStrategy: FileFetchStrategy;
-    /**
-     * Content sniff: when `head` bytes are available the descriptor's `detect`
-     * is consulted before its `exts` (per-descriptor, in priority order).
-     */
-    detect?: (path: string, head: Uint8Array) => boolean;
-    /** fetchStrategy='custom' loader. `signal` (v0.12.0+) aborts on viewer
-     *  teardown / re-match; loaders that ignore it keep working. */
-    load?: (path: string, scope: SessionScope, signal?: AbortSignal) => Promise<unknown>;
-    /**
-     * Declarative settings shown in the Side card settings page: every
-     * registered viewer gets an enable/disable switch (icon + title + exts).
-     */
-    settings?: SidebarSettingsDeclaration;
-    component: (props: FileViewerProps) => ReactNode;
-}
 /** One `openTab` request. */
 export interface OpenTabSeed {
     type: string;
@@ -316,9 +255,7 @@ export interface OpenTabSeed {
  */
 export interface BetterSidebarService {
     registerTab(descriptor: TabDescriptor): () => void;
-    registerFileViewer(descriptor: FileViewerDescriptor): () => void;
     getTabs(): readonly TabDescriptor[];
-    getFileViewers(): readonly FileViewerDescriptor[];
     /** Find a tab descriptor by id (undefined if not registered). */
     getTab(id: string): TabDescriptor | undefined;
     /**
@@ -328,13 +265,6 @@ export interface BetterSidebarService {
      * derived flows gate on it).
      */
     isTabEnabled(id: string): boolean;
-    /** Whether a file viewer is enabled (absent `viewersEnabled[id]` = enabled). */
-    isViewerEnabled(id: string): boolean;
-    /**
-     * Find a file viewer for a path (priority desc; detect first, then exts).
-     * Disabled viewers are skipped, so files fall through to the next match.
-     */
-    matchFileViewer(path: string, head?: Uint8Array): FileViewerDescriptor | undefined;
     /**
      * Open a tab (used by external tabs and the + menu). `title` overrides
      * the descriptor's title when given (the editor tab shows the file name);
@@ -433,7 +363,7 @@ export declare const SIDEBAR_SERVICE_VERSION: string;
 export declare const SIDEBAR_FEATURES: readonly ["badge", "tabLifecycle", "updateTab", "openFile", "targetedOpen", "stateSubscription", "tabMeta", "pluginSettings", "urlTarget", "settingSelect", "floatWindows"];
 /**
  * Create one BetterSidebar service bound to a store. The service owns the
- * tab/viewer registries (Map + listener set) and proxies openTab/closeTab
+ * tab registry (Map + listener set) and proxies openTab/closeTab
  * to the store's reducer. One instance per client plugin activation.
  */
 export declare function createBetterSidebarService(store: SidebarStore): BetterSidebarService;

package/lib/types/context-types.d.ts

@@ -78,11 +78,11 @@ export interface SidebarSessionStore {
     get(id: string): {
         header: SidebarSessionHeader;
         /**
-         * The live session's append-only event log (immutable snapshot; absent
+         * The live session's immutable event snapshot (0.1.5 Session API; absent
          * on sessions the runtime has not hydrated). Read-only access — the
          * jobs.output route replays `job_output` tool/result rows from it.
          */
-        events?: readonly SidebarSessionEvent[];
+        snapshotEvents?(fromSeq?: number, toSeqExclusive?: number): readonly SidebarSessionEvent[];
     } | undefined;
 }
 /**
@@ -276,16 +276,25 @@ export interface SidebarSessionTitleService {
     };
 }
 /** The host session-persistence face (mirror of the sessionPersistence
- *  service): detached inspection of a persisted session, used to compose the
- *  recorded preset when a Side Chat thread cold-resumes. */
-export interface SidebarSessionPersistenceService {
-    inspect(sessionId: string): Promise<{
-        meta: {
-            cwd?: string;
-            agentPreset?: string;
-        };
+ *  service, 0.1.5 handle-seam form): a short-lived read handle over one
+ *  persisted session, used to compose the recorded preset when a Side Chat
+ *  thread cold-resumes. */
+export interface SidebarSessionPersistenceHandle {
+    readonly header: {
+        cwd?: string;
+        agentPreset?: string;
+    };
+    read(fromSeq?: number, toSeqExclusive?: number, options?: {
+        signal?: AbortSignal;
+    }): Promise<{
         events: readonly SidebarSessionEvent[];
     }>;
+    close(): Promise<void>;
+}
+export interface SidebarSessionPersistenceService {
+    open(sessionId: string, access: 'read', options?: {
+        signal?: AbortSignal;
+    }): Promise<SidebarSessionPersistenceHandle>;
 }
 /** RPC result slot mirror (`RpcResult<T>` on the wire). */
 export type SidebarRpcResult<T> = {

package/lib/types/index.d.ts

@@ -3,7 +3,7 @@ import { Config, type ResolvedSidebarConfig, type SidebarConfig } from './config
 export { Config };
 export type { SidebarConfig, ResolvedSidebarConfig };
 export type { Context } from './context-types.ts';
-export type { BetterSidebarService, TabDescriptor, TabComponentProps, FileViewerDescriptor, FileViewerProps, FileFetchStrategy, } from './client/service.ts';
+export type { BetterSidebarService, TabDescriptor, TabComponentProps, } from './client/service.ts';
 /** Plugin identity for cordis.yml rows. */
 export declare const name = "dsh-coding-sidebar";
 /** Services required before mounting: the webserver routes, the session store, the web runtime's trusted hosts, and the tool registry. */

package/lib/types/prefs-shared.d.ts

@@ -124,22 +124,6 @@ export interface SidebarPrefs {
      * starts `strip` px below its top edge.
      */
     titleBarStripPx: number;
-    /**
-     * Whether the HTML previewer drops its sandboxed iframe. Sandbox ON (the
-     * default) renders previewed HTML in an opaque-origin iframe that cannot
-     * touch the GUI; turning it OFF runs the previewed page with the GUI's
-     * own origin — full read/write access to session files and internal
-     * APIs. Only for trusted local content; the setting copy warns.
-     */
-    htmlViewerNoSandbox: boolean;
-    /**
-     * Whether a newly opened HTML preview starts UNSANDBOXED (the per-surface
-     * temporary unlock pre-applied). Off by default: previews open sandboxed
-     * and the status row offers the one-tap unlock; when on, previews open
-     * in the red unsandboxed state and the status row offers a one-tap
-     * restore for the current file.
-     */
-    htmlViewerDefaultUnsafe: boolean;
     /**
      * Whether the browser tab drops its sandboxed iframe. Sandbox ON (the
      * default) keeps browsed sites in an opaque origin with no GUI access;
@@ -194,16 +178,9 @@ export interface SidebarPrefs {
      * own layouts" rule.
      */
     tabsEnabled: Record<string, boolean>;
-    /**
-     * Per-viewer enable switches, keyed by file viewer descriptor id
-     * (`'image'`, `'my-plugin:csv'`). An ABSENT key means enabled; a disabled
-     * viewer is skipped by `matchFileViewer` so files fall through to the
-     * next matching viewer (or the download button when none match).
-     */
-    viewersEnabled: Record<string, boolean>;
     /**
      * Plugin-owned settings blobs (v0.12.0+), keyed by descriptor id: each
-     * registered tab/viewer that declares `settings.pluginToggles` (or writes
+     * registered tab that declares `settings.pluginToggles` (or writes
      * through `settings.render`'s `updatePluginSetting`) persists its values
      * here — an open map, so third-party keys need no host PrefsSchema field.
      * Values are JSON-serializable (the row controls produce strings /

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-coding-sidebar",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "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": {
@@ -61,7 +61,6 @@
     "lib/client-registry.js",
     "lib/client-terminal.js",
     "lib/client-editor.js",
-    "lib/client-mermaid.js",
     "lib/types/**/*.d.ts",
     "src",
     "scripts/install.sh",
@@ -85,19 +84,18 @@
   "license": "MIT",
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-agent": "^0.1.0-rc.8",
-    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.8",
-    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.0-rc.8",
-    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.8",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.8",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.8",
-    "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.8",
-    "@deepseek-ai/dsh-invariants": "^0.1.0-rc.8",
-    "@deepseek-ai/dsh-llm": "^0.1.0-rc.8",
-    "@deepseek-ai/dsh-session": "^0.1.0-rc.8",
-    "@deepseek-ai/dsh-settings": "^0.1.0-rc.8",
-    "@deepseek-ai/dsh-subagent": "^0.1.0-rc.8",
-    "@deepseek-ai/dsh-tools": "^0.1.0-rc.8",
+    "@deepseek-ai/dsh-agent": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-client-locale": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-host-webserver": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-llm": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-session": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-settings": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-subagent": "^0.1.5-rc.2",
+    "@deepseek-ai/dsh-tools": "^0.1.5-rc.2",
     "@huanlin/dsh-plugin-better-locale": "^0.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
@@ -131,8 +129,6 @@
     "@codemirror/view": "^6.43.8",
     "@lezer/highlight": "^1.2.3",
     "clsx": "^2.1.1",
-    "dompurify": "^3.4.14",
-    "mermaid": "^11.16.1",
     "node-pty": "^1.1.0",
     "react-icons": "5.7.0",
     "rxjs": "^7.8.2",
@@ -140,20 +136,20 @@
     "ws": "^8.18.0"
   },
   "devDependencies": {
+    "@deepseek-ai/dsh-invariants": "0.1.5-rc.2",
     "@cordisjs/plugin-loader": "^1.0.0-rc.5",
-    "@deepseek-ai/dsh-agent": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-client-locale": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-client-ui-conversation": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-client-ui-primitives": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-client-ui-settings": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-client-ui-slots": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-host-webserver": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-invariants": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-llm": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-session": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-settings": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-subagent": "0.1.2-alpha.2",
-    "@deepseek-ai/dsh-tools": "0.1.2-alpha.2",
+    "@deepseek-ai/dsh-agent": "0.1.5-rc.2",
+    "@deepseek-ai/dsh-client-locale": "0.1.5-rc.2",
+    "@deepseek-ai/dsh-client-ui-conversation": "0.1.5-rc.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.1.5-rc.2",
+    "@deepseek-ai/dsh-client-ui-settings": "0.1.5-rc.2",
+    "@deepseek-ai/dsh-client-ui-slots": "0.1.5-rc.2",
+    "@deepseek-ai/dsh-host-webserver": "0.1.5-rc.2",
+    "@deepseek-ai/dsh-llm": "0.1.5-rc.2",
+    "@deepseek-ai/dsh-session": "0.1.5-rc.2",
+    "@deepseek-ai/dsh-settings": "0.1.5-rc.2",
+    "@deepseek-ai/dsh-subagent": "0.1.5-rc.2",
+    "@deepseek-ai/dsh-tools": "0.1.5-rc.2",
     "@huanlin/dsh-plugin-better-locale": "^0.1.0",
     "@types/node": "^24.0.0",
     "@types/react": "~18.3.1",

package/src/bundle-route.ts

@@ -19,7 +19,7 @@ import { fileURLToPath } from 'node:url'
 import type { Context, SidebarHttpRequest, SidebarHttpResponse } from './context-types.ts'
 
 /** The chunk names the client may request (mirror of src/client/chunk-loader.ts). */
-export const CHUNK_NAMES = ['terminal', 'editor', 'mermaid'] as const
+export const CHUNK_NAMES = ['terminal', 'editor'] as const
 export type ChunkName = (typeof CHUNK_NAMES)[number]
 
 /** Directory of this host-half module (lib/ — the chunk scripts live next to it). */

package/src/client/EditorHost.tsx

@@ -1,10 +1,11 @@
 /**
- * The editor tab host: the single FILES WINDOW. It resolves a file's
- * previewer through the sidebar registry (`matchFileViewer`), fetches bytes
- * per the matched viewer's fetch strategy, and renders its component — or
- * the shared download pane when nothing can render the file. A tab without
- * a path (the seeded "Files" home) renders an empty-state hint instead of
- * the viewer loading flow; that path-less window IS the file explorer.
+ * The editor tab host: the single FILES WINDOW. It fetches a file's text
+ * through the host fs.read — text renders in the (chunk-lazy) sidebar text
+ * editor, a binary file renders the shared download pane. (v1.0.4: the
+ * file-viewer registry/matching was retired — file preview is the host's
+ * job now, the sidebar edits text only.) A tab without a path (the seeded
+ * "Files" home) renders an empty-state hint instead of the loading flow;
+ * that path-less window IS the file explorer.
  *
  * The chrome depends on the `editorExplorer` mode (read reactively so
  * toggling it re-renders without a reload):
@@ -18,18 +19,14 @@
  * The tree's context menu offers the explicit escapes in both modes: open
  * in a new tab (per-path dedupe) or to the side (a fresh tab in a fresh
  * rightward split of the current pane).
- *
- * The strategy dispatch is pure (planFirstMatch / planFsReadOutcome in
- * editor-load.ts); this component only wires it to the host APIs.
  */
 import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
-import { createElement } from 'react'
+import type { ComponentType } from 'react'
 import clsx from 'clsx'
 import { IconCheckOutline16, IconFolderOpen16, IconRefreshOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { Context } from '../context-types.ts'
-import { api, mediaUrl, type SessionScope } from './api.ts'
+import { api, type SessionScope } from './api.ts'
 import { BinaryDownload } from './binary-download.tsx'
-import { planFirstMatch, planFsReadOutcome, type EditorLoadAction } from './editor-load.ts'
 import { baseName } from './FileTree.tsx'
 import { createFrameBatcher } from './frame-batcher.ts'
 import { openSidebarFile } from './intercept.tsx'
@@ -39,16 +36,27 @@ import { TreePanel } from './TreePanel.tsx'
 import { t } from './locales.ts'
 import { relativeTo } from './paths.ts'
 import { resolveSidebarPath } from './produced-files.ts'
-import type { EditorToolbarControls, EditorToolbarState, FileViewerDescriptor } from './service.ts'
+import type { EditorToolbarControls, EditorToolbarState } from './service.ts'
+import { lazyChunkComponent } from './lazy-chunk.tsx'
+import type { TextEditorProps } from './TextEditor.tsx'
 import { firstLeaf, insertLeafAt, leafWithTab, mintTabId, treeOf, type SidebarStore, type SidebarTab } from './state.ts'
 import css from './sidebar.module.css'
 
 type EditorLoad =
   | { status: 'loading' }
   | { status: 'error'; message: string }
-  | { status: 'ready'; viewer: FileViewerDescriptor; content?: string; truncated?: boolean; mediaUrl?: string; customData?: unknown }
+  | { status: 'ready'; content: string; truncated: boolean }
   | { status: 'binary' }
 
+/**
+ * Lazy wrapper over the chunk-resident text editor: CodeMirror and the
+ * language packs are fetched only when a file tab first renders (see
+ * chunk-loader.ts). The `pick` function is module-level (stable identity —
+ * the wrapper effect depends on it); the cast bridges the chunk exports
+ * record to the prop shape.
+ */
+const LazyTextEditor = lazyChunkComponent<TextEditorProps>('editor', (mod) => mod.TextEditor as ComponentType<TextEditorProps> | undefined)
+
 /** The docked tree panel's width bounds (drag-resize clamps into them). */
 const TREE_WIDTH_DEFAULT = 240
 const TREE_WIDTH_MIN = 160
@@ -103,11 +111,10 @@ export function EditorHost(props: {
 }) {
   const { ctx, store, scope, tab, expanded, revealed, onToggleDir, onReferenceFile } = props
   const path = tab.path ?? ''
-  const title = tab.title
   // A folder window: the model's `sidebar_open` (or any caller) opens a
   // directory as an editor tab carrying `meta.dir: true` with the directory
   // as its path. It renders the file tree rooted at that folder instead of
-  // the viewer loading flow (a directory is not a file).
+  // the file loading flow (a directory is not a file).
   const isDir = metaOf(tab).dir === true
   const [load, setLoad] = useState<EditorLoad>({ status: 'loading' })
   // Manual refresh (issue #167): bumping the sequence re-runs the load effect
@@ -223,9 +230,8 @@ export function EditorHost(props: {
     })
   }
 
-  // The viewer's toolbar, hoisted into THIS header: the text editor reports
-  // its state and registers its commands (both null/absent for viewers
-  // without a toolbar — image, pdf, binary download).
+  // The editor's toolbar, hoisted into THIS header: the text editor reports
+  // its state and registers its commands (null while nothing is loaded).
   const [toolbar, setToolbar] = useState<EditorToolbarState | null>(null)
   const controlsRef = useRef<EditorToolbarControls | null>(null)
   const onToolbarState = useCallback((next: EditorToolbarState) => {
@@ -279,77 +285,27 @@ export function EditorHost(props: {
 
   useEffect(() => {
     // A (re)load or a path-less tab clears any hoisted toolbar state — the
-    // fresh viewer re-registers its own.
+    // fresh editor re-registers its own.
     setToolbar(null)
-    // The seeded home tab (no path) never loads a viewer — the empty-state
+    // The seeded home tab (no path) never loads a file — the empty-state
     // hint renders until the user picks a file. A folder tab never loads a
-    // viewer either — its tree is rooted at the folder.
+    // file either — its tree is rooted at the folder.
     if (showEmpty || isDir) return
     let cancelled = false
-    // Aborts the matched viewer's `load` when the editor tears down (tab
-    // closed, path changed, session switched) or re-matches the viewer.
-    const controller = new AbortController()
     setLoad({ status: 'loading' })
-    const mediaUrlOf = (): string => mediaUrl(scope, path)
-    const apply = (action: EditorLoadAction): void => {
+    api.fsRead(scope, path).then((result) => {
       if (cancelled) return
-      switch (action.kind) {
-        case 'binary':
-          setLoad({ status: 'binary' })
-          return
-        case 'render':
-          setLoad({
-            status: 'ready',
-            viewer: action.viewer,
-            content: action.content,
-            truncated: action.truncated,
-            mediaUrl: action.mediaUrl,
-            customData: action.customData,
-          })
-          return
-        case 'customLoad':
-          void action.viewer.load?.(path, scope, controller.signal).then((data) => {
-            if (cancelled) return
-            setLoad({ status: 'ready', viewer: action.viewer, customData: data })
-          }).catch((error: unknown) => {
-            if (cancelled) return
-            setLoad({ status: 'error', message: error instanceof Error ? error.message : String(error) })
-          })
-          return
-        case 'fetchFsRead':
-          api.fsRead(scope, path).then((result) => {
-            if (cancelled) return
-            // Binary reads carry the head bytes for the detect re-match.
-            const outcome = planFsReadOutcome(action.viewer, {
-              binary: result.kind === 'binary',
-              content: result.kind === 'text' ? result.content : '',
-              truncated: result.truncated,
-              head: result.kind === 'binary' ? result.head : undefined,
-            }, (head) => ctx.get('betterSidebar')?.matchFileViewer(path, head), mediaUrlOf)
-            apply(outcome)
-          }).catch((error: unknown) => {
-            if (cancelled) return
-            setLoad({ status: 'error', message: error instanceof Error ? error.message : String(error) })
-          })
-          return
+      if (result.kind === 'binary') {
+        setLoad({ status: 'binary' })
+        return
       }
-    }
-    apply(planFirstMatch(ctx.get('betterSidebar')?.matchFileViewer(path), mediaUrlOf))
-    return () => { cancelled = true; controller.abort() }
-  }, [scope.sessionId, scope.cwd, path, ctx, showEmpty, isDir, reloadSeq])
-
-  // Save-then-refresh in preview mode (issue #167 part C): the edge into
-  // 'saved' (never a lingering 'saved' state) triggers exactly one reload, so
-  // a preview-mode Ctrl+S shows the fresh content immediately. Edit mode is
-  // left alone — reloading would remount the editor and drop the caret.
-  const prevSaveState = useRef<EditorToolbarState['saveState'] | undefined>(undefined)
-  useEffect(() => {
-    const current = toolbar?.saveState
-    if (prevSaveState.current !== 'saved' && current === 'saved' && toolbar?.mode === 'preview') {
-      setReloadSeq(sequence => sequence + 1)
-    }
-    prevSaveState.current = current
-  }, [toolbar?.saveState, toolbar?.mode])
+      setLoad({ status: 'ready', content: result.content, truncated: result.truncated })
+    }).catch((error: unknown) => {
+      if (cancelled) return
+      setLoad({ status: 'error', message: error instanceof Error ? error.message : String(error) })
+    })
+    return () => { cancelled = true }
+  }, [scope.sessionId, scope.cwd, path, showEmpty, isDir, reloadSeq])
 
   const treeOpen = treeOpenOf(tab)
   /** Persist the panel flag on the tab (survives reloads with the layout). */
@@ -392,33 +348,6 @@ export function EditorHost(props: {
     <div className={css.editor}>
       <div className={css.editorHeader}>
         <EditorPathInput key={path} path={path} cwd={scope.cwd} onOpen={openFile} />
-        {toolbar?.modes === true && (
-          <div className={css.editorModeToggle}>
-            <button
-              type="button"
-              className={clsx(css.editorModeButton, toolbar.mode === 'preview' && css.editorModeActive)}
-              onClick={() => {
-                // Issue #167 part B: returning from edit to preview reloads so
-                // the preview renders the just-saved content. A dirty draft
-                // (or a failed save) suppresses the reload — the draft only
-                // lives in the editor instance and a remount would drop it.
-                if (toolbar.mode === 'edit' && toolbar.dirty !== true && toolbar.saveState !== 'failed') {
-                  setReloadSeq(sequence => sequence + 1)
-                }
-                controlsRef.current?.setMode('preview')
-              }}
-            >
-              {t('preview')}
-            </button>
-            <button
-              type="button"
-              className={clsx(css.editorModeButton, toolbar.mode === 'edit' && css.editorModeActive)}
-              onClick={() => { controlsRef.current?.setMode('edit') }}
-            >
-              {t('edit')}
-            </button>
-          </div>
-        )}
         {toolbar?.dirty === true && <span className={css.dirtyDot} title={t('unsaved')} />}
         {toolbar?.editable === true && (
           <button
@@ -462,18 +391,19 @@ export function EditorHost(props: {
           {!showEmpty && load.status === 'loading' && <div className={css.editorPlaceholder}>{t('loading')}</div>}
           {!showEmpty && load.status === 'error' && <div className={css.editorError}>{load.message}</div>}
           {!showEmpty && load.status === 'binary' && <BinaryDownload scope={scope} path={path} />}
-          {!showEmpty && load.status === 'ready' && createElement(load.viewer.component, {
-            ctx, store, scope, path, title,
-            viewerId: load.viewer.id,
-            content: load.content,
-            truncated: load.truncated,
-            mediaUrl: load.mediaUrl,
-            customData: load.customData,
-            // The viewer's toolbar always hoists into this host's header.
-            toolbar: 'host',
-            onToolbarState,
-            onToolbarControls,
-          })}
+          {!showEmpty && load.status === 'ready' && (
+            <LazyTextEditor
+              ctx={ctx}
+              store={store}
+              scope={scope}
+              path={path}
+              content={load.content}
+              truncated={load.truncated}
+              toolbar="host"
+              onToolbarState={onToolbarState}
+              onToolbarControls={onToolbarControls}
+            />
+          )}
         </div>
         {treeOpen && (
           <div className={css.editorTreeDock} style={{ width: treeWidth }}>

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'