@agent-link/server 0.1.115 → 0.1.117

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-link/server",
-  "version": "0.1.115",
+  "version": "0.1.117",
   "description": "AgentLink relay server",
   "license": "MIT",
   "repository": {

package/web/app.js

@@ -16,6 +16,7 @@ import {
 import { createStreaming } from './modules/streaming.js';
 import { createSidebar } from './modules/sidebar.js';
 import { createConnection } from './modules/connection.js';
+import { createFileBrowser } from './modules/fileBrowser.js';
 
 // ── App ─────────────────────────────────────────────────────────────────────
 const App = {
@@ -94,6 +95,16 @@ const App = {
     const currentConversationId = ref(crypto.randomUUID());    // currently visible conversation
     const processingConversations = ref({});    // conversationId → boolean
 
+    // File browser state
+    const filePanelOpen = ref(false);
+    const filePanelWidth = ref(parseInt(localStorage.getItem('agentlink-file-panel-width'), 10) || 280);
+    const fileTreeRoot = ref(null);
+    const fileTreeLoading = ref(false);
+    const fileContextMenu = ref(null);
+    const sidebarView = ref('sessions');       // 'sessions' | 'files' (mobile only)
+    const isMobile = ref(window.innerWidth <= 768);
+    const workdirMenuOpen = ref(false);
+
     // ── switchConversation: save current → load target ──
     // Defined here and used by sidebar.newConversation, sidebar.resumeSession, workdir_changed
     // Needs access to streaming / connection which are created later, so we use late-binding refs.
@@ -233,7 +244,7 @@ const App = {
       switchConversation,
     });
 
-    const { connect, wsSend, closeWs, submitPassword, setDequeueNext, getToolMsgMap, restoreToolMsgMap, clearToolMsgMap } = createConnection({
+    const { connect, wsSend, closeWs, submitPassword, setDequeueNext, setFileBrowser, getToolMsgMap, restoreToolMsgMap, clearToolMsgMap } = createConnection({
       status, agentName, hostname, workDir, sessionId, error,
       serverVersion, agentVersion, latency,
       messages, isProcessing, isCompacting, visibleLimit, queuedMessages,
@@ -254,6 +265,32 @@ const App = {
     _restoreToolMsgMap = restoreToolMsgMap;
     _clearToolMsgMap = clearToolMsgMap;
 
+    // File browser module
+    const fileBrowser = createFileBrowser({
+      wsSend, workDir, inputText, inputRef, sendMessage,
+      filePanelOpen, filePanelWidth, fileTreeRoot, fileTreeLoading, fileContextMenu,
+      sidebarOpen, sidebarView,
+    });
+    setFileBrowser(fileBrowser);
+
+    // Track mobile state on resize
+    let _resizeHandler = () => { isMobile.value = window.innerWidth <= 768; };
+    window.addEventListener('resize', _resizeHandler);
+
+    // Close workdir menu on outside click or Escape
+    let _workdirMenuClickHandler = (e) => {
+      if (!workdirMenuOpen.value) return;
+      const row = document.querySelector('.sidebar-workdir-path-row');
+      const menu = document.querySelector('.workdir-menu');
+      if ((row && row.contains(e.target)) || (menu && menu.contains(e.target))) return;
+      workdirMenuOpen.value = false;
+    };
+    let _workdirMenuKeyHandler = (e) => {
+      if (e.key === 'Escape' && workdirMenuOpen.value) workdirMenuOpen.value = false;
+    };
+    document.addEventListener('click', _workdirMenuClickHandler);
+    document.addEventListener('keydown', _workdirMenuKeyHandler);
+
     // ── Computed ──
     const hasInput = computed(() => !!(inputText.value.trim() || attachments.value.length > 0));
     const canSend = computed(() =>
@@ -377,7 +414,7 @@ const App = {
 
     // ── Lifecycle ──
     onMounted(() => { connect(scheduleHighlight); });
-    onUnmounted(() => { closeWs(); streaming.cleanup(); });
+    onUnmounted(() => { closeWs(); streaming.cleanup(); window.removeEventListener('resize', _resizeHandler); document.removeEventListener('click', _workdirMenuClickHandler); document.removeEventListener('keydown', _workdirMenuKeyHandler); });
 
     return {
       status, agentName, hostname, workDir, sessionId, error,
@@ -441,6 +478,25 @@ const App = {
       handleDragLeave: fileAttach.handleDragLeave,
       handleDrop: fileAttach.handleDrop,
       handlePaste: fileAttach.handlePaste,
+      // File browser
+      filePanelOpen, filePanelWidth, fileTreeRoot, fileTreeLoading, fileContextMenu,
+      sidebarView, isMobile, fileBrowser,
+      flattenedTree: fileBrowser.flattenedTree,
+      workdirMenuOpen,
+      toggleWorkdirMenu() { workdirMenuOpen.value = !workdirMenuOpen.value; },
+      workdirMenuBrowse() {
+        workdirMenuOpen.value = false;
+        if (isMobile.value) { sidebarView.value = 'files'; fileBrowser.openPanel(); }
+        else { fileBrowser.togglePanel(); }
+      },
+      workdirMenuChangeDir() {
+        workdirMenuOpen.value = false;
+        sidebar.openFolderPicker();
+      },
+      workdirMenuCopyPath() {
+        workdirMenuOpen.value = false;
+        navigator.clipboard.writeText(workDir.value);
+      },
     };
   },
   template: `
@@ -478,9 +534,48 @@ const App = {
 
       <div v-else class="main-body">
         <!-- Sidebar backdrop (mobile) -->
-        <div v-if="sidebarOpen" class="sidebar-backdrop" @click="toggleSidebar"></div>
+        <div v-if="sidebarOpen" class="sidebar-backdrop" @click="toggleSidebar(); sidebarView = 'sessions'"></div>
         <!-- Sidebar -->
         <aside v-if="sidebarOpen" class="sidebar">
+          <!-- Mobile: file browser view -->
+          <div v-if="isMobile && sidebarView === 'files'" class="file-panel-mobile">
+            <div class="file-panel-mobile-header">
+              <button class="file-panel-mobile-back" @click="sidebarView = 'sessions'">
+                <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+                Sessions
+              </button>
+              <button class="file-panel-btn" @click="fileBrowser.refreshTree()" title="Refresh">
+                <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+              </button>
+            </div>
+            <div class="file-panel-breadcrumb" :title="workDir">{{ workDir }}</div>
+            <div v-if="fileTreeLoading" class="file-panel-loading">Loading...</div>
+            <div v-else-if="!fileTreeRoot || !fileTreeRoot.children || fileTreeRoot.children.length === 0" class="file-panel-empty">
+              No files found.
+            </div>
+            <div v-else class="file-tree">
+              <template v-for="item in flattenedTree" :key="item.node.path">
+                <div
+                  class="file-tree-item"
+                  :class="{ folder: item.node.type === 'directory' }"
+                  :style="{ paddingLeft: (item.depth * 16 + 8) + 'px' }"
+                  @click="item.node.type === 'directory' ? fileBrowser.toggleFolder(item.node) : fileBrowser.onFileClick($event, item.node)"
+                >
+                  <span v-if="item.node.type === 'directory'" class="file-tree-arrow" :class="{ expanded: item.node.expanded }">&#9654;</span>
+                  <span v-else class="file-tree-file-icon">
+                    <svg viewBox="0 0 24 24" width="12" height="12"><path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>
+                  </span>
+                  <span class="file-tree-name" :title="item.node.path">{{ item.node.name }}</span>
+                  <span v-if="item.node.loading" class="file-tree-spinner"></span>
+                </div>
+                <div v-if="item.node.type === 'directory' && item.node.expanded && item.node.children && item.node.children.length === 0 && !item.node.loading" class="file-tree-empty" :style="{ paddingLeft: ((item.depth + 1) * 16 + 8) + 'px' }">(empty)</div>
+                <div v-if="item.node.error" class="file-tree-error" :style="{ paddingLeft: ((item.depth + 1) * 16 + 8) + 'px' }">{{ item.node.error }}</div>
+              </template>
+            </div>
+          </div>
+
+          <!-- Normal sidebar content (sessions view) -->
+          <template v-else>
           <div class="sidebar-section">
             <div class="sidebar-workdir">
               <div v-if="hostname" class="sidebar-hostname">
@@ -489,11 +584,25 @@ const App = {
               </div>
               <div class="sidebar-workdir-header">
                 <div class="sidebar-workdir-label">Working Directory</div>
-                <button class="sidebar-change-dir-btn" @click="openFolderPicker" title="Change working directory">
-                  <svg viewBox="0 0 24 24" width="12" height="12"><path fill="currentColor" d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
-                </button>
               </div>
-              <div class="sidebar-workdir-path" :title="workDir">{{ workDir }}</div>
+              <div class="sidebar-workdir-path-row" @click.stop="toggleWorkdirMenu()">
+                <div class="sidebar-workdir-path" :title="workDir">{{ workDir }}</div>
+                <svg class="sidebar-workdir-chevron" :class="{ open: workdirMenuOpen }" viewBox="0 0 24 24" width="12" height="12"><path fill="currentColor" d="M7 10l5 5 5-5z"/></svg>
+              </div>
+              <div v-if="workdirMenuOpen" class="workdir-menu">
+                <div class="workdir-menu-item" @click.stop="workdirMenuBrowse()">
+                  <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10zM8 13h8v2H8v-2z"/></svg>
+                  <span>Browse files</span>
+                </div>
+                <div class="workdir-menu-item" @click.stop="workdirMenuChangeDir()">
+                  <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
+                  <span>Change directory</span>
+                </div>
+                <div class="workdir-menu-item" @click.stop="workdirMenuCopyPath()">
+                  <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
+                  <span>Copy path</span>
+                </div>
+              </div>
               <div v-if="filteredWorkdirHistory.length > 0" class="workdir-history">
                 <div class="workdir-history-label">Recent Directories</div>
                 <div class="workdir-history-list">
@@ -585,8 +694,51 @@ const App = {
             <span v-if="serverVersion && agentVersion" class="sidebar-version-sep">/</span>
             <span v-if="agentVersion">agent {{ agentVersion }}</span>
           </div>
+          </template>
         </aside>
 
+        <!-- File browser panel (desktop) -->
+        <Transition name="file-panel">
+        <div v-if="filePanelOpen && !isMobile" class="file-panel" :style="{ width: filePanelWidth + 'px' }">
+          <div class="file-panel-resize-handle" @mousedown="fileBrowser.onResizeStart($event)" @touchstart="fileBrowser.onResizeStart($event)"></div>
+          <div class="file-panel-header">
+            <span class="file-panel-title">Files</span>
+            <div class="file-panel-actions">
+              <button class="file-panel-btn" @click="fileBrowser.refreshTree()" title="Refresh">
+                <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+              </button>
+              <button class="file-panel-btn" @click="filePanelOpen = false" title="Close">
+                <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+              </button>
+            </div>
+          </div>
+          <div class="file-panel-breadcrumb" :title="workDir">{{ workDir }}</div>
+          <div v-if="fileTreeLoading" class="file-panel-loading">Loading...</div>
+          <div v-else-if="!fileTreeRoot || !fileTreeRoot.children || fileTreeRoot.children.length === 0" class="file-panel-empty">
+            No files found.
+          </div>
+          <div v-else class="file-tree">
+            <template v-for="item in flattenedTree" :key="item.node.path">
+              <div
+                class="file-tree-item"
+                :class="{ folder: item.node.type === 'directory' }"
+                :style="{ paddingLeft: (item.depth * 16 + 8) + 'px' }"
+                @click="item.node.type === 'directory' ? fileBrowser.toggleFolder(item.node) : fileBrowser.onFileClick($event, item.node)"
+              >
+                <span v-if="item.node.type === 'directory'" class="file-tree-arrow" :class="{ expanded: item.node.expanded }">&#9654;</span>
+                <span v-else class="file-tree-file-icon">
+                  <svg viewBox="0 0 24 24" width="12" height="12"><path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>
+                </span>
+                <span class="file-tree-name" :title="item.node.path">{{ item.node.name }}</span>
+                <span v-if="item.node.loading" class="file-tree-spinner"></span>
+              </div>
+              <div v-if="item.node.type === 'directory' && item.node.expanded && item.node.children && item.node.children.length === 0 && !item.node.loading" class="file-tree-empty" :style="{ paddingLeft: ((item.depth + 1) * 16 + 8) + 'px' }">(empty)</div>
+              <div v-if="item.node.error" class="file-tree-error" :style="{ paddingLeft: ((item.depth + 1) * 16 + 8) + 'px' }">{{ item.node.error }}</div>
+            </template>
+          </div>
+        </div>
+        </Transition>
+
         <!-- Chat area -->
         <div class="chat-area">
           <div class="message-list" @scroll="onMessageListScroll">
@@ -893,6 +1045,26 @@ const App = {
           </div>
         </div>
       </div>
+
+      <!-- File context menu -->
+      <div
+        v-if="fileContextMenu"
+        class="file-context-menu"
+        :style="{ left: fileContextMenu.x + 'px', top: fileContextMenu.y + 'px' }"
+      >
+        <div class="file-context-item" @click="fileBrowser.askClaudeRead()">
+          <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM5 15h14v2H5zm0-4h14v2H5zm0-4h14v2H5z"/></svg>
+          Ask Claude to read
+        </div>
+        <div class="file-context-item" @click="fileBrowser.copyPath()">
+          <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
+          {{ fileContextMenu.copied ? 'Copied!' : 'Copy path' }}
+        </div>
+        <div class="file-context-item" @click="fileBrowser.insertPath()">
+          <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
+          Insert path to input
+        </div>
+      </div>
     </div>
   `
 };

package/web/favicon.svg

@@ -1,4 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <rect width="32" height="32" rx="6" fill="#6c63ff"/>
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#3b82f6"/>
+      <stop offset="100%" stop-color="#f59e0b"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="6" fill="url(#g)"/>
   <text x="16" y="23" text-anchor="middle" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif" font-size="22" font-weight="800" fill="#fff">A</text>
 </svg>

package/web/modules/connection.js

@@ -29,6 +29,10 @@ export function createConnection(deps) {
   let _dequeueNext = () => {};
   function setDequeueNext(fn) { _dequeueNext = fn; }
 
+  // File browser — set after creation to resolve circular dependency
+  let fileBrowser = null;
+  function setFileBrowser(fb) { fileBrowser = fb; }
+
   let ws = null;
   let sessionKey = null;
   let reconnectAttempts = 0;
@@ -705,15 +709,20 @@ export function createConnection(deps) {
         }
         scrollToBottom();
       } else if (msg.type === 'directory_listing') {
-        folderPickerLoading.value = false;
-        folderPickerEntries.value = (msg.entries || [])
-          .filter(e => e.type === 'directory')
-          .sort((a, b) => a.name.localeCompare(b.name));
-        if (msg.dirPath != null) folderPickerPath.value = msg.dirPath;
+        if (msg.source === 'file_browser' && fileBrowser) {
+          fileBrowser.handleDirectoryListing(msg);
+        } else {
+          folderPickerLoading.value = false;
+          folderPickerEntries.value = (msg.entries || [])
+            .filter(e => e.type === 'directory')
+            .sort((a, b) => a.name.localeCompare(b.name));
+          if (msg.dirPath != null) folderPickerPath.value = msg.dirPath;
+        }
       } else if (msg.type === 'workdir_changed') {
         workDir.value = msg.workDir;
         localStorage.setItem(`agentlink-workdir-${sessionId.value}`, msg.workDir);
         sidebar.addToWorkdirHistory(msg.workDir);
+        if (fileBrowser) fileBrowser.onWorkdirChanged();
 
         // Multi-session: switch to a new blank conversation for the new workdir.
         // Background conversations keep running and receiving output in their cache.
@@ -788,5 +797,5 @@ export function createConnection(deps) {
     ws.send(JSON.stringify({ type: 'authenticate', password: pwd }));
   }
 
-  return { connect, wsSend, closeWs, submitPassword, setDequeueNext, getToolMsgMap, restoreToolMsgMap, clearToolMsgMap };
+  return { connect, wsSend, closeWs, submitPassword, setDequeueNext, setFileBrowser, getToolMsgMap, restoreToolMsgMap, clearToolMsgMap };
 }

package/web/modules/fileBrowser.js

@@ -0,0 +1,379 @@
+// ── File Browser: tree state, lazy loading, context menu, file actions ────────
+const { computed, nextTick } = Vue;
+
+/**
+ * Creates the file browser controller.
+ * @param {object} deps - Reactive state and callbacks
+ */
+export function createFileBrowser(deps) {
+  const {
+    wsSend, workDir, inputText, inputRef,
+    filePanelOpen, fileTreeRoot, fileTreeLoading, fileContextMenu,
+    sidebarOpen, sidebarView, filePanelWidth,
+  } = deps;
+
+  // Map of dirPath → TreeNode awaiting directory_listing response
+  const pendingRequests = new Map();
+
+  // ── Tree helpers ──
+
+  function buildPath(parentPath, name) {
+    if (!parentPath) return name;
+    const sep = parentPath.includes('\\') ? '\\' : '/';
+    return parentPath.replace(/[/\\]$/, '') + sep + name;
+  }
+
+  function makeNode(entry, parentPath) {
+    return {
+      path: buildPath(parentPath, entry.name),
+      name: entry.name,
+      type: entry.type,
+      expanded: false,
+      children: entry.type === 'directory' ? null : undefined,
+      loading: false,
+      error: null,
+    };
+  }
+
+  // ── Flattened tree for rendering ──
+
+  const flattenedTree = computed(() => {
+    const root = fileTreeRoot.value;
+    if (!root || !root.children) return [];
+    const result = [];
+    function walk(children, depth) {
+      for (const node of children) {
+        result.push({ node, depth });
+        if (node.type === 'directory' && node.expanded && node.children) {
+          walk(node.children, depth + 1);
+        }
+      }
+    }
+    walk(root.children, 0);
+    return result;
+  });
+
+  // ── Panel open/close ──
+
+  function openPanel() {
+    filePanelOpen.value = true;
+    if (!fileTreeRoot.value || fileTreeRoot.value.path !== workDir.value) {
+      loadRoot();
+    }
+  }
+
+  function closePanel() {
+    filePanelOpen.value = false;
+    closeContextMenu();
+  }
+
+  function togglePanel() {
+    if (filePanelOpen.value) {
+      closePanel();
+    } else {
+      openPanel();
+    }
+  }
+
+  // ── Loading ──
+
+  function loadRoot() {
+    const dir = workDir.value;
+    if (!dir) return;
+    fileTreeLoading.value = true;
+    fileTreeRoot.value = {
+      path: dir,
+      name: dir,
+      type: 'directory',
+      expanded: true,
+      children: null,
+      loading: true,
+      error: null,
+    };
+    pendingRequests.set(dir, fileTreeRoot.value);
+    wsSend({ type: 'list_directory', dirPath: dir, source: 'file_browser' });
+  }
+
+  function loadDirectory(node) {
+    if (node.loading) return;
+    node.loading = true;
+    node.error = null;
+    pendingRequests.set(node.path, node);
+    wsSend({ type: 'list_directory', dirPath: node.path, source: 'file_browser' });
+  }
+
+  // ── Folder expand/collapse ──
+
+  function toggleFolder(node) {
+    if (node.type !== 'directory') return;
+    if (node.expanded) {
+      node.expanded = false;
+      closeContextMenu();
+    } else {
+      node.expanded = true;
+      if (node.children === null) {
+        loadDirectory(node);
+      }
+    }
+  }
+
+  // ── Handle directory_listing response ──
+
+  function handleDirectoryListing(msg) {
+    const dirPath = msg.dirPath;
+    const node = pendingRequests.get(dirPath);
+    pendingRequests.delete(dirPath);
+
+    // Check if this is the root loading
+    if (fileTreeRoot.value && fileTreeRoot.value.path === dirPath) {
+      fileTreeLoading.value = false;
+    }
+
+    if (!node) {
+      // No pending request for this path — could be a stale response after
+      // workdir change. Try to find the node in the tree by path.
+      const found = findNodeByPath(dirPath);
+      if (found) {
+        applyListing(found, msg);
+      }
+      return;
+    }
+
+    applyListing(node, msg);
+  }
+
+  function applyListing(node, msg) {
+    node.loading = false;
+    if (msg.error) {
+      node.error = msg.error;
+      node.children = [];
+      return;
+    }
+    const entries = msg.entries || [];
+    node.children = entries.map(e => makeNode(e, node.path));
+    node.expanded = true;
+  }
+
+  function findNodeByPath(targetPath) {
+    const root = fileTreeRoot.value;
+    if (!root) return null;
+    if (root.path === targetPath) return root;
+    if (!root.children) return null;
+    function search(children) {
+      for (const node of children) {
+        if (node.path === targetPath) return node;
+        if (node.type === 'directory' && node.children) {
+          const found = search(node.children);
+          if (found) return found;
+        }
+      }
+      return null;
+    }
+    return search(root.children);
+  }
+
+  // ── Refresh ──
+
+  function refreshTree() {
+    if (!fileTreeRoot.value) {
+      loadRoot();
+      return;
+    }
+    // Re-fetch all expanded directories
+    refreshNode(fileTreeRoot.value);
+  }
+
+  function refreshNode(node) {
+    if (node.type !== 'directory') return;
+    if (node.expanded && node.children !== null) {
+      // Re-fetch this directory
+      node.children = null;
+      loadDirectory(node);
+    }
+    // Note: children of this node will be re-fetched when loadDirectory
+    // completes and rebuilds the children array. No need to recurse.
+  }
+
+  // ── Workdir changed ──
+
+  function onWorkdirChanged() {
+    pendingRequests.clear();
+    fileTreeRoot.value = null;
+    fileTreeLoading.value = false;
+    closeContextMenu();
+    if (filePanelOpen.value) {
+      loadRoot();
+    }
+  }
+
+  // ── Context menu ──
+
+  function onFileClick(event, node) {
+    if (node.type === 'directory') return;
+    event.stopPropagation();
+
+    // Position the menu near the click, adjusting for viewport edges
+    let x = event.clientX;
+    let y = event.clientY;
+    const menuWidth = 220;
+    const menuHeight = 120; // approx 3 items
+    if (x + menuWidth > window.innerWidth) {
+      x = window.innerWidth - menuWidth - 8;
+    }
+    if (y + menuHeight > window.innerHeight) {
+      y = y - menuHeight;
+    }
+    if (x < 0) x = 8;
+    if (y < 0) y = 8;
+
+    fileContextMenu.value = {
+      x,
+      y,
+      path: node.path,
+      name: node.name,
+    };
+  }
+
+  function closeContextMenu() {
+    fileContextMenu.value = null;
+  }
+
+  // ── File actions ──
+
+  function askClaudeRead() {
+    const menu = fileContextMenu.value;
+    if (!menu) return;
+    const path = menu.path;
+    closeContextMenu();
+    inputText.value = `Read the file ${path}`;
+    // Close sidebar on mobile
+    if (window.innerWidth <= 768) {
+      sidebarOpen.value = false;
+      sidebarView.value = 'sessions';
+    }
+    nextTick(() => {
+      if (inputRef.value) inputRef.value.focus();
+    });
+  }
+
+  function copyPath() {
+    const menu = fileContextMenu.value;
+    if (!menu) return;
+    const path = menu.path;
+    navigator.clipboard.writeText(path).catch(() => {
+      // Fallback: some browsers block clipboard in non-secure contexts
+    });
+    // Brief "Copied!" feedback — store temporarily in menu state
+    fileContextMenu.value = { ...menu, copied: true };
+    setTimeout(() => {
+      closeContextMenu();
+    }, 1000);
+  }
+
+  function insertPath() {
+    const menu = fileContextMenu.value;
+    if (!menu) return;
+    const path = menu.path;
+    closeContextMenu();
+    const textarea = inputRef.value;
+    if (textarea) {
+      const start = textarea.selectionStart || inputText.value.length;
+      const end = textarea.selectionEnd || inputText.value.length;
+      const text = inputText.value;
+      inputText.value = text.slice(0, start) + path + text.slice(end);
+      nextTick(() => {
+        const newPos = start + path.length;
+        textarea.setSelectionRange(newPos, newPos);
+        textarea.focus();
+      });
+    } else {
+      inputText.value += path;
+    }
+    // Close sidebar on mobile
+    if (window.innerWidth <= 768) {
+      sidebarOpen.value = false;
+      sidebarView.value = 'sessions';
+    }
+  }
+
+  // ── Global click handler for dismissing context menu ──
+
+  function setupGlobalListeners() {
+    document.addEventListener('click', (e) => {
+      if (!fileContextMenu.value) return;
+      const menuEl = document.querySelector('.file-context-menu');
+      if (menuEl && menuEl.contains(e.target)) return;
+      closeContextMenu();
+    });
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && fileContextMenu.value) {
+        closeContextMenu();
+      }
+    });
+  }
+
+  // ── Resize handle (mouse + touch) ──
+
+  let _resizing = false;
+  let _startX = 0;
+  let _startWidth = 0;
+  const MIN_WIDTH = 160;
+  const MAX_WIDTH = 600;
+
+  function onResizeStart(e) {
+    e.preventDefault();
+    _resizing = true;
+    _startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
+    _startWidth = filePanelWidth.value;
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    if (e.type === 'touchstart') {
+      document.addEventListener('touchmove', onResizeMove, { passive: false });
+      document.addEventListener('touchend', onResizeEnd);
+    } else {
+      document.addEventListener('mousemove', onResizeMove);
+      document.addEventListener('mouseup', onResizeEnd);
+    }
+  }
+
+  function onResizeMove(e) {
+    if (!_resizing) return;
+    if (e.type === 'touchmove') e.preventDefault();
+    const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
+    const delta = clientX - _startX;
+    const newWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, _startWidth + delta));
+    filePanelWidth.value = newWidth;
+  }
+
+  function onResizeEnd() {
+    if (!_resizing) return;
+    _resizing = false;
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+    document.removeEventListener('mousemove', onResizeMove);
+    document.removeEventListener('mouseup', onResizeEnd);
+    document.removeEventListener('touchmove', onResizeMove);
+    document.removeEventListener('touchend', onResizeEnd);
+    localStorage.setItem('agentlink-file-panel-width', String(filePanelWidth.value));
+  }
+
+  // Set up listeners immediately
+  setupGlobalListeners();
+
+  return {
+    openPanel,
+    closePanel,
+    togglePanel,
+    toggleFolder,
+    onFileClick,
+    closeContextMenu,
+    askClaudeRead,
+    copyPath,
+    insertPath,
+    refreshTree,
+    handleDirectoryListing,
+    onWorkdirChanged,
+    flattenedTree,
+    onResizeStart,
+  };
+}

package/web/style.css

@@ -259,6 +259,7 @@ body {
 
 .sidebar-workdir {
   overflow: hidden;
+  position: relative;
 }
 
 .sidebar-hostname {
@@ -1864,28 +1865,69 @@ body {
   justify-content: space-between;
 }
 
-.sidebar-change-dir-btn {
+/* ── Workdir path row (clickable) ── */
+.sidebar-workdir-path-row {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  background: none;
-  border: 1px solid var(--border);
+  align-items: flex-start;
+  gap: 4px;
+  cursor: pointer;
+  padding: 4px 6px;
+  margin: 0 -6px;
   border-radius: 4px;
+  transition: background 0.15s;
+}
+
+.sidebar-workdir-path-row:hover {
+  background: var(--bg-tertiary);
+}
+
+.sidebar-workdir-path-row .sidebar-workdir-path {
+  flex: 1;
+  min-width: 0;
+}
+
+.sidebar-workdir-chevron {
+  flex-shrink: 0;
+  margin-top: 2px;
   color: var(--text-secondary);
-  cursor: pointer;
-  transition: color 0.15s, background 0.15s;
+  transition: transform 0.15s ease;
+}
+
+.sidebar-workdir-chevron.open {
+  transform: rotate(180deg);
+}
+
+/* ── Workdir dropdown menu ── */
+.workdir-menu {
+  position: absolute;
+  left: -6px;
+  right: -6px;
+  z-index: 50;
+  margin-top: 4px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 4px 0;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
 }
 
-.sidebar-change-dir-btn:hover {
+.workdir-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px;
+  font-size: 0.8rem;
+  cursor: pointer;
   color: var(--text-primary);
+}
+
+.workdir-menu-item:hover {
   background: var(--bg-tertiary);
 }
 
-.sidebar-change-dir-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
+.workdir-menu-item svg {
+  flex-shrink: 0;
+  color: var(--text-secondary);
 }
 
 /* ── Folder Picker Modal ── */
@@ -2236,6 +2278,275 @@ body {
   display: none;
 }
 
+/* ══════════════════════════════════════════
+   File Browser Panel
+   ══════════════════════════════════════════ */
+.file-panel {
+  width: 280px;
+  flex-shrink: 0;
+  background: var(--bg-primary);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+.file-panel-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 10;
+  background: transparent;
+  transition: background 0.15s;
+}
+
+.file-panel-resize-handle:hover,
+.file-panel-resize-handle:active {
+  background: var(--accent);
+  opacity: 0.4;
+}
+
+.file-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-primary);
+  flex-shrink: 0;
+}
+
+.file-panel-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
+}
+
+.file-panel-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.file-panel-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0;
+}
+
+.file-panel-btn:hover {
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+}
+
+.file-panel-breadcrumb {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 0;
+}
+
+.file-tree {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0.25rem 0;
+}
+
+.file-tree-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  font-size: 0.8rem;
+  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
+  color: var(--text-primary);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.file-tree-item:hover {
+  background: var(--bg-tertiary);
+}
+
+.file-tree-arrow {
+  flex-shrink: 0;
+  width: 14px;
+  text-align: center;
+  font-size: 0.65rem;
+  color: var(--text-secondary);
+  transition: transform 0.15s ease;
+  display: inline-block;
+}
+
+.file-tree-arrow.expanded {
+  transform: rotate(90deg);
+}
+
+.file-tree-file-icon {
+  flex-shrink: 0;
+  width: 14px;
+  text-align: center;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.file-tree-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-tree-spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.file-tree-empty {
+  padding: 4px 8px;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+.file-tree-error {
+  padding: 4px 8px;
+  font-size: 0.75rem;
+  color: var(--error, #e74c3c);
+}
+
+.file-panel-loading {
+  padding: 1rem;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+.file-panel-empty {
+  padding: 1rem;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+/* ── File Context Menu ── */
+.file-context-menu {
+  position: fixed;
+  z-index: 200;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  padding: 4px 0;
+  min-width: 200px;
+}
+
+.file-context-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  color: var(--text-primary);
+}
+
+.file-context-item:hover {
+  background: var(--bg-tertiary);
+}
+
+.file-context-item svg {
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+
+/* ── File panel transition (Vue <Transition>) ── */
+.file-panel-enter-active,
+.file-panel-leave-active {
+  transition: width 0.2s ease, opacity 0.15s ease;
+  overflow: hidden;
+}
+.file-panel-enter-from,
+.file-panel-leave-to {
+  width: 0 !important;
+  opacity: 0;
+}
+
+/* ── Mobile file browser in sidebar ── */
+.file-panel-mobile {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.file-panel-mobile-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.file-panel-mobile-back {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  color: var(--accent);
+  cursor: pointer;
+  font-size: 0.85rem;
+  padding: 4px 0;
+}
+
+.file-panel-mobile-back:hover {
+  opacity: 0.8;
+}
+
+/* ══════════════════════════════════════════
+   Medium screens — file panel narrower
+   ══════════════════════════════════════════ */
+@media (max-width: 1200px) and (min-width: 769px) {
+  .file-panel {
+    max-width: clamp(200px, 20vw, 280px);
+  }
+}
+
 /* ══════════════════════════════════════════
    Mobile responsive — max-width: 768px
    ══════════════════════════════════════════ */
@@ -2250,6 +2561,11 @@ body {
     max-width: 100vw;
   }
 
+  /* File panel hidden on mobile — shown inside sidebar instead */
+  .file-panel {
+    display: none;
+  }
+
   /* Sidebar as fixed overlay */
   .sidebar {
     position: fixed;