@karpeleslab/teamclaude 1.0.0

package/src/tui.js

@@ -0,0 +1,388 @@
+import { importCredentials } from './oauth.js';
+
+// ── ANSI helpers ─────────────────────────────────────────────
+
+const SPINNER = '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏'.split('');
+const ESC = '\x1b[';
+const RESET = `${ESC}0m`;
+const BOLD = `${ESC}1m`;
+const DIM = `${ESC}2m`;
+
+const bold = s => `${BOLD}${s}${RESET}`;
+const dim = s => `${DIM}${s}${RESET}`;
+const fg = (c, s) => `${ESC}${c}m${s}${RESET}`;
+const green = s => fg(32, s);
+const yellow = s => fg(33, s);
+const red = s => fg(31, s);
+const cyan = s => fg(36, s);
+const gray = s => fg(90, s);
+
+const strip = s => s.replace(/\x1b\[[0-9;]*m/g, '');
+const vw = s => strip(s).length;
+
+function rpad(s, w) {
+  const gap = w - vw(s);
+  return gap > 0 ? s + ' '.repeat(gap) : s;
+}
+
+function bar(ratio, w = 10) {
+  if (ratio == null || isNaN(ratio)) return gray('░'.repeat(w)) + '   - ';
+  ratio = Math.max(0, Math.min(1, ratio));
+  const f = Math.round(ratio * w);
+  const c = ratio < 0.7 ? 32 : ratio < 0.9 ? 33 : 31;
+  const pct = (ratio * 100).toFixed(0).padStart(3) + '%';
+  return `${ESC}${c}m${'█'.repeat(f)}${ESC}90m${'░'.repeat(w - f)}${RESET} ${pct}`;
+}
+
+function timestamp() {
+  return new Date().toLocaleTimeString('en-US', { hour12: false });
+}
+
+// ── TUI class ────────────────────────────────────────────────
+
+export class TUI {
+  constructor({ accountManager, config, saveConfig, onQuit }) {
+    this.am = accountManager;
+    this.config = config;
+    this.saveConfig = saveConfig;
+    this.onQuit = onQuit;
+
+    this.log = [];           // completed activity entries
+    this.active = new Map(); // in-flight requests
+    this.mode = 'normal';    // normal | select | add | input
+    this.selAction = null;   // switch | remove
+    this.selIdx = 0;
+    this.inputPrompt = '';
+    this.inputBuf = '';
+    this.inputCb = null;
+    this.frame = 0;
+    this.running = false;
+    this.timer = null;
+    this._origLog = null;
+    this._origErr = null;
+  }
+
+  // ── lifecycle ──────────────────────────────────────
+
+  start() {
+    this.running = true;
+    process.stdout.write(`${ESC}?1049h${ESC}?25l`);
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.setEncoding('utf8');
+    this._dataHandler = d => this._onData(d);
+    this._resizeHandler = () => this.render();
+    process.stdin.on('data', this._dataHandler);
+    process.stdout.on('resize', this._resizeHandler);
+
+    // Redirect console to activity log
+    this._origLog = console.log;
+    this._origErr = console.error;
+    console.log = (...a) => this._addLog(a.join(' '));
+    console.error = (...a) => this._addLog(a.join(' '));
+
+    this.render();
+    this.timer = setInterval(() => {
+      this.frame = (this.frame + 1) % SPINNER.length;
+      this.render();
+    }, 500);
+  }
+
+  stop() {
+    this.running = false;
+    if (this.timer) { clearInterval(this.timer); this.timer = null; }
+    if (this._origLog) { console.log = this._origLog; console.error = this._origErr; }
+    process.stdin.removeListener('data', this._dataHandler);
+    process.stdout.removeListener('resize', this._resizeHandler);
+    process.stdout.write(`${ESC}?25h${ESC}?1049l`);
+    try { process.stdin.setRawMode(false); } catch {}
+    process.stdin.pause();
+  }
+
+  // ── server hooks ───────────────────────────────────
+
+  onRequestStart(id, info) {
+    this.active.set(id, { ...info, t: timestamp(), started: Date.now(), account: null });
+    this.render();
+  }
+
+  onRequestRouted(id, info) {
+    const r = this.active.get(id);
+    if (r) r.account = info.account;
+  }
+
+  onRequestEnd(id, info) {
+    const r = this.active.get(id);
+    this.active.delete(id);
+    const dur = r ? ((Date.now() - r.started) / 1000).toFixed(1) : '?';
+    const acct = info.account || r?.account || '?';
+    this._addLog(`${info.method} ${info.path} → ${acct} (${info.status}, ${dur}s)`);
+  }
+
+  _addLog(msg) {
+    msg = msg.replace(/^\[TeamClaude\]\s*/, '');
+    this.log.unshift({ t: timestamp(), msg });
+    if (this.log.length > 200) this.log.length = 200;
+    if (this.running) this.render();
+  }
+
+  // ── input handling ─────────────────────────────────
+
+  _onData(d) {
+    if (d === '\x1b[A') return this._key('up');
+    if (d === '\x1b[B') return this._key('down');
+    if (d === '\x1b') return this._key('esc');
+    if (d === '\r' || d === '\n') return this._key('enter');
+    if (d === '\x03') return this._key('ctrl-c');
+    if (d === '\x7f' || d === '\x08') return this._key('bs');
+    if (d.length === 1 && d >= ' ') return this._key(d);
+  }
+
+  _key(k) {
+    if (k === 'ctrl-c') { this.stop(); this.onQuit?.(); return; }
+
+    switch (this.mode) {
+      case 'normal': this._keyNormal(k); break;
+      case 'select': this._keySelect(k); break;
+      case 'add':    this._keyAdd(k); break;
+      case 'input':  this._keyInput(k); break;
+    }
+    this.render();
+  }
+
+  _keyNormal(k) {
+    if (k === 'q') { this.stop(); this.onQuit?.(); }
+    else if (k === 's' && this.am.accounts.length > 0) {
+      this.mode = 'select'; this.selAction = 'switch'; this.selIdx = this.am.currentIndex;
+    }
+    else if (k === 'r' && this.am.accounts.length > 0) {
+      this.mode = 'select'; this.selAction = 'remove'; this.selIdx = 0;
+    }
+    else if (k === 'a') { this.mode = 'add'; }
+  }
+
+  _keySelect(k) {
+    const len = this.am.accounts.length;
+    if (k === 'up' || k === 'k') this.selIdx = Math.max(0, this.selIdx - 1);
+    else if (k === 'down' || k === 'j') this.selIdx = Math.min(len - 1, this.selIdx + 1);
+    else if (k === 'enter') {
+      if (this.selAction === 'switch') {
+        this.am.currentIndex = this.selIdx;
+        this._addLog(`Switched to "${this.am.accounts[this.selIdx].name}"`);
+      } else {
+        this._doRemove(this.selIdx);
+      }
+      this.mode = 'normal';
+    }
+    else if (k === 'esc' || k === 'q') { this.mode = 'normal'; }
+  }
+
+  _keyAdd(k) {
+    if (k === 'i') { this._doImport(); this.mode = 'normal'; }
+    else if (k === 'k') {
+      this.mode = 'input';
+      this.inputPrompt = 'API key';
+      this.inputBuf = '';
+      this.inputCb = v => { if (v) this._doAddKey(v); };
+    }
+    else if (k === 'esc' || k === 'q') { this.mode = 'normal'; }
+  }
+
+  _keyInput(k) {
+    if (k === 'enter') {
+      const cb = this.inputCb;
+      const v = this.inputBuf;
+      this.mode = 'normal'; this.inputCb = null; this.inputBuf = '';
+      cb?.(v);
+    }
+    else if (k === 'esc') { this.mode = 'normal'; this.inputCb = null; this.inputBuf = ''; }
+    else if (k === 'bs') { this.inputBuf = this.inputBuf.slice(0, -1); }
+    else if (k.length === 1) { this.inputBuf += k; }
+  }
+
+  // ── account operations ─────────────────────────────
+
+  async _doImport() {
+    try {
+      const creds = await importCredentials('~/.claude/.credentials.json');
+      const n = this.config.accounts.filter(a => a.name.startsWith('max-')).length + 1;
+      const name = `max-${n}`;
+      const entry = {
+        name, type: 'oauth',
+        accessToken: creds.accessToken,
+        refreshToken: creds.refreshToken,
+        expiresAt: creds.expiresAt,
+      };
+      this.config.accounts.push(entry);
+      this.am.addAccount(entry);
+      await this.saveConfig(this.config);
+      this._addLog(`Imported account "${name}"`);
+    } catch (e) {
+      this._addLog(`Import failed: ${e.message}`);
+    }
+  }
+
+  async _doAddKey(apiKey) {
+    const n = this.config.accounts.filter(a => a.name.startsWith('api-')).length + 1;
+    const name = `api-${n}`;
+    this.config.accounts.push({ name, type: 'apikey', apiKey });
+    this.am.addAccount({ name, type: 'apikey', apiKey });
+    await this.saveConfig(this.config);
+    this._addLog(`Added API key account "${name}"`);
+  }
+
+  async _doRemove(idx) {
+    if (idx < 0 || idx >= this.am.accounts.length) return;
+    const name = this.am.accounts[idx].name;
+    this.am.removeAccount(idx);
+    this.config.accounts.splice(idx, 1);
+    if (this.selIdx >= this.am.accounts.length) this.selIdx = Math.max(0, this.am.accounts.length - 1);
+    await this.saveConfig(this.config);
+    this._addLog(`Removed account "${name}"`);
+  }
+
+  // ── rendering ──────────────────────────────────────
+
+  render() {
+    if (!this.running) return;
+    const W = process.stdout.columns || 80;
+    const H = process.stdout.rows || 24;
+
+    if (W < 40 || H < 8) {
+      process.stdout.write(`${ESC}H${ESC}2JTerminal too small (need 40x8+)\r\n`);
+      return;
+    }
+
+    const lines = [];
+
+    // ── Header
+    const left = bold(' TeamClaude');
+    const port = this.config.proxy?.port || 3456;
+    const right = `Port ${port} ${green('▲')} `;
+    lines.push(left + ' '.repeat(Math.max(1, W - vw(left) - vw(right))) + right);
+    lines.push(' ' + dim('─'.repeat(W - 2)));
+
+    // ── Accounts
+    if (this.am.accounts.length === 0) {
+      lines.push('');
+      lines.push(yellow('  No accounts configured. Press [a] to add one.'));
+    } else {
+      lines.push('');
+      const showBoth = W >= 70;
+      const bw = showBoth
+        ? Math.max(5, Math.min(20, Math.floor((W - 56) / 2)))
+        : Math.max(5, Math.min(20, W - 45));
+
+      for (let i = 0; i < this.am.accounts.length; i++) {
+        lines.push(this._renderAcct(i, bw, showBoth));
+      }
+    }
+
+    // ── Activity header
+    lines.push('');
+    const ac = this.active.size;
+    const acTag = ac > 0 ? `  ${cyan(ac + ' active')}` : '';
+    const aHdr = ` Activity${acTag} `;
+    lines.push(aHdr + dim('─'.repeat(Math.max(1, W - vw(aHdr)))));
+
+    // Active requests
+    const now = Date.now();
+    for (const [, r] of this.active) {
+      const el = ((now - r.started) / 1000).toFixed(1);
+      const sp = cyan(SPINNER[this.frame]);
+      const a = r.account ? ` → ${r.account}` : '';
+      lines.push(` ${sp} ${gray(r.t)}  ${r.method} ${r.path}${a} ${dim(`(${el}s...)`)}`);
+    }
+
+    // Completed log
+    const footerH = 2;
+    const space = Math.max(0, H - lines.length - footerH);
+    for (let i = 0; i < space && i < this.log.length; i++) {
+      lines.push(`   ${gray(this.log[i].t)}  ${this.log[i].msg}`);
+    }
+
+    // Pad to fill
+    while (lines.length < H - footerH) lines.push('');
+
+    // ── Footer
+    lines.push(' ' + dim('─'.repeat(W - 2)));
+    lines.push(this._renderFooter());
+
+    // Write buffer
+    let buf = `${ESC}H`;
+    for (let i = 0; i < H; i++) {
+      buf += rpad(lines[i] || '', W);
+      if (i < H - 1) buf += '\r\n';
+    }
+    // Show cursor only in input mode
+    buf += this.mode === 'input' ? `${ESC}?25h` : `${ESC}?25l`;
+    process.stdout.write(buf);
+  }
+
+  _renderAcct(idx, bw, showBoth) {
+    const a = this.am.accounts[idx];
+    const isCur = idx === this.am.currentIndex;
+    const isSel = this.mode === 'select' && idx === this.selIdx;
+
+    // Prefix: selection marker + current marker
+    const sel = isSel ? cyan('>') : ' ';
+    const cur = isCur ? green('►') : ' ';
+
+    // Name (bold if selected)
+    const rawName = a.name.slice(0, 12).padEnd(12);
+    const name = isSel ? bold(rawName) : rawName;
+
+    // Type
+    const type = gray(a.type.padEnd(7));
+
+    // Status
+    let status;
+    switch (a.status) {
+      case 'active':    status = isCur ? green('active') : 'active'; break;
+      case 'throttled': status = yellow('throttled'); break;
+      case 'exhausted': status = red('exhausted'); break;
+      case 'error':     status = red('error'); break;
+      default:          status = a.status || 'ready';
+    }
+    status = rpad(status, 10);
+
+    // Quota ratios — prefer unified (Claude Max), fall back to standard (API key)
+    const q = a.quota;
+    let r1 = null, r2 = null, l1 = 'Ses', l2 = 'Wk ';
+
+    if (q.unified5h != null || q.unified7d != null) {
+      r1 = q.unified5h;
+      r2 = q.unified7d;
+    } else {
+      l1 = 'Tok';
+      l2 = 'Req';
+      r1 = (q.tokensLimit != null && q.tokensRemaining != null)
+        ? 1 - q.tokensRemaining / q.tokensLimit : null;
+      r2 = (q.requestsLimit != null && q.requestsRemaining != null)
+        ? 1 - q.requestsRemaining / q.requestsLimit : null;
+    }
+
+    let line = ` ${sel}${cur} ${name} ${type} ${status} ${l1} ${bar(r1, bw)}`;
+    if (showBoth) {
+      line += `  ${l2} ${bar(r2, bw)}`;
+    }
+    return line;
+  }
+
+  _renderFooter() {
+    switch (this.mode) {
+      case 'normal':
+        return ` ${bold('s')}witch  ${bold('a')}dd  ${bold('r')}emove  ${bold('q')}uit`;
+      case 'select': {
+        const act = this.selAction === 'switch' ? 'switch' : 'remove';
+        return ` ${dim('↑↓')} select  ${bold('Enter')} ${act}  ${bold('Esc')} cancel`;
+      }
+      case 'add':
+        return ` ${bold('i')}mport Claude Code  ${bold('k')} API key  ${bold('Esc')} cancel`;
+      case 'input':
+        return ` ${this.inputPrompt}: ${this.inputBuf}█`;
+      default:
+        return '';
+    }
+  }
+}