@vertesia/ui 1.5.0-dev.20260901.052906Z → 1.5.0-dev.20260910.051115Z

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

@@ -3,28 +3,25 @@ import { useUITranslation } from '@vertesia/ui/i18n';
 import { NavLink } from '@vertesia/ui/router';
 import { useUserSession } from '@vertesia/ui/session';
 import { MarkdownRenderer } from '@vertesia/ui/widgets';
-import { ExternalLinkIcon, FileTextIcon, Loader2Icon, X } from 'lucide-react';
+import { ArrowLeftIcon, ExternalLinkIcon, FileTextIcon, Loader2Icon } from 'lucide-react';
 import React, { useCallback, useEffect, useState } from 'react';
-import { DocumentTabBar } from './DocumentTabBar.js';
-import type { OpenDocument } from './types/document.js';
 
 interface DocumentPanelProps {
-    isOpen: boolean;
-    documents: OpenDocument[];
-    activeDocumentId: string | null;
-    onSelectDocument: (id: string) => void;
-    onCloseDocument: (id: string) => void;
+    /** Document currently displayed. */
+    documentId: string;
+    /** Title known by the list, shown until the document itself is loaded. */
+    title?: string;
+    /** Return to the document list. */
+    onBack: () => void;
     onUpdateDocumentTitle?: (id: string, title: string) => void;
     refreshKey: number;
     runId?: string;
 }
 
 function DocumentPanelComponent({
-    isOpen,
-    documents,
-    activeDocumentId,
-    onSelectDocument,
-    onCloseDocument,
+    documentId,
+    title,
+    onBack,
     onUpdateDocumentTitle,
     refreshKey,
     runId,
@@ -60,48 +57,42 @@ function DocumentPanelComponent({
         [client, onUpdateDocumentTitle, t],
     );
 
-    // Fetch content when active document changes or refreshKey bumps
+    // Fetch content when the displayed document changes or refreshKey bumps
     useEffect(() => {
         void refreshKey;
-        if (activeDocumentId && isOpen) {
-            void fetchContent(activeDocumentId);
-        }
-    }, [activeDocumentId, refreshKey, isOpen, fetchContent]);
-
-    if (!isOpen || documents.length === 0) {
-        return null;
-    }
+        void fetchContent(documentId);
+    }, [documentId, refreshKey, fetchContent]);
 
     return (
-        <div className="h-full shadow-xl border border-muted/20 overflow-hidden flex flex-col">
+        <div className="h-full overflow-hidden flex flex-col">
             {/* Header */}
-            <div className="flex items-center justify-between px-3 py-2 border-b border-muted/20 shrink-0">
-                <div className="flex items-center gap-2 min-w-0">
+            <div className="flex items-center justify-between gap-1 px-2 py-1 border-b border-border/60 shrink-0">
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="size-8 shrink-0 rounded-md p-0"
+                    onClick={onBack}
+                    aria-label={t('agent.backToDocuments')}
+                    title={t('agent.backToDocuments')}
+                >
+                    <ArrowLeftIcon className="size-4 cn-rtl-flip" />
+                </Button>
+                <div className="flex items-center gap-1.5 min-w-0 flex-1">
                     <FileTextIcon className="size-4 text-muted shrink-0" />
-                    <h3 className="font-bold text-sm truncate">{docName || t('agent.document')}</h3>
-                </div>
-                <div className="flex items-center gap-1">
-                    <DocumentTabBar documents={documents} activeId={activeDocumentId} onSelect={onSelectDocument} />
-                    {activeDocumentId && (
-                        <NavLink
-                            href={`/store/objects/${activeDocumentId}#overview`}
-                            topLevelNav
-                            className="inline-flex items-center justify-center rounded-md text-sm font-medium h-8 w-8 hover:bg-muted/20 text-muted hover:text-foreground"
-                        >
-                            <VTooltip description={t('agent.openDocument')} placement="top" size="xs">
-                                <ExternalLinkIcon className="size-4" />
-                            </VTooltip>
-                        </NavLink>
-                    )}
-                    <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => activeDocumentId && onCloseDocument(activeDocumentId)}
-                        title={t('agent.close')}
-                    >
-                        <X className="size-4" />
-                    </Button>
+                    <span className="truncate text-sm font-medium" title={docName || title}>
+                        {docName || title || t('agent.document')}
+                    </span>
                 </div>
+                <NavLink
+                    href={`/store/objects/${documentId}#overview`}
+                    topLevelNav
+                    className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted hover:bg-muted/20 hover:text-foreground"
+                >
+                    <VTooltip description={t('agent.openDocument')} placement="top" size="xs" asChild>
+                        <ExternalLinkIcon className="size-4" aria-hidden="true" />
+                    </VTooltip>
+                    <span className="sr-only">{t('agent.openDocument')}</span>
+                </NavLink>
             </div>
 
             {/* Content area */}

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

@@ -0,0 +1,87 @@
+/** @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 { DocumentsTab } from './DocumentsTab.js';
+
+vi.mock('@vertesia/ui/session', () => ({
+    useUserSession: () => ({
+        client: {
+            store: {
+                objects: {
+                    getObjectText: vi.fn().mockResolvedValue({ text: 'Brief body' }),
+                    retrieve: vi.fn().mockResolvedValue({ name: 'Brief' }),
+                },
+            },
+        },
+    }),
+}));
+
+vi.mock('@vertesia/ui/router', () => ({
+    NavLink: ({ href, children }: { href: string; children: React.ReactNode }) => <a href={href}>{children}</a>,
+}));
+
+vi.mock('@vertesia/ui/widgets', () => ({
+    MarkdownRenderer: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+afterEach(cleanup);
+
+const documents = [
+    { id: 'doc-1', title: 'Brief' },
+    { id: 'doc-2', title: 'Summary' },
+];
+
+function renderDocumentsTab(props?: Partial<ComponentProps<typeof DocumentsTab>>) {
+    const onSelectDocument = vi.fn();
+    render(
+        <I18nProvider lng="en">
+            <DocumentsTab
+                documents={documents}
+                activeDocumentId={null}
+                onSelectDocument={onSelectDocument}
+                refreshKey={0}
+                {...props}
+            />
+        </I18nProvider>,
+    );
+    return { onSelectDocument };
+}
+
+describe('DocumentsTab', () => {
+    it('lists the open documents when none is selected', () => {
+        renderDocumentsTab();
+
+        expect(screen.getByText('2 documents')).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Brief' })).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Summary' })).toBeTruthy();
+    });
+
+    it('links each list entry to its document page', () => {
+        renderDocumentsTab();
+
+        const links = screen.getAllByRole('link', { name: 'Open document' });
+        expect(links.map((link) => link.getAttribute('href'))).toEqual([
+            '/store/objects/doc-1#overview',
+            '/store/objects/doc-2#overview',
+        ]);
+    });
+
+    it('selects a document when its list entry is clicked', () => {
+        const { onSelectDocument } = renderDocumentsTab();
+
+        fireEvent.click(screen.getByRole('button', { name: 'Brief' }));
+
+        expect(onSelectDocument).toHaveBeenCalledWith('doc-1');
+    });
+
+    it('goes back to the list from the selected document', () => {
+        const { onSelectDocument } = renderDocumentsTab({ activeDocumentId: 'doc-1' });
+
+        fireEvent.click(screen.getByRole('button', { name: 'Back to documents' }));
+
+        expect(onSelectDocument).toHaveBeenCalledWith(null);
+    });
+});

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

@@ -0,0 +1,124 @@
+import { Button, Input, VTooltip } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { NavLink } from '@vertesia/ui/router';
+import { ExternalLinkIcon, FileTextIcon } from 'lucide-react';
+import React, { useCallback, useId, useMemo, useState } from 'react';
+import { DocumentPanel } from './DocumentPanel.js';
+import type { OpenDocument } from './types/document.js';
+
+/** Below this many documents the list is short enough that a filter box is just noise. */
+const FILTER_VISIBILITY_THRESHOLD = 5;
+
+interface DocumentsTabProps {
+    documents: OpenDocument[];
+    /** Document shown in the detail view; `null` shows the list. */
+    activeDocumentId: string | null;
+    onSelectDocument: (id: string | null) => void;
+    onUpdateDocumentTitle?: (id: string, title: string) => void;
+    refreshKey: number;
+    runId?: string;
+}
+
+function DocumentsTabComponent({
+    documents,
+    activeDocumentId,
+    onSelectDocument,
+    onUpdateDocumentTitle,
+    refreshKey,
+    runId,
+}: DocumentsTabProps) {
+    const { t } = useUITranslation();
+    const [filterValue, setFilterValue] = useState('');
+    const filterInputId = useId();
+
+    const normalizedFilterValue = filterValue.trim().toLocaleLowerCase();
+    const filteredDocuments = useMemo(() => {
+        if (!normalizedFilterValue) return documents;
+        return documents.filter((doc) => doc.title.toLocaleLowerCase().includes(normalizedFilterValue));
+    }, [documents, normalizedFilterValue]);
+
+    const handleBack = useCallback(() => onSelectDocument(null), [onSelectDocument]);
+
+    const activeDocument = activeDocumentId ? documents.find((doc) => doc.id === activeDocumentId) : undefined;
+
+    if (activeDocumentId) {
+        return (
+            <DocumentPanel
+                documentId={activeDocumentId}
+                title={activeDocument?.title}
+                onBack={handleBack}
+                onUpdateDocumentTitle={onUpdateDocumentTitle}
+                refreshKey={refreshKey}
+                runId={runId}
+            />
+        );
+    }
+
+    return (
+        <div className="flex flex-col h-full">
+            {/* Top bar */}
+            <div className="flex shrink-0 flex-col gap-2 border-b px-3 py-2">
+                <span className="text-xs text-muted">
+                    {normalizedFilterValue
+                        ? t('agent.documentsFiltered', {
+                              visible: filteredDocuments.length,
+                              total: documents.length,
+                          })
+                        : t('agent.documentCount', { count: documents.length })}
+                </span>
+                {documents.length > FILTER_VISIBILITY_THRESHOLD && (
+                    <>
+                        <label htmlFor={filterInputId} className="sr-only">
+                            {t('form.filter')}
+                        </label>
+                        <Input
+                            id={filterInputId}
+                            type="text"
+                            role="searchbox"
+                            autoComplete="off"
+                            placeholder={t('store.searchPlaceholder')}
+                            value={filterValue}
+                            onChange={setFilterValue}
+                            clearable={true}
+                        />
+                    </>
+                )}
+            </div>
+
+            {/* List */}
+            <div className="flex-1 overflow-y-auto px-3 py-2">
+                {filteredDocuments.length > 0 ? (
+                    <div className="min-w-0">
+                        {filteredDocuments.map((doc) => (
+                            <div key={doc.id} 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 rounded px-1 py-1 text-start text-sm hover:bg-muted/30"
+                                    onClick={() => onSelectDocument(doc.id)}
+                                    title={doc.title}
+                                >
+                                    <FileTextIcon className="size-4 shrink-0 text-muted" />
+                                    <span className="min-w-0 truncate">{doc.title}</span>
+                                </Button>
+                                <NavLink
+                                    href={`/store/objects/${doc.id}#overview`}
+                                    topLevelNav
+                                    className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted hover:bg-muted/20 hover:text-foreground"
+                                >
+                                    <VTooltip description={t('agent.openDocument')} placement="top" size="xs" asChild>
+                                        <ExternalLinkIcon className="size-3.5" aria-hidden="true" />
+                                    </VTooltip>
+                                    <span className="sr-only">{t('agent.openDocument')}</span>
+                                </NavLink>
+                            </div>
+                        ))}
+                    </div>
+                ) : (
+                    <div className="px-1 py-6 text-sm text-muted">{t('agent.noMatchingDocuments')}</div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export const DocumentsTab = React.memo(DocumentsTabComponent);

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

@@ -9,15 +9,15 @@ export function JumpingDots({ className, inline = false }: JumpingDotsProps) {
     return (
         <div className={cn('flex items-center gap-1', inline ? 'inline-flex' : '', className)}>
             <div
-                className="w-2 h-2 bg-blue-500 rounded-full animate-[jumping_1s_infinite_ease-in-out] hover:bg-blue-600"
+                className="w-2 h-2 bg-primary rounded-full animate-[jumping_1s_infinite_ease-in-out] hover:bg-primary"
                 style={{ transform: 'translateY(0)', animationRange: '0px -8px' }}
             />
             <div
-                className="w-2 h-2 bg-blue-500 rounded-full animate-[jumping_1s_0.3s_infinite_ease-in-out] hover:bg-blue-600"
+                className="w-2 h-2 bg-primary rounded-full animate-[jumping_1s_0.3s_infinite_ease-in-out] hover:bg-primary"
                 style={{ transform: 'translateY(0)', animationRange: '0px -8px' }}
             />
             <div
-                className="w-2 h-2 bg-blue-500 rounded-full animate-[jumping_1s_0.6s_infinite_ease-in-out] hover:bg-blue-600"
+                className="w-2 h-2 bg-primary rounded-full animate-[jumping_1s_0.6s_infinite_ease-in-out] hover:bg-primary"
                 style={{ transform: 'translateY(0)', animationRange: '0px -8px' }}
             />
         </div>

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

@@ -282,7 +282,6 @@ describe('ModernAgentConversation send handling', () => {
             isDocPanelOpen: false,
             docRefreshKey: 0,
             closeDocPanel: vi.fn(),
-            closeDocument: vi.fn(),
             selectDocument: vi.fn(),
             openDocInPanel: vi.fn(),
             updateDocumentTitle: vi.fn(),

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

@@ -1561,7 +1561,6 @@ function ModernAgentConversationInner({
         isDocPanelOpen,
         docRefreshKey,
         closeDocPanel: handleCloseDocPanel,
-        closeDocument: handleCloseDocument,
         selectDocument,
         openDocInPanel,
         updateDocumentTitle,
@@ -2971,7 +2970,7 @@ function ModernAgentConversationInner({
                     ref={conversationLayoutRef}
                     className={cn(
                         'flex flex-col lg:flex-row gap-2 w-full h-full relative overflow-hidden',
-                        canUploadFiles && isDragOver && 'ring-2 ring-blue-400 ring-inset',
+                        canUploadFiles && isDragOver && 'ring-2 ring-info ring-inset',
                         className,
                     )}
                     onDragEnter={canUploadFiles ? handleDragEnter : undefined}
@@ -2981,8 +2980,8 @@ function ModernAgentConversationInner({
                 >
                     {/* Drag overlay for full-panel file drop */}
                     {canUploadFiles && isDragOver && (
-                        <div className="absolute inset-0 flex items-center justify-center bg-blue-100/80 dark:bg-blue-900/40 z-50 pointer-events-none rounded-lg">
-                            <div className="text-blue-600 dark:text-blue-400 font-medium flex items-center gap-2 text-lg">
+                        <div className="absolute inset-0 flex items-center justify-center bg-info/80 dark:bg-info/40 z-50 pointer-events-none rounded-lg">
+                            <div className="text-info font-medium flex items-center gap-2 text-lg">
                                 <UploadIcon className="size-6" />
                                 Drop files to upload
                             </div>
@@ -3062,7 +3061,6 @@ function ModernAgentConversationInner({
                                     openDocuments={openDocuments}
                                     activeDocumentId={activeDocumentId}
                                     onSelectDocument={selectDocument}
-                                    onCloseDocument={handleCloseDocument}
                                     onUpdateDocumentTitle={updateDocumentTitle}
                                     docRefreshKey={docRefreshKey}
                                     runId={agentRunId}

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

@@ -133,6 +133,41 @@ describe('AllMessagesMixed summary view', () => {
         vi.useRealTimers();
     });
 
+    it('keeps the draft accompanying ask_user visible outside collapsed work', () => {
+        renderSummary([
+            makeMessage({
+                timestamp: 1000,
+                message: '## Draft agenda\n9:00 Welcome\n9:15 Platform foundations',
+                details: {
+                    event_class: 'activity',
+                    display_role: 'tool_preamble',
+                    tools: ['ask_user'],
+                    activity_group_id: 'review-1',
+                    streamed: true,
+                },
+            }),
+            makeMessage({
+                timestamp: 2000,
+                message: 'Waiting for review...',
+                details: {
+                    tool: 'ask_user',
+                    tool_status: 'running',
+                    activity_group_id: 'review-1',
+                },
+            }),
+            makeMessage({
+                timestamp: 3000,
+                type: AgentMessageType.REQUEST_INPUT,
+                message: 'Does this agenda work?',
+                details: { tool: 'ask_user', request_id: 'ask-1' },
+            }),
+        ]);
+
+        expect(screen.getByRole('heading', { name: 'Draft agenda' })).not.toBeNull();
+        expect(screen.getByText('Does this agenda work?')).not.toBeNull();
+        expect(screen.getByRole('button', { name: /Worked\s*for/ }).getAttribute('aria-expanded')).toBe('false');
+    });
+
     it('renders delivery status on user bubbles in summary view', () => {
         renderSummary([
             makeMessage({
@@ -1109,7 +1144,9 @@ describe('AllMessagesMixed summary view', () => {
 
         const columns = Array.from(screen.getByRole('table').querySelectorAll('col'));
         const contentWidths = [columns[0], columns[2]].map((column) =>
-            Number.parseFloat(column.style.getPropertyValue('--agent-markdown-table-column-width')),
+            Number.parseFloat(
+                column.style.getPropertyValue('--agent-markdown-table-column-width').replace('calc(', ''),
+            ),
         );
 
         expect(columns).toHaveLength(3);
@@ -1117,6 +1154,28 @@ describe('AllMessagesMixed summary view', () => {
         expect(contentWidths[1]).toBeGreaterThan(contentWidths[0]);
     });
 
+    it('reserves readable widths for agenda columns beside long descriptions', () => {
+        renderSummary([
+            makeMessage({
+                type: AgentMessageType.ANSWER,
+                message: [
+                    '| Time | Duration | Topic | Facilitator |',
+                    '| --- | --- | --- | --- |',
+                    '| 9:15 a.m. | 90 min | Advanced capabilities: sub-agents, workstreams, skills, tools and human review | Vertesia |',
+                    '| 10:45 a.m. | 15 min | Break | All |',
+                ].join('\n'),
+            }),
+        ]);
+
+        const table = screen.getByRole('table');
+        const widths = Array.from(table.querySelectorAll('col')).map((column) =>
+            column.style.getPropertyValue('--agent-markdown-table-column-width'),
+        );
+        expect(widths).toEqual(['8rem', '8rem', 'calc(100.000% - 24.000rem)', '8rem']);
+        expect(table.style.minWidth).toBe('32rem');
+        expect(table.parentElement?.classList.contains('overflow-x-auto')).toBe(true);
+    });
+
     it('merges legacy activity progress rows with different tool run ids', () => {
         renderSummary(
             [

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

@@ -475,11 +475,15 @@ function getTableColumnLayouts(node?: Element): AgentMarkdownTableColumnLayout[]
         return clampNumber(avgLength * 0.7 + maxLength * 0.25 + longestTokenLength * 0.45, 18, 90);
     });
 
-    const totalWeight = weights.reduce((sum, weight) => sum + weight, 0);
+    const totalWeight = weights.reduce((sum, weight, index) => sum + (compactColumns.has(index) ? 0 : weight), 0);
     if (totalWeight <= 0) return [];
 
     return weights.map((weight, columnIndex) => {
-        const width = `${((weight / totalWeight) * 100).toFixed(3)}%`;
+        const share = weight / totalWeight;
+        // Reserve actual space for short values and headers before distributing prose columns.
+        const width = compactColumns.has(columnIndex)
+            ? '8rem'
+            : `calc(${(share * 100).toFixed(3)}% - ${(compactColumns.size * 8 * share).toFixed(3)}rem)`;
         return {
             key: `agent-markdown-table-column-${columnIndex}`,
             compact: compactColumns.has(columnIndex),
@@ -500,24 +504,30 @@ function AgentMarkdownTable({
     const columnLayouts = getTableColumnLayouts(node);
 
     return (
-        <table {...props} className={className}>
-            {columnLayouts.length > 0 ? (
-                <colgroup>
-                    {columnLayouts.map((columnLayout) => (
-                        <col
-                            key={columnLayout.key}
-                            className={columnLayout.compact ? 'agent-markdown-table-compact-col' : undefined}
-                            style={
-                                {
-                                    '--agent-markdown-table-column-width': columnLayout.width,
-                                } as React.CSSProperties
-                            }
-                        />
-                    ))}
-                </colgroup>
-            ) : null}
-            {children}
-        </table>
+        <div className="overflow-x-auto">
+            <table
+                {...props}
+                className={className}
+                style={{ minWidth: `${columnLayouts.length * 8}rem`, ...props.style }}
+            >
+                {columnLayouts.length > 0 ? (
+                    <colgroup>
+                        {columnLayouts.map((columnLayout) => (
+                            <col
+                                key={columnLayout.key}
+                                className={columnLayout.compact ? 'agent-markdown-table-compact-col' : undefined}
+                                style={
+                                    {
+                                        '--agent-markdown-table-column-width': columnLayout.width,
+                                    } as React.CSSProperties
+                                }
+                            />
+                        ))}
+                    </colgroup>
+                ) : null}
+                {children}
+            </table>
+        </div>
     );
 }
 
@@ -1210,6 +1220,15 @@ function getToolTarget(details: Record<string, unknown>): string | undefined {
     return undefined;
 }
 
+/**
+ * An approval decision that stopped the tool from running — a denial, a timeout, or a cancellation
+ * — as opposed to one that released it. Unknown decisions count as blocking: every decision the
+ * agent has ever emitted except `auto_approved` is one, so that is the safer default.
+ */
+function isBlockingApprovalDecision(decision: unknown): boolean {
+    return typeof decision === 'string' && decision !== 'auto_approved';
+}
+
 function getApprovalDecisionLabel(decision: unknown, toolLabel: string): string | undefined {
     switch (decision) {
         case 'denied':
@@ -1221,6 +1240,8 @@ function getApprovalDecisionLabel(decision: unknown, toolLabel: string): string
             return `Approval reviewer denied ${toolLabel}.`;
         case 'cancelled_after_denial':
             return `Cancelled ${toolLabel} after another tool was denied.`;
+        case 'auto_approved':
+            return `Approval no longer required for ${toolLabel}.`;
         default:
             return undefined;
     }
@@ -1237,6 +1258,8 @@ function getApprovalDecisionStatusText(decision: unknown): string | undefined {
             return 'Denied by reviewer';
         case 'cancelled_after_denial':
             return 'Cancelled after denial';
+        case 'auto_approved':
+            return 'Approved without asking';
         default:
             return undefined;
     }
@@ -1467,7 +1490,7 @@ function getToolDetailSections(message: AgentMessage): SummaryToolDetailSection[
     addSection(
         'Output',
         ['output', 'stdout', 'result', 'results', 'content', 'result_summary', 'observation', 'display_message'],
-        typeof details.approval_decision === 'string' ? 'error' : undefined,
+        isBlockingApprovalDecision(details.approval_decision) ? 'error' : undefined,
     );
     addSection('Files', ['files', 'outputFiles']);
     addSection('Error', ['error', 'stderr'], 'error');
@@ -3322,9 +3345,6 @@ function AllMessagesMixedComponent({
                 .agent-markdown col {
                     width: var(--agent-markdown-table-column-width);
                 }
-                .agent-markdown .agent-markdown-table-compact-col {
-                    width: clamp(4.75rem, var(--agent-markdown-table-column-width), 7rem);
-                }
                 .agent-markdown tr:last-child td {
                     border-bottom: 0;
                 }