@vertesia/ui 1.5.0-dev.20260722.120446Z → 1.5.0-dev.20260725.083715Z

package/src/core/components/shadcn/tabs.tsx

@@ -15,6 +15,17 @@ export interface Tab {
     is_allowed?: boolean;
 }
 
+/**
+ * Guard consulted before switching to another tab. Return `false` to cancel the switch — the active
+ * tab, the URL hash and the browser history are all left untouched, so the guard can hold the user
+ * on a tab that has unsaved changes while a confirmation is shown.
+ *
+ * It is only called when the target tab differs from the active one, but it may be called more than
+ * once for a single attempted switch (a click reaches both the trigger and the Radix root), so any
+ * side effect it performs must be idempotent.
+ */
+export type CanChangeTab = (nextTab: string, currentTab?: string) => boolean;
+
 const TabsContext = React.createContext<{
     size?: number;
     tabs?: Tab[];
@@ -23,6 +34,7 @@ const TabsContext = React.createContext<{
     responsive?: boolean;
     variant?: 'tabs' | 'pills';
     updateHash?: boolean;
+    canChangeTab?: CanChangeTab;
 }>({
     size: undefined,
     tabs: undefined,
@@ -45,6 +57,7 @@ interface TabsProps {
     responsive?: boolean;
     variant?: 'tabs' | 'pills';
     updateHash?: boolean;
+    canChangeTab?: CanChangeTab;
 }
 
 const Tabs = ({
@@ -59,6 +72,7 @@ const Tabs = ({
     responsive = false,
     variant = 'tabs',
     updateHash = true,
+    canChangeTab,
 }: TabsProps) => {
     // Filter tabs based on is_allowed (undefined or true means visible)
     const visibleTabs = React.useMemo(
@@ -121,6 +135,9 @@ const Tabs = ({
 
     const handleValueChange = React.useCallback(
         (newValue: string) => {
+            // Bail before touching the value or the history so a cancelled switch is a no-op.
+            if (newValue !== value && canChangeTab && !canChangeTab(newValue, value)) return;
+
             setValue(newValue);
 
             // Update the URL hash when tab changes (only if updateHash is true and not controlled by parent)
@@ -135,7 +152,7 @@ const Tabs = ({
                 onTabChange(newValue);
             }
         },
-        [current, onTabChange, updateHash],
+        [current, onTabChange, updateHash, canChangeTab, value],
     );
 
     const setTab = React.useCallback(
@@ -155,6 +172,7 @@ const Tabs = ({
                 responsive: responsive,
                 variant,
                 updateHash,
+                canChangeTab,
             }}
         >
             <TabsPrimitive.Root
@@ -176,13 +194,17 @@ interface TabsBarProps {
 }
 
 const TabsBar = ({ className, sticky, direction }: TabsBarProps) => {
-    const { tabs, size, current, setTab, responsive, variant, updateHash } = React.useContext(TabsContext);
+    const { tabs, size, current, setTab, responsive, variant, updateHash, canChangeTab } =
+        React.useContext(TabsContext);
 
     const fullWidth = size !== 0;
 
     const handleTabChange = React.useCallback(
         (tabName: string) => {
             if (!tabs || !setTab) return;
+            // Consulted here too: this path pushes the tab href before `setTab` reaches the guard in
+            // `Tabs`, so a cancelled switch would otherwise leave the URL pointing at the other tab.
+            if (tabName !== current && canChangeTab && !canChangeTab(tabName, current)) return;
 
             const tab = tabs.find((t) => t.name === tabName);
 
@@ -194,7 +216,7 @@ const TabsBar = ({ className, sticky, direction }: TabsBarProps) => {
 
             setTab(tabName);
         },
-        [tabs, setTab, updateHash],
+        [tabs, setTab, updateHash, canChangeTab, current],
     );
 
     if (!tabs || !setTab) {

package/src/features/agent/chat/AgentRightPanel.tsx

@@ -633,6 +633,10 @@ export interface AgentRightPanelProps {
     /** Show the Artifacts tab (opt-in, default false) */
     showArtifacts?: boolean;
     artifactRefreshKey?: number;
+    artifactRefreshDetails?: Record<string, unknown>;
+    selectedArtifactPath?: string | null;
+    onSelectedArtifactPathChange?: (path: string | null) => void;
+    onSendMessage?: (message: string, inputMetadata?: Record<string, unknown>) => void;
 
     // Panel control
     onClose: () => void;
@@ -672,6 +676,10 @@ function AgentRightPanelComponent({
     // Artifacts
     showArtifacts = false,
     artifactRefreshKey = 0,
+    artifactRefreshDetails,
+    selectedArtifactPath,
+    onSelectedArtifactPathChange,
+    onSendMessage,
 
     // Payload
     payloadContent,
@@ -811,7 +819,14 @@ function AgentRightPanelComponent({
             label: t('agent.artifacts'),
             content: withTabBoundary(
                 t('agent.artifacts'),
-                <ArtifactsTab runId={runId} refreshKey={artifactRefreshKey} />,
+                <ArtifactsTab
+                    runId={runId}
+                    refreshKey={artifactRefreshKey}
+                    refreshDetails={artifactRefreshDetails}
+                    selectedPath={selectedArtifactPath}
+                    onSelectedPathChange={onSelectedArtifactPathChange}
+                    onSendMessage={onSendMessage}
+                />,
             ),
             is_allowed: showArtifacts,
         },

package/src/features/agent/chat/ArtifactsTab.test.tsx

@@ -0,0 +1,55 @@
+/** @vitest-environment jsdom */
+
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import type { ComponentProps } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { I18nProvider } from '../../../i18n/index.js';
+import { ArtifactsTab } from './ArtifactsTab.js';
+
+vi.mock('@vertesia/ui/session', () => ({
+    useUserSession: () => ({ client: {} }),
+}));
+
+vi.mock('@vertesia/ui/widgets', () => ({
+    ArtifactEditingSurface: ({ viewMode }: { viewMode?: 'components' | 'document' }) => (
+        <div data-testid="artifact-editing-surface" data-view-mode={viewMode} />
+    ),
+}));
+
+vi.mock('./hooks/useArtifacts.js', () => ({
+    useArtifacts: () => ({
+        tree: [],
+        flatFiles: [{ path: 'drafts/brief.md' }],
+        isLoading: false,
+        error: undefined,
+        refresh: vi.fn(),
+    }),
+}));
+
+afterEach(cleanup);
+
+function renderArtifactEditor(props?: Partial<ComponentProps<typeof ArtifactsTab>>) {
+    return render(
+        <I18nProvider lng="en">
+            <ArtifactsTab runId="run-1" selectedPath="drafts/brief.md" onSendMessage={vi.fn()} {...props} />
+        </I18nProvider>,
+    );
+}
+
+describe('ArtifactsTab', () => {
+    it('opens editable artifacts in block mode by default', () => {
+        renderArtifactEditor();
+
+        expect(screen.getByTestId('artifact-editing-surface').getAttribute('data-view-mode')).toBe('components');
+        expect(screen.getByRole('button', { name: 'Block mode' }).getAttribute('aria-pressed')).toBe('true');
+    });
+
+    it('allows switching from block mode to the full editor', () => {
+        renderArtifactEditor();
+
+        fireEvent.click(screen.getByRole('button', { name: 'Edit mode' }));
+
+        expect(screen.getByTestId('artifact-editing-surface').getAttribute('data-view-mode')).toBe('document');
+        expect(screen.getByRole('button', { name: 'Edit mode' }).getAttribute('aria-pressed')).toBe('true');
+    });
+});

package/src/features/agent/chat/ArtifactsTab.tsx

@@ -1,17 +1,21 @@
-import { Button, Center, ErrorBox, Input, Modal, ModalBody, ModalTitle, Switch } from '@vertesia/ui/core';
+import { Button, Center, cn, ErrorBox, Input, Modal, ModalBody, ModalTitle, Switch, VTooltip } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
+import { ArtifactEditingSurface, type ArtifactSaveStatus, type MarkdownEditingAction } from '@vertesia/ui/widgets';
 import {
+    ArrowLeftIcon,
+    CheckIcon,
     ChevronDownIcon,
     ChevronRightIcon,
     DownloadIcon,
-    EyeIcon,
     FileIcon,
     FolderIcon,
     FolderOpenIcon,
     Loader2Icon,
     PackageIcon,
+    PenLineIcon,
     RefreshCwIcon,
+    Rows3Icon,
 } from 'lucide-react';
 import React, { useCallback, useId, useMemo, useState } from 'react';
 import type { UniversalDocumentSource } from '../../document-viewer/UniversalDocumentViewer.js';
@@ -22,6 +26,14 @@ const UniversalDocumentViewer = React.lazy(async () => {
     return { default: module.UniversalDocumentViewer };
 });
 
+/** Artifact file extensions that open in the Markdown editor rather than downloading. */
+const EDITABLE_ARTIFACT_EXTENSIONS = new Set(['md', 'markdown', 'mdx', 'txt']);
+
+function isEditableArtifact(path: string): boolean {
+    const extension = path.split('.').pop()?.toLowerCase();
+    return extension !== undefined && EDITABLE_ARTIFACT_EXTENSIONS.has(extension);
+}
+
 // ---------------------------------------------------------------------------
 // Tree node component
 // ---------------------------------------------------------------------------
@@ -30,26 +42,18 @@ interface TreeNodeProps {
     node: ArtifactTreeNode;
     depth: number;
     runId: string;
-    onPreview: (relativePath: string) => void;
+    onOpen: (relativePath: string) => void;
     onDownload: (relativePath: string) => void;
     downloadingPath: string | null;
     forceExpanded?: boolean;
 }
-
 //** Convert a raw directory segment (e.g. "out_files") into a readable label ("Out Files"). */
 function formatDirectoryLabel(name: string): string {
     return name.replace(/[_-]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
 }
 
-function TreeNode({
-    node,
-    depth,
-    runId,
-    onPreview,
-    onDownload,
-    downloadingPath,
-    forceExpanded = false,
-}: TreeNodeProps) {
+function TreeNode({ node, depth, runId, onOpen, onDownload, downloadingPath, forceExpanded = false }: TreeNodeProps) {
+    const { t } = useUITranslation();
     const [expanded, setExpanded] = useState(false);
     const isExpanded = forceExpanded || expanded;
 
@@ -84,7 +88,7 @@ function TreeNode({
                             node={child}
                             depth={depth + 1}
                             runId={runId}
-                            onPreview={onPreview}
+                            onOpen={onOpen}
                             onDownload={onDownload}
                             downloadingPath={downloadingPath}
                             forceExpanded={forceExpanded}
@@ -97,45 +101,33 @@ function TreeNode({
     const isDownloading = downloadingPath === node.path;
 
     return (
-        <div
-            className="group flex min-w-0 items-center gap-1.5 rounded text-sm hover:bg-muted/30"
-            style={{ paddingInlineStart: `${depth * 14 + 4}px` }}
-        >
+        <div className="flex min-w-0 items-center gap-1">
             <Button
                 variant="unstyled"
-                className="flex min-w-0 flex-1 items-center justify-start gap-1.5 px-1 py-1 text-start"
-                onClick={() => onPreview(node.path)}
+                className="flex min-w-0 flex-1 items-center justify-start gap-1.5 rounded px-1 py-1 text-start text-sm hover:bg-muted/30"
+                style={{ paddingInlineStart: `${depth * 14 + 4}px` }}
+                onClick={() => onOpen(node.path)}
                 title={node.path}
             >
                 <span className="size-3.5 shrink-0" />
                 <FileIcon className="size-4 shrink-0 text-muted" />
                 <span className="min-w-0 truncate">{node.name}</span>
             </Button>
-            <div className="flex shrink-0 items-center pe-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
-                <Button
-                    variant="ghost"
-                    size="xs"
-                    className="h-6 w-6 p-0"
-                    onClick={() => onPreview(node.path)}
-                    aria-label="Preview artifact"
-                >
-                    <EyeIcon className="size-3.5" />
-                </Button>
-                <Button
-                    variant="ghost"
-                    size="xs"
-                    className="h-6 w-6 p-0"
-                    onClick={() => onDownload(node.path)}
-                    disabled={isDownloading}
-                    aria-label="Download artifact"
-                >
-                    {isDownloading ? (
-                        <Loader2Icon className="size-3.5 animate-spin text-info" />
-                    ) : (
-                        <DownloadIcon className="size-3.5" />
-                    )}
-                </Button>
-            </div>
+            <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 w-7 shrink-0 p-0"
+                onClick={() => onDownload(node.path)}
+                disabled={isDownloading}
+                aria-label={t('agent.download')}
+                title={t('agent.download')}
+            >
+                {isDownloading ? (
+                    <Loader2Icon className="size-3.5 animate-spin text-info" />
+                ) : (
+                    <DownloadIcon className="size-3.5" />
+                )}
+            </Button>
         </div>
     );
 }
@@ -184,8 +176,8 @@ function downloadUrl(url: string, filename: string) {
 }
 
 function getArtifactContentType(path: string): string | undefined {
-    const ext = path.split('.').pop()?.toLowerCase();
-    switch (ext) {
+    const extension = path.split('.').pop()?.toLowerCase();
+    switch (extension) {
         case 'css':
             return 'text/css';
         case 'gif':
@@ -226,6 +218,128 @@ function getArtifactContentType(path: string): string | undefined {
 interface ArtifactsTabProps {
     runId?: string;
     refreshKey?: number;
+    refreshDetails?: Record<string, unknown>;
+    selectedPath?: string | null;
+    onSelectedPathChange?: (path: string | null) => void;
+    onSendMessage?: (message: string, inputMetadata?: Record<string, unknown>) => void;
+}
+
+interface ArtifactMarkdownEditorProps {
+    runId: string;
+    path: string;
+    onBack: () => void;
+    onDownload: (path: string) => void;
+    refreshKey?: number;
+    refreshDetails?: Record<string, unknown>;
+    onSendMessage?: (message: string, inputMetadata?: Record<string, unknown>) => void;
+}
+
+function ArtifactMarkdownEditor({
+    runId,
+    path,
+    onBack,
+    onDownload,
+    refreshKey,
+    refreshDetails,
+    onSendMessage,
+}: ArtifactMarkdownEditorProps) {
+    const { t } = useUITranslation();
+    const [viewMode, setViewMode] = useState<'components' | 'document'>('components');
+    const [saveStatus, setSaveStatus] = useState<ArtifactSaveStatus>('idle');
+
+    const handleAction = (action: MarkdownEditingAction) => {
+        if (!onSendMessage) return;
+        const blockType = action.anchor.block_type.replaceAll('_', ' ');
+        const displayMessage = action.comment?.trim() || t('agent.editedSelectionMessage', { blockType });
+        onSendMessage(displayMessage, { editing_action: action });
+    };
+
+    return (
+        <div className="flex h-full min-h-0 flex-col">
+            <div className="flex shrink-0 items-center gap-1 border-b border-border/60 px-2 py-1">
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="size-8 shrink-0 rounded-md p-0"
+                    onClick={onBack}
+                    aria-label={t('agent.backToArtifacts')}
+                    title={t('agent.backToArtifacts')}
+                >
+                    <ArrowLeftIcon className="size-4 cn-rtl-flip" />
+                </Button>
+                <div className="flex min-w-0 flex-1 items-center gap-1.5">
+                    <span className="truncate text-sm font-medium" title={path}>
+                        {path.split('/').pop()}
+                    </span>
+                    {saveStatus === 'saving' ? (
+                        <VTooltip description={t('agent.savingWorkingCopy')} asChild>
+                            <Loader2Icon
+                                className="size-3.5 shrink-0 animate-spin text-muted"
+                                aria-label={t('agent.savingWorkingCopy')}
+                            />
+                        </VTooltip>
+                    ) : saveStatus === 'saved' ? (
+                        <VTooltip description={t('agent.savedToWorkingCopy')} asChild>
+                            <CheckIcon
+                                className="size-3.5 shrink-0 text-success"
+                                aria-label={t('agent.savedToWorkingCopy')}
+                            />
+                        </VTooltip>
+                    ) : null}
+                </div>
+                <div className="flex items-center gap-0.5">
+                    <Button
+                        variant={viewMode === 'components' ? 'primary' : 'ghost'}
+                        size="sm"
+                        className="size-8 shrink-0 rounded-md p-0"
+                        onClick={() => setViewMode('components')}
+                        aria-label={t('agent.blockMode')}
+                        aria-pressed={viewMode === 'components'}
+                        title={t('agent.blockMode')}
+                    >
+                        <Rows3Icon className="size-4" />
+                    </Button>
+                    <Button
+                        variant={viewMode === 'document' ? 'primary' : 'ghost'}
+                        size="sm"
+                        className="size-8 shrink-0 rounded-md p-0"
+                        onClick={() => setViewMode('document')}
+                        aria-label={t('agent.editMode')}
+                        aria-pressed={viewMode === 'document'}
+                        title={t('agent.editMode')}
+                    >
+                        <PenLineIcon className="size-4" />
+                    </Button>
+                </div>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="size-8 shrink-0 rounded-md p-0"
+                    onClick={() => onDownload(path)}
+                    aria-label={t('agent.download')}
+                    title={t('agent.download')}
+                >
+                    <DownloadIcon className="size-4" />
+                </Button>
+            </div>
+            <ArtifactEditingSurface
+                runId={runId}
+                path={path}
+                viewMode={viewMode}
+                refreshKey={refreshKey}
+                refreshDetails={refreshDetails}
+                readOnly={!onSendMessage}
+                onAction={handleAction}
+                onSaveStatusChange={setSaveStatus}
+                onSendMessage={onSendMessage ? (message) => onSendMessage(message) : undefined}
+                className={cn(
+                    'relative min-h-0 flex-1',
+                    // Edit mode self-scrolls; block mode needs the surface to scroll and pad its blocks.
+                    viewMode === 'document' ? 'overflow-hidden' : 'overflow-y-auto px-6 py-5',
+                )}
+            />
+        </div>
+    );
 }
 
 function ArtifactEmptyState({
@@ -246,7 +360,14 @@ function ArtifactEmptyState({
     );
 }
 
-function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
+function ArtifactsTabComponent({
+    runId,
+    refreshKey = 0,
+    refreshDetails,
+    selectedPath,
+    onSelectedPathChange,
+    onSendMessage,
+}: ArtifactsTabProps) {
     const { t } = useUITranslation();
     const { client } = useUserSession();
     const [showSystem, setShowSystem] = useState(false);
@@ -259,6 +380,15 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
     const [downloadingPath, setDownloadingPath] = useState<string | null>(null);
     const [previewPath, setPreviewPath] = useState<string | null>(null);
     const [filterValue, setFilterValue] = useState('');
+    const [internalSelectedPath, setInternalSelectedPath] = useState<string | null>(null);
+    const activeSelectedPath = selectedPath === undefined ? internalSelectedPath : selectedPath;
+    const setSelectedPath = useCallback(
+        (path: string | null) => {
+            if (selectedPath === undefined) setInternalSelectedPath(path);
+            onSelectedPathChange?.(path);
+        },
+        [onSelectedPathChange, selectedPath],
+    );
     const normalizedFilterValue = filterValue.trim();
     const filteredTree = useMemo(() => filterArtifactTree(tree, normalizedFilterValue), [tree, normalizedFilterValue]);
     const visibleFileCount = useMemo(() => countTreeFiles(filteredTree), [filteredTree]);
@@ -280,9 +410,16 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
         [client, runId],
     );
 
-    const handlePreview = useCallback((relativePath: string) => {
-        setPreviewPath(relativePath);
-    }, []);
+    const handleOpen = useCallback(
+        (relativePath: string) => {
+            if (isEditableArtifact(relativePath)) {
+                setSelectedPath(relativePath);
+                return;
+            }
+            setPreviewPath(relativePath);
+        },
+        [setSelectedPath],
+    );
 
     const previewSource: UniversalDocumentSource | null =
         runId && previewPath
@@ -345,6 +482,20 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
         );
     }
 
+    if (activeSelectedPath) {
+        return (
+            <ArtifactMarkdownEditor
+                runId={runId}
+                path={activeSelectedPath}
+                refreshKey={refreshKey}
+                refreshDetails={refreshDetails}
+                onBack={() => setSelectedPath(null)}
+                onDownload={(path) => void handleDownload(path)}
+                onSendMessage={onSendMessage}
+            />
+        );
+    }
+
     return (
         <div className="flex flex-col h-full">
             {/* Top bar */}
@@ -396,7 +547,7 @@ function ArtifactsTabComponent({ runId, refreshKey = 0 }: ArtifactsTabProps) {
                                 node={node}
                                 depth={0}
                                 runId={runId}
-                                onPreview={handlePreview}
+                                onOpen={handleOpen}
                                 onDownload={handleDownload}
                                 downloadingPath={downloadingPath}
                                 forceExpanded={!!normalizedFilterValue}

package/src/features/agent/chat/DocumentEditingActionCard.test.tsx

@@ -0,0 +1,105 @@
+/** @vitest-environment jsdom */
+
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { I18nProvider } from '../../../i18n/index.js';
+import { DocumentEditingActionCard, parseMarkdownEditingAction } from './DocumentEditingActionCard.js';
+
+afterEach(cleanup);
+
+const action = {
+    operation_id: 'operation-1',
+    resource: { kind: 'store_document', document_id: 'document-1', name: 'Launch plan' },
+    action: 'comment',
+    anchor: {
+        block_id: 'list_item:10:24',
+        block_type: 'list_item',
+        exact_text: '- Preserve unrelated sections.',
+    },
+    comment: 'Add one concrete example.',
+};
+
+describe('DocumentEditingActionCard', () => {
+    it('parses and renders a compact comment card', () => {
+        const parsed = parseMarkdownEditingAction(action);
+        expect(parsed).toBeDefined();
+        if (!parsed) throw new Error('Expected a valid editing action');
+
+        render(
+            <I18nProvider lng="en">
+                <DocumentEditingActionCard action={parsed} />
+            </I18nProvider>,
+        );
+
+        expect(screen.getByText('Add one concrete example.')).not.toBeNull();
+        expect(screen.getByText('list item')).not.toBeNull();
+        expect(screen.getByText('Launch plan')).not.toBeNull();
+        expect(screen.queryByText('operation-1')).toBeNull();
+    });
+
+    it('renders an applied edit as a saved notification', () => {
+        const parsed = parseMarkdownEditingAction({
+            operation_id: 'operation-2',
+            resource: { kind: 'store_document', document_id: 'document-1', name: 'Launch plan' },
+            action: 'edit',
+            anchor: {
+                block_id: 'list:10:24',
+                block_type: 'list',
+                exact_text: '- Preserve unrelated sections.',
+            },
+            user_change: {
+                before: '- Preserve unrelated sections.',
+                after: '- Preserve unrelated sections.\n- And be fun',
+            },
+            applied: true,
+            updated_document_id: 'document-2',
+        });
+        expect(parsed).toBeDefined();
+        if (!parsed) throw new Error('Expected a valid editing action');
+        expect(parsed.applied).toBe(true);
+        expect(parsed.updated_document_id).toBe('document-2');
+
+        render(
+            <I18nProvider lng="en">
+                <DocumentEditingActionCard action={parsed} />
+            </I18nProvider>,
+        );
+
+        expect(screen.getByText('Edit applied')).not.toBeNull();
+        expect(screen.getByText('list')).not.toBeNull();
+        expect(screen.getByText('Launch plan')).not.toBeNull();
+    });
+
+    it('highlights the change as an inline diff', () => {
+        const parsed = parseMarkdownEditingAction({
+            operation_id: 'operation-3',
+            resource: { kind: 'store_document', document_id: 'document-1', name: 'Launch plan' },
+            action: 'edit',
+            anchor: {
+                block_id: 'paragraph:30:40',
+                block_type: 'paragraph',
+                exact_text: 'Keep the tone light.',
+            },
+            user_change: {
+                before: 'Keep the tone light.',
+                after: 'Keep the tone light. Session edit A.',
+            },
+        });
+        if (!parsed) throw new Error('Expected a valid editing action');
+
+        const { container } = render(
+            <I18nProvider lng="en">
+                <DocumentEditingActionCard action={parsed} />
+            </I18nProvider>,
+        );
+
+        const inserted = container.querySelector('ins');
+        expect(inserted?.textContent).toBe(' Session edit A.');
+        expect(container.querySelector('del')).toBeNull();
+        expect(screen.getByText('Keep the tone light.')).not.toBeNull();
+    });
+
+    it('rejects malformed editing metadata', () => {
+        expect(parseMarkdownEditingAction({ action: 'comment' })).toBeUndefined();
+    });
+});