pi-tau-web-server 1.0.8

package/src/public/state.ts

@@ -0,0 +1,96 @@
+/**
+ * State Manager - Manages chat state
+ */
+
+export class StateManager {
+  messages: Record<string, unknown>[];
+  toolExecutions: Map<string, Record<string, unknown>>;
+  isStreaming: boolean;
+  currentStreamingMessage: Record<string, unknown> | null;
+  listeners: Set<() => void>;
+
+  constructor() {
+    this.messages = [];
+    this.toolExecutions = new Map(); // toolCallId -> tool execution data
+    this.isStreaming = false;
+    this.currentStreamingMessage = null;
+    this.listeners = new Set();
+  }
+
+  addListener(callback: () => void) {
+    this.listeners.add(callback);
+  }
+
+  removeListener(callback: () => void) {
+    this.listeners.delete(callback);
+  }
+
+  notifyListeners() {
+    this.listeners.forEach(callback => callback());
+  }
+
+  addMessage(message: Record<string, unknown>) {
+    this.messages.push(message);
+    this.notifyListeners();
+  }
+
+  updateLastMessage(updates: Record<string, unknown>) {
+    if (this.messages.length > 0) {
+      const lastMessage = this.messages[this.messages.length - 1];
+      Object.assign(lastMessage, updates);
+      this.notifyListeners();
+    }
+  }
+
+  setStreamingMessage(message: Record<string, unknown>) {
+    this.currentStreamingMessage = message;
+    this.notifyListeners();
+  }
+
+  clearStreamingMessage() {
+    this.currentStreamingMessage = null;
+    this.notifyListeners();
+  }
+
+  setStreaming(isStreaming: boolean) {
+    this.isStreaming = isStreaming;
+    this.notifyListeners();
+  }
+
+  addToolExecution(toolCallId: string, data: Record<string, unknown>) {
+    this.toolExecutions.set(toolCallId, {
+      toolCallId,
+      toolName: data.toolName,
+      args: data.args,
+      status: 'pending',
+      output: '',
+      isError: false,
+      ...data
+    });
+    this.notifyListeners();
+  }
+
+  updateToolExecution(toolCallId: string, updates: Record<string, unknown>) {
+    const tool = this.toolExecutions.get(toolCallId);
+    if (tool) {
+      Object.assign(tool, updates);
+      this.notifyListeners();
+    }
+  }
+
+  getToolExecution(toolCallId: string) {
+    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();
+  }
+}

package/src/public/sw.ts

@@ -0,0 +1,79 @@
+// Tau Service Worker — minimal, just enables PWA install
+// No aggressive caching since Tau connects to a live local server
+/// <reference lib="webworker" />
+
+const CACHE_NAME = 'tau-v4';
+const serviceWorker = self as unknown as ServiceWorkerGlobalScope;
+
+// Cache only the app shell on install
+serviceWorker.addEventListener('install', (event: ExtendableEvent) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll([
+        '/',
+        '/style.css',
+        '/app.js',
+        '/app-main.js',
+        '/state.js',
+        '/themes.js',
+        '/markdown.js',
+        '/message-renderer.js',
+        '/tool-card.js',
+        '/tree-view.js',
+        '/dialogs.js',
+        '/session-sidebar.js',
+        '/session-stats-card.js',
+        '/websocket-client.js',
+        '/manifest.json',
+        // KaTeX shell assets; fonts are picked up on demand by the
+        // network-first runtime cache so a missing font can't fail install.
+        '/vendor/katex/katex.min.js',
+        '/vendor/katex/katex.min.css',
+      ]);
+    })
+  );
+  serviceWorker.skipWaiting();
+});
+
+// Clean old caches
+serviceWorker.addEventListener('activate', (event: ExtendableEvent) => {
+  event.waitUntil(
+    caches.keys().then((names) => {
+      return Promise.all(
+        names.filter((name) => name !== CACHE_NAME).map((name) => caches.delete(name))
+      );
+    })
+  );
+  serviceWorker.clients.claim();
+});
+
+// Network-first strategy — always try live server, fall back to cache
+serviceWorker.addEventListener('fetch', (event: FetchEvent) => {
+  const url = new URL(event.request.url);
+
+  // Don't cache API/WebSocket requests
+  if (url.pathname.startsWith('/api/') || url.pathname.startsWith('/ws')) {
+    return;
+  }
+
+  event.respondWith(
+    fetch(event.request)
+      .then((response) => {
+        // Update cache with fresh response
+        if (response.ok && event.request.method === 'GET') {
+          const clone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone));
+        }
+        return response;
+      })
+      .catch(() => {
+        // Offline — serve from cache
+        return caches.match(event.request).then((cached) => {
+          return cached || new Response('Tau is offline — start your pi session to connect.', {
+            status: 503,
+            headers: { 'Content-Type': 'text/plain' },
+          });
+        });
+      })
+  );
+});

