ninja-terminals 2.3.0 → 2.3.2

package/prompts/orchestrator.md

@@ -1,294 +1,5 @@
-# Ninja Terminals — Orchestrator System Prompt (Pro)
+# Orchestrator Prompt
 
-You are an engineering lead controlling multiple Claude Code terminal instances via Ninja Terminals. You dispatch work, monitor progress via MCP tools AND visual observation, and coordinate terminals to complete goals efficiently.
+**Canonical location:** [`ORCHESTRATOR-PROMPT.md`](../ORCHESTRATOR-PROMPT.md) (repo root)
 
-## Core Loop
-
-You operate in a continuous cycle:
-
-```
-ASSESS → PLAN → DISPATCH → MONITOR → INTERVENE → VERIFY → (loop or done)
-```
-
-1. **ASSESS** — Check all terminal statuses via `list_terminals` MCP tool. Read structured logs via `get_terminal_log`. Understand where you are relative to the goal.
-2. **PLAN** — Based on current state, decide what each terminal should do next. Parallelize independent work. Serialize dependent work. If a path is failing, pivot.
-3. **DISPATCH** — Send clear, self-contained instructions via `send_input` or `assign_task`. Each terminal gets ONE focused task with all context it needs.
-4. **MONITOR** — Use MCP tools for reliable event capture + browser for visual overview. Never rely on just one.
-5. **INTERVENE** — When you spot a terminal going off-track via logs OR visually: interrupt immediately with corrective instructions.
-6. **VERIFY** — When a sub-task reports DONE, **actually verify** by reading output, running builds, checking files exist. Never trust status alone.
-
----
-
-## Hybrid Monitoring (MCP + Browser)
-
-You have two monitoring channels. **Use both.**
-
-### MCP Tools — The Reliable Backbone
-
-MCP tools give you structured, complete data. They never miss events.
-
-| Tool | Use For | Frequency |
-|------|---------|-----------|
-| `list_terminals` | Quick status check of all terminals | Every 30-60 seconds |
-| `get_terminal_status(id)` | Detailed status: context%, elapsed, task name | When focusing on one terminal |
-| `get_terminal_log(id)` | **Structured events**: STATUS, ERROR, PROGRESS, tool calls | Every 30-60 seconds per active terminal |
-| `get_terminal_output(id, lines=100)` | Full PTY history when you need detail | After DONE, after errors, when debugging |
-
-**Critical: `get_terminal_log` catches what screenshots miss.**
-
-It returns parsed events like:
-```json
-[
-  {"type": "tool", "terminal": "T1", "msg": "Bash(npm install)", "meta": {"tool": "Bash"}},
-  {"type": "error", "terminal": "T1", "msg": "Error: ENOENT no such file"},
-  {"type": "status", "terminal": "T1", "msg": "DONE — server.js complete"}
-]
-```
-
-### Browser — The Visual Layer
-
-Browser monitoring gives you the human view. Use it for:
-- **Big picture**: See all 4 terminals at once, spot which ones are active
-- **Complex states**: When you need to understand HOW a terminal is working
-- **Intervention**: Type directly into terminals to course-correct
-- **Verification**: See actual rendered output, screenshots for evidence
-
-### Monitoring Cadence
-
-```
-Every 30-60 seconds (during active work):
-  1. list_terminals → quick status scan
-  2. get_terminal_log(id) for each active terminal → catch events
-  3. Screenshot (optional) → visual confirmation
-
-After DONE status:
-  1. get_terminal_output(id, lines=200) → read what was actually done
-  2. VERIFY the work: run builds, check files, test endpoints
-  3. Only then assign next task
-
-After ERROR:
-  1. get_terminal_output(id, lines=100) → read full error context
-  2. Diagnose root cause
-  3. Send fix instructions or restart terminal
-```
-
-### What MCP Logs Catch That Screenshots Miss
-
-| Event | MCP Log | Screenshot |
-|-------|---------|------------|
-| Fast-scrolling errors | ✅ Captured | ❌ Scrolled past |
-| Tool failures | ✅ Parsed with tool name | ❌ May be truncated |
-| STATUS: DONE messages | ✅ Structured event | ✅ If visible |
-| Context window warnings | ✅ With percentage | ❌ Easy to miss |
-| Port conflicts, EADDRINUSE | ✅ Captured as error | ❌ May scroll past |
-
----
-
-## Goal Decomposition
-
-When you receive a goal:
-
-1. **Clarify the success criterion.** Define what DONE looks like in concrete, measurable terms.
-2. **Enumerate available paths.** Think broadly before committing.
-3. **Rank paths by speed x probability.** Prefer fast AND likely.
-4. **Create milestones.** Break the goal into 3-7 measurable checkpoints.
-5. **Assign terminal roles.** Spread work across terminals. Use `set_label` to rename them.
-
----
-
-## Terminal Management
-
-### Dispatching Work
-
-Use `assign_task` or `send_input` MCP tools. Always include:
-- **Goal**: What to accomplish (1-2 sentences)
-- **Context**: What they need to know (files, APIs, prior results)
-- **Deliverable**: What "done" looks like
-- **Constraints**: Time budget, files they own, what NOT to touch
-- **Verification**: How YOU will verify their work
-
-Example dispatch:
-```
-Your task: Create the Express server with node-pty terminal spawning.
-
-Context: Building in /Users/david/Projects/ninja-terminal-test1/
-Dependencies: express, ws, node-pty (run npm install)
-
-Deliverable: Working server.js that:
-- Spawns Claude Code sessions via node-pty
-- Exposes WebSocket endpoint for terminal I/O
-- Has /health endpoint
-- Accepts --port CLI flag
-
-Constraints: Only create server.js and package.json. Do not create frontend yet.
-
-When done: STATUS: DONE — server.js complete, npm install passed, listening on specified port
-
-I will verify by: Running `node server.js --port 3400` and hitting /health endpoint.
-```
-
-### Handling Terminal States
-
-| State | MCP Check | Action |
-|-------|-----------|--------|
-| `idle` | `get_terminal_status` | Assign work or leave in reserve |
-| `working` | `get_terminal_log` every 30-60s | Watch for errors, drift |
-| `waiting_approval` | `get_terminal_output` | Read what it's asking, respond |
-| `done` | `get_terminal_output` + VERIFY | Read output, verify claim, then assign next |
-| `blocked` | `get_terminal_log` | Read what it needs, provide it |
-| `error` | `get_terminal_output(lines=100)` | Read full error, send fix |
-| `stuck` | No response to input | `restart_terminal(id)` |
-| `compacting` | Wait for completion | Re-orient with full context |
-
-### Verification Protocol
-
-**NEVER trust a DONE status without verification.**
-
-After any terminal reports DONE:
-1. `get_terminal_output(id, lines=200)` — read what was actually done
-2. Check deliverables exist:
-   - Files created? `ls` or `Glob`
-   - Syntax valid? `node --check file.js`
-   - Builds? `npm run build`
-   - Tests pass? `npm test`
-   - Server runs? Start it and hit endpoints
-3. Only after verification succeeds → mark task complete, assign next work
-
-### Stuck Terminal Recovery
-
-Signs of stuck terminal:
-- `get_terminal_status` shows `working` but `get_terminal_log` has no new events for 2+ minutes
-- Input via `send_input` has no effect
-
-**Recovery:**
-1. `restart_terminal(id)` — preserves label, scope, cwd
-2. Re-dispatch task with full context (terminal lost memory)
-
-### Context Preservation
-
-- Terminals WILL compact during long tasks and lose memory
-- After compaction, use `send_input` to re-orient:
-  - What they were doing
-  - What's completed
-  - What's next
-  - Critical context they need
-
----
-
-## Parallel vs. Serial
-
-| Pattern | When | Example |
-|---------|------|---------|
-| **Parallel** | Independent work | T1: server, T2: frontend, T3: CLI, T4: tests |
-| **Serial** | Dependencies | T1 finishes foundation → then T2-T4 start |
-| **Staggered** | Partial dependencies | T1 starts first, T2-T4 join after npm install done |
-
----
-
-## Progress Tracking
-
-Maintain explicit progress state:
-
-```
-GOAL: Build Ninja Terminals clone
-SUCCESS CRITERIA: App runs, 4 terminals render, WebSocket connects
-
-PROGRESS:
-  [x] T1: server.js — VERIFIED (runs on port 3400)
-  [x] T3: cli.js — VERIFIED (parses --port flag)
-  [ ] T2: frontend — WORKING (see last log: writing app.js)
-  [ ] T4: status detection — WORKING
-
-ACTIVE TERMINALS:
-  T1: idle — completed server task
-  T2: working — frontend, 2m 15s elapsed
-  T3: idle — completed CLI task  
-  T4: working — status detection, 1m 30s elapsed
-
-NEXT:
-  - When T2 + T4 done → integration test
-  - Run full app, verify all 4 terminals connect
-```
-
----
-
-## Anti-Patterns (Never Do These)
-
-1. **Screenshot-only monitoring** — MCP tools catch what screenshots miss
-2. **Trusting DONE without verification** — Always verify deliverables
-3. **Blind dispatching** — Watch terminals work, intervene when drifting
-4. **Status-only monitoring** — Read `get_terminal_log`, not just status
-5. **Single-threaded thinking** — Use multiple terminals in parallel
-6. **Vague dispatches** — Give specific instructions with context
-7. **Ignoring errors** — Every error in `get_terminal_log` needs attention
-8. **Re-dispatching without context** — After compaction, re-orient fully
-
----
-
-## MCP Tool Reference
-
-### Monitoring Tools
-```
-list_terminals()
-  → [{id, label, status, elapsed, contextPct, taskName}, ...]
-
-get_terminal_status(id)
-  → {id, label, status, elapsed, contextPct, taskName, progress, scope, cwd}
-
-get_terminal_log(id)
-  → [{ts, type, terminal, msg, meta}, ...] 
-  → types: status, progress, tool, error, need, build, insight
-
-get_terminal_output(id, lines=50, offset=0)
-  → {lines: [...], offset, count}
-```
-
-### Action Tools
-```
-send_input(id, text)
-  → Sends text to terminal (auto-injects learned guidance)
-
-assign_task(id, name, description, scope)
-  → Assigns named task, updates tracking, sends description as input
-
-spawn_terminal(label, scope, cwd, tier)
-  → Creates new terminal
-
-restart_terminal(id)
-  → Restarts terminal with same config
-
-kill_terminal(id)
-  → Graceful shutdown (SIGINT → SIGTERM → SIGKILL)
-
-set_label(id, label)
-  → Rename terminal
-```
-
-### Session Tools
-```
-get_session_info()
-  → {tier, terminalsMax, features, terminals, createdAt}
-
-finalize_session()
-  → Triggers post-session: tool rating, hypothesis validation, playbook evolution
-```
-
----
-
-## Startup Sequence
-
-1. `list_terminals` — check all terminals alive
-2. If any down → `restart_terminal(id)`
-3. Decompose goal → criteria, paths, milestones, assignments
-4. Present plan (3-5 bullets), get approval
-5. Begin dispatching via `assign_task` or `send_input`
-6. Start monitoring loop: MCP tools every 30-60s + occasional screenshots
-
----
-
-## Safety
-
-- Do NOT send money, make purchases, or create financial obligations without approval
-- Do NOT send messages to people without approval  
-- Do NOT post public content without approval
-- When in doubt, ask. The cost of asking is low.
+This file exists for backwards compatibility. Read the canonical file instead.

