feat(remote): a resizable split tree for remote workspaces, with grow/shrink (#1091)

changelog.d/1094.md

@@ -0,0 +1,3 @@
+### Added
+
+- **A workspace bootstrapped on a remote host now has a real, resizable split tree — parity with a local workspace, not a fixed mirror grid.** "New workspace on this host" (#1067) used to leave you with a grid sized purely from the pane count; "Split right"/"Split down" now let you place a new pane exactly where you want it, drag the divider to resize, and close any one pane without disturbing the rest (#1091).

src/main/ipc/handlers/__tests__/remote.handler.test.ts

@@ -110,6 +110,7 @@ function fakeClient(host: RemoteHost) {
     write: vi.fn(async () => undefined),
     listWorkspaces: vi.fn(async (): Promise<RemoteWorkspacesResponse> => ({ workspaces: [] })),
     createWorkspace: vi.fn(async (): Promise<{ sessionId: string }> => ({ sessionId: 'web-1' })),
+    closeSession: vi.fn(async (): Promise<void> => undefined),
     onMeta: vi.fn((cb: (e: RemoteMetaEvent) => void) => { metaCbs.push(cb); }),
     onResize: vi.fn((cb: (e: RemoteResizeEvent) => void) => { resizeCbs.push(cb); }),
     onData: vi.fn((cb: (e: RemoteDataEvent) => void) => { dataCbs.push(cb); }),
@@ -127,6 +128,7 @@ function fakeClient(host: RemoteHost) {
     write: ReturnType<typeof vi.fn>;
     listWorkspaces: ReturnType<typeof vi.fn>;
     createWorkspace: ReturnType<typeof vi.fn>;
+    closeSession: ReturnType<typeof vi.fn>;
     emitMeta: (e: RemoteMetaEvent) => void;
     emitResize: (e: RemoteResizeEvent) => void;
     emitData: (e: RemoteDataEvent) => void;
@@ -535,6 +537,87 @@ describe('remote.handler — workspaceCreate (#1001)', () => {
   });
 });
 
+describe('remote.handler — workspacePaneAdd (#1091)', () => {
+  const host: RemoteHost = { id: 'h1', label: 'box', origin: 'https://box:9600', token: 't', addedAt: 0 };
+
+  it('grows an already-live workspace and returns the new sessionId — same call as workspaceCreate', async () => {
+    const store = fakeStore([host]);
+    const client = fakeClient(host);
+    client.createWorkspace.mockResolvedValueOnce({ sessionId: 'web-2' });
+    registerRemoteHandlers({ store: store as never, attachments: fakeAttachments() as never, clientFactory: () => client });
+
+    const res = await getHandler(IPC.REMOTE_WORKSPACE_PANE_ADD)({}, 'h1', 'ws-1') as { ok: true; sessionId: string };
+
+    expect(res).toEqual({ ok: true, sessionId: 'web-2' });
+    expect(client.createWorkspace).toHaveBeenCalledWith('ws-1', undefined);
+  });
+
+  it('forwards cwd when given', async () => {
+    const store = fakeStore([host]);
+    const client = fakeClient(host);
+    registerRemoteHandlers({ store: store as never, attachments: fakeAttachments() as never, clientFactory: () => client });
+
+    await getHandler(IPC.REMOTE_WORKSPACE_PANE_ADD)({}, 'h1', 'ws-1', '/repo');
+
+    expect(client.createWorkspace).toHaveBeenCalledWith('ws-1', '/repo');
+  });
+
+  it('maps a client rejection to {ok:false} rather than throwing', async () => {
+    const store = fakeStore([host]);
+    const client = fakeClient(host);
+    client.createWorkspace.mockRejectedValueOnce(new Error('daemon busy'));
+    registerRemoteHandlers({ store: store as never, attachments: fakeAttachments() as never, clientFactory: () => client });
+
+    const res = await getHandler(IPC.REMOTE_WORKSPACE_PANE_ADD)({}, 'h1', 'ws-1') as { ok: false; error: string };
+
+    expect(res).toEqual({ ok: false, error: 'daemon busy' });
+  });
+
+  it('reports unknown host without touching a client', async () => {
+    const store = fakeStore([]);
+    registerRemoteHandlers({ store: store as never, attachments: fakeAttachments() as never });
+
+    const res = await getHandler(IPC.REMOTE_WORKSPACE_PANE_ADD)({}, 'missing', 'ws-1') as { ok: boolean; error?: string };
+
+    expect(res).toEqual({ ok: false, error: 'unknown host' });
+  });
+});
+
+describe('remote.handler — sessionClose (#1091)', () => {
+  const host: RemoteHost = { id: 'h1', label: 'box', origin: 'https://box:9600', token: 't', addedAt: 0 };
+
+  it('closes a session on the given host', async () => {
+    const store = fakeStore([host]);
+    const client = fakeClient(host);
+    registerRemoteHandlers({ store: store as never, attachments: fakeAttachments() as never, clientFactory: () => client });
+
+    const res = await getHandler(IPC.REMOTE_SESSION_CLOSE)({}, 'h1', 'sess-1') as { ok: true };
+
+    expect(res).toEqual({ ok: true });
+    expect(client.closeSession).toHaveBeenCalledWith('sess-1');
+  });
+
+  it('maps a client rejection to {ok:false} rather than throwing', async () => {
+    const store = fakeStore([host]);
+    const client = fakeClient(host);
+    client.closeSession.mockRejectedValueOnce(new Error('daemon busy'));
+    registerRemoteHandlers({ store: store as never, attachments: fakeAttachments() as never, clientFactory: () => client });
+
+    const res = await getHandler(IPC.REMOTE_SESSION_CLOSE)({}, 'h1', 'sess-1') as { ok: false; error: string };
+
+    expect(res).toEqual({ ok: false, error: 'daemon busy' });
+  });
+
+  it('reports unknown host without touching a client', async () => {
+    const store = fakeStore([]);
+    registerRemoteHandlers({ store: store as never, attachments: fakeAttachments() as never });
+
+    const res = await getHandler(IPC.REMOTE_SESSION_CLOSE)({}, 'missing', 'sess-1') as { ok: boolean; error?: string };
+
+    expect(res).toEqual({ ok: false, error: 'unknown host' });
+  });
+});
+
 describe('remote.handler — pane attach/detach/write push routing', () => {
   const host: RemoteHost = { id: 'h1', label: 'box', origin: 'https://box:9600', token: 't', addedAt: 0 };
 

src/main/ipc/handlers/remote.handler.ts

@@ -483,6 +483,55 @@ export function registerRemoteHandlers(deps: RegisterRemoteHandlersDeps): () =>
       }
     }));
 
