@yiln-dsh/dsh-plugin-file-explorer 0.4.0 → 0.5.0

package/README.md

@@ -1,16 +1,17 @@
-# dsh-plugin-file-explorer
+# @yiln-dsh/dsh-plugin-file-explorer
 
-A DSH `dsh.bundle` that replaces the built-in **details** column of the Web
-GUI with a workspace file explorer.
+A DSH `dsh.bundle` that contributes a workspace file explorer page to the
+`@yiln-dsh/dsh-plugin-right-panel` host.
 
-- Replaces the built-in tool-details right column while the bundle row is
-  mounted (it is restored automatically when the plugin is disabled/removed).
-- Auto-opens when a conversation (non-blank session) starts.
-- **Files** tab: lists the active session's workspace directory, with folder
+- Registers two independent right-panel pages: **Files** and **Git Graph**. The
+  host owns the right-column layout, navigation rail, width, and collapse
+  behavior.
+- **Files** page: lists the active session's workspace directory, with folder
   navigation, editable path input, parent/refresh buttons, file and folder
   icons, and file sizes. File rows reveal view / download / delete buttons on
-  hover; delete uses a second-click confirm.
-- **Git Graph** tab: a vscode/le-git-graph style commit graph rendered from
+  hover; delete uses a second-click confirm. Image View supports fullscreen,
+  25%-400% zoom, wheel zoom, and drag-to-pan after zooming.
+- **Git Graph** page: a vscode/le-git-graph style commit graph rendered from
   the repository containing the current directory —
   - colored lane graph with commit dots and merge curves (all branches or the
     current branch, refreshable),
@@ -21,35 +22,26 @@ GUI with a workspace file explorer.
     A/M/D/R status badges,
   - click a file to open its diff patch (commit shows `git show`, working tree
     shows `git diff HEAD`) in a dialog.
-- The column is a real layout column: it squeezes the conversation and its
-  width can be dragged between 300–520px with the native splitter handle.
-- The chosen width persists across sessions and page reloads (localStorage):
-  the plugin captures the shell layout store actions when the root entry wires
-  them, restores the saved width right after `openDetails()`, and saves the
-  column width after every resizer drag.
-- **Collapse to icon bar**: a collapse button sits left of the header title
-  (chevrons pointing right, matching the DSH session menu's compact icon
-  style). Clicking it closes the details column and leaves a slim rail pinned
-  to the right edge with two icons — **Files** and **Git Graph** — clicking
-  either reopens the drawer on that tab at the last chosen width. The layout
-  keeps the slot subtree mounted at width 0, so the rail survives and the
-  panel state is preserved.
+- The host keeps a real 56px right-edge icon rail when collapsed. Other
+  right-panel pages can appear alongside Files and overflow into the host's
+  searchable More menu.
 
 ## Layout
 
 | File | Content |
 | --- | --- |
 | `index.js` | Host half: registers exact `/ _dsh/file-explorer/*` routes backed by the Host `fs`/`subprocess` services, plus read-only git routes (`/ _dsh/file-explorer/git-log`, `git-commit`, `git-diff`, `git-status`) that run `git` with machine-readable separators and return JSON only. |
-| `client.js` | Client half: a static DSH client module registered into the `details` slot; Files + Git Graph tabs. |
+| `client.js` | Client half: registers independent keyed `right-panel.page` entries for Files and Git Graph. |
 | `cordis.patch.yml` | Composition patch that mounts the host row — declared with `inject: [webServer]`, so it activates only after the stock webserver service (`127.0.0.1`) is up. |
 
 ## Install
 
-The plugin is version `0.3.0` from its own `package.json`.
+The package version is `@yiln-dsh/dsh-plugin-file-explorer@0.5.0`.
 
-### Local source directory
+The right-panel package must be installed in the same `web` profile:
 
 ```bash
+dsh plugin --profile web add file:/path/to/dsh-plugin-right-panel
 dsh plugin --profile web add file:/path/to/dsh-plugin-file-explorer
 ```
 
@@ -61,18 +53,18 @@ pnpm pack
 ```
 
 ```bash
-dsh plugin --profile web add ./dsh-plugin-file-explorer-0.2.0.tgz
+dsh plugin --profile web add ./yiln-dsh-dsh-plugin-file-explorer-0.5.0.tgz
 ```
 
 ### npm package
 
 ```bash
 cd /path/to/dsh-plugin-file-explorer
-npm publish
+npm publish --access public
 ```
 
 ```bash
