@agent-native/core 0.97.0 → 0.98.0

package/corpus/core/src/client/composer/useRealtimeVoiceMode.tsx

@@ -15,7 +15,7 @@ import {
   SIDEBAR_STATE_CHANGE_EVENT,
   type AgentSidebarStateChangeDetail,
 } from "../agent-sidebar-state.js";
-import { agentNativePath } from "../api-path.js";
+import { agentNativePath, appPath } from "../api-path.js";
 import { readClientAppState, setClientAppState } from "../application-state.js";
 import { getBrowserTabId } from "../browser-tab-id.js";
 import { useT } from "../i18n.js";
@@ -36,6 +36,17 @@ const REALTIME_VOICE_STATE_KEY = "realtime-voice-session";
 const REALTIME_VOICE_REQUEST_SOURCE = "realtime-voice";
 const REALTIME_VOICE_SESSION_PATH = "/_agent-native/realtime-voice/session";
 const REALTIME_VOICE_TOOL_PATH = "/_agent-native/realtime-voice/tool";
+const REALTIME_VOICE_CONNECTION_TIMEOUT_MS = 15_000;
+
+export const REALTIME_VOICE_AUDIO_CONSTRAINTS: MediaTrackConstraints = {
+  // Prefer the browser/OS-selected input instead of whichever physical device
+  // happens to be enumerated first. `ideal` keeps browsers without the
+  // synthetic `default` device from failing with OverconstrainedError.
+  deviceId: { ideal: "default" },
+  echoCancellation: true,
+  noiseSuppression: true,
+  autoGainControl: true,
+};
 
 type RealtimeServerEvent = Record<string, unknown> & { type?: string };
 
@@ -108,6 +119,22 @@ function errorMessage(error: unknown): string {
   return error instanceof Error ? error.message : String(error);
 }
 
+export function isRealtimeVoiceAbortError(error: unknown): boolean {
+  return Boolean(
+    error &&
+    typeof error === "object" &&
+    (error as { name?: unknown }).name === "AbortError",
+  );
+}
+
+export function createRealtimeVoiceConnectionTimeout(
+  onTimeout: () => void,
+  timeoutMs = REALTIME_VOICE_CONNECTION_TIMEOUT_MS,
+): () => void {
+  const timeout = window.setTimeout(onTimeout, timeoutMs);
+  return () => window.clearTimeout(timeout);
+}
+
 async function readErrorResponse(response: Response): Promise<string> {
   const raw = await response.text().catch(() => "");
   if (!raw) return response.statusText || `HTTP ${response.status}`;
@@ -242,6 +269,26 @@ function openOpenAiKeySettings(): void {
   );
 }
 
