@oversk7/pi-web-dsh-style 1.3.4 → 1.4.0

package/README.md

@@ -44,6 +44,8 @@ Each visible page subscribes to its selected session, receives an initial snapsh
 
 Switching back to a newly created or previously loaded session shows its cached content immediately and keeps the composer available while refreshing. Repeated opens share pending requests, and sessions with a running process return their current snapshot without waiting for RPC refreshes.
 
+In the in-app workspace directory browser, click the pencil to paste a full path. The list loads the corresponding directory and filters matching folders, including deeply nested paths. Click a folder to select it, or press Enter to navigate directly; a trailing separator previews the folder's contents. Relative file links in replies resolve against the selected session's workspace.
+
 The interface starts in Chinese. To switch to English, open **设置 (Settings) → 外观 (Appearance) → 界面语言 (Interface language) → English**. Your choice is saved in this browser.
 
 ### Phone and remote access
@@ -93,6 +95,8 @@ pi --web
 
 切回新建或已加载的会话时，立即显示缓存内容，后台刷新期间仍可编辑输入。重复打开会复用待完成请求；已有运行进程的会话直接返回当前快照，避免等待 RPC 刷新。
 
+在内置工作区目录浏览器中，点击铅笔图标即可粘贴完整路径，列表会加载对应目录并筛选匹配的文件夹，支持多层嵌套路径。点击文件夹选择，或按 Enter 直接跳转；路径末尾带分隔符时预览该文件夹的内容。回答中的相对文件链接按当前会话的工作区解析。
+
 界面默认使用中文。打开 **设置 → 外观 → 界面语言**，即可一键切换中文或 English；选择会保存在当前浏览器。
 
 ### 手机与远程访问

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oversk7/pi-web-dsh-style",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "description": "An unofficial DSH-styled Windows browser UI for pi coding agent with configurable LAN and native frp relay access",
   "type": "module",
   "license": "MIT",

package/server.ts

