Store user images as IndexedDB assets by content hash

ARCHITECTURE.md

@@ -130,6 +130,7 @@ Current behavior at a high level:
 - IndexedDB store and index definitions are now declared in one schema manifest in `src/services/storage/indexedDbSchema.ts`
 - schema migration markers now live in a dedicated IndexedDB schema metadata store instead of sharing the persisted Zustand state store
 - local-first chat persistence now uses document-scoped IndexedDB indexes instead of full chat-message store scans
+- user images/icons can be stored by content-hash ref in the IndexedDB `assets` store (`assetStoreV1` rollout flag) instead of embedding multi-MB data URLs into every document/history/snapshot copy; nodes hold `imageAssetId` / `iconAssetId` and resolve display URLs at render time
 
 Important constraint:
 

src/components/CustomNode.tsx

@@ -12,6 +12,7 @@ import { NodeTransformControls } from './NodeTransformControls';
 import { useActiveNodeSelection } from './useActiveNodeSelection';
 import { useTranslation } from 'react-i18next';
 import { useProviderShapePreview } from '@/hooks/useProviderShapePreview';
+import { useResolvedMediaUrl } from '@/hooks/useResolvedMediaUrl';
 import { useShiftHeld } from '@/hooks/useShiftHeld';
 import { NodeShapeSVG } from './NodeShapeSVG';
 import { DiffBadge, LintViolationBadge } from './NodeBadges';
