@symerian/symi 3.4.30 → 3.4.32

package/dist/control-ui/js/app.js.pre-queue

@@ -1,476 +0,0 @@
-// ── 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 = '';
-  promptInput.style.height = 'auto'; // reset textarea height after send
-  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(); }
-});
-
-// ── Textarea auto-resize (up to 3 lines) ──────────────────────────
-function autoResizePrompt() {
-  promptInput.style.height = 'auto';
-  promptInput.style.height = promptInput.scrollHeight + 'px';
-}
-
-promptInput.addEventListener('input', autoResizePrompt);
-
-// Clicking anywhere on the prompt bar (padding, icon, gaps) focuses the input
-// Click anywhere on the main input row (not buttons) 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;
-  const inHistory    = document.getElementById('history-btn').contains(e.target);
-  // Only focus if clicking in the main row area (not the actions row)
-  const inActionsRow = e.target.closest('.prompt-row-actions');
-  if (!inSend && !inNewSession && !inHistory && !inActionsRow) {
-    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();