ninja-terminals 2.3.9 → 2.4.1

package/public/index.html

@@ -26,56 +26,27 @@
     </div>
   </div>
 
-  <!-- Auth Overlay (disabled - app is free) -->
-  <div id="auth-overlay" style="display:none;">
-    <div class="auth-card">
-      <div class="auth-stripes">
-        <div class="stripe s1"></div>
-        <div class="stripe s2"></div>
-        <div class="stripe s3"></div>
-        <div class="stripe s4"></div>
-      </div>
-      <div class="auth-card-inner">
-        <h1 class="logo-text">NINJA TERMINALS</h1>
-        <p class="auth-subtitle">Multi-Agent Claude Code Orchestrator</p>
-        <!-- Login Form -->
-        <form id="login-form">
-          <input type="text" id="login-email" placeholder="Email or username" required autocomplete="username">
-          <input type="password" id="login-password" placeholder="Password" required autocomplete="current-password">
-          <button type="submit" class="auth-btn">Sign In</button>
-          <p class="auth-error" id="login-error"></p>
-        </form>
-
-        <!-- Register Form (hidden by default) -->
-        <form id="register-form" class="hidden">
-          <input type="text" id="register-username" placeholder="Username" required autocomplete="username">
-          <input type="email" id="register-email" placeholder="Email" required autocomplete="email">
-          <input type="password" id="register-password" placeholder="Password (min 8 chars)" required autocomplete="new-password" minlength="8">
-          <button type="submit" class="auth-btn">Create Account</button>
-          <p class="auth-error" id="register-error"></p>
-        </form>
-
-        <div class="auth-divider"><span>or</span></div>
-        <form id="license-form">
-          <input type="text" id="license-key" placeholder="Enter license key" autocomplete="off">
-          <button type="submit" class="auth-btn auth-btn-secondary">Activate License</button>
-        </form>
-        <p class="auth-footer" id="auth-toggle-text">Don't have an account? <a href="#" id="show-register">Sign up</a></p>
-      </div>
-    </div>
-  </div>
-
   <div id="app">
     <aside id="sidebar">
       <div class="sidebar-header">
         <div class="logo-card">
           <span class="logo">NINJA TERMINALS</span>
           <span class="logo-sub">Multi-Agent Orchestrator</span>
-          <button id="add-terminal-btn" class="add-terminal-btn" title="Add Terminal">+</button>
-          <button id="clear-all-btn" class="clear-all-btn" title="Clear All Terminals">🗑</button>
-          <button id="learnings-btn" class="learnings-btn" title="View Session Learnings">🧠</button>
-          <button id="logout-btn" class="logout-btn" title="Sign out">Logout</button>
-        </div>
+          <label class="agent-preset" for="agent-preset-select">
+            <span class="agent-preset-label">Agent preset</span>
+          <select id="agent-preset-select" class="agent-preset-select" aria-label="Agent preset">
+            <option value="claude">Claude</option>
+            <option value="codex">Codex</option>
+            <option value="opencode">OpenCode</option>
+            <option value="shell">Shell</option>
+            <option value="mixed">Mixed</option>
+            <option value="duo">Duo</option>
+          </select>
+        </label>
+        <button id="add-terminal-btn" class="add-terminal-btn" title="Add Terminal">+</button>
+        <button id="clear-all-btn" class="clear-all-btn" title="Clear All Terminals">🗑</button>
+        <button id="learnings-btn" class="learnings-btn" title="View Session Learnings">🧠</button>
+      </div>
         <div class="logo-stripes">
           <div class="stripe s1"></div>
           <div class="stripe s2"></div>

package/public/style.css

