ninja-terminals 2.4.0 → 2.4.1

package/public/app.js

@@ -3,313 +3,20 @@
 const WS_BASE = `ws://${location.host}`;
 const API_BASE = '';
 const AUTH_API = '/api';
-const TOKEN_KEY = 'ninja_token';
-
-// Session readiness gate — resolves when session is validated (or validation is skipped)
-let sessionReadyResolve;
-const sessionReady = new Promise(resolve => { sessionReadyResolve = resolve; });
-
-// ── Auth Module ──────────────────────────────────────────────
-
 const auth = {
   token: null,
-  user: null,
-  tier: null,
-  terminalsMax: 2,
-  validating: false,
-
-  init() {
-    const stored = localStorage.getItem(TOKEN_KEY);
-    if (!stored) return false;
-
-    try {
-      // Decode JWT payload (base64url)
-      const parts = stored.split('.');
-      if (parts.length !== 3) {
-        localStorage.removeItem(TOKEN_KEY);
-        return false;
-      }
-
-      const payload = JSON.parse(atob(parts[1].replace(/-/g, '+').replace(/_/g, '/')));
-
-      // Check expiration
-      if (payload.exp && payload.exp * 1000 < Date.now()) {
-        localStorage.removeItem(TOKEN_KEY);
-        return false;
-      }
-
-      this.token = stored;
-      this.user = payload.sub || payload.email || payload.username || null;
-      return true;
-    } catch {
-      localStorage.removeItem(TOKEN_KEY);
-      return false;
-    }
-  },
-
-  async tryBootstrap() {
-    try {
-      const res = await fetch(`${API_BASE}/api/auth/bootstrap`);
-      if (!res.ok) return false;
-
-      const data = await res.json();
-      if (!data.token) return false;
-
-      // Validate token format
-      const parts = data.token.split('.');
-      if (parts.length !== 3) return false;
-
-      const payload = JSON.parse(atob(parts[1].replace(/-/g, '+').replace(/_/g, '/')));
-      if (payload.exp && payload.exp * 1000 < Date.now()) return false;
-
-      // Save to localStorage and use
-      localStorage.setItem(TOKEN_KEY, data.token);
-      this.token = data.token;
-      this.user = payload.sub || payload.email || payload.username || null;
-      return true;
-    } catch {
-      return false;
-    }
-  },
-
-  async login(usernameOrEmail, password) {
-    const res = await fetch(`${AUTH_API}/auth/login`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ username: usernameOrEmail, password }),
-    });
-
-    if (!res.ok) {
-      const err = await res.json().catch(() => ({}));
-      throw new Error(err.message || 'Login failed');
-    }
-
-    const data = await res.json();
-    this.token = data.token || data.accessToken;
-    localStorage.setItem(TOKEN_KEY, this.token);
-
-    await this.validateTier();
-    return data;
-  },
-
-  async register(username, email, password) {
-    const res = await fetch(`${AUTH_API}/auth/register`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ username, email, password }),
-    });
-
-    if (!res.ok) {
-      const err = await res.json().catch(() => ({}));
-      throw new Error(err.message || 'Registration failed');
-    }
-
-    const data = await res.json();
-    this.token = data.token || data.accessToken;
-    localStorage.setItem(TOKEN_KEY, this.token);
-
-    await this.validateTier();
-    return data;
+  getAuthHeader() {
+    return {};
   },
-
-  async activateLicense(key) {
-    const res = await fetch(`${AUTH_API}/ninja/activate-license`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ licenseKey: key }),
-    });
-
-    if (!res.ok) {
-      const err = await res.json().catch(() => ({}));
-      throw new Error(err.message || 'Invalid license key');
-    }
-
-    const data = await res.json();
-    this.token = data.token || data.accessToken;
-    localStorage.setItem(TOKEN_KEY, this.token);
-
-    await this.validateTier();
-    return data;
+  logout() {},
+  init() {
+    return true;
   },
-
   async validateTier() {
-    this.validating = true;
-    try {
-      const res = await fetch(`${API_BASE}/api/session`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          ...this.getAuthHeader(),
-        },
-        body: JSON.stringify({ token: this.token }),
-      });
-
-      if (!res.ok) {
-        // 401 = token truly invalid/expired, need re-login
-        if (res.status === 401) {
-          console.warn('Session validation failed: token invalid');
-          this.token = null;
-          localStorage.removeItem(TOKEN_KEY);
-          return { needsLogin: true };
-        }
-        // Other errors (500, network) — proceed with defaults
-        console.warn('Session validation failed, using defaults');
-        return { needsLogin: false };
-      }
-
-      const data = await res.json();
-      this.tier = data.tier || 'free';
-      this.terminalsMax = data.terminalsMax || 2;
-      if (data.user) this.user = data.user;
-      return { needsLogin: false };
-    } finally {
-      this.validating = false;
-    }
-  },
-
-  async logout() {
-    try {
-      await fetch(`${API_BASE}/api/session`, {
-        method: 'DELETE',
-        headers: this.getAuthHeader(),
-      });
-    } catch {
-      // Ignore errors on logout
-    }
-
-    this.token = null;
-    this.user = null;
-    this.tier = null;
-    localStorage.removeItem(TOKEN_KEY);
-
-    showAuthOverlay();
-  },
-
-  getAuthHeader() {
-    return this.token ? { 'Authorization': `Bearer ${this.token}` } : {};
+    return { needsLogin: false };
   },
 };
 
