pi-tau-web-server 1.0.8

package/public/session-sidebar.js

@@ -0,0 +1,460 @@
+/**
+ * Session Sidebar - Lists sessions grouped by project, handles switching
+ */
+export class SessionSidebar {
+    container;
+    onSessionSelect;
+    activeSessionFile;
+    projects;
+    collapsedProjects;
+    searchQuery;
+    favourites;
+    contextMenu;
+    _searchTimer = null;
+    _searchResults = null;
+    constructor(container, onSessionSelect) {
+        this.container = container;
+        this.onSessionSelect = onSessionSelect;
+        this.activeSessionFile = null;
+        this.projects = [];
+        this.collapsedProjects = new Set();
+        this.searchQuery = '';
+        this.favourites = JSON.parse(localStorage.getItem('tau-favourites') || '[]');
+        this.contextMenu = null;
+        // Close context menu on click anywhere
+        document.addEventListener('click', () => this.closeContextMenu());
+        document.addEventListener('contextmenu', (e) => {
+            // Close if right-clicking outside a session item
+            if (!e.target?.closest('.session-item'))
+                this.closeContextMenu();
+        });
+    }
+    saveFavourites() {
+        localStorage.setItem('tau-favourites', JSON.stringify(this.favourites));
+    }
+    isFavourite(filePath) {
+        if (!filePath)
+            return false;
+        return this.favourites.includes(filePath);
+    }
+    toggleFavourite(filePath) {
+        if (!filePath)
+            return;
+        const idx = this.favourites.indexOf(filePath);
+        if (idx >= 0) {
+            this.favourites.splice(idx, 1);
+        }
+        else {
+            this.favourites.push(filePath);
+        }
+        this.saveFavourites();
+        this.render();
+    }
+    async loadSessions() {
+        try {
+            this.container.innerHTML = Array.from({ length: 6 }, () => '<div class="session-skeleton"><div class="session-skeleton-title"></div><div class="session-skeleton-meta"></div></div>').join('');
+            const res = await fetch('/api/sessions');
+            const data = await res.json();
+            this.projects = data.projects || [];
+            this.render();
+        }
+        catch (error) {
+            console.error('[Sidebar] Failed to load sessions:', error);
+            this.container.innerHTML = '<div class="session-loading">Failed to load sessions</div>';
+        }
+    }
+    setSearchQuery(query) {
+        this.searchQuery = query.toLowerCase().trim();
+        // Clear pending full-text search
+        if (this._searchTimer)
+            clearTimeout(this._searchTimer);
+        if (!this.searchQuery) {
+            this._searchResults = null;
+            this.applySearch();
+            return;
+        }
+        // Instant: filter titles
+        this.applySearch();
+        // Debounced: full-text search (300ms)
+        if (this.searchQuery.length >= 2) {
+            this._searchTimer = setTimeout(() => this.fullTextSearch(this.searchQuery), 300);
+        }
+    }
+    async fullTextSearch(query) {
+        // Don't search if query changed since debounce
+        if (query !== this.searchQuery)
+            return;
+        try {
+            const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
+            const data = await res.json();
+            if (query !== this.searchQuery)
+                return; // stale
+            this._searchResults = data.results || [];
+            this.renderSearchResults();
+        }
+        catch (err) {
+            console.error('[Sidebar] Search failed:', err);
+        }
+    }
+    renderSearchResults() {
+        if (!this._searchResults || this._searchResults.length === 0)
+            return;
+        // Remove previous search results section
+        const existing = this.container.querySelector('.search-results-group');
+        if (existing)
+            existing.remove();
+        const group = document.createElement('div');
+        group.className = 'search-results-group';
+        const header = document.createElement('div');
+        header.className = 'project-header search-results-header';
+        header.innerHTML = `<span>🔍</span> <span>Message matches</span> <span class="project-count">${this._searchResults.length}</span>`;
+        group.appendChild(header);
+        const sessionsDiv = document.createElement('div');
+        sessionsDiv.className = 'project-sessions';
+        for (const result of this._searchResults) {
+            const item = document.createElement('div');
+            item.className = 'session-item search-result-item';
+            item.dataset.filePath = result.filePath;
+            if (result.filePath === this.activeSessionFile) {
+                item.classList.add('active');
+            }
+            const title = result.sessionName || result.firstMessage || 'Untitled';
+            const snippet = result.matches[0]?.snippet || '';
+            const matchCount = result.matches.length;
+            const time = this.formatTime(result.sessionTimestamp);
+            item.innerHTML = `
+        <div class="session-title-row">
+          <div class="session-title" title="${this.escapeHtml(title)}">${this.escapeHtml(title)}</div>
+        </div>
+        <div class="search-snippet">${this.highlightMatch(snippet, this.searchQuery)}</div>
+        <div class="session-meta">${time}${matchCount > 1 ? ` · ${matchCount} matches` : ''}</div>
+      `;
+            // Find the matching project/session to pass to onSessionSelect
+            item.addEventListener('click', () => {
+                for (const project of this.projects) {
+                    const session = project.sessions?.find(s => s.filePath === result.filePath);
+                    if (session) {
+                        this.onSessionSelect(session, project);
+                        return;
+                    }
+                }
+                // Session not in loaded list (unlikely) — try switching by path
+                this.onSessionSelect({ filePath: result.filePath, name: result.sessionName }, { path: result.project });
+            });
+            sessionsDiv.appendChild(item);
+        }
+        group.appendChild(sessionsDiv);
+        // Insert at top of container
+        this.container.insertBefore(group, this.container.firstChild);
+    }
+    highlightMatch(text, query) {
+        if (!query)
+            return this.escapeHtml(text);
+        const escaped = this.escapeHtml(text);
+        const re = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+        return escaped.replace(re, '<mark>$1</mark>');
+    }
+    applySearch() {
+        if (!this.searchQuery) {
+            this.container.querySelectorAll('.session-item').forEach(el => el.classList.remove('hidden'));
+            this.container.querySelectorAll('.project-group').forEach(el => el.style.display = '');
+            const favSection = this.container.querySelector('.favourites-group');
+            if (favSection)
+                favSection.style.display = '';
+            // Remove full-text results
+            const searchGroup = this.container.querySelector('.search-results-group');
+            if (searchGroup)
+                searchGroup.remove();
+            return;
+        }
+        // Search favourites section
+        const favSection = this.container.querySelector('.favourites-group');
+        if (favSection) {
+            let hasVisible = false;
+            favSection.querySelectorAll('.session-item').forEach(item => {
+                const title = (item.querySelector('.session-title')?.textContent || '').toLowerCase();
+                const matches = title.includes(this.searchQuery);
+                item.classList.toggle('hidden', !matches);
+                if (matches)
+                    hasVisible = true;
+            });
+            favSection.style.display = hasVisible ? '' : 'none';
+        }
+        this.container.querySelectorAll('.project-group').forEach(group => {
+            let hasVisible = false;
+            group.querySelectorAll('.session-item').forEach(item => {
+                const title = (item.querySelector('.session-title')?.textContent || '').toLowerCase();
+                const matches = title.includes(this.searchQuery);
+                item.classList.toggle('hidden', !matches);
+                if (matches)
+                    hasVisible = true;
+            });
+            group.style.display = hasVisible ? '' : 'none';
+        });
+    }
+    setActive(filePath) {
+        this.activeSessionFile = filePath ?? null;
+        this.container.querySelectorAll('.session-item').forEach(el => {
+            el.classList.toggle('active', el.dataset.filePath === filePath);
+        });
+    }
+    clearActive() {
+        this.activeSessionFile = null;
+        this.container.querySelectorAll('.session-item').forEach(el => el.classList.remove('active'));
+    }
+    // ═══════════════════════════════════════
+    // Context Menu
+    // ═══════════════════════════════════════
+    showContextMenu(e, session, project, itemEl) {
+        e.preventDefault();
+        this.closeContextMenu();
+        const isFav = this.isFavourite(session.filePath);
+        const menu = document.createElement('div');
+        menu.className = 'session-context-menu';
+        const items = [
+            { icon: isFav ? '★' : '☆', label: isFav ? 'Unfavourite' : 'Favourite', action: () => this.toggleFavourite(session.filePath) },
+            { icon: '✎', label: 'Rename', action: () => this.startRename(itemEl, session) },
+            { icon: '📋', label: 'Export HTML', action: () => this.exportSession(session) },
+            { icon: '🗑', label: 'Delete', action: () => this.deleteSession(session, itemEl) },
+        ];
+        for (const item of items) {
+            const row = document.createElement('div');
+            row.className = 'context-menu-item';
+            row.innerHTML = `<span class="context-menu-icon">${item.icon}</span>${item.label}`;
+            row.addEventListener('click', (ev) => {
+                ev.stopPropagation();
+                this.closeContextMenu();
+                item.action();
+            });
+            menu.appendChild(row);
+        }
+        // Position
+        document.body.appendChild(menu);
+        const rect = menu.getBoundingClientRect();
+        let x = e.clientX;
+        let y = e.clientY;
+        if (x + rect.width > window.innerWidth)
+            x = window.innerWidth - rect.width - 8;
+        if (y + rect.height > window.innerHeight)
+            y = window.innerHeight - rect.height - 8;
+        menu.style.left = `${x}px`;
+        menu.style.top = `${y}px`;
+        this.contextMenu = menu;
+    }
+    closeContextMenu() {
+        if (this.contextMenu) {
+            this.contextMenu.remove();
+            this.contextMenu = null;
+        }
+    }
+    startRename(itemEl, session) {
+        const titleEl = itemEl.querySelector('.session-title');
+        if (!titleEl)
+            return;
+        const currentName = titleEl.textContent;
+        const input = document.createElement('input');
+        input.className = 'session-rename-input';
+        input.value = currentName;
+        titleEl.replaceWith(input);
+        input.focus();
+        input.select();
+        const commit = async () => {
+            const newName = input.value.trim();
+            if (newName && newName !== currentName) {
+                try {
+                    await fetch('/api/rpc', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ type: 'set_session_name', name: newName, filePath: session.filePath }),
+                    });
+                }
+                catch { /* silent */ }
+            }
+            const newTitle = document.createElement('div');
+            newTitle.className = 'session-title';
+            newTitle.title = newName || currentName;
+            newTitle.textContent = newName || currentName;
+            input.replaceWith(newTitle);
+        };
+        input.addEventListener('blur', commit);
+        input.addEventListener('keydown', (ke) => {
+            if (ke.key === 'Enter') {
+                ke.preventDefault();
+                input.blur();
+            }
+            if (ke.key === 'Escape') {
+                input.value = currentName;
+                input.blur();
+            }
+        });
+    }
+    async deleteSession(session, itemEl) {
+        if (!confirm(`Delete "${session.name || session.firstMessage || 'this session'}"?`))
+            return;
+        try {
+            const res = await fetch('/api/sessions/delete', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ filePath: session.filePath }),
+            });
+            if (res.ok) {
+                itemEl.remove();
+                // Remove from favourites if present
+                if (session.filePath) {
+                    const favIdx = this.favourites.indexOf(session.filePath);
+                    if (favIdx >= 0) {
+                        this.favourites.splice(favIdx, 1);
+                        this.saveFavourites();
+                    }
+                }
+                // If this was the active session, clear it
+                if (session.filePath === this.activeSessionFile) {
+                    this.clearActive();
+                    if (this.onSessionSelect)
+                        this.onSessionSelect(null, null);
+                }
+            }
+        }
+        catch (e) {
+            console.error('[Sidebar] Delete failed:', e);
+        }
+    }
+    async exportSession(session) {
+        try {
+            const data = await (await fetch('/api/rpc', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ type: 'export_html', filePath: session.filePath }),
+            })).json();
+            if (data?.success && data.data?.path) {
+                await fetch('/api/open', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ filePath: data.data.path }),
+                });
+            }
+        }
+        catch { /* silent */ }
+    }
+    // ═══════════════════════════════════════
+    // Render
+    // ═══════════════════════════════════════
+    buildSessionItem(session, project) {
+        const item = document.createElement('div');
+        item.className = 'session-item';
+        item.dataset.filePath = session.filePath;
+        if (session.filePath === this.activeSessionFile) {
+            item.classList.add('active');
+        }
+        const title = session.name || session.firstMessage || 'Empty session';
+        const time = this.formatTime(session.timestamp);
+        const tmuxTag = session.live ? '<span class="session-tag tmux-tag">live</span>' : (session.tmux ? '<span class="session-tag tmux-tag">tmux</span>' : '');
+        const favIcon = this.isFavourite(session.filePath) ? '<span class="session-fav-icon">★</span>' : '';
+        item.innerHTML = `
+      <div class="session-title-row">
+        ${favIcon}
+        <div class="session-title" title="${this.escapeHtml(title)}">${this.escapeHtml(title)}</div>
+        ${tmuxTag}
+      </div>
+      <div class="session-meta">${time}</div>
+    `;
+        item.addEventListener('click', () => this.onSessionSelect(session, project));
+        item.addEventListener('contextmenu', (e) => this.showContextMenu(e, session, project, item));
+        return item;
+    }
+    render() {
+        if (this.projects.length === 0) {
+            this.container.innerHTML = '<div class="session-loading">No sessions found</div>';
+            return;
+        }
+        this.container.innerHTML = '';
+        // Favourites section — collect from all projects
+        const favSessions = [];
+        for (const project of this.projects) {
+            for (const session of project.sessions || []) {
+                if (this.isFavourite(session.filePath)) {
+                    favSessions.push({ session, project });
+                }
+            }
+        }
+        if (favSessions.length > 0) {
+            const favGroup = document.createElement('div');
+            favGroup.className = 'favourites-group';
+            const header = document.createElement('div');
+            header.className = 'project-header favourites-header';
+            header.innerHTML = `<span class="fav-star">★</span> <span>Favourites</span> <span class="project-count">${favSessions.length}</span>`;
+            favGroup.appendChild(header);
+            const sessionsDiv = document.createElement('div');
+            sessionsDiv.className = 'project-sessions';
+            for (const { session, project } of favSessions) {
+                sessionsDiv.appendChild(this.buildSessionItem(session, project));
+            }
+            favGroup.appendChild(sessionsDiv);
+            this.container.appendChild(favGroup);
+        }
+        // Regular project groups
+        for (const project of this.projects) {
+            const group = document.createElement('div');
+            group.className = 'project-group';
+            const isCollapsed = this.collapsedProjects.has(project.dirName);
+            const header = document.createElement('div');
+            header.className = `project-header${isCollapsed ? ' collapsed' : ''}`;
+            const pathParts = (project.path || '').split('/').filter(Boolean);
+            const shortPath = pathParts.length > 0 ? pathParts[pathParts.length - 1] : (project.path || '');
+            header.innerHTML = `
+        <span class="chevron">▼</span>
+        <span title="${this.escapeHtml(project.path)}">${this.escapeHtml(shortPath)}</span>
+        <span class="project-count">${(project.sessions || []).length}</span>
+      `;
+            header.addEventListener('click', () => {
+                if (this.collapsedProjects.has(project.dirName)) {
+                    this.collapsedProjects.delete(project.dirName);
+                }
+                else {
+                    this.collapsedProjects.add(project.dirName);
+                }
+                header.classList.toggle('collapsed');
+                sessionsDiv.classList.toggle('collapsed');
+            });
+            group.appendChild(header);
+            const sessionsDiv = document.createElement('div');
+            sessionsDiv.className = `project-sessions${isCollapsed ? ' collapsed' : ''}`;
+            for (const session of project.sessions || []) {
+                sessionsDiv.appendChild(this.buildSessionItem(session, project));
+            }
+            group.appendChild(sessionsDiv);
+            this.container.appendChild(group);
+        }
+        if (this.searchQuery)
+            this.applySearch();
+    }
+    formatTime(isoTimestamp) {
+        try {
+            const date = new Date(isoTimestamp || '');
+            const now = new Date();
+            const diffMs = now.getTime() - date.getTime();
+            const diffMins = Math.floor(diffMs / 60000);
+            const diffHours = Math.floor(diffMs / 3600000);
+            const days = Math.floor(diffMs / 86400000);
+            if (diffMins < 1)
+                return 'Just now';
+            if (diffMins < 60)
+                return `${diffMins}m ago`;
+            if (diffHours < 24)
+                return `${diffHours}h ago`;
+            if (days === 1)
+                return 'Yesterday';
+            if (days < 7)
+                return date.toLocaleDateString([], { weekday: 'long' });
+            return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+        }
+        catch {
+            return '';
+        }
+    }
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = String(text ?? '');
+        return div.innerHTML;
+    }
+}

