@wong2kim/wmux 1.0.0

package/src/renderer/components/Palette/CommandPalette.tsx

@@ -0,0 +1,409 @@
+import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { useStore } from '../../stores';
+import PaletteItem, { type PaletteItemData, type PaletteCategory } from './PaletteItem';
+import { useT } from '../../hooks/useT';
+
+// ---------------------------------------------------------------------------
+// SVG Icons (inline, no external dependency)
+// ---------------------------------------------------------------------------
+
+function IconSearch() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="6.5" cy="6.5" r="4" stroke="currentColor" strokeWidth="1.4" />
+      <line x1="9.85" y1="9.85" x2="13" y2="13" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function IconWorkspace() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="1" y="1" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.2" />
+      <rect x="8" y="1" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.2" />
+      <rect x="1" y="8" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.2" />
+      <rect x="8" y="8" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.2" />
+    </svg>
+  );
+}
+
+function IconSurface() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="1" y="1" width="12" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.2" />
+      <line x1="4" y1="12" x2="10" y2="12" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+      <line x1="7" y1="10" x2="7" y2="12" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function IconCommand() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <polyline points="3,5 1,7 3,9" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+      <polyline points="11,5 13,7 11,9" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+      <line x1="8.5" y1="3" x2="5.5" y2="11" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Fuzzy match helper
+// Scores a string against a query. Returns null if no match, else a score
+// (higher = better). Consecutive character matches are rewarded.
+// ---------------------------------------------------------------------------
+
+function fuzzyScore(str: string, query: string): number | null {
+  if (query.length === 0) return 0;
+  const s = str.toLowerCase();
+  const q = query.toLowerCase();
+  let si = 0;
+  let qi = 0;
+  let score = 0;
+  let consecutive = 0;
+  let lastMatchIdx = -1;
+
+  while (si < s.length && qi < q.length) {
+    if (s[si] === q[qi]) {
+      // Reward consecutive matches and start-of-word matches
+      consecutive++;
+      if (lastMatchIdx === si - 1) {
+        score += 2 + consecutive;
+      } else {
+        consecutive = 0;
+        score += 1;
+      }
+      // Bonus for matching at word start
+      if (si === 0 || s[si - 1] === ' ' || s[si - 1] === '-' || s[si - 1] === '_') {
+        score += 3;
+      }
+      lastMatchIdx = si;
+      qi++;
+    }
+    si++;
+  }
+
+  return qi === q.length ? score : null;
+}
+
+// ---------------------------------------------------------------------------
+// CommandPalette component
+// ---------------------------------------------------------------------------
+
+export default function CommandPalette() {
+  const t = useT();
+  const visible = useStore((s) => s.commandPaletteVisible);
+  const setVisible = useStore((s) => s.setCommandPaletteVisible);
+  const workspaces = useStore((s) => s.workspaces);
+  const activeWorkspaceId = useStore((s) => s.activeWorkspaceId);
+
+  const [query, setQuery] = useState('');
+  const [activeIdx, setActiveIdx] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // -------------------------------------------------------------------------
+  // Build item list
+  // -------------------------------------------------------------------------
+
+  const buildItems = useCallback((): PaletteItemData[] => {
+    const items: PaletteItemData[] = [];
+
+    // Workspaces
+    workspaces.forEach((ws) => {
+      items.push({
+        id: `ws-${ws.id}`,
+        label: ws.name,
+        category: 'workspace' as PaletteCategory,
+        icon: <IconWorkspace />,
+        action: () => {
+          useStore.getState().setActiveWorkspace(ws.id);
+          setVisible(false);
+        },
+      });
+    });
+
+    // Surfaces — gather from active workspace leaf panes
+    const activeWs = workspaces.find((w) => w.id === activeWorkspaceId);
+    if (activeWs) {
+      const collectSurfaces = (pane: import('../../../shared/types').Pane) => {
+        if (pane.type === 'leaf') {
+          pane.surfaces.forEach((surface) => {
+            items.push({
+              id: `surface-${surface.id}`,
+              label: surface.title || 'Terminal',
+              category: 'surface' as PaletteCategory,
+              icon: <IconSurface />,
+              action: () => {
+                useStore.getState().setActiveSurface(pane.id, surface.id);
+                setVisible(false);
+              },
+            });
+          });
+        } else if (pane.type === 'branch') {
+          pane.children.forEach(collectSurfaces);
+        }
+      };
+      collectSurfaces(activeWs.rootPane);
+    }
+
+    // Built-in commands
+    const commands: Array<{ label: string; action: () => void }> = [
+      {
+        label: t('palette.cmd.toggleSidebar'),
+        action: () => { useStore.getState().toggleSidebar(); setVisible(false); },
+      },
+      {
+        label: t('palette.cmd.splitRight'),
+        action: () => {
+          const state = useStore.getState();
+          const ws = state.workspaces.find((w) => w.id === state.activeWorkspaceId);
+          if (ws) state.splitPane(ws.activePaneId, 'horizontal');
+          setVisible(false);
+        },
+      },
+      {
+        label: t('palette.cmd.splitDown'),
+        action: () => {
+          const state = useStore.getState();
+          const ws = state.workspaces.find((w) => w.id === state.activeWorkspaceId);
+          if (ws) state.splitPane(ws.activePaneId, 'vertical');
+          setVisible(false);
+        },
+      },
+      {
+        label: t('palette.cmd.newWorkspace'),
+        action: () => { useStore.getState().addWorkspace(); setVisible(false); },
+      },
+      {
+        label: t('palette.cmd.newSurface'),
+        action: () => {
+          const state = useStore.getState();
+          const ws = state.workspaces.find((w) => w.id === state.activeWorkspaceId);
+          if (ws) {
+            window.electronAPI.pty.create().then((result: { id: string }) => {
+              useStore.getState().addSurface(ws.activePaneId, result.id, 'Terminal', '');
+            });
+          }
+          setVisible(false);
+        },
+      },
+      {
+        label: t('palette.cmd.showNotifications'),
+        action: () => { useStore.getState().setNotificationPanelVisible(true); setVisible(false); },
+      },
+      {
+        label: t('palette.cmd.openBrowser'),
+        action: () => {
+          const state = useStore.getState();
+          const ws = state.workspaces.find((w) => w.id === state.activeWorkspaceId);
+          if (ws) {
+            state.splitPane(ws.activePaneId, 'horizontal');
+            const newState = useStore.getState();
+            const newWs = newState.workspaces.find((w) => w.id === newState.activeWorkspaceId);
+            if (newWs) {
+              newState.addBrowserSurface(newWs.activePaneId);
+            }
+          }
+          setVisible(false);
+        },
+      },
+    ];
+
+    commands.forEach((cmd, i) => {
+      items.push({
+        id: `cmd-${i}`,
+        label: cmd.label,
+        category: 'command' as PaletteCategory,
+        icon: <IconCommand />,
+        action: cmd.action,
+      });
+    });
+
+    return items;
+  }, [workspaces, activeWorkspaceId, setVisible]);
+
+  // -------------------------------------------------------------------------
+  // Filtered + scored results — useMemo to cache across renders
+  // -------------------------------------------------------------------------
+
+  const results = useMemo((): PaletteItemData[] => {
+    const all = buildItems();
+    if (!query.trim()) return all;
+
+    return all
+      .map((item) => ({ item, score: fuzzyScore(item.label, query.trim()) }))
+      .filter((x) => x.score !== null)
+      .sort((a, b) => (b.score as number) - (a.score as number))
+      .map((x) => x.item);
+  }, [buildItems, query]);
+
+  // -------------------------------------------------------------------------
+  // Reset state when opened
+  // -------------------------------------------------------------------------
+
+  useEffect(() => {
+    if (visible) {
+      setQuery('');
+      setActiveIdx(0);
+      // Defer focus to ensure the DOM has rendered
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+      });
+    }
+  }, [visible]);
+
+  // -------------------------------------------------------------------------
+  // Keep activeIdx in bounds when results change
+  // -------------------------------------------------------------------------
+
+  useEffect(() => {
+    setActiveIdx((prev) => Math.min(prev, Math.max(results.length - 1, 0)));
+  }, [results.length]);
+
+  // -------------------------------------------------------------------------
+  // Scroll active item into view
+  // -------------------------------------------------------------------------
+
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const activeEl = list.querySelector<HTMLElement>('[data-active="true"]');
+    activeEl?.scrollIntoView({ block: 'nearest' });
+  }, [activeIdx]);
+
+  // -------------------------------------------------------------------------
+  // Keyboard navigation inside palette
+  // -------------------------------------------------------------------------
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      setVisible(false);
+      return;
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveIdx((prev) => (prev + 1) % Math.max(results.length, 1));
+      return;
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveIdx((prev) => (prev - 1 + Math.max(results.length, 1)) % Math.max(results.length, 1));
+      return;
+    }
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      results[activeIdx]?.action();
+      return;
+    }
+  };
+
+  if (!visible) return null;
+
+  return (
+    // Backdrop
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center pt-[10vh]"
+      style={{ backgroundColor: 'rgba(0,0,0,0.55)' }}
+      onMouseDown={(e) => {
+        // Close when clicking the backdrop, not the palette itself
+        if (e.target === e.currentTarget) setVisible(false);
+      }}
+    >
+      {/* Palette container */}
+      <div
+        className="w-[480px] max-h-[60vh] flex flex-col rounded-xl overflow-hidden shadow-2xl"
+        style={{
+          backgroundColor: 'var(--bg-base)',
+          border: '1px solid var(--bg-surface)',
+          boxShadow: '0 25px 60px rgba(0,0,0,0.7)',
+        }}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        {/* Search input row */}
+        <div
+          className="flex items-center gap-2.5 px-4 py-3"
+          style={{ borderBottom: '1px solid var(--bg-surface)' }}
+        >
+          <span className="shrink-0 text-[var(--text-subtle)]">
+            <IconSearch />
+          </span>
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setActiveIdx(0);
+            }}
+            onKeyDown={handleKeyDown}
+            placeholder={t('palette.placeholder')}
+            className="flex-1 bg-transparent text-[var(--text-main)] text-sm placeholder-[var(--text-muted)] outline-none"
+            spellCheck={false}
+            autoComplete="off"
+          />
+          <kbd
+            className="shrink-0 text-xs text-[var(--text-muted)] px-1.5 py-0.5 rounded"
+            style={{ border: '1px solid var(--bg-overlay)', fontFamily: 'monospace' }}
+          >
+            ESC
+          </kbd>
+        </div>
+
+        {/* Results list */}
+        <div ref={listRef} className="overflow-y-auto flex-1">
+          {results.length === 0 ? (
+            <div className="px-4 py-8 text-center text-sm text-[var(--text-muted)]">
+              {t('palette.noResults')} &ldquo;{query}&rdquo;
+            </div>
+          ) : (
+            results.map((item, idx) => (
+              <div key={item.id} data-active={idx === activeIdx ? 'true' : undefined}>
+                <PaletteItem
+                  item={item}
+                  isActive={idx === activeIdx}
+                  onClick={item.action}
+                />
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* Footer hint */}
+        <div
+          className="flex items-center gap-3 px-4 py-2"
+          style={{ borderTop: '1px solid var(--bg-surface)', backgroundColor: 'var(--bg-mantle)' }}
+        >
+          <span className="text-xs text-[var(--text-muted)]">
+            <kbd
+              className="px-1 py-0.5 rounded mr-0.5"
+              style={{ border: '1px solid var(--bg-overlay)', fontFamily: 'monospace' }}
+            >
+              ↑↓
+            </kbd>{' '}
+            {t('palette.navigate')}
+          </span>
+          <span className="text-xs text-[var(--text-muted)]">
+            <kbd
+              className="px-1 py-0.5 rounded mr-0.5"
+              style={{ border: '1px solid var(--bg-overlay)', fontFamily: 'monospace' }}
+            >
+              Enter
+            </kbd>{' '}
+            {t('palette.select')}
+          </span>
+          <span className="text-xs text-[var(--text-muted)]">
+            <kbd
+              className="px-1 py-0.5 rounded mr-0.5"
+              style={{ border: '1px solid var(--bg-overlay)', fontFamily: 'monospace' }}
+            >
+              Esc
+            </kbd>{' '}
+            {t('palette.close')}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/renderer/components/Palette/PaletteItem.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useT } from '../../hooks/useT';
+
+export type PaletteCategory = 'workspace' | 'surface' | 'command';
+
+export interface PaletteItemData {
+  id: string;
+  label: string;
+  category: PaletteCategory;
+  icon: React.ReactNode;
+  action: () => void;
+}
+
+interface PaletteItemProps {
+  item: PaletteItemData;
+  isActive: boolean;
+  onClick: () => void;
+}
+
+const categoryColor: Record<PaletteCategory, string> = {
+  workspace: 'text-[var(--accent-blue)]',
+  surface: 'text-[var(--accent-green)]',
+  command: 'text-[var(--accent-purple)]',
+};
+
+export default function PaletteItem({ item, isActive, onClick }: PaletteItemProps) {
+  const t = useT();
+
+  const categoryLabel: Record<PaletteCategory, string> = {
+    workspace: t('palette.catWorkspace'),
+    surface: t('palette.catSurface'),
+    command: t('palette.catCommand'),
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={[
+        'w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors',
+        isActive
+          ? 'bg-[var(--bg-surface)] text-[var(--text-main)]'
+          : 'text-[var(--text-sub)] hover:bg-[#2a2a3d] hover:text-[var(--text-main)]',
+      ].join(' ')}
+    >
+      <span className="shrink-0 w-4 h-4 flex items-center justify-center text-[var(--text-subtle)]">
+        {item.icon}
+      </span>
+      <span className="flex-1 truncate text-sm">{item.label}</span>
+      <span className={`shrink-0 text-xs font-medium ${categoryColor[item.category]}`}>
+        {categoryLabel[item.category]}
+      </span>
+    </button>
+  );
+}

package/src/renderer/components/Pane/Pane.tsx

@@ -0,0 +1,122 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { PaneLeaf } from '../../../shared/types';
+import { useStore } from '../../stores';
+import { useT } from '../../hooks/useT';
+import TerminalComponent from '../Terminal/Terminal';
+import BrowserPanel from '../Browser/BrowserPanel';
+import SurfaceTabs from './SurfaceTabs';
+
+interface PaneProps {
+  pane: PaneLeaf;
+  isActive: boolean;
+  isWorkspaceVisible?: boolean;
+}
+
+export default function PaneComponent({ pane, isActive, isWorkspaceVisible = true }: PaneProps) {
+  const t = useT();
+  const [flashing, setFlashing] = useState(false);
+  const setActivePane = useStore((s) => s.setActivePane);
+  const setActiveSurface = useStore((s) => s.setActiveSurface);
+  const addSurface = useStore((s) => s.addSurface);
+  const closeSurface = useStore((s) => s.closeSurface);
+  const updateSurfacePtyId = useStore((s) => s.updateSurfacePtyId);
+  const markRead = useStore((s) => s.markRead);
+
+  // count만 가져와 불필요한 배열 참조 안정성 문제 방지
+  const unreadCount = useStore((s) =>
+    s.notifications.filter(
+      (n) => !n.read && pane.surfaces.some((surf) => surf.id === n.surfaceId),
+    ).length,
+  );
+  const notificationRingEnabled = useStore((s) => s.notificationRingEnabled);
+  const hasUnread = !isActive && unreadCount > 0 && notificationRingEnabled;
+
+  // Ctrl+Shift+H: flash the active pane
+  useEffect(() => {
+    if (!isActive) return;
+    const handler = () => {
+      setFlashing(true);
+      setTimeout(() => setFlashing(false), 500);
+    };
+    document.addEventListener('wmux:flash-pane', handler);
+    return () => document.removeEventListener('wmux:flash-pane', handler);
+  }, [isActive]);
+
+  const handleClick = useCallback(() => {
+    setActivePane(pane.id);
+    // 최신 state에서 직접 읽어 stale closure 방지
+    const { notifications } = useStore.getState();
+    const surfaceIds = new Set(pane.surfaces.map((s) => s.id));
+    for (const n of notifications) {
+      if (!n.read && surfaceIds.has(n.surfaceId)) {
+        markRead(n.id);
+      }
+    }
+  }, [pane.id, pane.surfaces, setActivePane, markRead]);
+
+  const handleAddSurface = useCallback(() => {
+    window.electronAPI.pty.create().then((result: { id: string }) => {
+      addSurface(pane.id, result.id, 'Terminal', '');
+    });
+  }, [pane.id, addSurface]);
+
+  const closePane = useStore((s) => s.closePane);
+
+  const handleCloseSurface = useCallback((surfaceId: string) => {
+    const surface = pane.surfaces.find((s) => s.id === surfaceId);
+    if (surface?.ptyId) {
+      window.electronAPI.pty.dispose(surface.ptyId);
+    }
+    closeSurface(pane.id, surfaceId);
+
+    // 마지막 Surface가 닫히면 Pane도 자동 제거
+    if (pane.surfaces.length <= 1) {
+      closePane(pane.id);
+    }
+  }, [pane.id, pane.surfaces, closeSurface, closePane]);
+
+  return (
+    <div
+      className={`flex flex-col h-full w-full relative ${
+        isActive ? 'ring-1 ring-[rgba(var(--accent-blue-rgb),0.5)]' : ''
+      } ${hasUnread ? 'notification-ring' : ''} ${flashing ? 'pane-flash' : ''}`}
+      onClick={handleClick}
+    >
+      <SurfaceTabs
+        surfaces={pane.surfaces}
+        activeSurfaceId={pane.activeSurfaceId}
+        onSelect={(surfaceId) => setActiveSurface(pane.id, surfaceId)}
+        onClose={handleCloseSurface}
+        onAdd={handleAddSurface}
+      />
+
+      <div className="flex-1 relative overflow-hidden">
+        {pane.surfaces.map((surface) =>
+          surface.surfaceType === 'browser' ? (
+            <BrowserPanel
+              key={surface.id}
+              surfaceId={surface.id}
+              initialUrl={surface.browserUrl || 'https://google.com'}
+              isActive={surface.id === pane.activeSurfaceId}
+              onClose={() => handleCloseSurface(surface.id)}
+            />
+          ) : (
+            <TerminalComponent
+              key={surface.id}
+              ptyId={surface.ptyId || undefined}
+              isActive={surface.id === pane.activeSurfaceId}
+              isWorkspaceVisible={isWorkspaceVisible}
+              onPtyCreated={(ptyId) => updateSurfacePtyId(pane.id, surface.id, ptyId)}
+            />
+          )
+        )}
+
+        {pane.surfaces.length === 0 && (
+          <div className="flex items-center justify-center h-full text-[var(--text-muted)] text-sm">
+            {t('pane.empty')}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/renderer/components/Pane/PaneContainer.tsx

@@ -0,0 +1,41 @@
+import { Panel, Group, Separator } from 'react-resizable-panels';
+import type { Pane as PaneType } from '../../../shared/types';
+import { useStore } from '../../stores';
+import PaneComponent from './Pane';
+
+interface PaneContainerProps {
+  pane: PaneType;
+  isWorkspaceVisible?: boolean;
+}
+
+export default function PaneContainer({ pane, isWorkspaceVisible = true }: PaneContainerProps) {
+  const activePaneId = useStore((s) => {
+    const ws = s.workspaces.find((w) => w.id === s.activeWorkspaceId);
+    return ws?.activePaneId || '';
+  });
+
+  if (pane.type === 'leaf') {
+    return <PaneComponent pane={pane} isActive={pane.id === activePaneId} isWorkspaceVisible={isWorkspaceVisible} />;
+  }
+
+  const orientation = pane.direction === 'horizontal' ? 'horizontal' : 'vertical';
+
+  return (
+    <Group orientation={orientation} className="h-full w-full">
+      {pane.children.map((child, i) => (
+        <div key={child.id} className="contents">
+          {i > 0 && (
+            <Separator
+              className={`${
+                orientation === 'horizontal' ? 'w-1' : 'h-1'
+              } bg-[var(--bg-surface)] hover:bg-[var(--accent-blue)] transition-colors`}
+            />
+          )}
+          <Panel defaultSize={pane.sizes?.[i] ?? 100 / pane.children.length} minSize={10}>
+            <PaneContainer pane={child} isWorkspaceVisible={isWorkspaceVisible} />
+          </Panel>
+        </div>
+      ))}
+    </Group>
+  );
+}

package/src/renderer/components/Pane/SurfaceTabs.tsx

@@ -0,0 +1,46 @@
+import type { Surface } from '../../../shared/types';
+import { useT } from '../../hooks/useT';
+
+interface SurfaceTabsProps {
+  surfaces: Surface[];
+  activeSurfaceId: string;
+  onSelect: (surfaceId: string) => void;
+  onClose: (surfaceId: string) => void;
+  onAdd: () => void;
+}
+
+export default function SurfaceTabs({ surfaces, activeSurfaceId, onSelect, onClose }: SurfaceTabsProps) {
+  const t = useT();
+  // Hide the tab bar entirely when there is only one surface — no tabs needed.
+  // The X close button on a single tab would close the pane itself (handled by Pane.tsx),
+  // so it is more intuitive to simply not show the tab strip in the single-tab case.
+  if (surfaces.length <= 1) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center bg-[var(--bg-mantle)] border-b border-[var(--bg-surface)] h-7 overflow-x-auto">
+      {surfaces.map((s) => (
+        <div
+          key={s.id}
+          className={`group flex items-center gap-1 px-3 h-full cursor-pointer text-xs border-r border-[var(--bg-surface)] transition-colors ${
+            s.id === activeSurfaceId
+              ? 'bg-[var(--bg-base)] text-[var(--text-main)]'
+              : 'text-[var(--text-subtle)] hover:text-[var(--text-sub)] hover:bg-[rgba(var(--bg-base-rgb),0.5)]'
+          }`}
+          onClick={() => onSelect(s.id)}
+        >
+          <span className="truncate max-w-[120px]">{s.title || t('surface.terminal')}</span>
+          {/* X close button — always visible, not just on hover */}
+          <button
+            className="text-[var(--text-subtle)] hover:text-[var(--accent-red)] transition-colors ml-1 leading-none"
+            onClick={(e) => { e.stopPropagation(); onClose(s.id); }}
+            title={t('surface.closeTab')}
+          >
+            ✕
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}