pi-tau-web-server 1.0.8

package/src/public/app-types.ts

@@ -0,0 +1,96 @@
+export type ModelRecord = {
+  provider?: string;
+  id?: string;
+  name?: string;
+  model?: string;
+  label?: string;
+  context?: string | number;
+  contextWindow?: string | number;
+  context_window?: string | number;
+  maxOutput?: string | number;
+  max_output?: string | number;
+  maxOut?: string | number;
+  thinking?: boolean | string;
+  images?: boolean | string;
+  [key: string]: unknown;
+};
+
+export type LiveSession = {
+  id: string;
+  cwd?: string;
+  sessionFile?: string | null;
+  sessionName?: string | null;
+  modelSpec?: string;
+  modelLabel?: string;
+  model?: ModelRecord | string | null;
+  thinkingLevel?: string;
+  isStreaming?: boolean;
+  createdAt?: string;
+  lastActiveAt?: string;
+  contextUsage?: UsageRecord;
+};
+
+export type LiveInstance = {
+  sessionFile?: string | null;
+  cwd?: string;
+  port: string;
+};
+
+export type UsageRecord = {
+  input?: number;
+  output?: number;
+  cacheRead?: number;
+  cacheWrite?: number;
+  cost?: { total?: number };
+  [key: string]: unknown;
+};
+
+export type MessageContentBlock = {
+  type?: string;
+  text?: string;
+  thinking?: string;
+  source?: { data?: string; media_type?: string };
+  data?: string;
+  media_type?: string;
+  id?: string;
+  name?: string;
+  arguments?: Record<string, unknown>;
+};
+
+export type AppMessage = {
+  id?: string;
+  role?: string;
+  content?: string | MessageContentBlock[];
+  usage?: UsageRecord;
+  images?: PendingImage[];
+  toolCallId?: string;
+  isError?: boolean;
+};
+
+export type AppEvent = {
+  type?: string;
+  sessionId?: string;
+  session?: LiveSession;
+  message?: AppMessage | string;
+  assistantMessageEvent?: { type?: string; delta?: string };
+  toolCallId?: string;
+  toolName?: string;
+  args?: Record<string, unknown>;
+  partialResult?: unknown;
+  result?: unknown;
+  isError?: boolean;
+  method?: string;
+  id?: string;
+  name?: string;
+  error?: string;
+  summary?: string;
+  contextUsage?: UsageRecord;
+  sessionFile?: string;
+  [key: string]: unknown;
+};
+
+export type PendingImage = { data: string; mimeType: string };
+export type PendingFilePath = { path: string; name: string; ext: string; sessionId?: string | null };
+export type QueuedCommand = { type: string; message?: string; images?: PendingImage[]; sessionId?: string };
+export type ExtensionUIRequest = { sessionId: string; event: AppEvent };
+export type RpcCommand = { type: string; sessionId?: string; filePath?: string; [key: string]: unknown };

package/src/public/app.ts

@@ -0,0 +1 @@
+import './app-main.js';

package/src/public/command-palette.ts

@@ -0,0 +1,53 @@
+type CommandPaletteItem = {
+  icon: string;
+  label: string;
+  desc: string;
+  action(): void;
+};
+
+export function setupCommandPalette(commands: CommandPaletteItem[]) {
+  // These elements are part of the app's static index.html shell, so they
+  // are present when this setup function runs; assert non-null at the query.
+  const commandBtn = document.getElementById('command-btn')!;
+  const commandPalette = document.getElementById('command-palette')!;
+  const commandPaletteOverlay = document.getElementById('command-palette-overlay')!;
+  const commandList = document.getElementById('command-list')!;
+
+  function open() {
+    commandList.innerHTML = '';
+    commands.forEach(cmd => {
+      const el = document.createElement('div');
+      el.className = 'command-item';
+      el.innerHTML = `
+        <div class="command-icon">${cmd.icon}</div>
+        <div>
+          <div class="command-label">${cmd.label}</div>
+          <div class="command-desc">${cmd.desc}</div>
+        </div>
+      `;
+      el.addEventListener('click', () => {
+        close();
+        cmd.action();
+      });
+      commandList.appendChild(el);
+    });
+    commandPalette.classList.remove('hidden');
+    commandPaletteOverlay.classList.remove('hidden');
+  }
+
+  function close() {
+    commandPalette.classList.add('hidden');
+    commandPaletteOverlay.classList.add('hidden');
+  }
+
+  function closeIfOpen() {
+    if (commandPalette.classList.contains('hidden')) return false;
+    close();
+    return true;
+  }
+
+  commandBtn.addEventListener('click', open);
+  commandPaletteOverlay.addEventListener('click', close);
+
+  return { close, closeIfOpen };
+}

