@wong2kim/wmux 1.0.0

package/src/mcp/wmux-client.ts

@@ -0,0 +1,127 @@
+import * as net from 'net';
+import * as fs from 'fs';
+import * as crypto from 'crypto';
+import type { RpcMethod, RpcResponse } from '../shared/rpc';
+import { getPipeName, getAuthTokenPath } from '../shared/constants';
+
+const TIMEOUT_MS = 10000;
+const RETRY_COUNT = 3;
+const RETRY_DELAY_MS = 1000;
+
+function readAuthToken(): string | undefined {
+  // Env var takes priority (when running inside wmux terminal)
+  if (process.env.WMUX_AUTH_TOKEN) return process.env.WMUX_AUTH_TOKEN;
+  // File fallback (when spawned by Claude Code as MCP server)
+  try {
+    return fs.readFileSync(getAuthTokenPath(), 'utf8').trim();
+  } catch {
+    return undefined;
+  }
+}
+
+function attemptRpc(
+  pipePath: string,
+  token: string,
+  method: RpcMethod,
+  params: Record<string, unknown>,
+): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    const id = crypto.randomUUID();
+    const request = JSON.stringify({ id, method, params, token }) + '\n';
+
+    const socket = net.connect(pipePath);
+    let buffer = '';
+    let settled = false;
+
+    const timer = setTimeout(() => {
+      if (!settled) {
+        settled = true;
+        socket.destroy();
+        reject(new Error(`RPC timeout: ${method} (${TIMEOUT_MS}ms)`));
+      }
+    }, TIMEOUT_MS);
+
+    socket.on('connect', () => {
+      socket.write(request);
+    });
+
+    socket.on('data', (chunk: Buffer) => {
+      buffer += chunk.toString('utf8');
+      const lines = buffer.split('\n');
+      buffer = lines.pop() ?? '';
+
+      for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed) continue;
+        try {
+          const response = JSON.parse(trimmed) as RpcResponse;
+          if (response.id === id && !settled) {
+            settled = true;
+            clearTimeout(timer);
+            socket.destroy();
+            if (response.ok) {
+              resolve(response.result);
+            } else {
+              reject(new Error(response.error));
+            }
+          }
+        } catch {
+          // ignore malformed lines
+        }
+      }
+    });
+
+    socket.on('error', (err: NodeJS.ErrnoException) => {
+      if (!settled) {
+        settled = true;
+        clearTimeout(timer);
+        if (err.code === 'ENOENT' || err.code === 'ECONNREFUSED') {
+          reject(new Error('wmux is not running. Start the app first.'));
+        } else {
+          reject(new Error(`Connection error: ${err.message}`));
+        }
+      }
+    });
+
+    socket.on('close', () => {
+      if (!settled) {
+        settled = true;
+        clearTimeout(timer);
+        reject(new Error('Connection closed before response was received.'));
+      }
+    });
+  });
+}
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((r) => setTimeout(r, ms));
+}
+
+export async function sendRpc(
+  method: RpcMethod,
+  params: Record<string, unknown> = {},
+): Promise<unknown> {
+  const pipePath = process.env.WMUX_SOCKET_PATH || getPipeName();
+
+  for (let attempt = 0; attempt < RETRY_COUNT; attempt++) {
+    // Re-read token on every attempt (wmux may have restarted with new token)
+    const token = readAuthToken();
+    if (!token) {
+      throw new Error('wmux auth token not found. Is wmux running?');
+    }
+
+    try {
+      return await attemptRpc(pipePath, token, method, params);
+    } catch (err) {
+      const msg = (err as Error).message;
+      const isRetryable = msg.includes('not running') || msg.includes('unauthorized');
+      if (isRetryable && attempt < RETRY_COUNT - 1) {
+        await sleep(RETRY_DELAY_MS);
+        continue;
+      }
+      throw err;
+    }
+  }
+
+  throw new Error('wmux is not running. Start the app first.');
+}

