@wong2kim/wmux 1.0.0

package/src/renderer/components/Sidebar/MiniSidebar.tsx

@@ -0,0 +1,67 @@
+import { useStore } from '../../stores';
+import { useT } from '../../hooks/useT';
+
+export default function MiniSidebar() {
+  const t = useT();
+  const sidebarPosition = useStore((s) => s.sidebarPosition);
+  const workspaces = useStore((s) => s.workspaces);
+  const activeWorkspaceId = useStore((s) => s.activeWorkspaceId);
+  const setActiveWorkspace = useStore((s) => s.setActiveWorkspace);
+  const toggleSidebar = useStore((s) => s.toggleSidebar);
+  const totalUnread = useStore((s) =>
+    s.notifications.filter((n) => !n.read).length,
+  );
+
+  return (
+    <div className={`flex flex-col h-full bg-[var(--bg-mantle)] ${sidebarPosition === 'right' ? 'border-l' : 'border-r'} border-[var(--bg-surface)]`} style={{ width: 48 }}>
+      {/* Expand button */}
+      <button
+        className="flex items-center justify-center h-10 text-[var(--text-muted)] hover:text-[var(--text-main)] transition-colors border-b border-[var(--bg-surface)] font-mono text-[11px]"
+        onClick={toggleSidebar}
+        title={t('sidebar.expandTooltip')}
+      >
+        ›
+      </button>
+
+      {/* Workspace dots */}
+      <div className="flex-1 overflow-y-auto py-2 flex flex-col items-center gap-1">
+        {workspaces.map((ws, i) => {
+          const isActive = ws.id === activeWorkspaceId;
+          const initial = ws.name.charAt(0).toUpperCase();
+
+          return (
+            <button
+              key={ws.id}
+              className={`w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold font-mono transition-colors ${
+                isActive
+                  ? 'bg-[var(--bg-surface)] text-[var(--text-main)]'
+                  : 'text-[var(--text-muted)] hover:bg-[rgba(var(--bg-surface-rgb),0.5)] hover:text-[var(--text-sub)]'
+              }`}
+              onClick={() => setActiveWorkspace(ws.id)}
+              title={`${ws.name} (Ctrl+${i + 1})`}
+            >
+              {initial}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Status area */}
+      <div className="flex flex-col items-center gap-2 py-2 border-t border-[var(--bg-surface)]">
+        {/* Unread badge */}
+        {totalUnread > 0 && (
+          <button
+            className="w-8 h-8 rounded-md flex items-center justify-center bg-[rgba(var(--accent-blue-rgb),0.2)] text-[var(--accent-blue)] text-[10px] font-bold"
+            onClick={() => useStore.getState().toggleNotificationPanel()}
+            title={t('sidebar.unreadCount', { count: totalUnread })}
+          >
+            {totalUnread > 99 ? '99+' : totalUnread}
+          </button>
+        )}
+
+        {/* Workspace count */}
+        <span className="text-[9px] font-mono text-[var(--text-muted)]">{workspaces.length}</span>
+      </div>
+    </div>
+  );
+}

package/src/renderer/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,84 @@
+import { useStore } from '../../stores';
+import WorkspaceItem from './WorkspaceItem';
+import type { Pane } from '../../../shared/types';
+import { useT } from '../../hooks/useT';
+
+// Pane 트리에서 모든 leaf의 PTY를 dispose
+function disposeAllPtys(pane: 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) disposeAllPtys(child);
+  }
+}
+
+export default function Sidebar() {
+  const t = useT();
+  const sidebarPosition = useStore((s) => s.sidebarPosition);
+  const workspaces = useStore((s) => s.workspaces);
+  const activeWorkspaceId = useStore((s) => s.activeWorkspaceId);
+  const addWorkspace = useStore((s) => s.addWorkspace);
+  const removeWorkspace = useStore((s) => s.removeWorkspace);
+  const setActiveWorkspace = useStore((s) => s.setActiveWorkspace);
+  const renameWorkspace = useStore((s) => s.renameWorkspace);
+  const reorderWorkspace = useStore((s) => s.reorderWorkspace);
+  const handleCtrlSelect = (wsId: string) => {
+    // Just switch to the workspace (don't split)
+    setActiveWorkspace(wsId);
+  };
+
+  const handleClose = (wsId: string) => {
+    // 삭제 전 해당 워크스페이스의 모든 PTY 정리
+    const ws = workspaces.find((w) => w.id === wsId);
+    if (ws) disposeAllPtys(ws.rootPane);
+
+    removeWorkspace(wsId);
+  };
+
+  return (
+    <div className={`flex flex-col h-full bg-[var(--bg-mantle)] ${sidebarPosition === 'right' ? 'border-l' : 'border-r'} border-[var(--bg-surface)]`} style={{ width: 240 }}>
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--bg-surface)]">
+        <span className="text-sm font-bold text-[var(--text-main)] tracking-widest font-mono">WMUX</span>
+        <button
+          className="text-[var(--text-subtle)] hover:text-[var(--accent-green)] text-lg leading-none transition-colors"
+          onClick={() => addWorkspace()}
+          title={t('sidebar.newWorkspaceTooltip')}
+        >
+          +
+        </button>
+      </div>
+
+      {/* Workspace list */}
+      <div className="flex-1 overflow-y-auto py-2 space-y-0.5">
+        {workspaces.map((ws, i) => (
+          <WorkspaceItem
+            key={ws.id}
+            workspace={ws}
+            isActive={ws.id === activeWorkspaceId}
+            index={i}
+            onSelect={() => setActiveWorkspace(ws.id)}
+            onCtrlSelect={() => handleCtrlSelect(ws.id)}
+            onRename={(name) => renameWorkspace(ws.id, name)}
+            onClose={() => handleClose(ws.id)}
+            onReorder={reorderWorkspace}
+          />
+        ))}
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between px-4 py-2 border-t border-[var(--bg-surface)] text-[10px] font-mono text-[var(--text-muted)]">
+        <span>{workspaces.length} {t('sidebar.workspaces')}</span>
+        <button
+          className="text-[var(--text-muted)] hover:text-[var(--text-main)] transition-colors"
+          onClick={() => useStore.getState().toggleSidebar()}
+          title={t('sidebar.hideTooltip')}
+        >
+          ◀
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/renderer/components/Sidebar/WorkspaceItem.tsx

@@ -0,0 +1,241 @@
+import { useState, useRef, useEffect } from 'react';
+import type { AgentStatus, Workspace } from '../../../shared/types';
+import { useStore } from '../../stores';
+import { useT } from '../../hooks/useT';
+
+interface WorkspaceItemProps {
+  workspace: Workspace;
+  isActive: boolean;
+  index: number;
+  onSelect: () => void;
+  onCtrlSelect: () => void;
+  onRename: (name: string) => void;
+  onClose: () => void;
+  onReorder: (fromIndex: number, toIndex: number) => void;
+}
+
+// Maps AgentStatus to a colored dot indicator character and Tailwind color class.
+const AGENT_STATUS_ICON: Record<AgentStatus, { dot: string; className: string; labelKey: string }> = {
+  running:  { dot: '●', className: 'text-[var(--accent-blue)]', labelKey: 'workspace.agentRunning' },
+  complete: { dot: '●', className: 'text-[var(--accent-green)]', labelKey: 'workspace.agentComplete' },
+  error:    { dot: '●', className: 'text-[var(--accent-red)]', labelKey: 'workspace.agentError' },
+  waiting:  { dot: '●', className: 'text-[var(--accent-yellow)]', labelKey: 'workspace.agentWaiting' },
+  idle:     { dot: '●', className: 'text-[var(--text-muted)]', labelKey: 'workspace.agentIdle' },
+};
+
+function AgentStatusDot({ status, agentName }: { status: AgentStatus; agentName?: string }): React.ReactElement {
+  const t = useT();
+  const icon = AGENT_STATUS_ICON[status];
+  const label = t(icon.labelKey);
+  return (
+    <span
+      className={`text-[8px] leading-none flex-shrink-0 ${icon.className} ${status === 'running' ? 'animate-pulse' : ''}`}
+      title={agentName ? `${agentName} — ${label}` : label}
+    >
+      {icon.dot}
+    </span>
+  );
+}
+
+function shortenPath(path: string, maxLen = 25): string {
+  if (!path || path.length <= maxLen) return path;
+  const parts = path.replace(/\\/g, '/').split('/');
+  if (parts.length <= 2) return path;
+  return `.../${parts.slice(-2).join('/')}`;
+}
+
+export default function WorkspaceItem({ workspace, isActive, index, onSelect, onCtrlSelect, onRename, onClose, onReorder }: WorkspaceItemProps) {
+  const t = useT();
+  const [editing, setEditing] = useState(false);
+  const [editName, setEditName] = useState(workspace.name);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dropIndicator, setDropIndicator] = useState<'above' | 'below' | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dragStartTimeRef = useRef<number>(0);
+
+  const unreadCount = useStore((s) =>
+    s.notifications.filter((n) => !n.read && n.workspaceId === workspace.id).length,
+  );
+
+  const metadata = workspace.metadata;
+
+  useEffect(() => {
+    if (editing) inputRef.current?.focus();
+  }, [editing]);
+
+  const commitRename = () => {
+    const trimmed = editName.trim();
+    if (trimmed && trimmed !== workspace.name) {
+      onRename(trimmed);
+    } else {
+      setEditName(workspace.name);
+    }
+    setEditing(false);
+  };
+
+  const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {
+    dragStartTimeRef.current = Date.now();
+    e.dataTransfer.setData('text/plain', String(index));
+    e.dataTransfer.effectAllowed = 'move';
+    // 약간의 딜레이 후 dragging 상태로 전환 (더블클릭 구분)
+    setTimeout(() => setIsDragging(true), 0);
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging(false);
+    setDropIndicator(null);
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    const rect = e.currentTarget.getBoundingClientRect();
+    const midY = rect.top + rect.height / 2;
+    setDropIndicator(e.clientY < midY ? 'above' : 'below');
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    // currentTarget 밖으로 나갈 때만 인디케이터 제거
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+      setDropIndicator(null);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setDropIndicator(null);
+    const fromIndex = parseInt(e.dataTransfer.getData('text/plain'), 10);
+    if (isNaN(fromIndex) || fromIndex === index) return;
+
+    // 드롭 위치를 아이템 중간 기준으로 결정
+    // 위 절반 → 현재 index 앞으로, 아래 절반 → 현재 index 뒤로
+    const rect = e.currentTarget.getBoundingClientRect();
+    const midY = rect.top + rect.height / 2;
+    const toIndex = e.clientY < midY
+      ? (fromIndex < index ? index - 1 : index)
+      : (fromIndex > index ? index + 1 : index);
+    onReorder(fromIndex, toIndex);
+  };
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    // 드래그 직후 클릭 이벤트 무시 (200ms 이내)
+    if (Date.now() - dragStartTimeRef.current < 200) return;
+    if (e.ctrlKey) {
+      e.preventDefault();
+      onCtrlSelect();
+    } else {
+      onSelect();
+    }
+  };
+
+  const handleDoubleClick = () => {
+    // 드래그 직후 더블클릭 이벤트 무시
+    if (Date.now() - dragStartTimeRef.current < 300) return;
+    setEditName(workspace.name);
+    setEditing(true);
+  };
+
+  return (
+    <div className="relative mx-2">
+      {/* 드롭 인디케이터 - 위 */}
+      {dropIndicator === 'above' && (
+        <div className="absolute top-0 left-0 right-0 h-0.5 bg-[var(--accent-blue)] rounded-full z-10 -translate-y-px" />
+      )}
+
+      <div
+        draggable
+        className={`group flex items-start gap-2 px-3 py-1.5 cursor-pointer rounded-md transition-colors select-none ${
+          isActive
+            ? 'bg-[var(--bg-surface)] text-[var(--text-main)]'
+            : 'text-[var(--text-subtle)] hover:bg-[rgba(var(--bg-surface-rgb),0.5)] hover:text-[var(--text-sub)]'
+        } ${isDragging ? 'opacity-40' : 'opacity-100'}`}
+        onClick={handleClick}
+        onDoubleClick={handleDoubleClick}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        {/* Status indicator */}
+        <div className={`w-1.5 h-1.5 rounded-full flex-shrink-0 mt-1.5 ${isActive ? 'bg-[var(--accent-green)]' : 'bg-[var(--text-muted)]'}`} />
+
+        {/* Name + Metadata */}
+        <div className="flex-1 min-w-0">
+          {editing ? (
+            <input
+              ref={inputRef}
+              className="w-full bg-[var(--bg-base)] text-[var(--text-main)] text-[11px] font-mono px-1 py-0 rounded border border-[var(--text-muted)] outline-none"
+              value={editName}
+              onChange={(e) => setEditName(e.target.value)}
+              onBlur={commitRename}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') commitRename();
+                if (e.key === 'Escape') { setEditName(workspace.name); setEditing(false); }
+              }}
+              onClick={(e) => e.stopPropagation()}
+            />
+          ) : (
+            <>
+              <div className="flex items-center gap-1">
+                <span className="text-[11px] font-mono truncate">{workspace.name}</span>
+                {metadata?.agentStatus && metadata.agentStatus !== 'idle' && (
+                  <AgentStatusDot status={metadata.agentStatus} agentName={metadata.agentName} />
+                )}
+                {unreadCount > 0 && (
+                  <span className="bg-[var(--accent-blue)] text-[var(--bg-base)] text-[9px] font-bold min-w-[16px] h-4 flex items-center justify-center rounded-full px-1 flex-shrink-0">
+                    {unreadCount}
+                  </span>
+                )}
+              </div>
+              {metadata && (metadata.gitBranch || metadata.cwd || (metadata.listeningPorts && metadata.listeningPorts.length > 0) || metadata.agentName) && (
+                <div className="mt-0.5 space-y-0 text-[10px] text-[var(--text-muted)]">
+                  {metadata.gitBranch && (
+                    <div className="truncate" title={metadata.gitBranch}>
+                      <span className="text-[var(--accent-yellow)]">⎇</span> {metadata.gitBranch}
+                    </div>
+                  )}
+                  {metadata.cwd && (
+                    <div className="truncate" title={metadata.cwd}>
+                      {shortenPath(metadata.cwd)}
+                    </div>
+                  )}
+                  {metadata.listeningPorts && metadata.listeningPorts.length > 0 && (
+                    <div className="truncate">
+                      <span className="text-[var(--accent-green)]">●</span> :{metadata.listeningPorts.slice(0, 3).join(', :')}
+                      {metadata.listeningPorts.length > 3 && ` +${metadata.listeningPorts.length - 3}`}
+                    </div>
+                  )}
+                  {metadata.agentName && (
+                    <div className="truncate" title={`${metadata.agentName}`}>
+                      <span className="text-[var(--accent-purple)]">⚡</span> {metadata.agentName}
+                    </div>
+                  )}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        {/* Shortcut hint */}
+        <span className="text-[8px] font-mono text-[var(--text-muted)] flex-shrink-0 mt-0.5">
+          {index < 9 ? `^${index + 1}` : ''}
+        </span>
+
+        {/* Close button */}
+        <button
+          className="opacity-0 group-hover:opacity-100 text-[var(--text-subtle)] hover:text-[var(--accent-red)] text-[10px] font-mono flex-shrink-0 mt-0.5 transition-opacity"
+          onClick={(e) => { e.stopPropagation(); onClose(); }}
+          title={t('workspace.close')}
+        >
+          ✕
+        </button>
+      </div>
+
+      {/* 드롭 인디케이터 - 아래 */}
+      {dropIndicator === 'below' && (
+        <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--accent-blue)] rounded-full z-10 translate-y-px" />
+      )}
+    </div>
+  );
+}

