hjworktree-cli 2.2.0 → 2.4.0

package/web/src/components/Terminal/SplitTerminalView.tsx

@@ -0,0 +1,64 @@
+import React, { useCallback } from 'react';
+import { useAppStore } from '../../stores/useAppStore.js';
+import XTerminal from './XTerminal.js';
+import type { TerminalInfo } from '../../../../shared/types/index.js';
+
+function SplitTerminalView() {
+  const {
+    terminals,
+    activeSessionId,
+    setActiveSession,
+  } = useAppStore();
+
+  // Handle single click to activate
+  const handleClick = useCallback((sessionId: string) => {
+    setActiveSession(sessionId);
+  }, [setActiveSession]);
+
+  // Render a terminal pane
+  const renderPane = (terminal: TerminalInfo) => {
+    const isActive = terminal.sessionId === activeSessionId;
+
+    return (
+      <div
+        key={terminal.sessionId}
+        className={`terminal-pane ${isActive ? 'active' : ''}`}
+        onClick={() => handleClick(terminal.sessionId)}
+      >
+        <div className="pane-header">
+          <span className={`pane-status ${terminal.status}`} />
+          <span className="pane-title">{terminal.worktreeName}</span>
+        </div>
+        <div className="pane-terminal">
+          <XTerminal
+            sessionId={terminal.sessionId}
+            worktreePath={terminal.worktreePath}
+            isActive={isActive}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  // Render split grid view
+  if (terminals.length === 0) {
+    return (
+      <div className="terminal-grid-container">
+        <div className="empty-grid-message">
+          <p>No active sessions</p>
+          <p>Use the Setup wizard or click "+ Add Session" in the sidebar</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="terminal-grid-container scrollable">
+      <div className="terminal-grid cols-2">
+        {terminals.map(terminal => renderPane(terminal))}
+      </div>
+    </div>
+  );
+}
+
+export default SplitTerminalView;

package/web/src/components/Terminal/TerminalPanel.tsx

@@ -1,52 +1,18 @@
 import React from 'react';
 import { useAppStore } from '../../stores/useAppStore.js';
-import { useSocket } from '../../hooks/useSocket.js';
-import XTerminal from './XTerminal.js';
+import SplitTerminalView from './SplitTerminalView.js';
 
 function TerminalPanel() {
   const {
     terminals,
-    activeTerminalIndex,
-    activeSessionId,
-    setActiveSession,
-    removeTerminal,
-    clearAllTerminals,
     openModal,
   } = useAppStore();
-  const { emit } = useSocket();
-
-  const handleCloseTerminal = async (sessionId: string, e: React.MouseEvent) => {
-    e.stopPropagation();
-
-    // Kill the terminal via socket
-    emit('terminal:kill', { sessionId });
-
-    // Find the worktree name to delete
-    const terminal = terminals.find(t => t.sessionId === sessionId);
-    if (terminal) {
-      try {
-        await fetch(`/api/worktrees/${terminal.worktreeName}`, {
-          method: 'DELETE',
-        });
-      } catch (error) {
-        console.error('Failed to delete worktree:', error);
-      }
-    }
-
-    removeTerminal(sessionId);
-  };
 
   const handleCloseAll = () => {
     const sessionIds = terminals.map(t => t.sessionId);
     openModal('confirmDelete', { sessionIds });
   };
 
-  // Find active index based on sessionId
-  const currentActiveIndex = activeSessionId
-    ? terminals.findIndex(t => t.sessionId === activeSessionId)
-    : activeTerminalIndex;
-  const effectiveActiveIndex = currentActiveIndex >= 0 ? currentActiveIndex : 0;
-
   if (terminals.length === 0) {
     return (
       <div className="terminal-panel empty">
@@ -60,25 +26,7 @@ function TerminalPanel() {
 
   return (
     <div className="terminal-panel">
-      <div className="terminal-tabs">
-        {terminals.map((terminal, index) => (
-          <button
-            key={terminal.sessionId}
-            className={`terminal-tab ${terminal.sessionId === activeSessionId || index === effectiveActiveIndex ? 'active' : ''}`}
-            onClick={() => setActiveSession(terminal.sessionId)}
-          >
-            <span className={`status ${terminal.status}`} />
-            <span>{terminal.worktreeName}</span>
-            <button
-              className="close-btn"
-              onClick={(e) => handleCloseTerminal(terminal.sessionId, e)}
-              title="Close terminal"
-            >
-              &times;
-            </button>
-          </button>
-        ))}
-
+      <div className="terminal-header">
         <div className="terminal-actions">
           <button className="danger" onClick={handleCloseAll}>
             Close All
@@ -86,21 +34,7 @@ function TerminalPanel() {
         </div>
       </div>
 
-      <div className="terminal-container">
-        {terminals.map((terminal, index) => (
-          <div
-            key={terminal.sessionId}
-            className={`terminal-wrapper ${index !== effectiveActiveIndex ? 'hidden' : ''}`}
-          >
-            <XTerminal
-              sessionId={terminal.sessionId}
-              worktreePath={terminal.worktreePath}
-              agentType={terminal.agentType}
-              isActive={index === effectiveActiveIndex}
-            />
-          </div>
-        ))}
-      </div>
+      <SplitTerminalView />
     </div>
   );
 }

package/web/src/components/Terminal/XTerminal.tsx

@@ -1,19 +1,18 @@
-import React, { useEffect, useRef, useCallback } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
 import { useSocket } from '../../hooks/useSocket';
 import { useAppStore } from '../../stores/useAppStore';
-import type { AgentId, TerminalOutputData } from '../../../../shared/types/index';
+import type { TerminalOutputData } from '../../../../shared/types/index';
 import '@xterm/xterm/css/xterm.css';
 
 interface XTerminalProps {
   sessionId: string;
   worktreePath: string;
-  agentType: AgentId;
   isActive: boolean;
 }
 
-function XTerminal({ sessionId, worktreePath, agentType, isActive }: XTerminalProps) {
+function XTerminal({ sessionId, worktreePath, isActive }: XTerminalProps) {
   const terminalRef = useRef<HTMLDivElement>(null);
   const termRef = useRef<Terminal | null>(null);
   const fitAddonRef = useRef<FitAddon | null>(null);
@@ -129,7 +128,6 @@ function XTerminal({ sessionId, worktreePath, agentType, isActive }: XTerminalPr
     emit('terminal:create', {
       sessionId,
       worktreePath,
-      agentType,
     });
 
     // Send initial resize
@@ -148,7 +146,7 @@ function XTerminal({ sessionId, worktreePath, agentType, isActive }: XTerminalPr
       off('terminal:error', handleError);
       onDataDisposable.dispose();
     };
-  }, [sessionId, worktreePath, agentType, connected, emit, on, off, updateTerminalStatus]);
+  }, [sessionId, worktreePath, connected, emit, on, off, updateTerminalStatus]);
 
   // Handle resize
   useEffect(() => {

package/web/src/stores/useAppStore.ts

@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import type { Branch, TerminalInfo, AgentId, AgentStatus, NavigationStep, StepStatus, ModalType, SessionGroup } from '../../../shared/types/index.js';
+import type { Branch, TerminalInfo, TerminalStatus, NavigationStep, StepStatus, ModalType, SessionGroup } from '../../../shared/types/index.js';
 import { STEP_ORDER } from '../../../shared/types/index.js';
 import { DEFAULT_PARALLEL_COUNT, MIN_PARALLEL_COUNT, MAX_PARALLEL_COUNT } from '../../../shared/constants.js';
 
@@ -21,9 +21,6 @@ interface AppState {
   branches: Branch[];
   selectedBranch: string | null;
 
-  // Agent selection
-  selectedAgent: AgentId;
-
   // Worktree count
   worktreeCount: number;
 
@@ -31,15 +28,15 @@ interface AppState {
   terminals: TerminalInfo[];
   activeTerminalIndex: number;
 
-  // Session management (new)
+  // Session management
   activeSessionId: string | null;
   selectedSessionIds: string[];
 
-  // LNB state (new)
+  // LNB state
   isSetupCollapsed: boolean;
   collapsedBranches: string[];
 
-  // Modal state (new)
+  // Modal state
   modalType: ModalType;
   modalData: { sessionIds?: string[]; branchName?: string } | null;
 
@@ -70,9 +67,6 @@ interface AppActions {
   setSelectedBranch: (branch: string | null) => void;
   fetchBranches: () => Promise<void>;
 
-  // Agent selection
-  setSelectedAgent: (agent: AgentId) => void;
-
   // Worktree count
   setWorktreeCount: (count: number) => void;
   incrementWorktreeCount: () => void;
@@ -80,12 +74,12 @@ interface AppActions {
 
   // Terminals
   addTerminal: (terminal: TerminalInfo) => void;
-  updateTerminalStatus: (sessionId: string, status: AgentStatus) => void;
+  updateTerminalStatus: (sessionId: string, status: TerminalStatus) => void;
   removeTerminal: (sessionId: string) => void;
   setActiveTerminal: (index: number) => void;
   clearAllTerminals: () => void;
 
-  // Session management (new)
+  // Session management
   setActiveSession: (sessionId: string | null) => void;
   toggleSessionSelection: (sessionId: string) => void;
   selectAllSessions: () => void;
@@ -93,16 +87,19 @@ interface AppActions {
   removeSelectedSessions: () => Promise<void>;
   getSessionGroups: () => SessionGroup[];
 
-  // LNB state (new)
+  // LNB state
   toggleSetupCollapse: () => void;
   toggleBranchCollapse: (branchName: string) => void;
 
-  // Modal (new)
+  // Modal
   openModal: (type: ModalType, data?: { sessionIds?: string[]; branchName?: string }) => void;
   closeModal: () => void;
 
-  // Single worktree creation (new)
-  createSingleWorktree: (branch: string, agentType: AgentId) => Promise<void>;
+  // Single worktree creation
+  createSingleWorktree: (branch: string) => Promise<void>;
+
+  // Restore existing worktrees on page load
+  restoreExistingWorktrees: () => Promise<void>;
 
   // Execute
   execute: () => Promise<void>;
@@ -125,7 +122,6 @@ const initialState: AppState = {
   projectInfo: null,
   branches: [],
   selectedBranch: null,
-  selectedAgent: 'claude',
   worktreeCount: DEFAULT_PARALLEL_COUNT,
   terminals: [],
   activeTerminalIndex: 0,
@@ -206,13 +202,11 @@ export const useAppStore = create<AppStore>((set, get) => ({
   },
 
   isStepComplete: (checkStep) => {
-    const { selectedBranch, selectedAgent, worktreeCount, terminals } = get();
+    const { selectedBranch, worktreeCount, terminals } = get();
 
     switch (checkStep) {
       case 'branch':
         return selectedBranch !== null;
-      case 'agent':
-        return selectedAgent !== null;
       case 'worktree':
         return worktreeCount >= MIN_PARALLEL_COUNT;
       case 'running':
@@ -268,9 +262,6 @@ export const useAppStore = create<AppStore>((set, get) => ({
     }
   },
 
-  // Agent selection
-  setSelectedAgent: (agent) => set({ selectedAgent: agent }),
-
   // Worktree count
   setWorktreeCount: (count) => set({
     worktreeCount: Math.max(MIN_PARALLEL_COUNT, Math.min(MAX_PARALLEL_COUNT, count))
@@ -291,9 +282,13 @@ export const useAppStore = create<AppStore>((set, get) => ({
   },
 
   // Terminals
-  addTerminal: (terminal) => set((state) => ({
-    terminals: [...state.terminals, terminal]
-  })),
+  addTerminal: (terminal) => set((state) => {
+    // 이미 같은 sessionId가 있으면 무시
+    if (state.terminals.some(t => t.sessionId === terminal.sessionId)) {
+      return state;
+    }
+    return { terminals: [...state.terminals, terminal] };
+  }),
 
   updateTerminalStatus: (sessionId, status) => set((state) => ({
     terminals: state.terminals.map((t) =>
@@ -426,7 +421,7 @@ export const useAppStore = create<AppStore>((set, get) => ({
   closeModal: () => set({ modalType: null, modalData: null }),
 
   // Single worktree creation
-  createSingleWorktree: async (branch, agentType) => {
+  createSingleWorktree: async (branch) => {
     const { setLoading, setError, addTerminal, setActiveSession } = get();
 
     setLoading(true, 'Creating worktree...');
@@ -436,7 +431,7 @@ export const useAppStore = create<AppStore>((set, get) => ({
       const response = await fetch('/api/worktrees/single', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ branch, agentType }),
+        body: JSON.stringify({ branch }),
       });
 
       if (!response.ok) {
@@ -445,14 +440,13 @@ export const useAppStore = create<AppStore>((set, get) => ({
       }
 
       const { worktree } = await response.json();
-      const sessionId = `${worktree.name}-${Date.now()}`;
+      const sessionId = worktree.name;
 
       addTerminal({
         sessionId,
         worktreePath: worktree.path,
         worktreeName: worktree.name,
         branchName: worktree.branch,
-        agentType,
         status: 'initializing',
       });
 
@@ -473,9 +467,59 @@ export const useAppStore = create<AppStore>((set, get) => ({
     }
   },
 
+  // Restore existing worktrees on page load
+  restoreExistingWorktrees: async () => {
+    const { terminals } = get();
+
+    // 이미 터미널이 복구되어 있으면 실행하지 않음
+    if (terminals.length > 0) {
+      return;
+    }
+
+    try {
+      const response = await fetch('/api/worktrees');
+      if (!response.ok) return;
+
+      const worktrees = await response.json();
+
+      // Filter to only project worktrees (exclude main worktree)
+      const projectWorktrees = worktrees.filter(
+        (wt: { isMainWorktree: boolean; name: string }) =>
+          !wt.isMainWorktree && wt.name.includes('-project-')
+      );
+
+      if (projectWorktrees.length === 0) return;
+
+      const { addTerminal } = get();
+
+      // Restore terminals for each project worktree
+      for (const wt of projectWorktrees) {
+        addTerminal({
+          sessionId: wt.name,
+          worktreePath: wt.path,
+          worktreeName: wt.name,
+          branchName: wt.branch,
+          status: 'running',
+        });
+      }
+
+      // Transition to running state
+      set({
+        step: 'running',
+        completedSteps: ['branch', 'worktree'],
+        isSetupCollapsed: true,
+        activeSessionId: projectWorktrees[0].name,
+      });
+
+      console.log(`Restored ${projectWorktrees.length} worktree sessions`);
+    } catch (error) {
+      console.error('Failed to restore worktrees:', error);
+    }
+  },
+
   // Execute
   execute: async () => {
-    const { selectedBranch, worktreeCount, selectedAgent, setLoading, setError, setStep, addTerminal } = get();
+    const { selectedBranch, worktreeCount, setLoading, setError, addTerminal } = get();
 
     if (!selectedBranch) {
       setError('Please select a branch');
@@ -492,7 +536,6 @@ export const useAppStore = create<AppStore>((set, get) => ({
         body: JSON.stringify({
           branch: selectedBranch,
           count: worktreeCount,
-          agentType: selectedAgent,
         }),
       });
 
@@ -505,13 +548,12 @@ export const useAppStore = create<AppStore>((set, get) => ({
 
       // Create terminal info for each worktree
       for (const worktree of worktrees) {
-        const sessionId = `${worktree.name}-${Date.now()}`;
+        const sessionId = worktree.name;
         addTerminal({
           sessionId,
           worktreePath: worktree.path,
           worktreeName: worktree.name,
           branchName: worktree.branch,
-          agentType: selectedAgent,
           status: 'initializing',
         });
       }
@@ -520,7 +562,7 @@ export const useAppStore = create<AppStore>((set, get) => ({
       const { terminals: updatedTerminals } = get();
       set({
         step: 'running',
-        completedSteps: ['branch', 'agent', 'worktree'],
+        completedSteps: ['branch', 'worktree'],
         isSetupCollapsed: true,
         activeSessionId: updatedTerminals.length > 0 ? updatedTerminals[0].sessionId : null,
       });

package/web/src/styles/global.css

@@ -169,42 +169,6 @@ body {
   text-align: center;
 }
 
-/* Agent cards */
-.agent-cards {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-}
-
-.agent-card {
-  padding: 16px;
-  border: 2px solid var(--border-color);
-  border-radius: 8px;
-  background-color: var(--bg-tertiary);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.agent-card:hover {
-  border-color: var(--accent-blue);
-}
-
-.agent-card.selected {
-  border-color: var(--accent-blue);
-  background-color: rgba(88, 166, 255, 0.1);
-}
-
-.agent-card h4 {
-  font-size: 14px;
-  font-weight: 600;
-  margin-bottom: 4px;
-}
-
-.agent-card p {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
 /* Execute button */
 .execute-button {
   padding: 14px 48px;
@@ -852,15 +816,6 @@ body {
   white-space: nowrap;
 }
 
-.session-agent {
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--text-muted);
-  background-color: var(--bg-tertiary);
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-
 .session-close {
   padding: 2px 6px;
   background: transparent;
@@ -1059,38 +1014,6 @@ body {
   border-color: var(--accent-blue);
 }
 
-/* Agent Options in Modal */
-.agent-options {
-  display: flex;
-  gap: 8px;
-}
-
-.agent-option {
-  flex: 1;
-  padding: 12px;
-  background-color: var(--bg-tertiary);
-  border: 2px solid var(--border-color);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s;
-  text-align: center;
-}
-
-.agent-option:hover {
-  border-color: var(--accent-blue);
-}
-
-.agent-option.selected {
-  border-color: var(--accent-blue);
-  background-color: rgba(88, 166, 255, 0.1);
-}
-
-.agent-option .agent-name {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
 /* Modal Buttons */
 .btn-primary {
   padding: 10px 20px;
@@ -1215,3 +1138,130 @@ body {
   font-size: 16px;
   color: var(--text-secondary);
 }
+
+/* ========================================
+   Split Terminal View Styles
+   ======================================== */
+
+/* Terminal Header for Split View */
+.terminal-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  background-color: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+/* Split Terminal Grid Container */
+.terminal-grid-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 8px;
+  background-color: var(--bg-primary);
+}
+
+.terminal-grid-container.scrollable {
+  overflow-y: auto;
+}
+
+/* Terminal Grid */
+.terminal-grid {
+  flex: 1;
+  display: grid;
+  gap: 8px;
+  min-height: 0;
+}
+
+/* Grid layout - fixed 2 columns */
+.terminal-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
+
+/* Scrollable grid for many sessions */
+.terminal-grid-container.scrollable .terminal-grid {
+  grid-auto-rows: minmax(350px, 1fr);
+}
+
+/* Terminal Pane */
+.terminal-pane {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border: 2px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: var(--bg-primary);
+  min-height: 300px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.terminal-pane:hover {
+  border-color: var(--text-muted);
+}
+
+.terminal-pane.active {
+  border-color: var(--accent-green);
+}
+
+
+/* Pane Header */
+.pane-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background-color: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  min-height: 32px;
+}
+
+.pane-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.pane-status.running { background-color: var(--accent-green); }
+.pane-status.initializing { background-color: var(--accent-yellow); }
+.pane-status.stopped { background-color: var(--text-muted); }
+.pane-status.error { background-color: var(--accent-red); }
+
+.pane-title {
+  flex: 1;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Pane Terminal Container */
+.pane-terminal {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.pane-terminal .terminal {
+  height: 100%;
+  width: 100%;
+  padding: 4px;
+}
+
+/* Empty Grid Message */
+.empty-grid-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-muted);
+  gap: 16px;
+}
+
+.empty-grid-message p {
+  font-size: 14px;
+}