fix(ui): improve vector store and citation workflows (#6325)

## What changed

- Add an uploaded-file dropdown when attaching files to a vector store,
showing only unattached files.
- Refresh the vector-store list after creating a store and improve
attach failure handling.
- Add model allowlisting via `NEXT_PUBLIC_OGX_UI_ALLOWED_MODELS`, with
the first visible model selected by default.
- Redirect citation links for vector-store-only files to their
vector-store file details page.
- Add regression and utility tests for these UI flows.

## Root cause

Citation links can reference files that are present in a vector store
but are not present in the global Files API. The generic file details
route now falls back to locating the file across vector stores before
showing an error.

## Validation

- `npx jest --runInBand app/chat-playground/page.test.tsx
components/files/file-detail.test.tsx
components/vector-stores/available-files.test.ts
components/vector-stores/model-list.test.ts
components/vector-stores/vector-store-params.test.ts
lib/model-filter.test.ts`
- 6 suites passed, 18 tests passed.
- ESLint and Prettier checks passed for the changed file-detail files.
- Live browser verification completed for the citation redirect.

---------

Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>

Author: franciscojavierarceo

src/ogx_ui/README.md

@@ -23,3 +23,17 @@ bun dev
 ```
 
 Open [http://localhost:8322](http://localhost:8322) with your browser to see the result.
+
+## Model filtering
+
+The Chat Playground shows all available LLM models by default. To limit the
+model dropdown, set `NEXT_PUBLIC_OGX_UI_ALLOWED_MODELS` to a comma-separated
+list of model IDs:
+
+```bash
+NEXT_PUBLIC_OGX_UI_ALLOWED_MODELS=openai/gpt-4.1-mini,anthropic/claude-sonnet-4-6
+```
+
+When configured, only matching models are shown in the configured order, and
+the first matching model is selected by default. If the variable is unset, the
+first model in the existing sorted list is selected by default.

src/ogx_ui/app/chat-playground/page.test.tsx

@@ -114,6 +114,7 @@ describe("ChatPlaygroundPage", () => {
       });
 
       expect(screen.getAllByRole("combobox")).toHaveLength(1);
+      expect(screen.getByRole("combobox")).toHaveTextContent("test-model-1");
     });
 
     test("shows settings panel", async () => {

src/ogx_ui/app/chat-playground/page.tsx

@@ -26,6 +26,11 @@ import {
   removeConversation,
   updateConversation,
 } from "@/lib/conversation-history";
+import { filterModels, parseModelAllowlist } from "@/lib/model-filter";
+
+const configuredModelIds = parseModelAllowlist(
+  process.env.NEXT_PUBLIC_OGX_UI_ALLOWED_MODELS
+);
 
 type ModelWithMeta = Model & {
   custom_metadata?: Record<string, unknown>;
@@ -140,7 +145,17 @@ function ChatPlaygroundContent() {
         );
 
         llmModels.sort((a, b) => a.id.localeCompare(b.id));
-        setModels(llmModels);
+        const visibleModels = filterModels(llmModels, configuredModelIds);
+        setModels(visibleModels);
+        setSelectedModel(currentModel => {
+          if (
+            currentModel &&
+            visibleModels.some(model => model.id === currentModel)
+          ) {
+            return currentModel;
+          }
+          return visibleModels[0]?.id ?? "";
+        });
       } catch (err) {
         console.error("Error fetching models:", err);
         setModelsError("Failed to load models");
@@ -714,6 +729,13 @@ function ChatPlaygroundContent() {
                 {modelsError && (
                   <p className="text-destructive text-xs mt-1">{modelsError}</p>
                 )}
+                {!isModelsLoading && !modelsError && models.length === 0 && (
+                  <p className="text-muted-foreground text-xs mt-1">
+                    {configuredModelIds.length > 0
+                      ? "No models matched the configured allowlist."
+                      : "No models available."}
+                  </p>
+                )}
               </div>
 
               <div>

src/ogx_ui/app/logs/vector-stores/page.tsx

@@ -25,6 +25,7 @@ import {
   VectorStoreEditor,
   VectorStoreFormData,
 } from "@/components/vector-stores/vector-store-editor";
+import { buildVectorStoreParams } from "@/components/vector-stores/vector-store-params";
 
 export default function VectorStoresPage() {
   const router = useRouter();
@@ -41,6 +42,7 @@ export default function VectorStoresPage() {
     hasMore,
     error,
     loadMore,
+    refetch,
   } = usePagination<VectorStore>({
     limit: 20,
     order: "desc",
@@ -130,27 +132,12 @@ export default function VectorStoresPage() {
         return;
       }
 
-      const createParams: Record<string, unknown> = {
-        name: formData.name || undefined,
-      };
-
-      if (formData.provider_id) {
-        createParams.provider_id = formData.provider_id;
-      }
-      if (formData.embedding_model) {
-        createParams.embedding_model = formData.embedding_model;
-      }
-      if (formData.embedding_dimension) {
-        createParams.embedding_dimension = formData.embedding_dimension;
-      }
-
-      await client.vectorStores.create(createParams);
+      await client.vectorStores.create(buildVectorStoreParams(formData));
+      refetch();
 
       // Show success state with close button
       setShowSuccessState(true);
-      setModalError(
-        "✅ Vector store created successfully! You can close this modal and refresh the page to see changes."
-      );
+      setModalError("✅ Vector store created successfully!");
     } catch (err: unknown) {
       console.error("Failed to create vector store:", err);
       const errorMessage =

src/ogx_ui/components/files/file-detail.test.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { FileDetail } from "./file-detail";
+
+const mockReplace = jest.fn();
+const mockRouter = { replace: mockReplace };
+const mockClient = {
+  files: {
+    retrieve: jest.fn(),
+  },
+  vectorStores: {
+    list: jest.fn(),
+    files: {
+      list: jest.fn(),
+    },
+  },
+};
+
+jest.mock("@/hooks/use-auth-client", () => ({
+  useAuthClient: () => mockClient,
+}));
+
+jest.mock("next/navigation", () => ({
+  useParams: () => ({ id: "file-orphaned" }),
+  useRouter: () => mockRouter,
+}));
+
+describe("FileDetail", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("does not log a Files API error when vector-store fallback succeeds", async () => {
+    mockClient.files.retrieve.mockRejectedValue(new Error("404"));
+    mockClient.vectorStores.list.mockResolvedValue({
+      data: [{ id: "vs_123" }],
+    });
+    mockClient.vectorStores.files.list.mockResolvedValue({
+      data: [{ id: "file-orphaned" }],
+    });
+    const consoleError = jest.spyOn(console, "error").mockImplementation();
+
+    render(<FileDetail />);
+
+    await waitFor(() => {
+      expect(mockReplace).toHaveBeenCalledWith(
+        "/logs/vector-stores/vs_123/files/file-orphaned"
+      );
+    });
+    expect(consoleError).not.toHaveBeenCalled();
+    consoleError.mockRestore();
+  });
+});

src/ogx_ui/components/files/file-detail.tsx

@@ -57,17 +57,45 @@ export function FileDetail() {
         const response = await client.files.retrieve(fileId);
         setFile(response as FileResource);
       } catch (err) {
-        console.error("Failed to fetch file:", err);
-        setError(
-          err instanceof Error ? err : new Error("Failed to fetch file")
-        );
+        try {
+          const storesResponse = await client.vectorStores.list({
+            limit: 100,
+            order: "desc",
+          });
+          const stores =
+            (storesResponse as { data?: { id?: string }[] }).data ?? [];
+          const matchingStore = await Promise.any(
+            stores
+              .filter((store): store is { id: string } => Boolean(store.id))
+              .map(async store => {
+                const filesResponse = await client.vectorStores.files.list(
+                  store.id
+                );
+                const files =
+                  (filesResponse as { data?: { id?: string }[] }).data ?? [];
+                if (files.some(file => file.id === fileId)) {
+                  return store.id;
+                }
+                throw new Error("File is not in this vector store");
+              })
+          );
+          router.replace(
+            `/logs/vector-stores/${matchingStore}/files/${fileId}`
+          );
+          return;
+        } catch {
+          console.error("Failed to fetch file details:", err);
+          setError(
+            err instanceof Error ? err : new Error("Failed to fetch file")
+          );
+        }
       } finally {
         setLoading(false);
       }
     };
 
     fetchFile();
-  }, [fileId, client]);
+  }, [fileId, client, router]);
 
   // Cleanup blob URL when component unmounts or content changes
   useEffect(() => {

src/ogx_ui/components/vector-stores/available-files.test.ts

@@ -0,0 +1,32 @@
+import type { VectorStoreFile } from "ogx-client/resources/vector-stores/files";
+import type { File } from "ogx-client/resources/files";
+import { getAvailableFiles } from "./available-files";
+
+const uploadedFile = (id: string): File =>
+  ({ id, filename: `${id}.txt` }) as File;
+
+const attachedFile = (id: string): VectorStoreFile => ({
+  id,
+  created_at: 0,
+  status: "completed",
+  usage_bytes: 0,
+  vector_store_id: "vs_test",
+  chunking_strategy: { type: "auto" },
+});
+
+describe("getAvailableFiles", () => {
+  test("filters out files already attached to the vector store", () => {
+    expect(
+      getAvailableFiles(
+        [uploadedFile("file_1"), uploadedFile("file_2")],
+        [attachedFile("file_1")]
+      ).map(file => file.id)
+    ).toEqual(["file_2"]);
+  });
+
+  test("returns no files when every uploaded file is attached", () => {
+    expect(
+      getAvailableFiles([uploadedFile("file_1")], [attachedFile("file_1")])
+    ).toEqual([]);
+  });
+});

src/ogx_ui/components/vector-stores/available-files.ts

@@ -0,0 +1,10 @@
+import type { File } from "ogx-client/resources/files";
+import type { VectorStoreFile } from "ogx-client/resources/vector-stores/files";
+
+export function getAvailableFiles(
+  uploadedFiles: File[],
+  attachedFiles: VectorStoreFile[]
+): File[] {
+  const attachedFileIds = new Set(attachedFiles.map(file => file.id));
+  return uploadedFiles.filter(file => !attachedFileIds.has(file.id));
+}

src/ogx_ui/components/vector-stores/model-list.test.ts

@@ -0,0 +1,20 @@
+import type { Model } from "ogx-client/resources/models";
+import { normalizeModelList } from "./model-list";
+
+const embeddingModel = { id: "embedding-model" } as Model;
+
+describe("normalizeModelList", () => {
+  test("unwraps the OpenAI-style data response", () => {
+    expect(normalizeModelList({ data: [embeddingModel] })).toEqual([
+      embeddingModel,
+    ]);
+  });
+
+  test("preserves array responses", () => {
+    expect(normalizeModelList([embeddingModel])).toEqual([embeddingModel]);
+  });
+
+  test("returns an empty list for an invalid response", () => {
+    expect(normalizeModelList({ models: [embeddingModel] })).toEqual([]);
+  });
+});

src/ogx_ui/components/vector-stores/model-list.ts

@@ -0,0 +1,14 @@
+import type { Model } from "ogx-client/resources/models";
+
+export function normalizeModelList(result: unknown): Model[] {
+  if (Array.isArray(result)) {
+    return result as Model[];
+  }
+
+  if (result && typeof result === "object" && "data" in result) {
+    const data = (result as { data?: unknown }).data;
+    return Array.isArray(data) ? (data as Model[]) : [];
+  }
+
+  return [];
+}