@wong2kim/wmux 1.0.0

package/src/renderer/components/Terminal/Terminal.tsx

@@ -0,0 +1,102 @@
+import { useRef, useEffect, useState } from 'react';
+import { useTerminal } from '../../hooks/useTerminal';
+import { useStore } from '../../stores';
+import ViCopyMode from './ViCopyMode';
+import SearchBar from './SearchBar';
+import '@xterm/xterm/css/xterm.css';
+
+interface TerminalProps {
+  ptyId?: string;
+  shell?: string;
+  cwd?: string;
+  onPtyCreated?: (ptyId: string) => void;
+  /** True when this surface tab is the selected tab inside its pane. */
+  isActive?: boolean;
+  /** True when the parent workspace is the currently visible workspace.
+   *  False when the workspace is hidden via display:none in AppLayout.
+   *  Defaults to true so callers that don't use the all-workspaces rendering
+   *  pattern continue to work without changes. */
+  isWorkspaceVisible?: boolean;
+}
+
+export default function TerminalComponent({ ptyId: externalPtyId, shell, cwd, onPtyCreated, isActive = true, isWorkspaceVisible = true }: TerminalProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [ptyId, setPtyId] = useState<string | null>(externalPtyId || null);
+  const creatingRef = useRef(false);
+
+  const viCopyModeActive = useStore((s) => s.viCopyModeActive);
+  const setViCopyModeActive = useStore((s) => s.setViCopyModeActive);
+  const searchBarVisible = useStore((s) => s.searchBarVisible);
+  const setSearchBarVisible = useStore((s) => s.setSearchBarVisible);
+
+  useEffect(() => {
+    if (externalPtyId) {
+      setPtyId(externalPtyId);
+      return;
+    }
+
+    if (creatingRef.current) return;
+    creatingRef.current = true;
+
+    let cancelled = false;
+    window.electronAPI.pty.create({ shell, cwd }).then((result: { id: string }) => {
+      if (cancelled) {
+        // 이미 unmount됨 — PTY 정리
+        window.electronAPI.pty.dispose(result.id);
+        return;
+      }
+      setPtyId(result.id);
+      onPtyCreated?.(result.id);
+    });
+
+    return () => { cancelled = true; };
+  }, [externalPtyId, shell, cwd]); // onPtyCreated 제거 (stale closure 방지)
+
+  // isVisible = workspace is shown AND this surface tab is the active one.
+  // useTerminal uses this to skip fit() when the container is display:none.
+  const isVisible = isWorkspaceVisible && isActive;
+  const { terminal: terminalRef, findNext, findPrevious, clearSearch } = useTerminal(containerRef, { ptyId, isVisible });
+
+  const showViCopyMode = viCopyModeActive && isActive && terminalRef.current !== null;
+  const showSearchBar = searchBarVisible && isActive;
+
+  const handleCloseSearch = () => {
+    clearSearch();
+    setSearchBarVisible(false);
+  };
+
+  return (
+    <div
+      style={{
+        display: isActive ? 'flex' : 'none',
+        flexDirection: 'column',
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+      }}
+    >
+      {/* xterm mount point */}
+      <div
+        ref={containerRef}
+        style={{ width: '100%', height: '100%', padding: '4px' }}
+      />
+
+      {/* Search bar overlay */}
+      {showSearchBar && (
+        <SearchBar
+          onFindNext={findNext}
+          onFindPrevious={findPrevious}
+          onClose={handleCloseSearch}
+        />
+      )}
+
+      {/* Vi Copy Mode overlay — rendered inside the relative wrapper */}
+      {showViCopyMode && terminalRef.current && (
+        <ViCopyMode
+          terminal={terminalRef.current}
+          onExit={() => setViCopyModeActive(false)}
+        />
+      )}
+    </div>
+  );
+}

