polyai-agent 1.0.0

package/dist/web/public/css/app.css

@@ -0,0 +1,370 @@
+:root {
+  --bg: #0f1117;
+  --surface: #1a1d27;
+  --surface2: #252836;
+  --border: #2e3147;
+  --accent: #6c63ff;
+  --accent-hover: #5a52d5;
+  --text: #e8eaf0;
+  --text-muted: #8b8fa8;
+  --danger: #e05252;
+  --success: #52c982;
+  --warning: #e0a852;
+  --radius: 8px;
+  --sidebar-width: 220px;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  height: 100vh;
+  overflow: hidden;
+}
+
+#app {
+  display: flex;
+  height: 100vh;
+}
+
+/* Sidebar */
+.sidebar {
+  width: var(--sidebar-width);
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.sidebar-header {
+  padding: 20px 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.logo {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 8px;
+  gap: 4px;
+}
+
+.nav-item {
+  display: block;
+  padding: 10px 12px;
+  border-radius: var(--radius);
+  text-decoration: none;
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  transition: background 0.15s, color 0.15s;
+}
+.nav-item:hover, .nav-item.active {
+  background: var(--surface2);
+  color: var(--text);
+}
+
+/* Main content */
+.main-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+/* Pages */
+.page { display: none; }
+.page.active { display: block; }
+
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.page-header h1 {
+  font-size: 1.4rem;
+  font-weight: 600;
+  flex: 1;
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* Buttons */
+.btn {
+  padding: 8px 16px;
+  border-radius: var(--radius);
+  border: none;
+  font-size: 0.875rem;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background 0.15s;
+  white-space: nowrap;
+}
+.btn-primary { background: var(--accent); color: #fff; }
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
+.btn-secondary:hover { background: var(--border); }
+.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
+.btn-danger:hover { background: var(--danger); color: #fff; }
+.btn-ghost { background: transparent; color: var(--text-muted); }
+.btn-ghost:hover { color: var(--text); }
+
+/* Sessions list */
+.sessions-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 16px;
+}
+
+.session-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px;
+  cursor: pointer;
+  transition: border-color 0.15s, transform 0.1s;
+}
+.session-card:hover {
+  border-color: var(--accent);
+  transform: translateY(-1px);
+}
+
+.session-card-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.session-status {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-top: 5px;
+  flex-shrink: 0;
+}
+.status-active { background: var(--success); box-shadow: 0 0 6px var(--success); }
+.status-paused { background: var(--warning); }
+.status-completed { background: var(--text-muted); }
+
+.session-name {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+.session-meta {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+.session-tags {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+.tag {
+  font-size: 0.75rem;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  padding: 2px 8px;
+  border-radius: 20px;
+  color: var(--text-muted);
+}
+
+.loading {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  padding: 20px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--text-muted);
+}
+.empty-state h2 {
+  font-size: 1.1rem;
+  margin-bottom: 8px;
+}
+.empty-state p { font-size: 0.85rem; }
+
+/* Session Detail */
+.session-info {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px;
+  margin-bottom: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 12px;
+}
+.session-info-item label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: block;
+  margin-bottom: 4px;
+}
+.session-info-item span {
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.guardrails-section, .turns-section {
+  margin-bottom: 24px;
+}
+.section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: var(--text);
+}
+
+.guardrail-item {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 10px 14px;
+  margin-bottom: 8px;
+  font-size: 0.85rem;
+}
+.guardrail-type {
+  font-size: 0.75rem;
+  color: var(--accent);
+  text-transform: uppercase;
+  margin-bottom: 4px;
+}
+
+.turn-item {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+.turn-header {
+  padding: 10px 14px;
+  background: var(--surface2);
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border);
+}
+.turn-messages {
+  padding: 14px;
+}
+.message {
+  margin-bottom: 12px;
+}
+.message-role {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.message-role.user { color: var(--accent); }
+.message-role.assistant { color: var(--success); }
+.message-content {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.file-changes {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border);
+}
+.file-change-title {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+}
+.file-change-item {
+  font-size: 0.8rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 6px 10px;
+  margin-bottom: 4px;
+  font-family: monospace;
+  color: var(--warning);
+}
+
+/* Settings form */
+.settings-form {
+  max-width: 480px;
+}
+.form-group {
+  margin-bottom: 20px;
+}
+.form-group label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 6px;
+  color: var(--text);
+}
+.form-group input,
+.form-group select {
+  width: 100%;
+  padding: 9px 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-size: 0.875rem;
+}
+.form-group input:focus,
+.form-group select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.api-key-note p {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 12px;
+  line-height: 1.5;
+}
+.api-key-note code {
+  background: var(--surface2);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-family: monospace;
+  font-size: 0.8rem;
+  color: var(--accent);
+}
+
+/* Toast */
+.toast {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 12px 20px;
+  font-size: 0.875rem;
+  z-index: 100;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+  transition: opacity 0.3s;
+}
+.toast.hidden { display: none; }
+.toast.success { border-color: var(--success); color: var(--success); }
+.toast.error { border-color: var(--danger); color: var(--danger); }

package/dist/web/public/index.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AI Agent CLI — Session Manager</title>
+  <link rel="stylesheet" href="/css/app.css" />
+</head>
+<body>
+  <div id="app">
+    <aside class="sidebar">
+      <div class="sidebar-header">
+        <span class="logo">🤖 AI Agent CLI</span>
+      </div>
+      <nav class="sidebar-nav">
+        <a href="#sessions" class="nav-item active" data-page="sessions">Sessions</a>
+        <a href="#settings" class="nav-item" data-page="settings">Settings</a>
+      </nav>
+    </aside>
+
+    <main class="main-content">
+      <!-- Sessions Page -->
+      <section id="page-sessions" class="page active">
+        <div class="page-header">
+          <h1>Sessions</h1>
+          <button id="refresh-btn" class="btn btn-secondary">↻ Refresh</button>
+        </div>
+        <div id="sessions-list" class="sessions-list">
+          <div class="loading">Loading sessions…</div>
+        </div>
+      </section>
+
+      <!-- Session Detail Page -->
+      <section id="page-session-detail" class="page">
+        <div class="page-header">
+          <button id="back-btn" class="btn btn-ghost">← Back</button>
+          <h1 id="session-detail-title">Session</h1>
+          <div class="header-actions">
+            <button id="export-btn" class="btn btn-secondary">⬇ Export</button>
+            <button id="delete-btn" class="btn btn-danger">🗑 Delete</button>
+          </div>
+        </div>
+        <div id="session-detail-content"></div>
+      </section>
+
+      <!-- Settings Page -->
+      <section id="page-settings" class="page">
+        <div class="page-header">
+          <h1>Settings</h1>
+        </div>
+        <form id="settings-form" class="settings-form">
+          <div class="form-group">
+            <label for="provider">Default AI Provider</label>
+            <select id="provider" name="provider">
+              <option value="openai">OpenAI</option>
+              <option value="anthropic">Anthropic</option>
+              <option value="gemini">Google Gemini</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="model">Default Model</label>
+            <input type="text" id="model" name="model" placeholder="e.g. gpt-4o" />
+          </div>
+          <div class="form-group">
+            <label for="port">Web UI Port</label>
+            <input type="number" id="port" name="port" placeholder="3000" />
+          </div>
+          <div class="form-group">
+            <label for="logLevel">Log Level</label>
+            <select id="logLevel" name="logLevel">
+              <option value="info">info</option>
+              <option value="debug">debug</option>
+              <option value="warn">warn</option>
+              <option value="error">error</option>
+            </select>
+          </div>
+          <div class="form-group api-key-note">
+            <p>⚠️ API keys are configured via environment variables (<code>OPENAI_API_KEY</code>, <code>ANTHROPIC_API_KEY</code>, <code>GEMINI_API_KEY</code>) and are never stored in this interface.</p>
+          </div>
+          <button type="submit" class="btn btn-primary">Save Settings</button>
+        </form>
+      </section>
+    </main>
+  </div>
+
+  <div id="toast" class="toast hidden"></div>
+
+  <script src="/socket.io/socket.io.js"></script>
+  <script src="/js/app.js"></script>
+</body>
+</html>

package/dist/web/public/js/app.js

@@ -0,0 +1,212 @@
+/* UI application logic - vanilla JS for browser compatibility */
+(function () {
+  const socket = io();
+  let currentSessionId = null;
+
+  // Navigation
+  document.querySelectorAll('.nav-item').forEach(function (link) {
+    link.addEventListener('click', function (e) {
+      e.preventDefault();
+      const page = link.getAttribute('data-page');
+      showPage(page);
+      document.querySelectorAll('.nav-item').forEach(function (l) { l.classList.remove('active'); });
+      link.classList.add('active');
+    });
+  });
+
+  function showPage(name) {
+    document.querySelectorAll('.page').forEach(function (p) { p.classList.remove('active'); });
+    const page = document.getElementById('page-' + name);
+    if (page) page.classList.add('active');
+  }
+
+  // Toast notifications
+  function showToast(message, type) {
+    const toast = document.getElementById('toast');
+    toast.textContent = message;
+    toast.className = 'toast ' + (type || '');
+    setTimeout(function () { toast.className = 'toast hidden'; }, 3000);
+  }
+
+  // --- Sessions ---
+  function loadSessions() {
+    fetch('/api/sessions')
+      .then(function (r) { return r.json(); })
+      .then(function (data) { renderSessions(data.sessions || []); })
+      .catch(function (err) {
+        document.getElementById('sessions-list').innerHTML =
+          '<div class="loading">Error loading sessions: ' + err.message + '</div>';
+      });
+  }
+
+  function renderSessions(sessions) {
+    const container = document.getElementById('sessions-list');
+    if (!sessions.length) {
+      container.innerHTML = '<div class="empty-state"><h2>No sessions yet</h2><p>Start a session from the CLI with <code>ai-agent chat</code></p></div>';
+      return;
+    }
+    container.innerHTML = sessions.map(function (s) {
+      const statusClass = 'status-' + s.status;
+      const turns = (s.turns || []).length;
+      const updated = new Date(s.updatedAt).toLocaleString();
+      return '<div class="session-card" data-id="' + s.id + '">' +
+        '<div class="session-card-header">' +
+        '<div class="session-status ' + statusClass + '"></div>' +
+        '<div>' +
+        '<div class="session-name">' + escHtml(s.name) + '</div>' +
+        '<div class="session-meta">' + turns + ' turns · Updated ' + updated + '</div>' +
+        '</div>' +
+        '</div>' +
+        '<div class="session-tags">' +
+        '<span class="tag">' + escHtml(s.config.provider) + '</span>' +
+        '<span class="tag">' + escHtml(s.config.model || 'default') + '</span>' +
+        (s.config.speckit ? '<span class="tag">' + escHtml(s.config.speckit) + '</span>' : '') +
+        '</div>' +
+        '</div>';
+    }).join('');
+
+    document.querySelectorAll('.session-card').forEach(function (card) {
+      card.addEventListener('click', function () {
+        openSession(card.getAttribute('data-id'));
+      });
+    });
+  }
+
+  function openSession(id) {
+    currentSessionId = id;
+    fetch('/api/sessions/' + id)
+      .then(function (r) { return r.json(); })
+      .then(function (data) { renderSessionDetail(data); })
+      .catch(function (err) { showToast('Error: ' + err.message, 'error'); });
+  }
+
+  function renderSessionDetail(session) {
+    document.getElementById('session-detail-title').textContent = session.name;
+    showPage('session-detail');
+
+    const guardrails = (session.config.guardrails || []);
+    const turns = (session.turns || []);
+
+    const html =
+      '<div class="session-info">' +
+      infoItem('ID', session.id) +
+      infoItem('Status', session.status) +
+      infoItem('Provider', session.config.provider) +
+      infoItem('Model', session.config.model || 'default') +
+      infoItem('Speckit', session.config.speckit || '—') +
+      infoItem('Created', new Date(session.createdAt).toLocaleString()) +
+      '</div>' +
+
+      (guardrails.length ? '<div class="guardrails-section"><div class="section-title">Guardrails (' + guardrails.length + ')</div>' +
+        guardrails.map(function (g) {
+          return '<div class="guardrail-item"><div class="guardrail-type">' + escHtml(g.type) + '</div>' +
+            (g.description || '') + ' ' + JSON.stringify(g.value) + '</div>';
+        }).join('') + '</div>' : '') +
+
+      '<div class="turns-section"><div class="section-title">Conversation (' + turns.length + ' turns)</div>' +
+      (turns.length === 0 ? '<div class="loading">No conversation yet</div>' :
+        turns.map(function (t) {
+          const fileChanges = (t.fileChanges || []);
+          return '<div class="turn-item">' +
+            '<div class="turn-header">' + new Date(t.timestamp).toLocaleString() +
+            (t.usage ? ' · ' + t.usage.totalTokens + ' tokens' : '') + '</div>' +
+            '<div class="turn-messages">' +
+            '<div class="message"><div class="message-role user">You</div>' +
+            '<div class="message-content">' + escHtml(t.userMessage) + '</div></div>' +
+            '<div class="message"><div class="message-role assistant">Assistant</div>' +
+            '<div class="message-content">' + escHtml(t.assistantMessage.slice(0, 800)) +
+            (t.assistantMessage.length > 800 ? '…' : '') + '</div></div>' +
+            (fileChanges.length ? '<div class="file-changes"><div class="file-change-title">Files changed:</div>' +
+              fileChanges.map(function (fc) { return '<div class="file-change-item">' + escHtml(fc.filePath) + '</div>'; }).join('') +
+              '</div>' : '') +
+            '</div></div>';
+        }).join('')) +
+      '</div>';
+
+    document.getElementById('session-detail-content').innerHTML = html;
+
+    // Subscribe to real-time updates
+    socket.emit('subscribe:session', currentSessionId);
+  }
+
+  function infoItem(label, value) {
+    return '<div class="session-info-item"><label>' + label + '</label><span>' + escHtml(String(value)) + '</span></div>';
+  }
+
+  document.getElementById('back-btn').addEventListener('click', function () {
+    if (currentSessionId) socket.emit('unsubscribe:session', currentSessionId);
+    currentSessionId = null;
+    showPage('sessions');
+    loadSessions();
+  });
+
+  document.getElementById('refresh-btn').addEventListener('click', loadSessions);
+
+  document.getElementById('export-btn').addEventListener('click', function () {
+    if (currentSessionId) {
+      window.location.href = '/api/sessions/' + currentSessionId + '/export';
+    }
+  });
+
+  document.getElementById('delete-btn').addEventListener('click', function () {
+    if (!currentSessionId) return;
+    if (!confirm('Delete this session? This cannot be undone.')) return;
+    fetch('/api/sessions/' + currentSessionId, { method: 'DELETE' })
+      .then(function (r) { return r.json(); })
+      .then(function () {
+        showToast('Session deleted', 'success');
+        document.getElementById('back-btn').click();
+      })
+      .catch(function (err) { showToast('Error: ' + err.message, 'error'); });
+  });
+
+  // --- Settings ---
+  function loadSettings() {
+    fetch('/api/settings')
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        const f = document.getElementById('settings-form');
+        if (data.provider) f.provider.value = data.provider;
+        if (data.model) f.model.value = data.model;
+        if (data.port) f.port.value = data.port;
+        if (data.logLevel) f.logLevel.value = data.logLevel;
+      });
+  }
+
+  document.getElementById('settings-form').addEventListener('submit', function (e) {
+    e.preventDefault();
+    const f = e.target;
+    const body = {
+      provider: f.provider.value,
+      model: f.model.value,
+      port: parseInt(f.port.value) || 3000,
+      logLevel: f.logLevel.value,
+    };
+    fetch('/api/settings', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    })
+      .then(function () { showToast('Settings saved', 'success'); })
+      .catch(function (err) { showToast('Error: ' + err.message, 'error'); });
+  });
+
+  // Real-time session update
+  socket.on('session:updated', function (data) {
+    if (data.sessionId === currentSessionId) {
+      openSession(currentSessionId);
+    }
+  });
+
+  function escHtml(str) {
+    return String(str)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  // Init
+  loadSessions();
+  loadSettings();
+})();

package/dist/web/routes/sessions.d.ts

@@ -0,0 +1,4 @@
+import { Router } from 'express';
+import { SessionManager } from '../../session/session-manager';
+export declare function createSessionRoutes(sessionManager: SessionManager): Router;
+//# sourceMappingURL=sessions.d.ts.map

package/dist/web/routes/sessions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sessions.d.ts","sourceRoot":"","sources":["../../../src/web/routes/sessions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAqB,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,wBAAgB,mBAAmB,CAAC,cAAc,EAAE,cAAc,GAAG,MAAM,CA8C1E"}