@@ -301,6 +301,7 @@ main {
   position: relative;
   border: 1px solid var(--border);
   transition: border-color 0.2s;
+  --agent-accent: var(--feed-t1);
 }
 
 .terminal-pane.active {
@@ -349,6 +350,24 @@ main {
   text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
 }
 
+.terminal-pane.agent-claude { --agent-accent: var(--feed-t1); }
+.terminal-pane.agent-codex { --agent-accent: var(--feed-t2); }
+.terminal-pane.agent-opencode { --agent-accent: var(--feed-t3); }
+.terminal-pane.agent-shell { --agent-accent: var(--feed-t4); }
+.terminal-pane.agent-mixed { --agent-accent: var(--state-working); }
+.terminal-pane.agent-duo { --agent-accent: var(--state-done); }
+
+.terminal-pane::before {
+  content: '';
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 4px;
+  background: var(--agent-accent);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--agent-accent) 55%, transparent);
+  pointer-events: none;
+  z-index: 2;
+}
+
 /* ── Pane Header ────────────────────────────── */
 
 .pane-header {
@@ -362,6 +381,17 @@ main {
   cursor: default;
   user-select: none;
   position: relative;
+  overflow: hidden;
+}
+
+.pane-header::after {
+  content: '';
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--agent-accent), color-mix(in srgb, var(--agent-accent) 35%, transparent));
+  opacity: 0.9;
+  pointer-events: none;
 }
 
 /* ── Pane Label (retro cream badge) ── */
