dsh-remote-vs 0.8.9 → 0.9.1

package/src/client/FloatingEditorWindow.tsx

@@ -0,0 +1,494 @@
+/**
+ * The floating editor window: the plugin's ONE editor pane hosted in a
+ * draggable, resizable frame above the app shell.
+ *
+ * It is mounted by the client entry into the host's frame-wide overlay slot
+ * (`shell.overlay`) and reads the same module-level store as every other
+ * surface, so tabs / previews / diffs / find / change marks / undo / @file are
+ * not a re-implementation: this file only owns the FRAME (position, size,
+ * z-order, drag + resize + zoom) and the handoff around the mount swap.
+ *
+ * The mount is exclusive: `EditorPane` must exist exactly once, so the centre
+ * conversation view and the sidebar fallback render a placeholder while
+ * `editorSurface === 'float'` (see `FloatingEditorPlaceholder`).
+ */
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react'
+import type { Context } from '@deepseek-ai/cordis'
+import { EditorPane } from './EditorPane.tsx'
+import { useBootstrap, useExplorer, setFloatEditorAvailable } from './store.tsx'
+import { DialogHost, IconClose } from './vsc/kit.tsx'
+import {
+  FLOAT_BALL_SIZE,
+  FLOAT_FONT_DEFAULT,
+  ballFromRect,
+  clampBallPosition,
+  clampFloatRect,
+  defaultFloatRect,
+  dragFloatRect,
+  isBallClick,
+  maximizeFloatRect,
+  parseBallPosition,
+  parseFloatFontSize,
+  parseFloatRect,
+  resizeFloatRect,
+  serializeBallPosition,
+  serializeFloatRect,
+  stepFloatZoom,
+  type FloatPoint,
+  type FloatRect,
+  type FloatResizeHandle,
+} from './float-editor.ts'
+
+/** Where the last window rect is remembered (per browser/profile). */
+const RECT_KEY = 'dsh-remote-vs.float.rect'
+/** Where the last editor font size is remembered. */
+const FONT_KEY = 'dsh-remote-vs.float.font'
+/** Where the minimized ball's spot is remembered. */
+const BALL_KEY = 'dsh-remote-vs.float.ball'
+
+/** The resize grips, in the order they are rendered. */
+const RESIZE_HANDLES: readonly FloatResizeHandle[] = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw']
+
+type DragState =
+  | { kind: 'move'; pointerX: number; pointerY: number; rect: FloatRect }
+  | { kind: 'resize'; handle: FloatResizeHandle; pointerX: number; pointerY: number; rect: FloatRect }
+  /** Dragging the minimized ball; `start` is its origin when the press began. */
+  | { kind: 'ball'; pointerX: number; pointerY: number; start: FloatPoint }
+
+function readViewport(): { width: number; height: number } {
+  return { width: window.innerWidth, height: window.innerHeight }
+}
+
+function readStoredRect(): FloatRect {
+  const viewport = readViewport()
+  try {
+    const stored = parseFloatRect(localStorage.getItem(RECT_KEY), viewport)
+    if (stored !== undefined) return stored
+  } catch {
+    // Private mode: the default rect is fine.
+  }
+  return defaultFloatRect(viewport)
+}
+
+function readStoredFontSize(): number {
+  try {
+    return parseFloatFontSize(localStorage.getItem(FONT_KEY))
+  } catch {
+    return FLOAT_FONT_DEFAULT
+  }
+}
+
+/**
+ * The ball's remembered spot, or undefined the first time.
+ *
+ * Read at open, not at minimize: the spot belongs to the feature (per browser
+ * profile), and re-deriving it from the window corner on every minimize is what
+ * made the "remembered" claim false. A stale spot from a bigger screen is
+ * clamped by the parser, so it stays clickable.
+ */
+function readStoredBall(): FloatPoint | undefined {
+  const viewport = readViewport()
+  try {
+    return parseBallPosition(localStorage.getItem(BALL_KEY), viewport)
+  } catch {
+    return undefined
+  }
+}
+
+/** The window frame plus the editor. `ctx` is only needed for the boot hook. */
+export function FloatingEditorWindow(props: { ctx: Context }): ReactNode {
+  useBootstrap(props.ctx)
+  const store = useExplorer()
+  const t = store.t
+  const open = store.floatOpen
+  const activeTab = store.activeTab
+
+  const [rect, setRect] = useState<FloatRect | undefined>(undefined)
+  const [viewport, setViewport] = useState(() => (typeof window === 'undefined' ? { width: 0, height: 0 } : readViewport()))
+  const [fontSize, setFontSize] = useState(FLOAT_FONT_DEFAULT)
+  const [maximized, setMaximized] = useState(false)
+  const [collapsed, setCollapsed] = useState(false)
+  const [dragging, setDragging] = useState(false)
+  /** The minimized ball's origin; undefined until the first minimize. */
+  const [ball, setBall] = useState<FloatPoint | undefined>(undefined)
+
+  const viewportRef = useRef(viewport)
+  viewportRef.current = viewport
+  const dragRef = useRef<DragState | undefined>(undefined)
+  /** The normal (non-maximized) rect, restored by the restore button. */
+  const restoreRectRef = useRef<FloatRect | undefined>(undefined)
+  const bodyRef = useRef<HTMLDivElement>(null)
+  /** Latest font size, so the wheel handler never has to read stale state. */
+  const fontRef = useRef(fontSize)
+  fontRef.current = fontSize
+  /** True once the frame has a resolved rect (body/zoom effects depend on it). */
+  const rectReady = rect !== undefined
+  /** Previous `open`, so "opened again" can reset the minimized state. */
+  const wasOpenRef = useRef(open)
+
+  /** The geometry a drag/resize gesture points at right now (move AND finalize). */
+  const resolveDrag = (drag: DragState, pointerX: number, pointerY: number): FloatRect | FloatPoint => {
+    const dx = pointerX - drag.pointerX
+    const dy = pointerY - drag.pointerY
+    if (drag.kind === 'ball') return clampBallPosition({ x: drag.start.x + dx, y: drag.start.y + dy }, viewportRef.current)
+    return drag.kind === 'move'
+      ? dragFloatRect(drag.rect, dx, dy, viewportRef.current)
+      : resizeFloatRect(drag.rect, drag.handle, dx, dy, viewportRef.current)
+  }
+
+  /**
+   * Runtime handshake with the store (see `setFloatEditorAvailable`): the menu
+   * entry is enabled only once this component really mounted inside the host's
+   * overlay slot. A host without that slot never reaches this effect.
+   */
+  useEffect(() => {
+    setFloatEditorAvailable(true)
+    return () => setFloatEditorAvailable(false)
+  }, [])
+
+  // First open: resolve the persisted frame, font size and ball spot.
+  useEffect(() => {
+    if (!open || rect !== undefined) return
+    const next = readViewport()
+    setViewport(next)
+    setRect(readStoredRect())
+    setFontSize(readStoredFontSize())
+    setBall(readStoredBall())
+  }, [open, rect])
+
+  /**
+   * A window that was minimized when it was docked must not come back as a
+   * bare 34px title bar: "open in floating editor" would look broken. Every
+   * fresh open starts expanded; a minimize made WHILE open is kept.
+   */
+  useEffect(() => {
+    if (open && !wasOpenRef.current) setCollapsed(false)
+    wasOpenRef.current = open
+  }, [open])
+
+  // The browser window changed size: a maximized frame follows it, a free one
+  // is clamped back on screen (a rect from a larger monitor must stay reachable),
+  // and a minimized ball is pulled back in so it can still be clicked.
+  useEffect(() => {
+    const onResize = (): void => {
+      const next = readViewport()
+      setViewport(next)
+      setBall(prev => (prev === undefined ? prev : clampBallPosition(prev, next)))
+      setRect(prev => {
+        if (prev === undefined) return prev
+        return maximized ? maximizeFloatRect(next) : clampFloatRect(prev, next)
+      })
+    }
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [maximized])
+
+  const persistRect = useCallback((next: FloatRect): void => {
+    try {
+      localStorage.setItem(RECT_KEY, serializeFloatRect(next))
+    } catch {
+      // Private mode: the frame simply is not remembered.
+    }
+  }, [])
+
+  const persistBall = useCallback((next: FloatPoint): void => {
+    try {
+      localStorage.setItem(BALL_KEY, serializeBallPosition(next))
+    } catch {
+      // Private mode: the ball's spot simply is not remembered.
+    }
+  }, [])
+
+  /**
+   * Drag / resize move on the WINDOW, not on the grip: the pointer regularly
+   * leaves the 4px handle mid-gesture, and pointer capture on a grip that
+   * re-renders is easy to lose. One listener pair per gesture is enough.
+   */
+  useEffect(() => {
+    if (!dragging) return
+    const onMove = (event: PointerEvent): void => {
+      const drag = dragRef.current
+      if (drag === undefined) return
+      // A pointerup lost outside the window (another app, an iframe) must not
+      // leave the frame glued to the cursor: the same `buttons` guard the
+      // sidebar divider uses.
+      if ((event.buttons & 1) === 0) {
+        dragRef.current = undefined
+        setDragging(false)
+        return
+      }
+      const next = resolveDrag(drag, event.clientX, event.clientY)
+      if (drag.kind === 'ball') setBall(next as FloatPoint)
+      else setRect(next as FloatRect)
+    }
+    const onUp = (event: PointerEvent): void => {
+      // The pointerup may arrive before React re-rendered the last move, so the
+      // FINAL geometry is resolved from the event here instead of reading the
+      // state (a persisted rect one move behind loses the last few pixels).
+      const drag = dragRef.current
+      dragRef.current = undefined
+      setDragging(false)
+      if (drag === undefined) return
+      const final = resolveDrag(drag, event.clientX, event.clientY)
+      if (drag.kind === 'ball') {
+        // One small target, two actions: a press that never really moved
+        // RESTORES the window, a real drag parks the ball where it was dropped.
+        const dropped = final as FloatPoint
+        setBall(dropped)
+        persistBall(dropped)
+        if (isBallClick(event.clientX - drag.pointerX, event.clientY - drag.pointerY)) {
+          setCollapsed(false)
+        }
+        return
+      }
+      if (maximized) return
+      const nextRect = final as FloatRect
+      setRect(nextRect)
+      persistRect(nextRect)
+    }
+    /**
+     * A cancelled gesture must NOT be finalised from the event: Chromium
+     * reports `clientX/clientY = 0` on pointercancel, which would clamp the
+     * window to the top-left corner and PERSIST that. Keep the last painted
+     * rect instead.
+     */
+    const onCancel = (): void => {
+      dragRef.current = undefined
+      setDragging(false)
+    }
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+    return () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+    }
+  }, [dragging, maximized, persistRect, persistBall])
+
+  /**
+   * Ctrl/Cmd + wheel zooms the EDITOR TEXT, not the page.
+   *
+   * A native listener is required: React's `onWheel` is passive at the root, so
+   * `preventDefault()` there would be ignored (the browser would page-zoom).
+   * CodeMirror picks the new size up through its ResizeObserver; the dispatched
+   * resize event is the belt for hosts where the observer does not fire.
+   */
+  useEffect(() => {
+    const element = bodyRef.current
+    if (element === null) return
+    const onWheel = (event: WheelEvent): void => {
+      if (!(event.ctrlKey || event.metaKey)) return
+      event.preventDefault()
+      const next = stepFloatZoom(fontRef.current, event.deltaY)
+      if (next === fontRef.current) return
+      // Side effects stay OUT of a state updater: an updater may run twice
+      // (StrictMode/concurrent), which would double-dispatch the resize event.
+      fontRef.current = next
+      setFontSize(next)
+      try {
+        localStorage.setItem(FONT_KEY, String(next))
+      } catch {
+        // Private mode: zoom still works for this session.
+      }
+      window.requestAnimationFrame(() => window.dispatchEvent(new Event('resize')))
+    }
+    element.addEventListener('wheel', onWheel, { passive: false })
+    return () => element.removeEventListener('wheel', onWheel)
+  }, [open, collapsed, rectReady])
+
+  const beginDrag = (event: ReactPointerEvent, drag: DragState): void => {
+    if (event.button !== 0) return
+    event.preventDefault()
+    // Pointer capture keeps the gesture alive over an `<iframe>` (an HTML
+    // preview tab in the window) and over any element that would otherwise
+    // swallow the pointer. The window-level listeners still do the maths.
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId)
+    } catch {
+      // Older engine: the window-level listeners still see the events.
+    }
+    dragRef.current = drag
+    setDragging(true)
+  }
+
+  const toggleMaximize = (): void => {
+    if (rect === undefined) return
+    const next = readViewport()
+    setViewport(next)
+    if (maximized) {
+      setMaximized(false)
+      // A restore always restores an expanded window (a minimized+maximized
+      // frame would otherwise stay at 34px with maximized=false).
+      setCollapsed(false)
+      setRect(clampFloatRect(restoreRectRef.current ?? defaultFloatRect(next), next))
+      return
+    }
+    restoreRectRef.current = rect
+    setMaximized(true)
+    setCollapsed(false)
+    setRect(maximizeFloatRect(next))
+  }
+
+  /**
+   * Minimize to the floating ball.
+   *
+   * The ball appears at the window's own corner first (a minimize should not
+   * teleport the affordance across the screen), and keeps wherever the user
+   * drags it afterwards — persisted per browser profile.
+   */
+  const toggleCollapse = (): void => {
+    if (!collapsed && rect !== undefined) {
+      setBall(ball === undefined ? ballFromRect(rect, viewportRef.current) : clampBallPosition(ball, viewportRef.current))
+    }
+    setCollapsed(!collapsed)
+  }
+
+  /**
+   * The body subtree is memoised on `collapsed` alone so a drag/resize update
+   * (one per pointermove) does not re-render the whole EditorPane through the
+   * parent: the element identity stays stable while only the frame geometry
+   * moves. The pane is still hidden, never unmounted, while minimized — it owns
+   * the live CodeMirror buffer.
+   *
+   * HOOK ORDER: this must stay ABOVE the `!open || rect === undefined` early
+   * return. Hooks cannot be skipped on a render, and the first open reaches
+   * this line one render later than every previous render did — placing it
+   * below the return throws "Rendered more hooks than during the previous
+   * render" exactly when the feature is used (in production too; React's
+   * error 310 is not dev-only).
+   */
+  const body = useMemo(() => (
+    <div className="rvs-float-body" ref={bodyRef} style={{ display: collapsed ? 'none' : 'flex' }}>
+      <EditorPane visible={!collapsed} />
+    </div>
+  ), [collapsed])
+
+  if (!open || rect === undefined) return null
+
+  /**
+   * A minimized window is a BALL, not a full-width bar: it keeps a title-bar
+   * strip's worth of information (that the editor is out, which file, whether it
+   * is dirty) in one small circle the user can park anywhere.
+   */
+  const ballPoint = clampBallPosition(ball ?? ballFromRect(rect, viewport), viewport)
+  const frameStyle: CSSProperties = collapsed
+    ? { left: ballPoint.x, top: ballPoint.y, width: FLOAT_BALL_SIZE, height: FLOAT_BALL_SIZE }
+    : {
+        left: rect.x,
+        top: rect.y,
+        width: rect.width,
+        height: rect.height,
+        // The editor theme reads this (see `vsc/editor-theme.ts`); only this
+        // frame sets it, so any other editor mount keeps the default 13px.
+        // Docking always renders at the default size (the variable is
+        // frame-scoped) — the zoom is a property of the floating window.
+        ['--rvs-editor-font-size' as never]: `${fontSize}px`,
+      }
+
+  return (
+    <div
+      className={`rvs-root rvs-float-window${collapsed ? ' rvs-float-mini' : ''}${dragging ? ' dragging' : ''}`}
+      style={frameStyle}
+      data-rvs-float={collapsed ? 'collapsed' : 'open'}
+      data-rvs-float-maximized={maximized ? 'true' : undefined}
+      title={collapsed ? t('float.ballHint') : undefined}
+      onPointerDown={collapsed
+        ? (event) => {
+            if (event.button !== 0) return
+            // The whole ball is the drag handle; a press that does not move
+            // restores the window on release (see the pointerup handler).
+            beginDrag(event, { kind: 'ball', pointerX: event.clientX, pointerY: event.clientY, start: ballPoint })
+          }
+        : undefined}
+    >
+      {collapsed
+        ? (
+          <div
+            className="rvs-float-ball"
+            role="button"
+            tabIndex={0}
+            aria-label={t('float.ballHint')}
+            title={t('float.ballHint')}
+            // Keyboard access: the ball is the only affordance left, so it must
+            // also restore without a pointer. Pointer clicks are decided in the
+            // pointerup handler (click vs drag), never here — a drag that ends
+            // on the ball must not also restore it.
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault()
+                setCollapsed(false)
+              }
+            }}
+          >
+            <span className="rvs-float-ball-glyph" aria-hidden="true">▣</span>
+            {activeTab !== undefined && activeTab.dirty && (
+              <span className="rvs-float-ball-dot" title={t('editor.unsaved')} aria-hidden="true" />
+            )}
+          </div>
+        )
+        : (
+          <div
+            className="rvs-float-titlebar"
+            onPointerDown={(event) => {
+              if (rect === undefined || maximized) return
+              if ((event.target as HTMLElement).closest('button') !== null) return
+              beginDrag(event, { kind: 'move', pointerX: event.clientX, pointerY: event.clientY, rect })
+            }}
+            onDoubleClick={(event) => {
+              if ((event.target as HTMLElement).closest('button') !== null) return
+              toggleMaximize()
+            }}
+            title={t('float.dragHint')}
+          >
+            <span className="rvs-float-glyph" aria-hidden="true">▣</span>
+            <span className="rvs-float-title">{t('float.title')}</span>
+            {activeTab !== undefined && (
+              <span className="rvs-float-file" title={activeTab.fullPath}>{activeTab.rel}</span>
+            )}
+            <span className="rvs-float-spacer" />
+            <button
+              type="button"
+              className="rvs-float-btn"
+              title={t('float.minimize')}
+              aria-label={t('float.minimize')}
+              onClick={toggleCollapse}
+            >
+              —
+            </button>
+            <button
+              type="button"
+              className="rvs-float-btn"
+              title={maximized ? t('float.restore') : t('float.maximize')}
+              aria-label={maximized ? t('float.restore') : t('float.maximize')}
+              onClick={toggleMaximize}
+            >
+              {maximized ? '❐' : '□'}
+            </button>
+            <button
+              type="button"
+              className="rvs-float-btn rvs-float-close"
+              title={t('float.dock')}
+              aria-label={t('float.dock')}
+              onClick={() => { store.dockFloatingEditor() }}
+            >
+              <IconClose size={12} />
+            </button>
+          </div>
+        )}
+      {body}
+      <DialogHost />
+      {!collapsed && !maximized && RESIZE_HANDLES.map(handle => (
+        <div
+          key={handle}
+          className={`rvs-float-resize rvs-float-resize-${handle}`}
+          data-rvs-float-resize={handle}
+          onPointerDown={(event) => {
+            if (rect === undefined) return
+            beginDrag(event, { kind: 'resize', handle, pointerX: event.clientX, pointerY: event.clientY, rect })
+          }}
+        />
+      ))}
+    </div>
+  )
+}

