From f26fd5e642ae400e9e8a8446ee565c4961f0564f Mon Sep 17 00:00:00 2001
From: TheGeniusOfEternity <max06safin@yandex.ru>
Date: Tue, 18 Aug 2026 14:37:35 +0300
Subject: [PATCH 1/4] fix: position copy dropdown near the trigger button

---
 client/src/entities/widget/ui/WidgetCard.module.css | 9 ++++-----
 client/src/entities/widget/ui/WidgetCard.tsx        | 1 +
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/entities/widget/ui/WidgetCard.module.css b/client/src/entities/widget/ui/WidgetCard.module.css
index 5a1f662..df3c2c5 100644
--- a/client/src/entities/widget/ui/WidgetCard.module.css
+++ b/client/src/entities/widget/ui/WidgetCard.module.css
@@ -267,7 +267,7 @@
   gap: 0.5rem;
 }
 
-.actions button:last-child {
+.actions > button:last-child {
   grid-column: 2 / 3;
   grid-row: 2 / 3;
 }
@@ -307,12 +307,11 @@
 }
 
 .copyMenu {
-  display: contents;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
 }
 
 .copyAction {
-  grid-column: 2 / 3;
-  grid-row: 1 / 2;
 }
 
 @media (max-width: 760px) {
@@ -328,7 +327,7 @@
     grid-column: 1 / 2;
   }
 
-  .copyAction {
+  .copyMenu {
     grid-column: 1 / 2;
     grid-row: 1 / 2;
   }
diff --git a/client/src/entities/widget/ui/WidgetCard.tsx b/client/src/entities/widget/ui/WidgetCard.tsx
index cf00dfc..84eb457 100644
--- a/client/src/entities/widget/ui/WidgetCard.tsx
+++ b/client/src/entities/widget/ui/WidgetCard.tsx
@@ -231,6 +231,7 @@ export const WidgetCard = ({
                   action: () => void onCopy(widget, 'svg'),
                 },
               ]}
