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

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

@@ -6,7 +6,7 @@ import {
     type JSONSchema,
     type Plan,
 } from '@vertesia/common';
-import { Badge, Button, cn, VTooltip } from '@vertesia/ui/core';
+import { Badge, Button, cn } from '@vertesia/ui/core';
 import { i18nInstance, NAMESPACE, useUITranslation } from '@vertesia/ui/i18n';
 import { NavLink } from '@vertesia/ui/router';
 import { MarkdownRenderer, type MarkdownRendererProps } from '@vertesia/ui/widgets';
@@ -49,6 +49,7 @@ import {
     getRequestInputDisplayText,
     getRequestInputMessageKey,
     getResolvedToolApprovalKeys,
+    getToolApprovalResponseMetadata,
     hasRequestInputUx,
     isRequestInputAnswered,
     isToolApprovalAnswerHidden,
@@ -763,7 +764,9 @@ function SummaryMessage({
                     options={uxConfig.options}
                     variant={uxConfig.variant}
                     multiSelect={uxConfig.multiSelect}
-                    onSelect={(optionId) => onSendMessage?.(optionId)}
+                    onSelect={(optionId) =>
+                        onSendMessage?.(optionId, getToolApprovalResponseMetadata(message, optionId))
+                    }
                     onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
                     allowFreeResponse={!uxConfig.options?.length || !!uxConfig.free_response}
                     placeholder={uxConfig.free_response?.placeholder}
@@ -2240,7 +2243,12 @@ function SummaryActivityRow({
                                                 options={uxConfig.options}
                                                 variant={uxConfig.variant}
                                                 multiSelect={uxConfig.multiSelect}
-                                                onSelect={(optionId) => onSendMessage?.(optionId)}
+                                                onSelect={(optionId) =>
+                                                    onSendMessage?.(
+                                                        optionId,
+                                                        getToolApprovalResponseMetadata(message, optionId),
+                                                    )
+                                                }
                                                 onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
                                                 allowFreeResponse={
                                                     !uxConfig.options?.length || !!uxConfig.free_response
@@ -3246,18 +3254,16 @@ function AllMessagesMixedComponent({
                     {isSummaryView && activeWorkstream !== 'all' && activeWorkstreamName && (
                         <div className="sticky top-0 z-20 -mx-2 bg-background/95 px-2 pb-2 pt-1 backdrop-blur sm:-mx-4 sm:px-4">
                             <div className="mx-auto flex w-full max-w-3xl items-center gap-2 border-b border-border/70 pb-3">
-                                <VTooltip description={t('agent.backToMainAgent')} asChild>
-                                    <Button
-                                        type="button"
-                                        variant="ghost"
-                                        size="icon"
-                                        className="size-8 shrink-0 text-muted hover:text-foreground"
-                                        aria-label={t('agent.backToMainAgent')}
-                                        onClick={handleShowMainAgentChat}
-                                    >
-                                        <ArrowLeft className="size-4" aria-hidden="true" />
-                                    </Button>
-                                </VTooltip>
+                                <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="size-8 shrink-0 text-muted hover:text-foreground"
+                                    title={t('agent.backToMainAgent')}
+                                    onClick={handleShowMainAgentChat}
+                                >
+                                    <ArrowLeft className="size-4" aria-hidden="true" />
+                                </Button>
                                 <div className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
                                     {activeWorkstreamName}
                                 </div>

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

@@ -100,7 +100,9 @@ export default function Header({
     const controls = (
         <div
             className={cn(
-                isCompact ? 'flex flex-col items-center gap-1' : 'flex justify-end items-center gap-2 ms-auto',
+                isCompact
+                    ? 'flex flex-row items-center gap-1 lg:flex-col'
+                    : 'flex justify-end items-center gap-2 ms-auto',
             )}
         >
             {showPlanButton && (
@@ -177,7 +179,6 @@ export default function Header({
                     variant={isPlaybackEnabled ? 'primary' : 'ghost'}
                     onClick={onTogglePlayback}
                     aria-pressed={isPlaybackEnabled}
-                    aria-label={t('agent.rewind.label')}
                     title={t('agent.rewind.label')}
                     className={cn(
                         'transition-all duration-200 rounded-md',
@@ -376,7 +377,6 @@ function MoreDropdown({
                     size={compact ? 'icon' : 'xs'}
                     variant="ghost"
                     title={t('agent.moreActions')}
-                    aria-label={t('agent.moreActions')}
                     className={compact ? 'size-8 rounded-lg' : undefined}
                 >
                     <MoreVertical className="size-4" />

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

@@ -523,7 +523,6 @@ export default function MessageInput({
                                         variant="ghost"
                                         size="icon"
                                         className="size-8 rounded-full text-muted hover:bg-muted"
-                                        aria-label={t('agent.addAttachment')}
                                         title={t('agent.addAttachment')}
                                     >
                                         <PlusIcon className="size-4" />
@@ -654,7 +653,6 @@ export default function MessageInput({
                                 '[&_svg]:text-destructive disabled:[&_svg]:text-muted',
                             )}
                             title={t('agent.stopTooltip')}
-                            aria-label={t('agent.stopTooltip')}
                         >
                             {isStopping ? (
                                 <Spinner size="sm" />

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

@@ -35,6 +35,7 @@ import { ThinkingMessages } from '../WaitingMessages';
 import { AttachmentPreviewList, parseUserMessageAttachments } from './AttachmentPreview';
 import { MessageDeliveryStatus } from './MessageDeliveryStatus';
 import { processContentForMarkdown } from './processContentForMarkdown';
+import { getToolApprovalResponseMetadata } from './requestInputMessages';
 import { getWorkstreamId } from './utils';
 
 /** className overrides for MessageItem — single source of truth for all className overrides. */
@@ -649,7 +650,9 @@ function MessageItemComponent({
                             options={askUserUx.options}
                             variant={askUserUx.variant}
                             multiSelect={askUserUx.multiSelect}
-                            onSelect={(optionId) => onSendMessage?.(optionId)}
+                            onSelect={(optionId) =>
+                                onSendMessage?.(optionId, getToolApprovalResponseMetadata(message, optionId))
+                            }
                             onMultiSelect={(optionIds) => onSendMessage?.(optionIds.join(', '))}
                             allowFreeResponse={!askUserUx.options?.length || !!askUserUx.free_response}
                             placeholder={askUserUx.free_response?.placeholder}

package/src/features/agent/chat/ModernAgentOutput/requestInputMessages.test.ts

@@ -0,0 +1,80 @@
+import { type AgentMessage, AgentMessageType } from '@vertesia/common';
+import { describe, expect, it } from 'vitest';
+import {
+    getAnsweredToolApprovalRequestInputKeys,
+    getRequestInputMessageKey,
+    getToolApprovalResponseMetadata,
+} from './requestInputMessages';
+
+const APPROVAL_KEY = 'create_interaction:name:JDE AR Payment Processing Agent';
+
+function makeApprovalRequest(): AgentMessage {
+    return {
+        timestamp: 1,
+        type: AgentMessageType.REQUEST_INPUT,
+        message: 'Approve Create a new draft interaction: JDE AR Payment Processing Agent?',
+        workstream_id: 'main',
+        details: {
+            tool_approval: { tool_name: 'create_interaction', approval_key: APPROVAL_KEY },
+            ux: { options: [{ id: 'allow_once' }, { id: 'allow_for_run' }, { id: 'deny' }] },
+        },
+    } as unknown as AgentMessage;
+}
+
+function makeUserAnswer(message: string, metadata?: Record<string, unknown>): AgentMessage {
+    return {
+        timestamp: 2,
+        type: AgentMessageType.QUESTION,
+        message,
+        workstream_id: 'main',
+        details: metadata ? { metadata } : undefined,
+    } as unknown as AgentMessage;
+}
+
+describe('getToolApprovalResponseMetadata', () => {
+    it('builds structured response metadata for approval options', () => {
+        expect(getToolApprovalResponseMetadata(makeApprovalRequest(), 'allow_for_run')).toEqual({
+            tool_approval_response: { decision: 'allow_for_run', approval_key: APPROVAL_KEY },
+        });
+    });
+
+    it('returns undefined for prompts that are not tool approvals', () => {
+        const plainPrompt = {
+            timestamp: 1,
+            type: AgentMessageType.REQUEST_INPUT,
+            message: 'Which environment?',
+            workstream_id: 'main',
+            details: { ux: { options: [{ id: 'staging' }, { id: 'production' }] } },
+        } as unknown as AgentMessage;
+        expect(getToolApprovalResponseMetadata(plainPrompt, 'staging')).toBeUndefined();
+    });
+
+    it('returns undefined for unknown option ids', () => {
+        expect(getToolApprovalResponseMetadata(makeApprovalRequest(), 'staging')).toBeUndefined();
+    });
+});
+
+describe('getAnsweredToolApprovalRequestInputKeys', () => {
+    it('treats a bare option answer as answered', () => {
+        const request = makeApprovalRequest();
+        const answer = makeUserAnswer('allow_for_run');
+        const answered = getAnsweredToolApprovalRequestInputKeys([request, answer]);
+        expect(answered.has(getRequestInputMessageKey(request))).toBe(true);
+    });
+
+    it('treats a metadata-carrying answer as answered regardless of its text', () => {
+        const request = makeApprovalRequest();
+        const answer = makeUserAnswer('Allow this action for this run\n\nUploaded artifacts:\n[a.png](artifact:a)', {
+            tool_approval_response: { decision: 'allow_for_run', approval_key: APPROVAL_KEY },
+        });
+        const answered = getAnsweredToolApprovalRequestInputKeys([request, answer]);
+        expect(answered.has(getRequestInputMessageKey(request))).toBe(true);
+    });
+
+    it('does not treat unrelated prose as an approval answer', () => {
+        const request = makeApprovalRequest();
+        const answer = makeUserAnswer('please proceed\n\nUploaded artifacts:\n[a.png](artifact:a)');
+        const answered = getAnsweredToolApprovalRequestInputKeys([request, answer]);
+        expect(answered.size).toBe(0);
+    });
+});

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

@@ -169,6 +169,22 @@ export function isToolApprovalRequestInput(message: AgentMessage): boolean {
     return message.type === AgentMessageType.REQUEST_INPUT && getToolApprovalKey(message) !== undefined;
 }
 
+const TOOL_APPROVAL_OPTION_DECISIONS = new Set(['allow_once', 'allow_for_run', 'deny']);
+
+/**
+ * Metadata to attach when the user picks an option on a tool-approval prompt, so the workflow
+ * reads the decision structurally instead of from the message text (which clients may decorate,
+ * e.g. with an attachments footer). Returns undefined for non-approval prompts or unknown options.
+ */
+export function getToolApprovalResponseMetadata(
+    message: AgentMessage,
+    optionId: string,
+): Record<string, unknown> | undefined {
+    const approvalKey = getToolApprovalKey(message);
+    if (!approvalKey || !TOOL_APPROVAL_OPTION_DECISIONS.has(optionId)) return undefined;
+    return { tool_approval_response: { decision: optionId, approval_key: approvalKey } };
+}
+
 function isToolApprovalOptionResponse(message: AgentMessage): boolean {
     if (message.type !== AgentMessageType.QUESTION) return false;
     const normalized = getAgentMessageText(message).trim().toLowerCase();
@@ -181,7 +197,11 @@ function isToolApprovalMetadataResponse(message: AgentMessage): boolean {
     const metadata = getRecord(details?.metadata);
     const toolApprovalResponse =
         getRecord(details?.tool_approval_response) ?? getRecord(metadata?.tool_approval_response);
-    return toolApprovalResponse?.decision === 'deny_with_feedback';
+    const decision = toolApprovalResponse?.decision;
+    return (
+        decision === 'deny_with_feedback' ||
+        (typeof decision === 'string' && TOOL_APPROVAL_OPTION_DECISIONS.has(decision))
+    );
 }
 
 function isToolApprovalResponse(message: AgentMessage): boolean {

package/src/features/environment/SelectEnvironment.tsx

@@ -0,0 +1,186 @@
+import type { ExecutionEnvironmentRef } from '@vertesia/common';
+import { SelectBox, useFetch, useFetchOnce } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { useUserSession } from '@vertesia/ui/session';
+import { useEffect, useState } from 'react';
+
+type EnvironmentModel = NonNullable<ExecutionEnvironmentRef['enabled_models']>[number];
+
+function environmentLabel(option: ExecutionEnvironmentRef) {
+    return option.name;
+}
+
+interface SelectEnvironmentProps {
+    onChange: (environment?: ExecutionEnvironmentRef) => void;
+    isClearable?: boolean;
+    ignoreVirtuals?: boolean;
+    selectedEnvId?: string;
+    disabled?: boolean;
+}
+
+export function SelectEnvironment({
+    isClearable = false,
+    onChange,
+    ignoreVirtuals = false,
+    selectedEnvId,
+    disabled = false,
+}: SelectEnvironmentProps) {
+    const { t } = useUITranslation();
+    const { client } = useUserSession();
+    const [value, setValue] = useState<ExecutionEnvironmentRef | undefined>();
+    const { data: environments, isLoading } = useFetchOnce(() =>
+        client.environments.list().then((result) => {
+            const available = ignoreVirtuals
+                ? result.filter((environment) => !environment.provider.startsWith('virtual_'))
+                : result;
+            return available.slice().sort((left, right) => left.name.localeCompare(right.name));
+        }),
+    );
+
+    useEffect(() => {
+        setValue(environments?.find((environment) => environment.id === selectedEnvId));
+    }, [environments, selectedEnvId]);
+
+    return (
+        <SelectBox
+            isClearable={isClearable}
+            optionLabel={environmentLabel}
+            options={environments ?? []}
+            value={value}
+            onChange={(environment) => {
+                setValue(environment);
+                onChange(environment);
+            }}
+            placeholder={t('intakePolicy.placeholder.environment')}
+            filterBy="name"
+            disabled={disabled}
+            isLoading={isLoading}
+        />
+    );
+}
+
+function modelLabel(option: EnvironmentModel) {
+    return option.name;
+}
+
+function createModelLabel(greyedModels?: EnvironmentModel[]) {
+    if (!greyedModels?.length) {
+        return modelLabel;
+    }
+    return (option: EnvironmentModel) => {
+        const isGreyed = greyedModels.some((model) => model.id === option.id);
+        return <span className={isGreyed ? 'opacity-50' : ''}>{option.name}</span>;
+    };
+}
+
+interface SelectModelProps {
+    envId: string | undefined;
+    onChange: (model?: EnvironmentModel) => void;
+    isClearable?: boolean;
+    selectedModelId?: string;
+    disabled?: boolean;
+    greyedModels?: EnvironmentModel[];
+    onModelsLoaded?: (models: EnvironmentModel[]) => void;
+}
+
+export function SelectModel({
+    envId,
+    isClearable,
+    onChange,
+    selectedModelId,
+    disabled = false,
+    greyedModels,
+    onModelsLoaded,
+}: SelectModelProps) {
+    const { t } = useUITranslation();
+    const { client } = useUserSession();
+    const [value, setValue] = useState<EnvironmentModel | undefined>();
+    const { data: models, isLoading } = useFetch(async () => {
+        if (!envId) {
+            return [];
+        }
+        try {
+            const environment = await client.environments.retrieve(envId);
+            return [...(environment.enabled_models ?? [])].sort((left, right) => left.name.localeCompare(right.name));
+        } catch {
+            return [];
+        }
+    }, [envId]);
+
+    useEffect(() => {
+        if (!selectedModelId) {
+            setValue(undefined);
+            return;
+        }
+        const selected = models?.find((model) => model.id === selectedModelId);
+        setValue(
+            selected ?? {
+                id: selectedModelId,
+                name: selectedModelId,
+                provider: 'unknown',
+            },
+        );
+    }, [models, selectedModelId]);
+
+    useEffect(() => {
+        if (models) {
+            onModelsLoaded?.(models);
+        }
+    }, [models, onModelsLoaded]);
+
+    return (
+        <SelectBox
+            isClearable={isClearable}
+            by="id"
+            optionLabel={createModelLabel(greyedModels)}
+            options={models ?? []}
+            value={value}
+            onChange={(model) => {
+                setValue(model);
+                onChange(model);
+            }}
+            placeholder={t('intakePolicy.placeholder.model')}
+            disabled={disabled}
+            isLoading={isLoading}
+        />
+    );
+}
+
+interface SelectTrainingModelProps {
+    env: ExecutionEnvironmentRef | undefined;
+    onChange: (model?: EnvironmentModel) => void;
+    isClearable?: boolean;
+}
+
+export function SelectTrainingModel({ env, isClearable, onChange }: SelectTrainingModelProps) {
+    const { t } = useUITranslation();
+    const { client } = useUserSession();
+    const [value, setValue] = useState<EnvironmentModel | undefined>();
+    const { data: models, isLoading } = useFetch(async () => {
+        if (!env) {
+            return [];
+        }
+        try {
+            return client.environments.listTrainableModels(env.id);
+        } catch {
+            return [];
+        }
+    }, [env?.id]);
+
+    return (
+        <SelectBox
+            isClearable={isClearable}
+            by="id"
+            optionLabel={modelLabel}
+            options={models ?? []}
+            value={value}
+            onChange={(model) => {
+                setValue(model);
+                onChange(model);
+            }}
+            placeholder={t('intakePolicy.placeholder.model')}
+            disabled={!env}
+            isLoading={isLoading}
+        />
+    );
+}

package/src/features/environment/index.ts

@@ -0,0 +1 @@
+export * from './SelectEnvironment.js';

package/src/features/index.ts

@@ -1,6 +1,7 @@
 export * from './activity-doc/index.js';
 export * from './agent';
 export * from './document-viewer/index.js';
+export * from './environment/index.js';
 export * from './errors/index.js';
 export * from './facets/index.js';
 export * from './layout/index.js';
@@ -12,3 +13,4 @@ export * from './permissions/index.js';
 export * from './store/index.js';
 export * from './user/index.js';
 export * from './utils/index.js';
+export * from './views/index.js';

package/src/features/magic-pdf/AnnotatedImageSlider.tsx

@@ -1,4 +1,4 @@
-import { Button, Center, VTooltip } from '@vertesia/ui/core';
+import { Button, Center } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import clsx from 'clsx';
 import { ChevronsDown, ChevronsUp, Image, Loader2, Maximize, Minus, Plus, ScanSearch } from 'lucide-react';
@@ -255,7 +255,7 @@ export function AnnotatedImageSlider({ className, currentPage, onChange }: Annot
     return (
         <div ref={ref} className={clsx('flex flex-col items-stretch gap-y-2', className)}>
             <div className="relative flex items-center justify-center px-2 h-9">
-                <Button variant="ghost" size="xs" onClick={goPrev} alt={t('pdf.previousPage')}>
+                <Button variant="ghost" size="xs" onClick={goPrev} title={t('pdf.previousPage')}>
                     <ChevronsUp className="size-4" />
                 </Button>
                 <div className="absolute start-2 flex items-center gap-x-1">
@@ -301,7 +301,7 @@ export function AnnotatedImageSlider({ className, currentPage, onChange }: Annot
                 ))}
             </div>
             <div className="flex items-center justify-center h-9">
-                <Button variant="ghost" size="xs" onClick={goNext} alt={t('pdf.nextPage')}>
+                <Button variant="ghost" size="xs" onClick={goNext} title={t('pdf.nextPage')}>
                     <ChevronsDown className="size-4" />
                 </Button>
             </div>
@@ -319,22 +319,21 @@ interface ImageTypeButtonProps {
 function ImageTypeButton({ type, currentType, onClick, icon, tooltip }: ImageTypeButtonProps) {
     const isSelected = type === currentType;
     return (
-        <VTooltip description={tooltip} placement="bottom" size="xs">
-            <Button
-                variant="unstyled"
-                aria-label={tooltip}
-                aria-pressed={isSelected}
-                className={clsx(
-                    'p-1 rounded cursor-pointer transition-colors',
-                    isSelected
-                        ? 'text-primary bg-primary/10'
-                        : 'text-muted-foreground hover:text-foreground hover:bg-muted',
-                )}
-                onClick={onClick}
-            >
-                {icon}
-            </Button>
-        </VTooltip>
+        <Button
+            title={tooltip}
+            tooltipPlacement="bottom"
+            variant="unstyled"
+            aria-pressed={isSelected}
+            className={clsx(
+                'p-1 rounded cursor-pointer transition-colors',
+                isSelected
+                    ? 'text-primary bg-primary/10'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-muted',
+            )}
+            onClick={onClick}
+        >
+            {icon}
+        </Button>
     );
 }
 
@@ -350,54 +349,51 @@ function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZo
     const { t } = useUITranslation();
     return (
         <div className="flex items-center gap-x-0.5">
-            <VTooltip description={t('pdf.zoomOut')} placement="bottom" size="xs">
-                <Button
-                    variant="unstyled"
-                    aria-label={t('pdf.zoomOut')}
-                    className={clsx(
-                        'p-1 rounded cursor-pointer transition-colors',
-                        canZoomOut
-                            ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
-                            : 'text-muted-foreground/40 cursor-not-allowed',
-                    )}
-                    onClick={onZoomOut}
-                    disabled={!canZoomOut}
-                >
-                    <Minus className="size-4" />
-                </Button>
-            </VTooltip>
+            <Button
+                title={t('pdf.zoomOut')}
+                tooltipPlacement="bottom"
+                variant="unstyled"
+                className={clsx(
+                    'p-1 rounded cursor-pointer transition-colors',
+                    canZoomOut
+                        ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
+                        : 'text-muted-foreground/40 cursor-not-allowed',
+                )}
+                onClick={onZoomOut}
+                disabled={!canZoomOut}
+            >
+                <Minus className="size-4" />
+            </Button>
             <span className="text-xs text-muted-foreground min-w-[32px] text-center">{zoom}%</span>
-            <VTooltip description={t('pdf.zoomIn')} placement="bottom" size="xs">
-                <Button
-                    variant="unstyled"
-                    aria-label={t('pdf.zoomIn')}
-                    className={clsx(
-                        'p-1 rounded cursor-pointer transition-colors',
-                        canZoomIn
-                            ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
-                            : 'text-muted-foreground/40 cursor-not-allowed',
-                    )}
-                    onClick={onZoomIn}
-                    disabled={!canZoomIn}
-                >
-                    <Plus className="size-4" />
-                </Button>
-            </VTooltip>
-            <VTooltip description={t('pdf.fitToWidth')} placement="bottom" size="xs">
-                <Button
-                    variant="unstyled"
-                    aria-label={t('pdf.fitToWidth')}
-                    className={clsx(
-                        'p-1 rounded cursor-pointer transition-colors',
-                        zoom !== DEFAULT_ZOOM
-                            ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
-                            : 'text-muted-foreground/40',
-                    )}
-                    onClick={onFitToView}
-                >
-                    <Maximize className="size-4" />
-                </Button>
-            </VTooltip>
+            <Button
+                title={t('pdf.zoomIn')}
+                tooltipPlacement="bottom"
+                variant="unstyled"
+                className={clsx(
+                    'p-1 rounded cursor-pointer transition-colors',
+                    canZoomIn
+                        ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
+                        : 'text-muted-foreground/40 cursor-not-allowed',
+                )}
+                onClick={onZoomIn}
+                disabled={!canZoomIn}
+            >
+                <Plus className="size-4" />
+            </Button>
+            <Button
+                title={t('pdf.fitToWidth')}
+                tooltipPlacement="bottom"
+                variant="unstyled"
+                className={clsx(
+                    'p-1 rounded cursor-pointer transition-colors',
+                    zoom !== DEFAULT_ZOOM
+                        ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
+                        : 'text-muted-foreground/40',
+                )}
+                onClick={onFitToView}
+            >
+                <Maximize className="size-4" />
+            </Button>
         </div>
     );
 }