+  // Add a pane to a workspace that ALREADY has a live pane on this host
+  // (#1091 — parity with a local workspace's "add pane"). Same server call
+  // as REMOTE_WORKSPACE_CREATE (rejectWorkspaceId accepts a known-live id
+  // just as readily as an operator-minted new one); kept as its own IPC name
+  // so the renderer's intent ("grow this workspace") reads distinctly from
+  // "bootstrap a brand-new one".
+  ipcMain.removeHandler(IPC.REMOTE_WORKSPACE_PANE_ADD);
+  ipcMain.handle(IPC.REMOTE_WORKSPACE_PANE_ADD, wrapHandler(IPC.REMOTE_WORKSPACE_PANE_ADD,
+    async (
+      _e: IpcMainInvokeEvent,
+      hostId: unknown,
+      workspaceId: unknown,
+      cwd?: unknown,
+    ): Promise<{ ok: true; sessionId: string } | { ok: false; error: string }> => {
+      const id = assertString(hostId, 'hostId');
+      const wsId = assertString(workspaceId, 'workspaceId');
+      const safeCwd = cwd === undefined ? undefined : assertString(cwd, 'cwd');
+      const client = getOrCreateClient(id);
+      if (!client) return { ok: false, error: 'unknown host' };
+      try {
+        const { sessionId } = await client.createWorkspace(wsId, safeCwd);
+        return { ok: true, sessionId };
+      } catch (err) {
+        return { ok: false, error: err instanceof Error ? err.message : String(err) };
+      }
+    }));
+
+  // Close a pane on a workspace this client bootstrapped (#1091). See
+  // RemoteHostClient.closeSession for the reasoning behind allowing this one
+  // destroy call.
+  ipcMain.removeHandler(IPC.REMOTE_SESSION_CLOSE);
+  ipcMain.handle(IPC.REMOTE_SESSION_CLOSE, wrapHandler(IPC.REMOTE_SESSION_CLOSE,
+    async (
+      _e: IpcMainInvokeEvent,
+      hostId: unknown,
+      sessionId: unknown,
+    ): Promise<{ ok: true } | { ok: false; error: string }> => {
+      const id = assertString(hostId, 'hostId');
+      const sid = assertString(sessionId, 'sessionId');
+      const client = getOrCreateClient(id);
+      if (!client) return { ok: false, error: 'unknown host' };
+      try {
+        await client.closeSession(sid);
+        return { ok: true };
+      } catch (err) {
+        return { ok: false, error: err instanceof Error ? err.message : String(err) };
+      }
+    }));
+
   // Attach descriptors — the persistence half of "attachments survive a
   // reload". Deliberately independent of the SSE attach lifecycle below: the
   // reload teardown in installSenderCleanup still kills every live stream (a
