diff --git a/desktop/src-tauri/src/lib.rs b/desktop/src-tauri/src/lib.rs
index d4e3dec7e32..08cc1f1adb5 100644
--- a/desktop/src-tauri/src/lib.rs
+++ b/desktop/src-tauri/src/lib.rs
@@ -373,6 +373,9 @@ pub fn run() {
                     .inner_size(1100.0, 720.0)
                     .visible(false)
                     .user_agent(&window::webview_user_agent())
+                    // Keep dashboard HTML drag/drop (including chat panes) in the webview;
+                    // Tauri's native drop handler intercepts it on Windows.
+                    .disable_drag_drop_handler()
                     // Cmd on macOS, Ctrl elsewhere, with + / - / 0. WebView2 zooms natively; on
                     // macOS and Linux Tauri injects a keydown polyfill whose one IPC call is granted
                     // to the loopback dashboard by `capabilities/dashboard-zoom.json`.
diff --git a/docs-site/src/content/docs/guides/remote-workspace.md b/docs-site/src/content/docs/guides/remote-workspace.md
index 939ea624de9..1ebc0f725a8 100644
--- a/docs-site/src/content/docs/guides/remote-workspace.md
+++ b/docs-site/src/content/docs/guides/remote-workspace.md
@@ -171,6 +171,29 @@ Prompt submission acknowledges acceptance immediately; the dashboard polls the s
 cancels an active Executor command, and prevents a late response from reopening the stopped
 session.
 
+## Work with sessions side by side
+
+The session list on the left opens a session in the focused pane. Drag a session to the left,
+right, top, or bottom edge of another pane to split the conversation area. You can show up to
+four different sessions at once. An already visible session moves between panes instead of
+opening a duplicate composer.
+
+Use **Split right** or **Split below** next to a session for the keyboard-accessible alternative.
+Drag a divider to resize the panes, or focus the divider and use its arrow keys. **Home** and
+**End** set the divider to its minimum and maximum size. Each session
+keeps its own draft, submission state, and Stop action, so a pending turn in one pane does not
+block a different session. **Close pane** changes the layout only; it does not stop the session.
+
+The pane layout is restored for this Hub in the same browser. Only session identifiers and pane
+positions and divider sizes are saved; draft text and model output are not written to browser storage. Reloading
+the page clears unsent drafts. On screens up to 760px wide, panes stack vertically without
+resize dividers; the saved split positions and sizes return when the screen is wider.
+
+This view is shared by the browser dashboard and the OpenCodex desktop dashboard. CLI users
+can open the dashboard with `ocx gui` and select **Remote Workspace** after its normal Hub setup.
+It does not change the terminal interface of `codex` or the conversation layout inside the
+separate official ChatGPT/Codex desktop app.
+
 ## Restart and reconnect behavior
 
 The Hub persists bounded session metadata and a small recent event snapshot. After a Hub restart,
diff --git a/docs-site/src/content/docs/ko/guides/remote-workspace.md b/docs-site/src/content/docs/ko/guides/remote-workspace.md
index ef5b6490aec..338234f4da3 100644
--- a/docs-site/src/content/docs/ko/guides/remote-workspace.md
+++ b/docs-site/src/content/docs/ko/guides/remote-workspace.md
@@ -95,6 +95,28 @@ ocx remote-workspace status
 
 프롬프트 실행 중에도 **Stop**을 사용할 수 있습니다. Hub 코딩 에이전트의 현재 턴을 중단하고 활성 Executor 명령을 취소하며, 늦게 온 응답이 중지된 세션을 다시 열지 못하게 합니다.
 
+## 여러 세션을 분할해서 보기
+
+왼쪽 세션 목록에서 세션을 클릭하면 현재 선택한 창에서 열립니다. 세션을 다른 창의
+왼쪽·오른쪽·위·아래 가장자리로 끌어다 놓으면 화면이 분할됩니다. 최대 네 개의 서로 다른
+세션을 동시에 표시할 수 있고, 이미 표시 중인 세션은 중복 창을 만드는 대신 이동합니다.
+
+세션 옆 **오른쪽으로 분할** 또는 **아래로 분할** 버튼도 사용할 수 있습니다. 경계선을
+드래그하거나 경계선에 키보드 초점을 놓고 방향키를 눌러 크기를 조절하세요. **Home**과
+**End** 키는 최소·최대 크기로 조절합니다. 각 세션의
+입력 중인 글, 전송 상태, 중지 동작은 독립적입니다. **창 닫기**는 배치만 변경하며 세션을
+중지하지 않습니다.
+
+같은 브라우저에서 이 Hub를 다시 열면 창 배치가 복원됩니다. 브라우저 저장소에는 세션
+식별자, 분할 배치와 경계선 크기만 저장하며, 작성 중인 글이나 모델 응답은 저장하지 않습니다.
+새로고침하면 아직 보내지 않은 글은 지워집니다. 화면 너비가 760px 이하이면 경계선 없이
+창을 세로로 쌓아 표시하고, 화면이 넓어지면 저장된 분할 배치와 크기로 돌아갑니다.
+
+이 화면은 OpenCodex 브라우저 대시보드와 데스크톱 앱에서 공통으로 사용합니다. CLI에서는
+`ocx gui`로 대시보드를 열고 정상적인 Hub 설정 후 **원격 워크스페이스**를 선택하세요.
+이 기능은 `codex` 터미널 화면이나 별도 공식 ChatGPT/Codex 앱 내부의 대화 배치를 변경하지
+않습니다.
+
 ## 재시작과 재연결 동작
 
 Hub는 제한된 세션 메타데이터와 최근 이벤트의 작은 스냅샷을 저장합니다. Hub 재시작 뒤 완료되지 않은 세션은 원래 Executor를 기다립니다. 해당 기기가 다시 연결되면 다음 프롬프트가 원래 Codex 작업, Claude Code 세션 또는 Pi 세션 ID를 이어갑니다.
diff --git a/gui/src/components/remote-workspace/RemoteWorkspaceChats.tsx b/gui/src/components/remote-workspace/RemoteWorkspaceChats.tsx
new file mode 100644
index 00000000000..61f28ad2cf8
--- /dev/null
+++ b/gui/src/components/remote-workspace/RemoteWorkspaceChats.tsx
@@ -0,0 +1,157 @@
+import { useEffect, useRef, useState, type CSSProperties, type DragEvent, type ReactNode } from "react";
+import { IconArrowDown, IconChevron, IconGrip, IconX } from "../../icons";
+import { useT } from "../../i18n/shared";
+import { Notice } from "../../ui";
+import { EVENT_TKEY, PROFILE_LABEL, STATUS_TKEY, type RemoteDevice, type RemoteSession } from "./types";
+import { MAX_PANES, minLayoutWidth, openPane, paneIds, parseLayout, reconcileLayout, removePane, resizeSplit, splitPane, type PaneLayout, type SplitEdge } from "./split-layout";
+import { useSessionActions } from "./use-session-actions";
+
+const DRAG_TYPE = "application/x-opencodex-session";
+const EDGES: SplitEdge[] = ["left", "right", "up", "down"];
+
+// Only a nested split reserves its width; a leaf pane stays free to follow the ratio.
+const trackMin = (child: PaneLayout) => child.type === "split" ? minLayoutWidth(child) : 0;
+
+function SplitBranch({ node, renderPane, resize }: {
+  node: PaneLayout; renderPane: (id: string) => ReactNode; resize: (id: string, ratio: number) => void;
+}) {
+  const t = useT();
+  const container = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+  if (node.type === "pane") return renderPane(node.sessionId);
+  const style = { "--split-ratio": node.ratio, "--split-min-width": minLayoutWidth(node),
+    "--split-first-min": trackMin(node.first), "--split-second-min": trackMin(node.second) } as CSSProperties;
+  return <div ref={container} className={`remote-split-branch remote-split-branch--${node.axis}`} style={style}>
+    <div className="remote-split-child"><SplitBranch node={node.first} renderPane={renderPane} resize={resize} /></div>
+    <div role="separator" tabIndex={0} className="remote-split-divider" aria-label={t("remote.split.resize")}
+      aria-orientation={node.axis === "row" ? "vertical" : "horizontal"} aria-valuemin={20} aria-valuemax={80} aria-valuenow={Math.round(node.ratio * 100)}
+      onPointerDown={event => { if (event.button !== 0) return; event.preventDefault(); event.currentTarget.focus(); dragging.current = true; event.currentTarget.setPointerCapture(event.pointerId); }}
+      onPointerMove={event => {
+        if (!dragging.current || !container.current) return;
+        const rect = container.current.getBoundingClientRect();
+        const size = node.axis === "row" ? rect.width : rect.height;
+        if (size > 0) resize(node.id, (node.axis === "row" ? event.clientX - rect.left : event.clientY - rect.top) / size);
+      }}
+      onPointerUp={event => { dragging.current = false; if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId); }}
+      onPointerCancel={() => { dragging.current = false; }} onLostPointerCapture={() => { dragging.current = false; }}
+      onKeyDown={event => {
+        const backward = node.axis === "row" ? "ArrowLeft" : "ArrowUp", forward = node.axis === "row" ? "ArrowRight" : "ArrowDown";
+        if (![backward, forward, "Home", "End"].includes(event.key)) return;
+        event.preventDefault();
+        resize(node.id, event.key === "Home" ? 0.2 : event.key === "End" ? 0.8 : node.ratio + (event.key === backward ? -0.05 : 0.05));
+      }} />
+    <div className="remote-split-child"><SplitBranch node={node.second} renderPane={renderPane} resize={resize} /></div>
+  </div>;
+}
+
+export function RemoteWorkspaceChats({ apiBase, sessions, devices, selectedSessionId, stale, refresh }: {
+  apiBase: string; sessions: RemoteSession[]; devices: RemoteDevice[]; selectedSessionId: string; stale: boolean; refresh: () => unknown;
+}) {
+  const t = useT();
+  const storageKey = `ocx-remote-workspace-layout:${apiBase}`;
+  const [layout, setLayout] = useState<PaneLayout | null>(() => {
+    try { return parseLayout(localStorage.getItem(storageKey)); } catch { return null; }
+  });
+  const [active, setActive] = useState("");
+  const [dragged, setDragged] = useState<string | null>(null);
+  const [dropTarget, setDropTarget] = useState<{ id: string; edge: SplitEdge } | null>(null);
+  const [focusRequest, setFocusRequest] = useState<{ id: string } | null>(null);
+  const [lastSelection, setLastSelection] = useState(selectedSessionId);
+  const host = useRef<HTMLElement>(null);
+  const actions = useSessionActions(apiBase, sessions, devices, stale, refresh);
+  const ids = actions.sessions.map(session => session.id);
+  const fallback = [...actions.sessions].reverse().find(session => session.status !== "stopped")?.id ?? ids.at(-1);
+  const effectiveLayout = reconcileLayout(layout, ids, fallback);
+  const visible = paneIds(effectiveLayout);
+  const activeId = visible.includes(active) ? active : visible[0] ?? "";
+
+  if (lastSelection !== selectedSessionId) {
+    setLastSelection(selectedSessionId);
+    if (selectedSessionId && ids.includes(selectedSessionId)) {
+      setLayout(openPane(effectiveLayout, selectedSessionId, activeId));
+      setActive(selectedSessionId);
+    }
+  } else if (layout !== effectiveLayout) setLayout(effectiveLayout);
+
+  useEffect(() => {
+    try { localStorage.setItem(storageKey, JSON.stringify(effectiveLayout)); } catch { /* The workspace remains usable without storage. */ }
+  }, [effectiveLayout, storageKey]);
+  useEffect(() => {
+    if (!focusRequest) return;
+    const heading = [...(host.current?.querySelectorAll<HTMLElement>("[data-pane-heading]") ?? [])].find(element => element.dataset.paneHeading === focusRequest.id);
+    heading?.focus();
+  }, [focusRequest]);
+
+  const open = (id: string) => { setLayout(openPane(effectiveLayout, id, activeId)); setActive(id); };
+  const split = (id: string, target: string, edge: SplitEdge) => {
+    if (!ids.includes(id)) return;
+    const next = splitPane(effectiveLayout, id, target, edge);
+    setLayout(next);
+    if (paneIds(next).includes(id)) setActive(id);
+    setDragged(null); setDropTarget(null);
+  };
+  const close = (id: string) => {
+    const next = removePane(effectiveLayout, id);
+    const nextId = paneIds(next)[0] ?? "";
+    setLayout(next); setActive(nextId); setFocusRequest({ id: nextId });
+  };
+  const startDrag = (event: DragEvent, id: string) => { event.dataTransfer.setData(DRAG_TYPE, id); event.dataTransfer.effectAllowed = "move"; setDragged(id); };
+  const endDrag = () => { setDragged(null); setDropTarget(null); };
+  const canSplit = (id: string, target: string) => id !== target && (visible.includes(id) || visible.length < MAX_PANES);
+
+  const renderPane = (id: string) => {
+    const session = actions.sessions.find(value => value.id === id);
+    if (!session) return null;
+    const disabled = session.status === "stopped" || (session.status === "failed" && session.resumable === false);
+    return <section key={id} className={`remote-chat-pane remote-console-panel${id === activeId ? " is-active" : ""}`} data-session-id={id}
+      aria-label={`${PROFILE_LABEL[session.profile]} · ${session.deviceName}/${session.rootLabel}`} onFocusCapture={() => setActive(id)} onPointerDown={() => setActive(id)}>
+      <header className="remote-chat-pane-head">
+        <div tabIndex={-1} data-pane-heading={id} className="remote-chat-pane-name" draggable onDragStart={event => startDrag(event, id)} onDragEnd={endDrag}>
+          <IconGrip /><div><strong>{PROFILE_LABEL[session.profile]}</strong><small>{session.deviceName}/{session.rootLabel}</small></div>
+        </div>
+        <span className={`remote-status remote-status--${session.status}`}>{t(STATUS_TKEY[session.status])}</span>
+        <button type="button" className="btn btn-ghost btn-sm remote-pane-close" aria-label={t("remote.split.close")} title={t("remote.split.close")} disabled={visible.length === 1} onClick={() => close(id)}><IconX /></button>
+      </header>
+      <small className="remote-chat-access">{session.accessMode === "read-only" ? t("remote.access.readOnly") : session.capabilities.includes("workspace.exec") ? t("remote.access.workspace") : t("remote.access.workspaceFilesOnly")}</small>
+      <div className="remote-events" aria-live="polite" aria-label={t("remote.events")}>
+        {session.events.length === 0 ? <p className="remote-empty">{t("remote.noEvents")}</p> : session.events.map(event => <div key={event.sequence} className={`remote-event remote-event--${event.type}`}>
+          <span>{event.type === "assistant" ? PROFILE_LABEL[session.profile] : t(EVENT_TKEY[event.type])}</span><p>{event.text}</p>
+        </div>)}
+      </div>
+      {session.status === "failed" && session.resumable === false ? <Notice tone="err">{t("remote.notResumable")}</Notice> : null}
+      {actions.errors[id] ? <Notice tone="err">{actions.errors[id]}</Notice> : null}
+      <label className="remote-composer"><span className="field-label">{t("remote.prompt")}</span>
+        <textarea className="input" rows={3} value={actions.drafts[id] ?? ""} onChange={event => actions.setDraft(id, event.target.value)} placeholder={t("remote.promptPlaceholder")} disabled={disabled}
+          onKeyDown={event => { if ((event.ctrlKey || event.metaKey) && event.key === "Enter") { event.preventDefault(); void actions.send(session); } }} />
+      </label>
+      <div className="remote-console-actions">
+        <button type="button" className="btn btn-primary" disabled={!actions.canSend(session)} onClick={() => void actions.send(session)}>{t("remote.send")}</button>
+        <button type="button" className="btn btn-danger" disabled={actions.pending[id]?.stop || session.status === "stopped"} onClick={() => void actions.stop(session)}>{t("remote.stop")}</button>
+      </div>
+      {dragged && canSplit(dragged, id) ? <div className="remote-pane-drop-targets">{EDGES.map(edge => <div key={edge} className={`remote-pane-drop remote-pane-drop--${edge}${dropTarget?.id === id && dropTarget.edge === edge ? " is-over" : ""}`}
+        onDragOver={event => { event.preventDefault(); event.dataTransfer.dropEffect = "move"; setDropTarget({ id, edge }); }}
+        onDrop={event => { event.preventDefault(); const source = event.dataTransfer.getData(DRAG_TYPE); if (source === dragged) split(source, id, edge); else endDrag(); }}>
+        {t(`remote.split.${edge}`)}
+      </div>)}</div> : null}
+    </section>;
+  };
+
+  return <section ref={host} className="remote-chats-workspace" aria-label={t("remote.split.title")}>
+    <div className="remote-chats-toolbar"><h3>{t("remote.sessions")}</h3><p>{t("remote.split.hint")}</p></div>
+    <div className="remote-chats-layout">
+      <aside className="remote-session-rail" aria-label={t("remote.sessions")}>
+        {actions.sessions.map(session => <div key={session.id} className={`remote-session-row${activeId === session.id ? " is-active" : ""}`} draggable onDragStart={event => startDrag(event, session.id)} onDragEnd={endDrag}>
+          <button type="button" className="remote-session-open" data-session-open={session.id} aria-pressed={activeId === session.id} title={t("remote.split.open")} onClick={() => open(session.id)}>
+            <IconGrip /><span><strong>{PROFILE_LABEL[session.profile]} · {session.rootLabel}</strong><small>{session.deviceName} · {t(STATUS_TKEY[session.status])}</small></span>
+          </button>
+          <div className="remote-session-split-actions">
+            <button type="button" className="btn btn-ghost btn-sm" title={t("remote.split.right")} aria-label={t("remote.split.right")} disabled={!activeId || !canSplit(session.id, activeId)} onClick={() => split(session.id, activeId, "right")}><IconChevron /></button>
+            <button type="button" className="btn btn-ghost btn-sm" title={t("remote.split.down")} aria-label={t("remote.split.down")} disabled={!activeId || !canSplit(session.id, activeId)} onClick={() => split(session.id, activeId, "down")}><IconArrowDown /></button>
+          </div>
+        </div>)}
+        {visible.length >= MAX_PANES ? <p className="remote-split-limit">{t("remote.split.limit")}</p> : null}
+      </aside>
+      <div className="remote-pane-surface">{effectiveLayout ? <SplitBranch node={effectiveLayout} renderPane={renderPane} resize={(id, ratio) => setLayout(resizeSplit(effectiveLayout, id, ratio))} /> : <p className="remote-empty remote-empty--console">{t("remote.noSessions")}</p>}</div>
+    </div>
+  </section>;
+}
diff --git a/gui/src/components/remote-workspace/split-layout.ts b/gui/src/components/remote-workspace/split-layout.ts
new file mode 100644
index 00000000000..66b5360be4c
--- /dev/null
+++ b/gui/src/components/remote-workspace/split-layout.ts
@@ -0,0 +1,92 @@
+export type SplitEdge = "left" | "right" | "up" | "down";
+export type PaneLayout = { type: "pane"; sessionId: string } | {
+  type: "split"; id: string; axis: "row" | "column"; ratio: number; first: PaneLayout; second: PaneLayout;
+};
+export const MAX_PANES = 4;
+/** Narrowest usable pane and the divider track between two panes, in CSS pixels. */
+export const PANE_MIN_WIDTH = 260;
+const DIVIDER_WIDTH = 8;
+export const paneIds = (tree: PaneLayout | null): string[] => !tree ? [] : tree.type === "pane"
+  ? [tree.sessionId] : [...paneIds(tree.first), ...paneIds(tree.second)];
+export const pane = (sessionId: string): PaneLayout => ({ type: "pane", sessionId });
+
+/** Width a subtree needs so that no nested split has to scroll sideways inside its own track. */
+export function minLayoutWidth(node: PaneLayout): number {
+  if (node.type === "pane") return PANE_MIN_WIDTH;
+  const first = minLayoutWidth(node.first), second = minLayoutWidth(node.second);
+  return node.axis === "row" ? first + DIVIDER_WIDTH + second : Math.max(first, second);
+}
+
+export function removePane(tree: PaneLayout | null, sessionId: string): PaneLayout | null {
+  if (!tree) return null;
+  if (tree.type === "pane") return tree.sessionId === sessionId ? null : tree;
+  const first = removePane(tree.first, sessionId), second = removePane(tree.second, sessionId);
+  return !first ? second : !second ? first : first === tree.first && second === tree.second ? tree : { ...tree, first, second };
+}
+
+function replacePane(tree: PaneLayout, sessionId: string, next: PaneLayout): PaneLayout {
+  if (tree.type === "pane") return tree.sessionId === sessionId ? next : tree;
+  return { ...tree, first: replacePane(tree.first, sessionId, next), second: replacePane(tree.second, sessionId, next) };
+}
+
+export function openPane(tree: PaneLayout | null, sessionId: string, active: string): PaneLayout {
+  if (!tree) return pane(sessionId);
+  if (paneIds(tree).includes(sessionId)) return tree;
+  return replacePane(tree, paneIds(tree).includes(active) ? active : paneIds(tree)[0]!, pane(sessionId));
+}
+
+export function splitPane(tree: PaneLayout | null, sessionId: string, targetId: string, edge: SplitEdge): PaneLayout | null {
+  if (!tree) return pane(sessionId);
+  const ids = paneIds(tree);
+  if (sessionId === targetId || !ids.includes(targetId) || (ids.length >= MAX_PANES && !ids.includes(sessionId))) return tree;
+  const withoutSource = removePane(tree, sessionId)!;
+  const before = edge === "left" || edge === "up";
+  const splitIds = new Set<string>();
+  const collect = (node: PaneLayout): void => {
+    if (node.type === "pane") return;
+    splitIds.add(node.id); collect(node.first); collect(node.second);
+  };
+  collect(withoutSource);
+  let sequence = 1;
+  while (splitIds.has(`split-${sequence}`)) sequence++;
+
+  const split: PaneLayout = {
+    type: "split", id: `split-${sequence}`, axis: edge === "left" || edge === "right" ? "row" : "column", ratio: 0.5,
+    first: pane(before ? sessionId : targetId), second: pane(before ? targetId : sessionId),
+  };
+  return replacePane(withoutSource, targetId, split);
+}
+
+export function resizeSplit(tree: PaneLayout, id: string, ratio: number): PaneLayout {
+  if (tree.type === "pane") return tree;
+  if (tree.id === id) return { ...tree, ratio: Math.min(0.8, Math.max(0.2, ratio)) };
+  return { ...tree, first: resizeSplit(tree.first, id, ratio), second: resizeSplit(tree.second, id, ratio) };
+}
+
+export function reconcileLayout(tree: PaneLayout | null, ids: string[], fallback?: string): PaneLayout | null {
+  const live = new Set(ids);
+  let next = tree;
+  for (const id of paneIds(tree)) if (!live.has(id)) next = removePane(next, id);
+  return next ?? (fallback && live.has(fallback) ? pane(fallback) : ids.length ? pane(ids[ids.length - 1]!) : null);
+}
+
+/** Storage contains only layout identifiers, never prompts or model output. */
+export function parseLayout(raw: string | null): PaneLayout | null {
+  if (!raw || raw.length > 8192) return null;
+  const seen = new Set<string>();
+  const splits = new Set<string>();
+  function parse(value: unknown, depth: number): PaneLayout | null {
+    if (!value || typeof value !== "object" || depth > MAX_PANES) return null;
+    const node = value as Record<string, unknown>;
+    if (node.type === "pane" && typeof node.sessionId === "string" && node.sessionId.length > 0 && node.sessionId.length < 200 && !seen.has(node.sessionId)) {
+      seen.add(node.sessionId);
+      return seen.size <= MAX_PANES ? pane(node.sessionId) : null;
+    }
+    if (node.type !== "split" || typeof node.id !== "string" || node.id.length > 400 || (node.axis !== "row" && node.axis !== "column") || typeof node.ratio !== "number" || !Number.isFinite(node.ratio)) return null;
+    if (splits.has(node.id)) return null;
+    splits.add(node.id);
+    const first = parse(node.first, depth + 1), second = parse(node.second, depth + 1);
+    return first && second ? { type: "split", id: node.id, axis: node.axis, ratio: Math.min(0.8, Math.max(0.2, node.ratio)), first, second } : null;
+  }
+  try { return parse(JSON.parse(raw), 0); } catch { return null; }
+}
diff --git a/gui/src/components/remote-workspace/types.ts b/gui/src/components/remote-workspace/types.ts
new file mode 100644
index 00000000000..2eb6339b5a7
--- /dev/null
+++ b/gui/src/components/remote-workspace/types.ts
@@ -0,0 +1,61 @@
+import type { TKey } from "../../i18n/shared";
+
+export type RuntimeProfile = "codex" | "claude" | "pi";
+type RemoteCapability = "workspace.read" | "workspace.write" | "workspace.exec";
+export type RemoteAccessMode = "read-only" | "workspace";
+type SessionStatus = "starting" | "ready" | "running" | "waiting_for_executor" | "failed" | "stopped";
+
+interface RemoteRoot { id: string; label: string }
+export interface RemoteDevice {
+  id: string;
+  name: string;
+  platform: string;
+  capabilities: RemoteCapability[];
+  roots: RemoteRoot[];
+  online: boolean;
+  createdAt: string;
+  lastSeenAt: string | null;
+}
+interface RuntimeAvailability { available: boolean; version?: string; reason?: string }
+interface SessionEvent { sequence: number; at: string; type: "status" | "assistant" | "tool" | "error"; text: string }
+export interface RemoteSession {
+  id: string;
+  profile: RuntimeProfile;
+  accessMode: RemoteAccessMode;
+  deviceId: string;
+  deviceName: string;
+  rootId: string;
+  rootLabel: string;
+  capabilities: RemoteCapability[];
+  tools: string[];
+  threadId: string | null;
+  resumable: boolean;
+  status: SessionStatus;
+  createdAt: string;
+  updatedAt: string;
+  events: SessionEvent[];
+}
+export interface RemoteWorkspaceState {
+  available: boolean;
+  reason?: string;
+  devices: RemoteDevice[];
+  runtimes: Record<RuntimeProfile, RuntimeAvailability>;
+  sessions: RemoteSession[];
+}
+export interface PairingGrant { code: string; expiresAt: string }
+
+export const PROFILES: RuntimeProfile[] = ["codex", "claude", "pi"];
+export const PROFILE_LABEL: Record<RuntimeProfile, string> = { codex: "Codex", claude: "Claude Code", pi: "Pi" };
+export const STATUS_TKEY: Record<SessionStatus, TKey> = {
+  starting: "remote.status.starting",
+  ready: "remote.status.ready",
+  running: "remote.status.running",
+  waiting_for_executor: "remote.status.waiting",
+  failed: "remote.status.failed",
+  stopped: "remote.status.stopped",
+};
+export const EVENT_TKEY: Record<Exclude<SessionEvent["type"], "assistant">, TKey> = {
+  status: "remote.event.status",
+  tool: "remote.event.tool",
+  error: "remote.event.error",
+};
diff --git a/gui/src/components/remote-workspace/use-session-actions.ts b/gui/src/components/remote-workspace/use-session-actions.ts
new file mode 100644
index 00000000000..ef1ad66b30e
--- /dev/null
+++ b/gui/src/components/remote-workspace/use-session-actions.ts
@@ -0,0 +1,70 @@
+import { useRef, useState } from "react";
+import { readJsonOrThrow } from "../../fetch-json";
+import { useT } from "../../i18n/shared";
+import type { RemoteDevice, RemoteSession } from "./types";
+
+export function useSessionActions(apiBase: string, sessions: RemoteSession[], devices: RemoteDevice[], stale: boolean, refresh: () => unknown) {
+  const t = useT();
+  const [drafts, setDrafts] = useState<Record<string, string>>({});
+  const [local, setLocal] = useState<Record<string, RemoteSession>>({});
+  const [pending, setPending] = useState<Record<string, { prompt?: boolean; stop?: boolean }>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const stopped = useRef(new Set<string>());
+  const inFlightPrompts = useRef(new Set<string>());
+  const inFlightStops = useRef(new Set<string>());
+  const merged = sessions.map(session => {
+    const accepted = local[session.id];
+    if (accepted?.status === "stopped") return { ...session, status: "stopped" as const };
+    return accepted && (accepted.events.at(-1)?.sequence ?? 0) > (session.events.at(-1)?.sequence ?? 0) ? accepted : session;
+  });
+  const setDraft = (id: string, value: string) => setDrafts(current => ({ ...current, [id]: value }));
+  const setError = (id: string, value: string) => setErrors(current => ({ ...current, [id]: value }));
+  const setBusy = (id: string, action: "prompt" | "stop", value: boolean) => setPending(current => ({ ...current, [id]: { ...current[id], [action]: value } }));
+  const canSend = (session: RemoteSession) => Boolean((drafts[session.id] ?? "").trim() && !pending[session.id]?.prompt && !pending[session.id]?.stop && !stale
+    && session.status !== "running" && session.status !== "starting" && session.status !== "stopped"
+    && !(session.status === "failed" && session.resumable === false)
+    && !(session.status === "waiting_for_executor" && !devices.find(device => device.id === session.deviceId)?.online));
+
+  const send = async (session: RemoteSession) => {
+    const id = session.id;
+    if (!canSend(session) || inFlightPrompts.current.has(id) || inFlightStops.current.has(id)) return;
+    const submitted = drafts[id] ?? "";
+    inFlightPrompts.current.add(id);
+    setBusy(id, "prompt", true);
+    setError(id, "");
+    let status: number | undefined;
+    try {
+      const response = await fetch(`${apiBase}/api/remote-workspace/sessions/${id}/prompt`, {
+        method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ prompt: submitted }),
+      });
+      status = response.status;
+      const accepted = await readJsonOrThrow<RemoteSession>(response, t("remote.requestFailed"));
+      if (!accepted) throw new Error(t("remote.requestFailed"));
+      setDrafts(current => current[id] === submitted ? { ...current, [id]: "" } : current);
+      if (!stopped.current.has(id)) setLocal(current => ({ ...current, [id]: accepted }));
+      void refresh();
+    } catch (error) {
+      if (!stopped.current.has(id)) {
+        setError(id, status !== undefined && status >= 400 && status < 500
+          ? error instanceof Error ? error.message : t("remote.requestFailed") : t("remote.submissionUnknown"));
+        void refresh();
+      }
+    } finally { inFlightPrompts.current.delete(id); setBusy(id, "prompt", false); }
+  };
+
+  const stop = async (session: RemoteSession) => {
+    const id = session.id;
+    if (inFlightStops.current.has(id) || session.status === "stopped") return;
+    inFlightStops.current.add(id);
+    setBusy(id, "stop", true);
+    try {
+      const response = await fetch(`${apiBase}/api/remote-workspace/sessions/${id}`, { method: "DELETE" });
+      await readJsonOrThrow(response, t("remote.requestFailed"));
+      stopped.current.add(id);
+      setLocal(current => ({ ...current, [id]: { ...session, status: "stopped" } }));
+      void refresh();
+    } catch (error) { setError(id, error instanceof Error ? error.message : t("remote.requestFailed")); }
+    finally { inFlightStops.current.delete(id); setBusy(id, "stop", false); }
+  };
+  return { sessions: merged, drafts, setDraft, pending, errors, canSend, send, stop };
+}
diff --git a/gui/src/i18n/de.ts b/gui/src/i18n/de.ts
index 1844dfbaeea..cdcdf3cde27 100644
--- a/gui/src/i18n/de.ts
+++ b/gui/src/i18n/de.ts
@@ -3862,6 +3862,16 @@ export const de: Record<TKey, string> = {
   "remote.notResumable": "Diese Sitzung wurde beendet, bevor der Coding-Agent einen dauerhaften Verlauf erstellt hat. Starten Sie eine neue Remote-Sitzung.",
   "remote.startSession": "Remote-Sitzung starten",
   "remote.sessionStarted": "Remote-Sitzung ist bereit.",
+  "remote.split.hint": "Ziehe eine Sitzung an den Rand eines Bereichs, um die Ansicht zu teilen.",
+  "remote.split.right": "Rechts teilen",
+  "remote.split.down": "Unten teilen",
+  "remote.split.close": "Bereich schließen",
+  "remote.split.resize": "Bereichsgröße ändern",
+  "remote.split.limit": "Bis zu vier Sitzungen können gleichzeitig angezeigt werden.",
+  "remote.split.left": "Links teilen",
+  "remote.split.up": "Oben teilen",
+  "remote.split.open": "Sitzung öffnen",
+  "remote.split.title": "Geteilte Ansicht",
   "remote.sessions": "Sitzungen",
   "remote.noSessions": "Wähle einen Online-Computer, Ordner und Coding-Agenten.",
   "remote.events": "Aktivität der Remote-Sitzung",
diff --git a/gui/src/i18n/en.ts b/gui/src/i18n/en.ts
index bff6fef8e56..2b31405f97a 100644
--- a/gui/src/i18n/en.ts
+++ b/gui/src/i18n/en.ts
@@ -3896,6 +3896,16 @@ export const en = {
   "remote.notResumable": "This session stopped before the coding agent created durable history. Start a new remote session.",
   "remote.startSession": "Start remote session",
   "remote.sessionStarted": "Remote session is ready.",
+  "remote.split.hint": "Drag a session to a pane edge to split the view.",
+  "remote.split.right": "Split right",
+  "remote.split.down": "Split below",
+  "remote.split.close": "Close pane",
+  "remote.split.resize": "Resize panes",
+  "remote.split.limit": "Up to four sessions can be shown at once.",
+  "remote.split.left": "Split left",
+  "remote.split.up": "Split above",
+  "remote.split.open": "Open session",
+  "remote.split.title": "Split view",
   "remote.sessions": "Sessions",
   "remote.noSessions": "Choose an online computer, folder, and coding agent to start.",
   "remote.events": "Remote session activity",
diff --git a/gui/src/i18n/fr.ts b/gui/src/i18n/fr.ts
index 5681f60e2d2..a71d4e5c049 100644
--- a/gui/src/i18n/fr.ts
+++ b/gui/src/i18n/fr.ts
@@ -3851,6 +3851,16 @@ export const fr: Record<TKey, string> = {
   "remote.notResumable": "Cette session s’est arrêtée avant que l’agent de code ne crée un historique durable. Démarrez une nouvelle session distante.",
   "remote.startSession": "Démarrer la session distante",
   "remote.sessionStarted": "La session distante est prête.",
+  "remote.split.hint": "Faites glisser une session vers le bord d’un volet pour diviser la vue.",
+  "remote.split.right": "Diviser à droite",
+  "remote.split.down": "Diviser en dessous",
+  "remote.split.close": "Fermer le volet",
+  "remote.split.resize": "Redimensionner les volets",
+  "remote.split.limit": "Quatre sessions au maximum peuvent être affichées à la fois.",
+  "remote.split.left": "Diviser à gauche",
+  "remote.split.up": "Diviser au-dessus",
+  "remote.split.open": "Ouvrir la session",
+  "remote.split.title": "Vue fractionnée",
   "remote.sessions": "Sessions",
   "remote.noSessions": "Choisissez un ordinateur en ligne, un dossier et un agent de code.",
   "remote.events": "Activité de la session distante",
diff --git a/gui/src/i18n/ja.ts b/gui/src/i18n/ja.ts
index ce6e00d9c7e..4fe204fbd4d 100644
--- a/gui/src/i18n/ja.ts
+++ b/gui/src/i18n/ja.ts
@@ -3884,6 +3884,16 @@ export const ja: Record<TKey, string> = {
   "remote.notResumable": "コーディングエージェントが永続的な履歴を作成する前にセッションが停止しました。新しいリモートセッションを開始してください。",
   "remote.startSession": "リモートセッションを開始",
   "remote.sessionStarted": "リモートセッションの準備ができました。",
+  "remote.split.hint": "セッションをペインの端にドラッグすると画面を分割できます。",
+  "remote.split.right": "右に分割",
+  "remote.split.down": "下に分割",
+  "remote.split.close": "ペインを閉じる",
+  "remote.split.resize": "ペインのサイズを変更",
+  "remote.split.limit": "同時に表示できるセッションは最大4つです。",
+  "remote.split.left": "左に分割",
+  "remote.split.up": "上に分割",
+  "remote.split.open": "セッションを開く",
+  "remote.split.title": "分割表示",
   "remote.sessions": "セッション",
   "remote.noSessions": "オンラインのコンピューター、フォルダー、エージェントを選択してください。",
   "remote.events": "リモートセッションのアクティビティ",
diff --git a/gui/src/i18n/ko.ts b/gui/src/i18n/ko.ts
index c1e1e77d9f2..852a2591370 100644
--- a/gui/src/i18n/ko.ts
+++ b/gui/src/i18n/ko.ts
@@ -3884,6 +3884,16 @@ export const ko: Record<TKey, string> = {
   "remote.notResumable": "코딩 에이전트가 세션 기록을 만들기 전에 중단되었습니다. 새 원격 세션을 시작하세요.",
   "remote.startSession": "원격 세션 시작",
   "remote.sessionStarted": "원격 세션이 준비되었습니다.",
+  "remote.split.hint": "세션을 화면 가장자리로 끌어다 놓으면 화면이 분할됩니다.",
+  "remote.split.right": "오른쪽으로 분할",
+  "remote.split.down": "아래로 분할",
+  "remote.split.close": "창 닫기",
+  "remote.split.resize": "분할 크기 조절",
+  "remote.split.limit": "한 번에 최대 4개의 세션을 표시할 수 있습니다.",
+  "remote.split.left": "왼쪽으로 분할",
+  "remote.split.up": "위로 분할",
+  "remote.split.open": "세션 열기",
+  "remote.split.title": "화면 분할",
   "remote.sessions": "세션",
   "remote.noSessions": "온라인 컴퓨터, 폴더, 코딩 에이전트를 선택해 시작하세요.",
   "remote.events": "원격 세션 활동",
diff --git a/gui/src/i18n/pt.ts b/gui/src/i18n/pt.ts
index cca8aaa6964..0f280efafb6 100644
--- a/gui/src/i18n/pt.ts
+++ b/gui/src/i18n/pt.ts
@@ -3857,6 +3857,16 @@ export const pt: Record<TKey, string> = {
   "remote.notResumable": "Esta sessão parou antes de o agente de código criar um histórico durável. Inicie uma nova sessão remota.",
   "remote.startSession": "Iniciar sessão remota",
   "remote.sessionStarted": "A sessão remota está pronta.",
+  "remote.split.hint": "Arraste uma sessão para a borda de um painel para dividir a visualização.",
+  "remote.split.right": "Dividir à direita",
+  "remote.split.down": "Dividir abaixo",
+  "remote.split.close": "Fechar painel",
+  "remote.split.resize": "Redimensionar painéis",
+  "remote.split.limit": "Até quatro sessões podem ser exibidas ao mesmo tempo.",
+  "remote.split.left": "Dividir à esquerda",
+  "remote.split.up": "Dividir acima",
+  "remote.split.open": "Abrir sessão",
+  "remote.split.title": "Visualização dividida",
   "remote.sessions": "Sessões",
   "remote.noSessions": "Escolha um computador online, uma pasta e um agente de código para começar.",
   "remote.events": "Atividade da sessão remota",
diff --git a/gui/src/i18n/ru.ts b/gui/src/i18n/ru.ts
index 2709713c0bb..f3bfcd3e37c 100644
--- a/gui/src/i18n/ru.ts
+++ b/gui/src/i18n/ru.ts
@@ -3885,6 +3885,16 @@ export const ru: Record<TKey, string> = {
   "remote.notResumable": "Сеанс остановился до создания постоянной истории агентом. Запустите новый удалённый сеанс.",
   "remote.startSession": "Запустить удалённый сеанс",
   "remote.sessionStarted": "Удалённый сеанс готов.",
+  "remote.split.hint": "Перетащите сеанс к краю панели, чтобы разделить вид.",
+  "remote.split.right": "Разделить справа",
+  "remote.split.down": "Разделить снизу",
+  "remote.split.close": "Закрыть панель",
+  "remote.split.resize": "Изменить размер панелей",
+  "remote.split.limit": "Одновременно можно показать до четырёх сеансов.",
+  "remote.split.left": "Разделить слева",
+  "remote.split.up": "Разделить сверху",
+  "remote.split.open": "Открыть сеанс",
+  "remote.split.title": "Разделённый вид",
   "remote.sessions": "Сеансы",
   "remote.noSessions": "Выберите компьютер в сети, папку и агента программирования.",
   "remote.events": "Активность удалённого сеанса",
diff --git a/gui/src/i18n/tr.ts b/gui/src/i18n/tr.ts
index 154d0356c53..1e29ec9f51a 100644
--- a/gui/src/i18n/tr.ts
+++ b/gui/src/i18n/tr.ts
@@ -3885,6 +3885,16 @@ export const tr: Record<TKey, string> = {
   "remote.notResumable": "Kodlama aracısı kalıcı geçmiş oluşturmadan önce oturum durdu. Yeni bir uzak oturum başlatın.",
   "remote.startSession": "Uzak oturumu başlat",
   "remote.sessionStarted": "Uzak oturum hazır.",
+  "remote.split.hint": "Görünümü bölmek için bir oturumu panelin kenarına sürükleyin.",
+  "remote.split.right": "Sağa böl",
+  "remote.split.down": "Alta böl",
+  "remote.split.close": "Paneli kapat",
+  "remote.split.resize": "Panelleri yeniden boyutlandır",
+  "remote.split.limit": "Aynı anda en fazla dört oturum gösterilebilir.",
+  "remote.split.left": "Sola böl",
+  "remote.split.up": "Üste böl",
+  "remote.split.open": "Oturumu aç",
+  "remote.split.title": "Bölünmüş görünüm",
   "remote.sessions": "Oturumlar",
   "remote.noSessions": "Çevrimiçi bir bilgisayar, klasör ve kodlama aracısı seçin.",
   "remote.events": "Uzak oturum etkinliği",
diff --git a/gui/src/i18n/vi.ts b/gui/src/i18n/vi.ts
index a0b33ac014d..aaa7d52c4d7 100644
--- a/gui/src/i18n/vi.ts
+++ b/gui/src/i18n/vi.ts
@@ -3813,6 +3813,16 @@ export const vi: Record<TKey, string> = {
   "remote.notResumable": "Phiên này đã dừng trước khi coding agent tạo lịch sử bền vững. Hãy bắt đầu phiên từ xa mới.",
   "remote.startSession": "Bắt đầu phiên từ xa",
   "remote.sessionStarted": "Phiên từ xa đã sẵn sàng.",
+  "remote.split.hint": "Kéo phiên đến mép khung để chia chế độ xem.",
+  "remote.split.right": "Chia bên phải",
+  "remote.split.down": "Chia bên dưới",
+  "remote.split.close": "Đóng khung",
+  "remote.split.resize": "Đổi kích thước khung",
+  "remote.split.limit": "Có thể hiển thị tối đa bốn phiên cùng lúc.",
+  "remote.split.left": "Chia bên trái",
+  "remote.split.up": "Chia bên trên",
+  "remote.split.open": "Mở phiên",
+  "remote.split.title": "Chế độ xem chia khung",
   "remote.sessions": "Phiên",
   "remote.noSessions": "Hãy chọn máy tính trực tuyến, thư mục và coding agent để bắt đầu.",
   "remote.events": "Hoạt động phiên từ xa",
diff --git a/gui/src/i18n/zh-TW.ts b/gui/src/i18n/zh-TW.ts
index f2378eaedfd..d345cc0690a 100644
--- a/gui/src/i18n/zh-TW.ts
+++ b/gui/src/i18n/zh-TW.ts
@@ -3848,6 +3848,16 @@ export const zhTW: Record<TKey, string> = {
   "remote.notResumable": "程式設計代理尚未建立持久歷史記錄時工作階段就已停止。請啟動新的遠端工作階段。",
   "remote.startSession": "啟動遠端工作階段",
   "remote.sessionStarted": "遠端工作階段已就緒。",
+  "remote.split.hint": "將工作階段拖到窗格邊緣即可分割畫面。",
+  "remote.split.right": "向右分割",
+  "remote.split.down": "向下分割",
+  "remote.split.close": "關閉窗格",
+  "remote.split.resize": "調整窗格大小",
+  "remote.split.limit": "最多同時顯示四個工作階段。",
+  "remote.split.left": "向左分割",
+  "remote.split.up": "向上分割",
+  "remote.split.open": "開啟工作階段",
+  "remote.split.title": "分割畫面",
   "remote.sessions": "工作階段",
   "remote.noSessions": "請選擇上線電腦、資料夾與程式設計代理。",
   "remote.events": "遠端工作階段活動",
diff --git a/gui/src/i18n/zh.ts b/gui/src/i18n/zh.ts
index cf32dcc5a88..825a2c63fca 100644
--- a/gui/src/i18n/zh.ts
+++ b/gui/src/i18n/zh.ts
@@ -3883,6 +3883,16 @@ export const zh: Record<TKey, string> = {
   "remote.notResumable": "编码代理尚未创建持久历史记录时会话就已停止。请启动新的远程会话。",
   "remote.startSession": "启动远程会话",
   "remote.sessionStarted": "远程会话已就绪。",
+  "remote.split.hint": "将会话拖到窗格边缘即可拆分视图。",
+  "remote.split.right": "向右拆分",
+  "remote.split.down": "向下拆分",
+  "remote.split.close": "关闭窗格",
+  "remote.split.resize": "调整窗格大小",
+  "remote.split.limit": "最多同时显示四个会话。",
+  "remote.split.left": "向左拆分",
+  "remote.split.up": "向上拆分",
+  "remote.split.open": "打开会话",
+  "remote.split.title": "拆分视图",
   "remote.sessions": "会话",
   "remote.noSessions": "请选择在线电脑、文件夹和编程代理。",
   "remote.events": "远程会话活动",
diff --git a/gui/src/pages/RemoteWorkspace.tsx b/gui/src/pages/RemoteWorkspace.tsx
index 928a7f7ec25..d28ceb0b152 100644
--- a/gui/src/pages/RemoteWorkspace.tsx
+++ b/gui/src/pages/RemoteWorkspace.tsx
@@ -1,71 +1,13 @@
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 import { useKeyedClientResource } from "../client-resource";
 import { readJsonOrThrow } from "../fetch-json";
 import { IconLink, IconMonitor, IconPlus, IconRefresh, IconTerminal, IconTrash } from "../icons";
-import { type TKey, useT } from "../i18n/shared";
+import { useT } from "../i18n/shared";
 import { Notice, Select } from "../ui";
 import { confirmAction } from "../action-dialogs";
 import { remoteWorkspacePairingCommands } from "../remote-workspace-command";
-
-type RuntimeProfile = "codex" | "claude" | "pi";
-type RemoteCapability = "workspace.read" | "workspace.write" | "workspace.exec";
-type RemoteAccessMode = "read-only" | "workspace";
-type SessionStatus = "starting" | "ready" | "running" | "waiting_for_executor" | "failed" | "stopped";
-
-interface RemoteRoot { id: string; label: string }
-interface RemoteDevice {
-  id: string;
-  name: string;
-  platform: string;
-  capabilities: RemoteCapability[];
-  roots: RemoteRoot[];
-  online: boolean;
-  createdAt: string;
-  lastSeenAt: string | null;
-}
-interface RuntimeAvailability { available: boolean; version?: string; reason?: string }
-interface SessionEvent { sequence: number; at: string; type: "status" | "assistant" | "tool" | "error"; text: string }
-interface RemoteSession {
-  id: string;
-  profile: RuntimeProfile;
-  accessMode: RemoteAccessMode;
-  deviceId: string;
-  deviceName: string;
-  rootId: string;
-  rootLabel: string;
-  capabilities: RemoteCapability[];
-  tools: string[];
-  threadId: string | null;
-  resumable: boolean;
-  status: SessionStatus;
-  createdAt: string;
-  updatedAt: string;
-  events: SessionEvent[];
-}
-interface RemoteWorkspaceState {
-  available: boolean;
-  reason?: string;
-  devices: RemoteDevice[];
-  runtimes: Record<RuntimeProfile, RuntimeAvailability>;
-  sessions: RemoteSession[];
-}
-interface PairingGrant { code: string; expiresAt: string }
-
-const PROFILES: RuntimeProfile[] = ["codex", "claude", "pi"];
-const PROFILE_LABEL: Record<RuntimeProfile, string> = { codex: "Codex", claude: "Claude Code", pi: "Pi" };
-const STATUS_TKEY: Record<SessionStatus, TKey> = {
-  starting: "remote.status.starting",
-  ready: "remote.status.ready",
-  running: "remote.status.running",
-  waiting_for_executor: "remote.status.waiting",
-  failed: "remote.status.failed",
-  stopped: "remote.status.stopped",
-};
-const EVENT_TKEY: Record<Exclude<SessionEvent["type"], "assistant">, TKey> = {
-  status: "remote.event.status",
-  tool: "remote.event.tool",
-  error: "remote.event.error",
-};
+import { RemoteWorkspaceChats } from "../components/remote-workspace/RemoteWorkspaceChats";
+import { PROFILES, PROFILE_LABEL, type RuntimeProfile, type RemoteAccessMode, type RemoteSession, type RemoteWorkspaceState, type RemoteDevice, type PairingGrant } from "../components/remote-workspace/types";
 
 function isRuntimeProfile(value: string): value is RuntimeProfile {
   return value === "codex" || value === "claude" || value === "pi";
@@ -103,11 +45,7 @@ export default function RemoteWorkspace({ apiBase, hubOrigin }: { apiBase: strin
   const [selectedSessionId, setSelectedSessionId] = useState("");
   const [localSession, setLocalSession] = useState<RemoteSession | null>(null);
   const [pairing, setPairing] = useState<PairingGrant | null>(null);
-  const [drafts, setDrafts] = useState<Record<string, string>>({});
   const [busy, setBusy] = useState<"pair" | "session" | "revoke" | null>(null);
-  const [promptPending, setPromptPending] = useState(false);
-  const [stopPending, setStopPending] = useState(false);
-  const stoppedSessionId = useRef<string | null>(null);
   const [notice, setNotice] = useState<{ tone: "ok" | "err"; text: string } | null>(null);
   const [copiedCommand, setCopiedCommand] = useState<"posix" | "powershell" | null>(null);
 
@@ -129,33 +67,10 @@ export default function RemoteWorkspace({ apiBase, hubOrigin }: { apiBase: strin
     ? selectedProfile
     : availableProfiles[0] ?? selectedProfile;
   const remoteSessions = state?.sessions ?? [];
-  const fallbackSession = [...remoteSessions].reverse().find(session => session.status !== "stopped");
-  const candidate = remoteSessions.find(session => session.id === selectedSessionId)
-    ?? (localSession?.id === selectedSessionId ? localSession : null)
-    ?? fallbackSession
-    ?? localSession;
-  const wantedSessionId = candidate?.id;
-  const polledSession = remoteSessions.find(session => session.id === wantedSessionId);
-  const selectedLocal = localSession?.id === wantedSessionId ? localSession : null;
-  const selectedSession = selectedLocal && (!polledSession
-    || (selectedLocal.events.at(-1)?.sequence ?? 0) > (polledSession.events.at(-1)?.sequence ?? 0))
-    ? selectedLocal : polledSession;
-  const effectiveSession = selectedSession
-    ?? fallbackSession
-    ?? localSession;
-
-  const prompt = drafts[effectiveSession?.id ?? ""] ?? "";
-  const setPrompt = (value: string | ((current: string) => string)) => {
-    const id = effectiveSession?.id;
-    if (!id) return;
-    setDrafts(current => ({ ...current, [id]: typeof value === "function" ? value(current[id] ?? "") : value }));
-  };
+  const sessions = localSession && !remoteSessions.some(session => session.id === localSession.id)
+    ? [...remoteSessions, localSession] : remoteSessions;
+  if (localSession && state?.sessions.some(session => session.id === localSession.id)) setLocalSession(null);
   const stale = Boolean(state && !resource.lastAttemptOk);
-  const canSend = Boolean(effectiveSession && prompt.trim() && busy === null && !promptPending && !stopPending && !stale
-    && effectiveSession.status !== "running" && effectiveSession.status !== "starting"
-    && effectiveSession.status !== "stopped"
-    && !(effectiveSession.status === "failed" && effectiveSession.resumable === false)
-    && !(effectiveSession.status === "waiting_for_executor" && !devices.find(device => device.id === effectiveSession.deviceId)?.online));
 
   const pairingCommands = useMemo(() => {
     if (!pairing) return { posix: "", powershell: "" };
@@ -205,50 +120,6 @@ export default function RemoteWorkspace({ apiBase, hubOrigin }: { apiBase: strin
     } finally { setBusy(null); }
   };
 
-  const sendPrompt = async () => {
-    if (!effectiveSession || !canSend) return;
-    const target = effectiveSession;
-    const submitted = prompt;
-    setPromptPending(true);
-    setNotice(null);
-    let responseStatus: number | undefined;
-    try {
-      const response = await fetch(`${apiBase}/api/remote-workspace/sessions/${target.id}/prompt`, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({ prompt: submitted }),
-      });
-      responseStatus = response.status;
-      const session = await readJsonOrThrow<RemoteSession>(response, t("remote.requestFailed"));
-      if (!session) throw new Error(t("remote.requestFailed"));
-      setPrompt(current => current === submitted ? "" : current);
-      if (stoppedSessionId.current !== target.id) setLocalSession(session);
-      void resource.refresh();
-    } catch (error) {
-      if (stoppedSessionId.current !== target.id) {
-        const rejected = responseStatus !== undefined && responseStatus >= 400 && responseStatus < 500;
-        setNotice({ tone: "err", text: rejected
-          ? error instanceof Error ? error.message : t("remote.requestFailed")
-          : t("remote.submissionUnknown") });
-        void resource.refresh();
-      }
-    } finally { setPromptPending(false); }
-  };
-
-  const stopSession = async () => {
-    if (!effectiveSession || stopPending) return;
-    const target = effectiveSession;
-    setStopPending(true);
-    try {
-      await mutate(`/api/remote-workspace/sessions/${target.id}`, { method: "DELETE" }, t("remote.requestFailed"));
-      stoppedSessionId.current = target.id;
-      setLocalSession({ ...target, status: "stopped" });
-      void resource.refresh();
-    } catch (error) {
-      setNotice({ tone: "err", text: error instanceof Error ? error.message : t("remote.requestFailed") });
-    } finally { setStopPending(false); }
-  };
-
   const revokeDevice = async (device: RemoteDevice) => {
     if (!(await confirmAction({ message: t("remote.revokeConfirm", { name: device.name }), confirmLabel: t("common.remove"), tone: "danger" }))) return;
     setBusy("revoke");
@@ -265,7 +136,7 @@ export default function RemoteWorkspace({ apiBase, hubOrigin }: { apiBase: strin
     setCopiedCommand(await copyText(command) ? kind : null);
   };
 
-  if (resource.loading && !state) return <div className="alert">{t("remote.loading")}</div>;
+  if (!state && !resource.error) return <div className="alert">{t("remote.loading")}</div>;
   if (resource.error && !state) {
     return <><Notice tone="err">{t("remote.loadFailed")}</Notice><button type="button" className="btn btn-ghost" onClick={() => void resource.refresh()}>{t("common.retry")}</button></>;
   }
@@ -337,7 +208,7 @@ export default function RemoteWorkspace({ apiBase, hubOrigin }: { apiBase: strin
                       type="button"
                       className="remote-revoke"
                       aria-label={t("remote.revoke")}
-                      disabled={busy !== null || promptPending || stopPending}
+                      disabled={busy !== null}
                       onClick={() => void revokeDevice(device)}
                     ><IconTrash /></button>
                   </div>
@@ -366,47 +237,14 @@ export default function RemoteWorkspace({ apiBase, hubOrigin }: { apiBase: strin
             {!state?.runtimes?.[effectiveProfile]?.available && state?.runtimes?.[effectiveProfile]?.reason
               ? <p className="remote-runtime-reason">{state.runtimes[effectiveProfile].reason}</p>
               : null}
-            <button type="button" className="btn btn-primary remote-start" onClick={() => void createSession()} disabled={!effectiveDevice?.online || !effectiveRoot || !state?.runtimes?.[effectiveProfile]?.available || busy !== null || promptPending || stopPending}>
+            <button type="button" className="btn btn-primary remote-start" onClick={() => void createSession()} disabled={!effectiveDevice?.online || !effectiveRoot || !state?.runtimes?.[effectiveProfile]?.available || busy !== null}>
               <IconTerminal /> {t("remote.startSession")}
             </button>
           </section>
 
-          <section className="panel remote-console-panel">
-            <div className="remote-section-title">
-              <div><h3>{t("remote.sessions")}</h3>{effectiveSession ? <small>{PROFILE_LABEL[effectiveSession.profile]} · {effectiveSession.deviceName}/{effectiveSession.rootLabel} · {effectiveSession.accessMode === "read-only" ? t("remote.access.readOnly") : effectiveSession.capabilities.includes("workspace.exec") ? t("remote.access.workspace") : t("remote.access.workspaceFilesOnly")}</small> : null}</div>
-              {effectiveSession ? <span className={`remote-status remote-status--${effectiveSession.status}`}>{t(STATUS_TKEY[effectiveSession.status])}</span> : null}
-            </div>
-            {remoteSessions.length > 1 ? (
-              <Select value={effectiveSession?.id ?? ""} options={remoteSessions.map(session => ({ value: session.id, label: `${PROFILE_LABEL[session.profile]} · ${session.deviceName}/${session.rootLabel}` }))} onChange={setSelectedSessionId} label={t("remote.sessions")} />
-            ) : null}
-            {!effectiveSession ? <p className="remote-empty remote-empty--console">{t("remote.noSessions")}</p> : (
-              <>
-                <div className="remote-events" aria-live="polite" aria-label={t("remote.events")}>
-                  {effectiveSession.events.length === 0 ? <p className="remote-empty">{t("remote.noEvents")}</p> : effectiveSession.events.map(event => (
-                    <div key={event.sequence} className={`remote-event remote-event--${event.type}`}>
-                      <span>{event.type === "assistant" ? PROFILE_LABEL[effectiveSession.profile] : t(EVENT_TKEY[event.type])}</span>
-                      <p>{event.text}</p>
-                    </div>
-                  ))}
-                </div>
-                {effectiveSession.status === "failed" && effectiveSession.resumable === false
-                  ? <Notice tone="err">{t("remote.notResumable")}</Notice>
-                  : null}
-                <label className="remote-composer">
-                  <span className="field-label">{t("remote.prompt")}</span>
-                  <textarea className="input" rows={4} value={prompt} onChange={event => setPrompt(event.target.value)} placeholder={t("remote.promptPlaceholder")} disabled={effectiveSession.status === "stopped" || (effectiveSession.status === "failed" && effectiveSession.resumable === false)} onKeyDown={event => {
-                    if ((event.ctrlKey || event.metaKey) && event.key === "Enter") { event.preventDefault(); void sendPrompt(); }
-                  }} />
-                </label>
-                <div className="remote-console-actions">
-                  <button type="button" className="btn btn-primary" onClick={() => void sendPrompt()} disabled={!canSend}>{t("remote.send")}</button>
-                  <button type="button" className="btn btn-danger" onClick={() => void stopSession()} disabled={stopPending || effectiveSession.status === "stopped"}>{t("remote.stop")}</button>
-                </div>
-              </>
-            )}
-          </section>
         </div>
       </div>
+      <RemoteWorkspaceChats key={apiBase} apiBase={apiBase} sessions={sessions} devices={devices} selectedSessionId={selectedSessionId} stale={stale} refresh={resource.refresh} />
     </section>
   );
 }
diff --git a/gui/src/styles-remote-workspace.css b/gui/src/styles-remote-workspace.css
index 10adef67e2f..1e1c62e18b0 100644
--- a/gui/src/styles-remote-workspace.css
+++ b/gui/src/styles-remote-workspace.css
@@ -73,3 +73,70 @@
   .remote-event { max-width: 100%; }
   .remote-pairing-code { letter-spacing: .05em; }
 }
+
+/* Session layout is shared by the browser dashboard and the desktop webview. */
+.remote-chats-workspace { margin-top: var(--space-6); min-width: 0; }
+.remote-chats-toolbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
+.remote-chats-toolbar h3 { margin: 0; font-size: var(--text-section); }
+.remote-chats-toolbar p, .remote-split-limit { margin: 0; color: var(--muted); font-size: var(--text-label); line-height: var(--leading-body); }
+.remote-chats-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-3); align-items: stretch; }
+.remote-session-rail { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--rail); min-width: 0; max-height: 720px; overflow: auto; }
+.remote-session-row { border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--surface); cursor: grab; }
+.remote-session-row.is-active { border-color: var(--accent-ring); background: var(--accent-soft); }
+.remote-session-open { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-width: 0; padding: var(--space-3); color: var(--text); background: transparent; border: 0; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
+.remote-session-open:hover { background: var(--raised-hover); }
+.remote-session-open > span { display: grid; min-width: 0; gap: var(--space-1); }
+.remote-session-open strong, .remote-session-open small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.remote-session-open strong { font-size: var(--text-control); font-weight: var(--weight-semibold); }
+.remote-session-open small { color: var(--muted); font-size: var(--text-caption); }
+.remote-session-open svg { flex: 0 0 auto; width: var(--icon-sm); height: var(--icon-sm); color: var(--muted); }
+.remote-session-split-actions { display: flex; justify-content: flex-end; padding: 0 var(--space-2) var(--space-2); gap: var(--space-1); }
+.remote-session-split-actions .btn { min-height: 28px; padding: var(--space-1) var(--space-2); }
+.remote-session-split-actions svg, .remote-pane-close svg { width: var(--icon-sm); height: var(--icon-sm); }
+.remote-pane-surface { min-width: 0; height: clamp(560px, 75vh, 900px); overflow: auto; border-radius: var(--radius); }
+/* A track holding a nested split reserves that subtree's minimum, so nested side-by-side splits
+   never scroll inside a pane column; when the tree is wider than the surface, the surface scrolls once. */
+.remote-split-branch { display: grid; min-width: calc(var(--split-min-width, 0) * 1px); height: 100%; }
+.remote-split-branch--row { grid-template-columns: minmax(calc(var(--split-first-min, 0) * 1px), calc(var(--split-ratio) * 100% - 4px)) 8px minmax(calc(var(--split-second-min, 0) * 1px), 1fr); }
+.remote-split-branch--column { grid-template-rows: minmax(0, calc(var(--split-ratio) * 100% - 4px)) 8px minmax(0, 1fr); }
+.remote-split-child { min-width: 0; min-height: 0; overflow: auto; }
+.remote-split-divider { position: relative; background: transparent; touch-action: none; cursor: col-resize; }
+.remote-split-branch--column > .remote-split-divider { cursor: row-resize; }
+.remote-split-divider::after { content: ""; position: absolute; inset: 0 3px; background: var(--border); border-radius: var(--radius-xs); }
+.remote-split-branch--column > .remote-split-divider::after { inset: 3px 0; }
+.remote-split-divider:hover::after, .remote-split-divider:focus-visible::after { background: var(--accent); }
+.remote-split-divider:focus-visible, .remote-session-open:focus-visible, .remote-chat-pane-name:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
+.remote-chat-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; overflow: auto; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
+.remote-chat-pane.is-active { border-color: var(--accent-ring); }
+.remote-chat-pane-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
+.remote-chat-pane-name { display: flex; align-items: center; flex: 1; min-width: 0; gap: var(--space-2); cursor: grab; }
+.remote-chat-pane-name > div { display: grid; min-width: 0; }
+.remote-chat-pane-name strong { font-size: var(--text-control); }
+.remote-chat-pane-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--text-caption); }
+.remote-chat-pane-name svg { flex: 0 0 auto; width: var(--icon-sm); height: var(--icon-sm); color: var(--muted); }
+.remote-chat-access { color: var(--muted); font-size: var(--text-caption); margin-top: var(--space-2); }
+.remote-chat-pane .remote-events { flex: 1 1 180px; min-height: 100px; max-height: none; }
+.remote-chat-pane > :not(.remote-events) { flex-shrink: 0; }
+.remote-chat-pane .remote-composer textarea { min-height: 44px; height: 64px; }
+.remote-pane-drop-targets { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
+.remote-pane-drop { position: absolute; display: grid; place-items: center; color: var(--accent); font-size: var(--text-label); font-weight: var(--weight-semibold); background: color-mix(in srgb, var(--accent-soft) 94%, var(--surface)); border: 2px dashed var(--accent-ring); }
+.remote-pane-drop.is-over { background: var(--accent-soft); border-color: var(--accent); border-style: solid; }
+.remote-pane-drop--left { inset: 0 70% 0 0; }
+.remote-pane-drop--right { inset: 0 0 0 70%; }
+.remote-pane-drop--up { inset: 0 30% 50%; }
+.remote-pane-drop--down { inset: 50% 30% 0; }
+@media (max-width: 980px) {
+  .remote-chats-layout { grid-template-columns: 1fr; }
+  .remote-session-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); max-height: 220px; }
+}
+@media (max-width: 760px) {
+  /* Keep every composer reachable without nested horizontal scrolling. The saved
+     split tree and ratios remain intact for a return to a wider viewport. */
+  .remote-pane-surface { height: auto; overflow: visible; }
+  .remote-split-branch { display: flex; flex-direction: column; gap: var(--space-3); height: auto; min-width: 0; }
+  .remote-split-child { overflow: visible; }
+  .remote-split-divider { display: none; }
+  .remote-chat-pane { height: auto; min-height: 440px; }
+  .remote-session-split-actions .btn, .remote-pane-close { min-height: 44px; min-width: 44px; }
+  .remote-chat-pane .remote-console-actions .btn { min-height: 44px; }
+}
diff --git a/gui/tests/remote-workspace-split-layout.test.ts b/gui/tests/remote-workspace-split-layout.test.ts
new file mode 100644
index 00000000000..be230380da7
--- /dev/null
+++ b/gui/tests/remote-workspace-split-layout.test.ts
@@ -0,0 +1,68 @@
+import { expect, test } from "bun:test";
+import { MAX_PANES, PANE_MIN_WIDTH, minLayoutWidth, openPane, pane, paneIds, parseLayout, reconcileLayout, removePane, resizeSplit, splitPane, type PaneLayout } from "../src/components/remote-workspace/split-layout";
+
+test("nested side-by-side splits reserve the width of every pane they lay out in a row", () => {
+  let row = splitPane(pane("a"), "b", "a", "right")!;
+  row = splitPane(row, "c", "b", "right")!;
+  row = splitPane(row, "d", "c", "right")!;
+  expect(minLayoutWidth(row)).toBe(4 * PANE_MIN_WIDTH + 3 * 8);
+  if (row.type !== "split") throw new Error("expected split");
+  // Each track's minimum covers its subtree, so the inner splits fit without their own scrollbar.
+  expect(minLayoutWidth(row.first) + 8 + minLayoutWidth(row.second)).toBe(minLayoutWidth(row));
+  const grid = splitPane(splitPane(pane("a"), "b", "a", "right")!, "c", "a", "down")!;
+  expect(minLayoutWidth(grid)).toBe(2 * PANE_MIN_WIDTH + 8);
+});
+
+test("drop edges choose correct order and axis", () => {
+  for (const edge of ["left", "right", "up", "down"] as const) {
+    const tree = splitPane(pane("a"), "b", "a", edge)!;
+    if (tree.type !== "split") throw new Error("expected split");
+    expect(tree.axis).toBe(edge === "left" || edge === "right" ? "row" : "column");
+    expect(paneIds(tree)).toEqual(edge === "left" || edge === "up" ? ["b", "a"] : ["a", "b"]);
+  }
+});
+
+test("moves visible sessions without duplication and repairs removed branches", () => {
+  let tree = splitPane(pane("a"), "b", "a", "right")!;
+  tree = splitPane(tree, "c", "b", "down")!;
+  tree = splitPane(tree, "b", "a", "left")!;
+  expect(paneIds(tree)).toEqual(["b", "a", "c"]);
+  expect(paneIds(removePane(tree, "b"))).toEqual(["a", "c"]);
+  expect(splitPane(tree, "a", "a", "right")).toBe(tree);
+});
+
+test("moving B beside A gives its divider a distinct ID from the A/B ancestor", () => {
+  let tree = splitPane(pane("a"), "b", "a", "right")!;
+  tree = splitPane(tree, "c", "b", "down")!;
+  tree = splitPane(tree, "b", "a", "right")!;
+  if (tree.type !== "split" || tree.first.type !== "split") throw new Error("expected nested split");
+  expect(tree.first.id).not.toBe(tree.id);
+  const resized = resizeSplit(tree, tree.first.id, 0.7);
+  if (resized.type !== "split" || resized.first.type !== "split") throw new Error("expected nested split");
+  expect(resized.ratio).toBe(0.5);
+  expect(resized.first.ratio).toBe(0.7);
+});
+
+test("four-pane limit rejects new panes but still allows existing-pane moves", () => {
+  let tree: PaneLayout = pane("a");
+  for (const id of ["b", "c", "d"]) tree = splitPane(tree, id, "a", "right")!;
+  expect(paneIds(tree)).toHaveLength(MAX_PANES);
+  expect(splitPane(tree, "e", "a", "down")).toBe(tree);
+  expect(paneIds(splitPane(tree, "b", "d", "up"))).toHaveLength(MAX_PANES);
+  expect(paneIds(openPane(tree, "e", "d"))).toContain("e");
+  expect(paneIds(openPane(tree, "b", "d"))).toEqual(paneIds(tree));
+});
+
+test("restoration prunes unknown sessions and validates untrusted storage", () => {
+  const tree = splitPane(pane("a"), "b", "a", "down")!;
+  expect(parseLayout(JSON.stringify(tree))).toEqual(tree);
+  expect(reconcileLayout(tree, ["b", "c"])).toEqual(pane("b"));
+  expect(reconcileLayout(tree, ["c", "d"], "c")).toEqual(pane("c"));
+  expect(parseLayout("bad json")).toBeNull();
+  expect(parseLayout(JSON.stringify({ type: "split", id: "x", axis: "row", ratio: 0.5, first: pane("a"), second: pane("a") }))).toBeNull();
+  if (tree.type !== "split") throw new Error("expected split");
+  const inner = { ...tree, first: pane("c"), second: pane("d") };
+  expect(parseLayout(JSON.stringify({ ...tree, first: inner }))).toBeNull();
+  const bounded = resizeSplit(tree, tree.id, 2);
+  expect(bounded.type === "split" && bounded.ratio).toBe(0.8);
+});
diff --git a/gui/tests/remote-workspace-split.test.tsx b/gui/tests/remote-workspace-split.test.tsx
new file mode 100644
index 00000000000..0f2ce728c44
--- /dev/null
+++ b/gui/tests/remote-workspace-split.test.tsx
@@ -0,0 +1,148 @@
+import { afterEach, beforeEach, expect, test } from "bun:test";
+import { Window } from "happy-dom";
+import type { Root } from "react-dom/client";
+import { pane, parseLayout, splitPane } from "../src/components/remote-workspace/split-layout";
+import type { RemoteSession } from "../src/components/remote-workspace/types";
+
+let win: Window, root: Root | null = null, previous: Record<string, unknown>;
+const globals = ["window", "document", "navigator", "localStorage", "fetch", "IS_REACT_ACT_ENVIRONMENT"] as const;
+beforeEach(() => {
+  previous = Object.fromEntries(globals.map(key => [key, Reflect.get(globalThis, key)]));
+  win = new Window({ url: "http://localhost/#remote-workspace" });
+  for (const [key, value] of Object.entries({ window: win, document: win.document, navigator: win.navigator, localStorage: win.localStorage, IS_REACT_ACT_ENVIRONMENT: true })) Object.defineProperty(globalThis, key, { configurable: true, value });
+});
+afterEach(async () => {
+  if (root) { const { act } = await import("react"); await act(async () => root?.unmount()); root = null; }
+  for (const key of globals) Object.defineProperty(globalThis, key, { configurable: true, value: previous[key] });
+});
+const session = (id: string): RemoteSession => ({ id, profile: "codex", accessMode: "read-only", deviceId: "device", deviceName: "Computer", rootId: "root", rootLabel: `Project ${id}`, capabilities: ["workspace.read"], tools: ["read_file"], threadId: id, resumable: true, status: "ready", createdAt: "2026-01-01T00:00:00Z", updatedAt: "2026-01-01T00:00:00Z", events: [] });
+const response = (value: unknown) => Response.json(value);
+async function mount(sessions = [session("a"), session("b"), session("c")]) {
+  const [{ act }, { createRoot }, { LanguageProvider }, { RemoteWorkspaceChats }] = await Promise.all([import("react"), import("react-dom/client"), import("../src/i18n/provider"), import("../src/components/remote-workspace/RemoteWorkspaceChats")]);
+  const host = win.document.createElement("div") as unknown as HTMLElement;
+  win.document.body.appendChild(host as never);
+  await act(async () => { root = createRoot(host); root.render(<LanguageProvider><RemoteWorkspaceChats apiBase="/split" sessions={sessions} devices={[]} selectedSessionId="" stale={false} refresh={() => {}} /></LanguageProvider>); });
+  const row = (id: string) => host.querySelector(`[data-session-open="${id}"]`)!.parentElement!;
+  const paneFor = (id: string) => host.querySelector<HTMLElement>(`.remote-chat-pane[data-session-id="${id}"]`)!;
+  const button = (element: Element, text: string) => [...element.querySelectorAll<HTMLButtonElement>("button")].find(value => value.textContent?.includes(text) || value.getAttribute("aria-label") === text)!;
+  const click = async (element: HTMLElement) => act(async () => element.click());
+  const type = async (id: string, value: string) => act(async () => {
+    const textarea = paneFor(id).querySelector("textarea")!;
+    Object.getOwnPropertyDescriptor(win.HTMLTextAreaElement.prototype, "value")!.set!.call(textarea, value);
+    textarea.dispatchEvent(new win.Event("input", { bubbles: true }) as never);
+  });
+  return { host, row, paneFor, button, click, type, act };
+}
+
+test("split controls, keyboard resize, close and reopen retain drafts without stopping a session", async () => {
+  let writes = 0;
+  Reflect.set(globalThis, "fetch", async () => { writes++; return response({ ok: true }); });
+  const { host, row, paneFor, button, click, type, act } = await mount();
+  await click(button(row("a"), "Split right"));
+  expect(host.querySelectorAll(".remote-chat-pane").length).toBe(2);
+  await type("a", "keep this draft");
+  const divider = host.querySelector('[role="separator"]')!;
+  await act(async () => divider.dispatchEvent(new win.KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }) as never));
+  expect(divider.getAttribute("aria-valuenow")).toBe("55");
+  await click(button(paneFor("a"), "Close pane"));
+  expect(host.querySelectorAll(".remote-chat-pane").length).toBe(1);
+  await click(row("a").querySelector("button")!);
+  expect(paneFor("a").querySelector("textarea")!.value).toBe("keep this draft");
+  expect(writes).toBe(0);
+  expect(win.localStorage.getItem("ocx-remote-workspace-layout:/split")).not.toContain("keep this draft");
+});
+
+test("concurrent prompts are session scoped and late replies cannot reopen a stopped pane", async () => {
+  const held = new Map<string, (response: Response) => void>();
+  const calls: string[] = [];
+  Reflect.set(globalThis, "fetch", async (input: RequestInfo | URL, init?: RequestInit) => {
+    const path = String(input); calls.push(`${init?.method} ${path}`);
+    if (path.endsWith("/prompt")) return new Promise<Response>(resolve => held.set(path.includes("/a/") ? "a" : "c", resolve));
+    return response({ ok: true });
+  });
+  const { host, row, paneFor, button, click, type, act } = await mount();
+  await click(button(row("a"), "Split right"));
+  await type("a", "first a"); await type("c", "first c");
+  await click(button(paneFor("a"), "Send")); await click(button(paneFor("c"), "Send"));
+  expect(held.size).toBe(2);
+  expect(button(paneFor("a"), "Send").disabled).toBe(true);
+  expect(button(paneFor("c"), "Send").disabled).toBe(true);
+  expect(button(paneFor("a"), "Stop").disabled).toBe(false);
+  await type("c", "new c draft");
+  await click(button(paneFor("a"), "Stop"));
+  await act(async () => {
+    held.get("a")!(response({ ...session("a"), events: [{ sequence: 2, type: "assistant", text: "late a", at: "2026-01-01T00:00:01Z" }] }));
+    held.get("c")!(response({ ...session("c"), status: "running", events: [{ sequence: 2, type: "status", text: "accepted c", at: "2026-01-01T00:00:01Z" }] }));
+  });
+  expect(paneFor("a").textContent).toContain("Stopped");
+  expect(paneFor("a").textContent).not.toContain("late a");
+  expect(paneFor("a").querySelector("textarea")!.disabled).toBe(true);
+  expect(paneFor("c").querySelector("textarea")!.value).toBe("new c draft");
+  expect(button(paneFor("c"), "Send").disabled).toBe(true);
+  expect(calls.filter(value => value.startsWith("DELETE"))).toEqual(["DELETE /split/api/remote-workspace/sessions/a"]);
+  expect(host.textContent).toContain("accepted c");
+});
+
+test("dragging a listed session to a pane edge splits, and moving a pane never duplicates it", async () => {
+  const { host, row, paneFor, act } = await mount();
+  const drag = async (source: Element, id: string, target: string, edge: string) => {
+    const data: Record<string, string> = {};
+    const transfer = { setData: (type: string, value: string) => { data[type] = value; }, getData: (type: string) => data[type], effectAllowed: "", dropEffect: "" };
+    const event = (type: string) => { const value = new win.Event(type, { bubbles: true, cancelable: true }); Object.defineProperty(value, "dataTransfer", { value: transfer }); return value; };
+    await act(async () => source.dispatchEvent(event("dragstart") as never));
+    expect(data["application/x-opencodex-session"]).toBe(id);
+    const zone = paneFor(target).querySelector(`.remote-pane-drop--${edge}`)!;
+    await act(async () => { zone.dispatchEvent(event("dragover") as never); zone.dispatchEvent(event("drop") as never); });
+  };
+  await drag(row("a"), "a", "c", "left");
+  expect(host.querySelectorAll(".remote-chat-pane").length).toBe(2);
+  await drag(paneFor("a").querySelector("[data-pane-heading]")!, "a", "c", "down");
+  expect(host.querySelectorAll('.remote-chat-pane[data-session-id="a"]').length).toBe(1);
+  expect(host.querySelector('.remote-split-branch--column')).not.toBeNull();
+});
+
+test("a cold page mount preserves saved panes until its first network snapshot arrives", async () => {
+  const key = "ocx-remote-workspace-layout:/cold-split-fixture";
+  const saved = splitPane(pane("a"), "b", "a", "right")!;
+  win.localStorage.setItem(key, JSON.stringify(saved));
+  let finish!: (value: Response) => void;
+  Reflect.set(globalThis, "fetch", () => new Promise<Response>(resolve => { finish = resolve; }));
+  const [{ act }, { createRoot }, { LanguageProvider }, { default: RemoteWorkspace }] = await Promise.all([import("react"), import("react-dom/client"), import("../src/i18n/provider"), import("../src/pages/RemoteWorkspace")]);
+  const host = win.document.createElement("div") as unknown as HTMLElement;
+  await act(async () => { root = createRoot(host); root.render(<LanguageProvider><RemoteWorkspace apiBase="/cold-split-fixture" hubOrigin="http://localhost" /></LanguageProvider>); });
+  expect(JSON.parse(win.localStorage.getItem(key)!)).toEqual(saved);
+  await act(async () => { finish(response({ available: true, sessions: [session("a"), session("b")], devices: [], runtimes: {} })); });
+  expect(host.querySelectorAll(".remote-chat-pane").length).toBe(2);
+});
+
+
+test("both divider axes honor keyboard bounds and restore sizes without draft storage", async () => {
+  const { host, row, button, click, type, act } = await mount();
+  await click(button(row("a"), "Split right"));
+  await click(button(row("b"), "Split below"));
+  await type("a", "private unsent draft");
+  const key = "ocx-remote-workspace-layout:/split";
+  const dividers = host.querySelectorAll('[role="separator"]');
+  const press = async (divider: Element, key: string) => act(async () => divider.dispatchEvent(new win.KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }) as never));
+  expect(dividers[0]!.getAttribute("aria-orientation")).toBe("vertical");
+  expect(dividers[1]!.getAttribute("aria-orientation")).toBe("horizontal");
+  await press(dividers[0]!, "ArrowDown");
+  expect(dividers[0]!.getAttribute("aria-valuenow")).toBe("50");
+  await press(dividers[0]!, "Home");
+  await press(dividers[0]!, "ArrowLeft");
+  expect(dividers[0]!.getAttribute("aria-valuenow")).toBe("20");
+  await press(dividers[1]!, "End");
+  await press(dividers[1]!, "ArrowDown");
+  expect(dividers[1]!.getAttribute("aria-valuenow")).toBe("80");
+  await press(dividers[1]!, "ArrowUp");
+  expect(dividers[1]!.getAttribute("aria-valuenow")).toBe("75");
+  const saved = win.localStorage.getItem(key)!;
+  expect(saved).not.toContain("private unsent draft");
+  const tree = parseLayout(saved);
+  expect(tree?.type === "split" && tree.ratio).toBe(0.2);
+  await act(async () => { root!.unmount(); root = null; });
+  const restored = await mount();
+  expect([...restored.host.querySelectorAll('[role="separator"]')].map(divider => divider.getAttribute("aria-valuenow"))).toEqual(["20", "75"]);
+  expect(restored.paneFor("a").querySelector("textarea")!.value).toBe("");
+  expect(win.localStorage.getItem(key)).toBe(saved);
+});
diff --git a/gui/tests/remote-workspace.test.tsx b/gui/tests/remote-workspace.test.tsx
index 3ebd0069f0b..476523a70c7 100644
--- a/gui/tests/remote-workspace.test.tsx
+++ b/gui/tests/remote-workspace.test.tsx
@@ -273,9 +273,8 @@ test("a pruned explicit selection still compares the fallback acceptance cursor"
     return jsonResponse({ ...snapshot, sessions: pruned ? [fallback] : [old, fallback] });
   });
   const { host, act, button } = await mountRemotePage("/pruned-selection-fixture");
-  await act(async () => { (host.querySelector('button[aria-label="Sessions"]') as HTMLButtonElement).click(); });
-  const option = [...win.document.querySelectorAll('[role="option"]')].find(element => element.textContent?.includes("Older session"));
-  expect(option).toBeDefined();
+  const option = host.querySelector(`button[data-session-open="${SESSION_ID}"]`);
+  expect(option).not.toBeNull();
   await act(async () => { (option as unknown as HTMLButtonElement).click(); });
   pruned = true;
   await act(async () => { button("Refresh").click(); });
diff --git a/structure/desktop-shell.md b/structure/desktop-shell.md
index 9b86ae2b237..233a07c3861 100644
--- a/structure/desktop-shell.md
+++ b/structure/desktop-shell.md
@@ -53,7 +53,8 @@ the macOS window has a 360-point minimum width. The same test pins the capabilit
 on the app origin because the bundled bootstrap and update pages draw their own matching strip —
 a page with an overlay title bar and no strip cannot be dragged or zoomed at all. Windows and
 Linux keep the native title bar: the shell ships no min/max/close widgets of its own, and the
-sidebar-top layout applies unchanged beneath it.
+sidebar-top layout applies unchanged beneath it. The main webview disables Tauri’s native
+drag/drop handler in `desktop/src-tauri/src/lib.rs` so HTML session-pane drops reach the dashboard on Windows.
 
 ## Startup, quit and the tray
 
diff --git a/structure/remote-workspace.md b/structure/remote-workspace.md
index 0d066206ded..93e43c41221 100644
--- a/structure/remote-workspace.md
+++ b/structure/remote-workspace.md
@@ -39,6 +39,23 @@ The listener retains an awaited shutdown callback only after optional activation
 
 `gui/src/pages/RemoteWorkspace.tsx` defaults to read-only access, displays actual effective capabilities, and keeps Stop available while a prompt is pending. Error retries preserve draft text. The UI explains explicit Hub opt-in in each locale; no historical screenshot is evidence of the current surface.
 
+The session console supports a session sidebar and up to four independent conversation panes in
+both dashboard hosts. Dragging a session to an edge splits or moves its pane; accessible split
+buttons and keyboard-resizable separators offer the same layout controls. Closing a pane only
+changes the view. Drafts, prompt admission, local response cursors and Stop state are keyed by
+session so an in-flight request never disables an unrelated conversation. This is a dashboard
+feature; neither the upstream Codex terminal UI nor the official desktop renderer is modified.
+
+`gui/src/components/remote-workspace/RemoteWorkspaceChats.tsx` owns the session rail, panes and
+resize/drop controls; `split-layout.ts` validates and transforms the persisted layout tree.
+`use-session-actions.ts` isolates drafts, concurrent prompt requests and Stop races by session,
+while `types.ts` shares the dashboard contracts with the page. Only layout identifiers, axes
+and ratios are stored locally; draft text and session output remain in memory. Separators support
+axis-specific arrow keys and Home/End bounds. At viewport widths up to 760px, panes stack
+without separators or horizontal scrolling while the saved desktop split tree remains intact.
+A track that holds a nested split reserves that subtree's minimum width (`minLayoutWidth`), so
+side-by-side splits never scroll inside a pane column; an oversized tree scrolls the pane surface once.
+
 Hub runtime admission counts pending create/resume starts as well as live handles against global and per-device limits; every outcome releases its reservation. Stop and shutdown reclaim late resumed handles before clearing ownership. Coordinator result size limits normalize both response text and success, so bridge and MCP callers receive consistent errors.
 
 Prompt HTTP admission returns 202 with the existing session/event cursor; tracked operations publish terminal status for polling and attach a rejection observer immediately. Reconnect/resume cannot publish ready while a turn is active. The dashboard prefers newer local event cursors over stale polling, favors authoritative polling on ties, retains unconfirmed draft text with an uncertainty notice, and never retries prompt POSTs automatically.