@symerian/symi 3.5.0 → 3.5.1

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

@@ -0,0 +1,293 @@
+// ── 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();