levante 0.1.4 → 0.2.1

package/scripts/companion/ui/pill.js

@@ -0,0 +1,65 @@
+// Self-contained IIFE injected into the tested page.
+// __COMPANION_PORT__ is replaced before injection.
+(function () {
+  const PORT = '__COMPANION_PORT__';
+  const wsUrl = `ws://localhost:${PORT}`;
+
+  const host = document.createElement('div');
+  host.id = '__levante-pill';
+  host.style.cssText = 'position:fixed;top:12px;right:12px;z-index:2147483647;pointer-events:none;';
+  document.body.appendChild(host);
+
+  const shadow = host.attachShadow({ mode: 'closed' });
+
+  const style = document.createElement('style');
+  style.textContent = `
+    :host { all: initial; }
+    .pill {
+      display: inline-flex; align-items: center; gap: 6px;
+      padding: 6px 14px; border-radius: 20px;
+      font-family: system-ui, -apple-system, sans-serif;
+      font-size: 12px; font-weight: 600;
+      backdrop-filter: blur(8px); transition: all 0.3s ease;
+    }
+    .pill.recording { background: rgba(26,10,10,0.9); border: 1px solid #ff4444; color: #ff6666; }
+    .pill.paused { background: rgba(26,20,10,0.9); border: 1px solid #f0a030; color: #f0a030; }
+    .pill.stopped { background: rgba(20,20,20,0.9); border: 1px solid #666; color: #888; opacity:0; transition: opacity 2s ease 3s; }
+    .dot { width: 8px; height: 8px; border-radius: 50%; }
+    .recording .dot { background: #ff4444; box-shadow: 0 0 8px #ff4444; animation: pulse 1.5s infinite; }
+    .paused .dot { background: #f0a030; }
+    .stopped .dot { background: #666; }
+    .timer { font-size: 11px; opacity: 0.7; font-variant-numeric: tabular-nums; }
+    @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
+  `;
+  shadow.appendChild(style);
+
+  const pill = document.createElement('div');
+  pill.className = 'pill recording';
+  pill.innerHTML = '<div class="dot"></div><span class="label">REC</span><span class="timer">00:00</span>';
+  shadow.appendChild(pill);
+
+  const labelEl = pill.querySelector('.label');
+  const timerEl = pill.querySelector('.timer');
+
+  function fmt(sec) {
+    const m = Math.floor(sec / 60), s = Math.floor(sec % 60);
+    return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
+  }
+
+  function updateUI(state) {
+    pill.className = `pill ${state.status}`;
+    timerEl.textContent = fmt(state.elapsed);
+    labelEl.textContent = state.status === 'recording' ? 'REC' : state.status === 'paused' ? 'PAUSED' : 'STOPPED';
+  }
+
+  let ws, reconnectTimer;
+  function connect() {
+    try {
+      ws = new WebSocket(wsUrl);
+      ws.onmessage = (e) => { try { const m = JSON.parse(e.data); if (m.type === 'state:update') updateUI(m.state); } catch {} };
+      ws.onclose = () => { reconnectTimer = setTimeout(connect, 2000); };
+      ws.onerror = () => {};
+    } catch {}
+  }
+  connect();
+})();

package/scripts/ui.mjs

@@ -0,0 +1,98 @@
+import pc from 'picocolors';
+import { writeFileSync, mkdirSync, existsSync } from 'node:fs';
+import { join } from 'node:path';
+
+/**
+ * Print a bordered session header box to stderr.
+ * @param {string} title   e.g. "levante record"
+ * @param {string} key     e.g. "KAN-56"
+ * @param {Array<{label: string, value: string}>} items
+ */
+export function printHeader(title, key, items = []) {
+  const heading = key ? `${title}  ${pc.bold(key)}` : title;
+  const labelWidth = items.length ? Math.max(...items.map((i) => i.label.length)) : 0;
+  const contentLines = items.map((i) => `  ${i.label.padEnd(labelWidth)}  ${i.value}`);
+  const innerWidth = Math.max(
+    stripAnsi(heading).length + 2,
+    ...contentLines.map(stripAnsi).map((l) => l.length),
+  ) + 2;
+
+  const top = pc.cyan('┌' + '─'.repeat(innerWidth) + '┐');
+  const titleLine =
+    pc.cyan('│') + ' ' + pc.bold(heading) +
+    ' '.repeat(innerWidth - stripAnsi(heading).length - 1) + pc.cyan('│');
+  const divider = pc.cyan('│') + pc.dim('─'.repeat(innerWidth)) + pc.cyan('│');
+  const rows = contentLines.map((line) => {
+    const raw = stripAnsi(line);
+    return pc.cyan('│') + line + ' '.repeat(innerWidth - raw.length) + pc.cyan('│');
+  });
+  const bottom = pc.cyan('└' + '─'.repeat(innerWidth) + '┘');
+
+  process.stderr.write('\n');
+  process.stderr.write(top + '\n');
+  process.stderr.write(titleLine + '\n');
+  if (items.length > 0) process.stderr.write(divider + '\n');
+  for (const row of rows) process.stderr.write(row + '\n');
+  process.stderr.write(bottom + '\n');
+}
+
+/**
+ * Print a ✓ success card to stderr.
+ * @param {string} message
+ * @param {Array<{label: string, value: string}>} items
+ */
+export function printSuccess(message, items = []) {
+  process.stderr.write('\n' + pc.green('✓') + ' ' + pc.bold(message) + '\n');
+  _printCardItems(items);
+  process.stderr.write('\n');
+}
+
+/**
+ * Print a ✗ error card to stderr.
+ * @param {string} message
+ * @param {Array<{label: string, value: string}>} items
+ */
+export function printError(message, items = []) {
+  process.stderr.write('\n' + pc.red('✗') + ' ' + pc.bold(message) + '\n');
+  _printCardItems(items);
+  process.stderr.write('\n');
+}
+
+/**
+ * Write a log file. Falls back to printing entries to stderr if write fails.
+ * @param {string} dir           Absolute directory path
+ * @param {string} filename      e.g. "record-error.log"
+ * @param {string[]} entries     Pre-formatted lines
+ * @returns {string|null}        Absolute path of written file, or null on failure
+ */
+export function saveErrorLog(dir, filename, entries) {
+  if (!entries.length) return null;
+  try {
+    if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
+    const filePath = join(dir, filename);
+    writeFileSync(filePath, entries.join('\n') + '\n', 'utf-8');
+    return filePath;
+  } catch (err) {
+    process.stderr.write('[log write failed] ' + err.message + '\n');
+    for (const entry of entries) process.stderr.write(entry + '\n');
+    return null;
+  }
+}
+
+// ---- internal helpers ----
+
+function _printCardItems(items) {
+  if (!items.length) return;
+  const labelWidth = Math.max(...items.map((i) => i.label.length));
+  for (const item of items) {
+    process.stderr.write(
+      '  ' + pc.dim(item.label.padEnd(labelWidth)) + '  ' + item.value + '\n'
+    );
+  }
+}
+
+/** Strip ANSI SGR and OSC escape codes for length calculation. */
+function stripAnsi(str) {
+  // eslint-disable-next-line no-control-regex
+  return str.replace(/(\x1b\[[0-9;]*m|\x1b\][^\x07]*\x07|\x1b\][^\x1b]*\x1b\\)/g, '');
+}