diff --git a/client/app.js b/client/app.js
new file mode 100644
index 0000000..cafd8f0
--- /dev/null
+++ b/client/app.js
@@ -0,0 +1,335 @@
+'use strict';
+
+const API = ''; // same origin
+
+// ── State ────────────────────────────────────────────────────────────────────
+
+let profiles = [];
+let sessions = []; // [{id, profile_id, last_active, preview}]
+let currentSession = null; // session id
+let ws = null;
+let streaming = false;
+let currentBubble = null; // DOM element being streamed into
+
+// ── DOM refs ─────────────────────────────────────────────────────────────────
+
+const profileSelect = document.getElementById('profile-select');
+const btnNew = document.getElementById('btn-new');
+const sessionList = document.getElementById('session-list');
+const chatHeader = document.getElementById('chat-header');
+const messagesEl = document.getElementById('messages');
+const textarea = document.getElementById('input');
+const btnSend = document.getElementById('btn-send');
+
+// ── Init ─────────────────────────────────────────────────────────────────────
+
+async function init() {
+ await loadProfiles();
+ await loadSessions();
+ textarea.addEventListener('keydown', onKey);
+ btnSend.addEventListener('click', sendMessage);
+ btnNew.addEventListener('click', createSession);
+ textarea.addEventListener('input', autoResize);
+}
+
+// ── Profiles ─────────────────────────────────────────────────────────────────
+
+async function loadProfiles() {
+ try {
+ const res = await fetch(`${API}/agents/profiles`);
+ profiles = await res.json();
+ profileSelect.innerHTML = profiles.map(p =>
+ ``
+ ).join('');
+ } catch (e) {
+ console.error('Failed to load profiles', e);
+ }
+}
+
+// ── Sessions ─────────────────────────────────────────────────────────────────
+
+async function loadSessions() {
+ try {
+ const res = await fetch(`${API}/sessions`);
+ const data = await res.json();
+ sessions = data.map(s => ({ ...s, preview: '' }));
+ renderSessionList();
+ } catch (e) {
+ console.error('Failed to load sessions', e);
+ }
+}
+
+async function createSession() {
+ const profileId = profileSelect.value;
+ if (!profileId) return;
+ btnNew.disabled = true;
+ try {
+ const res = await fetch(`${API}/sessions`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ profile_id: profileId }),
+ });
+ const session = await res.json();
+ sessions.unshift({ ...session, preview: 'New conversation' });
+ renderSessionList();
+ await switchSession(session.session_id);
+ } catch (e) {
+ console.error('Failed to create session', e);
+ } finally {
+ btnNew.disabled = false;
+ }
+}
+
+async function switchSession(sessionId) {
+ if (currentSession === sessionId) return;
+ disconnectWS();
+ currentSession = sessionId;
+ renderSessionList();
+ await loadHistory(sessionId);
+ connectWS(sessionId);
+ setInputEnabled(true);
+}
+
+async function loadHistory(sessionId) {
+ messagesEl.innerHTML = '';
+ try {
+ const res = await fetch(`${API}/sessions/${sessionId}`);
+ const data = await res.json();
+ updateChatHeader(data.profile_id);
+
+ const profile = profiles.find(p => p.id === data.profile_id);
+
+ for (const msg of data.messages) {
+ if (msg.role === 'system') continue;
+ if (msg.role === 'user') {
+ appendMessage('user', msg.content);
+ } else if (msg.role === 'assistant' && msg.content) {
+ appendMessage('assistant', msg.content);
+ }
+ }
+ scrollToBottom();
+ } catch (e) {
+ console.error('Failed to load history', e);
+ }
+}
+
+function renderSessionList() {
+ if (sessions.length === 0) {
+ sessionList.innerHTML = 'No conversations yet
';
+ return;
+ }
+ sessionList.innerHTML = sessions.map(s => {
+ const profile = profiles.find(p => p.id === s.profile_id);
+ const name = profile ? profile.name : s.profile_id;
+ const time = formatTime(s.last_active);
+ const preview = s.preview || 'No messages yet';
+ const active = s.session_id === currentSession ? ' active' : '';
+ return `
+
+
${escHtml(name)}
+
${escHtml(preview)}
+
${time}
+
${escHtml(event.result)}
`;
+ messagesEl.appendChild(card);
+}
+
+function appendTypingIndicator() {
+ removeTypingIndicator();
+ const el = document.createElement('div');
+ el.className = 'typing';
+ el.id = 'typing';
+ el.innerHTML = '';
+ messagesEl.appendChild(el);
+}
+
+function removeTypingIndicator() {
+ document.getElementById('typing')?.remove();
+}
+
+function appendError(message) {
+ const el = document.createElement('div');
+ el.className = 'msg-error';
+ el.textContent = `Error: ${message}`;
+ messagesEl.appendChild(el);
+}
+
+function updateChatHeader(profileId) {
+ const profile = profiles.find(p => p.id === profileId);
+ const name = profile ? profile.name : profileId;
+ chatHeader.innerHTML = `${escHtml(profileId)} ${escHtml(name)}`;
+}
+
+function setInputEnabled(enabled) {
+ textarea.disabled = !enabled;
+ btnSend.disabled = !enabled;
+ if (enabled) textarea.focus();
+}
+
+function scrollToBottom() {
+ messagesEl.scrollTop = messagesEl.scrollHeight;
+}
+
+function autoResize() {
+ textarea.style.height = 'auto';
+ textarea.style.height = Math.min(textarea.scrollHeight, 180) + 'px';
+}
+
+function escHtml(str) {
+ return String(str)
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"');
+}
+
+function formatTime(iso) {
+ if (!iso) return '';
+ const d = new Date(iso);
+ if (isNaN(d)) return '';
+ const now = new Date();
+ const diff = now - d;
+ if (diff < 60_000) return 'just now';
+ if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
+ if (diff < 86_400_000) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+ return d.toLocaleDateString();
+}
+
+// ── Start ─────────────────────────────────────────────────────────────────────
+
+init();
diff --git a/client/index.html b/client/index.html
new file mode 100644
index 0000000..39fa03d
--- /dev/null
+++ b/client/index.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+ Navi
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💬
+
Start a new conversation
+
+
+
+
+
+
+
+