diff --git a/apps/web/src/app/diagrams/[sessionId]/page.tsx b/apps/web/src/app/diagrams/[sessionId]/page.tsx
index 6d765f1..5cd1424 100644
--- a/apps/web/src/app/diagrams/[sessionId]/page.tsx
+++ b/apps/web/src/app/diagrams/[sessionId]/page.tsx
@@ -1,6 +1,9 @@
 "use client";
 
-import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
+import type {
+  BinaryFiles,
+  ExcalidrawImperativeAPI,
+} from "@excalidraw/excalidraw/types";
 import { api } from "@sketchi/backend/convex/_generated/api";
 import { useAuth } from "@workos-inc/authkit-nextjs/components";
 import { useMutation, useQuery } from "convex/react";
@@ -56,6 +59,62 @@ interface RunState {
   stopRequested: boolean;
 }
 
+type StoredSceneFiles = Record<string, unknown>;
+
+function normalizeSceneFiles(
+  files: BinaryFiles | StoredSceneFiles | null | undefined
+): StoredSceneFiles | undefined {
+  if (!files) {
+    return undefined;
+  }
+
+  if (Object.keys(files).length < 1) {
+    return undefined;
+  }
+
+  return files as StoredSceneFiles;
+}
+
+function createSceneFileFingerprint(
+  files: StoredSceneFiles | undefined
+): string {
+  if (!files) {
+    return "";
+  }
+
+  return Object.entries(files)
+    .sort(([leftId], [rightId]) => leftId.localeCompare(rightId))
+    .map(([fileId, file]) => {
+      const metadata =
+        file && typeof file === "object"
+          ? (file as {
+              created?: unknown;
+              mimeType?: unknown;
+            })
+          : {};
+      const created =
+        typeof metadata.created === "number" ? metadata.created : "na";
+      const mimeType =
+        typeof metadata.mimeType === "string" ? metadata.mimeType : "unknown";
+      return `${fileId}:${mimeType}:${created}`;
+    })
+    .join("|");
+}
+
+function createSceneFingerprint(input: {
+  elements: readonly Record<string, unknown>[];
+  files?: BinaryFiles | StoredSceneFiles | null;
+}): string {
+  const elementFingerprint = input.elements
+    .map(
+      (element) =>
+        `${element.id}:${element.version}:${element.versionNonce}:${element.isDeleted ?? false}`
+    )
+    .join("|");
+  const files = normalizeSceneFiles(input.files);
+  return `${elementFingerprint}::${createSceneFileFingerprint(files)}`;
+}
+
 function createOptimisticUserMessage(input: {
   content: string;
   promptMessageId: string;
@@ -130,10 +189,11 @@ export default function DiagramStudioPage() {
   const knownVersionRef = useRef(0);
   const appliedVersionRef = useRef<number | null>(null);
   const isLocallyDirtyRef = useRef(false);
-  const lastElementsHashRef = useRef("");
+  const lastSceneFingerprintRef = useRef("");
   const pendingSceneRef = useRef<{
     elements: readonly Record<string, unknown>[];
     appState: Record<string, unknown>;
+    files?: StoredSceneFiles;
   } | null>(null);
   const previousRunStatusRef = useRef<RunStatus | null>(null);
 
@@ -218,6 +278,7 @@ export default function DiagramStudioPage() {
     async (
       elements: readonly Record<string, unknown>[],
       appState: Record<string, unknown>,
+      files?: StoredSceneFiles,
       overrideVersion?: number
     ) => {
       if (!sessionId) {
@@ -232,6 +293,7 @@ export default function DiagramStudioPage() {
           expectedVersion: overrideVersion ?? knownVersionRef.current,
           elements: elements as Record<string, unknown>[],
           appState: sanitizeAppState(appState),
+          files,
         });
 
         if (result.status === "success") {
@@ -243,7 +305,7 @@ export default function DiagramStudioPage() {
           pendingSceneRef.current = null;
         } else if (result.status === "conflict") {
           isLocallyDirtyRef.current = true;
-          pendingSceneRef.current = { elements, appState };
+          pendingSceneRef.current = { elements, appState, files };
           setSaveState({
             status: "conflict",
             serverVersion: result.latestSceneVersion,
@@ -278,7 +340,8 @@ export default function DiagramStudioPage() {
   const handleChange = useCallback(
     (
       elements: readonly Record<string, unknown>[],
-      appState: Record<string, unknown>
+      appState: Record<string, unknown>,
+      files: BinaryFiles
     ) => {
       const nonDeleted = elements.filter(
         (element) => element.isDeleted !== true
@@ -289,16 +352,15 @@ export default function DiagramStudioPage() {
         return;
       }
 
-      const hash = elements
-        .map(
-          (element) =>
-            `${element.id}:${element.version}:${element.versionNonce}:${element.isDeleted ?? false}`
-        )
-        .join("|");
-      if (hash === lastElementsHashRef.current) {
+      const normalizedFiles = normalizeSceneFiles(files);
+      const fingerprint = createSceneFingerprint({
+        elements,
+        files: normalizedFiles,
+      });
+      if (fingerprint === lastSceneFingerprintRef.current) {
         return;
       }
-      lastElementsHashRef.current = hash;
+      lastSceneFingerprintRef.current = fingerprint;
       isLocallyDirtyRef.current = true;
 
       if (autosaveTimeoutRef.current) {
@@ -306,7 +368,7 @@ export default function DiagramStudioPage() {
       }
 
       autosaveTimeoutRef.current = setTimeout(() => {
-        saveScene(elements, appState).catch(() => undefined);
+        saveScene(elements, appState, normalizedFiles).catch(() => undefined);
       }, AUTOSAVE_DELAY_MS);
     },
     [autosaveDisabled, isProcessing, saveScene]
@@ -316,6 +378,7 @@ export default function DiagramStudioPage() {
     (input: {
       elements: readonly Record<string, unknown>[];
       appState: Record<string, unknown>;
+      files?: StoredSceneFiles;
       version: number;
     }) => {
       if (!excalidrawApi) {
@@ -323,6 +386,13 @@ export default function DiagramStudioPage() {
       }
 
       suppressOnChangeRef.current = true;
+      excalidrawApi.resetScene({ resetLoadingState: false });
+      const files = Object.values(input.files ?? {});
+      if (files.length > 0) {
+        excalidrawApi.addFiles(
+          files as Parameters<typeof excalidrawApi.addFiles>[0]
+        );
+      }
       excalidrawApi.updateScene({
         elements: input.elements as unknown as Parameters<
           typeof excalidrawApi.updateScene
@@ -332,13 +402,10 @@ export default function DiagramStudioPage() {
         >[0]["appState"],
       });
 
-      const hash = input.elements
-        .map(
-          (element) =>
-            `${element.id}:${element.version}:${element.versionNonce}:${element.isDeleted ?? false}`
-        )
-        .join("|");
-      lastElementsHashRef.current = hash;
+      lastSceneFingerprintRef.current = createSceneFingerprint({
+        elements: input.elements,
+        files: input.files,
+      });
       const nonDeleted = input.elements.filter(
         (element) => element.isDeleted !== true
       ).length;
@@ -366,6 +433,7 @@ export default function DiagramStudioPage() {
             unknown
           >[],
           appState: session.latestScene.appState as Record<string, unknown>,
+          files: session.latestScene.files as StoredSceneFiles | undefined,
           version: session.latestSceneVersion,
         });
       } else {
@@ -407,6 +475,7 @@ export default function DiagramStudioPage() {
         appState: sanitizeAppState(
           excalidrawApi.getAppState() as Record<string, unknown>
         ),
+        files: normalizeSceneFiles(excalidrawApi.getFiles()),
       };
       knownVersionRef.current = version;
       setSaveState({
@@ -422,6 +491,7 @@ export default function DiagramStudioPage() {
         unknown
       >[],
       appState: session.latestScene.appState as Record<string, unknown>,
+      files: session.latestScene.files as StoredSceneFiles | undefined,
       version,
     });
   }, [
@@ -442,6 +512,7 @@ export default function DiagramStudioPage() {
         unknown
       >[],
       appState: session.latestScene.appState as Record<string, unknown>,
+      files: session.latestScene.files as StoredSceneFiles | undefined,
       version: session.latestSceneVersion,
     });
 
@@ -458,6 +529,7 @@ export default function DiagramStudioPage() {
     await saveScene(
       pendingSceneRef.current.elements,
       pendingSceneRef.current.appState,
+      pendingSceneRef.current.files,
       saveState.serverVersion
     );
   }, [saveScene, saveState]);
@@ -701,9 +773,9 @@ export default function DiagramStudioPage() {
         <div className="ml-auto">
           <ImportExportToolbar
             excalidrawApi={excalidrawApi}
-            knownVersionRef={knownVersionRef}
-            saveScene={saveScene}
-            sessionId={sessionId}
+            saveScene={(elements, appState, files) =>
+              saveScene(elements, appState, files)
+            }
             suppressOnChangeRef={suppressOnChangeRef}
           />
         </div>
@@ -758,6 +830,9 @@ export default function DiagramStudioPage() {
                       string,
                       unknown
                     >,
+                    files: session.latestScene.files as
+                      | StoredSceneFiles
+                      | undefined,
                   }
                 : null
             }
diff --git a/apps/web/src/app/diagrams/page.tsx b/apps/web/src/app/diagrams/page.tsx
index 51657d5..fa106cb 100644
--- a/apps/web/src/app/diagrams/page.tsx
+++ b/apps/web/src/app/diagrams/page.tsx
@@ -28,6 +28,7 @@ type SessionSource = "opencode" | "sketchi";
 interface SessionPreview {
   appState: Record<string, unknown>;
   elements: Record<string, unknown>[];
+  files?: Record<string, unknown>;
 }
 
 interface CloudDiagram {
diff --git a/apps/web/src/components/diagram-studio/chat-sidebar.tsx b/apps/web/src/components/diagram-studio/chat-sidebar.tsx
index 6e4a7f7..4cab1ef 100644
--- a/apps/web/src/components/diagram-studio/chat-sidebar.tsx
+++ b/apps/web/src/components/diagram-studio/chat-sidebar.tsx
@@ -4,6 +4,8 @@ import {
   AlertTriangle,
   ArrowDown,
   Loader2,
+  PanelRightClose,
+  PanelRightOpen,
   Send,
   Square,
   Wrench,
@@ -21,6 +23,7 @@ import {
 import { Button } from "@/components/ui/button";
 
 const DRAFT_KEY_PREFIX = "sketchi.diagramDraft.v1";
+const SIDEBAR_COLLAPSED_KEY = "sketchi.diagramChatSidebarCollapsed.v1";
 const AUTO_SCROLL_BOTTOM_OFFSET_PX = 32;
 
 type RunStatus =
@@ -153,6 +156,7 @@ export function ChatSidebar({
 }: ChatSidebarProps) {
   const [input, setInput] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
   const [showScrollToLatest, setShowScrollToLatest] = useState(false);
 
   const isCanvasEmpty = nonDeletedElementCount === 0;
@@ -172,6 +176,26 @@ export function ChatSidebar({
     return `${messages.length}:${last.messageId}:${last.updatedAt}:${last.content.length}:${last.status ?? ""}`;
   }, [messages]);
 
+  useEffect(() => {
+    try {
+      setIsCollapsed(localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === "1");
+    } catch {
+      // ignore localStorage failures
+    }
+  }, []);
+
+  useEffect(() => {
+    try {
+      if (isCollapsed) {
+        localStorage.setItem(SIDEBAR_COLLAPSED_KEY, "1");
+      } else {
+        localStorage.removeItem(SIDEBAR_COLLAPSED_KEY);
+      }
+    } catch {
+      // ignore localStorage failures
+    }
+  }, [isCollapsed]);
+
   useEffect(() => {
     const key = draftStorageKey(sessionId);
     try {
@@ -300,13 +324,58 @@ export function ChatSidebar({
     });
   }, []);
 
+  if (isCollapsed) {
+    return (
+      <aside
+        className="flex h-full w-14 min-w-14 flex-col items-center border-l bg-background"
+        data-testid="diagram-chat-sidebar"
+      >
+        <div className="flex w-full justify-center border-b px-2 py-3">
+          <Button
+            aria-label="Expand AI sidebar"
+            onClick={() => setIsCollapsed(false)}
+            size="icon-sm"
+            title="Expand AI sidebar"
+            type="button"
+            variant="ghost"
+          >
+            <PanelRightOpen className="size-4" />
+          </Button>
+        </div>
+
+        <div className="flex flex-1 flex-col items-center justify-center gap-3 text-muted-foreground">
+          {getStatusIcon(activeStatus, runActive)}
+          <span className="-rotate-90 select-none font-medium text-[10px] uppercase tracking-[0.24em]">
+            AI
+          </span>
+          {showCompletionPulse ? (
+            <span className="size-2 rounded-full bg-emerald-500" />
+          ) : null}
+        </div>
+      </aside>
+    );
+  }
+
   return (
     <aside
       className="flex h-full w-96 min-w-80 max-w-[32rem] flex-col border-l bg-background"
       data-testid="diagram-chat-sidebar"
     >
-      <header className="border-b px-4 py-3" data-testid="diagram-chat-header">
+      <header
+        className="flex items-center justify-between gap-2 border-b px-4 py-3"
+        data-testid="diagram-chat-header"
+      >
         <h2 className="font-semibold text-sm">AI Assistant</h2>
+        <Button
+          aria-label="Collapse AI sidebar"
+          onClick={() => setIsCollapsed(true)}
+          size="icon-sm"
+          title="Collapse AI sidebar"
+          type="button"
+          variant="ghost"
+        >
+          <PanelRightClose className="size-4" />
+        </Button>
       </header>
 
       {!isCanvasEmpty && (
diff --git a/apps/web/src/components/diagram-studio/diagram-list-item.tsx b/apps/web/src/components/diagram-studio/diagram-list-item.tsx
index ce1a2f1..8b78e39 100644
--- a/apps/web/src/components/diagram-studio/diagram-list-item.tsx
+++ b/apps/web/src/components/diagram-studio/diagram-list-item.tsx
@@ -20,6 +20,7 @@ export interface DiagramListCard {
   previewScene: {
     appState: Record<string, unknown>;
     elements: Record<string, unknown>[];
+    files?: Record<string, unknown>;
   } | null;
   sessionId: string;
   source: DiagramListSource;
@@ -193,6 +194,7 @@ function DiagramTitleEditor({
         value={value}
       />
       <Button
+        aria-label="Save diagram title"
         disabled={isSavingTitle}
         onClick={(event) => {
           event.preventDefault();
@@ -205,6 +207,7 @@ function DiagramTitleEditor({
         <Check className="size-3.5" />
       </Button>
       <Button
+        aria-label="Cancel renaming diagram"
         disabled={isSavingTitle}
         onClick={(event) => {
           event.preventDefault();
@@ -220,6 +223,78 @@ function DiagramTitleEditor({
   );
 }
 
+function DiagramCardContent({
+  contextLabel,
+  createdLabel,
+  item,
+  originLabel,
+  title,
+  typeLabel,
+  updatedLabel,
+}: {
+  contextLabel: string;
+  createdLabel: string | null;
+  item: DiagramListCard;
+  originLabel: string;
+  title: React.ReactNode;
+  typeLabel: string | null;
+  updatedLabel: string | null;
+}) {
+  return (
+    <div className="flex flex-col gap-3 p-3 sm:flex-row sm:items-stretch sm:gap-4 sm:p-4">
+      <div className="order-2 min-w-0 flex-1 sm:order-1">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0 space-y-1.5">
+            {title}
+
+            <div className="flex flex-wrap items-center gap-2">
+              <SourceBadge source={item.source} />
+              {typeLabel ? (
+                <span className="rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">
+                  {typeLabel}
+                </span>
+              ) : null}
+            </div>
+          </div>
+        </div>
+
+        <p className="mt-2 line-clamp-1 text-muted-foreground text-sm">
+          {contextLabel}
+        </p>
+
+        <div className="mt-2 flex flex-wrap items-center gap-3 text-muted-foreground text-xs">
+          {updatedLabel ? (
+            <span className="inline-flex items-center gap-1">
+              <Clock className="size-3" />
+              Updated {updatedLabel}
+            </span>
+          ) : null}
+          {createdLabel ? (
+            <span className="inline-flex items-center gap-1">
+              <CalendarClock className="size-3" />
+              Created {createdLabel}
+            </span>
+          ) : null}
+          {item.latestSceneVersion === null ? null : (
+            <span>v{item.latestSceneVersion}</span>
+          )}
+          <span>{originLabel}</span>
+        </div>
+
+        <div className="mt-2 flex items-center gap-2">
+          <span className="inline-flex items-center rounded-md border border-border px-2 py-1 font-medium text-xs transition-colors group-hover:bg-muted">
+            Open Diagram
+          </span>
+        </div>
+      </div>
+
+      <div className="order-1 h-28 overflow-hidden rounded-xl border bg-muted/20 sm:order-2 sm:h-auto sm:w-56">
+        <DiagramScenePreview scene={item.hasScene ? item.previewScene : null} />
+      </div>
+    </div>
+  );
+}
+
 export function DiagramListItem({
   editingTitle,
   isEditing,
@@ -241,109 +316,83 @@ export function DiagramListItem({
 
   return (
     <li
-      className="group rounded-2xl border-2 bg-card shadow-sm transition-colors hover:bg-muted/20"
+      className="group relative rounded-2xl border-2 bg-card shadow-sm transition-colors hover:bg-muted/20"
       data-testid="diagram-recents-item"
       key={item.sessionId}
     >
-      <div className="flex flex-col gap-3 p-3 sm:flex-row sm:items-stretch sm:gap-4 sm:p-4">
-        <div className="order-2 min-w-0 flex-1 sm:order-1">
-          <div className="flex items-start justify-between gap-3">
-            <div className="min-w-0 space-y-1.5">
-              {isEditing ? (
-                <DiagramTitleEditor
-                  isSavingTitle={isSavingTitle}
-                  onCancel={onCancelRename}
-                  onChange={onEditingTitleChange}
-                  onSave={() => onSaveRename(item.sessionId)}
-                  value={editingTitle}
-                />
-              ) : (
-                <h3 className="truncate font-semibold text-base leading-tight">
-                  {item.title}
-                </h3>
-              )}
-
-              <div className="flex flex-wrap items-center gap-2">
-                <SourceBadge source={item.source} />
-                {typeLabel ? (
-                  <span className="rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">
-                    {typeLabel}
-                  </span>
-                ) : null}
-              </div>
-            </div>
-
-            {canRename ? (
-              <Button
-                className="text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
-                onClick={(event) => {
-                  event.preventDefault();
-                  onStartRename(item);
-                }}
-                size="icon-xs"
-                type="button"
-                variant="ghost"
-              >
-                <Pencil className="size-3" />
-              </Button>
-            ) : null}
-          </div>
-
-          <p className="mt-2 line-clamp-1 text-muted-foreground text-sm">
-            {contextLabel}
-          </p>
-
-          <div className="mt-2 flex flex-wrap items-center gap-3 text-muted-foreground text-xs">
-            {updatedLabel ? (
-              <span className="inline-flex items-center gap-1">
-                <Clock className="size-3" />
-                Updated {updatedLabel}
-              </span>
-            ) : null}
-            {createdLabel ? (
-              <span className="inline-flex items-center gap-1">
-                <CalendarClock className="size-3" />
-                Created {createdLabel}
-              </span>
-            ) : null}
-            {item.latestSceneVersion === null ? null : (
-              <span>v{item.latestSceneVersion}</span>
-            )}
-            <span>{originLabel}</span>
-          </div>
+      {canRename ? (
+        <Button
+          aria-label={`Rename ${item.title}`}
+          className="absolute top-3 right-3 z-10 text-muted-foreground opacity-0 transition-opacity focus-visible:opacity-100 group-hover:opacity-100"
+          onClick={(event) => {
+            event.preventDefault();
+            onStartRename(item);
+          }}
+          size="icon-xs"
+          type="button"
+          variant="ghost"
+        >
+          <Pencil className="size-3" />
+        </Button>
+      ) : null}
 
-          <div className="mt-2 flex items-center gap-2">
-            <Link
-              className="inline-flex items-center rounded-md border border-border px-2 py-1 font-medium text-xs transition-colors hover:bg-muted"
-              href={`/diagrams/${item.sessionId}` as never}
-              onClick={() => onOpen(item.sessionId)}
-            >
-              Open diagram
-            </Link>
-
-            {item.localOnly ? (
-              <Button
-                className="text-muted-foreground"
-                onClick={(event) => {
-                  event.preventDefault();
-                  onRemoveLocalRecent(item.sessionId);
-                }}
-                size="icon-xs"
-                type="button"
-                variant="ghost"
-              >
-                <X className="size-3" />
-              </Button>
-            ) : null}
-          </div>
-        </div>
+      {item.localOnly ? (
+        <Button
+          aria-label={`Remove local recent ${item.title}`}
+          className="absolute top-3 right-3 z-10 text-muted-foreground"
+          onClick={(event) => {
+            event.preventDefault();
+            onRemoveLocalRecent(item.sessionId);
+          }}
+          size="icon-xs"
+          type="button"
+          variant="ghost"
+        >
+          <X className="size-3" />
+        </Button>
+      ) : null}
 
-        <div className="order-1 h-28 overflow-hidden rounded-xl border bg-muted/20 sm:order-2 sm:h-auto sm:w-56">
-          <DiagramScenePreview
-            scene={item.hasScene ? item.previewScene : null}
+      {isEditing ? (
+        <DiagramCardContent
+          contextLabel={contextLabel}
+          createdLabel={createdLabel}
+          item={item}
+          originLabel={originLabel}
+          title={
+            <DiagramTitleEditor
+              isSavingTitle={isSavingTitle}
+              onCancel={onCancelRename}
+              onChange={onEditingTitleChange}
+              onSave={() => onSaveRename(item.sessionId)}
+              value={editingTitle}
+            />
+          }
+          typeLabel={typeLabel}
+          updatedLabel={updatedLabel}
+        />
+      ) : (
+        <Link
+          aria-label={`Open diagram ${item.title}`}
+          className="block rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          data-testid="diagram-recents-open-link"
+          href={`/diagrams/${item.sessionId}` as never}
+          onClick={() => onOpen(item.sessionId)}
+        >
+          <DiagramCardContent
+            contextLabel={contextLabel}
+            createdLabel={createdLabel}
+            item={item}
+            originLabel={originLabel}
+            title={
+              <h3 className="truncate font-semibold text-base leading-tight">
+                {item.title}
+              </h3>
+            }
+            typeLabel={typeLabel}
+            updatedLabel={updatedLabel}
           />
-        </div>
-      </div>
+        </Link>
+      )}
     </li>
   );
 }
diff --git a/apps/web/src/components/diagram-studio/diagram-scene-preview.tsx b/apps/web/src/components/diagram-studio/diagram-scene-preview.tsx
index 8794905..b19238d 100644
--- a/apps/web/src/components/diagram-studio/diagram-scene-preview.tsx
+++ b/apps/web/src/components/diagram-studio/diagram-scene-preview.tsx
@@ -1,241 +1,86 @@
 "use client";
 
-import { Image as ImageIcon } from "lucide-react";
-import { useMemo } from "react";
+import { Image as ImageIcon, Loader2 } from "lucide-react";
+import Image from "next/image";
+import { useEffect, useState } from "react";
 
 interface ScenePreview {
   appState: Record<string, unknown>;
   elements: Record<string, unknown>[];
+  files?: Record<string, unknown>;
 }
 
 interface DiagramScenePreviewProps {
   scene: ScenePreview | null;
 }
 
-interface Transform {
-  offsetX: number;
-  offsetY: number;
-  scale: number;
-}
-
 const CANVAS_HEIGHT = 180;
 const CANVAS_WIDTH = 320;
-const MAX_RENDERED_ELEMENTS = 120;
-const PADDING = 12;
-
-function asNumber(value: unknown): number | null {
-  if (typeof value !== "number" || Number.isNaN(value)) {
-    return null;
-  }
-  return value;
-}
-
-function asString(value: unknown): string | null {
-  if (typeof value !== "string") {
-    return null;
-  }
-  const normalized = value.trim();
-  return normalized.length > 0 ? normalized : null;
-}
-
-function getElementBounds(element: Record<string, unknown>) {
-  const x = asNumber(element.x);
-  const y = asNumber(element.y);
-  if (x === null || y === null) {
-    return null;
-  }
 
-  const points = Array.isArray(element.points)
-    ? (element.points as unknown[])
-    : null;
-  if (points && points.length > 1) {
-    let minX = x;
-    let minY = y;
-    let maxX = x;
-    let maxY = y;
-
-    for (const point of points) {
-      if (!Array.isArray(point) || point.length < 2) {
-        continue;
-      }
-
-      const pointX = asNumber(point[0]);
-      const pointY = asNumber(point[1]);
-      if (pointX === null || pointY === null) {
-        continue;
-      }
-
-      minX = Math.min(minX, x + pointX);
-      minY = Math.min(minY, y + pointY);
-      maxX = Math.max(maxX, x + pointX);
-      maxY = Math.max(maxY, y + pointY);
+export function DiagramScenePreview({ scene }: DiagramScenePreviewProps) {
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [isRendering, setIsRendering] = useState(false);
+
+  useEffect(() => {
+    if (!(scene && scene.elements.length > 0)) {
+      setPreviewUrl(null);
+      setIsRendering(false);
+      return;
     }
 
-    return { maxX, maxY, minX, minY };
-  }
-
-  const width = asNumber(element.width) ?? 0;
-  const height = asNumber(element.height) ?? 0;
-  return {
-    maxX: Math.max(x, x + width),
-    maxY: Math.max(y, y + height),
-    minX: Math.min(x, x + width),
-    minY: Math.min(y, y + height),
-  };
-}
-
-function createTransform(
-  elements: Record<string, unknown>[]
-): Transform | null {
-  const bounds = elements
-    .map((element) => getElementBounds(element))
-    .filter((bound): bound is NonNullable<typeof bound> => bound !== null);
-
-  if (bounds.length === 0) {
-    return null;
-  }
-
-  const minX = Math.min(...bounds.map((bound) => bound.minX));
-  const minY = Math.min(...bounds.map((bound) => bound.minY));
-  const maxX = Math.max(...bounds.map((bound) => bound.maxX));
-  const maxY = Math.max(...bounds.map((bound) => bound.maxY));
-
-  const worldWidth = Math.max(1, maxX - minX);
-  const worldHeight = Math.max(1, maxY - minY);
-  const scale = Math.min(
-    (CANVAS_WIDTH - PADDING * 2) / worldWidth,
-    (CANVAS_HEIGHT - PADDING * 2) / worldHeight
-  );
-
-  const contentWidth = worldWidth * scale;
-  const contentHeight = worldHeight * scale;
-  return {
-    offsetX: (CANVAS_WIDTH - contentWidth) / 2 - minX * scale,
-    offsetY: (CANVAS_HEIGHT - contentHeight) / 2 - minY * scale,
-    scale,
-  };
-}
-
-function getElementKey(
-  element: Record<string, unknown>,
-  index: number
-): string {
-  const elementId = asString(element.id);
-  if (elementId) {
-    return elementId;
-  }
-  return `element-${index}-${asString(element.type) ?? "shape"}`;
-}
-
-function renderPolyline(input: {
-  element: Record<string, unknown>;
-  key: string;
-  opacity: number;
-  strokeColor: string;
-  strokeWidth: number;
-  toX: (value: number) => number;
-  toY: (value: number) => number;
-}) {
-  const x = asNumber(input.element.x);
-  const y = asNumber(input.element.y);
-  if (x === null || y === null) {
-    return null;
-  }
+    let isCancelled = false;
+    let objectUrl: string | null = null;
+    setPreviewUrl(null);
+
+    const renderPreview = async () => {
+      setIsRendering(true);
+      try {
+        const { exportToSvg } = await import("@excalidraw/excalidraw");
+        const svg = await exportToSvg({
+          elements: scene.elements as Parameters<
+            typeof exportToSvg
+          >[0]["elements"],
+          appState: {
+            ...scene.appState,
+            exportBackground: true,
+          } as Parameters<typeof exportToSvg>[0]["appState"],
+          files: (scene.files ?? {}) as Parameters<
+            typeof exportToSvg
+          >[0]["files"],
+          exportPadding: 16,
+        });
 
-  const points = Array.isArray(input.element.points)
-    ? (input.element.points as unknown[])
-    : [];
-  const mappedPoints = points
-    .map((point) => {
-      if (!Array.isArray(point) || point.length < 2) {
-        return null;
-      }
+        objectUrl = URL.createObjectURL(
+          new Blob([svg.outerHTML], { type: "image/svg+xml" })
+        );
 
-      const pointX = asNumber(point[0]);
-      const pointY = asNumber(point[1]);
-      if (pointX === null || pointY === null) {
-        return null;
+        if (!isCancelled) {
+          setPreviewUrl(objectUrl);
+        } else if (objectUrl) {
+          URL.revokeObjectURL(objectUrl);
+        }
+      } catch {
+        if (!isCancelled) {
+          setPreviewUrl(null);
+        }
+      } finally {
+        if (!isCancelled) {
+          setIsRendering(false);
+        }
       }
+    };
 
-      return `${input.toX(x + pointX)},${input.toY(y + pointY)}`;
-    })
-    .filter((point): point is string => point !== null);
-
-  if (mappedPoints.length < 2) {
-    return null;
-  }
-
-  return (
-    <polyline
-      fill="none"
-      key={input.key}
-      opacity={input.opacity}
-      points={mappedPoints.join(" ")}
-      stroke={input.strokeColor}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={input.strokeWidth}
-    />
-  );
-}
-
-function renderRectangle(input: {
-  element: Record<string, unknown>;
-  fill: string;
-  key: string;
-  opacity: number;
-  strokeColor: string;
-  strokeWidth: number;
-  transform: Transform;
-}) {
-  const x = asNumber(input.element.x);
-  const y = asNumber(input.element.y);
-  if (x === null || y === null) {
-    return null;
-  }
-
-  const width = Math.max(1, asNumber(input.element.width) ?? 1);
-  const height = Math.max(1, asNumber(input.element.height) ?? 1);
-
-  const scaledX = x * input.transform.scale + input.transform.offsetX;
-  const scaledY = y * input.transform.scale + input.transform.offsetY;
-  const scaledWidth = width * input.transform.scale;
-  const scaledHeight = height * input.transform.scale;
-
-  return (
-    <rect
-      fill={input.fill}
-      height={scaledHeight}
-      key={input.key}
-      opacity={input.opacity}
-      rx={3}
-      stroke={input.strokeColor}
-      strokeWidth={input.strokeWidth}
-      width={scaledWidth}
-      x={scaledX}
-      y={scaledY}
-    />
-  );
-}
-
-export function DiagramScenePreview({ scene }: DiagramScenePreviewProps) {
-  const previewElements = useMemo(
-    () =>
-      scene?.elements
-        ?.filter((element) => element?.isDeleted !== true)
-        .slice(0, MAX_RENDERED_ELEMENTS) ?? [],
-    [scene]
-  );
+    renderPreview().catch(() => undefined);
 
-  const transform = useMemo(
-    () => createTransform(previewElements),
-    [previewElements]
-  );
-
-  const backgroundColor =
-    asString(scene?.appState?.viewBackgroundColor) ?? "transparent";
+    return () => {
+      isCancelled = true;
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [scene]);
 
-  if (!(scene && previewElements.length > 0 && transform)) {
+  if (!(scene && scene.elements.length > 0)) {
     return (
       <div className="flex h-full w-full items-center justify-center bg-muted/30">
         <ImageIcon className="size-6 text-muted-foreground/40" />
@@ -243,61 +88,27 @@ export function DiagramScenePreview({ scene }: DiagramScenePreviewProps) {
     );
   }
 
-  const toX = (value: number) => value * transform.scale + transform.offsetX;
-  const toY = (value: number) => value * transform.scale + transform.offsetY;
+  if (!previewUrl) {
+    return (
+      <div className="flex h-full w-full items-center justify-center bg-muted/30">
+        {isRendering ? (
+          <Loader2 className="size-6 animate-spin text-muted-foreground/40" />
+        ) : (
+          <ImageIcon className="size-6 text-muted-foreground/40" />
+        )}
+      </div>
+    );
+  }
 
   return (
-    <svg
-      aria-label="Diagram preview"
-      className="h-full w-full"
-      preserveAspectRatio="xMidYMid meet"
-      role="img"
-      viewBox={`0 0 ${CANVAS_WIDTH} ${CANVAS_HEIGHT}`}
-    >
-      <rect
-        fill={backgroundColor}
-        height={CANVAS_HEIGHT}
-        width={CANVAS_WIDTH}
-        x={0}
-        y={0}
-      />
-
-      {previewElements.map((element, index) => {
-        const type = asString(element.type) ?? "rectangle";
-        const strokeColor = asString(element.strokeColor) ?? "#757575";
-        const fillColor = asString(element.backgroundColor) ?? "transparent";
-        const opacity = Math.max(
-          0.1,
-          Math.min(1, (asNumber(element.opacity) ?? 100) / 100)
-        );
-        const strokeWidth = Math.max(
-          0.5,
-          (asNumber(element.strokeWidth) ?? 1) * Math.max(0.8, transform.scale)
-        );
-        const key = getElementKey(element, index);
-
-        if (type === "line" || type === "arrow" || type === "draw") {
-          return renderPolyline({
-            element,
-            key,
-            opacity,
-            strokeColor,
-            strokeWidth,
-            toX,
-            toY,
-          });
-        }
-
-        return renderRectangle({
-          element,
-          fill: fillColor,
-          key,
-          opacity,
-          strokeColor,
-          strokeWidth,
-          transform,
-        });
-      })}
-    </svg>
+    <Image
+      alt=""
+      className="h-full w-full object-contain"
+      height={CANVAS_HEIGHT}
+      loading="lazy"
+      src={previewUrl}
+      unoptimized
+      width={CANVAS_WIDTH}
+    />
   );
 }
diff --git a/apps/web/src/components/diagram-studio/excalidraw-wrapper.tsx b/apps/web/src/components/diagram-studio/excalidraw-wrapper.tsx
index 3e160cf..2892a34 100644
--- a/apps/web/src/components/diagram-studio/excalidraw-wrapper.tsx
+++ b/apps/web/src/components/diagram-studio/excalidraw-wrapper.tsx
@@ -2,6 +2,7 @@
 
 import { Excalidraw } from "@excalidraw/excalidraw";
 import type {
+  BinaryFiles,
   ExcalidrawImperativeAPI,
   ExcalidrawInitialDataState,
 } from "@excalidraw/excalidraw/types";
@@ -12,10 +13,12 @@ interface ExcalidrawWrapperProps {
   initialScene?: {
     elements: readonly Record<string, unknown>[];
     appState: Record<string, unknown>;
+    files?: Record<string, unknown>;
   } | null;
   onChange?: (
     elements: readonly Record<string, unknown>[],
-    appState: Record<string, unknown>
+    appState: Record<string, unknown>,
+    files: BinaryFiles
   ) => void;
   onReady?: (api: ExcalidrawImperativeAPI) => void;
   suppressOnChangeRef?: React.RefObject<boolean>;
@@ -35,6 +38,7 @@ export default function ExcalidrawWrapper({
           initialScene.elements as ExcalidrawInitialDataState["elements"],
         appState:
           initialScene.appState as ExcalidrawInitialDataState["appState"],
+        files: initialScene.files as ExcalidrawInitialDataState["files"],
       }
     : undefined;
 
@@ -49,13 +53,14 @@ export default function ExcalidrawWrapper({
           onReady?.(api);
         }}
         initialData={initialData}
-        onChange={(elements, appState) => {
+        onChange={(elements, appState, files) => {
           if (suppressOnChangeRef?.current) {
             return;
           }
           onChange?.(
             elements as unknown as readonly Record<string, unknown>[],
-            appState as unknown as Record<string, unknown>
+            appState as unknown as Record<string, unknown>,
+            files
           );
         }}
         theme={resolvedTheme === "dark" ? "dark" : "light"}
diff --git a/apps/web/src/components/diagram-studio/import-export-toolbar.tsx b/apps/web/src/components/diagram-studio/import-export-toolbar.tsx
index e2c0d9c..83595a8 100644
--- a/apps/web/src/components/diagram-studio/import-export-toolbar.tsx
+++ b/apps/web/src/components/diagram-studio/import-export-toolbar.tsx
@@ -1,6 +1,9 @@
 "use client";
 
-import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
+import type {
+  BinaryFiles,
+  ExcalidrawImperativeAPI,
+} from "@excalidraw/excalidraw/types";
 import { api } from "@sketchi/backend/convex/_generated/api";
 import { useAction } from "convex/react";
 import {
@@ -29,12 +32,11 @@ import { Input } from "@/components/ui/input";
 
 interface ImportExportToolbarProps {
   excalidrawApi: ExcalidrawImperativeAPI | null;
-  knownVersionRef: React.RefObject<number>;
   saveScene: (
     elements: readonly Record<string, unknown>[],
-    appState: Record<string, unknown>
+    appState: Record<string, unknown>,
+    files?: Record<string, unknown>
   ) => Promise<void>;
-  sessionId: string;
   suppressOnChangeRef: React.RefObject<boolean>;
 }
 
@@ -78,17 +80,21 @@ export function ImportExportToolbar({
 
     try {
       const result = await parseDiagram({ shareUrl: url });
+      const elements = result.elements as readonly Record<string, unknown>[];
+      const appState = (result.appState ?? {}) as Record<string, unknown>;
 
       suppressOnChangeRef.current = true;
+      excalidrawApi.resetScene({ resetLoadingState: false });
 
       excalidrawApi.updateScene({
-        elements: result.elements as unknown as Parameters<
+        elements: elements as unknown as Parameters<
           typeof excalidrawApi.updateScene
         >[0]["elements"],
+        appState: appState as Parameters<
+          typeof excalidrawApi.updateScene
+        >[0]["appState"],
       });
 
-      const elements = result.elements as readonly Record<string, unknown>[];
-      const appState = (result.appState ?? {}) as Record<string, unknown>;
       await saveScene(elements, appState);
 
       setImportState({ status: "success" });
@@ -154,7 +160,7 @@ export function ImportExportToolbar({
     }
   }, [excalidrawApi, shareDiagram]);
 
-  const handleExportExcalidraw = useCallback(() => {
+  const handleExportExcalidraw = useCallback(async () => {
     if (!excalidrawApi) {
       return;
     }
@@ -162,23 +168,16 @@ export function ImportExportToolbar({
     setExportState({ status: "loading", format: "excalidraw" });
 
     try {
+      const { serializeAsJSON } = await import("@excalidraw/excalidraw");
       const elements = excalidrawApi.getSceneElements();
       const appState = excalidrawApi.getAppState();
-
-      const data = {
-        type: "excalidraw",
-        version: 2,
-        source: "sketchi",
+      const files = excalidrawApi.getFiles();
+      const json = serializeAsJSON(
         elements,
-        appState: {
-          viewBackgroundColor:
-            (appState as Record<string, unknown>).viewBackgroundColor ??
-            "#ffffff",
-          gridSize: (appState as Record<string, unknown>).gridSize ?? null,
-        },
-      };
-
-      const json = JSON.stringify(data, null, 2);
+        appState,
+        files as BinaryFiles,
+        "local"
+      );
       const blob = new Blob([json], { type: "application/json" });
       const url = URL.createObjectURL(blob);
 
diff --git a/apps/web/src/lib/orpc/router.ts b/apps/web/src/lib/orpc/router.ts
index 2197923..44149d5 100644
--- a/apps/web/src/lib/orpc/router.ts
+++ b/apps/web/src/lib/orpc/router.ts
@@ -727,6 +727,7 @@ const seedSessionInputSchema = z.object({
   sessionId: z.string().optional(),
   elements: z.array(z.any()),
   appState: z.record(z.string(), z.any()).optional(),
+  files: z.record(z.string(), z.any()).optional(),
   expectedVersion: z.number().int().min(0).optional(),
   traceId: z.string().optional(),
 });
@@ -736,6 +737,7 @@ JSON_SCHEMA_REGISTRY.add(seedSessionInputSchema, {
     {
       elements: exampleElements,
       appState: {},
+      files: {},
     },
   ],
 });
@@ -899,6 +901,7 @@ export const appRouter = {
             expectedVersion,
             elements: input.elements,
             appState: input.appState ?? {},
+            files: input.files,
           }
         );
 
diff --git a/packages/backend/convex/diagramSessions.test.ts b/packages/backend/convex/diagramSessions.test.ts
index 101161f..4dba680 100644
--- a/packages/backend/convex/diagramSessions.test.ts
+++ b/packages/backend/convex/diagramSessions.test.ts
@@ -104,6 +104,64 @@ describe("diagramSessions", () => {
     expect(session2?.latestScene?.elements).toHaveLength(2);
   });
 
+  test("setLatestScene persists files and list previews include referenced file payloads", async () => {
+    const { sessionId } = await authed.mutation(api.diagramSessions.create, {});
+    const fileId = "file-svg-1";
+    const files = {
+      [fileId]: {
+        id: fileId,
+        dataURL: "data:image/svg+xml;base64,PHN2Zz48L3N2Zz4=",
+        mimeType: "image/svg+xml",
+        created: 1,
+        lastRetrieved: 1,
+        status: "saved",
+      },
+      unused: {
+        id: "unused",
+        dataURL: "data:image/svg+xml;base64,PHN2Zz48L3N2Zz4=",
+        mimeType: "image/svg+xml",
+        created: 1,
+        lastRetrieved: 1,
+        status: "saved",
+      },
+    };
+
+    const result = await authed.mutation(api.diagramSessions.setLatestScene, {
+      sessionId,
+      expectedVersion: 0,
+      elements: [
+        {
+          id: "image-1",
+          type: "image",
+          x: 0,
+          y: 0,
+          width: 48,
+          height: 48,
+          fileId,
+        },
+      ],
+      appState: { viewBackgroundColor: "#ffffff" },
+      files,
+    });
+
+    expect(result.status).toBe("success");
+
+    const session = await authed.query(api.diagramSessions.get, { sessionId });
+    expect(session?.latestScene?.files).toEqual(files);
+
+    const listed = await authed.query(api.diagramSessions.listMine, {
+      limit: 10,
+      previewCount: 1,
+    });
+    const preview = listed.find(
+      (item) => item.sessionId === sessionId
+    )?.previewScene;
+
+    expect(preview?.files).toEqual({
+      [fileId]: files[fileId],
+    });
+  });
+
   test("setLatestScene conflict returns structured result without clobbering", async () => {
     const { sessionId } = await authed.mutation(api.diagramSessions.create, {});
 
diff --git a/packages/backend/convex/diagramSessions.ts b/packages/backend/convex/diagramSessions.ts
index d7338d5..d621d26 100644
--- a/packages/backend/convex/diagramSessions.ts
+++ b/packages/backend/convex/diagramSessions.ts
@@ -71,17 +71,23 @@ function hasRenderableElements(elements: unknown[]): boolean {
 function measureSceneBytes(scene: {
   elements: unknown[];
   appState: unknown;
+  files?: Record<string, unknown>;
 }): number {
   const json = JSON.stringify(scene);
   return new TextEncoder().encode(json).byteLength;
 }
 
-function validateSceneSize(scene: { elements: unknown[]; appState: unknown }):
+function validateSceneSize(scene: {
+  elements: unknown[];
+  appState: unknown;
+  files?: Record<string, unknown>;
+}):
   | {
       status: "ok";
       scene: {
         elements: unknown[];
         appState: Record<string, unknown>;
+        files?: Record<string, unknown>;
       };
     }
   | {
@@ -96,6 +102,7 @@ function validateSceneSize(scene: { elements: unknown[]; appState: unknown }):
   const normalizedScene = {
     elements: scene.elements,
     appState: filteredAppState,
+    ...(scene.files ? { files: scene.files } : {}),
   };
   const actualBytes = measureSceneBytes(normalizedScene);
   if (actualBytes > MAX_SCENE_BYTES) {
@@ -113,6 +120,40 @@ function validateSceneSize(scene: { elements: unknown[]; appState: unknown }):
   };
 }
 
+function pickSceneFilesForPreview(
+  elements: unknown[],
+  files: Record<string, unknown> | undefined
+): Record<string, unknown> | undefined {
+  if (!files) {
+    return undefined;
+  }
+
+  const usedFileIds = new Set<string>();
+  for (const element of elements) {
+    if (!(element && typeof element === "object")) {
+      continue;
+    }
+    const fileId = (element as { fileId?: unknown }).fileId;
+    if (typeof fileId === "string" && fileId.length > 0) {
+      usedFileIds.add(fileId);
+    }
+  }
+
+  if (usedFileIds.size === 0) {
+    return undefined;
+  }
+
+  const previewFiles: Record<string, unknown> = {};
+  for (const fileId of usedFileIds) {
+    const file = files[fileId];
+    if (file !== undefined) {
+      previewFiles[fileId] = file;
+    }
+  }
+
+  return Object.keys(previewFiles).length > 0 ? previewFiles : undefined;
+}
+
 function truncate(value: string, maxLength: number): string {
   if (value.length <= maxLength) {
     return value;
@@ -267,6 +308,10 @@ export const listMine = query({
                 MAX_PREVIEW_ELEMENTS
               ),
               appState: session.latestScene.appState,
+              files: pickSceneFilesForPreview(
+                session.latestScene.elements.slice(0, MAX_PREVIEW_ELEMENTS),
+                session.latestScene.files
+              ),
             }
           : null;
 
@@ -332,8 +377,12 @@ export const setLatestScene = mutation({
     expectedVersion: v.number(),
     elements: v.array(v.any()),
     appState: v.record(v.string(), v.any()),
+    files: v.optional(v.record(v.string(), v.any())),
   },
-  handler: async (ctx, { sessionId, expectedVersion, elements, appState }) => {
+  handler: async (
+    ctx,
+    { sessionId, expectedVersion, elements, appState, files }
+  ) => {
     const { user, isAdmin } = await ensureViewerUser(ctx);
 
     const session = await ctx.db
@@ -359,6 +408,7 @@ export const setLatestScene = mutation({
     const sizeChecked = validateSceneSize({
       elements,
       appState: appState as Record<string, unknown>,
+      files: files as Record<string, unknown> | undefined,
     });
     if (sizeChecked.status !== "ok") {
       return {
@@ -394,11 +444,20 @@ export const internalSetLatestSceneFromThreadRun = internalMutation({
     expectedVersion: v.number(),
     elements: v.array(v.any()),
     appState: v.record(v.string(), v.any()),
+    files: v.optional(v.record(v.string(), v.any())),
     diagramType: v.optional(v.string()),
   },
   handler: async (
     ctx,
-    { sessionId, ownerUserId, expectedVersion, elements, appState, diagramType }
+    {
+      sessionId,
+      ownerUserId,
+      expectedVersion,
+      elements,
+      appState,
+      files,
+      diagramType,
+    }
   ) => {
     const session = await ctx.db
       .query("diagramSessions")
@@ -429,6 +488,7 @@ export const internalSetLatestSceneFromThreadRun = internalMutation({
     const sizeChecked = validateSceneSize({
       elements,
       appState: appState as Record<string, unknown>,
+      files: files as Record<string, unknown> | undefined,
     });
     if (sizeChecked.status !== "ok") {
       return {
diff --git a/packages/backend/convex/schema.ts b/packages/backend/convex/schema.ts
index 860dd09..b2d472d 100644
--- a/packages/backend/convex/schema.ts
+++ b/packages/backend/convex/schema.ts
@@ -98,6 +98,7 @@ export default defineSchema({
       v.object({
         elements: v.array(v.any()),
         appState: v.any(),
+        files: v.optional(v.record(v.string(), v.any())),
       })
     ),
     latestSceneVersion: v.number(),
diff --git a/packages/opencode-excalidraw/src/index.ts b/packages/opencode-excalidraw/src/index.ts
index 9848399..3476a3b 100644
--- a/packages/opencode-excalidraw/src/index.ts
+++ b/packages/opencode-excalidraw/src/index.ts
@@ -72,6 +72,7 @@ interface SessionSeedResponse {
 interface ExcalidrawSceneSeed {
   appState: Record<string, unknown>;
   elements: Record<string, unknown>[];
+  files?: Record<string, unknown>;
 }
 
 function toBearerHeaderValue(value: string): string {
@@ -291,6 +292,7 @@ async function seedSessionFromScene(input: {
         sessionId: input.sessionId,
         elements: input.scene.elements,
         appState: input.scene.appState,
+        files: input.scene.files,
         traceId: input.traceId,
       }),
     },
@@ -306,6 +308,7 @@ async function resolveSceneSeed(input: {
   excalidraw?: {
     elements: Record<string, unknown>[];
     appState?: Record<string, unknown>;
+    files?: Record<string, unknown>;
   };
   excalidrawPath?: string;
   shareUrl?: string;
@@ -315,6 +318,7 @@ async function resolveSceneSeed(input: {
     return {
       elements: input.excalidraw.elements,
       appState: input.excalidraw.appState ?? {},
+      files: input.excalidraw.files,
     };
   }
 
@@ -326,6 +330,7 @@ async function resolveSceneSeed(input: {
     return {
       elements: parsed.elements,
       appState: parsed.appState ?? {},
+      files: parsed.files,
     };
   }
 
diff --git a/packages/opencode-excalidraw/src/lib/excalidraw.ts b/packages/opencode-excalidraw/src/lib/excalidraw.ts
index 161ffe1..a159437 100644
--- a/packages/opencode-excalidraw/src/lib/excalidraw.ts
+++ b/packages/opencode-excalidraw/src/lib/excalidraw.ts
@@ -18,6 +18,7 @@ const SHAPE_TYPES = new Set([
 export interface ExcalidrawFile {
   appState: Record<string, unknown>;
   elements: Record<string, unknown>[];
+  files?: Record<string, unknown>;
 }
 
 interface Bounds {
@@ -63,6 +64,7 @@ export async function readExcalidrawFile(
   return {
     elements: data.elements,
     appState: data.appState ?? {},
+    files: data.files,
   };
 }