package/src/public/themes.ts

@@ -0,0 +1,73 @@
+/**
+ * Theme system — four themes: two light, two dark
+ */
+
+export const themes = {
+  night: {
+    name: 'Dusk',
+    dark: true,
+    colors: ['#212121', '#a0a0a0', '#777777', '#666666'],
+    vars: {},
+  },
+  dawn: {
+    name: 'Dawn',
+    dark: true,
+    colors: ['#1a1d26', '#7a8ab0', '#6a5a80', '#5a7a9a'],
+    vars: {},
+  },
+  midnight: {
+    name: 'Midnight',
+    dark: true,
+    colors: ['#000000', '#5a7a9a', '#4a5565', '#4a5a72'],
+    vars: {},
+  },
+  clean: {
+    name: 'Clean',
+    dark: false,
+    colors: ['#ffffff', '#0580c4', '#007aff', '#5ac8fa'],
+    vars: {},
+  },
+  terracotta: {
+    name: 'Terracotta',
+    dark: false,
+    colors: ['#f4f1ec', '#b06a48', '#5c2860', '#3a6a9b'],
+    vars: {},
+  },
+  sage: {
+    name: 'Sage',
+    dark: false,
+    colors: ['#f0f2ec', '#6a7d5a', '#4a3860', '#3a6a7a'],
+    vars: {},
+  },
+} as const;
+
+export type ThemeId = keyof typeof themes;
+
+export function applyTheme(themeId: string) {
+  const root = document.documentElement;
+  // Validate
+  if (!(themeId in themes)) themeId = 'night';
+  root.setAttribute('data-theme', themeId);
+  localStorage.setItem('tau-theme', themeId);
+}
+
+export function getCurrentTheme(): ThemeId {
+  const saved = localStorage.getItem('tau-theme');
+  // Migrate old values
+  if (saved === 'dark') return 'night';
+  if (saved === 'light') return 'terracotta';
+  if (saved && saved in themes) return saved as ThemeId;
+  // Auto-detect from OS
+  if (window.matchMedia?.('(prefers-color-scheme: light)').matches) return 'terracotta';
+  return 'night';
+}
+
+// Listen for OS theme changes if no explicit preference saved
+if (!localStorage.getItem('tau-theme')) {
+  window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+    if (!localStorage.getItem('tau-theme')) {
+      const root = document.documentElement;
+      root.setAttribute('data-theme', e.matches ? 'terracotta' : 'night');
+    }
+  });
+}

package/src/public/tool-card.ts

