@symerian/symi 3.5.0 → 3.5.1

package/dist/control-ui/js/app.js.pre-2row

@@ -0,0 +1,463 @@
+// ── Symi UI — Live Gateway App ────────────────────────────────────────
+
+const responseArea  = document.getElementById('response-area');
+const promptInput   = document.getElementById('prompt-input');
+const sendBtn       = document.getElementById('send-btn');
+const newSessionBtn = document.getElementById('new-session-btn');
+
+let isStreaming    = false;
+let currentRunId   = null;
+let streamBubble   = null;
+let streamContent  = null;
+let streamStart    = 0;
+
+// ── Watchdog + elapsed timer state ────────────────────────────────
+let watchdogTimer    = null;   // fires if no activity for WATCHDOG_MS
+let elapsedTimer     = null;   // ticks every second to show run duration
+let activityStart    = 0;      // timestamp of when current run began
+let elapsedBaseText  = '';     // base sub-text for the elapsed display
+const WATCHDOG_MS    = 90000;  // 90 seconds of silence → failure
+
+// ── Utility ───────────────────────────────────────────────────────
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+function escapeHtml(t) {
+  return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+
+// ── Status indicator (top-right of response area) ─────────────────
+const statusEl = document.createElement('div');
+statusEl.className = 'conn-status';
+statusEl.innerHTML = '<span class="conn-dot dot-yellow pulse"></span><span class="conn-label">connecting…</span>';
+responseArea.before(statusEl);
+
+function setStatus(state) { // 'connecting' | 'online' | 'offline'
+  const dot   = statusEl.querySelector('.conn-dot');
+  const label = statusEl.querySelector('.conn-label');
+  dot.className   = `conn-dot ${state === 'online' ? 'dot-green pulse' : state === 'offline' ? 'dot-red' : 'dot-yellow pulse'}`;
+  label.textContent = state === 'online' ? 'live' : state === 'offline' ? 'disconnected' : 'connecting…';
+}
+
+// ── Render helpers ─────────────────────────────────────────────────
+function addUserMessage(text) {
+  const msg = document.createElement('div');
+  msg.className = 'message user-msg';
+  msg.innerHTML = `<div class="bubble">${escapeHtml(text)}</div><div class="message-clearfix"></div>`;
+  responseArea.appendChild(msg);
+  msg.scrollIntoView({ behavior: 'smooth', block: 'end' });
+}
+
+// ── Thinking bubble ────────────────────────────────────────────────
+function createThinkingBubble() {
+  const msg = document.createElement('div');
+  msg.className = 'message symi-msg thinking-msg';
+  msg.innerHTML = `
+    <div class="bubble thinking-bubble">
+      <div class="think-header">
+        <span class="think-badge">◈ PROCESSING</span>
+        <span class="think-dots"><span>.</span><span>.</span><span>.</span></span>
+      </div>
+      <div class="think-bar-wrap"><div class="think-bar"></div></div>
+    </div>
+    <div class="message-clearfix"></div>
+  `;
+  responseArea.appendChild(msg);
+  msg.scrollIntoView({ behavior: 'smooth', block: 'end' });
+  return msg;
+}
+
+// ── Stream bubble lifecycle ────────────────────────────────────────
+function openStreamBubble() {
+  streamStart = Date.now();
+  const msg = document.createElement('div');
+  msg.className = 'message symi-msg stream-msg';
+  msg.innerHTML = `<div class="bubble stream-bubble streaming"><div class="bubble-content"></div></div><div class="message-clearfix"></div>`;
+  responseArea.appendChild(msg);
+  streamBubble  = msg.querySelector('.stream-bubble');
+  streamContent = msg.querySelector('.bubble-content');
+  msg.scrollIntoView({ behavior: 'smooth', block: 'end' });
+  return msg;
+}
+
+function updateStream(text) {
+  if (!streamContent) return;
+  streamContent.textContent = text;
+  responseArea.scrollTop = responseArea.scrollHeight;
+}
+
+function closeStreamBubble(model = 'claude-sonnet-4-6') {
+  if (!streamBubble) return;
+  streamBubble.classList.remove('streaming');
+  streamBubble.classList.add('done');
+
+  // Apply full markdown rendering to the final text
+  const rawText = streamContent?.textContent ?? '';
+  if (streamContent && rawText) {
+    streamContent.innerHTML = '';
+    const textBlock = renderBlock({ type: 'text', text: rawText });
+    streamContent.appendChild(textBlock);
+    window.applyHighlighting(streamContent);
+  }
+
+  const elapsed = Date.now() - streamStart;
+  const chars   = Math.round(rawText.length / 4);
+
+  // Add copy button
+  const copyBtn = document.createElement('button');
+  copyBtn.className = 'msg-copy-btn msg-copy-visible';
+  copyBtn.title = 'Copy';
+  copyBtn.onclick = function() { window.copyMessage(this); };
+  copyBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none">
+    <rect x="9" y="9" width="13" height="13" rx="2" stroke="currentColor" stroke-width="2"/>
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke="currentColor" stroke-width="2"/>
+  </svg>`;
+  streamBubble.appendChild(copyBtn);
+
+  const footer = document.createElement('div');
+  footer.className = 'telemetry';
+  footer.innerHTML = `
+    <span class="tele-item">✦ ${model}</span>
+    <span class="tele-sep">·</span>
+    <span class="tele-item">${chars} tokens</span>
+    <span class="tele-sep">·</span>
+    <span class="tele-item">${elapsed}ms</span>
+  `;
+  streamBubble.appendChild(footer);
+  requestAnimationFrame(() => {
+    footer.classList.add('tele-visible');
+    // Scroll to bottom immediately after markdown + footer are in the DOM
+    responseArea.scrollTop = responseArea.scrollHeight;
+  });
+
+  // Second scroll after the fit-content width transition finishes (0.3s)
+  setTimeout(() => { responseArea.scrollTop = responseArea.scrollHeight; }, 350);
+
+  streamBubble  = null;
+  streamContent = null;
+}
+
+// ── Elapsed timer ─────────────────────────────────────────────────
+function startElapsedTimer(baseText) {
+  stopElapsedTimer();
+  activityStart   = Date.now();
+  elapsedBaseText = baseText;
+  elapsedTimer    = setInterval(() => {
+    const secs = Math.floor((Date.now() - activityStart) / 1000);
+    const m    = Math.floor(secs / 60);
+    const s    = String(secs % 60).padStart(2, '0');
+    if (asoSub) asoSub.textContent = `${elapsedBaseText}  ${m}:${s}`;
+  }, 1000);
+}
+
+function stopElapsedTimer() {
+  if (elapsedTimer) { clearInterval(elapsedTimer); elapsedTimer = null; }
+}
+
+// ── Watchdog ───────────────────────────────────────────────────────
+function armWatchdog() {
+  clearWatchdog();
+  watchdogTimer = setTimeout(() => handleRunFailure('timeout'), WATCHDOG_MS);
+}
+
+function clearWatchdog() {
+  if (watchdogTimer) { clearTimeout(watchdogTimer); watchdogTimer = null; }
+}
+
+// ── Unified run failure handler ────────────────────────────────────
+// Called when: watchdog fires, gateway disconnects mid-run, or server
+// sends an explicit error event. Cleans up all state and shows the user
+// a clear error message + ERROR orb state.
+function handleRunFailure(reason) {
+  // Stop timers immediately
+  stopElapsedTimer();
+  clearWatchdog();
+
+  // Clean up any in-flight UI elements
+  if (thinkingEl) { thinkingEl.remove(); thinkingEl = null; }
+  if (streamBubble) {
+    // Don't render markdown on a partial/failed response — just mark it failed
+    streamBubble.classList.remove('streaming');
+    streamBubble.classList.add('done', 'stream-failed');
+    streamBubble = null;
+    streamContent = null;
+  }
+
+  // Human-readable reason labels
+  const labels = {
+    timeout:      `No response received after ${WATCHDOG_MS / 1000}s — the agent may still be running in the background`,
+    disconnected: 'Connection lost mid-run — gateway disconnected',
+  };
+  const label = labels[reason] || reason;
+
+  // Inject error bubble into the feed
+  const errEl = document.createElement('div');
+  errEl.className = 'message symi-msg';
+  errEl.innerHTML = `
+    <div class="bubble stream-bubble done run-error-bubble">
+      <div class="run-error-icon">⚠</div>
+      <div class="bubble-content run-error-text">${escapeHtml(label)}</div>
+    </div>
+    <div class="message-clearfix"></div>
+  `;
+  responseArea.appendChild(errEl);
+  requestAnimationFrame(() => { responseArea.scrollTop = responseArea.scrollHeight; });
+
+  // Show ERROR state on orb, then reset input
+  setAgentStatus('error');
+  isStreaming  = false;
+  currentRunId = null;
+  enableInput();
+}
+
+// ── Render history (on first connect) ─────────────────────────────
+function renderHistory(messages) {
+  responseArea.innerHTML = '';
+  for (const m of messages) {
+    if (!m || !m.role) continue;
+    const hasContent = Array.isArray(m.content)
+      ? m.content.some(b => (b.text ?? b.thinking ?? b.name ?? '').trim())
+      : extractText(m.content).trim();
+    if (!hasContent) continue;
+
+    const el = window.renderMessage(m);
+    responseArea.appendChild(el);
+    window.applyHighlighting(el);
+  }
+
+  // Scroll to very bottom after history renders
+  requestAnimationFrame(() => { responseArea.scrollTop = responseArea.scrollHeight; });
+}
+
+// ── Gateway event handler ──────────────────────────────────────────
+let thinkingEl = null;
+
+function handleGatewayEvent(event) {
+  if (event.event !== 'chat') return;
+  const p = event.payload;
+  if (!p || p.sessionKey !== window.SESSION_KEY) return;
+
+  if (p.state === 'delta') {
+    // Each delta proves the agent is alive — reset the watchdog
+    armWatchdog();
+
+    // First delta — remove thinking bubble, open stream bubble
+    if (thinkingEl) { thinkingEl.remove(); thinkingEl = null; }
+    if (!streamBubble) {
+      openStreamBubble();
+      setAgentStatus('streaming');
+    }
+
+    const text = extractText(p.message);
+    if (text) updateStream(text);
+
+  } else if (p.state === 'final') {
+    stopElapsedTimer();
+    clearWatchdog();
+    closeStreamBubble();
+    setAgentStatus('done');
+    isStreaming  = false;
+    currentRunId = null;
+    enableInput();
+
+  } else if (p.state === 'aborted') {
+    // Clean abort (user-initiated or model decided to stop) — not an error
+    stopElapsedTimer();
+    clearWatchdog();
+    if (streamBubble) closeStreamBubble();
+    if (thinkingEl) { thinkingEl.remove(); thinkingEl = null; }
+    setAgentStatus('idle');
+    isStreaming  = false;
+    currentRunId = null;
+    enableInput();
+
+  } else if (p.state === 'error') {
+    // Server-reported error — route through unified failure handler
+    handleRunFailure(p.error?.message || 'Server reported an error');
+  }
+}
+
+// ── Agent Status Orb ───────────────────────────────────────────────
+const asoPanel = document.getElementById('agent-status-panel');
+const asoLabel = document.getElementById('aso-label');
+const asoSub   = document.getElementById('aso-sub');
+let   asoDoneTimer = null;
+
+const ASO_STATES = {
+  idle:      { state: 'idle',      label: 'STANDBY',    sub: 'Awaiting your prompt'          },
+  waiting:   { state: 'waiting',   label: 'WAITING',    sub: 'Sending to Symi\u2026'         },
+  thinking:  { state: 'thinking',  label: 'PROCESSING', sub: 'Reasoning through request'     },
+  streaming: { state: 'streaming', label: 'RESPONDING', sub: 'Generating response'            },
+  done:      { state: 'done',      label: 'COMPLETE',   sub: 'Response ready'                },
+  error:     { state: 'error',     label: 'FAILED',     sub: 'Run ended unexpectedly'         },
+};
+
+function setAgentStatus(key) {
+  if (!asoPanel) return;
+
+  // Clear any pending auto-transition timers
+  if (asoDoneTimer) { clearTimeout(asoDoneTimer); asoDoneTimer = null; }
+
+  const s = ASO_STATES[key] || ASO_STATES.idle;
+  asoPanel.dataset.state = s.state;
+  if (asoLabel) asoLabel.textContent = s.label;
+  if (asoSub)   asoSub.textContent   = s.sub;
+
+  // ── Elapsed timer management ──────────────────────────────────
+  if (key === 'thinking') {
+    // Start elapsed timer and watchdog when processing begins
+    armWatchdog();
+    startElapsedTimer('Reasoning through request');
+  } else if (key === 'streaming') {
+    // Transition from thinking → streaming: keep watchdog running (will be
+    // reset on each delta), switch elapsed timer base text
+    elapsedBaseText = 'Generating response';
+  } else {
+    // Any terminal/non-active state: stop elapsed timer and watchdog
+    stopElapsedTimer();
+    clearWatchdog();
+  }
+
+  // ── Auto-revert timers ────────────────────────────────────────
+  if (key === 'done') {
+    asoDoneTimer = setTimeout(() => setAgentStatus('idle'), 3000);
+  }
+  if (key === 'error') {
+    asoDoneTimer = setTimeout(() => setAgentStatus('idle'), 4000);
+  }
+}
+
+// ── Input state ────────────────────────────────────────────────────
+function disableInput() {
+  promptInput.disabled     = true;
+  sendBtn.disabled         = true;
+  newSessionBtn.disabled   = true;
+  sendBtn.classList.add('btn-loading');
+}
+
+function enableInput() {
+  promptInput.disabled     = false;
+  sendBtn.disabled         = false;
+  newSessionBtn.disabled   = false;
+  sendBtn.classList.remove('btn-loading');
+  promptInput.focus();
+}
+
+// ── Send handler ───────────────────────────────────────────────────
+async function handleSend() {
+  if (isStreaming || !gateway.connected) return;
+  const text = promptInput.value.trim();
+  if (!text) return;
+
+  isStreaming = true;
+  promptInput.value = '';
+  disableInput();
+
+  addUserMessage(text);
+  await sleep(200);
+
+  setAgentStatus('waiting');
+  thinkingEl = createThinkingBubble();
+  setAgentStatus('thinking');
+
+  try {
+    await gateway.send(text);
+    // Response will arrive via chat events — watchdog is now armed
+  } catch (err) {
+    // gateway.send() itself failed (e.g. not connected, network error)
+    handleRunFailure(err.message || 'Failed to send message');
+  }
+}
+
+// ── New Session handler ────────────────────────────────────────────
+async function handleNewSession() {
+  if (isStreaming || !gateway.connected) return;
+
+  disableInput();
+  setAgentStatus('waiting');
+
+  try {
+    // Send the /new slash command — gateway resets the session
+    await gateway.send('/new');
+
+    // Fade out existing messages, then show cleared state
+    responseArea.style.transition = 'opacity 0.25s ease';
+    responseArea.style.opacity    = '0';
+
+    await sleep(260);
+
+    responseArea.innerHTML = '';
+    responseArea.style.opacity = '1';
+
+    // Show empty-state indicator
+    const cleared = document.createElement('div');
+    cleared.className = 'session-cleared';
+    cleared.innerHTML = `
+      <div class="session-cleared-icon">◈</div>
+      <div class="session-cleared-text">NEW SESSION STARTED</div>
+    `;
+    responseArea.appendChild(cleared);
+
+    setAgentStatus('idle');
+
+    // Show archive toast — lets user jump directly to history if they regret it
+    if (typeof window.showArchiveToast === 'function') window.showArchiveToast();
+
+    // After a short pause, remove the cleared indicator and let history load
+    await sleep(1800);
+    cleared.style.transition = 'opacity 0.4s ease';
+    cleared.style.opacity    = '0';
+    await sleep(420);
+    cleared.remove();
+
+  } catch (err) {
+    handleRunFailure(err.message || 'Failed to start new session');
+    return;
+  }
+
+  enableInput();
+}
+
+sendBtn.addEventListener('click', handleSend);
+newSessionBtn.addEventListener('click', handleNewSession);
+promptInput.addEventListener('keydown', e => {
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); }
+});
+
+// Clicking anywhere on the prompt bar (padding, icon, gaps) focuses the input
+document.getElementById('prompt-bar').addEventListener('click', e => {
+  const inSend       = sendBtn.contains(e.target)       || e.target === sendBtn;
+  const inNewSession = newSessionBtn.contains(e.target) || e.target === newSessionBtn;
+  if (!inSend && !inNewSession) {
+    promptInput.focus();
+  }
+});
+
+// ── Gateway setup ──────────────────────────────────────────────────
+const gateway = new SymiGateway();
+
+gateway.addEventListener('connect', () => {
+  setStatus('online');
+  enableInput();
+  // History arrives via separate 'history' event pushed by the server
+});
+
+gateway.addEventListener('history', (e) => {
+  const msgs = Array.isArray(e.detail?.messages) ? e.detail.messages : [];
+  renderHistory(msgs);
+});
+
+gateway.addEventListener('disconnect', () => {
+  setStatus('offline');
+  // If the gateway drops while a run is in progress, surface the failure
+  // immediately rather than leaving the UI in a permanently locked state.
+  if (isStreaming) {
+    handleRunFailure('disconnected');
+  }
+});
+
+gateway.addEventListener('event', (e) => {
+  handleGatewayEvent(e.detail);
+});
+
+// Start connecting
+disableInput();
+gateway.start();