hjworktree-cli 2.0.0 → 2.1.0

package/web/src/components/Modals/ConfirmDeleteModal.tsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { useAppStore } from '../../stores/useAppStore.js';
+import { useSocket } from '../../hooks/useSocket.js';
+
+function ConfirmDeleteModal() {
+  const {
+    modalData,
+    terminals,
+    closeModal,
+    removeTerminal,
+    clearAllTerminals,
+    clearSessionSelection,
+  } = useAppStore();
+  const { emit } = useSocket();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const sessionIds = modalData?.sessionIds || [];
+  const sessionsToDelete = terminals.filter(t => sessionIds.includes(t.sessionId));
+  const isDeleteAll = sessionIds.length === terminals.length;
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+
+    try {
+      // Kill all terminals via socket
+      for (const sessionId of sessionIds) {
+        emit('terminal:kill', { sessionId });
+      }
+
+      if (isDeleteAll) {
+        // Delete all worktrees
+        await fetch('/api/worktrees', { method: 'DELETE' });
+        clearAllTerminals();
+      } else {
+        // Batch delete specific worktrees
+        const names = sessionsToDelete.map(t => t.worktreeName);
+        await fetch('/api/worktrees/batch', {
+          method: 'DELETE',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ names }),
+        });
+
+        // Remove terminals from state
+        for (const sessionId of sessionIds) {
+          removeTerminal(sessionId);
+        }
+      }
+
+      clearSessionSelection();
+      closeModal();
+    } catch (error) {
+      console.error('Failed to delete sessions:', error);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <div className="modal-overlay" onClick={closeModal}>
+      <div className="modal-content modal-confirm" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2>Confirm Delete</h2>
+          <button className="modal-close" onClick={closeModal} type="button">
+            &times;
+          </button>
+        </div>
+
+        <div className="modal-body">
+          <p className="confirm-message">
+            {isDeleteAll
+              ? 'Are you sure you want to delete ALL sessions?'
+              : `Are you sure you want to delete ${sessionIds.length} session${sessionIds.length > 1 ? 's' : ''}?`}
+          </p>
+
+          {sessionsToDelete.length > 0 && (
+            <ul className="delete-list">
+              {sessionsToDelete.map((session) => (
+                <li key={session.sessionId}>
+                  <span className={`status ${session.status}`} />
+                  {session.worktreeName}
+                </li>
+              ))}
+            </ul>
+          )}
+
+          <p className="warning-text">
+            This action will terminate running agents and delete the worktrees. This cannot be undone.
+          </p>
+        </div>
+
+        <div className="modal-footer">
+          <button
+            type="button"
+            className="btn-secondary"
+            onClick={closeModal}
+            disabled={isDeleting}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="btn-danger"
+            onClick={handleDelete}
+            disabled={isDeleting}
+          >
+            {isDeleting ? 'Deleting...' : 'Delete'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ConfirmDeleteModal;

package/web/src/components/Modals/ModalContainer.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useAppStore } from '../../stores/useAppStore.js';
+import AddWorktreeModal from './AddWorktreeModal.js';
+import ConfirmDeleteModal from './ConfirmDeleteModal.js';
+
+function ModalContainer() {
+  const modalType = useAppStore((state) => state.modalType);
+
+  if (!modalType) return null;
+
+  switch (modalType) {
+    case 'addWorktree':
+      return <AddWorktreeModal />;
+    case 'confirmDelete':
+      return <ConfirmDeleteModal />;
+    default:
+      return null;
+  }
+}
+
+export default ModalContainer;

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

@@ -4,7 +4,15 @@ import { useSocket } from '../../hooks/useSocket.js';
 import XTerminal from './XTerminal.js';
 
 function TerminalPanel() {
-  const { terminals, activeTerminalIndex, setActiveTerminal, removeTerminal, clearAllTerminals, reset } = useAppStore();
+  const {
+    terminals,
+    activeTerminalIndex,
+    activeSessionId,
+    setActiveSession,
+    removeTerminal,
+    clearAllTerminals,
+    openModal,
+  } = useAppStore();
   const { emit } = useSocket();
 
   const handleCloseTerminal = async (sessionId: string, e: React.MouseEvent) => {
@@ -28,37 +36,27 @@ function TerminalPanel() {
     removeTerminal(sessionId);
   };
 
-  const handleCloseAll = async () => {
-    // Kill all terminals via socket
-    for (const terminal of terminals) {
-      emit('terminal:kill', { sessionId: terminal.sessionId });
-    }
-
-    // Delete all worktrees
-    try {
-      await fetch('/api/worktrees', {
-        method: 'DELETE',
-      });
-    } catch (error) {
-      console.error('Failed to delete worktrees:', error);
-    }
-
-    clearAllTerminals();
-    reset();
+  const handleCloseAll = () => {
+    const sessionIds = terminals.map(t => t.sessionId);
+    openModal('confirmDelete', { sessionIds });
   };
 
-  const handleBackToSetup = () => {
-    if (terminals.length > 0) {
-      const confirmed = window.confirm(
-        'This will terminate all running agents and delete all worktrees. Are you sure you want to go back to setup?'
-      );
-      if (confirmed) {
-        handleCloseAll();
-      }
-    } else {
-      reset();
-    }
-  };
+  // 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">
+        <div className="empty-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-panel">
@@ -66,8 +64,8 @@ function TerminalPanel() {
         {terminals.map((terminal, index) => (
           <button
             key={terminal.sessionId}
-            className={`terminal-tab ${index === activeTerminalIndex ? 'active' : ''}`}
-            onClick={() => setActiveTerminal(index)}
+            className={`terminal-tab ${terminal.sessionId === activeSessionId || index === effectiveActiveIndex ? 'active' : ''}`}
+            onClick={() => setActiveSession(terminal.sessionId)}
           >
             <span className={`status ${terminal.status}`} />
             <span>{terminal.worktreeName}</span>
@@ -82,9 +80,6 @@ function TerminalPanel() {
         ))}
 
         <div className="terminal-actions">
-          <button onClick={handleBackToSetup}>
-            Back to Setup
-          </button>
           <button className="danger" onClick={handleCloseAll}>
             Close All
           </button>
@@ -95,13 +90,13 @@ function TerminalPanel() {
         {terminals.map((terminal, index) => (
           <div
             key={terminal.sessionId}
-            className={`terminal-wrapper ${index !== activeTerminalIndex ? 'hidden' : ''}`}
+            className={`terminal-wrapper ${index !== effectiveActiveIndex ? 'hidden' : ''}`}
           >
             <XTerminal
               sessionId={terminal.sessionId}
               worktreePath={terminal.worktreePath}
               agentType={terminal.agentType}
-              isActive={index === activeTerminalIndex}
+              isActive={index === effectiveActiveIndex}
             />
           </div>
         ))}

package/web/src/stores/useAppStore.ts

@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import type { Branch, TerminalInfo, AgentId, AgentStatus, NavigationStep, StepStatus } from '../../../shared/types/index.js';
+import type { Branch, TerminalInfo, AgentId, AgentStatus, 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';
 
@@ -31,6 +31,18 @@ interface AppState {
   terminals: TerminalInfo[];
   activeTerminalIndex: number;
 
+  // Session management (new)
+  activeSessionId: string | null;
+  selectedSessionIds: string[];
+
+  // LNB state (new)
+  isSetupCollapsed: boolean;
+  collapsedBranches: string[];
+
+  // Modal state (new)
+  modalType: ModalType;
+  modalData: { sessionIds?: string[]; branchName?: string } | null;
+
   // Loading states
   isLoading: boolean;
   loadingMessage: string;
@@ -73,6 +85,25 @@ interface AppActions {
   setActiveTerminal: (index: number) => void;
   clearAllTerminals: () => void;
 
+  // Session management (new)
+  setActiveSession: (sessionId: string | null) => void;
+  toggleSessionSelection: (sessionId: string) => void;
+  selectAllSessions: () => void;
+  clearSessionSelection: () => void;
+  removeSelectedSessions: () => Promise<void>;
+  getSessionGroups: () => SessionGroup[];
+
+  // LNB state (new)
+  toggleSetupCollapse: () => void;
+  toggleBranchCollapse: (branchName: string) => void;
+
+  // Modal (new)
+  openModal: (type: ModalType, data?: { sessionIds?: string[]; branchName?: string }) => void;
+  closeModal: () => void;
+
+  // Single worktree creation (new)
+  createSingleWorktree: (branch: string, agentType: AgentId) => Promise<void>;
+
   // Execute
   execute: () => Promise<void>;
 
@@ -98,6 +129,12 @@ const initialState: AppState = {
   worktreeCount: DEFAULT_PARALLEL_COUNT,
   terminals: [],
   activeTerminalIndex: 0,
+  activeSessionId: null,
+  selectedSessionIds: [],
+  isSetupCollapsed: false,
+  collapsedBranches: [],
+  modalType: null,
+  modalData: null,
   isLoading: false,
   loadingMessage: '',
   error: null,
@@ -277,7 +314,164 @@ export const useAppStore = create<AppStore>((set, get) => ({
 
   setActiveTerminal: (index) => set({ activeTerminalIndex: index }),
 
-  clearAllTerminals: () => set({ terminals: [], activeTerminalIndex: 0 }),
+  clearAllTerminals: () => set({ terminals: [], activeTerminalIndex: 0, activeSessionId: null, selectedSessionIds: [] }),
+
+  // Session management
+  setActiveSession: (sessionId) => {
+    const { terminals } = get();
+    const index = terminals.findIndex(t => t.sessionId === sessionId);
+    set({
+      activeSessionId: sessionId,
+      activeTerminalIndex: index >= 0 ? index : 0,
+    });
+  },
+
+  toggleSessionSelection: (sessionId) => set((state) => {
+    const selectedIds = [...state.selectedSessionIds];
+    const index = selectedIds.indexOf(sessionId);
+    if (index >= 0) {
+      selectedIds.splice(index, 1);
+    } else {
+      selectedIds.push(sessionId);
+    }
+    return { selectedSessionIds: selectedIds };
+  }),
+
+  selectAllSessions: () => set((state) => ({
+    selectedSessionIds: state.terminals.map(t => t.sessionId),
+  })),
+
+  clearSessionSelection: () => set({ selectedSessionIds: [] }),
+
+  removeSelectedSessions: async () => {
+    const { selectedSessionIds, terminals } = get();
+    if (selectedSessionIds.length === 0) return;
+
+    const names = terminals
+      .filter(t => selectedSessionIds.includes(t.sessionId))
+      .map(t => t.worktreeName);
+
+    try {
+      const response = await fetch('/api/worktrees/batch', {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ names }),
+      });
+
+      if (response.ok) {
+        set((state) => {
+          const remainingTerminals = state.terminals.filter(
+            t => !selectedSessionIds.includes(t.sessionId)
+          );
+          return {
+            terminals: remainingTerminals,
+            selectedSessionIds: [],
+            activeTerminalIndex: Math.min(state.activeTerminalIndex, Math.max(0, remainingTerminals.length - 1)),
+            activeSessionId: remainingTerminals.length > 0 ? remainingTerminals[0].sessionId : null,
+          };
+        });
+      }
+    } catch (error) {
+      console.error('Failed to remove sessions:', error);
+    }
+  },
+
+  getSessionGroups: () => {
+    const { terminals, collapsedBranches } = get();
+    const groupMap = new Map<string, TerminalInfo[]>();
+
+    for (const terminal of terminals) {
+      // Extract base branch name from worktree branch (e.g., "main-project-1" -> "main")
+      const baseBranch = terminal.branchName.replace(/-project-\d+$/, '');
+      if (!groupMap.has(baseBranch)) {
+        groupMap.set(baseBranch, []);
+      }
+      groupMap.get(baseBranch)!.push(terminal);
+    }
+
+    const groups: SessionGroup[] = [];
+    for (const [branchName, sessions] of groupMap) {
+      groups.push({
+        branchName,
+        sessions: sessions.map(s => ({
+          ...s,
+          id: s.sessionId,
+          createdAt: Date.now(),
+        })),
+        isCollapsed: collapsedBranches.includes(branchName),
+      });
+    }
+
+    return groups.sort((a, b) => a.branchName.localeCompare(b.branchName));
+  },
+
+  // LNB state
+  toggleSetupCollapse: () => set((state) => ({
+    isSetupCollapsed: !state.isSetupCollapsed,
+  })),
+
+  toggleBranchCollapse: (branchName) => set((state) => {
+    const collapsed = [...state.collapsedBranches];
+    const index = collapsed.indexOf(branchName);
+    if (index >= 0) {
+      collapsed.splice(index, 1);
+    } else {
+      collapsed.push(branchName);
+    }
+    return { collapsedBranches: collapsed };
+  }),
+
+  // Modal
+  openModal: (type, data) => set({ modalType: type, modalData: data || null }),
+  closeModal: () => set({ modalType: null, modalData: null }),
+
+  // Single worktree creation
+  createSingleWorktree: async (branch, agentType) => {
+    const { setLoading, setError, addTerminal, setActiveSession } = get();
+
+    setLoading(true, 'Creating worktree...');
+    setError(null);
+
+    try {
+      const response = await fetch('/api/worktrees/single', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ branch, agentType }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Failed to create worktree');
+      }
+
+      const { worktree } = await response.json();
+      const sessionId = `${worktree.name}-${Date.now()}`;
+
+      addTerminal({
+        sessionId,
+        worktreePath: worktree.path,
+        worktreeName: worktree.name,
+        branchName: worktree.branch,
+        agentType,
+        status: 'initializing',
+      });
+
+      // Auto-switch to the new session
+      setActiveSession(sessionId);
+
+      // Auto-collapse setup and switch to running
+      set({
+        step: 'running',
+        isSetupCollapsed: true,
+        modalType: null,
+        modalData: null,
+      });
+    } catch (error) {
+      setError(error instanceof Error ? error.message : 'Unknown error');
+    } finally {
+      setLoading(false);
+    }
+  },
 
   // Execute
   execute: async () => {
@@ -323,9 +517,12 @@ export const useAppStore = create<AppStore>((set, get) => ({
       }
 
       // Mark all setup steps as complete and transition to running
+      const { terminals: updatedTerminals } = get();
       set({
         step: 'running',
-        completedSteps: ['branch', 'agent', 'worktree']
+        completedSteps: ['branch', 'agent', 'worktree'],
+        isSetupCollapsed: true,
+        activeSessionId: updatedTerminals.length > 0 ? updatedTerminals[0].sessionId : null,
       });
     } catch (error) {
       setError(error instanceof Error ? error.message : 'Unknown error');