@symerian/symi 3.4.30 → 3.4.32

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

@@ -1,293 +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');
-
-let isStreaming    = false;
-let currentRunId   = null;
-let streamBubble   = null;
-let streamContent  = null;
-let streamStart    = 0;
-
-// ── 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;
-}
-
-// ── 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') {
-    // 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') {
-    closeStreamBubble();
-    setAgentStatus('done');
-    isStreaming  = false;
-    currentRunId = null;
-    enableInput();
-
-  } else if (p.state === 'aborted' || p.state === 'error') {
-    if (streamBubble) closeStreamBubble();
-    if (thinkingEl) { thinkingEl.remove(); thinkingEl = null; }
-    setAgentStatus('idle');
-    isStreaming  = false;
-    currentRunId = null;
-    enableInput();
-  }
-}
-
-// ── 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'             },
-};
-
-function setAgentStatus(key) {
-  if (!asoPanel) return;
-  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;
-  if (key === 'done') {
-    asoDoneTimer = setTimeout(() => setAgentStatus('idle'), 3000);
-  }
-}
-
-// ── Input state ────────────────────────────────────────────────────
-function disableInput() {
-  promptInput.disabled = true;
-  sendBtn.disabled     = true;
-  sendBtn.classList.add('btn-loading');
-}
-
-function enableInput() {
-  promptInput.disabled = false;
-  sendBtn.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
-  } catch (err) {
-    if (thinkingEl) { thinkingEl.remove(); thinkingEl = null; }
-    setAgentStatus('idle');
-    const errMsg = document.createElement('div');
-    errMsg.className = 'message symi-msg';
-    errMsg.innerHTML = `<div class="bubble stream-bubble done"><div class="bubble-content" style="color:var(--accent-pink)">Error: ${escapeHtml(err.message)}</div></div><div class="message-clearfix"></div>`;
-    responseArea.appendChild(errMsg);
-    isStreaming = false;
-    enableInput();
-  }
-}
-
-sendBtn.addEventListener('click', handleSend);
-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 => {
-  if (e.target !== sendBtn && !sendBtn.contains(e.target)) {
-    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');
-});
-
-gateway.addEventListener('event', (e) => {
-  handleGatewayEvent(e.detail);
-});
-
-// Start connecting
-disableInput();
-gateway.start();