fix(web): folder links from chat open the file tree instead of a broken preview

apps/web/src/components/files/FileBrowserPanel.tsx

@@ -30,7 +30,7 @@ interface FileBrowserPanelProps {
   environmentId: EnvironmentId;
   cwd: string;
   projectName: string;
-  /** File currently open in the preview pane; revealed and selected in the tree. */
+  /** Entry currently open in the surface; revealed and selected in the tree. A directory is expanded. */
   selectedPath: string | null;
   /** Bumped when the same path should be revealed again (e.g. re-opened from search). */
   selectedPathRevealId: number;
@@ -299,8 +299,13 @@ export default function FileBrowserPanel({
     ) {
       return;
     }
-    if (entryKinds.get(selectedPath) !== "file") return;
-    const selectedItem = model.getItem(selectedPath);
+    const selectedKind = entryKinds.get(selectedPath);
+    if (selectedKind === undefined) return;
+    // Directory rows are registered with a trailing slash (see treePath).
+    const selectedItem =
+      selectedKind === "directory"
+        ? model.getItem(`${selectedPath}/`)
+        : model.getItem(selectedPath);
     if (!selectedItem) return;
 
     // A selection that originated inside the tree (clicking a row, possibly
@@ -334,8 +339,12 @@ export default function FileBrowserPanel({
       if (item && "expand" in item) item.expand();
     }
 
+    if (selectedKind === "directory" && "expand" in selectedItem) selectedItem.expand();
     selectedItem.select();
-    model.scrollToPath(selectedPath, { focus: true, offset: "center" });
+    model.scrollToPath(selectedKind === "directory" ? `${selectedPath}/` : selectedPath, {
+      focus: true,
+      offset: "center",
+    });
     queueMicrotask(() => {
       syncingSelectionRef.current = false;
     });

apps/web/src/components/files/FilePreviewPanel.tsx

@@ -995,12 +995,20 @@ export default function FilePreviewPanel({
     relativePath,
     attachment === undefined && !isMedia && !isPdf,
   );
+  // A chat link cannot tell a folder from a file, so a folder arrives here as
+  // a file surface and the read fails. Keep the breadcrumbs, drop the preview
+  // pane, and let the tree fill the surface with the folder revealed. Mutation
+  // refresh stays on so the surface notices if the path becomes a file. A host
+  // path cannot be revealed in the workspace tree, so it keeps the read error.
+  const isDirectory = file.isNotFile && !isHostFile;
   const [explorerOpen, setExplorerOpen] = useState(initialExplorerOpen);
-  const showExplorer = shouldShowFileExplorer({
-    relativePath,
-    explorerOpen,
-    attachmentOpen: attachment !== undefined,
-  });
+  const showExplorer =
+    isDirectory ||
+    shouldShowFileExplorer({
+      relativePath,
+      explorerOpen,
+      attachmentOpen: attachment !== undefined,
+    });
   // Reading markdown rendered is a preference, not a property of one file. Keeping
   // it on the panel meant a thread switch dropped it and forced source back.
   const [renderMarkdownPreferred, setRenderMarkdownPreferred] = useLocalStorage(
@@ -1027,12 +1035,13 @@ export default function FilePreviewPanel({
     (handledReveal?.path === relativePath && handledReveal.requestId === revealRequestId);
   const renderMarkdown = isMarkdown && renderMarkdownPreferred && revealHandled;
   const renderBrowserFile = isPdf || (isHtml && renderBrowserFilePreferred && revealHandled);
-  const canToggleRendered = attachment === undefined && (isMarkdown || isHtml);
+  const canToggleRendered = !isDirectory && attachment === undefined && (isMarkdown || isHtml);
   const rendered = isMarkdown ? renderMarkdown : renderBrowserFile;
   const setRenderedPreferred = isMarkdown
     ? setRenderMarkdownPreferred
     : setRenderBrowserFilePreferred;
   const canOpenInBrowser =
+    !isDirectory &&
     relativePath !== null &&
     attachment === undefined &&
     !isVideo &&
@@ -1190,7 +1199,7 @@ export default function FilePreviewPanel({
               <TooltipPopup>Open file in preview browser</TooltipPopup>
             </Tooltip>
           ) : null}
-          {!isHostFile ? (
+          {!isHostFile && !isDirectory ? (
             <Tooltip>
               <TooltipTrigger
                 render={
@@ -1222,7 +1231,7 @@ export default function FilePreviewPanel({
         <div
           className={cn(
             "min-w-0 flex-1 flex-col overflow-hidden",
-            relativePath ? "flex" : "hidden",
+            relativePath && !isDirectory ? "flex" : "hidden",
           )}
         >
           {relativePath && attachment ? (
@@ -1332,7 +1341,7 @@ export default function FilePreviewPanel({
           <aside
             className={cn(
               "flex min-h-0 shrink-0 bg-background",
-              relativePath
+              relativePath && !isDirectory
                 ? "w-[min(22rem,46%)] min-w-64 border-l border-border/60"
                 : "min-w-0 flex-1",
             )}
@@ -1346,7 +1355,7 @@ export default function FilePreviewPanel({
               selectedPathRevealId={revealRequestId}
               onOpenFile={onOpenFile}
               workspaceMutationId={workspaceMutationId}
-              {...(relativePath && !isMedia && !isPdf
+              {...(relativePath && !isMedia && !isPdf && !isDirectory
                 ? { onRefreshSelectedFile: file.refresh }
                 : {})}
             />

apps/web/src/components/files/projectFilesQueryState.test.tsx

@@ -1,6 +1,7 @@
 import {
   EnvironmentId,
   type ProjectListEntriesResult,
+  ProjectReadFileError,
   type ProjectReadFileResult,
 } from "@t3tools/contracts";
 import * as Effect from "effect/Effect";
@@ -250,4 +251,33 @@ describe("project query refresh", () => {
       atomHooks.registry = null;
     }
   });
+
+  it("reports a directory read as not a file", async () => {
+    const readAtom = Atom.make(
+      Effect.fail(
+        new ProjectReadFileError({
+          cwd: "/repo",
+          relativePath: ".agents/skills",
+          failure: "path_not_file",
+        }),
+      ),
+    );
+    const registry = AtomRegistry.make();
+    const unmount = registry.mount(readAtom);
+    projectMocks.readFile.mockReturnValue(readAtom);
+    projectMocks.optimisticFile.mockReturnValue(Atom.make(null));
+    atomHooks.registry = registry;
+
+    try {
+      await flushEffects();
+      reactHooks.beginRender();
+      const query = useProjectFileQuery(environmentId, "/repo", ".agents/skills");
+      expect(query.isNotFile).toBe(true);
+      expect(query.data).toBeNull();
+    } finally {
+      unmount();
+      registry.dispose();
+      atomHooks.registry = null;
+    }
+  });
 });

apps/web/src/components/files/projectFilesQueryState.ts

@@ -1,15 +1,17 @@
 import { useAtomRefresh, useAtomValue } from "@effect/atom-react";
-import type {
-  EnvironmentId,
-  ProjectListEntriesResult,
-  ProjectReadFileResult,
+import {
+  type EnvironmentId,
+  type ProjectListEntriesResult,
+  ProjectReadFileError,
+  type ProjectReadFileResult,
 } from "@t3tools/contracts";
 import {
   isWorkspaceImagePreviewPath,
   isWorkspaceVideoPreviewPath,
 } from "@t3tools/shared/filePreview";
 import * as Cause from "effect/Cause";
 import * as Option from "effect/Option";
+import * as Schema from "effect/Schema";
 import { AsyncResult, Atom } from "effect/unstable/reactivity";
 import { useCallback } from "react";
 
@@ -33,6 +35,11 @@ interface ProjectQueryState<A> {
   readonly refresh: () => void;
 }
 
+interface ProjectFileQueryState extends ProjectQueryState<ProjectReadFileResult> {
+  /** The path exists but is not a regular file, typically a directory. */
+  readonly isNotFile: boolean;
+}
+
 function getProjectEntriesQueryAtom(environmentId: EnvironmentId, cwd: string) {
   return projectEnvironment.listEntries({ environmentId, input: { cwd } });
 }
@@ -125,6 +132,14 @@ function errorMessage<A>(result: AsyncResult.AsyncResult<A, unknown>): string |
   return cause instanceof Error ? cause.message : "Workspace query failed.";
 }
 
+const isProjectReadFileError = Schema.is(ProjectReadFileError);
+
+function isNotFileFailure<A>(result: AsyncResult.AsyncResult<A, unknown>): boolean {
+  if (result._tag !== "Failure") return false;
+  const cause = Cause.squash(result.cause);
+  return isProjectReadFileError(cause) && cause.failure === "path_not_file";
+}
+
 export function useProjectEntriesQuery(
   environmentId: EnvironmentId,
   cwd: string,
@@ -181,7 +196,7 @@ export function useProjectFileQuery(
   cwd: string,
   relativePath: string | null,
   enabled = true,
-): ProjectQueryState<ProjectReadFileResult> {
+): ProjectFileQueryState {
   const isMedia =
     relativePath !== null &&
     (isWorkspaceImagePreviewPath(relativePath) || isWorkspaceVideoPreviewPath(relativePath));
@@ -201,6 +216,7 @@ export function useProjectFileQuery(
   return {
     data: optimisticFile?.data ?? data,
     error: errorMessage(result),
+    isNotFile: isNotFileFailure(result),
     isPending: result.waiting,
     refresh,
   };

apps/web/src/rightPanelStore.ts

@@ -487,9 +487,11 @@ export const useRightPanelStore = create<RightPanelStoreState>()(
               : next;
           }),
         ),
-      openFile: (ref, relativePath, line) =>
+      openFile: (ref, requestedPath, line) =>
         set((state) =>
           userAction(state, scopedThreadKey(ref), (current) => {
+            // A folder link may end in a slash; the tree keys folders without it.
+            const relativePath = requestedPath.replace(/\/+$/, "") || requestedPath;
             const withoutStandaloneExplorer = current.surfaces.filter(
               (surface) => surface.kind !== "files",
             );