package/src/renderer/components/StatusBar/StatusBar.tsx

@@ -0,0 +1,93 @@
+import { useState, useEffect } from 'react';
+import { useStore } from '../../stores';
+import { useT } from '../../hooks/useT';
+
+export default function StatusBar() {
+  const t = useT();
+  const activeWorkspaceId = useStore((s) => s.activeWorkspaceId);
+  const workspaces = useStore((s) => s.workspaces);
+  const activeWs = workspaces.find((w) => w.id === activeWorkspaceId);
+  const unreadCount = useStore((s) => s.notifications.filter((n) => !n.read).length);
+  const toggleSettingsPanel = useStore((s) => s.toggleSettingsPanel);
+
+  // Company 모드 비용 정보
+  const sidebarMode = useStore((s) => s.sidebarMode);
+  const totalCost = useStore((s) => s.company?.totalCostEstimate ?? 0);
+  const sessionStartTime = useStore((s) => s.sessionStartTime);
+
+  const [time, setTime] = useState(new Date());
+  const [memUsage, setMemUsage] = useState('');
+  const [sessionMin, setSessionMin] = useState(0);
+
+  // Update clock every second
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTime(new Date());
+      if (sessionStartTime) {
+        setSessionMin(Math.floor((Date.now() - sessionStartTime) / 60_000));
+      }
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [sessionStartTime]);
+
+  // Update memory usage every 5 seconds
+  useEffect(() => {
+    const update = () => {
+      const perf = performance as unknown as { memory?: { usedJSHeapSize: number } };
+      if (perf.memory) {
+        setMemUsage(`${Math.round(perf.memory.usedJSHeapSize / 1024 / 1024)}MB`);
+      }
+    };
+    update();
+    const timer = setInterval(update, 5000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const timeStr = time.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
+  const branch = activeWs?.metadata?.gitBranch;
+  const isCompanyMode = sidebarMode === 'company';
+
+  return (
+    <div className="flex items-center justify-between h-6 px-3 bg-[#11111b] border-b border-[var(--bg-surface)] text-[10px] text-[var(--text-muted)] shrink-0 select-none font-mono">
+      {/* Left: workspace + branch */}
+      <div className="flex items-center gap-3">
+        <span className="text-[var(--text-main)] font-medium">{activeWs?.name || 'wmux'}</span>
+        {branch && (
+          <span>
+            <span className="text-[var(--accent-yellow)]">⎇</span> {branch}
+          </span>
+        )}
+        {/* Company 모드 배지 */}
+        {isCompanyMode && (
+          <span className="text-[8px] font-mono px-1.5 py-px bg-[var(--bg-surface)] text-[var(--accent-blue)] rounded">
+            {t('statusBar.company')}
+          </span>
+        )}
+      </div>
+
+      {/* Right: status indicators */}
+      <div className="flex items-center gap-3">
+        {/* Company 모드일 때 비용 표시 */}
+        {isCompanyMode && (
+          <span className="text-[var(--text-sub2)]" title={t('statusBar.session', { min: sessionMin })}>
+            ~${totalCost.toFixed(2)}
+          </span>
+        )}
+        {unreadCount > 0 && (
+          <span className="text-[var(--accent-blue)]">
+            ● {unreadCount}
+          </span>
+        )}
+        {memUsage && <span>{memUsage}</span>}
+        <span>{timeStr}</span>
+        <button
+          onClick={toggleSettingsPanel}
+          className="text-[var(--text-muted)] hover:text-[var(--text-main)] transition-colors ml-1"
+          title={t('statusBar.settingsTooltip')}
+        >
+          ⚙
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,126 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { useT } from '../../hooks/useT';
+
+interface SearchBarProps {
+  onFindNext: (text: string) => void;
+  onFindPrevious: (text: string) => void;
+  onClose: () => void;
+}
+
+export default function SearchBar({ onFindNext, onFindPrevious, onClose }: SearchBarProps) {
+  const t = useT();
+  const [query, setQuery] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // 마운트 시 입력 필드에 포커스
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  // ESC 키로 닫기
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      if (e.shiftKey) {
+        onFindPrevious(query);
+      } else {
+        onFindNext(query);
+      }
+    }
+  }, [query, onFindNext, onFindPrevious]);
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(e.target.value);
+  }, []);
+
+  return (
+    <div
+      className="absolute top-0 right-2 z-50 flex items-center gap-1 px-2 py-1.5 rounded-b-md shadow-lg"
+      style={{
+        background: 'var(--bg-surface)',
+        border: '1px solid var(--bg-overlay)',
+        borderTop: 'none',
+        minWidth: '280px',
+      }}
+      // 클릭이 Pane의 handleClick까지 버블링되지 않도록 차단
+      onClick={(e) => e.stopPropagation()}
+    >
+      {/* 검색 아이콘 */}
+      <svg
+        width="13"
+        height="13"
+        viewBox="0 0 16 16"
+        fill="none"
+        className="shrink-0 text-[var(--text-subtle)]"
+        style={{ color: 'var(--text-subtle)' }}
+      >
+        <circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" strokeWidth="1.5" />
+        <line x1="10" y1="10" x2="14" y2="14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+
+      {/* 입력 필드 */}
+      <input
+        ref={inputRef}
+        type="text"
+        value={query}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        placeholder={t('search.placeholder')}
+        className="flex-1 bg-transparent outline-none text-xs"
+        style={{
+          color: 'var(--text-main)',
+          caretColor: '#f5e0dc',
+          minWidth: 0,
+        }}
+        spellCheck={false}
+      />
+
+      {/* 이전 버튼 (Shift+Enter) */}
+      <button
+        onClick={() => onFindPrevious(query)}
+        title={t('search.prevTooltip')}
+        className="flex items-center justify-center w-5 h-5 rounded transition-colors hover:bg-[var(--bg-overlay)] text-[var(--text-sub2)] hover:text-[var(--text-main)] shrink-0"
+      >
+        <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+          <path d="M5 8L2 5l3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          <path d="M8 8L5 5l3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+
+      {/* 다음 버튼 (Enter) */}
+      <button
+        onClick={() => onFindNext(query)}
+        title={t('search.nextTooltip')}
+        className="flex items-center justify-center w-5 h-5 rounded transition-colors hover:bg-[var(--bg-overlay)] text-[var(--text-sub2)] hover:text-[var(--text-main)] shrink-0"
+      >
+        <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+          <path d="M2 2l3 3-3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          <path d="M5 2l3 3-3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+
+      {/* 닫기 버튼 */}
+      <button
+        onClick={onClose}
+        title={t('search.closeTooltip')}
+        className="flex items-center justify-center w-5 h-5 rounded transition-colors hover:bg-[var(--bg-overlay)] text-[var(--text-subtle)] hover:text-[var(--accent-red)] shrink-0"
+      >
+        <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+          <line x1="2" y1="2" x2="8" y2="8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+          <line x1="8" y1="2" x2="2" y2="8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+        </svg>
+      </button>
+    </div>
+  );
+}