-dsh plugin --profile web add dsh-plugin-file-explorer
+dsh plugin --profile web add @yiln-dsh/dsh-plugin-file-explorer@latest
 ```
 
 The profile must be the `web` profile. The host row serves the API routes and
@@ -83,8 +75,9 @@ apply the new profile composition.
 
 - The Host falls back to `sandboxPolicy.workspaceRoot` when no path is passed,
   and returns `{ ok, path, parent, entries }` JSON — never live objects.
-- `read` previews up to 256 KiB of UTF-8 text; `download` returns a base64
-  data URL (64 MiB cap) that the browser triggers with `<a download>`.
+- `read` previews up to 1 MiB of UTF-8 text or 16 MiB of recognized images;
+  image previews return a data URL for inline rendering. `download` returns a
+  base64 data URL (64 MiB cap) that the browser triggers with `<a download>`.
 - `delete` removes regular files (`rm -f`) and directories recursively
   (`rm -rf`); both are called only after a second-click confirm in the UI.
 - Git routes are read-only. They resolve the repository root with
@@ -97,7 +90,6 @@ apply the new profile composition.
   sentinel) and file paths against a non-option, non-control-character check.
 - Rows have a fixed 34px height, so the hover action swap never changes the
   row height; directories reveal a delete-only action set on hover.
-- The browser module uses the `details` slot (scope: session), registering at
-  priority `-6` to shadow the built-in tool-details occupant (priority `0`),
-  the `layout` service (`openDetails` / `closeDetails`), the standard
-  `useSessions` hook, and its own stylesheet.
+- The browser module registers `file-explorer.files` and
+  `file-explorer.git` into the keyed `right-panel.page` Slot and uses the
+  standard session `useSessions` hook.

package/client.js

@@ -1,11 +1,10 @@
 /**
  * dsh-plugin-file-explorer — browser bundle (static DSH client module).
  *
- * Renders the file explorer into the `details` slot (right layout column),
- * replacing the native tool-details panel while running. The column squeezes
- * the conversation and keeps the native resizer handle.
+ * Registers the file explorer as a page in the `right-panel` host. The host
+ * owns the right layout column, width, navigation rail, and page switching.
  *
- * Two views behind the header tabs:
+ * Two views behind the page's local tabs:
  *  - Files: directory browser (list / read / download / delete via the
  *    /_dsh/file-explorer API).
  *  - Git Graph: a vscode/git-graph style commit DAG with colored lanes, ref
@@ -20,12 +19,12 @@ window.__ModuleLoader__.load({
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		let React = require("react");
 
-		const inject = ["slots", "layout"];
+		const inject = ["slots", "rightPanel"];
 
 		function apply(ctx) {
 			const slots = ctx.get('slots')
-			const layout = ctx.get('layout')
-			if (slots === undefined) return
+			const rightPanel = ctx.get('rightPanel')
+			if (slots === undefined || rightPanel === undefined) return
 
 			const style = document.createElement("style");
 			style.id = "dsh-plugin-file-explorer-style";
@@ -77,35 +76,6 @@ window.__ModuleLoader__.load({
 .dsh-fe-icon:hover {
   background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2, #e7e5e4));
 }
-.dsh-fe-tabs {
-  display: flex;
-  gap: 2px;
-  padding: 8px 12px 0;
-}
-.dsh-fe-tab {
-  flex: 1 1 0;
-  height: 26px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--dsw-alias-label-secondary, #4b5563);
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-}
-.dsh-fe-tab:hover {
-  background: var(--dsw-alias-bg-layer-2, #e7e5e4);
-}
-.dsh-fe-tab-active,
-.dsh-fe-tab-active:hover {
-  background: var(--dsw-alias-bg-layer-2, #e7e5e4);
-  color: var(--dsw-alias-label-primary, #111827);
-  font-weight: 600;
-}
 .dsh-fe-path {
   min-width: 0;
   margin: 8px 12px 0;
@@ -298,6 +268,14 @@ window.__ModuleLoader__.load({
   box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
   overflow: hidden;
 }
+.dsh-fe-modal-fullscreen {
+  width: 100vw;
+  height: 100vh;
+  max-width: none;
+  max-height: none;
+  border: 0;
+  border-radius: 0;
+}
 .dsh-fe-modal-head {
   display: flex;
   align-items: center;
@@ -319,6 +297,29 @@ window.__ModuleLoader__.load({
   color: var(--dsw-alias-label-secondary, #6b7280);
   font-size: 12px;
 }
+.dsh-fe-image-tools {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.dsh-fe-image-tool {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+}
+.dsh-fe-image-tool:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.dsh-fe-image-zoom-label {
+  display: inline-block;
+  min-width: 40px;
+  color: var(--dsw-alias-label-secondary, #6b7280);
+  font-size: 11px;
+  text-align: center;
+  white-space: nowrap;
+}
 .dsh-fe-modal-body {
   flex: 1 1 auto;
   min-height: 0;
@@ -331,6 +332,47 @@ window.__ModuleLoader__.load({
   font-size: 12px;
   line-height: 18px;
 }
+.dsh-fe-modal-body-image {
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  min-height: 160px;
+  padding: 0;
+  overflow: hidden;
+  background: var(--dsw-alias-bg-base, #f5f5f4);
+  white-space: normal;
+}
+.dsh-fe-image-stage {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  touch-action: none;
+}
+.dsh-fe-preview-image {
+  display: block;
+  max-width: 100%;
+  max-height: 60vh;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-drag: none;
+  transition: transform 120ms ease;
+}
+.dsh-fe-modal-fullscreen .dsh-fe-preview-image {
+  max-height: calc(100vh - 64px);
+}
+.dsh-fe-preview-image-pannable {
+  cursor: grab;
+}
+.dsh-fe-preview-image-dragging {
+  cursor: grabbing;
+  transition: none;
+}
 .dsh-git-bar {
   display: flex;
   align-items: center;
@@ -515,154 +557,19 @@ window.__ModuleLoader__.load({
   font-size: 12px;
   unicode-bidi: plaintext;
 }
-.dsh-fe-rail {
+.dsh-fe-page {
   height: 100%;
-  width: 100%;
-  box-sizing: border-box;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  padding: 10px 6px;
+  box-sizing: border-box;
+  overflow: hidden;
   background: var(--dsw-specific-sidebar-fill, var(--dsw-alias-bg-base, #f5f5f4));
-  border-left: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.16));
-}
-/* While collapsed, keep a real RAIL_WIDTH column in the layout (like the left
-   sidebar's 56px rail) instead of a floating overlay. This !important rule
-   overrides React's inline grid-template-columns on the app frame; the data
-   attribute is added by applyRail() and removed on expand/unload. */
-[data-dsh-fe-rail] {
-  grid-template-columns: var(--dsh-fe-rail-sidebar, 280px) minmax(0, 1fr) 56px !important;
-}
-.dsh-fe-rail-button {
-  width: 36px;
-  height: 36px;
-  border: 0;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--dsw-alias-label-secondary, #4b5563);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.dsh-fe-rail-button:hover {
-  background: var(--dsw-alias-bg-layer-2, #e7e5e4);
-  color: var(--dsw-alias-brand-primary, #4f46e5);
+  color: var(--dsw-alias-label-primary, #111827);
 }
 `;
 			document.head.append(style);
 
