fix(web): Fix loading issues with references / definitions list (#617)

Author: brendan-kellam

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+- Fixed spurious infinite loads with explore panel, file tree, and file search command. [#617](https://github.com/sourcebot-dev/sourcebot/pull/617)
+
 ## [4.9.2] - 2025-11-13
 
 ### Changed

packages/web/src/app/[domain]/browse/[...path]/components/codePreviewPanel.tsx

@@ -1,10 +1,10 @@
 import { getRepoInfoByName } from "@/actions";
 import { PathHeader } from "@/app/[domain]/components/pathHeader";
 import { Separator } from "@/components/ui/separator";
-import { getFileSource } from "@/features/search/fileSourceApi";
 import { cn, getCodeHostInfoForRepo, isServiceError } from "@/lib/utils";
 import Image from "next/image";
 import { PureCodePreviewPanel } from "./pureCodePreviewPanel";
+import { getFileSource } from "@/features/search/fileSourceApi";
 
 interface CodePreviewPanelProps {
     path: string;

packages/web/src/app/[domain]/browse/[...path]/components/pureTreePreviewPanel.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { useRef } from "react";
-import { FileTreeItem } from "@/features/fileTree/actions";
 import { FileTreeItemComponent } from "@/features/fileTree/components/fileTreeItemComponent";
 import { getBrowsePath } from "../../hooks/utils";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useBrowseParams } from "../../hooks/useBrowseParams";
 import { useDomain } from "@/hooks/useDomain";
+import { FileTreeItem } from "@/features/fileTree/types";
 
 interface PureTreePreviewPanelProps {
     items: FileTreeItem[];

packages/web/src/app/[domain]/browse/[...path]/components/treePreviewPanel.tsx

@@ -2,7 +2,7 @@
 import { Separator } from "@/components/ui/separator";
 import { getRepoInfoByName } from "@/actions";
 import { PathHeader } from "@/app/[domain]/components/pathHeader";
-import { getFolderContents } from "@/features/fileTree/actions";
+import { getFolderContents } from "@/features/fileTree/api";
 import { isServiceError } from "@/lib/utils";
 import { PureTreePreviewPanel } from "./pureTreePreviewPanel";
 

packages/web/src/app/[domain]/browse/components/fileSearchCommandDialog.tsx

@@ -5,14 +5,15 @@ import { useState, useRef, useMemo, useEffect, useCallback } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useQuery } from "@tanstack/react-query";
 import { unwrapServiceError } from "@/lib/utils";
-import { FileTreeItem, getFiles } from "@/features/fileTree/actions";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";
 import { useBrowseNavigation } from "../hooks/useBrowseNavigation";
 import { useBrowseState } from "../hooks/useBrowseState";
 import { useBrowseParams } from "../hooks/useBrowseParams";
 import { FileTreeItemIcon } from "@/features/fileTree/components/fileTreeItemIcon";
 import { useLocalStorage } from "usehooks-ts";
 import { Skeleton } from "@/components/ui/skeleton";
+import { FileTreeItem } from "@/features/fileTree/types";
+import { getFiles } from "@/app/api/(client)/client";
 
 const MAX_RESULTS = 100;
 

packages/web/src/app/[domain]/components/searchBar/useSuggestionsData.ts

@@ -55,7 +55,7 @@ export const useSuggestionsData = ({
             query: `file:${suggestionQuery}`,
             matches: 15,
             contextLines: 1,
-        }, domain),
+        }),
         select: (data): Suggestion[] => {
             if (isServiceError(data)) {
                 return [];
@@ -75,7 +75,7 @@ export const useSuggestionsData = ({
             query: `sym:${suggestionQuery.length > 0 ? suggestionQuery : ".*"}`,
             matches: 15,
             contextLines: 1,
-        }, domain),
+        }),
         select: (data): Suggestion[] => {
             if (isServiceError(data)) {
                 return [];

packages/web/src/app/[domain]/search/components/codePreviewPanel/index.tsx

@@ -5,8 +5,8 @@ import { CodePreview } from "./codePreview";
 import { SearchResultFile } from "@/features/search/types";
 import { SymbolIcon } from "@radix-ui/react-icons";
 import { SetStateAction, Dispatch, useMemo } from "react";
-import { getFileSource } from "@/features/search/fileSourceApi";
 import { unwrapServiceError } from "@/lib/utils";
+import { getFileSource } from "@/app/api/(client)/client";
 
 interface CodePreviewPanelProps {
     previewedFile: SearchResultFile;

packages/web/src/app/[domain]/search/components/searchResultsPage.tsx

@@ -66,7 +66,7 @@ export const SearchResultsPage = ({
             matches: maxMatchCount,
             contextLines: 3,
             whole: false,
-        }, domain)), "client.search"),
+        })), "client.search"),
         select: ({ data, durationMs }) => ({
             ...data,
             totalClientSearchDurationMs: durationMs,

packages/web/src/app/api/(client)/client.ts

@@ -9,13 +9,22 @@ import {
     SearchRequest,
     SearchResponse,
 } from "@/features/search/types";
+import {
+    FindRelatedSymbolsRequest,
+    FindRelatedSymbolsResponse,
+} from "@/features/codeNav/types";
+import {
+    GetFilesRequest,
+    GetFilesResponse,
+    GetTreeRequest,
+    GetTreeResponse,
+} from "@/features/fileTree/types";
 
-export const search = async (body: SearchRequest, domain: string): Promise<SearchResponse | ServiceError> => {
+export const search = async (body: SearchRequest): Promise<SearchResponse | ServiceError> => {
     const result = await fetch("/api/search", {
         method: "POST",
         headers: {
             "Content-Type": "application/json",
-            "X-Org-Domain": domain,
         },
         body: JSON.stringify(body),
     }).then(response => response.json());
@@ -27,12 +36,11 @@ export const search = async (body: SearchRequest, domain: string): Promise<Searc
     return result as SearchResponse | ServiceError;
 }
 
-export const fetchFileSource = async (body: FileSourceRequest, domain: string): Promise<FileSourceResponse | ServiceError> => {
+export const getFileSource = async (body: FileSourceRequest): Promise<FileSourceResponse | ServiceError> => {
     const result = await fetch("/api/source", {
         method: "POST",
         headers: {
             "Content-Type": "application/json",
-            "X-Org-Domain": domain,
         },
         body: JSON.stringify(body),
     }).then(response => response.json());
@@ -60,3 +68,35 @@ export const getVersion = async (): Promise<GetVersionResponse> => {
     }).then(response => response.json());
     return result as GetVersionResponse;
 }
+
+export const findSearchBasedSymbolReferences = async (body: FindRelatedSymbolsRequest): Promise<FindRelatedSymbolsResponse | ServiceError> => {
+    const result = await fetch("/api/find_references", {
+        method: "POST",
+        body: JSON.stringify(body),
+    }).then(response => response.json());
+    return result as FindRelatedSymbolsResponse | ServiceError;
+}
+
+export const findSearchBasedSymbolDefinitions = async (body: FindRelatedSymbolsRequest): Promise<FindRelatedSymbolsResponse | ServiceError> => {
+    const result = await fetch("/api/find_definitions", {
+        method: "POST",
+        body: JSON.stringify(body),
+    }).then(response => response.json());
+    return result as FindRelatedSymbolsResponse | ServiceError;
+}
+
+export const getTree = async (body: GetTreeRequest): Promise<GetTreeResponse | ServiceError> => {
+    const result = await fetch("/api/tree", {
+        method: "POST",
+        body: JSON.stringify(body),
+    }).then(response => response.json());
+    return result as GetTreeResponse | ServiceError;
+}
+
+export const getFiles = async (body: GetFilesRequest): Promise<GetFilesResponse | ServiceError> => {
+    const result = await fetch("/api/files", {
+        method: "POST",
+        body: JSON.stringify(body),
+    }).then(response => response.json());
+    return result as GetFilesResponse | ServiceError;
+}

packages/web/src/app/api/(server)/files/route.ts

@@ -0,0 +1,23 @@
+'use server';
+
+import { getFiles } from "@/features/fileTree/api";
+import { getFilesRequestSchema } from "@/features/fileTree/types";
+import { schemaValidationError, serviceErrorResponse } from "@/lib/serviceError";
+import { isServiceError } from "@/lib/utils";
+import { NextRequest } from "next/server";
+
+export const POST = async (request: NextRequest) => {
+    const body = await request.json();
+    const parsed = await getFilesRequestSchema.safeParseAsync(body);
+    if (!parsed.success) {
+        return serviceErrorResponse(schemaValidationError(parsed.error));
+    }
+
+    const response = await getFiles(parsed.data);
+    if (isServiceError(response)) {
+        return serviceErrorResponse(response);
+    }
+
+    return Response.json(response);
+}
+