package/src/renderer/components/Terminal/ViCopyMode.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useCallback } from 'react';
+import type { Terminal } from '@xterm/xterm';
+import { useViCopyMode } from '../../hooks/useViCopyMode';
+import { useT } from '../../hooks/useT';
+
+interface ViCopyModeProps {
+  terminal: Terminal;
+  onExit: () => void;
+}
+
+export default function ViCopyMode({ terminal, onExit }: ViCopyModeProps) {
+  const t = useT();
+  const {
+    cursorRow,
+    cursorCol,
+    isVisual,
+    handleKey,
+    exit,
+    copySelection,
+  } = useViCopyMode({ terminal, isActive: true }, onExit);
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      // Let the overlay consume all keystrokes so they don't reach the PTY
+      e.preventDefault();
+      e.stopPropagation();
+
+      const { key, ctrlKey } = e;
+
+      // y with visual selection triggers copy
+      if (!ctrlKey && key === 'y') {
+        copySelection();
+        return;
+      }
+
+      handleKey(key, ctrlKey);
+    },
+    [handleKey, copySelection],
+  );
+
+  useEffect(() => {
+    window.addEventListener('keydown', onKeyDown, true); // capture phase
+    return () => window.removeEventListener('keydown', onKeyDown, true);
+  }, [onKeyDown]);
+
+  // Calculate cursor pixel position relative to the xterm viewport.
+  // xterm renders each cell at roughly (fontSize * charWidth) dimensions.
+  // We use CSS variables / approximate values here.
+  const cellWidth = 8.4;  // approximate character width in px at 14px font size
+  const cellHeight = 17;  // approximate line height in px at 14px font size
+
+  // The row offset relative to the current viewport
+  const viewportY = terminal.buffer.active.viewportY;
+  const relativeRow = cursorRow - viewportY;
+
+  const cursorStyle: React.CSSProperties = {
+    position: 'absolute',
+    left: `calc(${cursorCol} * ${cellWidth}px + 4px)`, // 4px matches container padding
+    top: `calc(${relativeRow} * ${cellHeight}px + 4px)`,
+    width: `${cellWidth}px`,
+    height: `${cellHeight}px`,
+    backgroundColor: 'rgba(var(--accent-yellow-rgb),0.7)', // catppuccin yellow, semi-transparent
+    mixBlendMode: 'screen',
+    pointerEvents: 'none',
+    zIndex: 10,
+  };
+
+  return (
+    <>
+      {/* Invisible full-size overlay that blocks mouse interaction with terminal */}
+      <div
+        className="absolute inset-0"
+        style={{ zIndex: 9, cursor: 'text' }}
+        onClick={() => exit()}
+      />
+
+      {/* Cursor highlight block */}
+      <div style={cursorStyle} aria-hidden="true" />
+
+      {/* Status bar */}
+      <div
+        className="absolute bottom-0 left-0 right-0 flex items-center justify-between px-3 py-0.5 text-xs font-mono select-none"
+        style={{
+          zIndex: 20,
+          backgroundColor: 'rgba(var(--bg-base-rgb),0.92)',
+          borderTop: '1px solid rgba(var(--accent-blue-rgb),0.4)',
+          color: 'var(--accent-blue)', // catppuccin blue
+          backdropFilter: 'blur(4px)',
+        }}
+      >
+        <span className="font-semibold tracking-widest">
+          {isVisual ? t('viCopy.visual') : t('viCopy.mode')}
+        </span>
+        <span className="text-[var(--text-subtle)]">
+          {cursorRow}:{cursorCol}
+          &nbsp;&nbsp;
+          <span className="text-[var(--text-sub2)]">
+            h/j/k/l &nbsp; w/b &nbsp; v &nbsp; y &nbsp; ESC
+          </span>
+        </span>
+      </div>
+    </>
+  );
+}

package/src/renderer/hooks/useKeyboard.ts

