antri_cli 1.26.0 → 1.27.0

package/dist/desktop/public/app.js

@@ -0,0 +1,459 @@
+// ANTRI Desktop Control Plane Client Engine
+
+let currentConfig = null;
+let activeTab = 'chat';
+
+// Initialize on Load
+document.addEventListener('DOMContentLoaded', async () => {
+  await loadStatus();
+  await loadProfiles();
+  await loadSkills();
+  await loadMemory();
+});
+
+// Load System Status & Config
+async function loadStatus() {
+  try {
+    const res = await fetch('/api/status');
+    const data = await res.json();
+    currentConfig = data.config;
+
+    // Update Mode buttons
+    switchMode(currentConfig.mode || 'vibe', false);
+
+    // Update Perms badge
+    updatePermsBadge(currentConfig.alwaysAllow);
+
+    // Update Provider selector
+    const provSelect = document.getElementById('select-provider');
+    if (provSelect) provSelect.value = currentConfig.provider;
+
+    await loadModels();
+  } catch (err) {
+    console.error('Failed to load status:', err);
+  }
+}
+
+// Load Models for Provider
+async function loadModels() {
+  try {
+    const res = await fetch('/api/models');
+    const data = await res.json();
+    const modelSelect = document.getElementById('select-model');
+    modelSelect.innerHTML = '';
+
+    data.models.forEach((m) => {
+      const opt = document.createElement('option');
+      opt.value = m.id;
+      opt.textContent = `${m.name} (${m.category})`;
+      if (m.id === currentConfig.model) opt.selected = true;
+      modelSelect.appendChild(opt);
+    });
+  } catch (err) {
+    console.error('Failed to load models:', err);
+  }
+}
+
+// Switch Mode (Plan / Vibe)
+async function switchMode(mode, triggerSave = true) {
+  const btnVibe = document.getElementById('btn-mode-vibe');
+  const btnPlan = document.getElementById('btn-mode-plan');
+
+  if (mode === 'plan') {
+    btnPlan.classList.add('active');
+    btnVibe.classList.remove('active');
+  } else {
+    btnVibe.classList.add('active');
+    btnPlan.classList.remove('active');
+  }
+
+  if (triggerSave && currentConfig) {
+    currentConfig.mode = mode;
+    await fetch('/api/config', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ mode }),
+    });
+  }
+}
+
+// Toggle Always-Allow Permissions
+async function toggleAlwaysAllow() {
+  if (!currentConfig) return;
+  const next = !currentConfig.alwaysAllow;
+  currentConfig.alwaysAllow = next;
+  updatePermsBadge(next);
+
+  await fetch('/api/config', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ alwaysAllow: next }),
+  });
+}
+
+function updatePermsBadge(alwaysAllow) {
+  const badge = document.getElementById('perms-text');
+  if (alwaysAllow) {
+    badge.textContent = 'Always-Allow';
+  } else {
+    badge.textContent = 'Ask-First';
+  }
+}
+
+// Provider & Model Handlers
+async function onProviderChange(provider) {
+  await fetch('/api/config', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ provider }),
+  });
+  await loadStatus();
+}
+
+async function onModelChange(model) {
+  await fetch('/api/config', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ model }),
+  });
+}
+
+// Tab Switching
+function showTab(tabName) {
+  activeTab = tabName;
+  document.querySelectorAll('.tab-panel').forEach((el) => el.classList.remove('active'));
+  document.querySelectorAll('.nav-item').forEach((el) => el.classList.remove('active'));
+
+  const targetPanel = document.getElementById(`tab-${tabName}`);
+  if (targetPanel) targetPanel.classList.add('active');
+
+  const navIndex = ['chat', 'dialectic', 'goal', 'profiles', 'skills', 'memory'].indexOf(tabName);
+  const navButtons = document.querySelectorAll('.nav-item');
+  if (navButtons[navIndex]) navButtons[navIndex].classList.add('active');
+}
+
+// Chat Prompt Submission with SSE Streaming
+async function submitPrompt() {
+  const input = document.getElementById('prompt-input');
+  const prompt = input.value.trim();
+  if (!prompt) return;
+
+  input.value = '';
+
+  // Intercept /debate or /goal inside chat
+  if (prompt.startsWith('/debate')) {
+    showTab('dialectic');
+    document.getElementById('debate-query-input').value = prompt.replace('/debate', '').trim();
+    startDebate();
+    return;
+  }
+  if (prompt.startsWith('/goal') || prompt.startsWith('/loop')) {
+    showTab('goal');
+    document.getElementById('goal-objective-input').value = prompt.replace(/^\/(goal|loop)/, '').trim();
+    startGoalLoop();
+    return;
+  }
+
+  appendMessage('user', prompt);
+
+  const assistantMsgEl = appendMessage('assistant', '');
+  const contentEl = assistantMsgEl.querySelector('.msg-content');
+
+  const sendBtn = document.getElementById('send-btn');
+  sendBtn.disabled = true;
+  sendBtn.textContent = 'Thinking...';
+
+  try {
+    const response = await fetch('/api/chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ prompt }),
+    });
+
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let accumulated = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      const chunk = decoder.decode(value);
+      const lines = chunk.split('\n');
+
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          try {
+            const data = JSON.parse(line.slice(6));
+            if (data.token) {
+              accumulated += data.token;
+              contentEl.textContent = accumulated;
+              scrollToBottom();
+            } else if (data.name && data.arguments) {
+              // Tool call badge
+              const toolBadge = document.createElement('div');
+              toolBadge.className = 'tool-badge-pill';
+              toolBadge.textContent = `Tool: ${data.name}`;
+              assistantMsgEl.insertBefore(toolBadge, contentEl);
+            }
+          } catch (e) {}
+        }
+      }
+    }
+  } catch (err) {
+    contentEl.textContent = `Error: ${err.message}`;
+  } finally {
+    sendBtn.disabled = false;
+    sendBtn.innerHTML = '<span>Send</span>';
+  }
+}
+
+function appendMessage(role, text) {
+  const container = document.getElementById('chat-messages');
+  const row = document.createElement('div');
+  row.className = `msg-row ${role}`;
+  const content = document.createElement('div');
+  content.className = 'msg-content';
+  content.textContent = text;
+  row.appendChild(content);
+  container.appendChild(row);
+  scrollToBottom();
+  return row;
+}
+
+function scrollToBottom() {
+  const container = document.getElementById('chat-messages');
+  container.scrollTop = container.scrollHeight;
+}
+
+function setPrompt(text) {
+  const input = document.getElementById('prompt-input');
+  input.value = text;
+  input.focus();
+}
+
+function handleInputKey(event) {
+  if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+    event.preventDefault();
+    submitPrompt();
+  }
+}
+
+// Dialectic Debate Runner
+async function startDebate() {
+  const input = document.getElementById('debate-query-input');
+  const query = input.value.trim();
+  if (!query) return;
+
+  const depth = document.getElementById('debate-depth-select').value;
+
+  document.getElementById('dialectic-thesis').textContent = 'Generating initial thesis & hypothesis...';
+  document.getElementById('dialectic-antithesis').textContent = 'Awaiting thesis to challenge assumptions...';
+  document.getElementById('dialectic-verification').textContent = 'Researcher standby for fact-checking...';
+  document.getElementById('dialectic-synthesis').textContent = 'Synthesizer awaiting debate completion...';
+
+  try {
+    const res = await fetch('/api/debate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ query, depth }),
+    });
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      const chunk = decoder.decode(value);
+      const lines = chunk.split('\n');
+
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          try {
+            const data = JSON.parse(line.slice(6));
+            if (data.thesis) document.getElementById('dialectic-thesis').textContent = data.thesis;
+            if (data.antithesis) document.getElementById('dialectic-antithesis').textContent = data.antithesis;
+            if (data.verification) document.getElementById('dialectic-verification').textContent = data.verification;
+            if (data.synthesis) document.getElementById('dialectic-synthesis').textContent = data.synthesis;
+          } catch (e) {}
+        }
+      }
+    }
+  } catch (err) {
+    document.getElementById('dialectic-synthesis').textContent = `Debate error: ${err.message}`;
+  }
+}
+
+// Goal Loop Runner
+async function startGoalLoop() {
+  const input = document.getElementById('goal-objective-input');
+  const objective = input.value.trim();
+  if (!objective) return;
+
+  document.getElementById('goal-stage-1-content').textContent = 'Stage 1 executing: Drafting initial plan and solution...';
+  document.getElementById('goal-stage-2-content').textContent = 'Stage 2 standby: Awaiting draft for adversarial critique...';
+  document.getElementById('goal-stage-3-content').textContent = 'Stage 3 standby: Awaiting synthesis for hardened output...';
+
+  try {
+    const res = await fetch('/api/goal', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ objective }),
+    });
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      const chunk = decoder.decode(value);
+      const lines = chunk.split('\n');
+
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          try {
+            const data = JSON.parse(line.slice(6));
+            if (data.draft) document.getElementById('goal-stage-1-content').textContent = data.draft;
+            if (data.critique) document.getElementById('goal-stage-2-content').textContent = data.critique;
+            if (data.finalOutput) document.getElementById('goal-stage-3-content').textContent = data.finalOutput;
+          } catch (e) {}
+        }
+      }
+    }
+  } catch (err) {
+    document.getElementById('goal-stage-3-content').textContent = `Goal execution error: ${err.message}`;
+  }
+}
+
+// Profile Management
+async function loadProfiles() {
+  try {
+    const res = await fetch('/api/profiles');
+    const data = await res.json();
+
+    const select = document.getElementById('select-profile');
+    const list = document.getElementById('profile-items-list');
+    select.innerHTML = '';
+    list.innerHTML = '';
+
+    data.profiles.forEach((p) => {
+      // Dropdown option
+      const opt = document.createElement('option');
+      opt.value = p.name;
+      opt.textContent = p.name;
+      if (p.name === data.activeName) opt.selected = true;
+      select.appendChild(opt);
+
+      // List button
+      const btn = document.createElement('button');
+      btn.className = `profile-item-btn ${p.name === data.activeName ? 'active' : ''}`;
+      btn.textContent = `${p.name}.md`;
+      btn.onclick = () => selectProfile(p.name);
+      list.appendChild(btn);
+    });
+
+    document.getElementById('active-profile-title').textContent = `${data.activeName}.md`;
+    document.getElementById('profile-editor').value = data.activeContent || '';
+  } catch (err) {
+    console.error('Failed to load profiles:', err);
+  }
+}
+
+async function selectProfile(name) {
+  await fetch('/api/profile/select', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name }),
+  });
+  await loadProfiles();
+}
+
+async function createProfile() {
+  const input = document.getElementById('new-profile-name');
+  const name = input.value.trim();
+  if (!name) return;
+
+  await fetch('/api/profile/create', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name }),
+  });
+
+  input.value = '';
+  await loadProfiles();
+}
+
+async function saveActiveProfile() {
+  const content = document.getElementById('profile-editor').value;
+  await fetch('/api/profile/save', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ content }),
+  });
+  alert('Profile saved.');
+}
+
+async function onProfileChange(name) {
+  await selectProfile(name);
+}
+
+// Skills & Memory Loaders
+async function loadSkills() {
+  try {
+    const res = await fetch('/api/skills');
+    const data = await res.json();
+    const grid = document.getElementById('skills-catalog-grid');
+    grid.innerHTML = '';
+
+    data.allTools.forEach((t) => {
+      const card = document.createElement('div');
+      card.className = 'skill-card';
+      card.innerHTML = `
+        <h4>${t.name}</h4>
+        <p>${t.description}</p>
+        <button class="skill-btn" onclick="testSkill('${t.name}')">Dry-Run Skill</button>
+      `;
+      grid.appendChild(card);
+    });
+  } catch (err) {
+    console.error('Failed to load skills:', err);
+  }
+}
+
+async function testSkill(skillName) {
+  try {
+    const res = await fetch('/api/skill/test', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ skillName, args: {} }),
+    });
+    const data = await res.json();
+    alert(`Skill '${skillName}' Output:\n${data.output || 'Execution complete'}`);
+  } catch (err) {
+    alert(`Execution failed: ${err.message}`);
+  }
+}
+
+async function loadMemory() {
+  try {
+    const res = await fetch('/api/memory');
+    const data = await res.json();
+
+    const semanticList = document.getElementById('semantic-memory-list');
+    const episodicList = document.getElementById('episodic-memory-list');
+
+    semanticList.innerHTML = (data.semanticItems || [])
+      .map((item) => `<div style="margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-light); padding-bottom: 0.5rem;"><b>[${item.category}]</b> ${item.text}</div>`)
+      .join('') || '<div>No semantic vectors stored yet.</div>';
+
+    episodicList.innerHTML = (data.episodes || [])
+      .map((ep) => `<div style="margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-light); padding-bottom: 0.5rem;"><b>Query:</b> ${ep.query}<br/><span style="color: var(--text-tertiary);">${ep.response.slice(0, 100)}...</span></div>`)
+      .join('') || '<div>No episodes recorded in current session.</div>';
+  } catch (err) {
+    console.error('Failed to load memory:', err);
+  }
+}