@@ -1943,21 +1943,11 @@ async function listDirectories(input: string): Promise<Json> {
     .map((e) => ({ name: e.name, path: join(target, e.name), hidden: e.name.startsWith(".") }))
     .sort((a, b) => a.name.localeCompare(b.name, "zh-CN"));
   const crumbs: { name: string; path: string; hidden: boolean }[] = [];
-  {
-    const parts: string[] = [];
-    let current = target;
-    for (;;) {
-      parts.unshift(current);
-      const up = dirname(current);
-      if (up === current) break;
-      current = up;
-    }
-    let acc = parts[0];
-    crumbs.push({ name: parts[0], path: parts[0], hidden: false });
-    for (const part of parts.slice(1)) {
-      acc = join(acc, part);
-      crumbs.push({ name: part, path: acc, hidden: part.startsWith(".") });
-    }
+  for (let current = target; ; current = dirname(current)) {
+    const isRoot = dirname(current) === current;
+    const name = isRoot ? current : basename(current);
+    crumbs.unshift({ name, path: current, hidden: !isRoot && name.startsWith(".") });
+    if (isRoot) break;
   }
   const parent = dirname(target) === target ? null : dirname(target);
   return { path: target, home, parent, crumbs, entries: dirs, truncated: false };

package/web/app.js

@@ -3278,6 +3278,7 @@ async function ensureWorkspaceThen(action) {
 let browser = null;
 let pickerResolve = null;
 let browserKeyHandler = null;
+let directoryRequest = null;
 
 async function adoptWorkspacePath(path) {
   const added = await post("/api/workspaces", { path });
@@ -3354,6 +3355,7 @@ function promptWorkspaceBrowse() {
 }
 
 function closeWorkspacePicker() {
+  directoryRequest = null;
   if (browserKeyHandler) {
     document.removeEventListener("keydown", browserKeyHandler);
     browserKeyHandler = null;
@@ -3387,10 +3389,44 @@ function draftDirectory(draft) {
 function readDraft(listing, draft) {
   const directory = draftDirectory(draft);
   if (directory === null) return { directory: null, tail: null };
-  const answers = directory === levelDirectory(listing);
+  const fold = (value) => separatorOf() === "\\" ? value.replaceAll("/", "\\").toLowerCase() : value;
+  const answers = fold(directory) === fold(levelDirectory(listing));
   return { directory, tail: answers ? draft.slice(directory.length) : null };
 }
 
+async function previewPathDraft(draft) {
+  const current = browser;
+  const request = {};
+  directoryRequest = request;
+  if (!current || current.pathDraft !== draft) return;
+  const listing = current.child ?? current.parent;
+  const directory = draftDirectory(draft);
+  current.error = null;
+  if (directory === null || (listing && readDraft(listing, draft).tail !== null)) {
+    current.loading = false;
+    renderBrowser();
+    return;
+  }
+  current.loading = true;
+  renderBrowser();
+  try {
+    const data = await api(`/api/fs/list?path=${encodeURIComponent(directory)}`);
+    if (browser !== current || directoryRequest !== request) return;
+    if (data.error) throw new Error(data.error);
+    current.parent = data;
+    current.selected = null;
+    current.child = null;
+    current.home = data.home || current.home;
+    current.loading = false;
+    renderBrowser();
+  } catch (error) {
+    if (browser !== current || directoryRequest !== request) return;
+    current.loading = false;
+    current.error = error.message || String(error);
+    renderBrowser();
+  }
+}
+
 function visibleEntries(entries, selectedPath, showHidden, filterPrefix) {
   const needle = filterPrefix === null ? "" : filterPrefix.toLowerCase();
   const displayable = (entry) => showHidden || !entry.hidden || needle.startsWith(".");
@@ -3429,6 +3465,9 @@ function browserTargetPath() {
 
 async function navigate(path) {
   if (!browser || !path) return;
+  const current = browser;
+  const request = {};
+  directoryRequest = request;
   browser.loading = true;
   browser.error = null;
   browser.selected = null;
@@ -3437,7 +3476,7 @@ async function navigate(path) {
   let target = null;
   try {
     const data = await api(`/api/fs/list?path=${encodeURIComponent(path)}`);
-    if (!browser) return;
+    if (browser !== current || directoryRequest !== request) return;
     if (data.error) throw new Error(data.error);
     target = data;
     browser.home = data.home || browser.home;
@@ -3446,7 +3485,7 @@ async function navigate(path) {
     browser.loading = false;
     renderBrowser();
   } catch (error) {
-    if (!browser) return;
+    if (browser !== current || directoryRequest !== request) return;
     browser.loading = false;
     browser.error = error.message || String(error);
     renderBrowser();
@@ -3459,7 +3498,7 @@ async function navigate(path) {
   if (!parentCrumb) return;
   try {
     const data = await api(`/api/fs/list?path=${encodeURIComponent(parentCrumb.path)}`);
-    if (!browser || data.error) return;
+    if (browser !== current || directoryRequest !== request || data.error) return;
     const sep = separatorOf();
     const fold = (value) => (sep === "\\" ? value.toLowerCase() : value);
     const match = (data.entries || []).find((entry) => fold(entry.path) === fold(target.path));
@@ -3475,6 +3514,10 @@ async function navigate(path) {
 
 async function selectEntry(entry) {
   if (!browser) return;
+  const current = browser;
+  const request = {};
+  directoryRequest = request;
+  browser.pathDraft = null;
   browser.selected = entry;
   browser.child = null;
   browser.loading = true;
@@ -3482,13 +3525,13 @@ async function selectEntry(entry) {
   renderBrowser();
   try {
     const data = await api(`/api/fs/list?path=${encodeURIComponent(entry.path)}`);
-    if (!browser) return;
+    if (browser !== current || directoryRequest !== request) return;
     if (data.error) throw new Error(data.error);
     browser.child = data;
     browser.loading = false;
     renderBrowser();
   } catch (error) {
-    if (!browser) return;
+    if (browser !== current || directoryRequest !== request) return;
     browser.loading = false;
     browser.error = error.message || String(error);
     browser.selected = null;
@@ -3513,6 +3556,8 @@ function openPathEditor() {
 
 function cancelPathEdit() {
   if (!browser) return;
+  directoryRequest = null;
+  browser.loading = false;
   browser.pathDraft = null;
   browser.error = null;
   renderBrowser();
@@ -3628,6 +3673,8 @@ function renderBrowser() {
       </div>
     </div>` : "";
 
+  const previousPathInput = $("#dbPathInput");
+  const pathSelection = previousPathInput ? [previousPathInput.selectionStart, previousPathInput.selectionEnd] : null;
   mount.innerHTML = `
     <div class="db-modal">
       <div class="db-modalMask" data-action="db-cancel"></div>
@@ -3654,10 +3701,9 @@ function renderBrowser() {
 
   const pathInput = $("#dbPathInput");
   if (pathInput) {
-    const start = pathInput.selectionStart;
-    const end = pathInput.selectionEnd;
+    const [start, end] = pathSelection ?? [pathInput.selectionStart, pathInput.selectionEnd];
     pathInput.focus();
-    if (start != null && end != null && start === end) pathInput.setSelectionRange(start, end);
+    if (start != null && end != null) pathInput.setSelectionRange(start, end);
     pathInput.addEventListener("keydown", (event) => {
       if (event.key === "Enter" && !event.isComposing) {
         event.preventDefault();
@@ -3672,7 +3718,7 @@ function renderBrowser() {
     pathInput.addEventListener("input", () => {
       const caret = pathInput.selectionStart ?? pathInput.value.length;
       b.pathDraft = pathInput.value;
-      renderBrowser();
+      void previewPathDraft(b.pathDraft);
       const next = $("#dbPathInput");
       if (next) next.setSelectionRange(caret, caret);
     });