megaproxy/tiletopia
1
0
Fork 0
Code Issues Pull requests Projects Releases 8 Packages Wiki Activity Actions

Phase 2: drag-/right-click-a-pane-to-new-window

Browse source 
Right-click any pane's title bar → "Move to new window" pops it into a
fresh tiletopia window with its PTY intact. Same Tauri process; the
PtyManager is shared, so the existing PaneId stays valid and Tauri 2's
process-wide event routing keeps pane://{id}/data flowing into the new
window's XtermPane.

Mechanism (Rust-side, plan-agent's main correction over my draft):
- pty.rs: PtyManager.transferring is a per-pane refcount; kill_pane
  becomes a no-op while it's >0. Source window's React unmount calls
  kill_pane → silently dropped while in flight; target window's
  claim_pane decrements after it has subscribed.
- window_state.rs: per-window workspaces snapshot map +
  debounced-by-tokio aggregate save. Each window pushes its tabs via
  push_window_workspaces; backend writes the merged
  { version: 2, workspaces: [...] } envelope. Non-main windows have
  their entries dropped on CloseRequested so closing a detached window
  discards its tabs (Chrome-style).
- commands: mark_pane_transferring, claim_pane, get_pane_ring (base64
  scrollback ring snapshot), create_pane_window, take_pending_window_init,
  push_window_workspaces.

Frontend:
- XtermPane gets `existingPaneId?: PaneId`: skip spawn, replay ring
  snapshot via term.write before attaching the live data listener,
  resize PTY to this window's grid, claim_pane. Scrollback replay was
  the plan agent's other ship-in-v1 call — without it a transferred
  Claude session looks blank until next prompt repaint.
- LeafPane: onContextMenu opens a fixed-positioned "Move to new
  window" popover. Esc / outside-click dismiss.
- orchestration adds moveToNewWindow + getInitialPaneIdFor; App owns a
  one-shot transferredPaneIdsRef cleared in registerPaneId.
- App mount branches on getCurrentWebviewWindow().label: main loads
  workspace.json as before; non-main calls take_pending_window_init
  and builds a singleton workspace around the adopted leaf.
- MCP mirror + onMcpRequest only run in main (paneIdByLeafRef is per-
  window; Claude sees the main window's current tab as the single
  workspace surface).

pnpm check (tsc -b) clean. 79/79 vitest pass. Rust side authored in
WSL; cargo build needs verification on Windows host before this is
runnable.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
megaproxy 2026-05-28 18:57:31 +01:00
parent 1a035ad0a6
commit 8ad51787fc
12 changed files with 797 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

192
src/App.tsx
View file

@ -18,6 +18,11 @@ import {
mcpPolicySave,
writeToPane,
killPane,
markPaneTransferring,
claimPane,
createPaneWindow,
takePendingWindowInit,
pushWindowWorkspaces,
type PaneId,
type SpawnSpec,
type SshHost,
@ -29,6 +34,14 @@ import {
type McpAuditEntry,
} from "./ipc";
import { listen } from "@tauri-apps/api/event";
import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
const MAIN_WINDOW_LABEL = "main";
/** Current window label, captured once at module load — used to decide
* load path (load_workspace vs take_pending_window_init) and to push
* this window's state to the cross-window aggregator. */
const CURRENT_WINDOW_LABEL = getCurrentWebviewWindow().label;
const IS_MAIN_WINDOW = CURRENT_WINDOW_LABEL === MAIN_WINDOW_LABEL;
import {
type TreeNode,
type NodeId,
@ -83,7 +96,6 @@ import "./App.css";
import "./lib/layout/Gutter.css";
const LEGACY_STORAGE_KEY = "tiletopia.tree.v1";
const SAVE_DEBOUNCE_MS = 500;
/** Picker default for *new* panes. SSH never lives here — SSH connections
* are always explicit, never a default. */
@ -220,6 +232,10 @@ export default function App() {
// ---- non-reactive lookups -----------------------------------------------
const paneIdByLeafRef = useRef<Map<NodeId, PaneId>>(new Map());
const nextNotifIdRef = useRef(1);
/** Leaves that just arrived via a window transfer, mapped to the
* existing PaneId their XtermPane should adopt. One-shot: cleared in
* registerPaneId once the pane registers. */
const transferredPaneIdsRef = useRef<Map<NodeId, PaneId>>(new Map());
const treeRef = useRef(tree);
useEffect(() => {
treeRef.current = tree;
@ -237,25 +253,62 @@ export default function App() {
useEffect(() => {
let cancelled = false;
(async () => {
let loadedEnvelope: ReturnType<typeof deserializeWorkspaces> = null;
try {
const json = await loadWorkspace();
if (json) loadedEnvelope = deserializeWorkspaces(json);
} catch (e) {
console.warn("loadWorkspace failed:", e);
}
if (!loadedEnvelope) {
// First: is this a detached window with a pending transfer payload?
// Non-main windows ALWAYS go through this path (they never read
// workspace.json — only main owns it). A detached window with no
// pending init is the dev-reload / edge case; we boot with a blank
// default workspace.
let initialEnvelope: ReturnType<typeof deserializeWorkspaces> = null;
let adoptedLeafId: NodeId | null = null;
if (!IS_MAIN_WINDOW) {
try {
const legacy = localStorage.getItem(LEGACY_STORAGE_KEY);
if (legacy) {
loadedEnvelope = deserializeWorkspaces(legacy);
if (loadedEnvelope) {
void saveWorkspace(serializeWorkspaces(loadedEnvelope));
const pending = await takePendingWindowInit(CURRENT_WINDOW_LABEL);
if (pending) {
try {
const adoptedLeaf = JSON.parse(pending.leafJson) as LeafNode;
if (adoptedLeaf && adoptedLeaf.kind === "leaf") {
transferredPaneIdsRef.current.set(adoptedLeaf.id, pending.paneId);
adoptedLeafId = adoptedLeaf.id;
initialEnvelope = {
version: 2,
workspaces: [
{
id: newId(),
name: pending.workspaceName || "Detached",
tree: adoptedLeaf,
},
],
};
}
} catch (e) {
console.warn("invalid pending leafJson:", e);
}
localStorage.removeItem(LEGACY_STORAGE_KEY);
}
} catch (e) {
console.warn("legacy localStorage migration failed:", e);
console.warn("takePendingWindowInit failed:", e);
}
} else {
// Main window: load workspace.json (and legacy fallback).
try {
const json = await loadWorkspace();
if (json) initialEnvelope = deserializeWorkspaces(json);
} catch (e) {
console.warn("loadWorkspace failed:", e);
}
if (!initialEnvelope) {
try {
const legacy = localStorage.getItem(LEGACY_STORAGE_KEY);
if (legacy) {
initialEnvelope = deserializeWorkspaces(legacy);
if (initialEnvelope) {
void saveWorkspace(serializeWorkspaces(initialEnvelope));
}
localStorage.removeItem(LEGACY_STORAGE_KEY);
}
} catch (e) {
console.warn("legacy localStorage migration failed:", e);
}
}
}
@ -283,7 +336,7 @@ export default function App() {
if (cancelled) return;
let envelope = loadedEnvelope;
let envelope = initialEnvelope;
if (!envelope) {
envelope = singletonEnvelope(
newLeaf(defaultShellAsLeafProps(initialDefault)),
@ -296,6 +349,13 @@ export default function App() {
}
setWorkspaces(envelope.workspaces);
setCurrentWorkspaceId(envelope.workspaces[0].id);
if (adoptedLeafId) {
setActiveLeafByWorkspace((prev) => {
const m = new Map(prev);
m.set(envelope!.workspaces[0].id, adoptedLeafId);
return m;
});
}
setDistros(resolvedDistros);
setHosts(resolvedHosts);
setDefaultShell(initialDefault);
@ -306,15 +366,16 @@ export default function App() {
};
}, []);
// ---- debounced save ------------------------------------------------------
// ---- workspace sync to backend aggregator -------------------------------
// Every window pushes its own workspaces snapshot; the backend merges
// across windows and debounces the actual workspace.json write (500ms
// tokio sleep inside Rust). This replaces the v0.3.0 per-window
// saveWorkspace path which would race when two windows wrote at once.
useEffect(() => {
if (!ready) return;
const id = window.setTimeout(() => {
saveWorkspace(
serializeWorkspaces({ version: 2, workspaces }),
).catch((e) => console.warn("saveWorkspace failed:", e));
}, SAVE_DEBOUNCE_MS);
return () => clearTimeout(id);
pushWindowWorkspaces(CURRENT_WINDOW_LABEL, JSON.stringify(workspaces)).catch(
(e) => console.warn("pushWindowWorkspaces failed:", e),
);
}, [workspaces, ready]);
// ---- focus polling → setActive (xterm.js eats pointerdown) --------------
@ -899,6 +960,9 @@ export default function App() {
return;
}
paneIdByLeafRef.current.set(leafId, paneId);
// One-shot: now that the pane has registered, the transferred-id
// hint is consumed.
transferredPaneIdsRef.current.delete(leafId);
const waiter = pendingPaneRegistrations.current.get(leafId);
if (waiter) {
pendingPaneRegistrations.current.delete(leafId);
@ -908,6 +972,71 @@ export default function App() {
[],
);
const getInitialPaneIdFor = useCallback(
(leafId: NodeId): PaneId | undefined =>
transferredPaneIdsRef.current.get(leafId),
[],
);
/** Pop the given leaf into a fresh top-level window. The source's
* XtermPane will unmount as the leaf leaves this window's tree;
* markPaneTransferring keeps the underlying PTY alive until the new
* window's XtermPane adopts it via existingPaneId. */
const moveToNewWindow = useCallback(
async (leafId: NodeId) => {
const leaf = findLeaf(treeRef.current, leafId);
if (!leaf || leaf.kind !== "leaf") {
notify("Cannot move — pane not found");
return;
}
const paneId = paneIdByLeafRef.current.get(leafId);
if (paneId == null) {
notify("Cannot move — PTY not ready yet");
return;
}
try {
await markPaneTransferring(paneId);
} catch (e) {
notify(`mark_pane_transferring failed: ${e}`);
return;
}
// Snapshot the leaf BEFORE removing — closeLeaf may produce a tree
// where this leaf is no longer present, breaking findLeaf later.
const leafJson = JSON.stringify(leaf);
const workspaceName = leaf.label ?? `Pane ${paneId}`;
// Remove from current tree (sibling promotes naturally via closeLeaf).
// If this leaf was the entire tree, fall back to a fresh default so
// the source workspace never becomes empty (matches close behavior).
setTree(
(t) =>
closeLeaf(t, leafId) ?? newLeaf(defaultShellAsLeafProps(defaultShell)),
);
paneIdByLeafRef.current.delete(leafId);
setActiveLeafByWorkspace((prev) => {
const wsId = currentWorkspaceIdRef.current;
if (!wsId) return prev;
if (prev.get(wsId) !== leafId) return prev;
const m = new Map(prev);
m.set(wsId, null);
return m;
});
try {
await createPaneWindow({ leafJson, paneId, workspaceName });
} catch (e) {
notify(`Failed to open new window: ${e}`);
// The leaf is already gone from our tree and the PTY is orphaned
// in transferring state. Drop the refcount so a manual kill could
// eventually succeed; but the leaf no longer exists in any tree.
void claimPane(paneId).catch(() => {});
}
},
[defaultShell, notify],
);
/** Insert a new leaf into the tree from a SpawnSpec — used by the MCP
* spawn_pane and connect_host handlers. Returns the new leaf's id
* (caller awaits waitForPaneRegistration on it for the paneId).
@ -1097,6 +1226,8 @@ export default function App() {
setHeaderDragOver,
endHeaderDrag,
reportLeafIdle,
moveToNewWindow,
getInitialPaneIdFor,
}),
[
activeLeafId,
@ -1119,6 +1250,8 @@ export default function App() {
setHeaderDragOver,
endHeaderDrag,
reportLeafIdle,
moveToNewWindow,
getInitialPaneIdFor,
],
);
@ -1126,11 +1259,18 @@ export default function App() {
// Whenever the tree, hosts, or active selection change AND the MCP server
// is running, push a fresh mirror down to the backend. Per-leaf mcpAllow
// gates whether each leaf appears in the mirror (default-deny).
//
// Multi-window scoping: only the MAIN window pushes the mirror. Detached
// windows have their own current-workspace tree but Claude sees ONE
// workspace surface — main's current tab. Otherwise two windows would
// overwrite each other's mirrors on every keystroke and Claude's view
// would flap unpredictably.
const allowedPaneCount = useMemo(
() => Array.from(walkLeaves(tree)).filter((l) => l.mcpAllow).length,
[tree],
);
useEffect(() => {
if (!IS_MAIN_WINDOW) return;
if (!mcpStatus.running) return;
const leaves: Record<string, McpMirroredLeaf> = {};
for (const leaf of walkLeaves(tree)) {
@ -1590,6 +1730,10 @@ export default function App() {
);
useEffect(() => {
// Only the main window handles MCP requests — paneIdByLeafRef is
// per-window so a request targeting a leaf in another window would
// fail anyway. Keeps responsibility clean: MCP sees main, period.
if (!IS_MAIN_WINDOW) return;
let cancelled = false;
let unlisten: (() => void) | undefined;
void onMcpRequest(async (req: McpActionRequest) => {