agentgui 1.0.93 → 1.0.94

package/.prd

@@ -0,0 +1 @@
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.93",
+  "version": "1.0.94",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",
@@ -23,7 +23,9 @@
   "dependencies": {
     "@anthropic-ai/claude-code": "^1.0.128",
     "better-sqlite3": "^12.6.2",
+    "busboy": "^1.6.0",
+    "express": "^5.2.1",
+    "fsbrowse": "file:../fsbrowse",
     "ws": "^8.14.2"
-  },
-  "devDependencies": {}
+  }
 }

package/server.js

@@ -4,9 +4,15 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import { WebSocketServer } from 'ws';
 import { execSync } from 'child_process';
+import { createRequire } from 'module';
 import { queries } from './database.js';
 import { runClaudeWithStreaming } from './lib/claude-runner.js';
 
+const require = createRequire(import.meta.url);
+const express = require('express');
+const Busboy = require('busboy');
+const fsbrowse = require('fsbrowse');
+
 // System prompt for Claude to format responses as HTML
 const SYSTEM_PROMPT = `Always write your responses in ripple-ui enhanced HTML. Avoid overriding light/dark mode CSS variables. Use all the benefits of HTML to express technical details with proper semantic markup, tables, code blocks, headings, and lists. Write clean, well-structured HTML that respects the existing design system.`;
 