package/public/session-stats-card.js

@@ -0,0 +1,123 @@
+/**
+ * Session Stats Card — the popover opened from the header context pill.
+ *
+ * Shows the same numbers pi's TUI status bar shows: context usage, input and
+ * output tokens, cache read, cache hit rate, and session cost. The
+ * authoritative data comes from pi's get_session_stats RPC (via the caller's
+ * fetchStats); when that is unavailable — no live session, a transient fetch
+ * failure, or null contextUsage right after compaction — the card degrades
+ * gracefully to the caller's locally-tracked fallback numbers instead of
+ * showing nothing.
+ */
+function formatTokens(n) {
+    if (n >= 1_000_000)
+        return `${(n / 1_000_000).toFixed(1)}M`;
+    if (n >= 1_000)
+        return `${(n / 1_000).toFixed(1)}k`;
+    return String(Math.round(n));
+}
+// Small inline icons matching the app's feather-style stroke icons.
+function icon(paths) {
+    return `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+}
+const ICONS = {
+    input: icon('<line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/>'),
+    output: icon('<line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/>'),
+    cacheRead: icon('<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>'),
+    cacheHit: icon('<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>'),
+};
+export function setupSessionStatsCard(options) {
+    const { pillEl, cardEl, fetchStats, getFallback } = options;
+    let lastStats = null;
+    let refreshSeq = 0;
+    function isOpen() {
+        return !cardEl.classList.contains('hidden');
+    }
+    function render() {
+        const fallback = getFallback();
+        const tokens = lastStats?.tokens || null;
+        const input = typeof tokens?.input === 'number' ? tokens.input : (fallback.usage?.input ?? null);
+        const output = typeof tokens?.output === 'number' ? tokens.output : (fallback.usage?.output ?? null);
+        const cacheRead = typeof tokens?.cacheRead === 'number' ? tokens.cacheRead : (fallback.usage?.cacheRead ?? null);
+        const cost = typeof lastStats?.cost === 'number' ? lastStats.cost : (fallback.cost > 0 ? fallback.cost : null);
+        // contextUsage may be absent, and its tokens/percent may be null right
+        // after compaction — fall back to the last locally-known numbers.
+        const cu = lastStats?.contextUsage || null;
+        const ctxWindow = typeof cu?.contextWindow === 'number' && cu.contextWindow > 0
+            ? cu.contextWindow
+            : (fallback.contextWindow > 0 ? fallback.contextWindow : null);
+        const ctxTokens = typeof cu?.tokens === 'number'
+            ? cu.tokens
+            : (fallback.contextTokens > 0 ? fallback.contextTokens : null);
+        let pct = typeof cu?.percent === 'number' ? cu.percent : null;
+        if (pct === null && ctxTokens !== null && ctxWindow) {
+            pct = (ctxTokens / ctxWindow) * 100;
+        }
+        const hitDenominator = (input ?? 0) + (cacheRead ?? 0);
+        const hitRate = cacheRead !== null && hitDenominator > 0 ? (cacheRead / hitDenominator) * 100 : null;
+        const sections = [];
+        if (pct !== null || (ctxTokens !== null && ctxWindow !== null)) {
+            const detail = ctxTokens !== null && ctxWindow !== null
+                ? `<span class="stats-context-detail">${formatTokens(ctxTokens)} / ${formatTokens(ctxWindow)}</span>`
+                : '';
+            sections.push(`
+        <div class="stats-row">
+          <span class="stats-label">Context</span>
+          <span class="stats-value">${pct !== null ? `${pct.toFixed(1)}%` : '—'}${detail}</span>
+        </div>`);
+        }
+        if (input !== null || output !== null || cacheRead !== null) {
+            sections.push(`
+        <div class="stats-row"><span class="stats-label"><span class="stats-icon">${ICONS.input}</span>Input</span><span class="stats-value">${input !== null ? formatTokens(input) : '—'}</span></div>
+        <div class="stats-row"><span class="stats-label"><span class="stats-icon">${ICONS.output}</span>Output</span><span class="stats-value">${output !== null ? formatTokens(output) : '—'}</span></div>
+        <div class="stats-row"><span class="stats-label"><span class="stats-icon">${ICONS.cacheRead}</span>Cache read</span><span class="stats-value">${cacheRead !== null ? formatTokens(cacheRead) : '—'}</span></div>
+        <div class="stats-row"><span class="stats-label"><span class="stats-icon">${ICONS.cacheHit}</span>Cache hit</span><span class="stats-value">${hitRate !== null ? `${hitRate.toFixed(1)}%` : '—'}</span></div>`);
+        }
+        if (cost !== null) {
+            sections.push(`
+        <div class="stats-row">
+          <span class="stats-label">Cost</span>
+          <span class="stats-value">$${cost.toFixed(3)} (sub)</span>
+        </div>`);
+        }
+        cardEl.innerHTML = sections.length
+            ? sections.join('<div class="stats-sep"></div>')
+            : '<div class="stats-empty">No usage data yet</div>';
+    }
+    // Re-fetch authoritative stats; re-render the card if it is showing.
+    // Refreshes can overlap (turn end, snapshot load, card open, session
+    // switch), so each carries a sequence number and only the newest one is
+    // allowed to write — a slow stale response must never clobber fresh stats.
+    async function refresh() {
+        const seq = ++refreshSeq;
+        const stats = await fetchStats();
+        if (seq !== refreshSeq)
+            return;
+        lastStats = stats;
+        if (isOpen())
+            render();
+    }
+    async function open() {
+        render(); // show cached/fallback numbers immediately
+        cardEl.classList.remove('hidden');
+        pillEl.setAttribute('aria-expanded', 'true');
+        await refresh();
+    }
+    function close() {
+        cardEl.classList.add('hidden');
+        pillEl.setAttribute('aria-expanded', 'false');
+    }
+    pillEl.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (isOpen())
+            close();
+        else
+            void open();
+    });
+    document.addEventListener('click', (e) => {
+        if (isOpen() && !cardEl.contains(e.target) && !pillEl.contains(e.target)) {
+            close();
+        }
+    });
+    return { refresh, close, isOpen };
+}

package/public/state.js

@@ -0,0 +1,81 @@
+/**
+ * State Manager - Manages chat state
+ */
+export class StateManager {
+    messages;
+    toolExecutions;
+    isStreaming;
+    currentStreamingMessage;
+    listeners;
+    constructor() {
+        this.messages = [];
+        this.toolExecutions = new Map(); // toolCallId -> tool execution data
+        this.isStreaming = false;
+        this.currentStreamingMessage = null;
+        this.listeners = new Set();
+    }
+    addListener(callback) {
+        this.listeners.add(callback);
+    }
+    removeListener(callback) {
+        this.listeners.delete(callback);
+    }
+    notifyListeners() {
+        this.listeners.forEach(callback => callback());
+    }
+    addMessage(message) {
+        this.messages.push(message);
+        this.notifyListeners();
+    }
+    updateLastMessage(updates) {
+        if (this.messages.length > 0) {
+            const lastMessage = this.messages[this.messages.length - 1];
+            Object.assign(lastMessage, updates);
+            this.notifyListeners();
+        }
+    }
+    setStreamingMessage(message) {
+        this.currentStreamingMessage = message;
+        this.notifyListeners();
+    }
+    clearStreamingMessage() {
+        this.currentStreamingMessage = null;
+        this.notifyListeners();
+    }
+    setStreaming(isStreaming) {
+        this.isStreaming = isStreaming;
+        this.notifyListeners();
+    }
+    addToolExecution(toolCallId, data) {
+        this.toolExecutions.set(toolCallId, {
+            toolCallId,
+            toolName: data.toolName,
+            args: data.args,
+            status: 'pending',
+            output: '',
+            isError: false,
+            ...data
+        });
+        this.notifyListeners();
+    }
+    updateToolExecution(toolCallId, updates) {
+        const tool = this.toolExecutions.get(toolCallId);
+        if (tool) {
+            Object.assign(tool, updates);
+            this.notifyListeners();
+        }
+    }
+    getToolExecution(toolCallId) {
+        return this.toolExecutions.get(toolCallId);
+    }
+    getAllToolExecutions() {
+        return Array.from(this.toolExecutions.values());
+    }
+    reset() {
+        this.messages = [];
+        this.toolExecutions.clear();
+        this.isStreaming = false;
+        this.currentStreamingMessage = null;
+        this.notifyListeners();
+    }
+}