npm - ninja-terminals - Versions diffs - 2.3.1 → 2.3.2 - Mend

ninja-terminals 2.3.1 → 2.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/public/log-viewer.html ADDED Viewed

@@ -0,0 +1,463 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ninja Log Viewer</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --bg: #0a0a0a;
+      --panel-bg: #111;
+      --border: #333;
+      --text: #e0e0e0;
+      --dim: #666;
+      --status-done: #4ade80;
+      --status-working: #facc15;
+      --status-blocked: #f87171;
+      --status-error: #ef4444;
+      --status-idle: #94a3b8;
+    }
+    html, body {
+      height: 100%;
+      background: var(--bg);
+      color: var(--text);
+      font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
+      font-size: 12px;
+    }
+    .container {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+    }
+    /* Status Bar */
+    .status-bar {
+      display: flex;
+      gap: 8px;
+      padding: 8px 12px;
+      background: #1a1a1a;
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+      overflow-x: auto;
+    }
+    .status-chip {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 10px;
+      border-radius: 4px;
+      background: var(--panel-bg);
+      border: 1px solid var(--border);
+      font-size: 11px;
+      white-space: nowrap;
+    }
+    .status-chip .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--status-idle);
+    }
+    .status-chip.done .dot { background: var(--status-done); }
+    .status-chip.working .dot { background: var(--status-working); animation: pulse 1s infinite; }
+    .status-chip.blocked .dot { background: var(--status-blocked); }
+    .status-chip.error .dot { background: var(--status-error); }
+    .status-chip.idle .dot { background: var(--status-idle); }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+    .status-chip .label {
+      font-weight: 600;
+      color: var(--text);
+    }
+    .status-chip .message {
+      color: var(--dim);
+      max-width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    /* Grid */
+    .grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+      gap: 1px;
+      background: var(--border);
+      flex: 1;
+      min-height: 0;
+    }
+    .pane {
+      background: var(--panel-bg);
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+    }
+    .pane-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 6px 10px;
+      background: #1a1a1a;
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+    .pane-title {
+      font-weight: 600;
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .pane-status {
+      font-size: 10px;
+      padding: 2px 6px;
+      border-radius: 3px;
+      background: var(--bg);
+    }
+    .pane-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px;
+      font-size: 11px;
+      line-height: 1.4;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    .pane-content::-webkit-scrollbar {
+      width: 6px;
+    }
+    .pane-content::-webkit-scrollbar-track {
+      background: var(--bg);
+    }
+    .pane-content::-webkit-scrollbar-thumb {
+      background: var(--border);
+      border-radius: 3px;
+    }
+    /* Log line highlighting */
+    .log-line { margin: 1px 0; }
+    .log-line.status { color: var(--status-done); font-weight: 600; }
+    .log-line.blocked { color: var(--status-blocked); font-weight: 600; }
+    .log-line.error { color: var(--status-error); font-weight: 600; }
+    .log-line.progress { color: var(--status-working); }
+    /* Empty state */
+    .empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: var(--dim);
+      font-style: italic;
+    }
+    /* Connection status */
+    .connection-status {
+      position: fixed;
+      bottom: 12px;
+      right: 12px;
+      padding: 6px 12px;
+      background: var(--panel-bg);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      font-size: 10px;
+      color: var(--dim);
+    }
+    .connection-status.connected { border-color: var(--status-done); color: var(--status-done); }
+    .connection-status.disconnected { border-color: var(--status-error); color: var(--status-error); }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="status-bar" id="status-bar">
+      <div class="status-chip idle">
+        <span class="dot"></span>
+        <span class="label">Connecting...</span>
+      </div>
+    </div>
+    <div class="grid" id="grid">
+      <div class="pane" data-slot="0">
+        <div class="pane-header">
+          <span class="pane-title">Terminal 1</span>
+          <span class="pane-status">—</span>
+        </div>
+        <div class="pane-content"><div class="empty">Waiting for terminal...</div></div>
+      </div>
+      <div class="pane" data-slot="1">
+        <div class="pane-header">
+          <span class="pane-title">Terminal 2</span>
+          <span class="pane-status">—</span>
+        </div>
+        <div class="pane-content"><div class="empty">Waiting for terminal...</div></div>
+      </div>
+      <div class="pane" data-slot="2">
+        <div class="pane-header">
+          <span class="pane-title">Terminal 3</span>
+          <span class="pane-status">—</span>
+        </div>
+        <div class="pane-content"><div class="empty">Waiting for terminal...</div></div>
+      </div>
+      <div class="pane" data-slot="3">
+        <div class="pane-header">
+          <span class="pane-title">Terminal 4</span>
+          <span class="pane-status">—</span>
+        </div>
+        <div class="pane-content"><div class="empty">Waiting for terminal...</div></div>
+      </div>
+    </div>
+  </div>
+  <div class="connection-status" id="conn-status">Connecting...</div>
+  <script>
+    const MAX_LINES = 500;
+    const TOKEN_KEY = 'ninja_token';
+    const terminals = new Map();
+    const panes = document.querySelectorAll('.pane');
+    const statusBar = document.getElementById('status-bar');
+    const connStatus = document.getElementById('conn-status');
+    // Get auth token from localStorage (shared with main UI)
+    function getToken() {
+      return localStorage.getItem(TOKEN_KEY);
+    }
+    // Auth headers for fetch
+    function authHeaders() {
+      const token = getToken();
+      return token ? { 'Authorization': `Bearer ${token}` } : {};
+    }
+    // ANSI escape stripper
+    function stripAnsi(str) {
+      return str.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, '');
+    }
+    // Classify log line
+    function classifyLine(line) {
+      const stripped = line.toUpperCase();
+      if (stripped.includes('STATUS: DONE') || stripped.includes('[DONE]')) return 'status';
+      if (stripped.includes('STATUS: BLOCKED') || stripped.includes('[BLOCKED]')) return 'blocked';
+      if (stripped.includes('STATUS: ERROR') || stripped.includes('[ERROR]')) return 'error';
+      if (stripped.includes('PROGRESS:')) return 'progress';
+      return '';
+    }
+    // Append log line to pane
+    function appendLog(pane, text) {
+      const content = pane.querySelector('.pane-content');
+      const empty = content.querySelector('.empty');
+      if (empty) empty.remove();
+      const lines = stripAnsi(text).split('\n');
+      for (const line of lines) {
+        if (!line.trim()) continue;
+        const div = document.createElement('div');
+        div.className = 'log-line ' + classifyLine(line);
+        div.textContent = line;
+        content.appendChild(div);
+      }
+      // Prune old lines
+      while (content.children.length > MAX_LINES) {
+        content.removeChild(content.firstChild);
+      }
+      // Auto-scroll
+      content.scrollTop = content.scrollHeight;
+    }
+    // Update status bar
+    function updateStatusBar() {
+      statusBar.innerHTML = '';
+      for (const [id, t] of terminals) {
+        const chip = document.createElement('div');
+        chip.className = 'status-chip ' + (t.status || 'idle');
+        chip.innerHTML = `
+          <span class="dot"></span>
+          <span class="label">${t.label || 'T' + id}</span>
+          <span class="message">${t.taskMessage || t.status || 'idle'}</span>
+        `;
+        statusBar.appendChild(chip);
+      }
+      if (terminals.size === 0) {
+        statusBar.innerHTML = '<div class="status-chip idle"><span class="dot"></span><span class="label">No terminals</span></div>';
+      }
+    }
+    // Connect WebSocket to terminal
+    function connectTerminal(id, slot) {
+      const pane = panes[slot];
+      if (!pane) return;
+      const token = getToken();
+      const wsUrl = token
+        ? `ws://${location.host}/ws/${id}?token=${encodeURIComponent(token)}`
+        : `ws://${location.host}/ws/${id}`;
+      const ws = new WebSocket(wsUrl);
+      ws.onopen = () => {
+        console.log(`Connected to terminal ${id}`);
+        const t = terminals.get(id) || {};
+        t.ws = ws;
+        t.slot = slot;
+        terminals.set(id, t);
+      };
+      ws.onmessage = (e) => {
+        appendLog(pane, e.data);
+      };
+      ws.onclose = () => {
+        console.log(`Disconnected from terminal ${id}`);
+        const t = terminals.get(id);
+        if (t) t.ws = null;
+      };
+      ws.onerror = (err) => {
+        console.error(`WebSocket error for terminal ${id}:`, err);
+      };
+    }
+    // Connect SSE for status updates
+    function connectSSE() {
+      const es = new EventSource('/api/events');
+      es.onopen = () => {
+        connStatus.textContent = 'Connected';
+        connStatus.className = 'connection-status connected';
+      };
+      es.onerror = () => {
+        connStatus.textContent = 'Disconnected';
+        connStatus.className = 'connection-status disconnected';
+      };
+      es.addEventListener('status_change', (e) => {
+        const data = JSON.parse(e.data);
+        const t = terminals.get(data.id) || { label: data.terminal };
+        t.status = data.to;
+        terminals.set(data.id, t);
+        updateStatusBar();
+        // Update pane status
+        const pane = panes[t.slot];
+        if (pane) {
+          pane.querySelector('.pane-status').textContent = data.to;
+        }
+      });
+      es.addEventListener('task_status_change', (e) => {
+        const data = JSON.parse(e.data);
+        const t = terminals.get(data.id) || { label: data.terminal };
+        t.status = data.taskStatus?.state || data.processStatus;
+        t.taskMessage = data.taskStatus?.message || '';
+        terminals.set(data.id, t);
+        updateStatusBar();
+      });
+    }
+    // Fetch terminals and connect
+    async function init() {
+      const token = getToken();
+      if (!token) {
+        connStatus.textContent = 'No auth token - login at main UI first';
+        connStatus.className = 'connection-status disconnected';
+        return;
+      }
+      try {
+        const res = await fetch('/api/terminals', { headers: authHeaders() });
+        if (!res.ok) {
+          throw new Error(`API returned ${res.status}`);
+        }
+        const data = await res.json();
+        data.forEach((t, i) => {
+          if (i >= 4) return; // Max 4 panes
+          terminals.set(t.id, {
+            label: t.label,
+            status: t.status,
+            slot: i
+          });
+          // Update pane header
+          const pane = panes[i];
+          pane.querySelector('.pane-title').textContent = t.label || `Terminal ${t.id}`;
+          pane.querySelector('.pane-status').textContent = t.status;
+          // Connect WebSocket
+          connectTerminal(t.id, i);
+        });
+        updateStatusBar();
+        connectSSE();
+      } catch (err) {
+        console.error('Failed to fetch terminals:', err);
+        connStatus.textContent = 'Failed to connect';
+        connStatus.className = 'connection-status disconnected';
+        // Retry in 3s
+        setTimeout(init, 3000);
+      }
+    }
+    // Poll for new terminals
+    setInterval(async () => {
+      if (!getToken()) return;
+      try {
+        const res = await fetch('/api/terminals', { headers: authHeaders() });
+        if (!res.ok) return;
+        const data = await res.json();
+        data.forEach((t, i) => {
+          if (i >= 4) return;
+          if (!terminals.has(t.id)) {
+            terminals.set(t.id, {
+              label: t.label,
+              status: t.status,
+              slot: i
+            });
+            const pane = panes[i];
+            pane.querySelector('.pane-title').textContent = t.label || `Terminal ${t.id}`;
+            pane.querySelector('.pane-status').textContent = t.status;
+            pane.querySelector('.pane-content').innerHTML = '';
+            connectTerminal(t.id, i);
+            updateStatusBar();
+          }
+        });
+      } catch (err) {
+        // Ignore polling errors
+      }
+    }, 5000);
+    init();
+  </script>
+</body>
+</html>

