hjworktree-cli 2.0.0 → 2.2.0

package/web/src/components/Layout/LeftNavBar.tsx

@@ -1,6 +1,14 @@
 import React from 'react';
 import { useAppStore } from '../../stores/useAppStore.js';
-import type { NavigationStep, StepStatus } from '../../../../shared/types/index.js';
+import type { NavigationStep, StepStatus, AgentStatus } from '../../../../shared/types/index.js';
+import { AI_AGENTS } from '../../../../shared/constants.js';
+
+// Step configuration
+const STEP_CONFIG = [
+  { id: 'branch' as const, number: 1, label: 'Branch' },
+  { id: 'agent' as const, number: 2, label: 'Agent' },
+  { id: 'worktree' as const, number: 3, label: 'Count' },
+];
 
 interface StepItemProps {
   step: NavigationStep;
@@ -11,13 +19,6 @@ interface StepItemProps {
   disabled: boolean;
 }
 
-const STEP_CONFIG = [
-  { id: 'branch' as const, number: 1, label: 'Branch Selection' },
-  { id: 'agent' as const, number: 2, label: 'Agent Selection' },
-  { id: 'worktree' as const, number: 3, label: 'Worktree Count' },
-  { id: 'running' as const, number: 4, label: 'Running' },
-];
-
 function StepItem({ number, label, status, onClick, disabled }: StepItemProps) {
   return (
     <button
@@ -34,32 +35,295 @@ function StepItem({ number, label, status, onClick, disabled }: StepItemProps) {
   );
 }
 
-function LeftNavBar() {
-  const { step, goToStep, canNavigateTo, getStepStatus } = useAppStore();
+// Setup Section Component
+function SetupSection() {
+  const {
+    step,
+    goToStep,
+    canNavigateTo,
+    getStepStatus,
+    isSetupCollapsed,
+    toggleSetupCollapse,
+    terminals,
+  } = useAppStore();
+
+  const hasRunningTerminals = terminals.length > 0;
+
+  return (
+    <div className="lnb-section setup-section">
+      <div
+        className="lnb-section-header"
+        onClick={toggleSetupCollapse}
+        role="button"
+        tabIndex={0}
+      >
+        <span className="section-title">SETUP</span>
+        <span className="collapse-icon">{isSetupCollapsed ? '+' : '−'}</span>
+      </div>
+      {!isSetupCollapsed && (
+        <div className="lnb-steps">
+          {STEP_CONFIG.map((config) => (
+            <StepItem
+              key={config.id}
+              step={config.id}
+              number={config.number}
+              label={config.label}
+              status={getStepStatus(config.id)}
+              onClick={() => goToStep(config.id)}
+              disabled={!canNavigateTo(config.id)}
+            />
+          ))}
+          {hasRunningTerminals && (
+            <button
+              className={`lnb-step ${step === 'running' ? 'current' : 'completed'}`}
+              onClick={() => goToStep('running')}
+              type="button"
+            >
+              <span className="step-number">4</span>
+              <span className="step-label">Running</span>
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Status indicator component
+function StatusIndicator({ status }: { status: AgentStatus }) {
+  const statusColors: Record<AgentStatus, string> = {
+    initializing: '#f59e0b',
+    installing: '#f59e0b',
+    running: '#22c55e',
+    stopped: '#6b7280',
+    error: '#ef4444',
+  };
+
+  return (
+    <span
+      className="status-indicator"
+      style={{ backgroundColor: statusColors[status] }}
+      title={status}
+    />
+  );
+}
+
+// Session Item Component
+interface SessionItemProps {
+  sessionId: string;
+  worktreeName: string;
+  agentType: string;
+  status: AgentStatus;
+  isActive: boolean;
+  isSelected: boolean;
+  onSelect: () => void;
+  onToggleSelect: (e: React.MouseEvent) => void;
+  onClose: (e: React.MouseEvent) => void;
+}
+
+function SessionItem({
+  sessionId,
+  worktreeName,
+  agentType,
+  status,
+  isActive,
+  isSelected,
+  onSelect,
+  onToggleSelect,
+  onClose,
+}: SessionItemProps) {
+  const agent = AI_AGENTS.find(a => a.id === agentType);
+
+  return (
+    <div
+      className={`session-item ${isActive ? 'active' : ''} ${isSelected ? 'selected' : ''}`}
+      onClick={onSelect}
+      role="button"
+      tabIndex={0}
+    >
+      <input
+        type="checkbox"
+        className="session-checkbox"
+        checked={isSelected}
+        onClick={onToggleSelect}
+        onChange={() => {}}
+      />
+      <StatusIndicator status={status} />
+      <span className="session-name" title={worktreeName}>
+        {worktreeName}
+      </span>
+      <span className="session-agent" title={agent?.name}>
+        {agentType.charAt(0).toUpperCase()}
+      </span>
+      <button
+        className="session-close"
+        onClick={onClose}
+        title="Close session"
+        type="button"
+      >
+        ×
+      </button>
+    </div>
+  );
+}
 
-  // Don't show LNB on running step
-  if (step === 'running') {
+// Session Group Component
+interface SessionGroupProps {
+  branchName: string;
+  sessionCount: number;
+  isCollapsed: boolean;
+  onToggleCollapse: () => void;
+  children: React.ReactNode;
+}
+
+function SessionGroup({
+  branchName,
+  sessionCount,
+  isCollapsed,
+  onToggleCollapse,
+  children,
+}: SessionGroupProps) {
+  return (
+    <div className="session-group">
+      <div
+        className="session-group-header"
+        onClick={onToggleCollapse}
+        role="button"
+        tabIndex={0}
+      >
+        <span className="group-collapse-icon">{isCollapsed ? '▶' : '▼'}</span>
+        <span className="group-name">{branchName}</span>
+        <span className="group-count">({sessionCount})</span>
+      </div>
+      {!isCollapsed && <div className="session-group-items">{children}</div>}
+    </div>
+  );
+}
+
+// Sessions Section Component
+function SessionsSection() {
+  const {
+    terminals,
+    activeSessionId,
+    selectedSessionIds,
+    getSessionGroups,
+    setActiveSession,
+    toggleSessionSelection,
+    toggleBranchCollapse,
+    removeTerminal,
+    openModal,
+  } = useAppStore();
+
+  const sessionGroups = getSessionGroups();
+
+  const handleCloseSession = async (e: React.MouseEvent, sessionId: string, worktreeName: string) => {
+    e.stopPropagation();
+
+    try {
+      const response = await fetch(`/api/worktrees/${encodeURIComponent(worktreeName)}`, {
+        method: 'DELETE',
+      });
+
+      if (response.ok) {
+        removeTerminal(sessionId);
+      }
+    } catch (error) {
+      console.error('Failed to close session:', error);
+    }
+  };
+
+  if (terminals.length === 0) {
     return null;
   }
 
   return (
-    <nav className="left-nav-bar">
-      <div className="lnb-header">
-        <span>Setup Steps</span>
+    <div className="lnb-section sessions-section">
+      <div className="lnb-section-header">
+        <span className="section-title">SESSIONS</span>
+        <span className="session-count">{terminals.length}</span>
       </div>
-      <div className="lnb-steps">
-        {STEP_CONFIG.map((config) => (
-          <StepItem
-            key={config.id}
-            step={config.id}
-            number={config.number}
-            label={config.label}
-            status={getStepStatus(config.id)}
-            onClick={() => goToStep(config.id)}
-            disabled={!canNavigateTo(config.id)}
-          />
+      <div className="session-list">
+        {sessionGroups.map((group) => (
+          <SessionGroup
+            key={group.branchName}
+            branchName={group.branchName}
+            sessionCount={group.sessions.length}
+            isCollapsed={group.isCollapsed}
+            onToggleCollapse={() => toggleBranchCollapse(group.branchName)}
+          >
+            {group.sessions.map((session) => (
+              <SessionItem
+                key={session.sessionId}
+                sessionId={session.sessionId}
+                worktreeName={session.worktreeName}
+                agentType={session.agentType}
+                status={session.status}
+                isActive={session.sessionId === activeSessionId}
+                isSelected={selectedSessionIds.includes(session.sessionId)}
+                onSelect={() => setActiveSession(session.sessionId)}
+                onToggleSelect={(e) => {
+                  e.stopPropagation();
+                  toggleSessionSelection(session.sessionId);
+                }}
+                onClose={(e) => handleCloseSession(e, session.sessionId, session.worktreeName)}
+              />
+            ))}
+          </SessionGroup>
         ))}
       </div>
+      <button
+        className="add-session-btn"
+        onClick={() => openModal('addWorktree')}
+        type="button"
+      >
+        + Add Session
+      </button>
+    </div>
+  );
+}
+
+// Bulk Actions Bar Component
+function BulkActionsBar() {
+  const {
+    selectedSessionIds,
+    clearSessionSelection,
+    openModal,
+  } = useAppStore();
+
+  if (selectedSessionIds.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="bulk-actions-bar">
+      <span className="selected-count">
+        {selectedSessionIds.length} selected
+      </span>
+      <button
+        className="bulk-delete-btn"
+        onClick={() => openModal('confirmDelete', { sessionIds: selectedSessionIds })}
+        type="button"
+      >
+        Delete
+      </button>
+      <button
+        className="bulk-cancel-btn"
+        onClick={clearSessionSelection}
+        type="button"
+      >
+        Cancel
+      </button>
+    </div>
+  );
+}
+
+// Main LeftNavBar Component
+function LeftNavBar() {
+  return (
+    <nav className="left-nav-bar">
+      <SetupSection />
+      <SessionsSection />
+      <BulkActionsBar />
     </nav>
   );
 }

package/web/src/components/Layout/MainLayout.tsx

@@ -1,19 +1,15 @@
 import React from 'react';
 import LeftNavBar from './LeftNavBar.js';
-import { useAppStore } from '../../stores/useAppStore.js';
 
 interface MainLayoutProps {
   children: React.ReactNode;
 }
 
 function MainLayout({ children }: MainLayoutProps) {
-  const step = useAppStore((state) => state.step);
-  const showLNB = step !== 'running';
-
   return (
     <div className="main-layout">
-      {showLNB && <LeftNavBar />}
-      <div className={`main-content-area ${showLNB ? 'with-lnb' : 'full-width'}`}>
+      <LeftNavBar />
+      <div className="main-content-area with-lnb">
         {children}
       </div>
     </div>

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

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import { useAppStore } from '../../stores/useAppStore.js';
+import { AI_AGENTS } from '../../../../shared/constants.js';
+import type { AgentId } from '../../../../shared/types/index.js';
+
+function AddWorktreeModal() {
+  const { branches, closeModal, createSingleWorktree, isLoading } = useAppStore();
+  const [selectedBranch, setSelectedBranch] = useState<string>('');
+  const [selectedAgent, setSelectedAgent] = useState<AgentId>('claude');
+
+  const handleCreate = async () => {
+    if (!selectedBranch) return;
+    await createSingleWorktree(selectedBranch, selectedAgent);
+  };
+
+  return (
+    <div className="modal-overlay" onClick={closeModal}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2>Add New Session</h2>
+          <button className="modal-close" onClick={closeModal} type="button">
+            &times;
+          </button>
+        </div>
+
+        <div className="modal-body">
+          <div className="form-group">
+            <label htmlFor="branch-select">Branch</label>
+            <select
+              id="branch-select"
+              value={selectedBranch}
+              onChange={(e) => setSelectedBranch(e.target.value)}
+              disabled={isLoading}
+            >
+              <option value="">Select a branch...</option>
+              {branches.map((branch) => (
+                <option key={branch.name} value={branch.name}>
+                  {branch.name}
+                  {branch.isCurrent ? ' (current)' : ''}
+                  {branch.isRemote ? ' (remote)' : ''}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="form-group">
+            <label>Agent</label>
+            <div className="agent-options">
+              {AI_AGENTS.map((agent) => (
+                <button
+                  key={agent.id}
+                  type="button"
+                  className={`agent-option ${selectedAgent === agent.id ? 'selected' : ''}`}
+                  onClick={() => setSelectedAgent(agent.id)}
+                  disabled={isLoading}
+                >
+                  <span className="agent-name">{agent.name}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="modal-footer">
+          <button
+            type="button"
+            className="btn-secondary"
+            onClick={closeModal}
+            disabled={isLoading}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="btn-primary"
+            onClick={handleCreate}
+            disabled={!selectedBranch || isLoading}
+          >
+            {isLoading ? 'Creating...' : 'Create Session'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AddWorktreeModal;

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>
         ))}