@@ -0,0 +1,375 @@
+/**
+ * Tool Card - Renders and updates tool execution cards (collapsible)
+ */
+
+export type ToolArgs = Record<string, unknown>;
+
+export type ToolExecution = {
+  toolCallId?: string;
+  toolName?: string;
+  args?: ToolArgs;
+  status?: string;
+  output?: string;
+  isError?: boolean;
+};
+
+type ToolResultBlock = {
+  type?: string;
+  text?: string;
+  [key: string]: unknown;
+};
+
+export type ToolResult = {
+  content?: ToolResultBlock[];
+  [key: string]: unknown;
+};
+
+export class ToolCardRenderer {
+  container: HTMLElement;
+  toolCards: Map<string, HTMLElement>;
+
+  constructor(container: HTMLElement) {
+    this.container = container;
+    this.toolCards = new Map(); // toolCallId -> element
+  }
+
+  createToolCard(toolExecution: ToolExecution) {
+    const { toolCallId, toolName, args, status } = toolExecution;
+
+    const card = document.createElement('div');
+    card.className = 'tool-card';
+    card.dataset.toolCallId = String(toolCallId || '');
+
+    const argsPreview = this.getArgsPreview(String(toolName || ''), args);
+    const argsJson = this.formatJson(args);
+    const isExpanded = (status === 'streaming' || status === 'pending');
+
+    const isEdit = (toolName === 'edit' || toolName === 'Edit') && args && (args.oldText || args.old_text) && (args.newText || args.new_text);
+
+    card.innerHTML = `
+      <div class="tool-card-header" onclick="this.parentElement.querySelector('.tool-card-body').classList.toggle('expanded'); this.querySelector('.tool-card-chevron').classList.toggle('expanded')">
+        <div class="tool-header-left">
+          <span class="tool-card-chevron${isExpanded ? ' expanded' : ''}"><svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor"><path d="M2 1l4 3-4 3z"/></svg></span>
+          <span class="tool-name">${this.escapeHtml(toolName || '')}</span>
+          ${argsPreview ? `<span class="tool-args-preview">${this.escapeHtml(argsPreview)}</span>` : ''}
+        </div>
+        <div class="tool-header-right">
+          <button class="tool-action-btn copy-output-btn" title="Copy output" onclick="event.stopPropagation(); var t=this.closest('.tool-card').querySelector('.tool-output'); if(!t||!t.textContent.trim())return; var s=t.textContent,b=this; (navigator.clipboard?navigator.clipboard.writeText(s):new Promise(function(r){var a=document.createElement('textarea');a.value=s;a.style.cssText='position:fixed;left:-9999px';document.body.appendChild(a);a.select();document.execCommand('copy');document.body.removeChild(a);r()})).then(function(){b.classList.add('copied');setTimeout(function(){b.classList.remove('copied')},1500)})"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button>
+          <div class="tool-status ${status}">${status}</div>
+        </div>
+      </div>
+      <div class="tool-card-body${isExpanded ? ' expanded' : ''}">
+        ${!isEdit && argsJson ? `<div class="tool-args">${this.escapeHtml(argsJson)}</div>` : ''}
+        <div class="tool-output-wrapper">
+          <div class="tool-output"></div>
+        </div>
+      </div>
+    `;
+
+    // Insert diff view for Edit tools
+    if (isEdit) {
+      const diffEl = this.renderDiff(String(args.oldText || args.old_text || ''), String(args.newText || args.new_text || ''));
+      const body = card.querySelector('.tool-card-body');
+      if (body) body.insertBefore(diffEl, body.firstChild);
+    }
+
+    this.container.appendChild(card);
+    this.toolCards.set(String(toolCallId || ''), card);
+    this.scrollToBottom();
+
+    return card;
+  }
+
+  updateToolCard(toolExecution: ToolExecution) {
+    let card = this.toolCards.get(String(toolExecution.toolCallId || ''));
+
+    if (!card) {
+      card = this.createToolCard(toolExecution);
+    }
+
+    // Update status
+    const statusElement = card.querySelector('.tool-status');
+    if (statusElement) {
+      statusElement.className = `tool-status ${toolExecution.status}`;
+      statusElement.textContent = toolExecution.status ?? null;
+    }
+
+    // Auto-expand when streaming
+    if (toolExecution.status === 'streaming') {
+      const body = card.querySelector('.tool-card-body');
+      const chevron = card.querySelector('.tool-card-chevron');
+      if (body) body.classList.add('expanded');
+      if (chevron) chevron.classList.add('expanded');
+    }
+
+    // Update output
+    const outputElement = card.querySelector('.tool-output');
+    if (outputElement && toolExecution.output) {
+      outputElement.textContent = toolExecution.output;
+      this.scrollToBottom();
+    }
+  }
+
+  finalizeToolCard(toolCallId: string, result: ToolResult, isError: boolean) {
+    const card = this.toolCards.get(toolCallId);
+    if (!card) return;
+
+    // Update status
+    const statusElement = card.querySelector('.tool-status');
+    if (statusElement) {
+      const status = isError ? 'error' : 'complete';
+      statusElement.className = `tool-status ${status}`;
+      statusElement.textContent = status;
+    }
+
+    // Update output with final result
+    const outputElement = card.querySelector('.tool-output');
+    if (outputElement && result) {
+      const output = this.formatResult(result);
+      outputElement.textContent = output;
+    }
+
+    // Collapse completed cards (less noise)
+    if (!isError) {
+      const body = card.querySelector('.tool-card-body');
+      const chevron = card.querySelector('.tool-card-chevron');
+      if (body) body.classList.remove('expanded');
+      if (chevron) chevron.classList.remove('expanded');
+    }
+  }
+
+  /**
+   * Create a pre-collapsed card for session history using DOM methods (no innerHTML)
+   */
+  createHistoryCard(toolExecution: ToolExecution) {
+    const { toolCallId, toolName, args } = toolExecution;
+
+    const card = document.createElement('div');
+    card.className = 'tool-card';
+    card.dataset.toolCallId = String(toolCallId || '');
+
+    // Header
+    const header = document.createElement('div');
+    header.className = 'tool-card-header';
+
+    const headerLeft = document.createElement('div');
+    headerLeft.className = 'tool-header-left';
+
+    const chevron = document.createElement('span');
+    chevron.className = 'tool-card-chevron';
+    chevron.innerHTML = '<svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor"><path d="M2 1l4 3-4 3z"/></svg>';
+    headerLeft.appendChild(chevron);
+
+    const name = document.createElement('span');
+    name.className = 'tool-name';
+    name.textContent = String(toolName || '');
+    headerLeft.appendChild(name);
+
+    const preview = this.getArgsPreview(String(toolName || ''), args);
+    if (preview) {
+      const previewEl = document.createElement('span');
+      previewEl.className = 'tool-args-preview';
+      previewEl.textContent = preview;
+      headerLeft.appendChild(previewEl);
+    }
+
+    header.appendChild(headerLeft);
+
+    // Right side: copy button + status
+    const headerRight = document.createElement('div');
+    headerRight.className = 'tool-header-right';
+
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'tool-action-btn copy-output-btn';
+    copyBtn.title = 'Copy output';
+    copyBtn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>';
+    copyBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const output = card.querySelector('.tool-output');
+      if (!output || !output.textContent.trim()) return;
+      const text = output.textContent;
+      (navigator.clipboard ? navigator.clipboard.writeText(text) : new Promise<void>((r) => {
+        const ta = document.createElement('textarea'); ta.value = text; ta.style.cssText = 'position:fixed;left:-9999px';
+        document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); r();
+      })).then(() => {
+        copyBtn.classList.add('copied');
+        setTimeout(() => copyBtn.classList.remove('copied'), 1500);
+      });
+    });
+    headerRight.appendChild(copyBtn);
+
+    const status = document.createElement('div');
+    status.className = 'tool-status complete';
+    status.textContent = 'complete';
+    headerRight.appendChild(status);
+
+    header.appendChild(headerRight);
+
+    // Toggle expand on click
+    header.addEventListener('click', () => {
+      body.classList.toggle('expanded');
+      chevron.classList.toggle('expanded');
+    });
+
+    card.appendChild(header);
+
+    // Body (collapsed by default)
+    const body = document.createElement('div');
+    body.className = 'tool-card-body';
+
+    const isEdit = (toolName === 'edit' || toolName === 'Edit') && args && (args.oldText || args.old_text) && (args.newText || args.new_text);
+
+    if (isEdit) {
+      body.appendChild(this.renderDiff(String(args.oldText || args.old_text || ''), String(args.newText || args.new_text || '')));
+    } else {
+      const argsJson = this.formatJson(args);
+      if (argsJson) {
+        const argsEl = document.createElement('div');
+        argsEl.className = 'tool-args';
+        argsEl.textContent = argsJson;
+        body.appendChild(argsEl);
+      }
+    }
+
+    const outputEl = document.createElement('div');
+    outputEl.className = 'tool-output';
+    body.appendChild(outputEl);
+
+    card.appendChild(body);
+
+    this.container.appendChild(card);
+    this.toolCards.set(String(toolCallId || ''), card);
+
+    return card;
+  }
+
+  /**
+   * Add result to a history card (stays collapsed)
+   */
+  addHistoryResult(toolCallId: string, result: ToolResult, isError: boolean) {
+    const card = this.toolCards.get(toolCallId);
+    if (!card) return;
+
+    if (isError) {
+      const statusEl = card.querySelector('.tool-status');
+      if (statusEl) {
+        statusEl.className = 'tool-status error';
+        statusEl.textContent = 'error';
+      }
+    }
+
+    const outputElement = card.querySelector('.tool-output');
+    if (outputElement && result) {
+      outputElement.textContent = this.formatResult(result);
+    }
+  }
+
+  /** Compact preview for the header line */
+  getArgsPreview(toolName: string, args?: ToolArgs) {
+    if (!args || Object.keys(args).length === 0) return '';
+
+    // Show the most relevant arg inline
+    if (args.path) return String(args.path);
+    if (args.command) return String(args.command).substring(0, 80);
+    if (args.query) return String(args.query).substring(0, 60);
+    if (args.url) return String(args.url);
+
+    // Fallback: first string value
+    for (const val of Object.values(args)) {
+      if (typeof val === 'string' && val.length > 0) {
+        return val.substring(0, 60);
+      }
+    }
+    return '';
+  }
+
+  formatJson(obj?: ToolArgs) {
+    if (!obj) return '';
+    try {
+      if (Object.keys(obj).length === 0) return '';
+      return JSON.stringify(obj, null, 2);
+    } catch {
+      return String(obj);
+    }
+  }
+
+  /** Render a simple inline diff for Edit tool */
+  renderDiff(oldText: string, newText: string) {
+    const container = document.createElement('div');
+    container.className = 'tool-diff';
+
+    const oldLines = oldText.split('\n');
+    const newLines = newText.split('\n');
+
+    // Removed lines
+    for (const line of oldLines) {
+      const el = document.createElement('div');
+      el.className = 'diff-line diff-removed';
+      el.textContent = '- ' + line;
+      container.appendChild(el);
+    }
+
+    // Added lines
+    for (const line of newLines) {
+      const el = document.createElement('div');
+      el.className = 'diff-line diff-added';
+      el.textContent = '+ ' + line;
+      container.appendChild(el);
+    }
+
+    return container;
+  }
+
+  formatResult(result: ToolResult) {
+    if (!result) return '';
+
+    if (result.content && Array.isArray(result.content)) {
+      return result.content
+        .map((block) => {
+          if (block.type === 'text') return block.text;
+          return JSON.stringify(block);
+        })
+        .join('\n');
+    }
+
+    return JSON.stringify(result, null, 2);
+  }
+
+  escapeHtml(text: unknown) {
+    const div = document.createElement('div');
+    div.textContent = String(text ?? '');
+    return div.innerHTML;
+  }
+
+  scrollToBottom() {
+    if (this.container) {
+      const threshold = 100;
+      const isNear =
+        this.container.scrollHeight - this.container.scrollTop - this.container.clientHeight < threshold;
+      if (isNear) {
+        requestAnimationFrame(() => {
+          this.container.scrollTop = this.container.scrollHeight;
+        });
+      }
+    }
+  }
+
+  expandAll() {
+    this.toolCards.forEach(card => {
+      card.querySelector('.tool-card-body')?.classList.add('expanded');
+      card.querySelector('.tool-card-chevron')?.classList.add('expanded');
+    });
+  }
+
+  collapseAll() {
+    this.toolCards.forEach(card => {
+      card.querySelector('.tool-card-body')?.classList.remove('expanded');
+      card.querySelector('.tool-card-chevron')?.classList.remove('expanded');
+    });
+  }
+
+  clear() {
+    this.toolCards.forEach((card) => card.remove());
+    this.toolCards.clear();
+  }
+}