@versdotsh/reef 0.1.2

package/services/ui/static/app.js

@@ -0,0 +1,369 @@
+// =============================================================================
+// reef UI — dynamic panel discovery + built-in chat
+// =============================================================================
+
+const API = PANEL_API; // set in index.html
+
+function esc(s) {
+  const d = document.createElement('div');
+  d.textContent = s || '';
+  return d.innerHTML;
+}
+
+function timeAgo(iso) {
+  const ms = Date.now() - new Date(iso).getTime();
+  if (ms < 60000) return `${Math.floor(ms / 1000)}s ago`;
+  if (ms < 3600000) return `${Math.floor(ms / 60000)}m ago`;
+  if (ms < 86400000) return `${Math.floor(ms / 3600000)}h ago`;
+  return `${Math.floor(ms / 86400000)}d ago`;
+}
+
+// =============================================================================
+// Panel discovery
+// =============================================================================
+
+const tabsEl = document.getElementById('tabs');
+const panelsEl = document.getElementById('panels');
+const statusEl = document.getElementById('status');
+let activeTab = null;
+const loadedPanels = new Map(); // name → container element
+
+async function discoverPanels() {
+  try {
+    // Get loaded services
+    const res = await fetch(`${API}/services`);
+    if (!res.ok) throw new Error(`${res.status}`);
+    const data = await res.json();
+    const services = data.modules || data.services || (Array.isArray(data) ? data : []);
+
+    // Try to fetch _panel for each service (skip ui itself)
+    const panelResults = await Promise.allSettled(
+      services
+        .filter(s => s.name !== 'ui')
+        .map(async (s) => {
+          const r = await fetch(`${API}/${s.name}/_panel`);
+          if (!r.ok) return null;
+          const ct = r.headers.get('content-type') || '';
+          if (!ct.includes('html')) return null;
+          return { name: s.name, html: await r.text() };
+        })
+    );
+
+    const panels = panelResults
+      .filter(r => r.status === 'fulfilled' && r.value)
+      .map(r => r.value);
+
+    // Build tabs: discovered panels first, then chat
+    tabsEl.innerHTML = '';
+
+    for (const panel of panels) {
+      addTab(panel.name, panel.name);
+    }
+    addTab('chat', 'Chat');
+
+    // Inject panel HTML
+    for (const panel of panels) {
+      if (!loadedPanels.has(panel.name)) {
+        const container = document.createElement('div');
+        container.className = 'panel-view';
+        container.id = `view-${panel.name}`;
+        container.dataset.api = API;
+        panelsEl.appendChild(container);
+        injectPanel(container, panel.html);
+        loadedPanels.set(panel.name, container);
+      }
+    }
+
+    // Remove panels for services that were unloaded
+    const activeNames = new Set(panels.map(p => p.name));
+    for (const [name, el] of loadedPanels) {
+      if (!activeNames.has(name)) {
+        el.remove();
+        loadedPanels.delete(name);
+        // Remove tab
+        tabsEl.querySelector(`[data-view="${name}"]`)?.remove();
+      }
+    }
+
+    // Activate first tab if none active
+    if (!activeTab || !document.getElementById(`view-${activeTab}`)) {
+      const first = panels[0]?.name || 'chat';
+      switchTab(first);
+    }
+
+    setStatus('ok', `${panels.length} panels`);
+  } catch (e) {
+    setStatus('err', e.message);
+  }
+}
+
+function addTab(name, label) {
+  const btn = document.createElement('button');
+  btn.className = 'tab' + (activeTab === name ? ' active' : '');
+  btn.dataset.view = name;
+  btn.textContent = label;
+  btn.addEventListener('click', () => switchTab(name));
+  tabsEl.appendChild(btn);
+}
+
+function switchTab(name) {
+  activeTab = name;
+
+  // Update tab highlight
+  tabsEl.querySelectorAll('.tab').forEach(t => {
+    t.classList.toggle('active', t.dataset.view === name);
+  });
+
+  // Show/hide panels
+  document.querySelectorAll('.panel-view').forEach(v => {
+    v.classList.toggle('active', v.id === `view-${name}`);
+  });
+
+  // Lazy-start chat session
+  if (name === 'chat') {
+    if (!chatSessionId) chatCreateSession();
+    document.getElementById('chat-input')?.focus();
+  }
+}
+
+function injectPanel(container, html) {
+  // Inject HTML without scripts
+  const temp = document.createElement('div');
+  temp.innerHTML = html;
+
+  // Extract scripts
+  const scripts = [];
+  temp.querySelectorAll('script').forEach(s => {
+    scripts.push(s.textContent);
+    s.remove();
+  });
+
+  // Inject HTML
+  container.innerHTML = temp.innerHTML;
+
+  // Execute scripts in order
+  for (const code of scripts) {
+    const s = document.createElement('script');
+    s.textContent = code;
+    container.appendChild(s);
+  }
+}
+
+function setStatus(state, text) {
+  statusEl.className = 'status ' + state;
+  statusEl.querySelector('.label').textContent = text;
+}
+
+// =============================================================================
+// Chat
+// =============================================================================
+
+let chatSessionId = null;
+let chatStreaming = false;
+let chatCurrentEl = null;
+let chatCurrentText = '';
+
+function chatEl(id) { return document.getElementById(id); }
+
+async function chatCreateSession() {
+  try {
+    const res = await fetch(`${API}/agent/sessions`, { method: 'POST' });
+    const data = await res.json();
+    if (data.error) throw new Error(data.error);
+    chatSessionId = data.id;
+    chatConnectSSE();
+    const empty = chatEl('chat-messages').querySelector('.chat-empty');
+    if (empty) empty.remove();
+  } catch (e) {
+    chatAddMsg('system', `Failed to start session: ${e.message}`);
+  }
+}
+
+function chatConnectSSE() {
+  if (!chatSessionId) return;
+  fetch(`${API}/agent/sessions/${chatSessionId}/events`)
+    .then(res => {
+      if (!res.ok) throw new Error(`SSE ${res.status}`);
+      chatReadSSE(res.body.getReader());
+    })
+    .catch(e => {
+      chatAddMsg('system', `Disconnected: ${e.message}`);
+      setTimeout(() => { if (chatSessionId) chatConnectSSE(); }, 3000);
+    });
+}
+
+async function chatReadSSE(reader) {
+  const dec = new TextDecoder();
+  let buf = '';
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buf += dec.decode(value, { stream: true });
+      const lines = buf.split('\n');
+      buf = lines.pop() || '';
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          try { chatHandleEvent(JSON.parse(line.slice(6))); } catch {}
+        }
+      }
+    }
+  } catch {}
+}
+
+function chatHandleEvent(e) {
+  switch (e.type) {
+    case 'agent_start':
+      chatStreaming = true;
+      chatEl('chat-send').textContent = 'Stop';
+      break;
+    case 'agent_end':
+      chatStreaming = false;
+      chatFinish();
+      chatEl('chat-send').textContent = 'Send';
+      break;
+    case 'message_update': {
+      const d = e.assistantMessageEvent;
+      if (d?.type === 'text_delta') {
+        chatEnsure();
+        chatCurrentText += d.delta;
+        chatRender();
+      }
+      break;
+    }
+    case 'tool_execution_start':
+      chatEnsure();
+      chatAddTool(e.toolCallId, e.toolName, e.args);
+      break;
+    case 'tool_execution_update':
+      chatUpdateTool(e.toolCallId, e.partialResult);
+      break;
+    case 'tool_execution_end':
+      chatUpdateTool(e.toolCallId, e.result, e.isError);
+      break;
+  }
+}
+
+function chatEnsure() {
+  if (chatCurrentEl) return;
+  chatCurrentEl = document.createElement('div');
+  chatCurrentEl.className = 'chat-msg';
+  chatCurrentEl.innerHTML = '<div class="chat-msg-role assistant">assistant</div><div class="chat-msg-content"></div>';
+  chatEl('chat-messages').appendChild(chatCurrentEl);
+  chatCurrentText = '';
+}
+
+function chatRender() {
+  if (!chatCurrentEl) return;
+  let t = chatCurrentEl.querySelector('.chat-text');
+  if (!t) {
+    t = document.createElement('span');
+    t.className = 'chat-text';
+    const c = chatCurrentEl.querySelector('.chat-msg-content');
+    c.insertBefore(t, c.firstChild);
+  }
+  t.innerHTML = chatMd(chatCurrentText) + '<span class="chat-cursor"></span>';
+  chatScroll();
+}
+
+function chatFinish() {
+  if (!chatCurrentEl) return;
+  const t = chatCurrentEl.querySelector('.chat-text');
+  if (t) t.innerHTML = chatMd(chatCurrentText);
+  chatCurrentEl.querySelector('.chat-cursor')?.remove();
+  chatCurrentEl = null;
+  chatCurrentText = '';
+}
+
+function chatAddTool(id, name, args) {
+  const preview = args
+    ? Object.values(args).map(v => { const s = typeof v === 'string' ? v : JSON.stringify(v); return s.length > 50 ? s.slice(0, 50) + '…' : s; }).join(', ')
+    : '';
+  const el = document.createElement('div');
+  el.className = 'chat-tool';
+  el.dataset.toolCallId = id;
+  el.innerHTML = `
+    <div class="chat-tool-header" onclick="this.querySelector('.chat-tool-arrow').classList.toggle('open');this.nextElementSibling.classList.toggle('open')">
+      <span class="chat-tool-arrow">▶</span>
+      <span>${esc(name)}(${esc(preview)})</span>
+    </div>
+    <div class="chat-tool-body"></div>`;
+  chatCurrentEl.querySelector('.chat-msg-content').appendChild(el);
+  chatScroll();
+}
+
+function chatUpdateTool(id, result, isError) {
+  const el = chatCurrentEl?.querySelector(`[data-tool-call-id="${id}"]`);
+  if (!el) return;
+  const body = el.querySelector('.chat-tool-body');
+  const text = result?.content?.filter(c => c.type === 'text').map(c => c.text).join('') || '';
+  body.textContent = text.slice(-2000);
+  if (isError) body.classList.add('chat-tool-error');
+}
+
+function chatAddMsg(role, text) {
+  const el = document.createElement('div');
+  el.className = 'chat-msg';
+  el.innerHTML = `<div class="chat-msg-role ${role}">${role === 'user' ? 'you' : role}</div><div class="chat-msg-content">${esc(text)}</div>`;
+  chatEl('chat-messages').appendChild(el);
+  chatScroll();
+}
+
+function chatMd(text) {
+  text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, l, c) => `<pre><code>${esc(c.trimEnd())}</code></pre>`);
+  text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
+  text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  return text.split(/(<pre>[\s\S]*?<\/pre>)/g).map(p => p.startsWith('<pre>') ? p : p.replace(/\n/g, '<br>')).join('');
+}
+
+function chatScroll() {
+  requestAnimationFrame(() => {
+    const el = chatEl('chat-messages');
+    el.scrollTop = el.scrollHeight;
+  });
+}
+
+async function chatSend() {
+  if (!chatSessionId) return;
+  if (chatStreaming) {
+    fetch(`${API}/agent/sessions/${chatSessionId}/abort`, { method: 'POST' }).catch(() => {});
+    return;
+  }
+  const input = chatEl('chat-input');
+  const text = input.value.trim();
+  if (!text) return;
+  input.value = '';
+  input.style.height = '36px';
+  chatAddMsg('user', text);
+  chatFinish();
+  try {
+    const res = await fetch(`${API}/agent/sessions/${chatSessionId}/message`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ message: text }),
+    });
+    const data = await res.json();
+    if (data.error) chatAddMsg('system', data.error);
+  } catch (e) {
+    chatAddMsg('system', e.message);
+  }
+}
+
+// Chat input handlers
+chatEl('chat-send').addEventListener('click', chatSend);
+chatEl('chat-input').addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); chatSend(); }
+});
+chatEl('chat-input').addEventListener('input', () => {
+  const el = chatEl('chat-input');
+  el.style.height = '36px';
+  el.style.height = Math.min(el.scrollHeight, 200) + 'px';
+});
+
+// =============================================================================
+// Init
+// =============================================================================
+
+discoverPanels();
+// Re-discover periodically (picks up loaded/unloaded services)
+setInterval(discoverPanels, 30000);