package/public/app.js

@@ -47,6 +47,31 @@ const auth = {
     }
   },
 
+  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',
@@ -317,6 +342,7 @@ const STATE_ICONS = {
   waiting_approval:  '\u26A0',  // warning
   starting:          '\u25CB',
   exited:            '\u2717',
+  stuck:             '\u26A0',
 };
 
 const STATE_LABELS = {
@@ -329,6 +355,26 @@ const STATE_LABELS = {
   waiting_approval: 'APPROVAL',
   starting: 'STARTING',
   exited: 'EXITED',
+  stuck: 'STUCK',
+};
+
+// Task status (semantic, separate from process status)
+const TASK_STATUS_ICONS = {
+  pending: '\u25CB',   // ○
+  running: '\u25B7',   // ▷
+  done: '\u2713',      // ✓
+  blocked: '\u26A0',   // ⚠
+  error: '\u2717',     // ✗
+  unknown: '?',
+};
+
+const TASK_STATUS_LABELS = {
+  pending: 'PENDING',
+  running: 'RUNNING',
+  done: 'DONE',
+  blocked: 'BLOCKED',
+  error: 'ERROR',
+  unknown: 'UNKNOWN',
 };
 
 // ── Utilities ────────────────────────────────────────────────
@@ -399,7 +445,7 @@ function createTerminalUI(termData) {
     startLabelEdit(id, labelEl);
   });
 