@@ -0,0 +1,310 @@
+import { useEffect } from 'react';
+import { useStore } from '../stores';
+
+/**
+ * Convert a KeyboardEvent into a normalized key combo string.
+ * e.g. Ctrl+Shift held, key='1' → 'Ctrl+Shift+1'
+ *      no modifiers, key='F7' → 'F7'
+ */
+function formatKeyCombo(ctrl: boolean, shift: boolean, alt: boolean, key: string): string {
+  const parts: string[] = [];
+  if (ctrl) parts.push('Ctrl');
+  if (shift) parts.push('Shift');
+  if (alt) parts.push('Alt');
+  let normalizedKey = key;
+  if (key.length === 1) normalizedKey = key.toUpperCase();
+  parts.push(normalizedKey);
+  return parts.join('+');
+}
+
+export function useKeyboard() {
+  const store = useStore;
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      const ctrl = e.ctrlKey;
+      const shift = e.shiftKey;
+      const alt = e.altKey;
+      const key = e.key;
+
+      // Skip shortcuts when typing in input/textarea/contenteditable
+      // Exception: function keys (F1-F12) and custom keybindings should always work
+      const tag = (e.target as HTMLElement)?.tagName;
+      const isEditable = tag === 'INPUT' || tag === 'TEXTAREA' || (e.target as HTMLElement)?.isContentEditable;
+      const isFunctionKey = key.length > 1 && /^F\d{1,2}$/.test(key);
+      if (isEditable && !ctrl && !alt && !isFunctionKey) return;
+
+      // Ctrl+B: Toggle sidebar
+      if (ctrl && !shift && !alt && key === 'b') {
+        e.preventDefault();
+        store.getState().toggleSidebar();
+        return;
+      }
+
+      // Ctrl+N: New workspace
+      if (ctrl && !shift && !alt && key === 'n') {
+        e.preventDefault();
+        store.getState().addWorkspace();
+        return;
+      }
+
+      // Ctrl+Shift+W: Close workspace
+      if (ctrl && shift && !alt && key === 'W') {
+        e.preventDefault();
+        const state = store.getState();
+        const ws = state.workspaces.find((w) => w.id === state.activeWorkspaceId);
+        if (ws) {
+          // 워크스페이스 내 모든 PTY 정리
+          const disposePtys = (pane: import('../../shared/types').Pane) => {
+            if (pane.type === 'leaf') {
+              for (const s of pane.surfaces) {
+                if (s.ptyId) window.electronAPI.pty.dispose(s.ptyId);
+              }
+            } else {
+              for (const child of pane.children) disposePtys(child);
+            }
+          };
+          disposePtys(ws.rootPane);
+        }
+        state.removeWorkspace(state.activeWorkspaceId);
+        return;
+      }
+
+      // Ctrl+1~9: Switch workspace
+      if (ctrl && !shift && !alt && key >= '1' && key <= '9') {
+        e.preventDefault();
+        const { workspaces } = store.getState();
+        const idx = key === '9' ? workspaces.length - 1 : parseInt(key) - 1;
+        if (idx >= 0 && idx < workspaces.length) {
+          store.getState().setActiveWorkspace(workspaces[idx].id);
+        }
+        return;
+      }
+
+      // Ctrl+D: Split right (horizontal)
+      if (ctrl && !shift && !alt && key === 'd') {
+        e.preventDefault();
+        const state = store.getState();
+        const ws = state.workspaces.find((w) => w.id === state.activeWorkspaceId);
+        if (ws) {
+          state.splitPane(ws.activePaneId, 'horizontal');
+        }
+        return;
+      }
+
+      // Ctrl+Shift+D: Split down (vertical)
+      if (ctrl && shift && !alt && key === 'D') {
+        e.preventDefault();
+        const state = store.getState();
+        const ws = state.workspaces.find((w) => w.id === state.activeWorkspaceId);
+        if (ws) {
+          state.splitPane(ws.activePaneId, 'vertical');
+        }
+        return;
+      }
+
+      // Ctrl+T: New surface
+      if (ctrl && !shift && !alt && key === 't') {
+        e.preventDefault();
+        const state = store.getState();
+        const ws = state.workspaces.find((w) => w.id === state.activeWorkspaceId);
+        if (ws) {
+          window.electronAPI.pty.create().then((result: { id: string }) => {
+            store.getState().addSurface(ws.activePaneId, result.id, 'Terminal', '');
+          });
+        }
+        return;
+      }
+
+      // Ctrl+W: Close surface
+      if (ctrl && !shift && !alt && key === 'w') {
+        e.preventDefault();
+        const state = store.getState();
+        const ws = state.workspaces.find((w) => w.id === state.activeWorkspaceId);
+        if (!ws) return;
+        const findLeaf = (pane: import('../../shared/types').Pane): import('../../shared/types').PaneLeaf | null => {
+          if (pane.type === 'leaf' && pane.id === ws.activePaneId) return pane;
+          if (pane.type === 'branch') {
+            for (const c of pane.children) {
+              const found = findLeaf(c);
+              if (found) return found;
+            }
+          }
+          return null;
+        };
+        const activePane = findLeaf(ws.rootPane);
+        if (activePane && activePane.activeSurfaceId) {
+          const surface = activePane.surfaces.find((s) => s.id === activePane.activeSurfaceId);
+          if (surface?.ptyId) {
+            window.electronAPI.pty.dispose(surface.ptyId);
+          }
+          state.closeSurface(activePane.id, activePane.activeSurfaceId);
+        }
+        return;
+      }
+
+      // Ctrl+Shift+]: Next surface
+      if (ctrl && shift && !alt && key === ']') {
+        e.preventDefault();
+        const state = store.getState();
+        const ws = state.workspaces.find((w) => w.id === state.activeWorkspaceId);
+        if (ws) state.nextSurface(ws.activePaneId);
+        return;
+      }
+
+      // Ctrl+Shift+[: Previous surface
+      if (ctrl && shift && !alt && key === '[') {
+        e.preventDefault();
+        const state = store.getState();
+        const ws = state.workspaces.find((w) => w.id === state.activeWorkspaceId);
+        if (ws) state.prevSurface(ws.activePaneId);
+        return;
+      }
+
+      // Alt+Ctrl+Arrow: Focus pane directionally
+      if (ctrl && alt && !shift && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
+        e.preventDefault();
+        const dirMap: Record<string, 'up' | 'down' | 'left' | 'right'> = {
+          ArrowUp: 'up', ArrowDown: 'down', ArrowLeft: 'left', ArrowRight: 'right',
+        };
+        store.getState().focusPaneDirection(dirMap[key]);
+        return;
+      }
+
+      // Ctrl+I: Toggle notification panel
+      if (ctrl && !shift && !alt && key === 'i') {
+        e.preventDefault();
+        store.getState().toggleNotificationPanel();
+        return;
+      }
+
+      // Ctrl+Shift+M: Toggle message feed panel
+      if (ctrl && shift && !alt && key === 'm') {
+        e.preventDefault();
+        store.getState().toggleMessageFeed();
+        return;
+      }
+
+      // Ctrl+K: Toggle command palette
+      if (ctrl && !shift && !alt && key === 'k') {
+        e.preventDefault();
+        store.getState().toggleCommandPalette();
+        return;
+      }
+
+      // Ctrl+,: Toggle settings panel
+      if (ctrl && !shift && !alt && key === ',') {
+        e.preventDefault();
+        store.getState().toggleSettingsPanel();
+        return;
+      }
+
+      // Ctrl+Shift+U: Jump to latest unread notification's workspace
+      if (ctrl && shift && !alt && key === 'U') {
+        e.preventDefault();
+        const state = store.getState();
+        const unread = state.notifications
+          .filter((n) => !n.read)
+          .sort((a, b) => b.timestamp - a.timestamp);
+        if (unread.length > 0) {
+          const latest = unread[0];
+          state.setActiveWorkspace(latest.workspaceId);
+          state.markRead(latest.id);
+        }
+        return;
+      }
+
+      // Ctrl+Shift+R: Rename workspace (triggers inline rename in sidebar)
+      // This is handled by the Sidebar component via a custom event
+      if (ctrl && shift && !alt && key === 'R') {
+        e.preventDefault();
+        document.dispatchEvent(new CustomEvent('wmux:rename-workspace'));
+        return;
+      }
+
+      // Ctrl+Shift+L: Open browser panel in a new horizontal split
+      if (ctrl && shift && !alt && key === 'L') {
+        e.preventDefault();
+        const state = store.getState();
+        const ws = state.workspaces.find((w) => w.id === state.activeWorkspaceId);
+        if (ws) {
+          state.splitPane(ws.activePaneId, 'horizontal');
+          // After split, the new pane becomes active; add browser surface to it
+          const newState = store.getState();
+          const newWs = newState.workspaces.find((w) => w.id === newState.activeWorkspaceId);
+          if (newWs) {
+            newState.addBrowserSurface(newWs.activePaneId);
+          }
+        }
+        return;
+      }
+
+      // Ctrl+Shift+X: Enter Vi Copy Mode for terminal scrollback
+      // (Ctrl+Shift+C is reserved for clipboard copy)
+      if (ctrl && shift && !alt && key === 'X') {
+        e.preventDefault();
+        store.getState().setViCopyModeActive(true);
+        return;
+      }
+
+      // Ctrl+F: Toggle terminal search bar
+      if (ctrl && !shift && !alt && key === 'f') {
+        e.preventDefault();
+        store.getState().toggleSearchBar();
+        return;
+      }
+
+      // Ctrl+Shift+H: Flash active pane to highlight its position
+      if (ctrl && shift && !alt && key === 'H') {
+        e.preventDefault();
+        document.dispatchEvent(new CustomEvent('wmux:flash-pane'));
+        return;
+      }
+
+      // Ctrl+Shift+O: Toggle Company View overlay
+      if (ctrl && shift && !alt && key === 'O') {
+        e.preventDefault();
+        store.getState().toggleCompanyView();
+        return;
+      }
+
+      // ─── Custom keybindings → terminal input ─────────────────────────
+      const { customKeybindings } = store.getState();
+      if (customKeybindings.length > 0) {
+        const pressed = formatKeyCombo(ctrl, shift, alt, key);
+        const match = customKeybindings.find((kb) => kb.key === pressed);
+        if (match) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          const state = store.getState();
+          const ws = state.workspaces.find((w) => w.id === state.activeWorkspaceId);
+          if (ws) {
+            const findLeaf = (pane: import('../../shared/types').Pane): import('../../shared/types').PaneLeaf | null => {
+              if (pane.type === 'leaf' && pane.id === ws.activePaneId) return pane;
+              if (pane.type === 'branch') {
+                for (const c of pane.children) {
+                  const found = findLeaf(c);
+                  if (found) return found;
+                }
+              }
+              return null;
+            };
+            const leaf = findLeaf(ws.rootPane);
+            if (leaf) {
+              const surface = leaf.surfaces.find((s) => s.id === leaf.activeSurfaceId);
+              if (surface?.ptyId) {
+                const text = match.sendEnter ? match.command + '\r' : match.command;
+                window.electronAPI.pty.write(surface.ptyId, text);
+              }
+            }
+          }
+          return;
+        }
+      }
+    };
+
+    // Use capture phase so we run BEFORE xterm's stopPropagation
+    window.addEventListener('keydown', handler, true);
+    return () => window.removeEventListener('keydown', handler, true);
+  }, []);
+}

