fix(ui): show empty state when no model configs exist (kagent-dev#1930) (kagent-dev#1944)

---
  Title:
  fix(ui): show empty state when no model configs exist (kagent-dev#1930)

  Description:
  ## What

  When no `ModelConfig` resources are deployed, the UI showed a
  "Failed to fetch models" error instead of rendering the normal empty
  state ("no agents yet" / empty models page).

  Fixes kagent-dev#1930

  ## Why

The backend's `StandardResponse.Data` field uses
`json:"data,omitempty"`,
  so an empty list serializes with the `data` field omitted entirely
  (e.g. `{"error":false,"message":"Successfully listed ModelConfigs"}`),
  returned with HTTP 200.

  The UI treated a missing `data` as a fetch failure:

  ```ts
  if (!response.data || response.error) {
    throw new Error(response.error || "Failed to fetch models");
  }
```

  So a valid "zero model configs" response was misread as an error and
  surfaced via the shared error state in AgentsProvider (and on the
  /models page).

  Change

  Treat a missing/empty list as a valid empty result, and only fail on an
  explicit response.error — matching the existing defensive pattern in
  AgentList (result.data || []):

  - ui/src/components/AgentsProvider.tsx — fetchModels
  - ui/src/app/models/page.tsx — fetchModels

  This is a frontend-only fix; the backend omitempty behavior is
  unchanged.


Screenshots 

## Before: 

<img width="1895" height="970" alt="Screenshot 2026-05-29 225451" src="https://github.com/user-attachments/assets/f15e192f-11c2-4547-abb4-d6bc22e2c78d" />



## After: 

<img width="980" height="530" alt="image" src="https://github.com/user-attachments/assets/c812607d-0da9-42ed-81fb-590c9b5978a1" />

---------

Signed-off-by: gauravshinde1729 <shindegauravpict@gmail.com>

Author: gauravshinde1729

ui/src/app/models/page.tsx

@@ -30,10 +30,12 @@ export default function ModelsPage() {
     try {
       setLoading(true);
       const response = await getModelConfigs();
-      if (response.error || !response.data) {
-        throw new Error(response.error || "Failed to fetch models");
+      if (response.error) {
+        throw new Error(response.error);
       }
-      setModels(response.data);
+      // An empty list is valid (no ModelConfigs deployed). The backend omits
+      // `data` for empty collections, so treat missing data as an empty list.
+      setModels(response.data ?? []);
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Failed to fetch models";
       setError(errorMessage);

ui/src/components/AgentsProvider.tsx

@@ -125,11 +125,14 @@ export function AgentsProvider({ children }: AgentsProviderProps) {
   const fetchModels = useCallback(async () => {
     try {
       const response = await getModelConfigs();
-      if (!response.data || response.error) {
-        throw new Error(response.error || "Failed to fetch models");
+      if (response.error) {
+        throw new Error(response.error);
       }
 
-      setModels(response.data);
+      // An empty list is a valid result (e.g. no ModelConfigs deployed). The
+      // backend omits `data` for empty collections (json omitempty), so treat
+      // missing data as an empty list rather than a fetch failure.
+      setModels(response.data ?? []);
       setError("");
     } catch (err) {
       console.error("Error fetching models:", err);

ui/src/lib/__tests__/AgentsProvider.namespace.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import { AgentsProvider } from "@/components/AgentsProvider";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { AgentsProvider, useAgents } from "@/components/AgentsProvider";
 import { getAgents } from "@/app/actions/agents";
 import { getTools } from "@/app/actions/tools";
 import { getModelConfigs } from "@/app/actions/modelConfigs";
@@ -22,6 +22,22 @@ const mockGetAgents = getAgents as jest.MockedFunction<typeof getAgents>;
 const mockGetTools = getTools as jest.MockedFunction<typeof getTools>;
 const mockGetModelConfigs = getModelConfigs as jest.MockedFunction<typeof getModelConfigs>;
 
+// A tiny consumer that surfaces the two pieces of provider state we assert on:
+// the shared `error` string and the list of model configs.
+function ModelsConsumer() {
+  const { error, models } = useAgents();
+  return (
+    <div>
+      <p data-testid="model-error">{error}</p>
+      <ul data-testid="model-list">
+        {models.map((m) => (
+          <li key={m.ref}>{m.ref}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
 describe("AgentsProvider list fetching", () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -43,4 +59,52 @@ describe("AgentsProvider list fetching", () => {
     await waitFor(() => expect(mockGetTools).toHaveBeenCalled());
     expect(mockGetAgents).not.toHaveBeenCalled();
   });
+
+  // Regression for #1930.
+  //
+  // When no ModelConfigs are deployed, the backend responds 200 OK but with the
+  // `data` field omitted entirely (Go json omitempty), e.g.:
+  //   { "error": false, "message": "Successfully listed ModelConfigs" }
+  // The provider must read that as "zero models", NOT as a fetch failure.
+  // Before the fix, the missing `data` was treated as an error and the UI showed
+  // "Failed to fetch models".
+  it("shows no error when there are no model configs", async () => {
+    // The response below has no `data` key on purpose — that is exactly what an
+    // empty list looks like on the wire.
+    mockGetModelConfigs.mockResolvedValue({ message: "Successfully listed ModelConfigs" });
+
+    render(
+      <AgentsProvider>
+        <ModelsConsumer />
+      </AgentsProvider>,
+    );
+
+    // Wait for the fetch to be made, then let its promise + setState calls flush
+    // so we assert on the state *after* fetchModels has run (not the initial state,
+    // which also happens to be "no error / no models").
+    await waitFor(() => expect(mockGetModelConfigs).toHaveBeenCalled());
+    await act(async () => {});
+
+    expect(screen.getByTestId("model-error")).toBeEmptyDOMElement();
+    expect(screen.getByTestId("model-list").children).toHaveLength(0);
+  });
+
+  // The fix must not hide genuine failures: a real backend error should still be
+  // surfaced via the provider's `error` state.
+  it("surfaces a real error returned by the backend", async () => {
+    mockGetModelConfigs.mockResolvedValue({
+      message: "Failed",
+      error: "model configs unavailable",
+    });
+
+    render(
+      <AgentsProvider>
+        <ModelsConsumer />
+      </AgentsProvider>,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByTestId("model-error")).toHaveTextContent("model configs unavailable"),
+    );
+  });
 });