@@ -371,7 +401,7 @@ main {
   font-size: 16px;
   letter-spacing: 2px;
   color: var(--bg);
-  background: var(--cream);
+  background: linear-gradient(90deg, var(--cream), color-mix(in srgb, var(--cream) 78%, var(--agent-accent) 22%));
   padding: 2px 10px;
   border-radius: 2px;
   white-space: nowrap;
@@ -382,11 +412,13 @@ main {
   position: relative;
 }
 
-/* Color band on left edge of badge — set per terminal index via nth-child */
-.terminal-pane:nth-child(4n+1) .pane-label { border-left: 3px solid var(--feed-t1); }
-.terminal-pane:nth-child(4n+2) .pane-label { border-left: 3px solid var(--feed-t2); }
-.terminal-pane:nth-child(4n+3) .pane-label { border-left: 3px solid var(--feed-t3); }
-.terminal-pane:nth-child(4n+4) .pane-label { border-left: 3px solid var(--feed-t4); }
+/* Agent-based color band on left edge of badge */
+.terminal-pane.agent-claude .pane-label { border-left: 3px solid var(--feed-t1); }
+.terminal-pane.agent-codex .pane-label { border-left: 3px solid var(--feed-t2); }
+.terminal-pane.agent-opencode .pane-label { border-left: 3px solid var(--feed-t3); }
+.terminal-pane.agent-shell .pane-label { border-left: 3px solid var(--feed-t4); }
+.terminal-pane.agent-mixed .pane-label { border-left: 3px solid var(--state-working); }
+.terminal-pane.agent-duo .pane-label { border-left: 3px solid var(--state-done); }
 
 .pane-label.editing {
   background: #1a1a1a;
@@ -401,6 +433,46 @@ main {
   font-family: 'Space Grotesk', sans-serif;
 }
 
+.agent-preset {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 10px 0 8px;
+  padding: 0 16px;
+}
+
+.agent-preset-label {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--cream-dark);
+}
+
+.agent-preset-select {
+  width: 100%;
+  background: #141414;
+  border: 1px solid var(--border);
+  color: var(--text-bright);
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 6px 8px;
+  border-radius: 3px;
+  outline: none;
+}
+
+.agent-preset-select:focus {
+  border-color: var(--border-active);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+.agent-preset-select option {
+  background: var(--surface);
+  color: var(--text-bright);
+}
+
 .pane-state {
   display: flex;
   align-items: center;

package/server.js

@@ -35,10 +35,10 @@ const {
 } = require('./lib/runtime-session');
 
 // ── Config ──────────────────────────────────────────────────
-const PREFERRED_PORT = parseInt(process.env.PORT || '3300', 10);
+const PREFERRED_PORT = parseInt(process.env.PORT || process.env.HTTP_PORT || '3300', 10);
 const BIND_HOST = process.env.NINJA_BIND_HOST || '127.0.0.1';
 const DEFAULT_TERMINALS = parseInt(process.env.DEFAULT_TERMINALS || '4', 10);
-const CLAUDE_CMD = process.env.CLAUDE_CMD || 'claude --dangerously-skip-permissions';
+const CLAUDE_CMD = process.env.CLAUDE_CMD || process.env.CLAUDE_CHROME_CMD || 'claude --chrome --model claude-opus-4-5-20251101';
 const SHELL = process.env.SHELL || '/bin/zsh';
 const PROJECT_DIR = __dirname;
 const DEFAULT_CWD = process.env.DEFAULT_CWD || null;  // Set to target project path to avoid cross-project prompts
@@ -47,12 +47,17 @@ const INJECT_GUIDANCE = process.env.INJECT_GUIDANCE !== 'false';  // Default tru
 // Fleet modes — preset terminal configurations
 const FLEET_MODES = {
   claude: ['claude', 'claude', 'claude', 'claude'],
+  codex: ['codex', 'codex', 'codex', 'codex'],
+  opencode: ['opencode', 'opencode', 'opencode', 'opencode'],
   teams: ['claude', 'opencode', 'codex', 'shell'],
   mixed: ['claude', 'claude', 'opencode', 'shell'],
   shell: ['shell', 'shell', 'shell', 'shell'],
   duo: ['claude', 'opencode'],
 };
 const FLEET_MODE = process.env.NINJA_MODE || 'claude';
+// Resolve the claude binary from PATH by default so it works on any machine.
+// Override with CLAUDE_CMD (full command) or CLAUDE_BIN (binary path) if needed.
+const CLAUDE_BIN = process.env.CLAUDE_BIN || 'claude';
 
 const sleep = ms => new Promise(r => setTimeout(r, ms));
 
@@ -152,7 +157,7 @@ function getTerminalRules(terminalId) {
 // ── Terminal Spawning ───────────────────────────────────────
 
 const AGENT_COMMANDS = {
-  claude: process.env.CLAUDE_CMD || 'claude --dangerously-skip-permissions',
+  claude: process.env.CLAUDE_CMD || `${CLAUDE_BIN} --dangerously-skip-permissions`,
   opencode: 'opencode',
   codex: 'codex',
   shell: null, // No command — just shell
@@ -197,6 +202,9 @@ function spawnTerminal(label, scope = [], cwd = null, tier = 'pro', agentType =
     env: {
       ...cleanEnv,
       TERM: 'xterm-256color',
+      COLORTERM: 'truecolor',
+      FORCE_COLOR: '1',
+      CLICOLOR_FORCE: '1',
       HOME: require('os').homedir(),
       PATH: `${require('os').homedir()}/.local/bin:/opt/homebrew/bin:${process.env.PATH || ''}`,
       SHELL_SESSIONS_DISABLE: '1',
@@ -1292,13 +1300,16 @@ async function startServer() {
   server.listen(selectedPort, BIND_HOST, () => {
     const url = `http://localhost:${selectedPort}`;
     console.log(`[bind] Listening on ${BIND_HOST}:${selectedPort}`);
+    const fleetConfig = FLEET_MODES[FLEET_MODE] || FLEET_MODES.claude;
+    const terminalCount = DEFAULT_TERMINALS > 0 ? Math.min(DEFAULT_TERMINALS, fleetConfig.length) : fleetConfig.length;
     const session = writeRuntimeSession({
       port: selectedPort,
       host: BIND_HOST,
       url,
       cwd: DEFAULT_CWD || process.cwd(),
-      terminals: DEFAULT_TERMINALS,
+      terminals: terminalCount,
       command: 'ninja-terminals',
+      launchConfig: { mode: FLEET_MODE, terminalCount },
     });
 
     console.log(`Ninja Terminals v2 running on ${url}`);
@@ -1314,8 +1325,6 @@ async function startServer() {
     startSessionHeartbeat(sessionCache, handleSessionInvalidation, 5 * 60 * 1000);
 
     // Auto-spawn terminals based on fleet mode
-    const fleetConfig = FLEET_MODES[FLEET_MODE] || FLEET_MODES.claude;
-    const terminalCount = DEFAULT_TERMINALS > 0 ? Math.min(DEFAULT_TERMINALS, fleetConfig.length) : fleetConfig.length;
     const agentLabels = { claude: 'Claude', opencode: 'OpenCode', codex: 'Codex', shell: 'Shell' };
 
     console.log(`Auto-spawning ${terminalCount} terminals (mode: ${FLEET_MODE})...`);