package/src/renderer/hooks/useNotificationListener.ts

@@ -0,0 +1,80 @@
+import { useEffect } from 'react';
+import { useStore } from '../stores';
+import type { NotificationType, Pane, PaneLeaf } from '../../shared/types';
+import { playNotificationSound } from './useNotificationSound';
+
+function findSurfaceByPtyId(root: Pane, ptyId: string): { surfaceId: string; paneId: string } | null {
+  if (root.type === 'leaf') {
+    const surface = root.surfaces.find((s) => s.ptyId === ptyId);
+    if (surface) return { surfaceId: surface.id, paneId: root.id };
+    return null;
+  }
+  for (const child of root.children) {
+    const found = findSurfaceByPtyId(child, ptyId);
+    if (found) return found;
+  }
+  return null;
+}
+
+// Throttle notification sounds — min 2s between sounds of same type
+const lastSoundTime: Record<string, number> = {};
+const SOUND_THROTTLE_MS = 2000;
+
+export function useNotificationListener() {
+  useEffect(() => {
+    const unsubNotif = window.electronAPI.notification.onNew((ptyId, data) => {
+      const state = useStore.getState();
+      // Find which workspace/surface this ptyId belongs to
+      for (const ws of state.workspaces) {
+        const found = findSurfaceByPtyId(ws.rootPane, ptyId);
+        if (found) {
+          state.addNotification({
+            surfaceId: found.surfaceId,
+            workspaceId: ws.id,
+            type: data.type as NotificationType,
+            title: data.title,
+            body: data.body,
+          });
+          // Play sound if enabled (throttled)
+          if (useStore.getState().notificationSoundEnabled) {
+            const now = Date.now();
+            const key = data.type;
+            if (!lastSoundTime[key] || now - lastSoundTime[key] > SOUND_THROTTLE_MS) {
+              lastSoundTime[key] = now;
+              playNotificationSound(data.type as NotificationType);
+            }
+          }
+          break;
+        }
+      }
+    });
+
+    const unsubCwd = window.electronAPI.notification.onCwdChanged((ptyId, cwd) => {
+      const state = useStore.getState();
+      for (const ws of state.workspaces) {
+        const found = findSurfaceByPtyId(ws.rootPane, ptyId);
+        if (found) {
+          state.updateWorkspaceMetadata(ws.id, { cwd });
+          break;
+        }
+      }
+    });
+
+    const unsubMeta = window.electronAPI.metadata.onUpdate((ptyId, data) => {
+      const state = useStore.getState();
+      for (const ws of state.workspaces) {
+        const found = findSurfaceByPtyId(ws.rootPane, ptyId);
+        if (found) {
+          state.updateWorkspaceMetadata(ws.id, data);
+          break;
+        }
+      }
+    });
+
+    return () => {
+      unsubNotif();
+      unsubCwd();
+      unsubMeta();
+    };
+  }, []);
+}