package/src/public/dialogs.ts

@@ -0,0 +1,251 @@
+/**
+ * Dialogs - Handles extension UI dialogs
+ */
+
+export type DialogRequest = {
+  id?: string;
+  title?: string;
+  message?: string;
+  options?: string[];
+  placeholder?: string;
+  prefill?: string;
+  timeout?: number;
+  sessionId?: string;
+  method?: string;
+  [key: string]: unknown;
+};
+
+export class DialogHandler {
+  container: HTMLElement;
+  wsClient: { send(data: unknown): void };
+  getSessionId: (() => string | null) | null;
+  currentDialog: HTMLElement | null;
+  currentRequest: ({ sessionId?: string | null; request?: DialogRequest | null } & Record<string, unknown>) | null;
+  timeoutId: ReturnType<typeof setTimeout> | null;
+  onIdle: (() => void) | null;
+
+  constructor(container: HTMLElement, wsClient: { send(data: unknown): void }, getSessionId: (() => string | null) | null = null) {
+    this.container = container;
+    this.wsClient = wsClient;
+    this.getSessionId = getSessionId;
+    this.currentDialog = null;
+    this.currentRequest = null;
+    this.timeoutId = null;
+    this.onIdle = null;
+  }
+
+  showSelect(request: DialogRequest) {
+    this.cancelCurrentDialog(true);
+
+    const { id, title, options, timeout, sessionId } = request;
+
+    const dialog = document.createElement('div');
+    dialog.className = 'dialog';
+    dialog.innerHTML = `
+      <div class="dialog-title">${this.escapeHtml(title || 'Select an option')}</div>
+      <div class="dialog-options" id="dialog-options"></div>
+      <div class="dialog-actions">
+        <button id="dialog-cancel">Cancel</button>
+      </div>
+    `;
+
+    const optionsContainer = dialog.querySelector('#dialog-options')!;
+    
+    (options || []).forEach((option: string) => {
+      const optionDiv = document.createElement('div');
+      optionDiv.className = 'dialog-option';
+      optionDiv.textContent = option;
+      optionDiv.onclick = () => {
+        this.respond(id, { value: option }, sessionId);
+      };
+      optionsContainer.appendChild(optionDiv);
+    });
+
+    dialog.querySelector('#dialog-cancel')!.onclick = () => {
+      this.respond(id, { cancelled: true }, sessionId);
+    };
+
+    this.showDialog(dialog, timeout, id, sessionId, request);
+  }
+
+  showConfirm(request: DialogRequest) {
+    this.cancelCurrentDialog(true);
+
+    const { id, title, message, timeout, sessionId } = request;
+
+    const dialog = document.createElement('div');
+    dialog.className = 'dialog';
+    dialog.innerHTML = `
+      <div class="dialog-title">${this.escapeHtml(title || 'Confirm')}</div>
+      ${message ? `<div class="dialog-message">${this.escapeHtml(message)}</div>` : ''}
+      <div class="dialog-actions">
+        <button id="dialog-no">No</button>
+        <button id="dialog-yes">Yes</button>
+      </div>
+    `;
+
+    dialog.querySelector('#dialog-yes')!.onclick = () => {
+      this.respond(id, { confirmed: true }, sessionId);
+    };
+
+    dialog.querySelector('#dialog-no')!.onclick = () => {
+      this.respond(id, { confirmed: false }, sessionId);
+    };
+
+    this.showDialog(dialog, timeout, id, sessionId, request);
+  }
+
+  showInput(request: DialogRequest) {
+    this.cancelCurrentDialog(true);
+
+    const { id, title, placeholder, timeout, sessionId } = request;
+
+    const dialog = document.createElement('div');
+    dialog.className = 'dialog';
+    dialog.innerHTML = `
+      <div class="dialog-title">${this.escapeHtml(title || 'Input')}</div>
+      <input type="text" class="dialog-input" id="dialog-input" placeholder="${this.escapeHtml(placeholder || '')}" />
+      <div class="dialog-actions">
+        <button id="dialog-cancel">Cancel</button>
+        <button id="dialog-submit">Submit</button>
+      </div>
+    `;
+
+    const input = dialog.querySelector<HTMLInputElement>('#dialog-input');
+    if (!input) return;
+    
+    const submit = () => {
+      const value = input.value.trim();
+      this.respond(id, value ? { value } : { cancelled: true }, sessionId);
+    };
+
+    input.addEventListener('keypress', (e: KeyboardEvent) => {
+      if (e.key === 'Enter') submit();
+    });
+
+    dialog.querySelector('#dialog-submit')!.onclick = submit;
+    dialog.querySelector('#dialog-cancel')!.onclick = () => {
+      this.respond(id, { cancelled: true }, sessionId);
+    };
+
+    this.showDialog(dialog, timeout, id, sessionId, request);
+    
+    // Focus input after a short delay
+    setTimeout(() => input.focus(), 100);
+  }
+
+  showEditor(request: DialogRequest) {
+    this.cancelCurrentDialog(true);
+
+    const { id, title, prefill, timeout, sessionId } = request;
+
+    const dialog = document.createElement('div');
+    dialog.className = 'dialog';
+    dialog.innerHTML = `
+      <div class="dialog-title">${this.escapeHtml(title || 'Editor')}</div>
+      <textarea class="dialog-textarea" id="dialog-textarea">${this.escapeHtml(prefill || '')}</textarea>
+      <div class="dialog-actions">
+        <button id="dialog-cancel">Cancel</button>
+        <button id="dialog-save">Save</button>
+      </div>
+    `;
+
+    const textarea = dialog.querySelector<HTMLTextAreaElement>('#dialog-textarea');
+    if (!textarea) return;
+
+    dialog.querySelector('#dialog-save')!.onclick = () => {
+      const value = textarea.value;
+      this.respond(id, value ? { value } : { cancelled: true }, sessionId);
+    };
+
+    dialog.querySelector('#dialog-cancel')!.onclick = () => {
+      this.respond(id, { cancelled: true }, sessionId);
+    };
+
+    this.showDialog(dialog, timeout, id, sessionId, request);
+    
+    // Focus textarea after a short delay
+    setTimeout(() => textarea.focus(), 100);
+  }
+
+  showNotification(request: DialogRequest) {
+    const { message, notifyType } = request;
+    
+    // Create a temporary notification element
+    const notification = document.createElement('div');
+    notification.className = 'error-message';
+    notification.textContent = `${notifyType === 'error' ? '⚠️' : notifyType === 'warning' ? '⚠️' : 'ℹ️'} ${message}`;
+    
+    // Add to messages container temporarily
+    const messagesContainer = document.getElementById('messages');
+    if (messagesContainer) {
+      messagesContainer.appendChild(notification);
+      messagesContainer.scrollTop = messagesContainer.scrollHeight;
+      
+      // Remove after 5 seconds
+      setTimeout(() => {
+        notification.remove();
+      }, 5000);
+    }
+  }
+
+  showDialog(dialogElement: HTMLElement, timeout: number | undefined, requestId: string | undefined, sessionId: string | null = null, request: DialogRequest | null = null) {
+    this.currentDialog = dialogElement;
+    this.currentRequest = { id: requestId, sessionId, request };
+    this.container.innerHTML = '';
+    this.container.appendChild(dialogElement);
+    this.container.classList.remove('hidden');
+
+    // Set up timeout if specified
+    if (timeout) {
+      this.timeoutId = setTimeout(() => {
+        this.respond(requestId, { cancelled: true }, sessionId);
+      }, timeout);
+    }
+  }
+
+  cancelCurrentDialog(suppressIdle = false) {
+    if (!this.currentRequest?.id) {
+      this.clearCurrentDialog();
+      return;
+    }
+    const { id, sessionId } = this.currentRequest;
+    this.clearCurrentDialog();
+    this.wsClient.send({
+      type: 'extension_ui_response',
+      id,
+      sessionId: sessionId || this.getSessionId?.(),
+      cancelled: true,
+    });
+    if (!suppressIdle) this.onIdle?.();
+  }
+
+  clearCurrentDialog() {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+    
+    this.container.innerHTML = '';
+    this.container.classList.add('hidden');
+    this.currentDialog = null;
+    this.currentRequest = null;
+  }
+
+  respond(id: string | undefined, response: Record<string, unknown>, sessionId: string | null = null) {
+    this.clearCurrentDialog();
+    this.wsClient.send({
+      type: 'extension_ui_response',
+      id,
+      sessionId: sessionId || this.getSessionId?.(),
+      ...response
+    });
+    this.onIdle?.();
+  }
+
+  escapeHtml(text: string) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}