package/src/client/FloatingPlaceholder.tsx

@@ -0,0 +1,22 @@
+/**
+ * What the centre conversation view and the sidebar fallback show while the
+ * editor is popped out: the editor itself is a single instance and lives in the
+ * floating window, so these surfaces must not mount a second one (that would
+ * be two live CodeMirror buffers for one tab — the exact defect `EditorPane`'s
+ * header warns about). A dock button keeps the surface from looking broken.
+ */
+import type { ReactNode } from 'react'
+import { useExplorer } from './store.tsx'
+import { Btn } from './ui.tsx'
+
+export function FloatingEditorPlaceholder(): ReactNode {
+  const store = useExplorer()
+  const t = store.t
+  return (
+    <div className="rvs-float-placeholder">
+      <div className="rvs-float-placeholder-title">{t('float.placeholder')}</div>
+      <div className="rvs-float-placeholder-text">{t('float.placeholderHint')}</div>
+      <Btn kind="primary" onClick={() => { store.dockFloatingEditor() }}>{t('float.dockBack')}</Btn>
+    </div>
+  )
+}

package/src/client/RemoteEditorView.tsx

@@ -6,10 +6,15 @@
  * sidebar then keeps the whole column for the explorer. Both surfaces read
  * the same module-level store, so a diff opened from source control appears
  * here, and a save here repaints the sidebar's change list.