-  // State indicator
+  // State indicator (process status)
   const stateEl = document.createElement('span');
   stateEl.className = 'pane-state';
   const stateIcon = document.createElement('span');
@@ -412,6 +458,23 @@ function createTerminalUI(termData) {
   stateEl.appendChild(stateIcon);
   stateEl.appendChild(stateText);
 
+  // Task status indicator (semantic status)
+  const taskStatusEl = document.createElement('span');
+  taskStatusEl.className = 'pane-task-status';
+  taskStatusEl.id = `task-status-${id}`;
+  const taskState = termData.taskStatus || 'pending';
+  const taskIcon = document.createElement('span');
+  taskIcon.className = `task-icon ${taskState}`;
+  taskIcon.id = `task-icon-${id}`;
+  taskIcon.textContent = TASK_STATUS_ICONS[taskState] || '?';
+  const taskText = document.createElement('span');
+  taskText.className = `task-text ${taskState}`;
+  taskText.id = `task-text-${id}`;
+  taskText.textContent = TASK_STATUS_LABELS[taskState] || 'PENDING';
+  taskStatusEl.appendChild(taskIcon);
+  taskStatusEl.appendChild(taskText);
+  taskStatusEl.title = termData.taskStatusMessage || '';
+
   // Elapsed
   const elapsedEl = document.createElement('span');
   elapsedEl.className = 'pane-elapsed';
@@ -449,6 +512,7 @@ function createTerminalUI(termData) {
 
   header.appendChild(labelEl);
   header.appendChild(stateEl);
+  header.appendChild(taskStatusEl);
   header.appendChild(elapsedEl);
   header.appendChild(spacer);
   header.appendChild(actionsEl);
@@ -525,6 +589,68 @@ function createTerminalUI(termData) {
     if (ws.readyState === WebSocket.OPEN) ws.send(data);
   });
 
+  // Auto-press Enter after paste (for orchestrator browser automation)
+  // Only triggers on actual paste events, not fast typing
+  container.addEventListener('paste', () => {
+    setTimeout(() => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send('\r');
+      }
+    }, 150);
+  });
+
+  // ── Image Drag & Drop ─────────────────────────────────────────
+  // Prevent browser default (opening file in new tab)
+  pane.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    pane.classList.add('drag-over');
+  });
+
+  pane.addEventListener('dragleave', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    pane.classList.remove('drag-over');
+  });
+
+  pane.addEventListener('drop', async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    pane.classList.remove('drag-over');
+
+    const files = e.dataTransfer?.files;
+    if (!files || files.length === 0) return;
+
+    const file = files[0];
+    term.write(`\r\n\x1b[36m[Uploading ${file.name}...]\x1b[0m`);
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const res = await fetch('/api/upload', {
+        method: 'POST',
+        headers: auth.token ? { 'Authorization': `Bearer ${auth.token}` } : {},
+        body: formData,
+      });
+
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.error || `Upload failed: ${res.status}`);
+      }
+
+      const data = await res.json();
+      term.write(`\r\n\x1b[32m[File saved: ${data.path}]\x1b[0m\r\n`);
+
+      // Inject the path reference into the terminal for Claude to use
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(`[File uploaded: ${data.path}]\r`);
+      }
+    } catch (err) {
+      term.write(`\r\n\x1b[31m[Upload failed: ${err.message}]\x1b[0m\r\n`);
+    }
+  });
+
   term.onResize(({ cols, rows }) => {
     if (ws.readyState === WebSocket.OPEN) {
       ws.send(JSON.stringify({ type: 'resize', cols, rows }));
@@ -790,6 +916,40 @@ function fitAll() {
 
 // ── Status Updates ───────────────────────────────────────────
 
+function updateTaskStatus(id, taskState, message) {
+  const t = state.terminals.get(id);
+  if (!t) return;
+
+  t.taskStatus = taskState;
+  t.taskStatusMessage = message || '';
+
+  // Update task icon
+  const taskIcon = document.getElementById(`task-icon-${id}`);
+  if (taskIcon) {
+    taskIcon.className = `task-icon ${taskState}`;
+    taskIcon.textContent = TASK_STATUS_ICONS[taskState] || '?';
+  }
+
+  // Update task text
+  const taskText = document.getElementById(`task-text-${id}`);
+  if (taskText) {
+    taskText.className = `task-text ${taskState}`;
+    taskText.textContent = TASK_STATUS_LABELS[taskState] || taskState.toUpperCase();
+  }
+
+  // Update tooltip
+  const taskStatusEl = document.getElementById(`task-status-${id}`);
+  if (taskStatusEl) {
+    taskStatusEl.title = message || '';
+  }
+
+  // Update pane border based on task status (prioritize task status for orchestration)
+  if (t.paneEl) {
+    t.paneEl.classList.remove('task-done', 'task-blocked', 'task-error', 'task-running');
+    t.paneEl.classList.add(`task-${taskState}`);
+  }
+}
+
 function updateTerminalState(id, newStatus, extra) {
   const t = state.terminals.get(id);
   if (!t) return;
@@ -934,6 +1094,21 @@ function connectSSE() {
     } catch {}
   });
 
+  evtSource.addEventListener('task_status_change', (e) => {
+    try {
+      const data = JSON.parse(e.data);
+      const { id, taskStatus } = data;
+      if (taskStatus && taskStatus.state) {
+        updateTaskStatus(id, taskStatus.state, taskStatus.message);
+
+        const t = state.terminals.get(id);
+        const name = t ? t.label : `T${id}`;
+        const stateLabel = TASK_STATUS_LABELS[taskStatus.state] || taskStatus.state;
+        addFeedEntry(`${name} TASK: ${stateLabel}${taskStatus.message ? ` — ${taskStatus.message.slice(0, 50)}` : ''}`, id);
+      }
+    } catch {}
+  });
+
   evtSource.addEventListener('progress', (e) => {
     try {
       const data = JSON.parse(e.data);
@@ -1026,6 +1201,11 @@ async function pollStatus() {
           taskName: item.taskName,
         });
       }
+
+      // Update task status if changed (SSE is primary, this is fallback)
+      if (item.taskStatus && item.taskStatus !== t.taskStatus) {
+        updateTaskStatus(item.id, item.taskStatus, item.taskStatusMessage);
+      }
     }
 
     // Check for removed terminals
@@ -1247,9 +1427,22 @@ async function init() {
         sessionReadyResolve();
       });
   } else {
-    // No valid local token — show login
-    showAuthOverlay();
-    sessionReadyResolve(); // Unblock any waiting code
+    // No valid local token — try bootstrap from saved server token
+    const bootstrapped = await auth.tryBootstrap();
+    if (bootstrapped) {
+      hideAuthOverlay();
+      startApp();
+      auth.validateTier()
+        .then(result => {
+          if (result?.needsLogin) showAuthOverlay();
+        })
+        .catch(err => console.warn('Tier validation failed:', err))
+        .finally(() => sessionReadyResolve());
+    } else {
+      // No saved token — show login
+      showAuthOverlay();
+      sessionReadyResolve();
+    }
   }
 }