package/src/preload/index.ts

@@ -0,0 +1,111 @@
+import { contextBridge, ipcRenderer } from 'electron';
+import { IPC } from '../shared/constants';
+
+const electronAPI = {
+  pty: {
+    create: (options?: { shell?: string; cwd?: string; cols?: number; rows?: number }) =>
+      ipcRenderer.invoke(IPC.PTY_CREATE, options),
+    write: (id: string, data: string) =>
+      ipcRenderer.invoke(IPC.PTY_WRITE, id, data),
+    resize: (id: string, cols: number, rows: number) =>
+      ipcRenderer.invoke(IPC.PTY_RESIZE, id, cols, rows),
+    dispose: (id: string) =>
+      ipcRenderer.invoke(IPC.PTY_DISPOSE, id),
+    onData: (callback: (id: string, data: string) => void) => {
+      const listener = (_event: Electron.IpcRendererEvent, id: string, data: string) => callback(id, data);
+      ipcRenderer.on(IPC.PTY_DATA, listener);
+      return () => { ipcRenderer.removeListener(IPC.PTY_DATA, listener); };
+    },
+    onExit: (callback: (id: string, exitCode: number) => void) => {
+      const listener = (_event: Electron.IpcRendererEvent, id: string, exitCode: number) => callback(id, exitCode);
+      ipcRenderer.on(IPC.PTY_EXIT, listener);
+      return () => { ipcRenderer.removeListener(IPC.PTY_EXIT, listener); };
+    },
+  },
+  shell: {
+    list: () => ipcRenderer.invoke(IPC.SHELL_LIST) as Promise<{ name: string; path: string; args?: string[] }[]>,
+  },
+  session: {
+    save: (data: unknown) => ipcRenderer.invoke(IPC.SESSION_SAVE, data),
+    load: () => ipcRenderer.invoke(IPC.SESSION_LOAD),
+  },
+  settings: {
+    setToastEnabled: (enabled: boolean) => ipcRenderer.send(IPC.TOAST_ENABLED, enabled),
+  },
+  notification: {
+    onNew: (callback: (ptyId: string, data: { type: string; title: string; body: string }) => void) => {
+      const listener = (_event: Electron.IpcRendererEvent, ptyId: string, data: { type: string; title: string; body: string }) =>
+        callback(ptyId, data);
+      ipcRenderer.on(IPC.NOTIFICATION, listener);
+      return () => { ipcRenderer.removeListener(IPC.NOTIFICATION, listener); };
+    },
+    onCwdChanged: (callback: (ptyId: string, cwd: string) => void) => {
+      const listener = (_event: Electron.IpcRendererEvent, ptyId: string, cwd: string) =>
+        callback(ptyId, cwd);
+      ipcRenderer.on(IPC.CWD_CHANGED, listener);
+      return () => { ipcRenderer.removeListener(IPC.CWD_CHANGED, listener); };
+    },
+  },
+  metadata: {
+    request: (ptyId: string) =>
+      ipcRenderer.invoke(IPC.METADATA_REQUEST, ptyId),
+    onUpdate: (callback: (ptyId: string, data: { gitBranch?: string; cwd?: string; listeningPorts?: number[] }) => void) => {
+      const listener = (_event: Electron.IpcRendererEvent, ptyId: string, data: { gitBranch?: string; cwd?: string; listeningPorts?: number[] }) =>
+        callback(ptyId, data);
+      ipcRenderer.on(IPC.METADATA_UPDATE, listener);
+      return () => { ipcRenderer.removeListener(IPC.METADATA_UPDATE, listener); };
+    },
+  },
+  rpc: {
+    onCommand: (
+      callback: (requestId: string, method: string, params: Record<string, unknown>) => void,
+    ) => {
+      const listener = (
+        _event: Electron.IpcRendererEvent,
+        requestId: string,
+        method: string,
+        params: Record<string, unknown>,
+      ) => callback(requestId, method, params);
+      ipcRenderer.on(IPC.RPC_COMMAND, listener);
+      return () => { ipcRenderer.removeListener(IPC.RPC_COMMAND, listener); };
+    },
+    respond: (requestId: string, result: unknown) =>
+      ipcRenderer.send(`${IPC.RPC_RESPONSE}:${requestId}`, result),
+  },
+  updater: {
+    checkForUpdates: () =>
+      ipcRenderer.invoke(IPC.UPDATE_CHECK) as Promise<{ status: string }>,
+    installUpdate: () =>
+      ipcRenderer.invoke(IPC.UPDATE_INSTALL),
+    onUpdateAvailable: (callback: (data: { status: string; releaseName?: string }) => void) => {
+      const listener = (_event: Electron.IpcRendererEvent, data: { status: string; releaseName?: string }) =>
+        callback(data);
+      ipcRenderer.on(IPC.UPDATE_AVAILABLE, listener);
+      return () => { ipcRenderer.removeListener(IPC.UPDATE_AVAILABLE, listener); };
+    },
+    onUpdateNotAvailable: (callback: (data: { status: string }) => void) => {
+      const listener = (_event: Electron.IpcRendererEvent, data: { status: string }) =>
+        callback(data);
+      ipcRenderer.on(IPC.UPDATE_NOT_AVAILABLE, listener);
+      return () => { ipcRenderer.removeListener(IPC.UPDATE_NOT_AVAILABLE, listener); };
+    },
+    onUpdateError: (callback: (data: { status: string; message: string }) => void) => {
+      const listener = (_event: Electron.IpcRendererEvent, data: { status: string; message: string }) =>
+        callback(data);
+      ipcRenderer.on(IPC.UPDATE_ERROR, listener);
+      return () => { ipcRenderer.removeListener(IPC.UPDATE_ERROR, listener); };
+    },
+  },
+};
+
+contextBridge.exposeInMainWorld('electronAPI', electronAPI);
+
+// Expose clipboard via IPC for reliable copy/paste in terminal
+const clipboardAPI = {
+  writeText: (text: string) => ipcRenderer.invoke(IPC.CLIPBOARD_WRITE, text),
+  readText: () => ipcRenderer.invoke(IPC.CLIPBOARD_READ) as Promise<string>,
+};
+contextBridge.exposeInMainWorld('clipboardAPI', clipboardAPI);
+
+export type ElectronAPI = typeof electronAPI;
+export type ClipboardAPI = typeof clipboardAPI;