+ *
+ * While the editor floats (`editorSurface === 'float'`) this tab is NOT the
+ * editor's mount any more, so it renders a placeholder instead: mounting a
+ * second `EditorPane` would give the same tab two live buffers.
  */
 import type { Context } from '@deepseek-ai/cordis'
 import type { ReactNode } from 'react'
 import { EditorPane } from './EditorPane.tsx'
+import { FloatingEditorPlaceholder } from './FloatingPlaceholder.tsx'
 import { useBootstrap, useExplorer } from './store.tsx'
 import { DialogHost } from './vsc/kit.tsx'
 
@@ -27,7 +32,7 @@ export function RemoteEditorView(props: { ctx: Context }): ReactNode {
       <DialogHost />
       <div className="rvs-root rvs-center">
         <div className="rvs-column">
-          <div className="rvs-globalbar">
+          <div className="rvs-globalbar" title={store.floatAvailable ? store.t('float.dockViewHint') : store.t('float.unavailable')}>
             <select
               className="rvs-select"
               value={store.workspace?.id ?? ''}
@@ -46,7 +51,7 @@ export function RemoteEditorView(props: { ctx: Context }): ReactNode {
               </span>
             )}
           </div>
-          <EditorPane visible />
+          {store.editorSurface === 'center' ? <EditorPane visible /> : <FloatingEditorPlaceholder />}
         </div>
       </div>
     </>