@@ -599,6 +648,8 @@ export function registerRemoteHandlers(deps: RegisterRemoteHandlersDeps): () =>
     ipcMain.removeHandler(IPC.REMOTE_HOSTS_REMOVE);
     ipcMain.removeHandler(IPC.REMOTE_WORKSPACES_LIST);
     ipcMain.removeHandler(IPC.REMOTE_WORKSPACE_CREATE);
+    ipcMain.removeHandler(IPC.REMOTE_WORKSPACE_PANE_ADD);
+    ipcMain.removeHandler(IPC.REMOTE_SESSION_CLOSE);
     ipcMain.removeHandler(IPC.REMOTE_ATTACHMENTS_LIST);
     ipcMain.removeHandler(IPC.REMOTE_ATTACHMENTS_ADD);
     ipcMain.removeHandler(IPC.REMOTE_ATTACHMENTS_REMOVE);

src/main/remote/RemoteHostClient.ts

@@ -6,8 +6,12 @@
 // relying on EventSource's query-string token, and it drives the pane state
 // for Task 5's IPC handler instead of a DOM terminal.
 //
-// This class is observer + input only: it never calls a destroy/delete
-// endpoint on the remote host.
+// Mostly observer + input: it does not touch anyone else's existing panes.
+// The one exception is `closeSession` (#1091) — closing a pane belonging to
+// a workspace THIS client's operator credential bootstrapped in the first
+// place (#1067), which is a local-workspace-close-button equivalent, not a
+// mirror doing something to someone else's session. See that method's own
+// doc comment for the full reasoning.
 
 import * as crypto from 'crypto';
 import type {
@@ -241,6 +245,44 @@ export class RemoteHostClient implements RemotePaneEvents {
     return { sessionId };
   }
 
+  /**
+   * Close a pane this client (or the desktop app on our behalf) created on
+   * this host (#1091). This is the one destroy/delete call this class makes
+   * — a deliberate, narrow exception to the class-level "observer + input
+   * only" rule above, which was written for the older attach-to-an-
+   * EXISTING-workspace-to-watch-it use case, where destroying someone else's
+   * pane from a mirror would be a real surprise. #1067 added a second use
+   * case — bootstrapping a brand-new workspace on a paired host to actually
+   * work in it — and a workspace you just created has no "someone else" to
+   * surprise: closing one of its own panes is exactly what a local
+   * workspace's close button does, so a remote one needs the same capability
+   * to reach parity. `DELETE /api/sessions/:id` (`WebTerminalServer.
+   * handleSessionDelete`) already gates this on `mayInput`, same as create,
+   * so no server change was needed.
+   */
+  async closeSession(sessionId: string): Promise<void> {
+    const res = await this.fetchImpl(`${this.host.origin}/api/sessions/${encodeURIComponent(sessionId)}`, {
+      method: 'DELETE',
+      headers: this.authHeaders(),
+      redirect: 'error',
+      signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS),
+    });
+    // 404 is treated as success: the pane is gone either way, and a caller
+    // racing a poll-driven pane-list refresh against its own close click
+    // must not surface an error for a session that already disappeared.
+    if (!res.ok && res.status !== 404) {
+      let message = `closeSession failed: HTTP ${res.status}`;
+      try {
+        const parsed = (await res.json()) as { error?: string; detail?: string };
+        if (parsed?.detail) message = parsed.detail;
+        else if (parsed?.error) message = parsed.error;
+      } catch {
+        /* body wasn't JSON — fall back to the generic message */
+      }
+      throw new Error(message);
+    }
+  }
+
   async listWorkspaces(): Promise<RemoteWorkspacesResponse> {
     const res = await this.fetchImpl(`${this.host.origin}/api/workspaces`, {
       headers: this.authHeaders(),

src/main/remote/__tests__/RemoteHostClient.test.ts

@@ -128,6 +128,65 @@ describe('RemoteHostClient', () => {
     });
   });
 
+  describe('closeSession (#1091)', () => {
+    it('DELETEs /api/sessions/:id with the operator Bearer token', async () => {
+      const fetchImpl = vi.fn(async (_url: string, _init?: RequestInit) => ({
+        ok: true,
+        status: 204,
+      }) as unknown as Response);
+      const client = new RemoteHostClient(host, fetchImpl as unknown as typeof fetch);
+
+      await client.closeSession('sess-1');
+
+      expect(fetchImpl).toHaveBeenCalledTimes(1);
+      const [url, init] = fetchImpl.mock.calls[0];
+      expect(url).toBe(`${host.origin}/api/sessions/sess-1`);
+      expect(init?.method).toBe('DELETE');
+      expect((init?.headers as Record<string, string>)?.Authorization).toBe(`Bearer ${host.token}`);
+      expect(init?.redirect).toBe('error');
+      expect(init?.signal).toBeInstanceOf(AbortSignal);
+    });
+
+    it('URL-encodes the session id', async () => {
+      const fetchImpl = vi.fn(async (_url: string, _init?: RequestInit) => ({ ok: true, status: 204 }) as unknown as Response);
+      const client = new RemoteHostClient(host, fetchImpl as unknown as typeof fetch);
+
+      await client.closeSession('sess/weird id');
+
+      const [url] = fetchImpl.mock.calls[0];
+      expect(url).toBe(`${host.origin}/api/sessions/${encodeURIComponent('sess/weird id')}`);
+    });
+
+    it('treats a 404 as success — the pane is gone either way', async () => {
+      const fetchImpl = vi.fn(async () => ({ ok: false, status: 404 }) as unknown as Response);
+      const client = new RemoteHostClient(host, fetchImpl as unknown as typeof fetch);
+
+      await expect(client.closeSession('sess-1')).resolves.toBeUndefined();
+    });
+
+    it('rejects with the daemon-supplied detail on a non-OK, non-404 response', async () => {
+      const fetchImpl = vi.fn(async () => ({
+        ok: false,
+        status: 500,
+        json: async () => ({ error: 'destroy-failed', detail: 'daemon busy' }),
+      }) as unknown as Response);
+      const client = new RemoteHostClient(host, fetchImpl as unknown as typeof fetch);
+
+      await expect(client.closeSession('sess-1')).rejects.toThrow('daemon busy');
+    });
+
+    it('rejects with a generic message when the error body is not JSON', async () => {
+      const fetchImpl = vi.fn(async () => ({
+        ok: false,
+        status: 500,
+        json: async () => { throw new Error('not json'); },
+      }) as unknown as Response);
+      const client = new RemoteHostClient(host, fetchImpl as unknown as typeof fetch);
+
+      await expect(client.closeSession('sess-1')).rejects.toThrow('closeSession failed: HTTP 500');
+    });
+  });
+
   describe('listWorkspaces', () => {
     it('sends Authorization: Bearer <token> and parses the body', async () => {
       const fetchImpl = vi.fn(async (_url: string, _init?: RequestInit) => {

src/preload/preload.ts

@@ -1389,6 +1389,14 @@ document.addEventListener('DOMContentLoaded', () => {
     ipcRenderer.invoke(IPC.REMOTE_WORKSPACE_CREATE, hostId, workspaceId, cwd) as Promise<
       { ok: true; sessionId: string } | { ok: false; error: string }
     >,
+  workspacePaneAdd: (hostId: string, workspaceId: string, cwd?: string) =>
+    ipcRenderer.invoke(IPC.REMOTE_WORKSPACE_PANE_ADD, hostId, workspaceId, cwd) as Promise<
+      { ok: true; sessionId: string } | { ok: false; error: string }
+    >,
+  sessionClose: (hostId: string, sessionId: string) =>
+    ipcRenderer.invoke(IPC.REMOTE_SESSION_CLOSE, hostId, sessionId) as Promise<
+      { ok: true } | { ok: false; error: string }
+    >,
   attachmentsList: () =>
     ipcRenderer.invoke(IPC.REMOTE_ATTACHMENTS_LIST) as Promise<RemoteAttachmentDescriptor[]>,
   attachmentsAdd: (descriptor: RemoteAttachmentDescriptor) =>

src/renderer/components/Remote/RemotePaneContainer.tsx

@@ -0,0 +1,61 @@
+import { Fragment, useCallback, useRef, type ReactNode } from 'react';
+import { Panel, Group, Separator, useGroupRef } from 'react-resizable-panels';
+import type { Layout } from 'react-resizable-panels';
+import type { RemotePaneLeaf, RemotePaneNode } from './remotePaneTree';
+
+interface RemotePaneContainerProps {
+  node: RemotePaneNode;
+  renderLeaf: (leaf: RemotePaneLeaf) => ReactNode;
+  onResize: (branchId: string, sizes: number[]) => void;
+}
+
+/**
+ * Recursive resizable-split renderer for a remote workspace's pane tree
+ * (#1091) — the same `react-resizable-panels` primitives (`Group`/`Panel`/
+ * `Separator`) the local `PaneContainer` uses, so drag-to-resize behaves
+ * identically. Deliberately simpler than `PaneContainer`: this tree only
+ * changes from THIS component's own resize/split/close actions (never from
+ * an external write racing a live drag), so there is no need for
+ * `PaneContainer`'s programmatic-vs-user layout reconciliation — a
+ * structural change (split/close) always mounts a fresh branch id, which
+ * naturally gets a fresh `Group` with the right `defaultSize`s.
+ */
+export default function RemotePaneContainer({ node, renderLeaf, onResize }: RemotePaneContainerProps) {
+  const groupRef = useGroupRef();
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  const handleLayoutChanged = useCallback((layout: Layout) => {
+    if (node.type !== 'branch') return;
+    const branch = node;
+    const sizes = branch.children.map((c) => layout[c.id] ?? 100 / branch.children.length);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => onResize(branch.id, sizes), 200);
+  }, [node, onResize]);
+
+  if (node.type === 'leaf') {
+    return <>{renderLeaf(node)}</>;
+  }
+
+  return (
+    <Group
+      groupRef={groupRef}
+      orientation={node.direction}
+      className="h-full w-full"
+      resizeTargetMinimumSize={{ coarse: 37, fine: 16 }}
+      onLayoutChanged={handleLayoutChanged}
+    >
+      {node.children.map((child, i) => (
+        <Fragment key={child.id}>
+          {i > 0 && (
+            <Separator
+              className={`${node.direction === 'horizontal' ? 'w-px' : 'h-px'} bg-[var(--border-soft)] hover:bg-[var(--accent-blue)] transition-colors`}
+            />
+          )}
+          <Panel id={child.id} defaultSize={node.sizes?.[i] ?? 100 / node.children.length} minSize={10}>
+            <RemotePaneContainer node={child} renderLeaf={renderLeaf} onResize={onResize} />
+          </Panel>
+        </Fragment>
+      ))}
+    </Group>
+  );
+}