package/src/public/file-browser.ts

@@ -0,0 +1,224 @@
+/**
+ * File Browser — right sidebar file tree with drag-and-drop
+ */
+
+const FILE_ICONS: Record<string, string> = {
+  // Folders
+  directory: '📁',
+  // Code
+  js: '📄', ts: '📄', jsx: '📄', tsx: '📄',
+  py: '🐍', rb: '💎', go: '📄', rs: '🦀',
+  // Web
+  html: '🌐', css: '🎨', svg: '🎨',
+  // Data
+  json: '📋', yaml: '📋', yml: '📋', toml: '📋',
+  xml: '📋', csv: '📋',
+  // Docs
+  md: '📝', txt: '📝', rst: '📝',
+  // Images
+  png: '🖼️', jpg: '🖼️', jpeg: '🖼️', gif: '🖼️',
+  webp: '🖼️', ico: '🖼️',
+  // Config
+  env: '🔒', gitignore: '🔒', lock: '🔒',
+  // Default
+  default: '📄',
+};
+
+type FileItem = {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  size?: number | null;
+  mtime?: number;
+};
+
+export function getFileIcon(name: string, isDirectory: boolean) {
+  if (isDirectory) return FILE_ICONS.directory;
+  const ext = name.split('.').pop()?.toLowerCase() || '';
+  return FILE_ICONS[ext] || FILE_ICONS.default;
+}
+
+function formatSize(bytes?: number | null) {
+  if (bytes == null) return '';
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}K`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}M`;
+}
+
+export class FileBrowser {
+  container: HTMLElement;
+  pathEl: HTMLElement;
+  messageInput: HTMLElement;
+  onFileInserted: ((filePath: string) => void) | null;
+  getSessionId: (() => string | null) | null;
+  currentPath: string | null;
+
+  constructor(
+    container: HTMLElement,
+    pathEl: HTMLElement,
+    messageInput: HTMLElement,
+    onFileInserted: ((filePath: string) => void) | null = null,
+    getSessionId: (() => string | null) | null = null
+  ) {
+    this.container = container;
+    this.pathEl = pathEl;
+    this.messageInput = messageInput;
+    this.onFileInserted = onFileInserted;
+    this.getSessionId = getSessionId;
+    this.currentPath = null;
+
+    this.setupDropTarget();
+  }
+
+  async load(dirPath?: string | null) {
+    this.container.innerHTML = '<div class="file-loading">Loading…</div>';
+
+    try {
+      const params = new URLSearchParams();
+      const sessionId = this.getSessionId?.();
+      if (!sessionId) {
+        this.currentPath = null;
+        this.pathEl.textContent = '';
+        this.pathEl.title = '';
+        this.container.innerHTML = '<div class="file-loading">Select a Tau tab to browse files</div>';
+        return;
+      }
+      params.set('sessionId', sessionId);
+      if (dirPath) params.set('path', dirPath);
+      const qs = params.toString();
+      const url = qs ? `/api/files?${qs}` : '/api/files';
+      const res = await fetch(url);
+      const data = await res.json();
+
+      if (data.error) {
+        this.container.innerHTML = `<div class="file-loading">${data.error}</div>`;
+        return;
+      }
+
+      this.currentPath = data.path;
+      this.pathEl.textContent = data.path;
+      this.pathEl.title = data.path;
+      this.render(data.items);
+    } catch (err) {
+      this.container.innerHTML = '<div class="file-loading">Failed to load</div>';
+    }
+  }
+
+  getParentPath() {
+    if (!this.currentPath) return null;
+    const sep = this.currentPath.includes('\\') ? '\\' : '/';
+    const normalized = this.currentPath.endsWith(sep) ? this.currentPath.slice(0, -1) : this.currentPath;
+    const lastSep = normalized.lastIndexOf(sep);
+    if (lastSep <= 0) return sep === '/' ? '/' : null;
+    const parent = normalized.slice(0, lastSep);
+    return /^[A-Za-z]:$/.test(parent) ? parent + sep : parent;
+  }
+
+  render(items: FileItem[]) {
+    this.container.innerHTML = '';
+
+    if (items.length === 0) {
+      this.container.innerHTML = '<div class="file-loading">Empty directory</div>';
+      return;
+    }
+
+    for (const item of items) {
+      const el = document.createElement('div');
+      el.className = `file-item${item.isDirectory ? ' directory' : ''}`;
+      el.draggable = true;
+      el.dataset.path = item.path;
+      el.dataset.name = item.name;
+      el.dataset.isDirectory = String(item.isDirectory);
+
+      const icon = getFileIcon(item.name, item.isDirectory);
+      const size = item.isDirectory ? '' : formatSize(item.size);
+
+      el.innerHTML = `
+        <span class="file-icon">${icon}</span>
+        <span class="file-name" title="${item.name}">${item.name}</span>
+        ${size ? `<span class="file-size">${size}</span>` : ''}
+      `;
+
+      // Click: navigate directory or insert file path into input
+      el.addEventListener('click', () => {
+        if (item.isDirectory) {
+          this.load(item.path);
+        } else {
+          this.insertPath(item.path);
+        }
+      });
+
+      // Double-click: open file natively
+      el.addEventListener('dblclick', (e) => {
+        e.preventDefault();
+        if (!item.isDirectory) {
+          this.openNatively(item.path);
+        }
+      });
+
+      // Drag start
+      el.addEventListener('dragstart', (e) => {
+        if (!e.dataTransfer) return;
+        e.dataTransfer.setData('text/plain', item.path);
+        e.dataTransfer.effectAllowed = 'copy';
+        el.classList.add('dragging');
+      });
+
+      el.addEventListener('dragend', () => {
+        el.classList.remove('dragging');
+      });
+
+      this.container.appendChild(el);
+    }
+  }
+
+  async openNatively(filePath: string) {
+    try {
+      const sessionId = this.getSessionId?.();
+      if (!sessionId) return;
+      await fetch('/api/open', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ filePath, sessionId }),
+      });
+    } catch (err) {
+      console.error('[FileBrowser] Failed to open:', err);
+    }
+  }
+
+  insertPath(filePath: string) {
+    const input = this.messageInput;
+    const start = input.selectionStart ?? 0;
+    const end = input.selectionEnd ?? 0;
+    input.value = input.value.substring(0, start) + filePath + ' ' + input.value.substring(end);
+    input.selectionStart = input.selectionEnd = start + filePath.length + 1;
+    input.focus();
+    input.dispatchEvent(new Event('input'));
+    if (this.onFileInserted) this.onFileInserted(filePath);
+  }
+
+  setupDropTarget() {
+    const input = this.messageInput;
+
+    input.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+      input.classList.add('file-drop-hover');
+    });
+
+    input.addEventListener('dragleave', () => {
+      input.classList.remove('file-drop-hover');
+    });
+
+    input.addEventListener('drop', (e) => {
+      e.preventDefault();
+      input.classList.remove('file-drop-hover');
+
+      const filePath = e.dataTransfer?.getData('text/plain') ?? '';
+      // Accept Unix paths (/) and Windows paths (C:\ or C:/)
+      if (filePath && (filePath.startsWith('/') || /^[A-Za-z]:[\\\/]/.test(filePath))) {
+        this.insertPath(filePath);
+      }
+    });
+  }
+}