package/public/style.css CHANGED Viewed

@@ -330,6 +330,25 @@ main {
   animation: flash-green 0.5s ease-out;
 }
+.terminal-pane.drag-over {
+  border-color: var(--accent) !important;
+  box-shadow: inset 0 0 30px rgba(232, 169, 23, 0.15);
+}
+.terminal-pane.drag-over::after {
+  content: 'Drop file here';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--accent);
+  font-size: 1.2rem;
+  font-weight: 600;
+  pointer-events: none;
+  z-index: 100;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
+}
 /* ── Pane Header ────────────────────────────── */
 .pane-header {
@@ -424,6 +443,51 @@ main {
 .state-text.starting { color: var(--state-idle); }
 .state-text.exited { color: var(--state-error); opacity: 0.7; }
+/* Task status indicator (semantic, separate from process status) */
+.pane-task-status {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  margin-left: 8px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  background: rgba(0,0,0,0.3);
+}
+.task-icon {
+  font-size: 10px;
+  flex-shrink: 0;
+}
+.task-icon.pending { color: var(--state-idle); }
+.task-icon.running { color: var(--state-working); }
+.task-icon.done { color: var(--state-done); }
+.task-icon.blocked { color: var(--state-blocked); }
+.task-icon.error { color: var(--state-error); }
+.task-icon.unknown { color: var(--text-secondary); }
+.task-text {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.task-text.pending { color: var(--state-idle); }
+.task-text.running { color: var(--state-working); }
+.task-text.done { color: var(--state-done); }
+.task-text.blocked { color: var(--state-blocked); }
+.task-text.error { color: var(--state-error); }
+.task-text.unknown { color: var(--text-secondary); }
+/* Task status pane borders (for orchestration visibility) */
+.terminal-pane.task-done { border-color: var(--state-done); }
+.terminal-pane.task-blocked { border-color: var(--state-blocked); }
+.terminal-pane.task-error { border-color: var(--state-error); }
+.terminal-pane.task-running { border-left: 3px solid var(--state-working); }
 .pane-elapsed {
   font-size: 10px;
   color: var(--text-dim);