@@ -24,6 +30,70 @@ const watch = process.argv.includes('--no-watch') ? false : (process.argv.includ
 const staticDir = path.join(__dirname, 'static');
 if (!fs.existsSync(staticDir)) fs.mkdirSync(staticDir, { recursive: true });
 
+// Express sub-app for fsbrowse file browser and file upload
+const expressApp = express();
+
+// File upload endpoint - copies dropped files to conversation workingDirectory
+expressApp.post(BASE_URL + '/api/upload/:conversationId', (req, res) => {
+  try {
+    const conv = queries.getConversation(req.params.conversationId);
+    if (!conv) return res.status(404).json({ error: 'Conversation not found' });
+    if (!conv.workingDirectory) return res.status(400).json({ error: 'No working directory set for this conversation' });
+
+    const uploadDir = conv.workingDirectory;
+    if (!fs.existsSync(uploadDir)) {
+      fs.mkdirSync(uploadDir, { recursive: true });
+    }
+
+    const bb = Busboy({ headers: req.headers });
+    const fileNames = [];
+    const writePromises = [];
+
+    bb.on('file', (fieldname, file, info) => {
+      const safeName = path.basename(info.filename);
+      const filePath = path.join(uploadDir, safeName);
+      fileNames.push(safeName);
+      const p = new Promise((resolve) => {
+        const writeStream = fs.createWriteStream(filePath);
+        file.pipe(writeStream);
+        writeStream.on('finish', resolve);
+        writeStream.on('error', () => { file.resume(); resolve(); });
+      });
+      writePromises.push(p);
+    });
+
+    bb.on('finish', () => {
+      Promise.all(writePromises).then(() => {
+        res.json({ ok: true, files: fileNames, count: fileNames.length });
+      }).catch(() => {
+        res.json({ ok: true, files: fileNames, count: fileNames.length });
+      });
+    });
+
+    bb.on('error', (err) => {
+      res.status(500).json({ error: 'Upload failed: ' + err.message });
+    });
+
+    req.pipe(bb);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// fsbrowse file browser - mounted per conversation workingDirectory
+// Route: /gm/files/:conversationId/*
+expressApp.use(BASE_URL + '/files/:conversationId', (req, res, next) => {
+  const conv = queries.getConversation(req.params.conversationId);
+  if (!conv || !conv.workingDirectory) {
+    return res.status(404).json({ error: 'Conversation not found or no working directory' });
+  }
+  // Create a fresh fsbrowse router for this conversation's directory
+  const router = fsbrowse({ baseDir: conv.workingDirectory });
+  // Strip the conversationId param from the path before passing to fsbrowse
+  req.baseUrl = BASE_URL + '/files/' + req.params.conversationId;
+  router(req, res, next);
+});
+
 function discoverAgents() {
   const agents = [];
   const binaries = [
@@ -59,6 +129,12 @@ const server = http.createServer(async (req, res) => {
   res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
   if (req.method === 'OPTIONS') { res.writeHead(200); res.end(); return; }
 
+  // Route file upload and fsbrowse requests through Express sub-app
+  const pathOnly = req.url.split('?')[0];
+  if (pathOnly.startsWith(BASE_URL + '/api/upload/') || pathOnly.startsWith(BASE_URL + '/files/')) {
+    return expressApp(req, res);
+  }
+
   if (req.url === '/') { res.writeHead(302, { Location: BASE_URL + '/' }); res.end(); return; }
 
   if (!req.url.startsWith(BASE_URL + '/') && req.url !== BASE_URL) {

package/static/index.html

@@ -2,7 +2,7 @@
 <html lang="en" class="light">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <meta name="description" content="AgentGUI - Real-time Claude Code Execution Visualization">
   <title>AgentGUI - Agent Execution Visualizer</title>
 
@@ -460,97 +460,7 @@
       color: var(--color-text-secondary);
     }
 
-    /* Responsive */
-    @media (max-width: 768px) {
-      .layout-with-sidebar {
-        grid-template-columns: 1fr;
-      }
-
-      .sidebar {
-        display: none;
-        position: fixed;
-        top: 60px;
-        left: 0;
-        width: 250px;
-        height: calc(100vh - 60px);
-        z-index: 1000;
-        overflow-y: auto;
-      }
-
-      .sidebar.mobile-visible {
-        display: flex;
-      }
-
-      .execution-panel {
-        grid-template-columns: 1fr;
-        padding: 1rem;
-      }
-
-      .header-controls {
-        flex-wrap: wrap;
-        gap: 0.5rem;
-      }
-
-      .execution-input-group {
-        grid-template-columns: 1fr;
-        gap: 0.5rem;
-      }
-
-      #output-scroll {
-        padding: 0.75rem;
-      }
-
-      header {
-        padding: 0.75rem;
-        height: 50px;
-      }
-
-      .header-title {
-        font-size: 1.25rem;
-      }
-    }
-
-    @media (max-width: 480px) {
-      .layout-with-sidebar {
-        grid-template-columns: 1fr;
-      }
-
-      .sidebar {
-        width: 100%;
-      }
-
-      .execution-panel {
-        padding: 0.75rem;
-      }
-
-      .execution-textarea {
-        min-height: 2.5rem;
-        max-height: 6rem;
-      }
-
-      .btn {
-        padding: 0.5rem 1rem;
-        font-size: 0.8rem;
-      }
-
-      #output-scroll {
-        padding: 0.5rem;
-      }
-
-      header {
-        padding: 0.5rem;
-        height: 45px;
-      }
-
-      .header-title {
-        font-size: 1rem;
-      }
-
-      .status-badge {
-        padding: 0.25rem 0.5rem;
-        font-size: 0.75rem;
-      }
-    }
+    /* Old responsive rules removed - see bottom of style block for consolidated responsive CSS */
 
     /* Folder Browser Modal */
     .folder-modal-overlay {
@@ -959,12 +869,338 @@
     .flex-shrink-0 {
       flex-shrink: 0;
     }
+
+    /* Hamburger menu button */
+    .hamburger-btn {
+      display: none;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+      width: 44px;
+      height: 44px;
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 8px;
+      border-radius: 0.375rem;
+      flex-shrink: 0;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .hamburger-btn:hover {
+      background-color: var(--color-border);
+    }
+
+    .hamburger-btn span {
+      display: block;
+      width: 20px;
+      height: 2px;
+      background-color: var(--color-text-primary);
+      border-radius: 1px;
+      transition: transform 0.2s, opacity 0.2s;
+    }
+
+    /* Sidebar overlay for mobile */
+    .sidebar-overlay {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 999;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .sidebar-overlay.visible {
+      display: block;
+    }
+
+    /* View toggle bar */
+    .view-toggle-bar {
+      display: flex;
+      gap: 0;
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-bg-secondary);
+      flex-shrink: 0;
+      padding: 0 1rem;
+    }
+
+    .view-toggle-btn {
+      padding: 0.625rem 1rem;
+      border: none;
+      background: none;
+      cursor: pointer;
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      border-bottom: 2px solid transparent;
+      transition: all 0.2s;
+      min-height: 44px;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .view-toggle-btn:hover {
+      color: var(--color-text-primary);
+    }
+
+    .view-toggle-btn.active {
+      color: var(--color-primary);
+      border-bottom-color: var(--color-primary);
+    }
+
+    /* Drop zone overlay */
+    .drop-zone-overlay {
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(59, 130, 246, 0.1);
+      border: 3px dashed var(--color-primary);
+      border-radius: 0.5rem;
+      z-index: 100;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .drop-zone-overlay.visible {
+      display: flex;
+    }
+
+    #output-scroll {
+      position: relative;
+    }
+
+    .drop-zone-content {
+      text-align: center;
+      color: var(--color-primary);
+      pointer-events: none;
+    }
+
+    .drop-zone-icon {
+      font-size: 3rem;
+      font-weight: 300;
+      line-height: 1;
+      margin-bottom: 0.5rem;
+    }
+
+    .drop-zone-text {
+      font-size: 1rem;
+      font-weight: 500;
+    }
+
+    /* Upload toast notification */
+    .upload-toast {
+      position: fixed;
+      bottom: 100px;
+      left: 50%;
+      transform: translateX(-50%);
+      padding: 0.75rem 1.5rem;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      z-index: 2000;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      transition: opacity 0.3s;
+    }
+
+    .upload-toast.success {
+      background: var(--color-success);
+      color: white;
+    }
+
+    .upload-toast.error {
+      background: var(--color-error);
+      color: white;
+    }
+
+    .upload-toast.info {
+      background: var(--color-primary);
+      color: white;
+    }
+
+    /* File browser container */
+    .file-browser-container {
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    .file-browser-iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+
+    /* Safe area insets for notched phones */
+    .app-container {
+      padding-top: env(safe-area-inset-top);
+      padding-bottom: env(safe-area-inset-bottom);
+      padding-left: env(safe-area-inset-left);
+      padding-right: env(safe-area-inset-right);
+    }
+
+    /* Responsive improvements */
+    @media (max-width: 768px) {
+      .hamburger-btn {
+        display: flex;
+      }
+
+      .layout-with-sidebar {
+        grid-template-columns: 1fr;
+      }
+
+      .sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 280px;
+        height: 100%;
+        z-index: 1000;
+        transform: translateX(-100%);
+        transition: transform 0.3s ease;
+        box-shadow: none;
+      }
+
+      .sidebar.mobile-visible {
+        transform: translateX(0);
+        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
+      }
+
+      .execution-panel {
+        grid-template-columns: 1fr;
+        padding: 0.75rem;
+        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
+      }
+
+      .execution-input-group {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+      }
+
+      .btn {
+        min-height: 44px;
+        min-width: 44px;
+      }
+
+      .conversation-item {
+        padding: 0.875rem 0.5rem;
+        min-height: 44px;
+      }
+
+      .sidebar-new-btn {
+        min-height: 44px;
+        min-width: 44px;
+        padding: 0.5rem 0.75rem;
+      }
+
+      header {
+        padding: 0.5rem 0.75rem;
+        height: auto;
+        min-height: 50px;
+        padding-top: calc(0.5rem + env(safe-area-inset-top));
+      }
+
+      .header-title {
+        font-size: 1.125rem;
+      }
+
+      .status-badge {
+        padding: 0.375rem 0.625rem;
+        font-size: 0.75rem;
+      }
+
+      #output-scroll {
+        padding: 0.75rem;
+        -webkit-overflow-scrolling: touch;
+      }
+
+      .execution-textarea {
+        min-height: 44px;
+        font-size: 16px;
+      }
+
+      .view-toggle-btn {
+        flex: 1;
+        text-align: center;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .sidebar {
+        width: calc(100% - 3rem);
+        max-width: 320px;
+      }
+
+      header {
+        padding: 0.5rem;
+      }
+
+      .header-title {
+        font-size: 1rem;
+      }
+
+      .header-controls {
+        gap: 0.375rem;
+      }
+
+      .execution-panel {
+        padding: 0.5rem;
+        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
+      }
+
+      .execution-textarea {
+        min-height: 44px;
+        max-height: 6rem;
+        font-size: 16px;
+      }
+
+      .btn {
+        padding: 0.625rem 1rem;
+        font-size: 0.8rem;
+      }
+
+      #output-scroll {
+        padding: 0.5rem;
+      }
+
+      .status-badge {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.7rem;
+      }
+
+      .drop-zone-icon {
+        font-size: 2rem;
+      }
+
+      .drop-zone-text {
+        font-size: 0.875rem;
+      }
+    }
+
+    /* Tablet landscape */
+    @media (min-width: 769px) and (max-width: 1024px) {
+      .layout-with-sidebar {
+        grid-template-columns: 250px 1fr;
+      }
+
+      .sidebar {
+        width: auto;
+      }
+    }
   </style>
 </head>
 <body>
   <div class="app-container">
     <!-- Header -->
     <header>
+      <button class="hamburger-btn" data-hamburger title="Toggle sidebar" aria-label="Toggle sidebar">
+        <span></span><span></span><span></span>
+      </button>
       <h1 class="header-title">AgentGUI</h1>
 
       <div class="header-controls">
@@ -974,11 +1210,14 @@
         </div>
 
         <button class="btn btn-primary" data-theme-toggle title="Toggle dark mode">
-          🌓 Theme
+          Theme
         </button>
       </div>
     </header>
 
+    <!-- Sidebar Overlay (mobile) -->
+    <div class="sidebar-overlay" data-sidebar-overlay></div>
+
     <!-- Main Content with Sidebar -->
     <div class="layout-with-sidebar">
       <!-- Sidebar -->
@@ -994,9 +1233,27 @@
 
       <!-- Main Content Area -->
       <main id="app" class="main-content">
+        <!-- View Toggle Bar -->
+        <div class="view-toggle-bar" id="viewToggleBar" style="display:none;">
+          <button class="view-toggle-btn active" data-view="chat">Chat</button>
+          <button class="view-toggle-btn" data-view="files">Files</button>
+        </div>
+
         <!-- Output Container - Scrollable -->
-        <div id="output-scroll" role="region" aria-label="Execution output" aria-live="polite" aria-atomic="false">
+        <div id="output-scroll" role="region" aria-label="Execution output" aria-live="polite" aria-atomic="false" data-drop-zone>
           <div id="output" class="output"></div>
+          <!-- Drop zone overlay -->
+          <div class="drop-zone-overlay" id="dropZoneOverlay">
+            <div class="drop-zone-content">
+              <div class="drop-zone-icon">+</div>
+              <div class="drop-zone-text">Drop files here to copy to working directory</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- File Browser iframe (hidden by default) -->
+        <div id="fileBrowserContainer" class="file-browser-container" style="display:none;">
+          <iframe id="fileBrowserIframe" class="file-browser-iframe" sandbox="allow-same-origin allow-scripts allow-forms allow-popups"></iframe>
         </div>
 
         <!-- Execution Panel - Fixed at bottom -->
@@ -1066,6 +1323,9 @@
   <!-- 8. Main Client (depends on all above) -->
   <script src="/gm/js/client.js"></script>
 
+  <!-- 9. Features: drag-drop, file browser, mobile sidebar -->
+  <script src="/gm/js/features.js"></script>
+
   <!-- Inline initialization -->
   <script>
     // Set initial theme based on preference

package/static/js/features.js

@@ -0,0 +1,243 @@
+/**
+ * Features Module
+ * Drag-and-drop file upload, fsbrowse file browser toggle, mobile sidebar
+ */
+
+(function() {
+  const BASE = window.__BASE_URL || '';
+  let currentConversation = null;
+  let currentView = 'chat';
+  let dragCounter = 0;
+
+  function init() {
+    setupHamburgerMenu();
+    setupDragAndDrop();
+    setupViewToggle();
+    setupConversationListener();
+  }
+
+  // --- Hamburger Menu & Mobile Sidebar ---
+  function setupHamburgerMenu() {
+    const hamburger = document.querySelector('[data-hamburger]');
+    const sidebar = document.querySelector('[data-sidebar]');
+    const overlay = document.querySelector('[data-sidebar-overlay]');
+
+    if (!hamburger || !sidebar) return;
+
+    hamburger.addEventListener('click', function(e) {
+      e.stopPropagation();
+      const isOpen = sidebar.classList.contains('mobile-visible');
+      if (isOpen) {
+        closeSidebar();
+      } else {
+        openSidebar();
+      }
+    });
+
+    if (overlay) {
+      overlay.addEventListener('click', closeSidebar);
+    }
+
+    function openSidebar() {
+      sidebar.classList.add('mobile-visible');
+      if (overlay) overlay.classList.add('visible');
+    }
+
+    function closeSidebar() {
+      sidebar.classList.remove('mobile-visible');
+      if (overlay) overlay.classList.remove('visible');
+    }
+
+    // Close sidebar when conversation is selected (mobile)
+    window.addEventListener('conversation-selected', function() {
+      if (window.innerWidth <= 768) {
+        closeSidebar();
+      }
+    });
+
+    // Close sidebar on window resize to desktop
+    window.addEventListener('resize', function() {
+      if (window.innerWidth > 768) {
+        closeSidebar();
+      }
+    });
+  }
+
+  // --- Drag and Drop File Upload ---
+  function setupDragAndDrop() {
+    const dropZone = document.querySelector('[data-drop-zone]');
+    const overlay = document.getElementById('dropZoneOverlay');
+
+    if (!dropZone || !overlay) return;
+
+    dropZone.addEventListener('dragenter', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter++;
+      if (dragCounter === 1) {
+        overlay.classList.add('visible');
+      }
+    });
+
+    dropZone.addEventListener('dragover', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    });
+
+    dropZone.addEventListener('dragleave', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter--;
+      if (dragCounter <= 0) {
+        dragCounter = 0;
+        overlay.classList.remove('visible');
+      }
+    });
+
+    dropZone.addEventListener('drop', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter = 0;
+      overlay.classList.remove('visible');
+
+      if (!currentConversation) {
+        showToast('Select a conversation first', 'error');
+        return;
+      }
+
+      const files = e.dataTransfer.files;
+      if (!files || files.length === 0) return;
+
+      uploadFiles(files);
+    });
+  }
+
+  function uploadFiles(files) {
+    if (!currentConversation) {
+      showToast('No conversation selected', 'error');
+      return;
+    }
+
+    const formData = new FormData();
+    for (let i = 0; i < files.length; i++) {
+      formData.append('file', files[i]);
+    }
+
+    showToast('Uploading ' + files.length + ' file(s)...', 'info');
+
+    fetch(BASE + '/api/upload/' + currentConversation, {
+      method: 'POST',
+      body: formData
+    })
+    .then(function(res) { return res.json(); })
+    .then(function(data) {
+      if (data.ok) {
+        showToast(data.count + ' file(s) uploaded', 'success');
+      } else {
+        showToast('Upload failed: ' + (data.error || 'Unknown error'), 'error');
+      }
+    })
+    .catch(function(err) {
+      showToast('Upload failed: ' + err.message, 'error');
+    });
+  }
+
+  function showToast(message, type) {
+    var existing = document.querySelector('.upload-toast');
+    if (existing) existing.remove();
+
+    var toast = document.createElement('div');
+    toast.className = 'upload-toast ' + (type || 'info');
+    toast.textContent = message;
+    document.body.appendChild(toast);
+
+    setTimeout(function() {
+      toast.style.opacity = '0';
+      setTimeout(function() { toast.remove(); }, 300);
+    }, 3000);
+  }
+
+  // --- View Toggle (Chat / Files) ---
+  function setupViewToggle() {
+    var bar = document.getElementById('viewToggleBar');
+    if (!bar) return;
+
+    var buttons = bar.querySelectorAll('.view-toggle-btn');
+    buttons.forEach(function(btn) {
+      btn.addEventListener('click', function() {
+        var view = btn.dataset.view;
+        switchView(view);
+      });
+    });
+  }
+
+  function switchView(view) {
+    currentView = view;
+    var bar = document.getElementById('viewToggleBar');
+    var chatArea = document.getElementById('output-scroll');
+    var execPanel = document.querySelector('.execution-panel');
+    var fileBrowser = document.getElementById('fileBrowserContainer');
+    var iframe = document.getElementById('fileBrowserIframe');
+
+    if (!bar) return;
+
+    // Update active button
+    bar.querySelectorAll('.view-toggle-btn').forEach(function(btn) {
+      btn.classList.toggle('active', btn.dataset.view === view);
+    });
+
+    if (view === 'files') {
+      if (chatArea) chatArea.style.display = 'none';
+      if (execPanel) execPanel.style.display = 'none';
+      if (fileBrowser) {
+        fileBrowser.style.display = 'flex';
+        if (iframe && currentConversation) {
+          var src = BASE + '/files/' + currentConversation + '/';
+          if (iframe.src !== location.origin + src) {
+            iframe.src = src;
+          }
+        }
+      }
+    } else {
+      if (chatArea) chatArea.style.display = '';
+      if (execPanel) execPanel.style.display = '';
+      if (fileBrowser) fileBrowser.style.display = 'none';
+    }
+  }
+
+  function updateViewToggleVisibility() {
+    var bar = document.getElementById('viewToggleBar');
+    if (!bar) return;
+
+    // Show toggle bar only when a conversation is selected
+    if (currentConversation) {
+      bar.style.display = 'flex';
+    } else {
+      bar.style.display = 'none';
+    }
+  }
+
+  // --- Conversation Listener ---
+  function setupConversationListener() {
+    window.addEventListener('conversation-selected', function(e) {
+      currentConversation = e.detail.conversationId;
+      updateViewToggleVisibility();
+      // If currently in files view, reload the iframe
+      if (currentView === 'files') {
+        switchView('files');
+      }
+    });
+
+    // Also listen for conversation created
+    window.addEventListener('create-new-conversation', function() {
+      // Will be updated when conversation-selected fires
+    });
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

package/static/styles.css

@@ -1201,18 +1201,21 @@ html, body {
 /* Responsive design */
 @media (max-width: 768px) {
   .sidebar {
-    position: absolute;
+    position: fixed;
     left: 0;
     top: 0;
     bottom: 0;
-    z-index: 400;
+    z-index: 1000;
     width: 280px;
     transform: translateX(-100%);
-    box-shadow: var(--shadow-lg);
+    box-shadow: none;
+    transition: transform 0.3s ease;
   }
 
-  .sidebar.open {
+  .sidebar.open,
+  .sidebar.mobile-visible {
     transform: translateX(0);
+    box-shadow: var(--shadow-lg);
   }
 
   .sidebar-toggle {
@@ -1229,6 +1232,7 @@ html, body {
 
   .chat-input-section {
     padding: 1rem 1.5rem;
+    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
   }
 
   .chat-footer {
@@ -1846,3 +1850,41 @@ p code {
   word-wrap: break-word;
   line-height: 1.5;
 }
+
+/* Touch-friendly interactive elements */
+@media (pointer: coarse) {
+  .chat-item,
+  .new-chat-btn,
+  .settings-btn,
+  .action-btn,
+  .gm-btn,
+  .chat-option-btn,
+  .close-btn {
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  .chat-input {
+    font-size: 16px;
+    min-height: 44px;
+  }
+
+  .chat-messages {
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* Safe area padding for notched phones */
+@supports (padding-top: env(safe-area-inset-top)) {
+  #app {
+    padding-top: env(safe-area-inset-top);
+  }
+
+  .chat-input-section {
+    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
+  }
+
+  .chat-footer {
+    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
+  }
+}