package/src/public/launcher-panel.ts

@@ -0,0 +1,68 @@
+import { Launcher } from './launcher.js';
+
+type LauncherPanelOptions = {
+  launcherEl: HTMLElement;
+  messagesContainer: HTMLElement;
+  createSession(projectPath: string): Promise<void>;
+};
+
+export function setupLauncherPanel({ launcherEl, messagesContainer, createSession }: LauncherPanelOptions) {
+  const launcher = new Launcher(launcherEl, createSession);
+
+  async function init() {
+    try {
+      const res = await fetch('/api/projects');
+      const data = await res.json();
+      if (data.projects && data.projects.length > 0) {
+        launcher.projects = data.projects;
+        launcher.render();
+        addLauncherNav();
+      }
+    } catch {}
+  }
+
+  function addLauncherNav() {
+    const modeToggle = document.getElementById('mode-toggle');
+    if (!modeToggle || modeToggle.querySelector('.mode-link-launcher')) return;
+
+    const launcherLink = document.createElement('span');
+    launcherLink.className = 'mode-link mode-link-launcher';
+    launcherLink.title = 'Projects';
+    launcherLink.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>';
+    launcherLink.addEventListener('click', () => show());
+    modeToggle.appendChild(launcherLink);
+  }
+
+  function isVisible() {
+    return !!launcherEl && !launcherEl.classList.contains('hidden');
+  }
+
+  function show() {
+    launcherEl.classList.remove('hidden');
+    messagesContainer.style.display = 'none';
+    const inputArea = document.querySelector<HTMLElement>('.input-area');
+    if (inputArea) inputArea.style.display = 'none';
+    document.querySelector('.welcome')?.remove();
+
+    document.querySelectorAll('.mode-link').forEach(l => l.classList.remove('active'));
+    document.querySelector('.mode-link-launcher')?.classList.add('active');
+
+    launcher.load();
+  }
+
+  function hide() {
+    launcherEl.classList.add('hidden');
+    messagesContainer.style.display = '';
+    const inputArea = document.querySelector<HTMLElement>('.input-area');
+    if (inputArea) inputArea.style.display = '';
+
+    document.querySelectorAll('.mode-link').forEach(l => l.classList.remove('active'));
+    document.querySelector('.mode-link:first-child')?.classList.add('active');
+  }
+
+  document.querySelector('.mode-link:first-child')?.addEventListener('click', () => {
+    hide();
+  });
+
+  return { init, isVisible, show, hide };
+}