@@ -73,10 +74,12 @@ function CustomNode(props: LegacyNodeProps<NodeData>): React.ReactElement {
   const explicitHeightPx = getNumericNodeDimension(explicitHeight);
   const measuredHeight = (props as { height?: number }).height;
   const shiftHeld = useShiftHeld(Boolean(selected));
+  const resolvedUploadedIconUrl = useResolvedMediaUrl(data, 'image');
+  const resolvedCustomIconUrl = useResolvedMediaUrl(data, 'icon');
   const resolvedAssetIconUrl = useProviderShapePreview(
     typeof data.archIconPackId === 'string' ? data.archIconPackId : undefined,
     typeof data.archIconShapeId === 'string' ? data.archIconShapeId : undefined,
-    typeof data.customIconUrl === 'string' ? data.customIconUrl : undefined
+    resolvedCustomIconUrl
   );
   const designSystem = useDesignSystem();
   const isActiveSelected = useActiveNodeSelection(Boolean(selected));
@@ -107,7 +110,12 @@ function CustomNode(props: LegacyNodeProps<NodeData>): React.ReactElement {
   const subLabelSizeClass = fontSizeClassFor(subLabelFontSize);
   const subLabelFontSizeStyle = subLabelIsNumericSize ? { fontSize: subLabelFontSize + 'px' } : {};
   const hasProviderIcon = Boolean(resolvedAssetIconUrl) || Boolean(data.archIconPackId);
-  const hasIcon = Boolean(iconName) || Boolean(data.customIconUrl) || hasProviderIcon;
+  const hasIcon =
+    Boolean(iconName)
+    || Boolean(data.customIconUrl)
+    || Boolean(data.iconAssetId)
+    || Boolean(resolvedCustomIconUrl)
+    || hasProviderIcon;
   const hasLabel = Boolean(data.label?.trim());
   const hasSubLabel = Boolean(data.subLabel);
   const mermaidImportedNodeMetadata = readMermaidImportedNodeMetadataFromData(data);
@@ -294,7 +302,10 @@ function CustomNode(props: LegacyNodeProps<NodeData>): React.ReactElement {
           )}
 
           <CustomNodeContent
-            data={data}
+            data={{
+              ...data,
+              imageUrl: resolvedUploadedIconUrl ?? data.imageUrl,
+            }}
             hasIcon={hasIcon}
             hasSubLabel={hasSubLabel}
             resolvedAssetIconUrl={resolvedAssetIconUrl}

src/components/FlowEditorPanels.tsx

@@ -148,7 +148,7 @@ export interface CommandBarPanelProps {
   onAddSequence?: () => void;
   onAddClassNode?: () => void;
   onAddEntityNode?: () => void;
-  onAddImage: (imageUrl: string) => void;
+  onAddImage: (imageUrl: string, position?: { x: number; y: number }, imageAssetId?: string) => void;
   onAddBrowserWireframe: () => void;
   onAddMobileWireframe: () => void;
   onAddDomainLibraryItem?: (item: DomainLibraryItem) => void;

src/components/ImageNode.tsx

@@ -1,9 +1,12 @@
 import React, { memo } from 'react';
 import type { LegacyNodeProps } from '@/lib/reactflowCompat';
 import type { NodeData } from '@/lib/types';
+import { useResolvedMediaUrl } from '@/hooks/useResolvedMediaUrl';
 import { NodeChrome } from './NodeChrome';
 
 function ImageNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.ReactElement {
+    const imageSrc = useResolvedMediaUrl(data, 'image');
+
     return (
         <NodeChrome
             nodeId={id}
@@ -22,9 +25,9 @@ function ImageNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.Rea
                     transform: data.rotation ? `rotate(${data.rotation}deg)` : 'none',
                 }}
             >
-                {data.imageUrl ? (
+                {imageSrc ? (
                     <img
-                        src={data.imageUrl}
+                        src={imageSrc}
                         alt={data.label || 'Image Node'}
                         className="w-full h-full object-contain pointer-events-none select-none"
                     />

src/components/command-bar/types.ts

@@ -61,7 +61,7 @@ export interface CommandBarProps {
   onAddSequence?: () => void;
   onAddClassNode?: () => void;
   onAddEntityNode?: () => void;
-  onAddImage?: (imageUrl: string) => void;
+  onAddImage?: (imageUrl: string, position?: { x: number; y: number }, imageAssetId?: string) => void;
   onAddBrowserWireframe?: () => void;
   onAddMobileWireframe?: () => void;
   onAddDomainLibraryItem?: (item: DomainLibraryItem) => void;

src/components/custom-nodes/ArchitectureNode.tsx

@@ -7,6 +7,7 @@ import { NodeChrome } from '@/components/NodeChrome';
 import { getTransformDiagnosticsAttrs } from '@/components/transformDiagnostics';
 import { resolveNodeVisualStyle } from '@/theme';
 import { useProviderShapePreview } from '@/hooks/useProviderShapePreview';
+import { useResolvedMediaUrl } from '@/hooks/useResolvedMediaUrl';
 import type { DomainLibraryCategory } from '@/services/domainLibrary';
 import type { LucideIcon } from 'lucide-react';
 import {
@@ -57,13 +58,16 @@ function ArchitectureNode({ id, data, selected }: LegacyNodeProps<NodeData>): Re
   };
   const ResourceIcon: LucideIcon = resourceIconMap[resourceType] ?? Server;
   const customIconUrl = typeof data.customIconUrl === 'string' ? data.customIconUrl : undefined;
+  const resolvedCustomIconUrl = useResolvedMediaUrl(data, 'icon');
   const providerPreviewUrl = useProviderShapePreview(
     typeof data.archIconPackId === 'string' ? data.archIconPackId : undefined,
     typeof data.archIconShapeId === 'string' ? data.archIconShapeId : undefined,
-    customIconUrl
+    resolvedCustomIconUrl ?? customIconUrl
   );
   const resolvedProviderIconUrl =
-    provider === 'custom' && customIconUrl ? customIconUrl : providerPreviewUrl;
+    provider === 'custom' && (resolvedCustomIconUrl || customIconUrl)
+      ? (resolvedCustomIconUrl ?? customIconUrl)
+      : providerPreviewUrl;
 
   return (
     <NodeChrome

src/components/custom-nodes/BrowserNode.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { NodeData } from '@/lib/types';
 import { Lock } from 'lucide-react';
 import { NodeChrome } from '@/components/NodeChrome';
+import { useResolvedMediaUrl } from '@/hooks/useResolvedMediaUrl';
 import { renderBrowserVariantContent } from './browserVariantRenderer';
 
 import { getNodeColorPalette } from '../../theme';
@@ -12,6 +13,7 @@ const BrowserNode = ({ id, data, selected }: LegacyNodeProps<NodeData>): React.R
   const { t } = useTranslation();
   const nodeColorPalette = getNodeColorPalette(true);
   const style = nodeColorPalette[data.color || 'slate'] || nodeColorPalette.slate;
+  const imageUrl = useResolvedMediaUrl(data, 'image');
 
   return (
     <NodeChrome
@@ -50,7 +52,7 @@ const BrowserNode = ({ id, data, selected }: LegacyNodeProps<NodeData>): React.R
 
         {/* Content Area */}
         {renderBrowserVariantContent({
-          imageUrl: data.imageUrl,
+          imageUrl,
           variant: data.variant,
           label: data.label,
           style,

src/components/custom-nodes/MobileNode.tsx

@@ -3,13 +3,15 @@ import type { LegacyNodeProps } from '@/lib/reactflowCompat';
 import { useTranslation } from 'react-i18next';
 import { NodeData } from '@/lib/types';
 import { NodeChrome } from '@/components/NodeChrome';
+import { useResolvedMediaUrl } from '@/hooks/useResolvedMediaUrl';
 import { renderMobileVariantContent } from './mobileVariantRenderer';
 import { getNodeColorPalette } from '../../theme';
 
 function MobileNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.ReactElement {
   const { t } = useTranslation();
   const nodeColorPalette = getNodeColorPalette(true);
   const style = nodeColorPalette[data.color || 'slate'] || nodeColorPalette.slate;
+  const imageUrl = useResolvedMediaUrl(data, 'image');
 
   return (
     <NodeChrome
@@ -46,7 +48,7 @@ function MobileNode({ id, data, selected }: LegacyNodeProps<NodeData>): React.Re
         {/* Screen Content */}
         <div className="flex-1 bg-[var(--brand-surface)] relative overflow-hidden flex flex-col">
           {renderMobileVariantContent({
-            imageUrl: data.imageUrl,
+            imageUrl,
             variant: data.variant,
             style,
             imageAlt: t('customNodes.mobileContent'),

src/components/flow-canvas/useFlowCanvasDragDrop.ts

@@ -1,8 +1,10 @@
 import { useCallback } from 'react';
+import { ingestUserMediaFile } from '@/services/storage/assetStore';
+import { reportStorageTelemetry } from '@/services/storage/storageTelemetry';
 
 interface UseFlowCanvasDragDropParams {
   screenToFlowPosition: (position: { x: number; y: number }) => { x: number; y: number };
-  handleAddImage: (imageUrl: string, position: { x: number; y: number }) => void;
+  handleAddImage: (imageUrl: string, position: { x: number; y: number }, imageAssetId?: string) => void;
   onFileDrop?: (file: File, content: string) => void;
 }
 
@@ -52,17 +54,29 @@ export function useFlowCanvasDragDrop({
       if (!file) return;
 
       if (file.type.startsWith('image/')) {
-        const reader = new FileReader();
-        reader.onload = (loadEvent) => {
-          const imageUrl = loadEvent.target?.result as string;
-          if (!imageUrl) return;
-          const position = screenToFlowPosition({
-            x: event.clientX,
-            y: event.clientY,
+        const position = screenToFlowPosition({
+          x: event.clientX,
+          y: event.clientY,
+        });
+        void ingestUserMediaFile(file, 'image', { fileName: file.name })
+          .then((result) => {
+            handleAddImage(
+              result.assetId ? '' : result.displayUrl,
+              position,
+              result.assetId
+            );
+          })
+          .catch((error) => {
+            // Best-effort: leave canvas unchanged so the user can retry.
+            reportStorageTelemetry({
+              area: 'persist',
+              code: 'ASSET_DROP_INGEST_FAILED',
+              severity: 'warning',
+              message: `Image drop ingest failed: ${
+                error instanceof Error ? error.message : String(error)
+              }`,
+            });
           });
-          handleAddImage(imageUrl, position);
-        };
-        reader.readAsDataURL(file);
         return;
       }
 

src/components/flow-editor/buildFlowEditorControllerParams.ts

@@ -106,7 +106,7 @@ interface BuildFlowEditorControllerChromeParams {
     handleAddSequenceParticipant: () => void;
     handleAddClassNode: () => void;
     handleAddEntityNode: () => void;
-    handleAddImage: (imageUrl: string) => void;
+    handleAddImage: (imageUrl: string, position?: { x: number; y: number }, imageAssetId?: string) => void;
     handleAddWireframe: (surface: 'browser' | 'mobile') => void;
     handleAddDomainLibraryItem: (item: DomainLibraryItem) => void;
 }

src/components/flow-editor/panelProps.ts

@@ -43,7 +43,7 @@ export interface CommandBarPanelBuilderParams {
   handleAddSequenceParticipant: () => void;
   handleAddClassNode: () => void;
   handleAddEntityNode: () => void;
-  handleAddImage: (imageUrl: string) => void;
+  handleAddImage: (imageUrl: string, position?: { x: number; y: number }, imageAssetId?: string) => void;
   handleAddWireframe: (surface: 'browser' | 'mobile') => void;
   handleAddDomainLibraryItem: (item: DomainLibraryItem) => void;
   handleCodeAnalysis?: (code: string, language: SupportedLanguage) => Promise<boolean>;

src/components/flow-editor/useFlowEditorController.ts

@@ -197,7 +197,7 @@ export interface UseFlowEditorChromeParams {
     handleAddSequenceParticipant: () => void;
     handleAddClassNode: () => void;
     handleAddEntityNode: () => void;
-    handleAddImage: (imageUrl: string) => void;
+    handleAddImage: (imageUrl: string, position?: { x: number; y: number }, imageAssetId?: string) => void;
     handleAddWireframe: (surface: 'browser' | 'mobile') => void;
     handleAddDomainLibraryItem: (item: DomainLibraryItem) => void;
 }

src/components/properties/BulkNodeProperties.tsx

@@ -175,13 +175,14 @@ export function BulkNodeProperties({
     }));
   }
 
-  function handleCustomIconChange(url?: string): void {
-    const updates = createUploadedIconData(url);
+  function handleCustomIconChange(url?: string, iconAssetId?: string): void {
+    const updates = createUploadedIconData(url, iconAssetId);
     setForm((current) => ({
       ...current,
-      iconMode: url ? 'upload' : '',
+      iconMode: url || iconAssetId ? 'upload' : '',
       icon: updates.icon ?? '',
       customIconUrl: updates.customIconUrl,
+      iconAssetId: updates.iconAssetId,
       assetProvider: updates.assetProvider as BulkNodePropertiesFormState['assetProvider'],
       assetCategory: updates.assetCategory,
       archIconPackId: updates.archIconPackId,
@@ -267,6 +268,7 @@ export function BulkNodeProperties({
           <IconPicker
             selectedIcon={form.icon || undefined}
             customIconUrl={form.customIconUrl}
+            iconAssetId={form.iconAssetId}
             selectedProvider={form.assetProvider}
             selectedProviderCategory={form.assetCategory}
             selectedProviderPackId={form.archIconPackId}