-// ── Auth UI ──────────────────────────────────────────────────
-
-function showAuthOverlay() {
-  // Auth disabled - app is free, never show auth overlay
-  return;
-}
-
-function hideAuthOverlay() {
-  const overlay = document.getElementById('auth-overlay');
-  overlay.classList.add('hidden');
-}
-
-function setupAuthForms() {
-  const loginForm = document.getElementById('login-form');
-  const registerForm = document.getElementById('register-form');
-  const licenseForm = document.getElementById('license-form');
-  const loginError = document.getElementById('login-error');
-  const registerError = document.getElementById('register-error');
-  const logoutBtn = document.getElementById('logout-btn');
-  const showRegisterLink = document.getElementById('show-register');
-  const authToggleText = document.getElementById('auth-toggle-text');
-
-  // Toggle between login and register
-  let showingRegister = false;
-
-  function toggleAuthMode() {
-    showingRegister = !showingRegister;
-    if (showingRegister) {
-      loginForm.classList.add('hidden');
-      registerForm.classList.remove('hidden');
-      authToggleText.innerHTML = 'Already have an account? <a href="#" id="show-register">Sign in</a>';
-      document.getElementById('register-username').focus();
-    } else {
-      registerForm.classList.add('hidden');
-      loginForm.classList.remove('hidden');
-      authToggleText.innerHTML = 'Don\'t have an account? <a href="#" id="show-register">Sign up</a>';
-      document.getElementById('login-email').focus();
-    }
-    // Re-attach click handler to new link
-    document.getElementById('show-register').addEventListener('click', (e) => {
-      e.preventDefault();
-      toggleAuthMode();
-    });
-    loginError.textContent = '';
-    registerError.textContent = '';
-  }
-
-  showRegisterLink.addEventListener('click', (e) => {
-    e.preventDefault();
-    toggleAuthMode();
-  });
-
-  // Login form
-  loginForm.addEventListener('submit', async (e) => {
-    e.preventDefault();
-    loginError.textContent = '';
-
-    const email = document.getElementById('login-email').value.trim();
-    const password = document.getElementById('login-password').value;
-
-    try {
-      await auth.login(email, password);
-      hideAuthOverlay();
-      startApp();
-      sessionReadyResolve();
-    } catch (err) {
-      loginError.textContent = err.message;
-    }
-  });
-
-  // Register form
-  registerForm.addEventListener('submit', async (e) => {
-    e.preventDefault();
-    registerError.textContent = '';
-
-    const username = document.getElementById('register-username').value.trim();
-    const email = document.getElementById('register-email').value.trim();
-    const password = document.getElementById('register-password').value;
-
-    if (password.length < 8) {
-      registerError.textContent = 'Password must be at least 8 characters';
-      return;
-    }
-
-    try {
-      await auth.register(username, email, password);
-      hideAuthOverlay();
-      startApp();
-      sessionReadyResolve();
-    } catch (err) {
-      registerError.textContent = err.message;
-    }
-  });
-
-  // License form
-  licenseForm.addEventListener('submit', async (e) => {
-    e.preventDefault();
-    loginError.textContent = '';
-
-    const key = document.getElementById('license-key').value.trim();
-    if (!key) {
-      loginError.textContent = 'Please enter a license key';
-      return;
-    }
-
-    try {
-      await auth.activateLicense(key);
-      hideAuthOverlay();
-      startApp();
-      sessionReadyResolve();
-    } catch (err) {
-      loginError.textContent = err.message;
-    }
-  });
-
-  logoutBtn.addEventListener('click', () => {
-    auth.logout();
-  });
-}
-
 // ── State ────────────────────────────────────────────────────
 
 const state = {
@@ -376,6 +83,24 @@ const TASK_STATUS_LABELS = {
   unknown: 'UNKNOWN',
 };
 
+const AGENT_TYPE_LABELS = {
+  claude: 'Claude',
+  codex: 'Codex',
+  opencode: 'OpenCode',
+  shell: 'Shell',
+  mixed: 'Mixed',
+  duo: 'Duo',
+};
+
+const AGENT_TYPE_CLASSES = {
+  claude: 'agent-claude',
+  codex: 'agent-codex',
+  opencode: 'agent-opencode',
+  shell: 'agent-shell',
+  mixed: 'agent-mixed',
+  duo: 'agent-duo',
+};
+
 // ── Utilities ────────────────────────────────────────────────
 
 function timestamp() {
@@ -393,6 +118,10 @@ function getTerminalFeedClass(id) {
   return `feed-t${idx + 1}`;
 }
 
+function getAgentTypeClass(agentType) {
+  return AGENT_TYPE_CLASSES[agentType] || 'agent-claude';
+}
+
 // ── Activity Feed ────────────────────────────────────────────
 
 function addFeedEntry(message, terminalId) {
@@ -423,12 +152,13 @@ function escapeHtml(str) {
 // ── Terminal Creation ────────────────────────────────────────
 
 function createTerminalUI(termData) {
-  const { id, label, status, elapsed, progress, taskName } = termData;
+  const { id, label, status, elapsed, progress, taskName, agentType } = termData;
 
   // Pane
   const pane = document.createElement('div');
   pane.className = 'terminal-pane';
   pane.id = `pane-${id}`;
+  pane.classList.add(getAgentTypeClass(agentType));
 
   // Header
   const header = document.createElement('div');
@@ -660,6 +390,7 @@ function createTerminalUI(termData) {
   const termState = {
     id,
     label: label || `Terminal ${id.slice(0, 6)}`,
+    agentType: agentType || 'claude',
     status: status || 'idle',
     progress: progress || 0,
     elapsed: elapsed || '',
@@ -964,6 +695,11 @@ function updateTerminalState(id, newStatus, extra) {
       if (t.labelEl) t.labelEl.textContent = extra.label;
     }
     if (extra.taskName !== undefined) t.taskName = extra.taskName;
+    if (extra.agentType !== undefined) {
+      t.agentType = extra.agentType;
+      t.paneEl.classList.remove('agent-claude', 'agent-codex', 'agent-opencode', 'agent-shell', 'agent-mixed', 'agent-duo');
+      t.paneEl.classList.add(getAgentTypeClass(extra.agentType));
+    }
   }
 
   // Update state icon
@@ -1248,7 +984,6 @@ window.addEventListener('resize', () => {
 // ── Start App (after auth) ───────────────────────────────────
 
 async function startApp() {
-  // Request desktop notification permission
   requestNotificationPermission();
 
   // Setup sidebar
@@ -1294,23 +1029,37 @@ async function startApp() {
 
 function setupAddTerminal() {
   const btn = document.getElementById('add-terminal-btn');
+  const preset = document.getElementById('agent-preset-select');
   if (!btn) return;
 
   // Store last used directory
   let lastCwd = localStorage.getItem('ninja-last-cwd') || '/Users/davidmini/Desktop/Projects';
+  let lastAgentType = localStorage.getItem('ninja-last-agent-type') || 'claude';
+
+  if (preset) {
+    const validPresets = new Set(['claude', 'codex', 'opencode', 'shell', 'mixed', 'duo']);
+    if (!validPresets.has(lastAgentType)) lastAgentType = 'claude';
+    preset.value = lastAgentType;
+    preset.addEventListener('change', () => {
+      lastAgentType = preset.value;
+      localStorage.setItem('ninja-last-agent-type', lastAgentType);
+    });
+  }
 
   btn.addEventListener('click', async () => {
     try {
-      const cwd = prompt('Working directory:', lastCwd);
-      if (!cwd) return;
+      const agentType = preset?.value || lastAgentType || 'claude';
+      const cwd = lastCwd;
 
       lastCwd = cwd;
+      lastAgentType = agentType;
       localStorage.setItem('ninja-last-cwd', cwd);
+      localStorage.setItem('ninja-last-agent-type', agentType);
 
       const res = await fetch(`${API_BASE}/api/terminals`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json', ...auth.getAuthHeader() },
-        body: JSON.stringify({ cwd }),
+        body: JSON.stringify({ cwd, agentType }),
       });
 
       if (!res.ok) {
@@ -1321,7 +1070,7 @@ function setupAddTerminal() {
 
       const terminal = await res.json();
       createTerminalUI(terminal);
-      addFeedEntry(`Terminal added: T${terminal.id}`);
+      addFeedEntry(`Terminal added: T${terminal.id} (${AGENT_TYPE_LABELS[terminal.agentType] || terminal.agentType || 'claude'})`);
     } catch (err) {
       console.error('Failed to add terminal:', err);
       alert('Failed to add terminal');
@@ -1401,10 +1150,8 @@ function setupLearnings() {
 // ── Initialize ───────────────────────────────────────────────
 
 async function init() {
-  // Auth disabled — app is free, start immediately
-  hideAuthOverlay();
+  auth.init();
   startApp();
-  sessionReadyResolve();
 }
 
 init();

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;