+              popupProps={{ placement: 'bottom-end' }}
               switcherWrapperClassName={styles.copyMenu}
               renderSwitcher={({ onClick, onKeyDown }) => (
                 <Button

From bdd5173a45cde1213867ac40f979f2732ef2b7a7 Mon Sep 17 00:00:00 2001
From: TheGeniusOfEternity <max06safin@yandex.ru>
Date: Tue, 18 Aug 2026 18:54:01 +0300
Subject: [PATCH 2/4] fix(widgets): download avatar to display inside svg

---
 server/src/controllers/widgetController.ts | 63 ++++++++++++++++++++++
 server/src/services/widgetCanvas.test.ts   | 41 ++++++++++++++
 server/src/shared/widget/WidgetCanvas.tsx  | 11 ++--
 server/src/widgets.test.ts                 | 56 +++++++++++++++++++
 4 files changed, 168 insertions(+), 3 deletions(-)

diff --git a/server/src/controllers/widgetController.ts b/server/src/controllers/widgetController.ts
index a21ae5c..0da1810 100644
--- a/server/src/controllers/widgetController.ts
+++ b/server/src/controllers/widgetController.ts
@@ -100,6 +100,67 @@ const userId = (req: AuthRequest) => {
   return req.userId;
 };
 
+const AVATAR_CACHE_TTL_MS = 15 * 60 * 1000;
+const avatarCache = new Map<string, { expiresAt: number; dataUri: string }>();
+
+const asHttpUrl = (value: unknown): string | null => {
+  if (typeof value !== 'string') return null;
+  const trimmed = value.trim();
+  return /^https?:\/\//i.test(trimmed) ? trimmed : null;
+};
+
+const withAvatarSize = (url: string, size: number): string =>
+  `${url}${url.includes('?') ? '&' : '?'}s=${size}`;
+
+const fetchAvatarDataUri = async (url: string): Promise<string | null> => {
+  const now = Date.now();
+  const cached = avatarCache.get(url);
+  if (cached && cached.expiresAt > now) return cached.dataUri;
+  if (cached) avatarCache.delete(url);
+
+  try {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), 5000);
+    const response = await fetch(withAvatarSize(url, 84), {
+      headers: {
+        Accept: 'image/avif,image/webp,image/png,image/jpeg',
+        'User-Agent': 'widgecode-widget-builder',
+      },
+      signal: controller.signal,
+    });
+    clearTimeout(timer);
+    if (!response.ok) return null;
+
+    const contentType = response.headers.get('content-type') ?? '';
+    const type = contentType.split(';')[0].trim() || 'image/png';
+    const buffer = Buffer.from(await response.arrayBuffer()).toString('base64');
+    const dataUri = `data:${type};base64,${buffer}`;
+    avatarCache.set(url, { expiresAt: Date.now() + AVATAR_CACHE_TTL_MS, dataUri });
+    return dataUri;
+  } catch {
+    return null;
+  }
+};
+
+const buildAvatarDataUris = async (
+  renderedBlocks: { id: string; data?: unknown }[],
+): Promise<Record<string, string>> => {
+  const results: Record<string, string> = {};
+  await Promise.all(
+    renderedBlocks.map(async (block) => {
+      const data =
+        block.data && typeof block.data === 'object'
+          ? (block.data as Record<string, unknown>)
+          : null;
+      const url = data ? asHttpUrl(data.avatarUrl) : null;
+      if (!url) return;
+      const dataUri = await fetchAvatarDataUri(url);
+      if (dataUri) results[block.id] = dataUri;
+    }),
+  );
+  return results;
+};
+
 export class WidgetController {
   list = async (req: AuthRequest, res: Response, next: NextFunction) => {
     try {
@@ -247,6 +308,7 @@ export class WidgetController {
 
       const locale = req.query.locale === 'ru' ? 'ru' : 'en';
       const rendered = await renderWidgetStats(widget);
+      const avatarDataUris = await buildAvatarDataUris(rendered.blocks);
       const outputDimensions = imageOutputDimensions(
         widget.width,
         widget.height,
@@ -277,6 +339,7 @@ export class WidgetController {
           outputWidth: outputDimensions?.width,
           outputHeight: outputDimensions?.height,
           renderedBlocks: rendered.blocks,
+          avatarDataUris,
           locale,
           showChrome: false,
         }),
diff --git a/server/src/services/widgetCanvas.test.ts b/server/src/services/widgetCanvas.test.ts
index 4992551..f22954d 100644
--- a/server/src/services/widgetCanvas.test.ts
+++ b/server/src/services/widgetCanvas.test.ts
@@ -51,3 +51,44 @@ it('scales the SVG viewport without changing the widget viewBox', () => {
   expect(svg).toContain('width="300" height="200" viewBox="0 0 600 400"');
   expect(svg).toContain('preserveAspectRatio="xMidYMid meet"');
 });
+
+it('inlines avatars as data URIs instead of external URLs', () => {
+  const svg = renderToStaticMarkup(
+    createElement(WidgetCanvas, {
+      title: 'Avatar widget',
+      blocks: [
+        {
+          id: 'block-1',
+          type: 'github-stats',
+          position: 0,
+          config: { layout: { x: 0, y: 0, width: 1, height: 1 } },
+        },
+      ],
+      palette: 'lavender',
+      paletteMode: 'light',
+      columns: 1,
+      width: 600,
+      height: 400,
+      renderedBlocks: [
+        {
+          id: 'block-1',
+          type: 'github-stats',
+          position: 0,
+          data: {
+            username: 'octocat',
+            name: 'The Octocat',
+            avatarUrl: 'https://avatars.githubusercontent.com/u/583231',
+            publicRepositories: 8,
+            followers: 100,
+            following: 9,
+          },
+        },
+      ],
+      avatarDataUris: { 'block-1': 'data:image/png;base64,iVBORw0KGgo=' },
+      showChrome: false,
+    }),
+  );
+
+  expect(svg).toContain('href="data:image/png;base64,iVBORw0KGgo="');
+  expect(svg).not.toContain('avatars.githubusercontent.com');
+});
diff --git a/server/src/shared/widget/WidgetCanvas.tsx b/server/src/shared/widget/WidgetCanvas.tsx
index e57ae90..cfeb51e 100644
--- a/server/src/shared/widget/WidgetCanvas.tsx
+++ b/server/src/shared/widget/WidgetCanvas.tsx
@@ -24,6 +24,7 @@ export type WidgetCanvasProps = {
   outputWidth?: number;
   outputHeight?: number;
   renderedBlocks?: WidgetCanvasRenderedBlock[];
+  avatarDataUris?: Record<string, string>;
   locale?: 'ru' | 'en';
   showChrome?: boolean;
 };
@@ -338,6 +339,7 @@ const BlockContent = ({
   locale,
   width,
   height,
+  avatarDataUris,
 }: {
   block: WidgetCanvasBlock;
   rendered?: WidgetCanvasRenderedBlock;
@@ -345,6 +347,7 @@ const BlockContent = ({
   locale: 'ru' | 'en';
   width: number;
   height: number;
+  avatarDataUris?: Record<string, string>;
 }) => {
   const padding = Math.min(20, Math.max(10, width * 0.04));
   const contentWidth = Math.max(width - padding * 2, 80);
@@ -425,7 +428,7 @@ const BlockContent = ({
 
   if (block.type === 'github-stats') {
     const avatarSize = clamp(width * 0.16, 24, 42);
-    const avatarUrl = imageUrl(data.avatarUrl);
+    const avatarHref = avatarDataUris?.[block.id] ?? imageUrl(data.avatarUrl);
     const avatarId = `avatar-${safeId(block.id)}`;
     const headingX = padding + avatarSize + 12;
     const statsY = padding + avatarSize + 18;
@@ -452,13 +455,13 @@ const BlockContent = ({
           fill={tokens.accent}
           fillOpacity={0.22}
         />
-        {avatarUrl && (
+        {avatarHref && (
           <>
             <clipPath id={avatarId}>
               <rect x={padding} y={padding} width={avatarSize} height={avatarSize} rx={14} />
             </clipPath>
             <image
-              href={avatarUrl}
+              href={avatarHref}
               x={padding}
               y={padding}
               width={avatarSize}
@@ -659,6 +662,7 @@ export const WidgetCanvas = ({
   outputWidth,
   outputHeight,
   renderedBlocks = [],
+  avatarDataUris,
   locale = 'en',
   showChrome = false,
 }: WidgetCanvasProps) => {
@@ -798,6 +802,7 @@ export const WidgetCanvas = ({
                   locale={locale}
                   width={blockWidth}
                   height={blockHeight}
+                  avatarDataUris={avatarDataUris}
                 />
               </g>
             </g>
diff --git a/server/src/widgets.test.ts b/server/src/widgets.test.ts
index 067eb44..ccfa880 100644
--- a/server/src/widgets.test.ts
+++ b/server/src/widgets.test.ts
@@ -269,3 +269,59 @@ it('renders a public widget as an SVG image', async () => {
   expect(svg).toContain('<svg');
   expect(svg).toContain('Readme &amp; stats');
 });
+
+it('inlines the GitHub avatar as a data URI in the public SVG image', async () => {
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async (input: string | URL) => {
+      const url = String(input);
+      if (url.startsWith('https://api.github.com/users/')) {
+        return new Response(
+          JSON.stringify({
+            login: 'octocat',
+            name: 'The Octocat',
+            avatar_url: 'https://avatars.githubusercontent.com/u/583231?v=4',
+            bio: 'Hello world',
+            public_repos: 8,
+            followers: 100,
+            following: 9,
+          }),
+          { status: 200, headers: { 'Content-Type': 'application/json' } },
+        );
+      }
+      if (url.startsWith('https://avatars.githubusercontent.com/')) {
+        return new Response(Buffer.from([0x89, 0x50, 0x4e, 0x47]), {
+          status: 200,
+          headers: { 'Content-Type': 'image/png' },
+        });
+      }
+      return new Response('Not found', { status: 404 });
+    }),
+  );
+
+  const publicWidget = {
+    ...widget,
+    public: true,
+    blocks: [
+      {
+        id: 'block-1',
+        widgetId: widget.id,
+        position: 0,
+        type: 'github-stats',
+        config: { layout: { x: 0, y: 0, width: 1, height: 1 } },
+      },
+    ],
+  };
+  prismaMocks.widget.findFirst.mockResolvedValue(publicWidget);
+
+  const response = await request(app)
+    .get(`/api/public/widgets/${publicWidget.slug}/image.svg`)
+    .expect(200);
+
+  const svg = response.body.toString('utf8');
+  expect(svg).toContain('data:image/png;base64,');
+  expect(svg).not.toContain('avatars.githubusercontent.com');
+  expect(svg).toContain('The Octocat');
+
+  vi.unstubAllGlobals();
+});

From ff9fa704721c7326b20704d8828ba6388aaab917 Mon Sep 17 00:00:00 2001
From: TheGeniusOfEternity <max06safin@yandex.ru>
Date: Tue, 18 Aug 2026 19:29:16 +0300
Subject: [PATCH 3/4] fix(widgets): sync published size with size in editor

---
 .../pages/widget-editor/ui/WidgetEditorPage.tsx   | 15 +++++++--------
 server/src/services/widgetService.ts              | 11 ++++++++++-
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/client/src/pages/widget-editor/ui/WidgetEditorPage.tsx b/client/src/pages/widget-editor/ui/WidgetEditorPage.tsx
index 448f1e9..fb0d6a6 100644
--- a/client/src/pages/widget-editor/ui/WidgetEditorPage.tsx
+++ b/client/src/pages/widget-editor/ui/WidgetEditorPage.tsx
@@ -46,8 +46,6 @@ const MAX_BLOCKS = 5;
 const MAX_COLUMNS = 2;
 const GRID_GAP = 18;
 const WIDGET_WIDTH = 600;
-const WIDGET_BASE_HEIGHT = 200;
-const WIDGET_ROW_HEIGHT = 200;
 const DEFAULT_LAYOUT: BlockLayout = { x: 0, y: 0, width: 1, height: 1 };
 
 const blockSizes = [
@@ -117,9 +115,11 @@ const getWidgetDimensions = (blocks: WidgetBlock[]) => {
       return layout.y + layout.height;
     }),
   );
+  const padding = Math.min(34, Math.max(20, WIDGET_WIDTH * 0.04));
+  const cellWidth = (WIDGET_WIDTH - padding * 2 - GRID_GAP * (MAX_COLUMNS - 1)) / MAX_COLUMNS;
   return {
     width: WIDGET_WIDTH,
-    height: Math.min(1200, WIDGET_BASE_HEIGHT + rows * WIDGET_ROW_HEIGHT),
+    height: Math.min(1200, Math.round(rows * cellWidth + GRID_GAP * (rows - 1) + padding * 2)),
   };
 };
 
@@ -654,12 +654,11 @@ export const WidgetEditorPage = ({
     }));
   };
 
-  const handleSave = (publish = false): Promise<void> => {
+  const handleSave = async (publish = false): Promise<void> => {
     if (savePromiseRef.current) {
       const pending = savePromiseRef.current;
-      return pending.then(() => {
-        if (publish || isDirtyRef.current) return handleSave(publish);
-      });
+      await pending;
+      if (publish || isDirtyRef.current) return handleSave(publish);
     }
     const run = (async () => {
       const current = widgetRef.current;
@@ -736,7 +735,7 @@ export const WidgetEditorPage = ({
       width: widget.width,
       height: widget.height,
     });
-    const code = `<iframe src="${src}" width="${widget.width}" height="${widget.height}" frameborder="0" style="display:block;border:0" loading="lazy"></iframe>`;
+    const code = `<iframe src="${src}" width="${widget.width}" height="${widget.height}" style="display:block;border:0" loading="lazy"></iframe>`;
     await navigator.clipboard?.writeText(code);
     setCopied(true);
     window.setTimeout(() => setCopied(false), 1600);
diff --git a/server/src/services/widgetService.ts b/server/src/services/widgetService.ts
index 03e354c..61b5b89 100644
--- a/server/src/services/widgetService.ts
+++ b/server/src/services/widgetService.ts
@@ -82,6 +82,9 @@ const layoutFromBlock = (block: { position: number; config: unknown }): BlockLay
   return result.success ? result.data : { x: 0, y: block.position, width: 1, height: 1 };
 };
 
+const WIDGET_WIDTH = 600;
+const WIDGET_GAP = 18;
+
 const widgetDimensions = (blocks: { position: number; config: unknown }[]) => {
   const rows = Math.max(
     1,
@@ -90,7 +93,13 @@ const widgetDimensions = (blocks: { position: number; config: unknown }[]) => {
       return layout.y + layout.height;
     }),
   );
-  return { width: 600, height: Math.min(1200, 200 + rows * 200) };
+  const padding = Math.min(34, Math.max(20, WIDGET_WIDTH * 0.04));
+  const cellWidth =
+    (WIDGET_WIDTH - padding * 2 - WIDGET_GAP * (MAX_GRID_COLUMNS - 1)) / MAX_GRID_COLUMNS;
+  return {
+    width: WIDGET_WIDTH,
+    height: Math.min(1200, Math.round(rows * cellWidth + WIDGET_GAP * (rows - 1) + padding * 2)),
+  };
 };
 
 const normalizeBlockConfig = (type: BlockType, config: unknown, layout?: BlockLayout) => {

From 57ec9c31cd8ebfd9fb569d1dbf540373b0b75f6f Mon Sep 17 00:00:00 2001
From: TheGeniusOfEternity <max06safin@yandex.ru>
Date: Tue, 18 Aug 2026 23:50:36 +0300
Subject: [PATCH 4/4] fix(widgets): update preview on widget resize

---
 client/src/app/App.tsx                        |  7 +++-
 client/src/entities/widget/ui/WidgetCard.tsx  | 31 ++++++++++------
 .../widget-editor/ui/WidgetEditorPage.tsx     | 22 +++++++++++-
 server/src/controllers/widgetController.ts    | 36 ++++++++++++++-----
 4 files changed, 76 insertions(+), 20 deletions(-)

diff --git a/client/src/app/App.tsx b/client/src/app/App.tsx
index 8da56dc..3c4d614 100644
--- a/client/src/app/App.tsx
+++ b/client/src/app/App.tsx
@@ -293,7 +293,7 @@ export const App = () => {
               width: widget.width,
               height: widget.height,
             });
-            return `<iframe src="${src}" width="${widget.width}" height="${widget.height}" frameborder="0" style="display:block;border:0" loading="lazy"></iframe>`;
+            return `<iframe src="${src}" width="${widget.width}" height="${widget.height}" style="display:block;border:0" loading="lazy"></iframe>`;
           })();
     await navigator.clipboard?.writeText(code);
   };
@@ -383,6 +383,11 @@ export const App = () => {
         locale={locale}
         onBack={() => navigate('/dashboard')}
         onOpenPublic={(slug) => navigate(`/w/${slug}`)}
+        onSave={(saved) =>
+          setVisibleWidgets((current) =>
+            current.map((widget) => (widget.id === saved.id ? toCardData(saved) : widget)),
+          )
+        }
       />
     );
 
diff --git a/client/src/entities/widget/ui/WidgetCard.tsx b/client/src/entities/widget/ui/WidgetCard.tsx
index 84eb457..11eb6f4 100644
--- a/client/src/entities/widget/ui/WidgetCard.tsx
+++ b/client/src/entities/widget/ui/WidgetCard.tsx
@@ -47,9 +47,15 @@ const PreviewSkeleton = () => (
 const WidgetPreviewFrame = ({ widget }: { widget: WidgetCardData }) => {
   const viewportRef = useRef<HTMLDivElement | null>(null);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
-  const [loadedSlug, setLoadedSlug] = useState<string | null>(null);
-  const [scale, setScale] = useState(1);
-  const isLoaded = loadedSlug === widget.slug;
+  const [loaded, setLoaded] = useState<{ slug: string; width: number; height: number } | null>(
+    null,
+  );
+  const [viewportSize, setViewportSize] = useState({ width: 0, height: 0 });
+  const isLoaded =
+    loaded !== null &&
+    loaded.slug === widget.slug &&
+    loaded.width === widget.width &&
+    loaded.height === widget.height;
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent<unknown>) => {
@@ -75,18 +81,18 @@ const WidgetPreviewFrame = ({ widget }: { widget: WidgetCardData }) => {
         return;
       }
 
-      setLoadedSlug(widget.slug);
+      setLoaded({ slug: widget.slug, width: widget.width, height: widget.height });
     };
 
     window.addEventListener('message', handleMessage);
     return () => window.removeEventListener('message', handleMessage);
-  }, [widget.slug]);
+  }, [widget.height, widget.slug, widget.width]);
 
   useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
 
-    const updateScale = () => {
+    const measure = () => {
       const { paddingLeft, paddingRight, paddingTop, paddingBottom } =
         window.getComputedStyle(viewport);
       const width =
@@ -94,14 +100,19 @@ const WidgetPreviewFrame = ({ widget }: { widget: WidgetCardData }) => {
       const height =
         viewport.clientHeight - Number.parseFloat(paddingTop) - Number.parseFloat(paddingBottom);
       if (!width || !height) return;
-      setScale(Math.min(1, width / widget.width, height / widget.height));
+      setViewportSize({ width, height });
     };
 
-    updateScale();
-    const observer = new ResizeObserver(updateScale);
+    measure();
+    const observer = new ResizeObserver(measure);
     observer.observe(viewport);
     return () => observer.disconnect();
-  }, [widget.height, widget.width]);
+  }, []);
+
+  const scale =
+    viewportSize.width && viewportSize.height
+      ? Math.min(1, viewportSize.width / widget.width, viewportSize.height / widget.height)
+      : 1;
 
   return (
     <div
diff --git a/client/src/pages/widget-editor/ui/WidgetEditorPage.tsx b/client/src/pages/widget-editor/ui/WidgetEditorPage.tsx
index fb0d6a6..7001484 100644
--- a/client/src/pages/widget-editor/ui/WidgetEditorPage.tsx
+++ b/client/src/pages/widget-editor/ui/WidgetEditorPage.tsx
@@ -60,6 +60,7 @@ type WidgetEditorPageProps = {
   locale: Locale;
   onBack: () => void;
   onOpenPublic: (slug: string) => void;
+  onSave?: (widget: Widget) => void;
 };
 
 type CachedEditorState = { savedAt: number; widget: Widget };
@@ -310,6 +311,7 @@ export const WidgetEditorPage = ({
   locale,
   onBack,
   onOpenPublic,
+  onSave,
 }: WidgetEditorPageProps) => {
   const t = messages[locale];
   const prefersReducedMotion = useReducedMotion();
@@ -687,6 +689,7 @@ export const WidgetEditorPage = ({
           isDirtyRef.current = true;
           setDirty(true);
         }
+        onSave?.(normalized);
       } catch (saveError) {
         setError(saveError instanceof Error ? saveError.message : t.unavailable);
       } finally {
@@ -703,12 +706,28 @@ export const WidgetEditorPage = ({
     void handleSave();
   });
 
+  const flushOnClose = useEffectEvent(() => {
+    if (isDirtyRef.current) void handleSave();
+  });
+
   useEffect(() => {
     if (!widget || !isDirty) return;
     const timeout = window.setTimeout(triggerAutosave, 1500);
     return () => window.clearTimeout(timeout);
   }, [isDirty, widget?.id, widget]);
 
+  useEffect(() => {
+    if (!widget) return;
+    window.addEventListener('pagehide', flushOnClose);
+    return () => window.removeEventListener('pagehide', flushOnClose);
+  }, [widget]);
+
+  useEffect(() => {
+    return () => {
+      flushOnClose();
+    };
+  }, []);
+
   const handleUnpublish = async () => {
     if (!widget) return;
     setSaving(true);
@@ -751,7 +770,8 @@ export const WidgetEditorPage = ({
     window.setTimeout(() => setSvgCopied(false), 1600);
   };
 
-  const guardLeave = () => {
+  const guardLeave = async () => {
+    if (isDirtyRef.current) await handleSave();
     onBack();
   };
 
diff --git a/server/src/controllers/widgetController.ts b/server/src/controllers/widgetController.ts
index 0da1810..46b3b1f 100644
--- a/server/src/controllers/widgetController.ts
+++ b/server/src/controllers/widgetController.ts
@@ -101,7 +101,10 @@ const userId = (req: AuthRequest) => {
 };
 
 const AVATAR_CACHE_TTL_MS = 15 * 60 * 1000;
-const avatarCache = new Map<string, { expiresAt: number; dataUri: string }>();
+const AVATAR_NEGATIVE_TTL_MS = 5 * 60 * 1000;
+const AVATAR_ERROR_TTL_MS = 30 * 1000;
+const avatarCache = new Map<string, { expiresAt: number; dataUri: string | null }>();
+const inflightAvatars = new Map<string, Promise<string | null>>();
 
 const asHttpUrl = (value: unknown): string | null => {
   if (typeof value !== 'string') return null;
@@ -112,12 +115,11 @@ const asHttpUrl = (value: unknown): string | null => {
 const withAvatarSize = (url: string, size: number): string =>
   `${url}${url.includes('?') ? '&' : '?'}s=${size}`;
 
-const fetchAvatarDataUri = async (url: string): Promise<string | null> => {
-  const now = Date.now();
-  const cached = avatarCache.get(url);
-  if (cached && cached.expiresAt > now) return cached.dataUri;
-  if (cached) avatarCache.delete(url);
+const storeAvatar = (url: string, dataUri: string | null, ttl: number) => {
+  avatarCache.set(url, { expiresAt: Date.now() + ttl, dataUri });
+};
 
+const doFetchAvatar = async (url: string): Promise<string | null> => {
   try {
     const controller = new AbortController();
     const timer = setTimeout(() => controller.abort(), 5000);
@@ -129,19 +131,37 @@ const fetchAvatarDataUri = async (url: string): Promise<string | null> => {
       signal: controller.signal,
     });
     clearTimeout(timer);
-    if (!response.ok) return null;
+    if (!response.ok) {
+      storeAvatar(url, null, AVATAR_NEGATIVE_TTL_MS);
+      return null;
+    }
 
     const contentType = response.headers.get('content-type') ?? '';
     const type = contentType.split(';')[0].trim() || 'image/png';
     const buffer = Buffer.from(await response.arrayBuffer()).toString('base64');
     const dataUri = `data:${type};base64,${buffer}`;
-    avatarCache.set(url, { expiresAt: Date.now() + AVATAR_CACHE_TTL_MS, dataUri });
+    storeAvatar(url, dataUri, AVATAR_CACHE_TTL_MS);
     return dataUri;
   } catch {
+    storeAvatar(url, null, AVATAR_ERROR_TTL_MS);
     return null;
   }
 };
 
+const fetchAvatarDataUri = async (url: string): Promise<string | null> => {
+  const now = Date.now();
+  const cached = avatarCache.get(url);
+  if (cached && cached.expiresAt > now) return cached.dataUri;
+  if (cached) avatarCache.delete(url);
+
+  const inflight = inflightAvatars.get(url);
+  if (inflight) return inflight;
+
+  const promise = doFetchAvatar(url).finally(() => inflightAvatars.delete(url));
+  inflightAvatars.set(url, promise);
+  return promise;
+};
+
 const buildAvatarDataUris = async (
   renderedBlocks: { id: string; data?: unknown }[],
 ): Promise<Record<string, string>> => {