-			// --- details-column width persistence ---------------------------------
-			// The shell's layout store is transient: openDetails() resets the column
-			// to its 360px contract default on every mount and session switch. The
-			// bound store actions reach the LayoutController after every client
-			// module has applied (the root entry's inject hook fires on first
-			// render and again on re-register), so wrapping attachPanels on the
-			// prototype captures them reliably. setDetails then restores the last
-			// user-chosen width, and a document-level pointerup listener persists
-			// the column width after each resizer drag.
-			const WIDTH_KEY = "dsh-plugin-file-explorer.detailsWidth";
-			const WIDTH_MIN = 300; // the layout contract's clamp floor
-			let panelActions = null;
-			let savedWidth = 0;
-			try { savedWidth = Number(window.localStorage.getItem(WIDTH_KEY)) || 0 } catch (_e) { }
-
-			const findDetailsColumn = () => {
-				// The details column's own class is the reliable anchor: the drag
-				// handle's previousElementSibling is the sidebar handle or the
-				// overlay layer, never the column itself.
-				const byClass = document.querySelector('[class*="detailsCol"]')
-				if (byClass !== null) return byClass
-				const handle = document.querySelector('[data-side="details"]')
-				if (handle !== null && handle.previousElementSibling !== null) return handle.previousElementSibling
-				return null
-			}
-			const persistWidth = () => {
-				const column = findDetailsColumn()
-				if (column === null) return
-				const width = Math.round(column.getBoundingClientRect().width)
-				if (width < WIDTH_MIN) return
-				savedWidth = width
-				try { window.localStorage.setItem(WIDTH_KEY, String(width)) } catch (_e) { }
-			}
-			const onDocumentPointerUp = () => { persistWidth() }
-			document.addEventListener("pointerup", onDocumentPointerUp, true)
-			ctx.effect(() => () => document.removeEventListener("pointerup", onDocumentPointerUp, true))
-
-			if (layout !== undefined) {
-				const proto = Object.getPrototypeOf(layout)
-				if (proto !== null && typeof proto.attachPanels === "function") {
-					const originalAttach = proto.attachPanels
-					proto.attachPanels = function (actions) {
-						panelActions = actions
-						return originalAttach.call(this, actions)
-					}
-					ctx.effect(() => () => { proto.attachPanels = originalAttach })
-				}
-			}
-			const restoreWidth = () => {
-				if (savedWidth < WIDTH_MIN) return
-				if (panelActions === null || typeof panelActions.setDetails !== "function") return
-				try { panelActions.setDetails(savedWidth) } catch (_e) { }
-			}
-
-			// --- collapsed rail as a real layout column --------------------------
-			// The layout contract gives the sidebar a 56px rail when closed but
-			// closes the details column to 0px (no rail). To collapse like the left
-			// sidebar, keep the store closed (no drag handle / border) and force the
-			// frame's third grid track to RAIL_WIDTH via an !important stylesheet
-			// rule keyed on a data attribute we own. CSS !important beats React's
-			// inline grid style, so there is no fight with React re-renders: set the
-			// attribute to collapse, remove it to expand. A MutationObserver only
-			// refreshes the sidebar-width variable (the first track) when the app
-			// re-renders the frame.
-			const RAIL_WIDTH = 56;
-			let railActive = false;
-			const frameOfDetails = () => {
-				const column = findDetailsColumn();
-				if (column === null || column.parentElement === null) return null;
-				return column.parentElement;
-			};
-			const syncRailVar = () => {
-				const frame = frameOfDetails();
-				if (frame === null) return;
-				const sideCol = frame.children.length > 0 ? frame.children[0] : null;
-				const sidebarPx = sideCol !== null ? Math.round(sideCol.getBoundingClientRect().width) : 280;
-				try { frame.style.setProperty("--dsh-fe-rail-sidebar", `${sidebarPx}px`) } catch (_e) { }
-			};
-			const applyRail = () => {
-				const frame = frameOfDetails();
-				if (frame === null) return;
-				if (railActive) {
-					frame.setAttribute("data-dsh-fe-rail", "");
-					syncRailVar();
-				} else {
-					frame.removeAttribute("data-dsh-fe-rail");
-				}
-			};
-			const releaseRail = () => {
-				railActive = false;
-				applyRail();
-			};
-			let railObserver = null;
-			if (typeof MutationObserver === "function") {
-				railObserver = new MutationObserver(() => {
-					if (railActive) syncRailVar();
-				});
-				ctx.effect(() => {
-					const frame = frameOfDetails();
-					if (frame !== null) railObserver.observe(frame, { attributes: true, attributeFilter: ["style"] });
-					return () => {
-						railObserver?.disconnect();
-						const frame = frameOfDetails();
-						if (frame !== null) frame.removeAttribute("data-dsh-fe-rail");
-						railActive = false;
-					};
-				});
-			}
-			// -----------------------------------------------------------------------
-
 			async function api(method, payload) {
 				const options = { headers: { "content-type": "application/json" } };
 				options.method = "POST";
@@ -726,6 +633,29 @@ window.__ModuleLoader__.load({
 				React.createElement('line', { x1: '18', y1: '6', x2: '6', y2: '18' }),
 				React.createElement('line', { x1: '6', y1: '6', x2: '18', y2: '18' }),
 			)
+			const zoomOutIcon = React.createElement(React.Fragment, null,
+				React.createElement('circle', { cx: '10.5', cy: '10.5', r: '6.5' }),
+				React.createElement('line', { x1: '15.5', y1: '15.5', x2: '21', y2: '21' }),
+				React.createElement('line', { x1: '8', y1: '10.5', x2: '13', y2: '10.5' }),
+			)
+			const zoomInIcon = React.createElement(React.Fragment, null,
+				React.createElement('circle', { cx: '10.5', cy: '10.5', r: '6.5' }),
+				React.createElement('line', { x1: '15.5', y1: '15.5', x2: '21', y2: '21' }),
+				React.createElement('line', { x1: '8', y1: '10.5', x2: '13', y2: '10.5' }),
+				React.createElement('line', { x1: '10.5', y1: '8', x2: '10.5', y2: '13' }),
+			)
+			const fullscreenIcon = React.createElement(React.Fragment, null,
+				React.createElement('polyline', { points: '8 3 3 3 3 8' }),
+				React.createElement('polyline', { points: '16 3 21 3 21 8' }),
+				React.createElement('polyline', { points: '8 21 3 21 3 16' }),
+				React.createElement('polyline', { points: '16 21 21 21 21 16' }),
+			)
+			const fullscreenExitIcon = React.createElement(React.Fragment, null,
+				React.createElement('polyline', { points: '9 3 9 9 3 9' }),
+				React.createElement('polyline', { points: '15 3 15 9 21 9' }),
+				React.createElement('polyline', { points: '9 21 9 15 3 15' }),
+				React.createElement('polyline', { points: '15 21 15 15 21 15' }),
+			)
 			// Mirror of DeepSeek's sidebar IconPanelLeftOutline16 (spine on the
 			// right): this panel lives on the right edge, so the glyph mirrors the
 			// left sidebar's, signaling collapse into the right-edge icon rail.
@@ -1236,7 +1166,7 @@ window.__ModuleLoader__.load({
 				)
 			}
 
-			function FileExplorerPanel(props) {
+			function FileExplorerPage(props) {
 				if (typeof props.useSessions !== 'function') return null
 
 				const sessionId = props.useSessions((state) => {
@@ -1263,24 +1193,17 @@ window.__ModuleLoader__.load({
 				const [draftPath, setDraftPath] = React.useState('')
 				const [preview, setPreview] = React.useState(null)
 				const [previewLoading, setPreviewLoading] = React.useState(false)
+				const [imageScale, setImageScale] = React.useState(1)
+				const [imageOffset, setImageOffset] = React.useState({ x: 0, y: 0 })
+				const [imageFullscreen, setImageFullscreen] = React.useState(false)
+				const [imageDragging, setImageDragging] = React.useState(false)
+				const imageDrag = React.useRef(null)
 				const [pendingDelete, setPendingDelete] = React.useState(null)
-				const [view, setView] = React.useState('files')
-				const [collapsed, setCollapsed] = React.useState(false)
-
-				React.useEffect(() => {
-					if (sessionId === undefined) return
-					setCollapsed(false)
-					if (layout !== undefined) {
-						try { layout.openDetails() } catch (_e) { }
-					}
-					// Same-tick store updates batch in React, so restoring right after
-					// openDetails() replaces the 360px default without a visible jump.
-					restoreWidth()
-				}, [sessionId])
 
 				React.useEffect(() => {
 					if (sessionId === undefined) {
-						releaseRail()
+						setParentPath(null)
+						setRequestPath('')
 						return
 					}
 					setParentPath(null)
@@ -1332,34 +1255,6 @@ window.__ModuleLoader__.load({
 					return aDir - bDir || a.name.localeCompare(b.name)
 				})
 				const isRoot = parentPath === null || parentPath === currentPath
-				// Collapse into a slim icon rail that keeps a real 56px column in
-				// the layout (like the left sidebar's rail): the details store stays
-				// closed (no drag handle / border), and applyRail() toggles the
-				// [data-dsh-fe-rail] attribute so the !important stylesheet rule
-				// overrides the frame's third grid track. A MutationObserver keeps
-				// the sidebar-width variable fresh across app re-renders.
-				const collapse = () => {
-					setCollapsed(true)
-					railActive = true
-					setPreview(null)
-					setPendingDelete(null)
-					setEditingPath(false)
-					if (layout !== undefined) {
-						try { layout.closeDetails() } catch (_e) { }
-					}
-					applyRail()
-				}
-				const expand = (nextView) => {
-					releaseRail()
-					setCollapsed(false)
-					setView(nextView)
-					if (layout !== undefined) {
-						try { layout.openDetails() } catch (_e) { }
-					}
-					// Same-tick store updates batch in React, so restoring right after
-					// openDetails() replaces the 360px default without a visible jump.
-					restoreWidth()
-				}
 				const reload = () => { setPendingDelete(null); setReloadTick((tick) => tick + 1) }
 				const startEditPath = () => {
 					setDraftPath(currentPath)
@@ -1373,8 +1268,67 @@ window.__ModuleLoader__.load({
 					setRequestPath(next)
 				}
 
+				const resetImageZoom = () => {
+					imageDrag.current = null
+					setImageDragging(false)
+					setImageScale(1)
+					setImageOffset({ x: 0, y: 0 })
+				}
+				const resetImageView = () => {
+					resetImageZoom()
+					setImageFullscreen(false)
+				}
+				const closePreview = () => {
+					resetImageView()
+					setPreview(null)
+				}
+				const setImageZoom = (value) => {
+					const next = Math.max(0.25, Math.min(4, Math.round(value * 4) / 4))
+					setImageScale(next)
+					if (next <= 1) setImageOffset({ x: 0, y: 0 })
+				}
+				const changeImageZoom = (delta) => setImageZoom(imageScale + delta)
+				const handleImageWheel = (event) => {
+					event.preventDefault()
+					changeImageZoom(event.deltaY < 0 ? 0.25 : -0.25)
+				}
+				const startImageDrag = (event) => {
+					if (imageScale <= 1 || event.button !== 0) return
+					imageDrag.current = {
+						pointerId: event.pointerId,
+						startX: event.clientX,
+						startY: event.clientY,
+						originX: imageOffset.x,
+						originY: imageOffset.y,
+					}
+					try { event.currentTarget.setPointerCapture(event.pointerId) } catch (_e) { }
+					setImageDragging(true)
+				}
+				const moveImageDrag = (event) => {
+					const drag = imageDrag.current
+					if (!drag || drag.pointerId !== event.pointerId) return
+					setImageOffset({
+						x: drag.originX + event.clientX - drag.startX,
+						y: drag.originY + event.clientY - drag.startY,
+					})
+				}
+				const endImageDrag = (event) => {
+					const drag = imageDrag.current
+					if (!drag || drag.pointerId !== event.pointerId) return
+					imageDrag.current = null
+					setImageDragging(false)
+					try { event.currentTarget.releasePointerCapture(event.pointerId) } catch (_e) { }
+				}
+				const handlePreviewKeyDown = (event) => {
+					if (event.key !== 'Escape') return
+					event.stopPropagation()
+					if (imageFullscreen) setImageFullscreen(false)
+					else closePreview()
+				}
+
 				const openPreview = (entry) => {
 					setPendingDelete(null)
+					resetImageView()
 					setPreviewLoading(true)
 					setPreview(null)
 					api('read', { path: entry.path })
@@ -1519,103 +1473,168 @@ window.__ModuleLoader__.load({
 					),
 				)
 
-				// Collapsed: a slim icon rail (file / git) that keeps a real 56px
-				// column in the layout (the [data-dsh-fe-rail] !important grid rule;
-				// see applyRail above), mirroring the left sidebar's collapsed rail.
-				// Placed after every handler declaration: a collapsed render must not
-				// return early and leave `expand` uninitialized (TDZ error on click).
-				if (collapsed) {
-					return React.createElement('div', {
-						className: 'dsh-fe-rail',
-						role: 'region',
-						'aria-label': 'File explorer (collapsed)',
-					},
-						React.createElement('button', {
-							type: 'button',
-							className: 'dsh-fe-rail-button',
-							onClick: () => expand('files'),
-							title: 'Files',
-							'aria-label': 'Open file explorer',
-						}, svgIcon(folderIcon, 16)),
-						React.createElement('button', {
-							type: 'button',
-							className: 'dsh-fe-rail-button',
-							onClick: () => expand('git'),
-							title: 'Git Graph',
-							'aria-label': 'Open git graph',
-						}, svgIcon(branchIcon, 16)),
-					)
-				}
-
 				return React.createElement(React.Fragment, null,
 					React.createElement('div', {
-						className: 'dsh-fe-panel',
+						className: 'dsh-fe-page',
 						role: 'region',
-						'aria-label': 'File explorer',
+						'aria-label': 'Files',
 					},
-						React.createElement('div', { className: 'dsh-fe-header' },
-							React.createElement('button', {
-								type: 'button',
-								className: 'dsh-fe-icon',
-								onClick: collapse,
-								'aria-label': 'Collapse file explorer into icon bar',
-								title: 'Collapse',
-							}, collapseIcon),
-							React.createElement('div', { className: 'dsh-fe-title' }, view === 'git' ? 'Git Graph' : 'Files'),
-						),
-						React.createElement('div', { className: 'dsh-fe-tabs' },
-							React.createElement('button', {
-								type: 'button',
-								className: 'dsh-fe-tab' + (view === 'files' ? ' dsh-fe-tab-active' : ''),
-								onClick: () => setView('files'),
-							}, svgIcon(folderIcon, 13), 'Files'),
-							React.createElement('button', {
-								type: 'button',
-								className: 'dsh-fe-tab' + (view === 'git' ? ' dsh-fe-tab-active' : ''),
-								onClick: () => setView('git'),
-							}, svgIcon(branchIcon, 13), 'Git Graph'),
-						),
-						view === 'git'
-							? React.createElement(GitGraphView, { api, cwd })
-							: filesView,
+						filesView,
 					),
 					preview &&
 						React.createElement('div', {
 							className: 'dsh-fe-overlay',
-							onClick: () => setPreview(null),
+							onClick: closePreview,
 						},
 							React.createElement('div', {
-								className: 'dsh-fe-modal',
+								className: preview.kind === 'image' && imageFullscreen ? 'dsh-fe-modal dsh-fe-modal-fullscreen' : 'dsh-fe-modal',
 								role: 'dialog',
 								'aria-label': 'File preview',
+								'aria-modal': true,
+								tabIndex: -1,
+								onKeyDown: handlePreviewKeyDown,
 								onClick: (event) => event.stopPropagation(),
 							},
 								React.createElement('div', { className: 'dsh-fe-modal-head' },
 									React.createElement('div', { className: 'dsh-fe-modal-title' }, preview.name || 'Preview'),
-									React.createElement('div', { className: 'dsh-fe-modal-meta' }, preview.binary ? 'Binary' : formatSize(preview.size)),
+									React.createElement('div', { className: 'dsh-fe-modal-meta' }, preview.kind === 'image' ? `Image / ${formatSize(preview.size)}` : preview.binary ? 'Binary' : formatSize(preview.size)),
+									preview.kind === 'image' && preview.dataUrl
+										? React.createElement('div', {
+											className: 'dsh-fe-image-tools',
+											role: 'toolbar',
+											'aria-label': 'Image controls',
+										},
+											React.createElement('button', {
+												type: 'button',
+												className: 'dsh-fe-icon dsh-fe-image-tool',
+												disabled: imageScale <= 0.25,
+												onClick: () => changeImageZoom(-0.25),
+												'aria-label': 'Zoom out',
+												title: 'Zoom out',
+											}, svgIcon(zoomOutIcon, 14)),
+											React.createElement('button', {
+												type: 'button',
+												className: 'dsh-fe-icon dsh-fe-image-tool',
+												onClick: resetImageZoom,
+												'aria-label': 'Reset image zoom',
+												title: 'Reset zoom',
+											}, React.createElement('span', { className: 'dsh-fe-image-zoom-label' }, `${Math.round(imageScale * 100)}%`)),
+											React.createElement('button', {
+												type: 'button',
+												className: 'dsh-fe-icon dsh-fe-image-tool',
+												disabled: imageScale >= 4,
+												onClick: () => changeImageZoom(0.25),
+												'aria-label': 'Zoom in',
+												title: 'Zoom in',
+											}, svgIcon(zoomInIcon, 14)),
+											React.createElement('button', {
+												type: 'button',
+												className: 'dsh-fe-icon dsh-fe-image-tool',
+												onClick: () => setImageFullscreen((value) => !value),
+												'aria-label': imageFullscreen ? 'Exit fullscreen' : 'Enter fullscreen',
+												title: imageFullscreen ? 'Exit fullscreen' : 'Fullscreen',
+											}, svgIcon(imageFullscreen ? fullscreenExitIcon : fullscreenIcon, 14)),
+										)
+										: null,
 									React.createElement('button', {
 										type: 'button',
 										className: 'dsh-fe-icon',
-										onClick: () => setPreview(null),
+										onClick: closePreview,
 										'aria-label': 'Close preview',
 									}, svgIcon(closeIcon, 14)),
 								),
-								React.createElement('div', { className: 'dsh-fe-modal-body' },
+								React.createElement('div', {
+									className: preview.kind === 'image' ? 'dsh-fe-modal-body dsh-fe-modal-body-image' : 'dsh-fe-modal-body',
+									onWheel: preview.kind === 'image' && preview.dataUrl ? handleImageWheel : undefined,
+									onPointerDown: preview.kind === 'image' && preview.dataUrl ? startImageDrag : undefined,
+									onPointerMove: preview.kind === 'image' && preview.dataUrl ? moveImageDrag : undefined,
+									onPointerUp: preview.kind === 'image' && preview.dataUrl ? endImageDrag : undefined,
+									onPointerCancel: preview.kind === 'image' && preview.dataUrl ? endImageDrag : undefined,
+								},
 									previewLoading
 										? 'Loading...'
 										: preview.error
 											? preview.error
-											: preview.text !== undefined ? preview.text : preview.tooLarge ? 'File is too large to preview here' : '(No preview)',
+											: preview.kind === 'image'
+												? preview.dataUrl
+													? React.createElement('div', { className: 'dsh-fe-image-stage' },
+														React.createElement('img', {
+															className: 'dsh-fe-preview-image' + (imageScale > 1 ? ' dsh-fe-preview-image-pannable' : '') + (imageDragging ? ' dsh-fe-preview-image-dragging' : ''),
+															style: { transform: `translate3d(${imageOffset.x}px, ${imageOffset.y}px, 0) scale(${imageScale})` },
+															src: preview.dataUrl,
+															alt: preview.name || 'Image preview',
+															draggable: false,
+														})
+													)
+													: preview.tooLarge ? 'Image is too large to preview here' : '(No preview)'
+											: preview.text !== undefined && preview.text !== null
+												? preview.text
+												: preview.tooLarge
+													? 'File is too large to preview here'
+													: preview.binary ? 'Binary file cannot be previewed' : '(No preview)',
 								),
 							),
 						),
 				)
 			}
 
-			ctx.effect(() => slots.inject('details', () => slots.register(
-				{ name: 'details', priority: -6 },
-				FileExplorerPanel,
-			)))
+			function FileExplorerGitPage(props) {
+				if (typeof props.useSessions !== 'function') return null
+
+				const sessionId = props.useSessions((state) => {
+					const current = state.current
+					if (current === undefined) return undefined
+					const row = state.byId[current]
+					if (!row || row.blank === true) return undefined
+					return current
+				})
+				const cwd = props.useSessions((state) => {
+					const current = state.current
+					if (current === undefined) return undefined
+					const row = state.byId[current]
+					return row ? row.cwd : undefined
+				})
+
+				if (sessionId === undefined) return null
+				return React.createElement('div', {
+					className: 'dsh-fe-page',
+					role: 'region',
+					'aria-label': 'Git Graph',
+				}, React.createElement(GitGraphView, { api, cwd }))
+			}
+
+			ctx.effect(() => {
+				const disposeFilesPage = rightPanel.registerPage({
+					id: 'file-explorer.files',
+					title: 'Files',
+					group: 'Workspace',
+					order: 20,
+					placement: 'rail',
+					icon: (size) => svgIcon(folderIcon, size),
+				})
+				const disposeGitPage = rightPanel.registerPage({
+					id: 'file-explorer.git',
+					title: 'Git Graph',
+					group: 'Workspace',
+					order: 21,
+					placement: 'rail',
+					icon: (size) => svgIcon(branchIcon, size),
+				})
+				const disposeFilesSlot = slots.inject('right-panel.page', () => slots.register({
+					name: 'right-panel.page',
+					key: 'file-explorer.files',
+				}, FileExplorerPage))
+				const disposeGitSlot = slots.inject('right-panel.page', () => slots.register({
+					name: 'right-panel.page',
+					key: 'file-explorer.git',
+				}, FileExplorerGitPage))
+				return () => {
+					disposeFilesSlot()
+					disposeGitSlot()
+					disposeFilesPage()
+					disposeGitPage()
+				}
+			})
 		}
 
 		exports.apply = apply;

package/index.js

@@ -2,7 +2,7 @@
  * dsh-plugin-file-explorer — Host half (static DSH bundle).
  *
  * Registers exact HTTP routes under /_dsh/file-explorer for the browser
- * bundle: list (with parent path), read (text preview), download (data URL),
+ * bundle: list (with parent path), read (text/image preview), download (data URL),
  * and delete.
  */
 
@@ -145,12 +145,32 @@ export function apply(ctx) {
       const target = await fs.resolve(req.path)
       const info = await fs.stat(target)
       const size = info && typeof info.size === 'number' ? info.size : null
-      const limit = 256 * 1024
+      const name = target.displayPath.split('/').pop()
+      const mime = guessMime(name)
+      const isImage = mime.startsWith('image/')
+      const limit = isImage ? 16 * 1024 * 1024 : 1024 * 1024
       if (size !== null && size > limit) {
-        sendJson(res, 200, { ok: true, name: target.displayPath.split('/').pop(), size, tooLarge: true })
+        sendJson(res, 200, {
+          ok: true,
+          name,
+          size,
+          tooLarge: true,
+          ...(isImage ? { kind: 'image', mime } : {}),
+        })
         return
       }
       const bytes = await fs.readBytes(target, undefined, limit)
+      if (isImage) {
+        sendJson(res, 200, {
+          ok: true,
+          name,
+          size,
+          kind: 'image',
+          mime,
+          dataUrl: `data:${mime};base64,${bytesToBase64(bytes)}`,
+        })
+        return
+      }
       const text = new TextDecoder('utf-8', { fatal: false }).decode(bytes)
       let binary = false
       for (let i = 0; i < bytes.length; i += 1) {
@@ -159,7 +179,7 @@ export function apply(ctx) {
       if (!binary && text.replace(/\uFFFD/g, '').length * 10 < text.length * 9) binary = true
       sendJson(res, 200, {
         ok: true,
-        name: target.displayPath.split('/').pop(),
+        name,
         size,
         text: binary ? null : text,
         binary,

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@yiln-dsh/dsh-plugin-file-explorer",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "publishConfig": {
     "access": "public"
   },
-  "description": "DSH bundle plugin that replaces the Web GUI details column with a workspace file explorer.",
+  "description": "DSH bundle plugin that contributes a workspace file explorer page to the right-panel host.",
   "type": "module",
   "main": "index.js",
   "exports": {
@@ -18,6 +18,7 @@
     },
     "client": {
       "inject": [
+        "@yiln-dsh/dsh-plugin-right-panel",
         "@deepseek-ai/dsh-client-runtime",
         "@deepseek-ai/dsh-client-ui-layout",
         "@deepseek-ai/dsh-client-ui-renderer"
@@ -35,7 +36,8 @@
     "@deepseek-ai/cordis": ">=4.0.0",
     "@deepseek-ai/dsh-client-runtime": ">=0.1.0-rc.0",
     "@deepseek-ai/dsh-client-ui-layout": ">=0.1.0-rc.0",
-    "@deepseek-ai/dsh-client-ui-renderer": ">=0.1.0-rc.0"
+    "@deepseek-ai/dsh-client-ui-renderer": ">=0.1.0-rc.0",
+    "@yiln-dsh/dsh-plugin-right-panel": ">=0.1.0"
   },
   "engines": {
     "node": ">=22"