@vertesia/ui 1.6.0-dev.20261004.085740Z → 1.6.0-dev.20261009.095813Z

package/src/features/agent/chat/ModernAgentOutput/AllMessagesMixed.tsx

@@ -43,6 +43,7 @@ import {
 } from '../workstreams.js';
 import { createAgentMarkdownAnchor } from './AgentMarkdownAnchor';
 import { AttachmentPreviewList, parseUserMessageAttachments } from './AttachmentPreview';
+import { agentMarkdownStyles } from './agentMarkdownStyles.js';
 import BatchProgressPanel, { type BatchProgressPanelClassNames } from './BatchProgressPanel';
 import {
     AGENT_LINE_CLAMP_CLASS,
@@ -3118,259 +3119,7 @@ function AllMessagesMixedComponent({
             data-view-mode={viewMode}
         >
             {/* Global styles for vprose markdown content */}
-            <style>{`
-                /* Better vertical rhythm for markdown */
-                .vprose > * + * {
-                    margin-top: 0.625rem;
-                }
-                .vprose > h1 + *,
-                .vprose > h2 + *,
-                .vprose > h3 + * {
-                    margin-top: 0.375rem;
-                }
-                /* Tables should read like part of the conversation, not a separate app grid. */
-                .vprose table {
-                    margin-top: 0.875rem;
-                    margin-bottom: 0.875rem;
-                    border-collapse: collapse;
-                    width: 100%;
-                    background: transparent;
-                }
-                .vprose th,
-                .vprose td {
-                    padding: 0.5rem 0.625rem;
-                    border: 0;
-                    border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
-                    background: transparent;
-                    text-align: left;
-                }
-                .vprose thead th {
-                    background: transparent;
-                    font-weight: 600;
-                    color: var(--muted);
-                    font-size: 0.75rem;
-                    text-transform: none;
-                    letter-spacing: 0;
-                }
-                .vprose tbody tr:hover {
-                    background: transparent;
-                }
-                /* Dark mode table styles */
-                .dark .vprose th,
-                .dark .vprose td {
-                    border-color: color-mix(in oklch, var(--border) 70%, transparent);
-                }
-                .dark .vprose thead th {
-                    background: transparent;
-                    color: var(--muted);
-                }
-                .dark .vprose tbody tr:hover {
-                    background: transparent;
-                }
-                /* Horizontal rules as section dividers */
-                .vprose hr {
-                    margin-top: 1rem;
-                    margin-bottom: 1rem;
-                    border-color: var(--border);
-                }
-                /* Better blockquote styling */
-                .vprose blockquote {
-                    margin-top: 0.875rem;
-                    margin-bottom: 0.875rem;
-                    padding-left: 1rem;
-                    border-left-width: 3px;
-                    border-left-color: var(--border);
-                    color: var(--muted);
-                }
-                /* Code blocks */
-                .vprose pre {
-                    margin-top: 0.75rem;
-                    margin-bottom: 0.75rem;
-                    padding: 0.75rem;
-                    border-radius: 0.5rem;
-                    overflow-x: auto;
-                    background-color: var(--muted-background);
-                    color: var(--foreground);
-                }
-                .vprose pre code {
-                    color: inherit;
-                }
-                .dark .vprose pre {
-                    color: var(--foreground);
-                }
-
-                /* Summary chat markdown: keep structure, but match the app's quieter conversation surface. */
-                .agent-markdown {
-                    color: color-mix(in oklch, var(--foreground) 78%, transparent);
-                    font-size: 0.875rem;
-                    line-height: 1.625;
-                    overflow-x: auto;
-                }
-                .agent-markdown > * + * {
-                    margin-top: 0.65rem;
-                }
-                .agent-markdown p {
-                    margin-top: 0.5rem;
-                    margin-bottom: 0.5rem;
-                }
-                .agent-markdown h1,
-                .agent-markdown h2,
-                .agent-markdown h3,
-                .agent-markdown h4 {
-                    margin-top: 1.2rem;
-                    margin-bottom: 0.45rem;
-                    color: var(--foreground);
-                    font-weight: 650;
-                    letter-spacing: 0;
-                    line-height: 1.3;
-                }
-                .agent-markdown h1 {
-                    font-size: 1.2rem;
-                }
-                .agent-markdown h2 {
-                    font-size: 1.05rem;
-                }
-                .agent-markdown h3,
-                .agent-markdown h4 {
-                    font-size: 0.95rem;
-                }
-                .agent-markdown h1:first-child,
-                .agent-markdown h2:first-child,
-                .agent-markdown h3:first-child,
-                .agent-markdown h4:first-child {
-                    margin-top: 0;
-                }
-                .agent-markdown hr {
-                    margin: 1.15rem 0;
-                    border: 0;
-                    border-top: 1px solid var(--border);
-                    opacity: 0.65;
-                }
-                .agent-markdown ul,
-                .agent-markdown ol {
-                    margin-top: 0.55rem;
-                    margin-bottom: 0.55rem;
-                    padding-left: 1.25rem;
-                }
-                .agent-markdown li {
-                    margin-top: 0.2rem;
-                    margin-bottom: 0.2rem;
-                    padding-left: 0.1rem;
-                    color: inherit;
-                }
-                .agent-markdown li::marker {
-                    color: var(--muted);
-                }
-                .agent-markdown strong {
-                    color: var(--foreground);
-                    font-weight: 600;
-                }
-                .agent-markdown em {
-                    color: color-mix(in oklch, var(--foreground) 72%, transparent);
-                }
-                .agent-markdown a {
-                    color: var(--foreground);
-                    text-decoration-color: var(--muted);
-                    text-underline-offset: 3px;
-                }
-                .agent-markdown blockquote {
-                    margin-top: 0.85rem;
-                    margin-bottom: 0.85rem;
-                    padding-left: 0.875rem;
-                    border-left: 2px solid var(--border);
-                    color: var(--muted);
-                    font-style: normal;
-                }
-                .agent-markdown :not(pre) > code {
-                    border: 1px solid var(--border);
-                    border-radius: 0.375rem;
-                    background: var(--muted);
-                    color: var(--foreground);
-                    padding: 0.1rem 0.35rem;
-                    font-size: 0.8125em;
-                    font-weight: 500;
-                }
-                .agent-markdown pre {
-                    margin-top: 0.85rem;
-                    margin-bottom: 0.85rem;
-                    max-height: 32rem;
-                    overflow: auto;
-                    border: 1px solid var(--border);
-                    border-radius: 0.75rem;
-                    background: var(--muted);
-                    color: var(--foreground);
-                    padding: 0.875rem;
-                    font-size: 0.8125rem;
-                    line-height: 1.55;
-                }
-                .agent-markdown pre code {
-                    border: 0;
-                    background: transparent;
-                    color: inherit;
-                    padding: 0;
-                    font-size: inherit;
-                }
-                .agent-markdown table {
-                    display: table;
-                    width: 100%;
-                    max-width: 100%;
-                    margin: 0.9rem 0 1rem;
-                    border: 0;
-                    border-collapse: collapse;
-                    border-spacing: 0;
-                    font-size: 0.8125rem;
-                    table-layout: fixed;
-                    background: transparent;
-                }
-                .agent-markdown thead {
-                    background: transparent;
-                }
-                .agent-markdown th,
-                .agent-markdown td {
-                    border: 0;
-                    border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
-                    background: transparent;
-                    padding: 0.55rem 0.75rem;
-                    text-align: left;
-                    vertical-align: top;
-                    overflow-wrap: anywhere;
-                    word-break: normal;
-                    white-space: normal;
-                }
-                .agent-markdown th {
-                    color: var(--muted);
-                    font-size: 0.75rem;
-                    font-weight: 600;
-                    letter-spacing: 0;
-                    text-transform: none;
-                    white-space: nowrap;
-                }
-                .agent-markdown td {
-                    color: inherit;
-                }
-                .agent-markdown th + th,
-                .agent-markdown td + td {
-                    padding-inline-start: 1.75rem;
-                }
-                .agent-markdown th:first-child,
-                .agent-markdown td:first-child {
-                    min-width: 0;
-                    width: auto;
-                    white-space: normal;
-                }
-                .agent-markdown col {
-                    width: var(--agent-markdown-table-column-width);
-                }
-                .agent-markdown tr:last-child td {
-                    border-bottom: 0;
-                }
-                .agent-markdown tbody tr:nth-child(even) {
-                    background: transparent;
-                }
-                .agent-markdown tbody tr:hover {
-                    background: transparent;
-                }
-            `}</style>
+            <style>{agentMarkdownStyles}</style>
 
             {/* Workstream tabs are a debug affordance; Summary keeps the conversation surface quiet. */}
             {viewMode === 'stacked' && (

package/src/features/agent/chat/ModernAgentOutput/CollapsibleAgentMarkdown.tsx

@@ -3,15 +3,9 @@ import { useUITranslation } from '@vertesia/ui/i18n';
 import { MarkdownRenderer, type MarkdownRendererProps } from '@vertesia/ui/widgets';
 import { ChevronDown } from 'lucide-react';
 import { useState } from 'react';
+import { AGENT_PROSE_CLASS } from './agentMarkdownStyles.js';
 
-/** Prose styling used for agent/model message markdown, shared across the conversation UI. */
-export const AGENT_PROSE_CLASS = [
-    'agent-markdown vprose prose max-w-none break-words text-sm leading-6 text-foreground/80',
-    'prose-p:my-2 prose-p:leading-6 prose-li:my-0.5 prose-pre:my-3 prose-headings:tracking-normal',
-    'prose-headings:text-foreground prose-strong:text-foreground prose-code:text-foreground',
-    'prose-a:text-foreground prose-a:underline prose-a:decoration-muted prose-a:underline-offset-4',
-    '[&_p]:text-foreground/80 [&_li]:text-foreground/80 [&_li::marker]:text-muted',
-].join(' ');
+export { AGENT_PROSE_CLASS } from './agentMarkdownStyles.js';
 
 /** Clamp applied to collapsed markdown. Kept as a literal so Tailwind emits the utility. */
 export const AGENT_LINE_CLAMP_CLASS =

package/src/features/agent/chat/ModernAgentOutput/agentMarkdownStyles.ts

@@ -0,0 +1,248 @@
+/** Prose styling used for agent/model message markdown, shared across the conversation UI. */
+export const AGENT_PROSE_CLASS = [
+    'agent-markdown vprose prose max-w-none break-words text-sm leading-6 text-foreground/80',
+    'prose-p:my-2 prose-p:leading-6 prose-li:my-0.5 prose-pre:my-3 prose-headings:tracking-normal',
+    'prose-headings:text-foreground prose-strong:text-foreground prose-code:text-foreground',
+    'prose-a:text-foreground prose-a:underline prose-a:decoration-muted prose-a:underline-offset-4',
+    'prose-p:text-foreground/80 prose-li:text-foreground/80 prose-li:marker:text-muted',
+].join(' ');
+
+// Shared with rendered regression checks so they exercise the styles the chat actually injects.
+export const agentMarkdownStyles = `
+/* Better vertical rhythm for markdown */
+.vprose > * + *:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.625rem;
+}
+.vprose > h1 + *:not(:where(.not-prose, .not-prose *)),
+.vprose > h2 + *:not(:where(.not-prose, .not-prose *)),
+.vprose > h3 + *:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.375rem;
+}
+/* Tables should read like part of the conversation, not a separate app grid. */
+.vprose table:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.875rem;
+    margin-bottom: 0.875rem;
+    border-collapse: collapse;
+    width: 100%;
+    background: transparent;
+}
+.vprose th:not(:where(.not-prose, .not-prose *)),
+.vprose td:not(:where(.not-prose, .not-prose *)) {
+    padding: 0.5rem 0.625rem;
+    border: 0;
+    border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
+    background: transparent;
+    text-align: left;
+}
+.vprose thead th:not(:where(.not-prose, .not-prose *)) {
+    background: transparent;
+    font-weight: 600;
+    color: var(--muted);
+    font-size: 0.75rem;
+    text-transform: none;
+    letter-spacing: 0;
+}
+.vprose tbody tr:hover:not(:where(.not-prose, .not-prose *)) {
+    background: transparent;
+}
+/* Horizontal rules as section dividers */
+.vprose hr:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    border-color: var(--border);
+}
+/* Better blockquote styling */
+.vprose blockquote:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.875rem;
+    margin-bottom: 0.875rem;
+    padding-left: 1rem;
+    border-left-width: 3px;
+    border-left-color: var(--border);
+    color: var(--muted);
+}
+/* Code blocks */
+.vprose pre:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    background-color: var(--muted-background);
+    color: var(--foreground);
+}
+.vprose pre code:not(:where(.not-prose, .not-prose *)) {
+    color: inherit;
+}
+
+/* Summary chat markdown: keep structure, but match the app's quieter conversation surface. */
+.agent-markdown:not(:where(.not-prose, .not-prose *)) {
+    color: color-mix(in oklch, var(--foreground) 78%, transparent);
+    font-size: 0.875rem;
+    line-height: 1.625;
+    overflow-x: auto;
+}
+.agent-markdown > * + *:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.65rem;
+}
+.agent-markdown p:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+.agent-markdown h1:not(:where(.not-prose, .not-prose *)),
+.agent-markdown h2:not(:where(.not-prose, .not-prose *)),
+.agent-markdown h3:not(:where(.not-prose, .not-prose *)),
+.agent-markdown h4:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 1.2rem;
+    margin-bottom: 0.45rem;
+    color: var(--foreground);
+    font-weight: 650;
+    letter-spacing: 0;
+    line-height: 1.3;
+}
+.agent-markdown h1:not(:where(.not-prose, .not-prose *)) {
+    font-size: 1.2rem;
+}
+.agent-markdown h2:not(:where(.not-prose, .not-prose *)) {
+    font-size: 1.05rem;
+}
+.agent-markdown h3:not(:where(.not-prose, .not-prose *)),
+.agent-markdown h4:not(:where(.not-prose, .not-prose *)) {
+    font-size: 0.95rem;
+}
+.agent-markdown h1:first-child:not(:where(.not-prose, .not-prose *)),
+.agent-markdown h2:first-child:not(:where(.not-prose, .not-prose *)),
+.agent-markdown h3:first-child:not(:where(.not-prose, .not-prose *)),
+.agent-markdown h4:first-child:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0;
+}
+.agent-markdown hr:not(:where(.not-prose, .not-prose *)) {
+    margin: 1.15rem 0;
+    border: 0;
+    border-top: 1px solid var(--border);
+    opacity: 0.65;
+}
+.agent-markdown ul:not(:where(.not-prose, .not-prose *)),
+.agent-markdown ol:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.55rem;
+    margin-bottom: 0.55rem;
+    padding-left: 1.25rem;
+}
+.agent-markdown li:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.2rem;
+    margin-bottom: 0.2rem;
+    padding-left: 0.1rem;
+    color: inherit;
+}
+.agent-markdown li:not(:where(.not-prose, .not-prose *))::marker {
+    color: var(--muted);
+}
+.agent-markdown strong:not(:where(.not-prose, .not-prose *)) {
+    color: var(--foreground);
+    font-weight: 600;
+}
+.agent-markdown em:not(:where(.not-prose, .not-prose *)) {
+    color: color-mix(in oklch, var(--foreground) 72%, transparent);
+}
+.agent-markdown a:not(:where(.not-prose, .not-prose *)) {
+    color: var(--foreground);
+    text-decoration-color: var(--muted);
+    text-underline-offset: 3px;
+}
+.agent-markdown blockquote:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.85rem;
+    margin-bottom: 0.85rem;
+    padding-left: 0.875rem;
+    border-left: 2px solid var(--border);
+    color: var(--muted);
+    font-style: normal;
+}
+.agent-markdown :not(pre) > code:not(:where(.not-prose, .not-prose *)) {
+    border: 1px solid var(--border);
+    border-radius: 0.375rem;
+    background: var(--muted-background);
+    color: var(--foreground);
+    padding: 0.1rem 0.35rem;
+    font-size: 0.8125em;
+    font-weight: 500;
+}
+.agent-markdown pre:not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.85rem;
+    margin-bottom: 0.85rem;
+    max-height: 32rem;
+    overflow: auto;
+    border: 1px solid var(--border);
+    border-radius: 0.75rem;
+    background: var(--muted-background);
+    color: var(--foreground);
+    padding: 0.875rem;
+    font-size: 0.8125rem;
+    line-height: 1.55;
+}
+.agent-markdown pre code:not(:where(.not-prose, .not-prose *)) {
+    border: 0;
+    background: transparent;
+    color: inherit;
+    padding: 0;
+    font-size: inherit;
+}
+.agent-markdown table:not(:where(.not-prose, .not-prose *)) {
+    display: table;
+    width: 100%;
+    max-width: 100%;
+    margin: 0.9rem 0 1rem;
+    border: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-size: 0.8125rem;
+    table-layout: fixed;
+    background: transparent;
+}
+.agent-markdown thead:not(:where(.not-prose, .not-prose *)) {
+    background: transparent;
+}
+.agent-markdown th:not(:where(.not-prose, .not-prose *)),
+.agent-markdown td:not(:where(.not-prose, .not-prose *)) {
+    border: 0;
+    border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
+    background: transparent;
+    padding: 0.55rem 0.75rem;
+    text-align: left;
+    vertical-align: top;
+    overflow-wrap: anywhere;
+    word-break: normal;
+    white-space: normal;
+}
+.agent-markdown th:not(:where(.not-prose, .not-prose *)) {
+    color: var(--muted);
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0;
+    text-transform: none;
+    white-space: nowrap;
+}
+.agent-markdown td:not(:where(.not-prose, .not-prose *)) {
+    color: inherit;
+}
+.agent-markdown th + th:not(:where(.not-prose, .not-prose *)),
+.agent-markdown td + td:not(:where(.not-prose, .not-prose *)) {
+    padding-inline-start: 1.75rem;
+}
+.agent-markdown th:first-child:not(:where(.not-prose, .not-prose *)),
+.agent-markdown td:first-child:not(:where(.not-prose, .not-prose *)) {
+    min-width: 0;
+    width: auto;
+    white-space: normal;
+}
+.agent-markdown col:not(:where(.not-prose, .not-prose *)) {
+    width: var(--agent-markdown-table-column-width);
+}
+.agent-markdown tr:last-child td:not(:where(.not-prose, .not-prose *)) {
+    border-bottom: 0;
+}
+.agent-markdown tbody tr:nth-child(even):not(:where(.not-prose, .not-prose *)) {
+    background: transparent;
+}
+.agent-markdown tbody tr:hover:not(:where(.not-prose, .not-prose *)) {
+    background: transparent;
+}
+`;

package/src/features/media-viewer/ImagePanel.tsx

@@ -1,5 +1,6 @@
 import { ContentNature, type ContentObject, ImageRenditionFormat } from '@vertesia/common';
-import { Spinner } from '@vertesia/ui/core';
+import { Button, Spinner } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
 import { useEffect, useState } from 'react';
 import { WEB_SUPPORTED_IMAGE_FORMATS } from './formats.js';
@@ -19,12 +20,27 @@ interface ImagePanelProps {
  * Renders an image from a direct URL, a storage source path, or a Vertesia ContentObject.
  * Resolution priority: `url` > `source` > `object`.
  */
-export function ImagePanel({ url, source, object, className }: ImagePanelProps) {
+export function ImagePanel(props: ImagePanelProps) {
+    const [attempt, setAttempt] = useState(0);
+    const identity =
+        props.url ??
+        props.source ??
+        `${props.object?.id}:${props.object?.content?.source}:${props.object?.content?.etag}`;
+    return (
+        <ImagePanelContent key={`${identity}:${attempt}`} {...props} onRetry={() => setAttempt((value) => value + 1)} />
+    );
+}
+
+function ImagePanelContent({ url, source, object, className, onRetry }: ImagePanelProps & { onRetry: () => void }) {
+    const { t } = useUITranslation();
+    const [failed, setFailed] = useState(false);
     const { client } = useUserSession();
     const [imageUrl, setImageUrl] = useState<string | undefined>(url);
     const [isLoading, setIsLoading] = useState<boolean>(!url && (!!source || !!object));
 
     useEffect(() => {
+        let active = true;
+        setFailed(false);
         if (url) {
             setImageUrl(url);
             setIsLoading(false);
@@ -37,17 +53,17 @@ export function ImagePanel({ url, source, object, className }: ImagePanelProps)
             try {
                 if (source) {
                     const downloadUrl = await client.files.getDownloadUrl(source);
-                    setImageUrl(downloadUrl.url);
+                    if (active) setImageUrl(downloadUrl.url);
                     return;
                 }
 
                 if (!object) return;
 
-                const isImage = object.metadata?.type === ContentNature.Image;
+                const mime = object.content?.type?.split(';', 1)[0].trim().toLowerCase();
+                const isImage = object.metadata?.type === ContentNature.Image || mime?.startsWith('image/');
                 if (!isImage) return;
 
-                const isOriginalWebSupported =
-                    object.content?.type && WEB_SUPPORTED_IMAGE_FORMATS.includes(object.content.type);
+                const isOriginalWebSupported = mime && WEB_SUPPORTED_IMAGE_FORMATS.includes(mime);
 
                 try {
                     const rendition = await client.objects.getRendition(object.id, {
@@ -56,7 +72,7 @@ export function ImagePanel({ url, source, object, className }: ImagePanelProps)
                         sign_url: true,
                     });
                     if (rendition.status === 'found' && rendition.renditions?.length) {
-                        setImageUrl(rendition.renditions[0]);
+                        if (active) setImageUrl(rendition.renditions[0]);
                         return;
                     }
                 } catch {
@@ -65,10 +81,14 @@ export function ImagePanel({ url, source, object, className }: ImagePanelProps)
 
                 if (isOriginalWebSupported && object.content?.source) {
                     const downloadUrl = await client.files.getDownloadUrl(object.content.source);
-                    setImageUrl(downloadUrl.url);
+                    if (active) setImageUrl(downloadUrl.url);
+                } else if (active) {
+                    setFailed(true);
                 }
+            } catch {
+                if (active) setFailed(true);
             } finally {
-                setIsLoading(false);
+                if (active) setIsLoading(false);
             }
         };
 
@@ -78,6 +98,9 @@ export function ImagePanel({ url, source, object, className }: ImagePanelProps)
         } else {
             setIsLoading(false);
         }
+        return () => {
+            active = false;
+        };
     }, [url, source, object, client]);
 
     if (isLoading) {
@@ -88,9 +111,27 @@ export function ImagePanel({ url, source, object, className }: ImagePanelProps)
         );
     }
 
+    if (failed) {
+        return (
+            <div role="alert" className={`flex flex-col items-center gap-2 p-4 ${className ?? ''}`.trim()}>
+                <p>{t('store.failedToLoadDocument')}</p>
+                <Button variant="outline" onClick={onRetry}>
+                    {t('agent.retry')}
+                </Button>
+            </div>
+        );
+    }
+
     if (!imageUrl) {
         return null;
     }
 
-    return <img src={imageUrl} alt={object?.name} className={`w-full object-contain ${className ?? ''}`.trim()} />;
+    return (
+        <img
+            src={imageUrl}
+            alt={object?.name ?? t('intakePolicy.option.image')}
+            onError={() => setFailed(true)}
+            className={`w-full object-contain ${className ?? ''}`.trim()}
+        />
+    );
 }

package/src/features/store/types/IntakePolicyEditor.tsx

@@ -547,6 +547,7 @@ export function IntakePolicyEditor({
         <div className="flex h-full min-h-0 w-full flex-col gap-2">
             <IntakeSummary policy={summaryPolicy} />
             <Tabs
+                orientation="vertical"
                 tabs={leadingTabs ? [...leadingTabs, ...policyTabs] : policyTabs}
                 current={activeTab}
                 onTabChange={onTabChange}
@@ -554,7 +555,7 @@ export function IntakePolicyEditor({
                 fullHeight
                 className="px-0 min-h-0 flex-1 flex-row!"
             >
-                <TabsBar className="py-2 w-48 shrink-0" direction="vertical" />
+                <TabsBar className="py-2 w-48 shrink-0" />
                 <TabsPanel className="min-h-0 min-w-0 flex-1 overflow-auto pb-0!" />
             </Tabs>
         </div>