@@ -9,18 +9,38 @@ import { usePreparedConnection } from "~/state/session";
 
 export { resolveAssetUrl } from "@t3tools/client-runtime/state/assets";
 
-export function useAssetUrl(environmentId: EnvironmentId, resource: AssetResource): string | null {
+export type AssetUrlState =
+  | { readonly _tag: "Loading" }
+  | { readonly _tag: "Failure" }
+  | { readonly _tag: "Success"; readonly url: string };
+
+export function useAssetUrlState(
+  environmentId: EnvironmentId,
+  resource: AssetResource,
+): AssetUrlState {
   const preparedConnection = usePreparedConnection(environmentId);
   const result = useAtomValue(
     assetEnvironment.createUrl({
       environmentId,
       input: { resource },
     }),
   );
+  if (result._tag === "Failure") {
+    return { _tag: "Failure" };
+  }
   if (preparedConnection._tag === "None" || result._tag !== "Success") {
+    return { _tag: "Loading" };
+  }
+  const url = resolveAssetUrl(preparedConnection.value.httpBaseUrl, result.value.relativeUrl);
+  return url === null ? { _tag: "Failure" } : { _tag: "Success", url };
+}
+
+export function useAssetUrl(environmentId: EnvironmentId, resource: AssetResource): string | null {
+  const result = useAssetUrlState(environmentId, resource);
+  if (result._tag !== "Success") {
     return null;
   }
-  return resolveAssetUrl(preparedConnection.value.httpBaseUrl, result.value.relativeUrl);
+  return result.url;
 }
 
 export function useAssetUrls(
 
@@ -17,7 +17,7 @@ import * as Schema from "effect/Schema";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { isBrowserPreviewFile, openFileInPreview } from "~/browser/openFileInPreview";
-import { useAssetUrl } from "~/assets/assetUrls";
+import { useAssetUrlState } from "~/assets/assetUrls";
 import ChatMarkdown from "~/components/ChatMarkdown";
 import { OpenInPicker } from "~/components/chat/OpenInPicker";
 import { useClientSettings } from "~/hooks/useSettings";
@@ -121,15 +121,29 @@ function WorkspaceImagePreview(props: {
   readonly absolutePath: string;
   readonly alt: string;
 }) {
-  const src = useAssetUrl(props.environmentId, {
+  const assetUrl = useAssetUrlState(props.environmentId, {
     _tag: "workspace-file",
     threadId: props.threadRef.threadId,
     path: props.absolutePath,
   });
+  const [failedUrl, setFailedUrl] = useState<string | null>(null);
 
-  return src ? (
+  if (assetUrl._tag === "Failure" || (assetUrl._tag === "Success" && failedUrl === assetUrl.url)) {
+    return (
+      <div className="flex min-h-0 flex-1 items-center justify-center px-6 text-center text-xs leading-relaxed text-destructive">
+        Unable to load workspace image.
+      </div>
+    );
+  }
+
+  return assetUrl._tag === "Success" ? (
     <div className="flex min-h-0 flex-1 items-center justify-center overflow-auto p-4">
-      <img className="max-h-full max-w-full object-contain" src={src} alt={props.alt} />
+      <img
+        className="max-h-full max-w-full object-contain"
+        src={assetUrl.url}
+        alt={props.alt}
+        onError={() => setFailedUrl(assetUrl.url)}
+      />
     </div>
   ) : (
     <div className="flex min-h-0 flex-1 items-center justify-center text-muted-foreground">