open-agents-ai 0.187.200 → 0.187.202

package/dist/index.js

@@ -315617,17 +315617,32 @@ body {
   <textarea id="system-prompt" placeholder="System prompt (optional)"></textarea>
 </div>
 
-<div id="tabs" style="display:flex;gap:0;background:#1e1e22;border-bottom:1px solid #2a2a30;padding:0 16px;flex-shrink:0">
-  <button class="tab active" onclick="switchTab('chat')" id="tab-chat" style="background:none;border:none;border-bottom:2px solid #b2920a;color:#b2920a;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">chat</button>
-  <button class="tab" onclick="switchTab('agent')" id="tab-agent" style="background:none;border:none;border-bottom:2px solid transparent;color:#555;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">agent</button>
-  <button class="tab" onclick="switchTab('jobs')" id="tab-jobs" style="background:none;border:none;border-bottom:2px solid transparent;color:#555;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">dashboard</button>
-  <button class="tab" onclick="switchTab('config')" id="tab-config" style="background:none;border:none;border-bottom:2px solid transparent;color:#555;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">config</button>
-  <button class="tab" onclick="switchTab('activity')" id="tab-activity" style="background:none;border:none;border-bottom:2px solid transparent;color:#555;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">activity</button>
-  <select id="session-select" onchange="switchSession(this.value)" style="background:#2a2a30;border:1px solid #3a3a42;color:#b0b0b0;padding:2px 6px;border-radius:3px;font-family:inherit;font-size:0.6rem;max-width:140px" title="Chat sessions">
-    <option value="">new session</option>
-  </select>
-  <span id="sys-metrics" style="margin-left:auto;font-size:0.6rem;color:#555;display:flex;flex-flow:column;justify-content:center"></span>
-  <span id="token-counter" style="font-size:0.6rem;color:#555;display:flex;flex-flow:column;justify-content:center;padding:0 6px">0 tokens</span>
+<!-- #tabs is a flex-wrap row with THREE logical sections that each stay
+     together when wrapping: (1) tab buttons, (2) session selector,
+     (3) sys metrics + token counter. On narrow viewports the sections
+     flow onto multiple rows instead of overflowing the header. -->
+<div id="tabs" style="display:flex;flex-wrap:wrap;gap:4px 0;background:#1e1e22;border-bottom:1px solid #2a2a30;padding:0 16px;flex-shrink:0">
+  <!-- Section 1: tab buttons -->
+  <div id="tabs-section-buttons" style="display:flex;gap:0;flex-shrink:0">
+    <button class="tab active" onclick="switchTab('chat')" id="tab-chat" style="background:none;border:none;border-bottom:2px solid #b2920a;color:#b2920a;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">chat</button>
+    <button class="tab" onclick="switchTab('agent')" id="tab-agent" style="background:none;border:none;border-bottom:2px solid transparent;color:#555;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">agent</button>
+    <button class="tab" onclick="switchTab('jobs')" id="tab-jobs" style="background:none;border:none;border-bottom:2px solid transparent;color:#555;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">dashboard</button>
+    <button class="tab" onclick="switchTab('config')" id="tab-config" style="background:none;border:none;border-bottom:2px solid transparent;color:#555;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">config</button>
+    <button class="tab" onclick="switchTab('activity')" id="tab-activity" style="background:none;border:none;border-bottom:2px solid transparent;color:#555;padding:6px 16px;font-family:inherit;font-size:0.7rem;cursor:pointer">activity</button>
+  </div>
+  <!-- Section 2: session dropdown -->
+  <div id="tabs-section-sessions" style="display:flex;gap:6px;align-items:center;flex-shrink:0;padding:0 12px">
+    <select id="session-select" onchange="switchSession(this.value)" style="background:#2a2a30;border:1px solid #3a3a42;color:#b0b0b0;padding:2px 6px;border-radius:3px;font-family:inherit;font-size:0.6rem;max-width:160px" title="Chat sessions">
+      <option value="">new session</option>
+    </select>
+  </div>
+  <!-- Section 3: sys metrics + token counter (margin-left: auto pushes to
+       the far right when there's room; on narrow viewports it wraps to
+       its own row instead of overflowing) -->
+  <div id="tabs-section-metrics" style="display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto">
+    <span id="sys-metrics" style="font-size:0.6rem;color:#555;display:flex;flex-flow:column;justify-content:center"></span>
+    <span id="token-counter" style="font-size:0.6rem;color:#555;display:flex;flex-flow:column;justify-content:center;padding:0 6px">0 tokens</span>
+  </div>
 </div>
 <div id="chat-container" style="display:flex;flex:1;overflow:hidden">
   <div id="workspace-sidebar" style="display:none;width:250px;background:#1e1e22;border-right:1px solid #2a2a30;overflow-y:auto;padding:8px;flex-shrink:0;font-size:0.7rem">
@@ -315641,6 +315656,41 @@ body {
   <div id="conversation" style="flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:4px"></div>
 </div>
 <div id="agent-panel" style="display:none;flex:1;overflow-y:auto;padding:12px 16px">
+  <!-- Parameter form: all the dials for POST /v1/run -->
+  <div id="agent-params" style="background:#17171a;border:1px solid #2a2a30;border-radius:4px;padding:10px 12px;margin-bottom:10px;font-size:0.68rem">
+    <div style="color:#b2920a;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px">Task Parameters</div>
+    <div style="display:grid;grid-template-columns:120px 1fr;gap:6px 12px;align-items:center">
+      <label style="color:#888">Working dir</label>
+      <div style="display:flex;gap:4px;align-items:center">
+        <input id="agent-working-dir" placeholder="(daemon cwd)" style="flex:1;background:#2a2a30;border:1px solid #3a3a42;border-radius:3px;padding:4px 8px;color:#b0b0b0;font-family:inherit;font-size:0.7rem;outline:none">
+        <button onclick="syncFromWorkspace()" title="Use workspace selection" style="background:#2a2a30;border:1px solid #3a3a42;color:#b2920a;padding:4px 8px;border-radius:3px;font-family:inherit;font-size:0.65rem;cursor:pointer">from ws</button>
+        <button onclick="document.getElementById('agent-working-dir').value=''" title="Clear" style="background:#2a2a30;border:1px solid #3a3a42;color:#666;padding:4px 8px;border-radius:3px;font-family:inherit;font-size:0.65rem;cursor:pointer">\xD7</button>
+      </div>
+
+      <label style="color:#888">Model override</label>
+      <input id="agent-model-override" placeholder="(use global model)" style="background:#2a2a30;border:1px solid #3a3a42;border-radius:3px;padding:4px 8px;color:#b0b0b0;font-family:inherit;font-size:0.7rem;outline:none">
+
+      <label style="color:#888">Max turns</label>
+      <input id="agent-max-turns" type="number" min="1" max="200" placeholder="25" style="background:#2a2a30;border:1px solid #3a3a42;border-radius:3px;padding:4px 8px;color:#b0b0b0;font-family:inherit;font-size:0.7rem;outline:none;width:120px">
+
+      <label style="color:#888">Timeout (s)</label>
+      <input id="agent-timeout-s" type="number" min="10" max="3600" placeholder="300" style="background:#2a2a30;border:1px solid #3a3a42;border-radius:3px;padding:4px 8px;color:#b0b0b0;font-family:inherit;font-size:0.7rem;outline:none;width:120px">
+
+      <label style="color:#888">Sandbox</label>
+      <select id="agent-sandbox" style="background:#2a2a30;border:1px solid #3a3a42;color:#b0b0b0;padding:4px 8px;border-radius:3px;font-family:inherit;font-size:0.7rem">
+        <option value="none">none (host process)</option>
+        <option value="workspace">workspace (ephemeral dir)</option>
+        <option value="container">container (docker)</option>
+      </select>
+
+      <label style="color:#888">Stream events</label>
+      <div><input type="checkbox" id="agent-stream" checked style="accent-color:#b2920a"> <span style="color:#555;font-size:0.6rem">SSE with live tool calls</span></div>
+
+      <label style="color:#888">Isolate workspace</label>
+      <div><input type="checkbox" id="agent-isolate" style="accent-color:#b2920a"> <span style="color:#555;font-size:0.6rem">fresh temp dir per run</span></div>
+    </div>
+  </div>
+
   <textarea id="agent-task" placeholder="Describe the task for the agent..." style="width:100%;min-height:80px;background:#2a2a30;border:1px solid #3a3a42;border-radius:3px;padding:8px 12px;color:#b0b0b0;font-family:inherit;font-size:0.82rem;resize:vertical;outline:none;margin-bottom:8px"></textarea>
   <div style="display:flex;gap:8px;margin-bottom:12px;align-items:center">
     <select id="agent-profile" style="background:#2a2a30;border:1px solid #3a3a42;color:#b0b0b0;padding:4px 8px;border-radius:3px;font-family:inherit;font-size:0.7rem"><option value="">no profile</option></select>
@@ -315846,12 +315896,24 @@ async function sendMessage() {
   msgDiv.appendChild(contentDiv);
 
   try {
+    // Prepend context files as a FILES block so the agent can read them
+    // without having to guess paths. The user picked these via right-click
+    // "Add to context" on the workspace tree.
+    let messageWithContext = text;
+    if (contextFiles.length > 0) {
+      const filesBlock = 'FILES IN CONTEXT:\\n' + contextFiles.map(p => '  - ' + p).join('\\n') + '\\n\\n';
+      messageWithContext = filesBlock + text;
+    }
+
     const body = {
       session_id: chatSessionId,
       model: modelSelect.value,
-      message: text,
+      message: messageWithContext,
       stream: true,
       max_tokens: 4096,
+      // Pass the user-selected workspace as working_directory so the
+      // agent subprocess operates in the right cwd.
+      ...(chatWorkingDir ? { working_directory: chatWorkingDir } : {}),
     };
 
     const response = await fetch('/v1/chat', {
@@ -316198,14 +316260,39 @@ async function submitAgentTask() {
   document.getElementById('agent-abort').style.display = 'inline-block';
 
   const profile = document.getElementById('agent-profile').value;
+  // Read the parameter form
+  const workingDirEl = document.getElementById('agent-working-dir');
+  const modelOverrideEl = document.getElementById('agent-model-override');
+  const maxTurnsEl = document.getElementById('agent-max-turns');
+  const timeoutSEl = document.getElementById('agent-timeout-s');
+  const sandboxEl = document.getElementById('agent-sandbox');
+  const streamEl = document.getElementById('agent-stream');
+  const isolateEl = document.getElementById('agent-isolate');
+  const wd = workingDirEl && workingDirEl.value.trim();
+  const modelOverride = modelOverrideEl && modelOverrideEl.value.trim();
+  const maxTurns = maxTurnsEl && maxTurnsEl.value ? parseInt(maxTurnsEl.value, 10) : null;
+  const timeoutS = timeoutSEl && timeoutSEl.value ? parseInt(timeoutSEl.value, 10) : null;
+  const sandbox = sandboxEl ? sandboxEl.value : 'none';
+  const stream = streamEl ? streamEl.checked : true;
+  const isolate = isolateEl ? isolateEl.checked : false;
+
+  const runBody = {
+    task,
+    model: modelOverride || modelSelect.value,
+    stream,
+    ...(profile ? { profile } : {}),
+    ...(wd ? { working_directory: wd } : {}),
+    ...(maxTurns && maxTurns > 0 ? { max_turns: maxTurns } : {}),
+    ...(timeoutS && timeoutS > 0 ? { timeout_s: timeoutS } : {}),
+    ...(sandbox && sandbox !== 'none' ? { sandbox } : {}),
+    ...(isolate ? { isolate: true } : {}),
+  };
+
   try {
     const resp = await fetch('/v1/run', {
       method: 'POST',
       headers: headers(),
-      body: JSON.stringify({
-        task, model: modelSelect.value, stream: true,
-        ...(profile ? { profile } : {}),
-      }),
+      body: JSON.stringify(runBody),
     });
 
     const reader = resp.body.getReader();
@@ -316457,30 +316544,302 @@ function stopChat() {
 }
 
 // Workspace sidebar
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// Workspace sidebar \u2014 real tree with right-click context menu
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+//
+// - Lazy expand on click of the \u25B8/\u25BE caret (not on the whole row)
+// - Click on a file name opens file content in a modal preview
+// - Right-click on a folder \u2192 "Make workspace" / "Copy path" / "Add to context"
+// - Right-click on a file \u2192 "Add to context" / "Copy path" / "Preview"
+// - Selected workspace path is stored in chatWorkingDir and passed as
+//   working_directory in all /v1/chat and /v1/run body fields
+// - Selected files accumulate in contextFiles and are prepended to the
+//   next user message as a "FILES:" block (poor-mans attachment)
+
+let chatWorkingDir = null;      // the cwd the agent uses
+let contextFiles = [];           // list of absolute file paths
+
+// Expanded state: absolute path \u2192 bool
+const treeExpanded = new Set();
+// Cached children: absolute path \u2192 array of {name, type}
+const treeCache = new Map();
+
 function toggleWorkspace() {
   const sb = document.getElementById('workspace-sidebar');
   sb.style.display = sb.style.display === 'none' ? 'block' : 'none';
-  if (sb.style.display === 'block') loadWorkspaceTree();
+  if (sb.style.display === 'block') loadWorkspaceRoot();
 }
-async function loadWorkspaceTree(dir) {
+
+async function loadWorkspaceRoot() {
+  const cwdEl = document.getElementById('workspace-cwd');
+  // Default: daemon's cwd (from /v1/files with no path)
+  try {
+    const r = await fetch('/v1/files', { headers: headers() });
+    const d = await r.json();
+    const rootPath = d.path || '.';
+    cwdEl.innerHTML = '';
+    const wsSpan = document.createElement('span');
+    wsSpan.style.cssText = 'color:#888';
+    wsSpan.textContent = 'ROOT: ' + rootPath;
+    cwdEl.appendChild(wsSpan);
+    cwdEl.appendChild(document.createElement('br'));
+    const wdSpan = document.createElement('span');
+    wdSpan.id = 'workspace-dir-label';
+    wdSpan.style.cssText = 'color:#b2920a';
+    wdSpan.textContent = 'CWD: ' + (chatWorkingDir || rootPath);
+    cwdEl.appendChild(wdSpan);
+
+    // Cache the root's children and expand it
+    treeCache.set(rootPath, d.entries || []);
+    treeExpanded.add(rootPath);
+    renderWorkspaceTree(rootPath);
+  } catch {
+    document.getElementById('workspace-tree').innerHTML = '<div style="color:#555">Could not load files</div>';
+  }
+}
+
+function renderWorkspaceTree(rootPath) {
   const tree = document.getElementById('workspace-tree');
+  tree.innerHTML = '';
+  const rootContainer = document.createElement('div');
+  renderTreeNode(rootContainer, rootPath, 0, true);
+  tree.appendChild(rootContainer);
+}
+
+function renderTreeNode(parentEl, absPath, depth, isRoot) {
+  const entries = treeCache.get(absPath) || [];
+  // Sort: dirs first, then files, both alphabetical
+  entries.sort((a, b) => {
+    if (a.type !== b.type) return a.type === 'dir' ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+  for (const e of entries) {
+    const childAbs = absPath.replace(/\\/+$/, '') + '/' + e.name;
+    const row = document.createElement('div');
+    row.className = 'tree-row';
+    row.dataset.path = childAbs;
+    row.dataset.type = e.type;
+    row.style.cssText = 'padding:1px 0 1px ' + (depth * 12 + 4) + 'px; cursor:pointer; display:flex; align-items:center; gap:4px; user-select:none';
+
+    if (e.type === 'dir') {
+      const caret = document.createElement('span');
+      caret.className = 'tree-caret';
+      caret.style.cssText = 'color:#666; font-size:0.55rem; width:10px; display:inline-block; text-align:center';
+      caret.textContent = treeExpanded.has(childAbs) ? '\u25BE' : '\u25B8';
+      row.appendChild(caret);
+      const icon = document.createElement('span');
+      icon.textContent = '\u{1F4C1}';
+      row.appendChild(icon);
+      const name = document.createElement('span');
+      name.textContent = e.name;
+      name.style.cssText = 'color:#b2920a';
+      // Highlight the current workspace
+      if (chatWorkingDir && childAbs === chatWorkingDir) {
+        name.style.cssText += ';font-weight:bold;text-decoration:underline';
+      }
+      row.appendChild(name);
+      row.addEventListener('click', async (ev) => {
+        ev.stopPropagation();
+        if (treeExpanded.has(childAbs)) {
+          treeExpanded.delete(childAbs);
+        } else {
+          treeExpanded.add(childAbs);
+          if (!treeCache.has(childAbs)) {
+            try {
+              const r = await fetch('/v1/files?path=' + encodeURIComponent(childAbs), { headers: headers() });
+              const d = await r.json();
+              treeCache.set(childAbs, d.entries || []);
+            } catch {
+              treeCache.set(childAbs, []);
+            }
+          }
+        }
+        // Find the root (topmost path in cache) and re-render
+        const root = [...treeCache.keys()].find(k => [...treeCache.keys()].every(k2 => !k2.startsWith(k) || k === k2));
+        renderWorkspaceTree(root || absPath);
+      });
+    } else {
+      const pad = document.createElement('span');
+      pad.style.cssText = 'width:10px; display:inline-block';
+      row.appendChild(pad);
+      const icon = document.createElement('span');
+      icon.textContent = contextFiles.includes(childAbs) ? '\u{1F4CE}' : '\u{1F4C4}';
+      row.appendChild(icon);
+      const name = document.createElement('span');
+      name.textContent = e.name;
+      name.style.cssText = contextFiles.includes(childAbs)
+        ? 'color:#4e94c9;font-weight:bold'
+        : 'color:#b0b0b0';
+      row.appendChild(name);
+      row.addEventListener('click', (ev) => {
+        ev.stopPropagation();
+        previewFile(childAbs);
+      });
+    }
+
+    // Right-click context menu (works for both files and dirs)
+    row.addEventListener('contextmenu', (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      showTreeContextMenu(ev.clientX, ev.clientY, childAbs, e.type);
+    });
+
+    parentEl.appendChild(row);
+
+    if (e.type === 'dir' && treeExpanded.has(childAbs)) {
+      const childContainer = document.createElement('div');
+      renderTreeNode(childContainer, childAbs, depth + 1, false);
+      parentEl.appendChild(childContainer);
+    }
+  }
+}
+
+// Context menu element \u2014 created lazily, re-used
+let treeMenuEl = null;
+function showTreeContextMenu(x, y, path, type) {
+  if (!treeMenuEl) {
+    treeMenuEl = document.createElement('div');
+    treeMenuEl.id = 'tree-menu';
+    treeMenuEl.style.cssText = 'position:fixed; background:#1e1e22; border:1px solid #b2920a; border-radius:4px; padding:4px 0; box-shadow:0 4px 20px rgba(0,0,0,0.6); z-index:200; font-size:0.7rem; min-width:180px';
+    document.body.appendChild(treeMenuEl);
+    document.addEventListener('click', () => { if (treeMenuEl) treeMenuEl.style.display = 'none'; });
+  }
+  treeMenuEl.innerHTML = '';
+  const items = type === 'dir'
+    ? [
+        { label: '\u25B8 Make workspace', fn: () => setChatWorkingDir(path) },
+        { label: '\u25B8 Clear workspace (use daemon cwd)', fn: () => setChatWorkingDir(null), show: !!chatWorkingDir },
+        { label: '\u{1F4CB} Copy path', fn: () => copyToClipboard(path) },
+        { label: '\u{1F4CE} Add all files to context (top-level only)', fn: () => addDirToContext(path) },
+      ]
+    : [
+        { label: contextFiles.includes(path) ? '\u{1F4CE} Remove from context' : '\u{1F4CE} Add to context', fn: () => toggleFileInContext(path) },
+        { label: '\u{1F441} Preview file', fn: () => previewFile(path) },
+        { label: '\u{1F4CB} Copy path', fn: () => copyToClipboard(path) },
+      ];
+  for (const it of items) {
+    if (it.show === false) continue;
+    const row = document.createElement('div');
+    row.style.cssText = 'padding:6px 16px; cursor:pointer; color:#b0b0b0';
+    row.textContent = it.label;
+    row.addEventListener('mouseenter', () => row.style.background = '#2a2a30');
+    row.addEventListener('mouseleave', () => row.style.background = '');
+    row.addEventListener('click', (ev) => {
+      ev.stopPropagation();
+      try { it.fn(); } catch (e) { alert(e.message); }
+      treeMenuEl.style.display = 'none';
+    });
+    treeMenuEl.appendChild(row);
+  }
+  treeMenuEl.style.display = 'block';
+  treeMenuEl.style.left = x + 'px';
+  treeMenuEl.style.top = y + 'px';
+}
+
+function setChatWorkingDir(path) {
+  chatWorkingDir = path;
+  const label = document.getElementById('workspace-dir-label');
+  if (label) label.textContent = 'CWD: ' + (path || '(daemon default)');
+  // Refresh the tree to update the highlight
+  const root = [...treeCache.keys()].find(k => [...treeCache.keys()].every(k2 => !k2.startsWith(k) || k === k2));
+  if (root) renderWorkspaceTree(root);
+  // Flash status
+  const s = document.getElementById('status');
+  if (s) {
+    const old = s.textContent;
+    s.textContent = path ? 'workspace \u2192 ' + path.split('/').slice(-2).join('/') : 'workspace cleared';
+    s.style.color = '#4ec94e';
+    setTimeout(() => { s.textContent = old; s.style.color = ''; }, 3000);
+  }
+  // Also push to the Agent tab input if visible
+  const wdInput = document.getElementById('agent-working-dir');
+  if (wdInput) wdInput.value = path || '';
+}
+
+function toggleFileInContext(path) {
+  const i = contextFiles.indexOf(path);
+  if (i >= 0) contextFiles.splice(i, 1);
+  else contextFiles.push(path);
+  const root = [...treeCache.keys()].find(k => [...treeCache.keys()].every(k2 => !k2.startsWith(k) || k === k2));
+  if (root) renderWorkspaceTree(root);
+  const s = document.getElementById('status');
+  if (s) {
+    const old = s.textContent;
+    s.textContent = contextFiles.length + ' file' + (contextFiles.length !== 1 ? 's' : '') + ' in context';
+    s.style.color = '#4e94c9';
+    setTimeout(() => { s.textContent = old; s.style.color = ''; }, 3000);
+  }
+}
+
+async function addDirToContext(dirPath) {
+  // Fetch directory children and add non-dotfile files to context
   try {
-    const r = await fetch('/v1/files' + (dir ? '?path=' + encodeURIComponent(dir) : ''), { headers: headers() });
+    const r = await fetch('/v1/files?path=' + encodeURIComponent(dirPath), { headers: headers() });
     const d = await r.json();
-    document.getElementById('workspace-cwd').textContent = d.path || '.';
-    tree.innerHTML = d.entries.map(e => {
-      const icon = e.type === 'dir' ? '\u{1F4C1}' : '\u{1F4C4}';
-      const color = e.type === 'dir' ? '#b2920a' : '#b0b0b0';
-      const click = e.type === 'dir'
-        ? ' onclick="loadWorkspaceTree(\\'' + (d.path + '/' + e.name).replace(/'/g, "\\\\'") + '\\')"'
-        : '';
-      return '<div style="padding:1px 0;cursor:' + (e.type === 'dir' ? 'pointer' : 'default') + ';color:' + color + '"' + click + '>' + icon + ' ' + e.name + '</div>';
-    }).join('');
-    if (dir) {
-      const parent = dir.split('/').slice(0, -1).join('/') || '/';
-      tree.innerHTML = '<div style="padding:1px 0;cursor:pointer;color:#555" onclick="loadWorkspaceTree(\\'' + parent.replace(/'/g, "\\\\'") + '\\')">\u2B06 ..</div>' + tree.innerHTML;
+    for (const e of (d.entries || [])) {
+      if (e.type === 'file') {
+        const abs = dirPath.replace(/\\/+$/, '') + '/' + e.name;
+        if (!contextFiles.includes(abs)) contextFiles.push(abs);
+      }
+    }
+    const root = [...treeCache.keys()].find(k => [...treeCache.keys()].every(k2 => !k2.startsWith(k) || k === k2));
+    if (root) renderWorkspaceTree(root);
+    alert('Added ' + contextFiles.length + ' files to context');
+  } catch (e) { alert('Failed: ' + e.message); }
+}
+
+// Agent form helper \u2014 copy the currently-selected workspace path into the
+// Agent tab working_directory field
+function syncFromWorkspace() {
+  const wdInput = document.getElementById('agent-working-dir');
+  if (wdInput) wdInput.value = chatWorkingDir || '';
+}
+
+function copyToClipboard(text) {
+  try {
+    navigator.clipboard.writeText(text);
+    const s = document.getElementById('status');
+    if (s) { const old = s.textContent; s.textContent = 'copied: ' + text.split('/').pop(); setTimeout(() => s.textContent = old, 2000); }
+  } catch {}
+}
+
+async function previewFile(path) {
+  try {
+    const r = await fetch('/v1/files/read', {
+      method: 'POST',
+      headers: headers(),
+      body: JSON.stringify({ path, limit: 20000, allow_outside_cwd: true }),
+    });
+    const d = await r.json();
+    if (d && d.content !== undefined) {
+      // Create a simple preview modal
+      const modal = document.createElement('div');
+      modal.style.cssText = 'position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); z-index:300; display:flex; align-items:center; justify-content:center; padding:40px';
+      modal.addEventListener('click', (e) => { if (e.target === modal) modal.remove(); });
+      const card = document.createElement('div');
+      card.style.cssText = 'background:#1e1e22; border:1px solid #2a2a30; border-radius:4px; max-width:90vw; max-height:90vh; overflow:hidden; display:flex; flex-direction:column';
+      const title = document.createElement('div');
+      title.style.cssText = 'padding:10px 16px; border-bottom:1px solid #2a2a30; color:#b2920a; font-size:0.75rem; display:flex; justify-content:space-between; align-items:center; gap:16px';
+      title.innerHTML = '<span>' + escHtml(path) + '</span>';
+      const closeBtn = document.createElement('button');
+      closeBtn.textContent = '\xD7';
+      closeBtn.style.cssText = 'background:none; border:none; color:#666; font-size:1.2rem; cursor:pointer';
+      closeBtn.onclick = () => modal.remove();
+      title.appendChild(closeBtn);
+      card.appendChild(title);
+      const pre = document.createElement('pre');
+      pre.style.cssText = 'padding:12px 16px; color:#b0b0b0; overflow:auto; font-size:0.7rem; margin:0; background:#17171a';
+      pre.textContent = d.content || '(empty)';
+      card.appendChild(pre);
+      modal.appendChild(card);
+      document.body.appendChild(modal);
+    } else {
+      alert('Preview failed: ' + JSON.stringify(d).slice(0, 200));
     }
-  } catch { tree.innerHTML = '<div style="color:#555">Could not load files</div>'; }
+  } catch (e) {
+    alert('Preview failed: ' + e.message);
+  }
 }
 
 // Docker sandbox toggle
@@ -318385,9 +318744,17 @@ async function directChatBackend(opts) {
       const j = JSON.parse(result.body);
       const content = j?.choices?.[0]?.message?.content || "";
       jsonResponse(res, 200, {
-        session_id: sessionId,
+        id: `chatcmpl-${sessionId.slice(0, 12)}`,
+        object: "chat.completion",
+        created: Math.floor(Date.now() / 1e3),
         model: cleanModel,
-        message: { role: "assistant", content }
+        choices: [{
+          index: 0,
+          message: { role: "assistant", content },
+          finish_reason: "stop"
+        }],
+        usage: j?.usage || { prompt_tokens: 0, completion_tokens: 0, total_tokens: 0 },
+        session_id: sessionId
       });
       return content;
     }
@@ -318454,14 +318821,28 @@ async function directChatBackend(opts) {
       const j = JSON.parse(result.body);
       const content = j?.message?.content || "";
       if (!content) throw new Error("Backend returned empty message content");
+      const promptTokens = j?.prompt_eval_count ?? 0;
+      const completionTokens = j?.eval_count ?? 0;
       jsonResponse(res, 200, {
-        session_id: sessionId,
+        id: `chatcmpl-${sessionId.slice(0, 12)}`,
+        object: "chat.completion",
+        created: Math.floor(Date.now() / 1e3),
         model: cleanModel,
-        message: { role: "assistant", content },
+        choices: [{
+          index: 0,
+          message: { role: "assistant", content },
+          finish_reason: "stop"
+        }],
         usage: {
-          prompt_tokens: j?.prompt_eval_count,
-          completion_tokens: j?.eval_count,
-          total_duration_ns: j?.total_duration
+          prompt_tokens: promptTokens,
+          completion_tokens: completionTokens,
+          total_tokens: promptTokens + completionTokens
+        },
+        session_id: sessionId,
+        _oa: {
+          mode: "direct",
+          ollama_total_duration_ns: j?.total_duration,
+          ollama_load_duration_ns: j?.load_duration
         }
       });
       return content;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "open-agents-ai",
-  "version": "0.187.200",
+  "version": "0.187.202",
   "description": "AI coding agent powered by open-source models (Ollama/vLLM) — interactive TUI with agentic tool-calling loop",
   "type": "module",
   "main": "./dist/index.js",