+function openMicrophoneSettings(): void {
+  if (typeof window === "undefined") return;
+  window.location.assign(`${appPath("/settings")}#voice`);
+}
+
+export function endRealtimeVoiceBeforeNavigation(
+  end: () => void,
+  navigate: () => void,
+): void {
+  end();
+  window.setTimeout(navigate, 0);
+}
+
+export function listenForRealtimeVoicePageHide(
+  cleanup: () => void,
+): () => void {
+  window.addEventListener("pagehide", cleanup);
+  return () => window.removeEventListener("pagehide", cleanup);
+}
+
 function voiceCopy(t: ReturnType<typeof useT>): RealtimeVoiceModeCopy {
   return {
     entryButtonLabel: t("agentPanel.voiceMode.entryButtonLabel"),
@@ -257,6 +304,7 @@ function voiceCopy(t: ReturnType<typeof useT>): RealtimeVoiceModeCopy {
     showChat: t("agentPanel.voiceMode.showChat"),
     hideChat: t("agentPanel.voiceMode.hideChat"),
     endVoiceMode: t("agentPanel.voiceMode.end"),
+    microphoneSettings: t("agentPanel.voiceMode.microphoneSettings"),
     status: {
       connecting: t("agentPanel.voiceMode.status.connecting"),
       listening: t("agentPanel.voiceMode.status.listening"),
@@ -304,6 +352,7 @@ function useRealtimeVoiceModeController(
   const meterFrameRef = useRef<number | null>(null);
   const lastMeterSampleRef = useRef(0);
   const abortRef = useRef<AbortController | null>(null);
+  const cancelConnectionTimeoutRef = useRef<(() => void) | null>(null);
   const handledCallsRef = useRef(new Set<string>());
   const sessionIdRef = useRef<string | undefined>(undefined);
   const startedAtRef = useRef<string | undefined>(undefined);
@@ -419,6 +468,8 @@ function useRealtimeVoiceModeController(
   );
 
   const cleanupTransport = useCallback(() => {
+    cancelConnectionTimeoutRef.current?.();
+    cancelConnectionTimeoutRef.current = null;
     abortRef.current?.abort();
     abortRef.current = null;
     channelRef.current?.close();
@@ -624,14 +675,31 @@ function useRealtimeVoiceModeController(
 
     const abortController = new AbortController();
     abortRef.current = abortController;
+    const isCurrentAttempt = () =>
+      abortRef.current === abortController && !abortController.signal.aborted;
+    const markConnected = () => {
+      if (!isCurrentAttempt()) return;
+      cancelConnectionTimeoutRef.current?.();
+      cancelConnectionTimeoutRef.current = null;
+      transition("listening");
+    };
+    cancelConnectionTimeoutRef.current = createRealtimeVoiceConnectionTimeout(
+      () => {
+        if (!isCurrentAttempt()) return;
+        fail(
+          copy?.errors.connectionFailed ??
+            "The realtime voice connection timed out.",
+        );
+      },
+    );
     try {
       const stream = await navigator.mediaDevices.getUserMedia({
-        audio: {
-          echoCancellation: true,
-          noiseSuppression: true,
-          autoGainControl: true,
-        },
+        audio: REALTIME_VOICE_AUDIO_CONSTRAINTS,
       });
+      if (!isCurrentAttempt()) {
+        for (const track of stream.getTracks()) track.stop();
+        return;
+      }
       streamRef.current = stream;
       attachAudioMeter(stream, "input");
 
@@ -652,21 +720,25 @@ function useRealtimeVoiceModeController(
 
       const channel = peer.createDataChannel("oai-events");
       channelRef.current = channel;
-      channel.onopen = () => transition("listening");
+      channel.onopen = markConnected;
       channel.onmessage = (messageEvent) => {
+        if (!isCurrentAttempt()) return;
         try {
           handleServerEvent(JSON.parse(String(messageEvent.data)));
         } catch {
           // Ignore malformed provider events without ending a healthy call.
         }
       };
-      channel.onerror = () =>
+      channel.onerror = () => {
+        if (!isCurrentAttempt()) return;
         fail(
           copy?.errors.channelDisconnected ??
             "The realtime voice control channel disconnected.",
         );
+      };
       peer.onconnectionstatechange = () => {
-        if (peer.connectionState === "connected") transition("listening");
+        if (!isCurrentAttempt()) return;
+        if (peer.connectionState === "connected") markConnected();
         if (peer.connectionState === "failed") {
           fail(
             copy?.errors.connectionFailed ??
@@ -676,7 +748,9 @@ function useRealtimeVoiceModeController(
       };
 
       const offer = await peer.createOffer();
+      if (!isCurrentAttempt()) return;
       await peer.setLocalDescription(offer);
+      if (!isCurrentAttempt()) return;
       if (!offer.sdp) {
         throw new Error(
           copy?.errors.offerFailed ??
@@ -687,8 +761,19 @@ function useRealtimeVoiceModeController(
         browserTabId,
         signal: abortController.signal,
       });
+      if (!isCurrentAttempt()) return;
       await peer.setRemoteDescription({ type: "answer", sdp: answerSdp });
     } catch (startError) {
+      // Ending a connection aborts the SDP request by design. A superseded
+      // attempt must never resurrect the dock or surface that cancellation as
+      // an error after cleanup.
+      if (
+        isRealtimeVoiceAbortError(startError) ||
+        abortController.signal.aborted ||
+        abortRef.current !== abortController
+      ) {
+        return;
+      }
       const status = (startError as { status?: unknown })?.status;
       fail(errorMessage(startError), { openKeySettings: status === 400 });
     }
@@ -749,7 +834,13 @@ function useRealtimeVoiceModeController(
       window.removeEventListener(SIDEBAR_STATE_CHANGE_EVENT, onSidebarState);
   }, []);
 
-  useEffect(() => cleanupTransport, [cleanupTransport]);
+  useEffect(() => {
+    const stopListening = listenForRealtimeVoicePageHide(cleanupTransport);
+    return () => {
+      stopListening();
+      cleanupTransport();
+    };
+  }, [cleanupTransport]);
 
   return {
     state,
@@ -790,6 +881,12 @@ export function RealtimeVoiceModeProvider({
               audioLevels={voice.audioLevels}
               onToggleChat={voice.toggleChat}
               onEndVoiceMode={voice.end}
+              onOpenMicrophoneSettings={() =>
+                endRealtimeVoiceBeforeNavigation(
+                  voice.end,
+                  openMicrophoneSettings,
+                )
+              }
               errorMessage={voice.errorMessage}
             />,
             document.body,

package/corpus/core/src/client/context-xray/ContextXRayPanel.tsx

@@ -121,8 +121,11 @@ export function ContextXRayPanel({
         </div>
         <div className="mt-2 h-1 overflow-hidden rounded-full bg-muted/70">
           <div
-            className="h-full rounded-full bg-foreground transition-[width] duration-200"
-            style={{ width: `${pct}%` }}
+            className="h-full rounded-full bg-foreground origin-left transition-transform duration-200"
+            style={{
+              transform: `scaleX(${Math.min(1, pct / 100)})`,
+              width: "100%",
+            }}
           />
         </div>
         <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted-foreground">

package/corpus/core/src/client/extensions/ExtensionEditor.tsx

@@ -28,6 +28,7 @@ import {
   deleteOrHideExtension,
   invalidateExtensionRemoval,
 } from "./delete-extension.js";
+import { ExtensionQueryErrorState } from "./ExtensionQueryErrorState.js";
 
 interface SlotDeclaration {
   id: string;
@@ -61,19 +62,22 @@ export function ExtensionEditor({ extensionId }: ExtensionEditorProps) {
   const [menuOpen, setMenuOpen] = useState(false);
   const [confirmingDelete, setConfirmingDelete] = useState(false);
 
-  const { data: slots = [] } = useQuery<SlotDeclaration[]>({
+  const slotsQuery = useQuery<SlotDeclaration[]>({
     queryKey: ["extension-slots", extensionId],
     queryFn: async () => {
       const res = await fetch(
         agentNativePath(`/_agent-native/slots/extension/${extensionId}`),
       );
-      if (!res.ok) return [];
+      if (!res.ok) {
+        throw new Error(`Failed to load extension slots (${res.status})`);
+      }
       return res.json();
     },
     enabled: isEdit && menuOpen,
   });
+  const slots = slotsQuery.data ?? [];
 
-  const { data: existingTool } = useQuery<Extension>({
+  const existingToolQuery = useQuery<Extension>({
     queryKey: ["extension", extensionId],
     queryFn: async () => {
       const res = await fetch(
@@ -84,6 +88,7 @@ export function ExtensionEditor({ extensionId }: ExtensionEditorProps) {
     },
     enabled: isEdit,
   });
+  const existingTool = existingToolQuery.data;
 
   useEffect(() => {
     if (existingTool) {
@@ -175,6 +180,26 @@ export function ExtensionEditor({ extensionId }: ExtensionEditorProps) {
     }
   };
 
+  if (isEdit && existingToolQuery.isLoading) {
+    return (
+      <div className="flex h-full flex-col">
+        <div className="h-12 shrink-0 border-b" />
+        <div className="flex-1 bg-muted/20 animate-pulse" />
+      </div>
+    );
+  }
+
+  if (isEdit && existingToolQuery.isError) {
+    return (
+      <ExtensionQueryErrorState
+        className="h-full min-h-[20rem]"
+        message={t("extensions.loadError")}
+        onRetry={() => void existingToolQuery.refetch()}
+        retrying={existingToolQuery.isFetching}
+      />
+    );
+  }
+
   return (
     <TooltipProvider delayDuration={200}>
       <div className="flex h-full flex-col">
@@ -243,7 +268,15 @@ export function ExtensionEditor({ extensionId }: ExtensionEditorProps) {
                         <p className="text-[12px] font-medium">
                           {t("extensions.appearsIn")}
                         </p>
-                        {slots.length === 0 ? (
+                        {slotsQuery.isError ? (
+                          <ExtensionQueryErrorState
+                            compact
+                            className="px-0"
+                            message={t("extensions.widgetAreasLoadError")}
+                            onRetry={() => void slotsQuery.refetch()}
+                            retrying={slotsQuery.isFetching}
+                          />
+                        ) : slots.length === 0 ? (
                           <p className="text-[11px] text-muted-foreground/70 mt-0.5">
                             {t("extensions.noWidgetAreas")}
                           </p>

package/corpus/core/src/client/extensions/ExtensionQueryErrorState.tsx

@@ -0,0 +1,47 @@
+import { IconRefresh } from "@tabler/icons-react";
+
+import { useT } from "../i18n.js";
+import { cn } from "../utils.js";
+
+export function ExtensionQueryErrorState({
+  message,
+  onRetry,
+  retrying = false,
+  compact = false,
+  className,
+}: {
+  message: string;
+  onRetry: () => void;
+  retrying?: boolean;
+  compact?: boolean;
+  className?: string;
+}) {
+  const t = useT();
+
+  return (
+    <div
+      role="alert"
+      className={cn(
+        "flex items-center text-destructive",
+        compact
+          ? "gap-2 px-2 py-1.5 text-[11px]"
+          : "flex-col justify-center gap-3 px-4 py-8 text-center text-sm",
+        className,
+      )}
+    >
+      <span>{message}</span>
+      <button
+        type="button"
+        onClick={onRetry}
+        disabled={retrying}
+        className={cn(
+          "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md border border-border text-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-60",
+          compact ? "px-2 py-1 text-[11px]" : "px-3 py-1.5 text-xs",
+        )}
+      >
+        <IconRefresh className={cn("size-3.5", retrying && "animate-spin")} />
+        {t("extensions.retry")}
+      </button>
+    </div>
+  );
+}

package/corpus/core/src/client/extensions/ExtensionSlot.tsx

@@ -17,6 +17,7 @@ import {
 } from "../components/ui/tooltip.js";
 import { useT } from "../i18n.js";
 import { EmbeddedExtension } from "./EmbeddedExtension.js";
+import { ExtensionQueryErrorState } from "./ExtensionQueryErrorState.js";
 
 interface SlotInstall {
   installId: string;
@@ -70,7 +71,8 @@ export function ExtensionSlot({
   className,
   toolClassName,
 }: ExtensionSlotProps) {
-  const { data: installs = [], isLoading } = useQuery<SlotInstall[]>({
+  const t = useT();
+  const installsQuery = useQuery<SlotInstall[]>({
     queryKey: ["slot-installs", id],
     queryFn: async () => {
       const res = await fetch(
@@ -78,15 +80,29 @@ export function ExtensionSlot({
           `/_agent-native/slots/${encodeURIComponent(id)}/installs`,
         ),
       );
-      if (!res.ok) return [];
+      if (!res.ok)
+        throw new Error(`Failed to load slot installs (${res.status})`);
       return res.json();
     },
   });
+  const installs = installsQuery.data ?? [];
 
-  if (isLoading) {
+  if (installsQuery.isLoading) {
     return null;
   }
 
+  if (installsQuery.isError) {
+    return (
+      <ExtensionQueryErrorState
+        compact
+        className={className}
+        message={t("extensions.widgetsLoadError")}
+        onRetry={() => void installsQuery.refetch()}
+        retrying={installsQuery.isFetching}
+      />
+    );
+  }
+
   if (installs.length === 0) {
     if (!showEmptyAffordance) return null;
     return (
@@ -114,7 +130,7 @@ export function ExtensionSlot({
 function SlotEmptyAffordance({ slotId }: { slotId: string }) {
   const t = useT();
   const [open, setOpen] = useState(false);
-  const { data: available = [], isLoading } = useQuery<AvailableTool[]>({
+  const availableQuery = useQuery<AvailableTool[]>({
     queryKey: ["slot-available", slotId],
     queryFn: async () => {
       const res = await fetch(
@@ -122,11 +138,14 @@ function SlotEmptyAffordance({ slotId }: { slotId: string }) {
           `/_agent-native/slots/${encodeURIComponent(slotId)}/available`,
         ),
       );
-      if (!res.ok) return [];
+      if (!res.ok) {
+        throw new Error(`Failed to load available extensions (${res.status})`);
+      }
       return res.json();
     },
     enabled: open,
   });
+  const available = availableQuery.data ?? [];
   const queryClient = useQueryClient();
 
   const install = async (extensionId: string) => {
@@ -210,16 +229,26 @@ function SlotEmptyAffordance({ slotId }: { slotId: string }) {
           </p>
         </div>
         <div className="max-h-72 overflow-y-auto py-1">
-          {isLoading && (
+          {availableQuery.isLoading && (
             <div className="px-3 py-3 text-[12px] text-muted-foreground/60">
               {t("extensions.loading")}
             </div>
           )}
-          {!isLoading && available.length === 0 && (
-            <div className="px-3 py-3 text-[12px] text-muted-foreground/60">
-              {t("extensions.noWidgetsAvailable")}
-            </div>
+          {availableQuery.isError && (
+            <ExtensionQueryErrorState
+              compact
+              message={t("extensions.widgetsLoadError")}
+              onRetry={() => void availableQuery.refetch()}
+              retrying={availableQuery.isFetching}
+            />
           )}
+          {!availableQuery.isLoading &&
+            !availableQuery.isError &&
+            available.length === 0 && (
+              <div className="px-3 py-3 text-[12px] text-muted-foreground/60">
+                {t("extensions.noWidgetsAvailable")}
+              </div>
+            )}
           {available.map((extension) => (
             <button
               key={extension.extensionId}

package/corpus/core/src/client/extensions/ExtensionViewer.tsx

@@ -34,6 +34,7 @@ import {
 } from "../components/ui/tooltip.js";
 import { PromptComposer } from "../composer/PromptComposer.js";
 import { isEmbedMcpChatBridgeActive } from "../embed-auth.js";
+import { useT } from "../i18n.js";
 import { ShareButton } from "../sharing/ShareButton.js";
 import {
   deleteOrHideExtension,
@@ -44,6 +45,7 @@ import {
   extensionLoadErrorStatus,
   shouldRetryExtensionLoad,
 } from "./extension-load-error.js";
+import { ExtensionQueryErrorState } from "./ExtensionQueryErrorState.js";
 import {
   isAllowedExtensionPath,
   sanitizeExtensionRequestOptions,
@@ -577,6 +579,7 @@ function ExtensionHistoryPopover({
   onRestored?: () => void;
   onOpenChange?: (open: boolean) => void;
 }) {
+  const t = useT();
   const [open, setOpen] = useState(false);
   const [selectedVersion, setSelectedVersion] = useState<number | null>(null);
   const [restoringVersion, setRestoringVersion] = useState<number | null>(null);
@@ -698,6 +701,13 @@ function ExtensionHistoryPopover({
                   <IconLoader2 className="h-3.5 w-3.5 animate-spin" />
                   Loading history
                 </div>
+              ) : historyQuery.isError ? (
+                <ExtensionQueryErrorState
+                  compact
+                  message={t("extensions.historyLoadError")}
+                  onRetry={() => void historyQuery.refetch()}
+                  retrying={historyQuery.isFetching}
+                />
               ) : history.length === 0 ? (
                 <p className="px-2 py-3 text-xs text-muted-foreground">
                   No history yet.
@@ -767,9 +777,11 @@ function ExtensionHistoryPopover({
                   Loading diff
                 </div>
               ) : detailQuery.isError ? (
-                <div className="p-4 text-xs text-destructive">
-                  Could not load this version.
-                </div>
+                <ExtensionQueryErrorState
+                  message={t("extensions.versionLoadError")}
+                  onRetry={() => void detailQuery.refetch()}
+                  retrying={detailQuery.isFetching}
+                />
               ) : compactedDiff.length === 0 ? (
                 <div className="p-4 text-xs text-muted-foreground">
                   No content changes in this version.
@@ -802,6 +814,7 @@ function ExtensionHistoryPopover({
 }
 
 export function ExtensionViewer({ extensionId }: ExtensionViewerProps) {
+  const t = useT();
   const location = useLocation();
   const navigate = useNavigate();
   const [isDark, setIsDark] = useState(false);
@@ -1112,6 +1125,8 @@ export function ExtensionViewer({ extensionId }: ExtensionViewerProps) {
     failureReason: extensionFailureReason,
     isFetching,
     isLoading,
+    isError,
+    refetch,
   } = useQuery<Extension>({
     queryKey: ["extension", extensionId],
     queryFn: async () => {
@@ -1237,6 +1252,17 @@ export function ExtensionViewer({ extensionId }: ExtensionViewerProps) {
     );
   }
 
+  if (isError && !latestFetchDenied) {
+    return (
+      <ExtensionQueryErrorState
+        className="h-full min-h-[20rem]"
+        message={t("extensions.loadError")}
+        onRetry={() => void refetch()}
+        retrying={isFetching}
+      />
+    );
+  }
+
   if (latestFetchDenied || !extension) {
     return <ExtensionUnavailableState status={unavailableStatus} />;
   }
@@ -1414,6 +1440,7 @@ function ToolMoreMenu({
   sourceMode?: "database" | "local-files";
   onOpenChange?: (open: boolean) => void;
 }) {
+  const t = useT();
   const [open, setOpen] = useState(false);
   const [confirmingDelete, setConfirmingDelete] = useState(false);
   const queryClient = useQueryClient();
@@ -1423,17 +1450,20 @@ function ToolMoreMenu({
     onOpenChange?.(v);
   };
 
-  const { data: slots = [] } = useQuery<SlotDeclaration[]>({
+  const slotsQuery = useQuery<SlotDeclaration[]>({
     queryKey: ["extension-slots", extensionId],
     queryFn: async () => {
       const res = await fetch(
         agentNativePath(`/_agent-native/slots/extension/${extensionId}`),
       );
-      if (!res.ok) return [];
+      if (!res.ok) {
+        throw new Error(`Failed to load extension slots (${res.status})`);
+      }
       return res.json();
     },
     enabled: open,
   });
+  const slots = slotsQuery.data ?? [];
 
   const closeMenu = () => {
     setOpenAndNotify(false);
@@ -1497,7 +1527,15 @@ function ToolMoreMenu({
           <>
             <div className="px-3 py-2 border-b border-border/40">
               <p className="text-[12px] font-medium">Appears in</p>
-              {slots.length === 0 ? (
+              {slotsQuery.isError ? (
+                <ExtensionQueryErrorState
+                  compact
+                  className="px-0"
+                  message={t("extensions.widgetAreasLoadError")}
+                  onRetry={() => void slotsQuery.refetch()}
+                  retrying={slotsQuery.isFetching}
+                />
+              ) : slots.length === 0 ? (
                 <p className="text-[11px] text-muted-foreground/70 mt-0.5">
                   Not installed in any widget areas. Ask the agent to add it
                   somewhere.

package/corpus/core/src/client/extensions/ExtensionsListPage.tsx

@@ -37,6 +37,7 @@ import {
   applyToolsOrder,
   getToolsOrder,
 } from "./extension-order.js";
+import { ExtensionQueryErrorState } from "./ExtensionQueryErrorState.js";
 
 interface Extension {
   id: string;
@@ -128,7 +129,7 @@ export function ExtensionsListPage() {
     };
   }, []);
 
-  const { data: extensions, isLoading } = useQuery<Extension[]>({
+  const extensionsQuery = useQuery<Extension[]>({
     queryKey: ["extensions", { includeGloballyHidden: showGloballyHidden }],
     queryFn: async () => {
       const res = await fetch(
@@ -138,10 +139,11 @@ export function ExtensionsListPage() {
             : "/_agent-native/extensions",
         ),
       );
-      if (!res.ok) return [];
+      if (!res.ok) throw new Error(`Failed to load extensions (${res.status})`);
       return res.json();
     },
   });
+  const extensions = extensionsQuery.data;
 
   const toolList =
     toolOrderState.length > 0
@@ -247,7 +249,7 @@ export function ExtensionsListPage() {
       </header>
 
       <div className="flex-1 overflow-auto px-5 py-8 sm:px-8 sm:py-10">
-        {isLoading ? (
+        {extensionsQuery.isLoading ? (
           <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
             {Array.from({ length: 6 }).map((_, i) => (
               <div
@@ -260,6 +262,13 @@ export function ExtensionsListPage() {
               </div>
             ))}
           </div>
+        ) : extensionsQuery.isError ? (
+          <ExtensionQueryErrorState
+            className="min-h-[calc(100vh-9rem)]"
+            message={t("extensions.loadError")}
+            onRetry={() => void extensionsQuery.refetch()}
+            retrying={extensionsQuery.isFetching}
+          />
         ) : toolList.length === 0 ? (
           <div className="flex min-h-[calc(100vh-9rem)] flex-col items-center justify-start px-2 pb-12 pt-[clamp(5rem,18vh,11rem)] sm:pb-16">
             <div className="mx-auto flex w-full max-w-[34rem] flex-col gap-7">