package/src/client/RemoteExplorer.tsx

@@ -1032,6 +1032,22 @@ export function RemoteExplorer(props: { showHidden: boolean; onToggleHidden: ()
     ]
     if (entry !== undefined) {
       entries.push({ label: t('files.open'), onSelect: () => openEntry(entry), separated: true })
+      if (!entry.isDir) {
+        // 「在悬浮编辑器中打开」: the editor surface floats above the app shell,
+        // above whatever conversation view is selected. Disabled only when the
+        // host has no frame-wide overlay slot to host the window (see
+        // `FloatingEditorWindow`'s availability handshake).
+        //
+        // Deliberately opens the FILE, not the working-tree diff the adjacent
+        // "Open" entry may choose for a changed file: this is the editor, and a
+        // diff is not an editing surface (SCM's own entry keeps the diff
+        // semantics because that list is about changes).
+        entries.push({
+          label: t('files.openInFloat'),
+          onSelect: () => { store.openInFloatEditor(entry.path) },
+          disabled: !store.floatAvailable,
+        })
+      }
       if (!entry.isDir && isPreviewOnlyFile(entry.path)) {
         entries.push({ label: t('files.openAsText'), onSelect: () => store.openFile(entry.path) })
       }

package/src/client/RemoteRoot.tsx

@@ -11,6 +11,7 @@
 import type { Context } from '@deepseek-ai/cordis'
 import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react'
 import { EditorPane } from './EditorPane.tsx'
+import { FloatingEditorPlaceholder } from './FloatingPlaceholder.tsx'
 import { RemoteExplorer } from './RemoteExplorer.tsx'
 import { SearchView } from './SearchView.tsx'
 import { HistoryPanel } from './scm/HistoryPanel.tsx'
@@ -171,9 +172,14 @@ function Shell(props: { ctx: Context; visible: boolean }): ReactNode {
    * that owns it was gone AND the centre tab mounted a second EditorPane on
    * the same store tab — two live buffers with independent undo state, the one
    * state this file declares must never happen.
+   *
+   * Only the CENTRE pixel surface triggers this redirect. While the editor
+   * floats the sidebar keeps whatever view it had: the editor panel renders a
+   * "docked elsewhere" placeholder (see panelFor), and on docking the user
+   * lands back where they were.
    */
   useEffect(() => {
-    if (store.editorSurface !== 'sidebar' && view === 'editor') go('explorer')
+    if (store.editorSurface === 'center' && view === 'editor') go('explorer')
   }, [store.editorSurface, view, go])
 
   useEffect(() => {
@@ -264,11 +270,14 @@ function Shell(props: { ctx: Context; visible: boolean }): ReactNode {
         // The sidebar editor is the FALLBACK surface, used only when the host
         // has no `conversation.view` slot to mount the editor in (index.tsx
         // stays on 'sidebar' then). It must not render while the centre surface
-        // owns the editor: both read the same store, so two live editors for one
-        // tab fight over the scroll position and the hidden one — sitting at
-        // scrollTop 0 — wins, which is exactly why a tab switch kept snapping
-        // back to the top of the file.
-        return editorInSidebar ? <EditorPane visible={panelLive('editor')} /> : null
+        // or the floating window owns the editor: all of them read the same
+        // store, so two live editors for one tab fight over the scroll position
+        // and the hidden one — sitting at scrollTop 0 — wins, which is exactly
+        // why a tab switch kept snapping back to the top of the file.
+        if (editorInSidebar) return <EditorPane visible={panelLive('editor')} />
+        // Floating the editor away from the sidebar: the panel stays reachable
+        // (so docking returns here) but shows where the editor went.
+        return store.floatOpen ? <FloatingEditorPlaceholder /> : null
       default:
         return (
           <RemoteExplorer

package/src/client/SearchView.tsx

@@ -240,12 +240,13 @@ export function SearchView(): ReactNode {
   }
 
   /**
-   * Right-click on a name result: the four things one does with a found path.
+   * Right-click on a name result: what one does with a found path.
    *
    * "Relative" is relative to the REPOSITORY when the workspace sits inside one
    * (the same relative form the tree's own menu copies), else absolute — which
    * is what makes the copied value paste straight into a shell that already ran
-   * `cd` into the repo.
+   * `cd` into the repo. Directories only get the copy/reveal/terminal entries:
+   * there is no file to open in the editor.
    */
   const openHitMenu = (event: React.MouseEvent, hit: SearchHit): void => {
     event.preventDefault()
@@ -255,7 +256,13 @@ export function SearchView(): ReactNode {
     menu.open(event.clientX, event.clientY, [
       { label: t('files.copyAbs'), onSelect: () => { void copyText(abs); toast(t('files.copiedClipboard')) } },
       { label: t('files.copyRel'), onSelect: () => { void copyText(rel); toast(t('files.copiedClipboard')) } },
-      { label: t('search.revealInExplorer'), onSelect: () => { store.revealInExplorer(dir) }, separated: true },
+      {
+        label: t('files.openInFloat'),
+        onSelect: () => { store.openInFloatEditor(abs) },
+        disabled: !store.floatAvailable || hit.isDir,
+        separated: true,
+      },
+      { label: t('search.revealInExplorer'), onSelect: () => { store.revealInExplorer(dir) } },
       { label: t('search.openInTerminal'), onSelect: () => { store.openTerminalAt(dir) } },
     ])
   }