package/src/renderer/hooks/useNotificationSound.ts

@@ -0,0 +1,75 @@
+/**
+ * useNotificationSound
+ *
+ * Web Audio API를 사용해 외부 파일 없이 짧은 비프음을 생성합니다.
+ * notificationSoundEnabled 설정이 true일 때만 재생됩니다.
+ */
+
+let audioCtx: AudioContext | null = null;
+
+function getAudioContext(): AudioContext {
+  if (!audioCtx) {
+    audioCtx = new AudioContext();
+  }
+  return audioCtx;
+}
+
+/**
+ * 알림 타입별 소리 재생.
+ * - agent: 두 음 상승 (성공 신호)
+ * - error: 낮은 단음 (경고)
+ * - warning: 중간 단음
+ * - info: 기본 단음
+ */
+export function playNotificationSound(type: 'agent' | 'error' | 'warning' | 'info' = 'info'): void {
+  try {
+    const ctx = getAudioContext();
+    if (ctx.state === 'suspended') {
+      ctx.resume().catch(() => undefined);
+    }
+
+    const now = ctx.currentTime;
+
+    const configs: Array<{ freq: number; time: number; duration: number }> = [];
+
+    switch (type) {
+      case 'agent':
+        // 두 음 상승: 솔 → 도
+        configs.push({ freq: 784, time: now, duration: 0.1 });
+        configs.push({ freq: 1047, time: now + 0.12, duration: 0.12 });
+        break;
+      case 'error':
+        // 낮은 단음
+        configs.push({ freq: 330, time: now, duration: 0.18 });
+        break;
+      case 'warning':
+        // 중간 단음
+        configs.push({ freq: 523, time: now, duration: 0.14 });
+        break;
+      default:
+        // info: 짧은 고음
+        configs.push({ freq: 880, time: now, duration: 0.1 });
+        break;
+    }
+
+    for (const { freq, time, duration } of configs) {
+      const osc = ctx.createOscillator();
+      const gain = ctx.createGain();
+
+      osc.type = 'sine';
+      osc.frequency.setValueAtTime(freq, time);
+
+      gain.gain.setValueAtTime(0, time);
+      gain.gain.linearRampToValueAtTime(0.18, time + 0.01);
+      gain.gain.linearRampToValueAtTime(0, time + duration);
+
+      osc.connect(gain);
+      gain.connect(ctx.destination);
+
+      osc.start(time);
+      osc.stop(time + duration + 0.01);
+    }
+  } catch {
+    // AudioContext가 지원되지 않는 환경에서는 무시
+  }
+}