package/services/ui/static/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>reef</title>
+  <link rel="stylesheet" href="/ui/static/style.css">
+</head>
+<body>
+  <div id="app">
+    <header>
+      <h1>▸ reef</h1>
+      <nav class="tabs" id="tabs"></nav>
+      <div class="status" id="status">
+        <span class="dot"></span>
+        <span class="label">loading</span>
+      </div>
+    </header>
+
+    <div id="panels"></div>
+
+    <!-- Chat is always built-in, not a panel -->
+    <div class="panel-view" id="view-chat">
+      <div class="chat-container">
+        <div class="chat-messages" id="chat-messages">
+          <div class="chat-empty">
+            <div class="chat-empty-title">reef agent</div>
+            <div class="chat-empty-sub">Send a message to start a session</div>
+          </div>
+        </div>
+        <div class="chat-input-area">
+          <textarea id="chat-input" placeholder="Send a message… (Enter to send, Shift+Enter for newline)" rows="1"></textarea>
+          <button id="chat-send">Send</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>const PANEL_API = '/ui/api';</script>
+  <script src="/ui/static/app.js"></script>
+</body>
+</html>

package/services/ui/static/style.css

@@ -0,0 +1,157 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+:root {
+  --bg: #0a0a0a;
+  --bg-panel: #111;
+  --bg-card: #1a1a1a;
+  --border: #2a2a2a;
+  --text: #ccc;
+  --text-dim: #666;
+  --text-bright: #eee;
+  --accent: #4f9;
+  --yellow: #fd0;
+  --red: #f55;
+  --blue: #5af;
+  --purple: #a7f;
+  --orange: #f93;
+  --font: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
+}
+
+html, body {
+  height: 100%; background: var(--bg); color: var(--text);
+  font-family: var(--font); font-size: 13px; line-height: 1.5;
+}
+
+#app { display: flex; flex-direction: column; height: 100%; }
+
+/* ─── Header ─── */
+
+header {
+  display: flex; align-items: center; gap: 16px;
+  padding: 10px 20px; border-bottom: 1px solid var(--border);
+  background: var(--bg-panel); flex-shrink: 0;
+}
+header h1 { font-size: 14px; color: var(--accent); font-weight: 600; white-space: nowrap; }
+
+.tabs { display: flex; gap: 2px; flex: 1; }
+.tab {
+  background: none; border: none; color: var(--text-dim); cursor: pointer;
+  padding: 4px 12px; font-size: 11px; font-family: var(--font);
+  border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px;
+  transition: all 0.15s;
+}
+.tab:hover { color: var(--text); background: var(--bg-card); }
+.tab.active { color: var(--accent); background: var(--bg-card); font-weight: 600; }
+
+.status {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 11px; color: var(--text-dim); white-space: nowrap;
+}
+.status .dot {
+  width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim);
+}
+.status.ok .dot { background: var(--accent); }
+.status.err .dot { background: var(--red); }
+
+/* ─── Panels ─── */
+
+.panel-view {
+  flex: 1; overflow-y: auto; display: none;
+}
+.panel-view.active { display: block; }
+
+.panel-loading {
+  color: var(--text-dim); font-style: italic;
+  padding: 40px; text-align: center;
+}
+
+/* ─── Chat ─── */
+
+.chat-container {
+  display: flex; flex-direction: column; height: calc(100vh - 50px);
+}
+
+.chat-messages {
+  flex: 1; overflow-y: auto; padding: 16px 20px;
+  display: flex; flex-direction: column; gap: 16px;
+}
+
+.chat-empty {
+  flex: 1; display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: 6px;
+}
+.chat-empty-title { font-size: 16px; color: var(--text-bright); font-weight: 600; }
+.chat-empty-sub { font-size: 12px; color: var(--text-dim); }
+
+.chat-msg { max-width: 100%; }
+.chat-msg-role {
+  font-size: 10px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.5px; margin-bottom: 3px; color: var(--text-dim);
+}
+.chat-msg-role.user { color: var(--blue); }
+.chat-msg-role.assistant { color: var(--accent); }
+.chat-msg-role.system { color: var(--red); }
+
+.chat-msg-content {
+  line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;
+}
+.chat-msg-content code {
+  background: var(--bg-card); padding: 1px 5px; border-radius: 3px; font-size: 12px;
+}
+.chat-msg-content pre {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 4px; padding: 10px; margin: 6px 0; overflow-x: auto;
+}
+.chat-msg-content pre code { background: none; padding: 0; }
+
+.chat-tool {
+  margin: 6px 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
+}
+.chat-tool-header {
+  padding: 6px 10px; background: var(--bg-panel); font-size: 11px;
+  color: var(--yellow); cursor: pointer; display: flex; align-items: center; gap: 6px;
+  user-select: none;
+}
+.chat-tool-header:hover { background: var(--bg-card); }
+.chat-tool-arrow { font-size: 9px; transition: transform 0.15s; }
+.chat-tool-arrow.open { transform: rotate(90deg); }
+.chat-tool-body {
+  display: none; padding: 6px 10px; background: var(--bg);
+  font-size: 11px; white-space: pre-wrap; color: var(--text-dim);
+  max-height: 250px; overflow-y: auto; border-top: 1px solid var(--border);
+}
+.chat-tool-body.open { display: block; }
+.chat-tool-error { color: var(--red); }
+
+.chat-cursor {
+  display: inline-block; width: 2px; height: 1em;
+  background: var(--accent); animation: blink 1s step-end infinite;
+  vertical-align: text-bottom; margin-left: 1px;
+}
+@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+
+.chat-input-area {
+  border-top: 1px solid var(--border); padding: 10px 20px;
+  display: flex; gap: 8px; background: var(--bg-panel); flex-shrink: 0;
+}
+#chat-input {
+  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 4px; padding: 8px 12px; color: var(--text);
+  font-family: var(--font); font-size: 13px; outline: none;
+  resize: none; min-height: 36px; max-height: 200px;
+}
+#chat-input:focus { border-color: #444; }
+#chat-input::placeholder { color: var(--text-dim); }
+#chat-send {
+  background: #1a3a1a; color: var(--accent); border: 1px solid #2a4a2a;
+  border-radius: 4px; padding: 0 14px; font-size: 12px; font-family: var(--font);
+  font-weight: 600; cursor: pointer; white-space: nowrap; align-self: flex-end;
+  height: 36px; text-transform: uppercase; letter-spacing: 0.5px;
+}
+#chat-send:hover { background: #2a4a2a; }
+#chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ─── Active chat view override ─── */
+.panel-view.active#view-chat {
+  display: flex; flex-direction: column;
+}