hjworktree-cli 2.3.0 → 2.4.0

package/dist/web/assets/index-Dgl6wRHk.css

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+ * https://github.com/chjj/term.js
+ * @license MIT
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * Originally forked from (with the author's permission):
+ *   Fabrice Bellard's javascript vt100 for jslinux:
+ *   http://bellard.org/jslinux/
+ *   Copyright (c) 2011 Fabrice Bellard
+ *   The original design remains. The terminal itself
+ *   has been extended to include xterm CSI codes, among
+ *   other features.
+ */.xterm{cursor:text;position:relative;user-select:none;-ms-user-select:none;-webkit-user-select:none}.xterm.focus,.xterm:focus{outline:none}.xterm .xterm-helpers{position:absolute;top:0;z-index:5}.xterm .xterm-helper-textarea{padding:0;border:0;margin:0;position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}.xterm .composition-view{background:#000;color:#fff;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;overflow-y:scroll;cursor:default;position:absolute;right:0;left:0;top:0;bottom:0}.xterm .xterm-screen{position:relative}.xterm .xterm-screen canvas{position:absolute;left:0;top:0}.xterm .xterm-scroll-area{visibility:hidden}.xterm-char-measure-element{display:inline-block;visibility:hidden;position:absolute;top:0;left:-9999em;line-height:normal}.xterm.enable-mouse-events{cursor:default}.xterm.xterm-cursor-pointer,.xterm .xterm-cursor-pointer{cursor:pointer}.xterm.column-select.focus{cursor:crosshair}.xterm .xterm-accessibility:not(.debug),.xterm .xterm-message{position:absolute;left:0;top:0;bottom:0;right:0;z-index:10;color:transparent;pointer-events:none}.xterm .xterm-accessibility-tree:not(.debug) *::selection{color:transparent}.xterm .xterm-accessibility-tree{-webkit-user-select:text;user-select:text;white-space:pre}.xterm .live-region{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.xterm-dim{opacity:1!important}.xterm-underline-1{text-decoration:underline}.xterm-underline-2{text-decoration:double underline}.xterm-underline-3{text-decoration:wavy underline}.xterm-underline-4{text-decoration:dotted underline}.xterm-underline-5{text-decoration:dashed underline}.xterm-overline{text-decoration:overline}.xterm-overline.xterm-underline-1{text-decoration:overline underline}.xterm-overline.xterm-underline-2{text-decoration:overline double underline}.xterm-overline.xterm-underline-3{text-decoration:overline wavy underline}.xterm-overline.xterm-underline-4{text-decoration:overline dotted underline}.xterm-overline.xterm-underline-5{text-decoration:overline dashed underline}.xterm-strikethrough{text-decoration:line-through}.xterm-screen .xterm-decoration-container .xterm-decoration{z-index:6;position:absolute}.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer{z-index:7}.xterm-decoration-overview-ruler{z-index:8;position:absolute;top:0;right:0;pointer-events:none}.xterm-decoration-top{z-index:2;position:relative}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #21262d;--border-color: #30363d;--text-primary: #c9d1d9;--text-secondary: #8b949e;--text-muted: #6e7681;--accent-blue: #58a6ff;--accent-green: #3fb950;--accent-yellow: #d29922;--accent-red: #f85149;--accent-purple: #a371f7}html,body,#root{height:100%;width:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.5}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.header h1{font-size:18px;font-weight:600;color:var(--text-primary)}.header .project-info{display:flex;align-items:center;gap:12px;color:var(--text-secondary);font-size:13px}.header .project-info .branch{display:flex;align-items:center;gap:4px;color:var(--accent-green)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.setup-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:32px}.setup-panel h2{font-size:24px;font-weight:600;margin-bottom:8px}.setup-panel p{color:var(--text-secondary);font-size:14px}.setup-section{width:100%;max-width:500px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:20px}.setup-section label{display:block;font-size:14px;font-weight:500;margin-bottom:8px;color:var(--text-primary)}.setup-section select,.setup-section input{width:100%;padding:10px 12px;border:1px solid var(--border-color);border-radius:6px;background-color:var(--bg-tertiary);color:var(--text-primary);font-size:14px;font-family:inherit}.setup-section select:focus,.setup-section input:focus{outline:none;border-color:var(--accent-blue)}.setup-section .counter{display:flex;align-items:center;gap:16px}.setup-section .counter button{width:40px;height:40px;border:1px solid var(--border-color);border-radius:6px;background-color:var(--bg-tertiary);color:var(--text-primary);font-size:20px;cursor:pointer;transition:all .2s}.setup-section .counter button:hover{background-color:var(--bg-primary);border-color:var(--accent-blue)}.setup-section .counter button:disabled{opacity:.5;cursor:not-allowed}.setup-section .counter span{font-size:24px;font-weight:600;min-width:60px;text-align:center}.execute-button{padding:14px 48px;background-color:var(--accent-green);color:var(--bg-primary);border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.execute-button:hover{filter:brightness(1.1)}.execute-button:disabled{background-color:var(--bg-tertiary);color:var(--text-muted);cursor:not-allowed}.terminal-panel{display:flex;flex-direction:column;height:100%;overflow:hidden}.terminal-tabs{display:flex;align-items:center;gap:4px;padding:8px 16px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);overflow-x:auto}.terminal-tab{display:flex;align-items:center;gap:8px;padding:8px 16px;background-color:transparent;border:1px solid transparent;border-radius:6px;color:var(--text-secondary);font-size:13px;cursor:pointer;transition:all .2s;white-space:nowrap}.terminal-tab:hover{background-color:var(--bg-tertiary)}.terminal-tab.active{background-color:var(--bg-tertiary);border-color:var(--border-color);color:var(--text-primary)}.terminal-tab .status{width:8px;height:8px;border-radius:50%}.terminal-tab .status.running{background-color:var(--accent-green)}.terminal-tab .status.initializing{background-color:var(--accent-yellow)}.terminal-tab .status.stopped{background-color:var(--text-muted)}.terminal-tab .status.error{background-color:var(--accent-red)}.terminal-tab .close-btn{padding:2px 4px;background:transparent;border:none;color:var(--text-muted);cursor:pointer;border-radius:4px;line-height:1}.terminal-tab .close-btn:hover{background-color:var(--bg-primary);color:var(--accent-red)}.terminal-actions{display:flex;align-items:center;gap:8px;margin-left:auto;padding-left:16px}.terminal-actions button{padding:6px 12px;background-color:transparent;border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .2s}.terminal-actions button:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.terminal-actions button.danger:hover{border-color:var(--accent-red);color:var(--accent-red)}.terminal-container{flex:1;position:relative;overflow:hidden}.terminal-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;padding:8px}.terminal-wrapper.hidden{visibility:hidden}.terminal{height:100%;width:100%}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0d1117e6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:1000}.loading-spinner{width:48px;height:48px;border:3px solid var(--border-color);border-top-color:var(--accent-blue);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay p{color:var(--text-secondary);font-size:14px}.connection-status{position:fixed;bottom:16px;right:16px;display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;font-size:12px;color:var(--text-secondary)}.connection-status .dot{width:8px;height:8px;border-radius:50%}.connection-status .dot.connected{background-color:var(--accent-green)}.connection-status .dot.disconnected{background-color:var(--accent-red)}.error-banner{padding:12px 16px;background-color:#f851491a;border:1px solid var(--accent-red);border-radius:6px;color:var(--accent-red);font-size:14px;text-align:center}.main-layout{display:flex;flex:1;overflow:hidden}.main-content-area{flex:1;display:flex;flex-direction:column;overflow:hidden}.main-content-area.with-lnb{margin-left:0}.main-content-area.full-width{width:100%}.left-nav-bar{width:260px;background-color:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;flex-shrink:0}.lnb-header{padding:20px;border-bottom:1px solid var(--border-color);font-size:14px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.lnb-steps{padding:16px;display:flex;flex-direction:column;gap:8px}.lnb-step{display:flex;align-items:center;gap:12px;padding:14px 16px;background:transparent;border:1px solid transparent;border-radius:8px;text-align:left;cursor:pointer;transition:all .2s ease;width:100%;font-family:inherit}.lnb-step:hover:not(:disabled){background-color:var(--bg-tertiary)}.lnb-step:disabled{cursor:not-allowed;opacity:.5}.step-number{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;transition:all .2s ease}.lnb-step.pending .step-number{background-color:var(--bg-tertiary);color:var(--text-muted);border:2px solid var(--border-color)}.lnb-step.pending .step-label{color:var(--text-muted)}.lnb-step.current{background-color:#58a6ff1a;border-color:var(--accent-blue)}.lnb-step.current .step-number{background-color:var(--accent-blue);color:var(--bg-primary)}.lnb-step.current .step-label{color:var(--text-primary);font-weight:500}.lnb-step.completed .step-number{background-color:var(--accent-green);color:var(--bg-primary)}.lnb-step.completed .step-label{color:var(--text-primary)}.step-label{font-size:14px;flex:1}.step-container{flex:1;display:flex;flex-direction:column;padding:40px;max-width:600px;margin:0 auto;width:100%}.step-header{text-align:center;margin-bottom:32px}.step-header h2{font-size:24px;font-weight:600;margin-bottom:8px;color:var(--text-primary)}.step-header p{color:var(--text-secondary);font-size:14px}.step-content{flex:1;display:flex;flex-direction:column;gap:24px}.step-navigation{display:flex;justify-content:space-between;padding-top:32px;margin-top:auto;border-top:1px solid var(--border-color)}.nav-button{padding:12px 32px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:inherit}.nav-button.prev{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary)}.nav-button.prev:hover:not(:disabled){background-color:var(--bg-tertiary);color:var(--text-primary)}.nav-button.prev:disabled{opacity:.3;cursor:not-allowed}.nav-button.next{background-color:var(--accent-blue);border:none;color:#fff}.nav-button.next:hover:not(:disabled){filter:brightness(1.1)}.nav-button.next:disabled{background-color:var(--bg-tertiary);color:var(--text-muted);cursor:not-allowed}.execution-summary{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:20px}.execution-summary h4{font-size:14px;font-weight:600;margin-bottom:16px;color:var(--text-primary);padding-bottom:12px;border-bottom:1px solid var(--border-color)}.summary-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.summary-label{font-size:13px;color:var(--text-secondary)}.summary-value{font-size:13px;font-weight:500;color:var(--text-primary)}.left-nav-bar{width:280px;background-color:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}.lnb-section{border-bottom:1px solid var(--border-color)}.lnb-section-header{display:flex;align-items:center;justify-content:space-between;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s}.lnb-section-header:hover{background-color:var(--bg-tertiary)}.section-title{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.collapse-icon{font-size:14px;color:var(--text-muted)}.sessions-section{flex:1;display:flex;flex-direction:column;min-height:0}.session-count{font-size:11px;background-color:var(--bg-tertiary);color:var(--text-secondary);padding:2px 8px;border-radius:10px;margin-left:8px}.session-list{flex:1;overflow-y:auto;padding:8px}.session-group{margin-bottom:8px}.session-group-header{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;border-radius:6px;transition:background-color .2s}.session-group-header:hover{background-color:var(--bg-tertiary)}.group-collapse-icon{font-size:10px;color:var(--text-muted)}.group-name{font-size:12px;font-weight:500;color:var(--text-secondary);flex:1}.group-count{font-size:11px;color:var(--text-muted)}.session-group-items{padding-left:12px}.session-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;border-radius:6px;margin:2px 0;border:1px solid transparent;transition:all .2s}.session-item:hover{background-color:var(--bg-tertiary)}.session-item.active{background-color:#58a6ff1a;border-color:var(--accent-blue)}.session-item.selected{background-color:#58a6ff0d}.session-checkbox{width:14px;height:14px;cursor:pointer;accent-color:var(--accent-blue)}.status-indicator{width:8px;height:8px;border-radius:50%;flex-shrink:0}.session-name{flex:1;font-size:12px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-close{padding:2px 6px;background:transparent;border:none;color:var(--text-muted);cursor:pointer;border-radius:4px;font-size:14px;line-height:1;opacity:0;transition:all .2s}.session-item:hover .session-close{opacity:1}.session-close:hover{background-color:var(--bg-primary);color:var(--accent-red)}.add-session-btn{margin:8px 16px 16px;padding:10px;background-color:transparent;border:1px dashed var(--border-color);border-radius:6px;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .2s}.add-session-btn:hover{border-color:var(--accent-blue);color:var(--accent-blue);background-color:#58a6ff0d}.bulk-actions-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background-color:var(--bg-tertiary);border-top:1px solid var(--border-color)}.selected-count{font-size:12px;color:var(--text-secondary);flex:1}.bulk-delete-btn{padding:6px 12px;background-color:var(--accent-red);border:none;border-radius:4px;color:#fff;font-size:11px;font-weight:500;cursor:pointer;transition:filter .2s}.bulk-delete-btn:hover{filter:brightness(1.1)}.bulk-cancel-btn{padding:6px 12px;background-color:transparent;border:1px solid var(--border-color);border-radius:4px;color:var(--text-secondary);font-size:11px;cursor:pointer;transition:all .2s}.bulk-cancel-btn:hover{background-color:var(--bg-primary);color:var(--text-primary)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;width:100%;max-width:440px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.modal-confirm{max-width:400px}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border-color)}.modal-header h2{font-size:16px;font-weight:600;color:var(--text-primary)}.modal-close{padding:4px 8px;background:transparent;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;border-radius:4px;line-height:1}.modal-close:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.modal-body{padding:24px;overflow-y:auto}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border-color)}.form-group{margin-bottom:20px}.form-group:last-child{margin-bottom:0}.form-group label{display:block;font-size:13px;font-weight:500;color:var(--text-primary);margin-bottom:8px}.form-group select{width:100%;padding:10px 12px;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:14px;font-family:inherit}.form-group select:focus{outline:none;border-color:var(--accent-blue)}.btn-primary{padding:10px 20px;background-color:var(--accent-blue);border:none;border-radius:6px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;transition:filter .2s;font-family:inherit}.btn-primary:hover:not(:disabled){filter:brightness(1.1)}.btn-primary:disabled{background-color:var(--bg-tertiary);color:var(--text-muted);cursor:not-allowed}.btn-secondary{padding:10px 20px;background-color:transparent;border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;font-family:inherit}.btn-secondary:hover:not(:disabled){background-color:var(--bg-tertiary);color:var(--text-primary)}.btn-danger{padding:10px 20px;background-color:var(--accent-red);border:none;border-radius:6px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;transition:filter .2s;font-family:inherit}.btn-danger:hover:not(:disabled){filter:brightness(1.1)}.btn-danger:disabled{opacity:.5;cursor:not-allowed}.confirm-message{font-size:14px;color:var(--text-primary);margin-bottom:16px}.delete-list{list-style:none;padding:12px;background-color:var(--bg-tertiary);border-radius:6px;margin-bottom:16px;max-height:150px;overflow-y:auto}.delete-list li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px;color:var(--text-secondary)}.delete-list .status{width:6px;height:6px;border-radius:50%}.warning-text{font-size:12px;color:var(--accent-yellow);padding:12px;background-color:#d299221a;border-radius:6px}.terminal-panel.empty{display:flex;align-items:center;justify-content:center}.empty-message{text-align:center;color:var(--text-muted)}.empty-message p{margin:8px 0}.empty-message p:first-child{font-size:16px;color:var(--text-secondary)}.terminal-header{display:flex;align-items:center;gap:12px;padding:8px 16px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.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{flex:1;display:grid;gap:8px;min-height:0}.terminal-grid.cols-2{grid-template-columns:repeat(2,1fr)}.terminal-grid-container.scrollable .terminal-grid{grid-auto-rows:minmax(350px,1fr)}.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 .2s,box-shadow .2s}.terminal-pane:hover{border-color:var(--text-muted)}.terminal-pane.active{border-color:var(--accent-green)}.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{flex:1;position:relative;overflow:hidden}.pane-terminal .terminal{height:100%;width:100%;padding:4px}.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}

package/dist/web/index.html

@@ -7,8 +7,8 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-  <script type="module" crossorigin src="/assets/index-De6xm4hO.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-CsixHL-D.css">
+  <script type="module" crossorigin src="/assets/index-D-hASqdI.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-Dgl6wRHk.css">
 </head>
 <body>
   <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hjworktree-cli",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Web-based git worktree parallel AI coding agent runner",
   "type": "module",
   "main": "dist/server/index.js",

package/server/socketHandlers.ts

@@ -6,9 +6,7 @@ import type {
   TerminalInputData,
   TerminalResizeData,
   TerminalKillData,
-  AgentId
 } from '../shared/types/index.js';
-import { AI_AGENTS } from '../shared/constants.js';
 import fs, { realpathSync } from 'fs';
 import path from 'path';
 import { promisify } from 'util';
@@ -108,17 +106,11 @@ async function waitForSpawnInterval(): Promise<void> {
 interface TerminalSession {
   pty: IPty;
   worktreePath: string;
-  agentType: AgentId;
-  socketId: string;
+  socketId: string | null;  // null when disconnected but session alive
 }
 
 const sessions = new Map<string, TerminalSession>();
 
-function getAgentCommand(agentType: AgentId): string {
-  const agent = AI_AGENTS.find(a => a.id === agentType);
-  return agent?.command || 'bash';
-}
-
 function getShell(): string {
   if (process.platform === 'win32') {
     return 'powershell.exe';
@@ -142,13 +134,29 @@ export function setupSocketHandlers(io: Server, cwd: string) {
 
     // Terminal create
     socket.on('terminal:create', async (data: TerminalCreateData) => {
-      const { sessionId, worktreePath, agentType } = data;
+      const { sessionId, worktreePath } = data;
+
+      console.log(`Creating terminal session: ${sessionId} at ${worktreePath}`);
+
+      // Check if session already exists (reattach scenario)
+      const existingSession = sessions.get(sessionId);
+      if (existingSession && existingSession.pty) {
+        console.log(`Reattaching to existing session: ${sessionId}`);
 
-      console.log(`Creating terminal session: ${sessionId} at ${worktreePath} with ${agentType}`);
+        // Update socketId for the existing session
+        existingSession.socketId = socket.id;
+
+        // Re-register output handler for new socket
+        existingSession.pty.onData((output: string) => {
+          socket.emit('terminal:output', { sessionId, data: output });
+        });
+
+        socket.emit('terminal:created', { sessionId, reattached: true });
+        return;
+      }
 
       try {
         const shell = getShell();
-        const agentCommand = getAgentCommand(agentType);
 
         // Validate path before spawning
         const pathValidation = await validatePath(worktreePath);
@@ -184,7 +192,6 @@ export function setupSocketHandlers(io: Server, cwd: string) {
         sessions.set(sessionId, {
           pty: ptyProcess,
           worktreePath,
-          agentType,
           socketId: socket.id,
         });
 
@@ -200,11 +207,6 @@ export function setupSocketHandlers(io: Server, cwd: string) {
           sessions.delete(sessionId);
         });
 
-        // Start the AI agent after a short delay
-        setTimeout(() => {
-          ptyProcess.write(`${agentCommand}\r`);
-        }, 500);
-
         socket.emit('terminal:created', { sessionId });
       } catch (error) {
         console.error(`Failed to create terminal session: ${sessionId}`, error);
@@ -252,7 +254,7 @@ export function setupSocketHandlers(io: Server, cwd: string) {
       const socketSessions = Array.from(sessions.entries())
         .filter(([, session]) => session.socketId === socket.id);
 
-      for (const [sessionId, session] of socketSessions) {
+      for (const [, session] of socketSessions) {
         session.pty.write(data.data);
       }
     });
@@ -261,14 +263,13 @@ export function setupSocketHandlers(io: Server, cwd: string) {
     socket.on('disconnect', () => {
       console.log(`Client disconnected: ${socket.id}`);
 
-      // Kill all sessions owned by this socket
+      // Keep sessions alive but mark socketId as null for potential reattach
       const socketSessions = Array.from(sessions.entries())
         .filter(([, session]) => session.socketId === socket.id);
 
       for (const [sessionId, session] of socketSessions) {
-        console.log(`Killing orphaned terminal session: ${sessionId}`);
-        session.pty.kill();
-        sessions.delete(sessionId);
+        console.log(`Detaching terminal session (keeping alive): ${sessionId}`);
+        session.socketId = null;
       }
     });
   });

package/shared/constants.ts

@@ -1,29 +1,3 @@
-import type { AgentType } from './types/index.js';
-
-export const AI_AGENTS: AgentType[] = [
-  {
-    id: 'codex',
-    name: 'Codex CLI',
-    command: 'codex',
-    installCommand: 'npm install -g @openai/codex',
-    description: 'OpenAI Codex CLI - AI-powered coding assistant'
-  },
-  {
-    id: 'claude',
-    name: 'Claude Code',
-    command: 'claude',
-    installCommand: 'npm install -g @anthropic-ai/claude-code',
-    description: 'Anthropic Claude Code - Advanced AI coding assistant'
-  },
-  {
-    id: 'gemini',
-    name: 'Gemini CLI',
-    command: 'gemini',
-    installCommand: 'npm install -g @google/gemini-cli',
-    description: 'Google Gemini CLI - Multi-modal AI assistant'
-  }
-];
-
 export const MAX_PARALLEL_COUNT = 10;
 export const MIN_PARALLEL_COUNT = 1;
 export const DEFAULT_PARALLEL_COUNT = 3;
@@ -31,5 +5,5 @@ export const DEFAULT_PARALLEL_COUNT = 3;
 export const BRANCH_POLL_INTERVAL = 5000; // 5 seconds
 
 export const APP_NAME = 'hjWorktree CLI';
-export const APP_VERSION = '2.3.0';
+export const APP_VERSION = '2.4.0';
 export const DEFAULT_PORT = 3847;

package/shared/types/index.ts

@@ -1,5 +1,5 @@
-// Navigation step types (4-step wizard)
-export type NavigationStep = 'branch' | 'agent' | 'worktree' | 'running';
+// Navigation step types (3-step wizard)
+export type NavigationStep = 'branch' | 'worktree' | 'running';
 
 // Step status for LNB display
 export type StepStatus = 'pending' | 'current' | 'completed';
@@ -13,18 +13,7 @@ export interface StepConfig {
 }
 
 // Step order constant
-export const STEP_ORDER: NavigationStep[] = ['branch', 'agent', 'worktree', 'running'];
-
-// Agent types
-export type AgentId = 'codex' | 'claude' | 'gemini';
-
-export interface AgentType {
-  id: AgentId;
-  name: string;
-  command: string;
-  installCommand: string;
-  description: string;
-}
+export const STEP_ORDER: NavigationStep[] = ['branch', 'worktree', 'running'];
 
 // Branch types
 export interface Branch {
@@ -34,16 +23,15 @@ export interface Branch {
   lastCommit?: string;
 }
 
-// Running agent types
-export type AgentStatus = 'initializing' | 'installing' | 'running' | 'stopped' | 'error';
+// Terminal status types
+export type TerminalStatus = 'initializing' | 'running' | 'stopped' | 'error';
 
 export interface TerminalInfo {
   sessionId: string;
   worktreePath: string;
   worktreeName: string;
   branchName: string;
-  agentType: AgentId;
-  status: AgentStatus;
+  status: TerminalStatus;
 }
 
 // Worktree types
@@ -58,7 +46,6 @@ export interface Worktree {
 export interface TerminalCreateData {
   sessionId: string;
   worktreePath: string;
-  agentType: AgentId;
 }
 
 export interface TerminalOutputData {
@@ -85,7 +72,6 @@ export interface TerminalKillData {
 export interface CreateWorktreesRequest {
   branch: string;
   count: number;
-  agentType: AgentId;
 }
 
 export interface CreateWorktreesResponse {
@@ -95,7 +81,6 @@ export interface CreateWorktreesResponse {
 // Single worktree creation
 export interface CreateSingleWorktreeRequest {
   branch: string;
-  agentType: AgentId;
 }
 
 export interface CreateSingleWorktreeResponse {

package/web/src/App.tsx

@@ -4,7 +4,6 @@ import { useSocket } from './hooks/useSocket.js';
 import Header from './components/Layout/Header.js';
 import MainLayout from './components/Layout/MainLayout.js';
 import BranchStep from './components/Steps/BranchStep.js';
-import AgentStep from './components/Steps/AgentStep.js';
 import WorktreeStep from './components/Steps/WorktreeStep.js';
 import TerminalPanel from './components/Terminal/TerminalPanel.js';
 import ModalContainer from './components/Modals/ModalContainer.js';
@@ -13,18 +12,21 @@ function App() {
   const { step, isLoading, loadingMessage, error } = useAppStore();
   const { connected } = useSocket();
 
-  // Fetch initial data
+  // Fetch initial data and restore existing sessions
   useEffect(() => {
-    useAppStore.getState().fetchProjectInfo();
-    useAppStore.getState().fetchBranches();
+    const initApp = async () => {
+      await useAppStore.getState().fetchProjectInfo();
+      await useAppStore.getState().fetchBranches();
+      // Restore existing worktrees if any (for page refresh persistence)
+      await useAppStore.getState().restoreExistingWorktrees();
+    };
+    initApp();
   }, []);
 
   const renderStepContent = () => {
     switch (step) {
       case 'branch':
         return <BranchStep />;
-      case 'agent':
-        return <AgentStep />;
       case 'worktree':
         return <WorktreeStep />;
       case 'running':

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

@@ -1,13 +1,11 @@
 import React from 'react';
 import { useAppStore } from '../../stores/useAppStore.js';
-import type { NavigationStep, StepStatus, AgentStatus } from '../../../../shared/types/index.js';
-import { AI_AGENTS } from '../../../../shared/constants.js';
+import type { NavigationStep, StepStatus, TerminalStatus } from '../../../../shared/types/index.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' },
+  { id: 'worktree' as const, number: 2, label: 'Count' },
 ];
 
 interface StepItemProps {
@@ -79,7 +77,7 @@ function SetupSection() {
               onClick={() => goToStep('running')}
               type="button"
             >
-              <span className="step-number">4</span>
+              <span className="step-number">3</span>
               <span className="step-label">Running</span>
             </button>
           )}
@@ -90,10 +88,9 @@ function SetupSection() {
 }
 
 // Status indicator component
-function StatusIndicator({ status }: { status: AgentStatus }) {
-  const statusColors: Record<AgentStatus, string> = {
+function StatusIndicator({ status }: { status: TerminalStatus }) {
+  const statusColors: Record<TerminalStatus, string> = {
     initializing: '#f59e0b',
-    installing: '#f59e0b',
     running: '#22c55e',
     stopped: '#6b7280',
     error: '#ef4444',
@@ -112,8 +109,7 @@ function StatusIndicator({ status }: { status: AgentStatus }) {
 interface SessionItemProps {
   sessionId: string;
   worktreeName: string;
-  agentType: string;
-  status: AgentStatus;
+  status: TerminalStatus;
   isActive: boolean;
   isSelected: boolean;
   onSelect: () => void;
@@ -124,7 +120,6 @@ interface SessionItemProps {
 function SessionItem({
   sessionId,
   worktreeName,
-  agentType,
   status,
   isActive,
   isSelected,
@@ -132,8 +127,6 @@ function SessionItem({
   onToggleSelect,
   onClose,
 }: SessionItemProps) {
-  const agent = AI_AGENTS.find(a => a.id === agentType);
-
   return (
     <div
       className={`session-item ${isActive ? 'active' : ''} ${isSelected ? 'selected' : ''}`}
@@ -152,9 +145,6 @@ function SessionItem({
       <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}
@@ -256,7 +246,6 @@ function SessionsSection() {
                 key={session.sessionId}
                 sessionId={session.sessionId}
                 worktreeName={session.worktreeName}
-                agentType={session.agentType}
                 status={session.status}
                 isActive={session.sessionId === activeSessionId}
                 isSelected={selectedSessionIds.includes(session.sessionId)}

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

@@ -1,16 +1,13 @@
 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);
+    await createSingleWorktree(selectedBranch);
   };
 
   return (
@@ -42,23 +39,6 @@ function AddWorktreeModal() {
               ))}
             </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">

package/web/src/components/Steps/WorktreeStep.tsx

@@ -2,12 +2,9 @@ import React from 'react';
 import StepContainer from '../Layout/StepContainer.js';
 import WorktreeCountSelector from '../Setup/WorktreeCountSelector.js';
 import { useAppStore } from '../../stores/useAppStore.js';
-import { AI_AGENTS } from '../../../../shared/constants.js';
 
 function WorktreeStep() {
-  const { execute, isLoading, selectedBranch, selectedAgent, worktreeCount } = useAppStore();
-
-  const agentName = AI_AGENTS.find(a => a.id === selectedAgent)?.name || selectedAgent;
+  const { execute, isLoading, selectedBranch, worktreeCount } = useAppStore();
 
   return (
     <StepContainer
@@ -25,10 +22,6 @@ function WorktreeStep() {
           <span className="summary-label">Branch:</span>
           <span className="summary-value">{selectedBranch}</span>
         </div>
-        <div className="summary-item">
-          <span className="summary-label">Agent:</span>
-          <span className="summary-value">{agentName}</span>
-        </div>
         <div className="summary-item">
           <span className="summary-label">Worktrees:</span>
           <span className="summary-value">{worktreeCount}</span>

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