pi-tau-web-server 1.0.8

package/public/app-types.js

@@ -0,0 +1 @@
+export {};

package/public/app.js

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

package/public/command-palette.js

@@ -0,0 +1,42 @@
+export function setupCommandPalette(commands) {
+    // 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/public/dialogs.js

@@ -0,0 +1,199 @@
+/**
+ * Dialogs - Handles extension UI dialogs
+ */
+export class DialogHandler {
+    container;
+    wsClient;
+    getSessionId;
+    currentDialog;
+    currentRequest;
+    timeoutId;
+    onIdle;
+    constructor(container, wsClient, getSessionId = null) {
+        this.container = container;
+        this.wsClient = wsClient;
+        this.getSessionId = getSessionId;
+        this.currentDialog = null;
+        this.currentRequest = null;
+        this.timeoutId = null;
+        this.onIdle = null;
+    }
+    showSelect(request) {
+        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) => {
+            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) {
+        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) {
+        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('#dialog-input');
+        if (!input)
+            return;
+        const submit = () => {
+            const value = input.value.trim();
+            this.respond(id, value ? { value } : { cancelled: true }, sessionId);
+        };
+        input.addEventListener('keypress', (e) => {
+            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) {
+        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('#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) {
+        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, timeout, requestId, sessionId = null, request = 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, response, sessionId = null) {
+        this.clearCurrentDialog();
+        this.wsClient.send({
+            type: 'extension_ui_response',
+            id,
+            sessionId: sessionId || this.getSessionId?.(),
+            ...response
+        });
+        this.onIdle?.();
+    }
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}

package/public/file-browser.js

@@ -0,0 +1,196 @@
+/**
+ * File Browser — right sidebar file tree with drag-and-drop
+ */
+const FILE_ICONS = {
+    // 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: '📄',
+};
+export function getFileIcon(name, isDirectory) {
+    if (isDirectory)
+        return FILE_ICONS.directory;
+    const ext = name.split('.').pop()?.toLowerCase() || '';
+    return FILE_ICONS[ext] || FILE_ICONS.default;
+}
+function formatSize(bytes) {
+    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;
+    pathEl;
+    messageInput;
+    onFileInserted;
+    getSessionId;
+    currentPath;
+    constructor(container, pathEl, messageInput, onFileInserted = null, getSessionId = null) {
+        this.container = container;
+        this.pathEl = pathEl;
+        this.messageInput = messageInput;
+        this.onFileInserted = onFileInserted;
+        this.getSessionId = getSessionId;
+        this.currentPath = null;
+        this.setupDropTarget();
+    }
+    async load(dirPath) {
+        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) {
+        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) {
+        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) {
+        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/public/icons/tau-logo.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+  <rect width="512" height="512" fill="#f0efe9"/>
+  <!-- Grid: 8x8, each cell 40px, centered in 512 (offset: 96,96) -->
+  <!-- Top bar: 3 cells wide at row 2, cols 2-4 -->
+  <rect x="176" y="156" width="56" height="56" fill="#2d2d2d"/>
+  <rect x="232" y="156" width="56" height="56" fill="#2d2d2d"/>
+  <rect x="288" y="156" width="56" height="56" fill="#2d2d2d"/>
+  <!-- Stem: 1 cell wide at col 3, rows 3-4 -->
+  <rect x="232" y="212" width="56" height="56" fill="#2d2d2d"/>
+  <rect x="232" y="268" width="56" height="56" fill="#2d2d2d"/>
+  <!-- Curl: offset block at col 4, row 5 -->
+  <rect x="288" y="324" width="56" height="56" fill="#2d2d2d"/>
+</svg>