package/src/preload/preload.ts

@@ -0,0 +1,108 @@
+import { contextBridge, ipcRenderer } from 'electron';
+import { IPC } from '../shared/constants';
+
+const electronAPI = {
+  pty: {
+    create: (options?: { shell?: string; cwd?: string; cols?: number; rows?: number }) =>
+      ipcRenderer.invoke(IPC.PTY_CREATE, options),
+    write: (id: string, data: string) =>
+      ipcRenderer.invoke(IPC.PTY_WRITE, id, data),
+    resize: (id: string, cols: number, rows: number) =>
+      ipcRenderer.invoke(IPC.PTY_RESIZE, id, cols, rows),
+    dispose: (id: string) =>
+      ipcRenderer.invoke(IPC.PTY_DISPOSE, id),
+    onData: (callback: (id: string, data: string) => void) => {
+      const listener = (_event: Electron.IpcRendererEvent, id: string, data: string) => callback(id, data);
+      ipcRenderer.on(IPC.PTY_DATA, listener);
+      return () => { ipcRenderer.removeListener(IPC.PTY_DATA, listener); };
+    },
+    onExit: (callback: (id: string, exitCode: number) => void) => {
+      const listener = (_event: Electron.IpcRendererEvent, id: string, exitCode: number) => callback(id, exitCode);
+      ipcRenderer.on(IPC.PTY_EXIT, listener);
+      return () => { ipcRenderer.removeListener(IPC.PTY_EXIT, listener); };
+    },
+  },
+  shell: {
+    list: () => ipcRenderer.invoke(IPC.SHELL_LIST) as Promise<{ name: string; path: string; args?: string[] }[]>,
+  },
+  session: {
+    save: (data: unknown) => ipcRenderer.invoke(IPC.SESSION_SAVE, data),
+    load: () => ipcRenderer.invoke(IPC.SESSION_LOAD),
+  },
+  settings: {
+    setToastEnabled: (enabled: boolean) => ipcRenderer.send(IPC.TOAST_ENABLED, enabled),
+  },
+  notification: {
+    onNew: (callback: (ptyId: string, data: { type: string; title: string; body: string }) => void) => {
+      const listener = (_event: Electron.IpcRendererEvent, ptyId: string, data: { type: string; title: string; body: string }) =>
+        callback(ptyId, data);
+      ipcRenderer.on(IPC.NOTIFICATION, listener);
+      return () => { ipcRenderer.removeListener(IPC.NOTIFICATION, listener); };
+    },
+    onCwdChanged: (callback: (ptyId: string, cwd: string) => void) => {
+      const listener = (_event: Electron.IpcRendererEvent, ptyId: string, cwd: string) =>
+        callback(ptyId, cwd);
+      ipcRenderer.on(IPC.CWD_CHANGED, listener);
+      return () => { ipcRenderer.removeListener(IPC.CWD_CHANGED, listener); };
+    },
+  },
+  metadata: {
+    request: (ptyId: string) =>
+      ipcRenderer.invoke(IPC.METADATA_REQUEST, ptyId),
+    onUpdate: (callback: (ptyId: string, data: { gitBranch?: string; cwd?: string; listeningPorts?: number[] }) => void) => {
+      const listener = (_event: Electron.IpcRendererEvent, ptyId: string, data: { gitBranch?: string; cwd?: string; listeningPorts?: number[] }) =>
+        callback(ptyId, data);
+      ipcRenderer.on(IPC.METADATA_UPDATE, listener);
+      return () => { ipcRenderer.removeListener(IPC.METADATA_UPDATE, listener); };
+    },
+  },
+  rpc: {
+    onCommand: (
+      callback: (requestId: string, method: string, params: Record<string, unknown>) => void,
+    ) => {
+      const listener = (
+        _event: Electron.IpcRendererEvent,
+        requestId: string,
+        method: string,
+        params: Record<string, unknown>,
+      ) => callback(requestId, method, params);
+      ipcRenderer.on(IPC.RPC_COMMAND, listener);
+      return () => { ipcRenderer.removeListener(IPC.RPC_COMMAND, listener); };
+    },
+    respond: (requestId: string, result: unknown) =>
+      ipcRenderer.send(`${IPC.RPC_RESPONSE}:${requestId}`, result),
+  },
+  updater: {
+    checkForUpdates: () =>
+      ipcRenderer.invoke(IPC.UPDATE_CHECK) as Promise<{ status: string }>,
+    installUpdate: () =>
+      ipcRenderer.invoke(IPC.UPDATE_INSTALL),
+    onUpdateAvailable: (callback: (data: { status: string; releaseName?: string }) => void) => {
+      const listener = (_event: Electron.IpcRendererEvent, data: { status: string; releaseName?: string }) =>
+        callback(data);
+      ipcRenderer.on(IPC.UPDATE_AVAILABLE, listener);
+      return () => { ipcRenderer.removeListener(IPC.UPDATE_AVAILABLE, listener); };
+    },
+    onUpdateNotAvailable: (callback: (data: { status: string }) => void) => {
+      const listener = (_event: Electron.IpcRendererEvent, data: { status: string }) =>
+        callback(data);
+      ipcRenderer.on(IPC.UPDATE_NOT_AVAILABLE, listener);
+      return () => { ipcRenderer.removeListener(IPC.UPDATE_NOT_AVAILABLE, listener); };
+    },
+    onUpdateError: (callback: (data: { status: string; message: string }) => void) => {
+      const listener = (_event: Electron.IpcRendererEvent, data: { status: string; message: string }) =>
+        callback(data);
+      ipcRenderer.on(IPC.UPDATE_ERROR, listener);
+      return () => { ipcRenderer.removeListener(IPC.UPDATE_ERROR, listener); };
+    },
+  },
+};
+
+contextBridge.exposeInMainWorld('electronAPI', electronAPI);
+
+contextBridge.exposeInMainWorld('clipboardAPI', {
+  writeText: (text: string) => ipcRenderer.invoke(IPC.CLIPBOARD_WRITE, text),
+  readText: () => ipcRenderer.invoke(IPC.CLIPBOARD_READ) as Promise<string>,
+});
+
+export type ElectronAPI = typeof electronAPI;

package/src/renderer/App.tsx

@@ -0,0 +1,5 @@
+import AppLayout from './components/Layout/AppLayout';
+
+export default function App() {
+  return <AppLayout />;
+}

package/src/renderer/components/Browser/BrowserPanel.tsx

@@ -0,0 +1,219 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+import BrowserToolbar from './BrowserToolbar';
+import { useT } from '../../hooks/useT';
+
+// ---------------------------------------------------------------------------
+// Declare the webview element for TypeScript
+// ---------------------------------------------------------------------------
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      webview: React.DetailedHTMLProps<
+        React.HTMLAttributes<Electron.WebviewTag> & {
+          src?: string;
+          partition?: string;
+          allowpopups?: string;
+          disablewebsecurity?: string;
+          preload?: string;
+          useragent?: string;
+          nodeintegration?: string;
+          webpreferences?: string;
+        },
+        Electron.WebviewTag
+      >;
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+interface BrowserPanelProps {
+  surfaceId: string;
+  initialUrl: string;
+  isActive: boolean;
+  onClose: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export default function BrowserPanel({ surfaceId, initialUrl, isActive, onClose }: BrowserPanelProps) {
+  const t = useT();
+  const webviewRef = useRef<Electron.WebviewTag>(null);
+  const [currentUrl, setCurrentUrl] = useState(initialUrl);
+  const [isLoading, setIsLoading] = useState(false);
+  const [canGoBack, setCanGoBack] = useState(false);
+  const [canGoForward, setCanGoForward] = useState(false);
+  const [pageTitle, setPageTitle] = useState(() => t('browser.title'));
+  const [isReady, setIsReady] = useState(false);
+
+  // Update nav state from webview
+  const updateNavState = useCallback(() => {
+    const wv = webviewRef.current;
+    if (!wv) return;
+    try {
+      setCanGoBack(wv.canGoBack());
+      setCanGoForward(wv.canGoForward());
+    } catch {
+      // Webview may not be ready yet
+    }
+  }, []);
+
+  // Attach webview event listeners once ready
+  useEffect(() => {
+    const wv = webviewRef.current;
+    if (!wv) return;
+
+    const onDomReady = () => {
+      setIsReady(true);
+      updateNavState();
+    };
+
+    const onStartLoading = () => {
+      setIsLoading(true);
+    };
+
+    const onStopLoading = () => {
+      setIsLoading(false);
+      updateNavState();
+    };
+
+    const onDidNavigate = (e: Electron.DidNavigateEvent) => {
+      setCurrentUrl(e.url);
+      updateNavState();
+    };
+
+    const onDidNavigateInPage = (e: Electron.DidNavigateInPageEvent) => {
+      setCurrentUrl(e.url);
+      updateNavState();
+    };
+
+    const onTitleUpdated = (e: Electron.PageTitleUpdatedEvent) => {
+      setPageTitle(e.title || t('browser.title'));
+    };
+
+    wv.addEventListener('dom-ready', onDomReady);
+    wv.addEventListener('did-start-loading', onStartLoading);
+    wv.addEventListener('did-stop-loading', onStopLoading);
+    wv.addEventListener('did-navigate', onDidNavigate as EventListener);
+    wv.addEventListener('did-navigate-in-page', onDidNavigateInPage as EventListener);
+    wv.addEventListener('page-title-updated', onTitleUpdated as EventListener);
+
+    return () => {
+      wv.removeEventListener('dom-ready', onDomReady);
+      wv.removeEventListener('did-start-loading', onStartLoading);
+      wv.removeEventListener('did-stop-loading', onStopLoading);
+      wv.removeEventListener('did-navigate', onDidNavigate as EventListener);
+      wv.removeEventListener('did-navigate-in-page', onDidNavigateInPage as EventListener);
+      wv.removeEventListener('page-title-updated', onTitleUpdated as EventListener);
+    };
+  }, [updateNavState]);
+
+  // F12 opens DevTools for the webview
+  useEffect(() => {
+    if (!isActive) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'F12') {
+        e.preventDefault();
+        handleOpenDevTools();
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [isActive]);
+
+  const handleNavigate = useCallback((url: string) => {
+    const wv = webviewRef.current;
+    if (!wv) return;
+    if (isReady) {
+      wv.loadURL(url);
+    } else {
+      // If not ready yet, just update src attribute
+      wv.setAttribute('src', url);
+    }
+    setCurrentUrl(url);
+  }, [isReady]);
+
+  const handleBack = useCallback(() => {
+    webviewRef.current?.goBack();
+  }, []);
+
+  const handleForward = useCallback(() => {
+    webviewRef.current?.goForward();
+  }, []);
+
+  const handleRefresh = useCallback(() => {
+    webviewRef.current?.reload();
+  }, []);
+
+  const handleOpenDevTools = useCallback(() => {
+    try {
+      webviewRef.current?.openDevTools();
+    } catch {
+      // May not be available in all contexts
+    }
+  }, []);
+
+  return (
+    <div
+      className="flex flex-col h-full w-full overflow-hidden"
+      style={{
+        position: 'absolute',
+        inset: 0,
+        display: isActive ? 'flex' : 'none',
+      }}
+    >
+      {/* Title bar strip showing page title */}
+      <div
+        className="flex items-center gap-2 px-3 py-0.5 shrink-0"
+        style={{ backgroundColor: '#11111b', borderBottom: '1px solid var(--bg-base)' }}
+      >
+        {isLoading && (
+          <span className="w-1.5 h-1.5 rounded-full bg-[var(--accent-blue)] animate-pulse shrink-0" />
+        )}
+        <span
+          className="text-xs text-[var(--text-subtle)] truncate"
+          style={{ fontFamily: 'ui-monospace, monospace' }}
+          title={pageTitle}
+        >
+          {pageTitle}
+        </span>
+      </div>
+
+      {/* Toolbar */}
+      <BrowserToolbar
+        currentUrl={currentUrl}
+        isLoading={isLoading}
+        canGoBack={canGoBack}
+        canGoForward={canGoForward}
+        isActive={isActive}
+        onNavigate={handleNavigate}
+        onBack={handleBack}
+        onForward={handleForward}
+        onRefresh={handleRefresh}
+        onOpenDevTools={handleOpenDevTools}
+        onClose={onClose}
+      />
+
+      {/* WebView */}
+      <div className="flex-1 relative overflow-hidden" style={{ backgroundColor: 'var(--bg-base)' }}>
+        <webview
+          ref={webviewRef as React.RefObject<Electron.WebviewTag>}
+          src={initialUrl}
+          partition="persist:browser"
+          data-surface-id={surfaceId}
+          style={{
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+          }}
+        />
+      </div>
+    </div>
+  );
+}