diff --git a/packages/ui/src/components/chat/ChatInput.tsx b/packages/ui/src/components/chat/ChatInput.tsx
index c0ae1e19..a249ee72 100644
--- a/packages/ui/src/components/chat/ChatInput.tsx
+++ b/packages/ui/src/components/chat/ChatInput.tsx
@@ -1527,8 +1527,10 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                                     <div className="flex items-center flex-shrink-0 gap-x-1">
                                         {attachmentsControls}
                                     </div>
-                                    <div className="flex flex-1 items-center gap-x-1 min-w-0">
+                                    <div className="flex flex-1 items-center justify-center min-w-0">
                                         <StatusChip onClick={handleOpenMobileControls} className="min-w-0" />
+                                    </div>
+                                    <div className="flex-shrink-0">
                                         {actionButton}
                                     </div>
                                 </div>
diff --git a/packages/ui/src/components/chat/ModelControls.tsx b/packages/ui/src/components/chat/ModelControls.tsx
index e65ff04c..d1f2440d 100644
--- a/packages/ui/src/components/chat/ModelControls.tsx
+++ b/packages/ui/src/components/chat/ModelControls.tsx
@@ -436,7 +436,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
     const editToggleIconClass = sizeVariant === 'mobile' ? 'h-5 w-5' : sizeVariant === 'vscode' ? 'h-4 w-4' : 'h-4 w-4';
     const controlIconSize = sizeVariant === 'mobile' ? 'h-5 w-5' : sizeVariant === 'vscode' ? 'h-4 w-4' : 'h-4 w-4';
     const controlTextSize = isCompact ? 'typography-micro' : 'typography-meta';
-    const inlineGapClass = sizeVariant === 'mobile' ? 'gap-x-1' : sizeVariant === 'vscode' ? 'gap-x-1' : 'gap-x-3';
+    const inlineGapClass = sizeVariant === 'mobile' ? 'gap-x-1' : sizeVariant === 'vscode' ? 'gap-x-2' : 'gap-x-3';
     const renderEditModeIcon = React.useCallback((mode: EditPermissionMode, iconClass = editToggleIconClass) => {
         const combinedClassName = cn(iconClass, 'flex-shrink-0');
         const modeColors = getEditModeColors(mode);
diff --git a/packages/ui/src/components/chat/StatusChip.tsx b/packages/ui/src/components/chat/StatusChip.tsx
index ebc10836..97d0a9eb 100644
--- a/packages/ui/src/components/chat/StatusChip.tsx
+++ b/packages/ui/src/components/chat/StatusChip.tsx
@@ -3,7 +3,6 @@ import { cn } from '@/lib/utils';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useSessionStore } from '@/stores/useSessionStore';
 import { useContextStore } from '@/stores/contextStore';
-import { useIsTextTruncated } from '@/hooks/useIsTextTruncated';
 import { formatEffortLabel, getAgentDisplayName, getModelDisplayName } from './mobileControlsUtils';
 
 interface StatusChipProps {
@@ -13,7 +12,6 @@ interface StatusChipProps {
 
 export const StatusChip: React.FC<StatusChipProps> = ({ onClick, className }) => {
     const {
-        currentProviderId,
         currentModelId,
         currentVariant,
         currentAgentName,
@@ -33,28 +31,35 @@ export const StatusChip: React.FC<StatusChipProps> = ({ onClick, className }) =>
     const modelLabel = getModelDisplayName(currentProvider, currentModelId);
     const hasEffort = getCurrentModelVariants().length > 0;
     const effortLabel = hasEffort ? formatEffortLabel(currentVariant) : null;
-    const segments = [agentLabel, modelLabel, effortLabel].filter((segment): segment is string => Boolean(segment));
-    const label = segments.join(' · ');
-    const textRef = React.useRef<HTMLSpanElement>(null);
-    const isTruncated = useIsTextTruncated(textRef, [label, currentProviderId, currentModelId, currentVariant, uiAgentName]);
+    const fullLabel = [agentLabel, modelLabel, effortLabel].filter(Boolean).join(' · ');
 
     return (
         <button
             type="button"
             onClick={onClick}
             className={cn(
-                'group flex h-9 min-w-0 flex-1 items-center rounded-xl border border-border/40 bg-muted/30 px-2.5',
-                'typography-meta font-medium text-foreground transition-colors hover:bg-muted/50',
-                'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary',
+                'inline-flex min-w-0 items-center justify-center',
+                'rounded-lg border border-border/50 px-1.5',
+                'typography-meta font-medium text-foreground/80',
+                'focus:outline-none',
                 className
             )}
-            aria-label={label}
+            style={{ 
+                height: '30px',
+                maxHeight: '30px',
+                minHeight: '30px',
+            }}
+            title={fullLabel}
         >
-            <span ref={textRef} className="min-w-0 flex-1 overflow-hidden">
-                <span className={cn('marquee-text', isTruncated && 'marquee-text--auto')}>
-                    {label}
-                </span>
-            </span>
+            <span className="shrink-0">{agentLabel}</span>
+            <span className="shrink-0 text-muted-foreground mx-1">·</span>
+            <span className="min-w-0 truncate">{modelLabel}</span>
+            {effortLabel && (
+                <>
+                    <span className="shrink-0 text-muted-foreground mx-1">·</span>
+                    <span className="shrink-0">{effortLabel}</span>
+                </>
+            )}
         </button>
     );
 };
diff --git a/packages/ui/src/components/chat/UnifiedControlsDrawer.tsx b/packages/ui/src/components/chat/UnifiedControlsDrawer.tsx
index 9e8f582c..57457db3 100644
--- a/packages/ui/src/components/chat/UnifiedControlsDrawer.tsx
+++ b/packages/ui/src/components/chat/UnifiedControlsDrawer.tsx
@@ -1,21 +1,38 @@
 import React from 'react';
 import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
+import { ProviderLogo } from '@/components/ui/ProviderLogo';
 import { cn } from '@/lib/utils';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useSessionStore } from '@/stores/useSessionStore';
 import { useContextStore } from '@/stores/contextStore';
 import { useUIStore } from '@/stores/useUIStore';
 import { useModelLists } from '@/hooks/useModelLists';
-import { useIsTextTruncated } from '@/hooks/useIsTextTruncated';
 import {
     formatEffortLabel,
     getAgentDisplayName,
-    getModelDisplayName,
     getQuickEffortOptions,
     isPrimaryMode,
     parseEffortVariant,
 } from './mobileControlsUtils';
 
+const MAX_QUICK_AGENTS = 3;
+
+const COMPACT_NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {
+    notation: 'compact',
+    maximumFractionDigits: 1,
+});
+
+const formatTokens = (value?: number | null) => {
+    if (typeof value !== 'number' || Number.isNaN(value)) {
+        return null;
+    }
+    if (value === 0) {
+        return '0';
+    }
+    const formatted = COMPACT_NUMBER_FORMATTER.format(value);
+    return formatted.endsWith('.0') ? formatted.slice(0, -2) : formatted;
+};
+
 interface UnifiedControlsDrawerProps {
     open: boolean;
     onClose: () => void;
@@ -31,36 +48,6 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
     onOpenModel,
     onOpenEffort,
 }) => {
-    const AgentRow: React.FC<{
-        name: string;
-        isSelected: boolean;
-        description?: string | null;
-        onSelect: () => void;
-    }> = ({ name, isSelected, description, onSelect }) => {
-        const descriptionRef = React.useRef<HTMLSpanElement>(null);
-        const shouldScroll = useIsTextTruncated(descriptionRef, [description, name]);
-
-        return (
-            <button
-                type="button"
-                onClick={onSelect}
-                className={cn(
-                    'flex min-h-[44px] w-full items-start justify-between gap-2 rounded-xl border px-2 py-2 text-left',
-                    isSelected ? 'border-primary/30 bg-primary/10' : 'border-border/40 hover:bg-muted/50'
-                )}
-                aria-pressed={isSelected}
-            >
-                <div className="min-w-0 flex-1">
-                    <div className="typography-meta font-medium text-foreground truncate">{name}</div>
-                    {description ? (
-                        <span ref={descriptionRef} className="block min-w-0 overflow-hidden typography-micro text-muted-foreground">
-                            <span className={cn('marquee-text', shouldScroll && 'marquee-text--auto')}>{description}</span>
-                        </span>
-                    ) : null}
-                </div>
-            </button>
-        );
-    };
     const {
         providers,
         currentProviderId,
@@ -71,9 +58,9 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
         setProvider,
         setModel,
         setCurrentVariant,
-        getCurrentProvider,
         getCurrentModelVariants,
         getVisibleAgents,
+        getModelMetadata,
     } = useConfigStore();
     const { addRecentModel, addRecentAgent, addRecentEffort, recentAgents, recentEfforts } = useUIStore();
     const { recentModelsList } = useModelLists();
@@ -100,14 +87,14 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
 
     const quickAgentNames = React.useMemo(() => {
         const fallback = primaryAgents.length > 0 ? primaryAgents.map((agent) => agent.name) : agents.map((agent) => agent.name);
-        const base = fallback.slice(0, 4);
+        const base = fallback.slice(0, MAX_QUICK_AGENTS);
         const orderedRecents = recentAgentNames.slice().reverse();
         for (const recent of orderedRecents) {
             if (!recent || base.includes(recent)) {
                 continue;
             }
             base.unshift(recent);
-            base.splice(4);
+            base.splice(MAX_QUICK_AGENTS);
         }
         if (uiAgentName && !base.includes(uiAgentName)) {
             if (base.length > 0) {
@@ -121,20 +108,25 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
 
     const hasAgentOverflow = agents.some((agent) => !quickAgentNames.includes(agent.name));
 
-    const currentProvider = getCurrentProvider();
-    const currentModelLabel = getModelDisplayName(currentProvider, currentModelId);
-    const recentModels = recentModelsList.slice(0, 4);
-    const hasCurrentInRecents = recentModels.some(
+    const recentModelsBase = recentModelsList.slice(0, 4);
+    const hasCurrentInRecents = recentModelsBase.some(
         (entry) => entry.providerID === currentProviderId && entry.modelID === currentModelId
     );
-    const currentModelRow = currentProviderId && currentModelId
-        ? {
-            providerID: currentProviderId,
-            modelID: currentModelId,
-            providerName: currentProvider?.name || currentProviderId,
-            modelName: currentModelLabel,
+    // If current model not in recents, prepend it so it's always visible
+    const recentModels = React.useMemo(() => {
+        if (hasCurrentInRecents || !currentProviderId || !currentModelId) {
+            return recentModelsBase;
         }
-        : null;
+        const currentProvider = providers.find((p) => p.id === currentProviderId);
+        const currentModel = currentProvider?.models?.find((m) => m.id === currentModelId);
+        if (!currentModel) {
+            return recentModelsBase;
+        }
+        return [
+            { providerID: currentProviderId, modelID: currentModelId, provider: currentProvider, model: currentModel },
+            ...recentModelsBase.slice(0, 3),
+        ];
+    }, [recentModelsBase, hasCurrentInRecents, currentProviderId, currentModelId, providers]);
 
     const variants = getCurrentModelVariants();
     const hasEffort = variants.length > 0;
@@ -221,100 +213,92 @@ export const UnifiedControlsDrawer: React.FC<UnifiedControlsDrawerProps> = ({
                     <div className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground">
                         Agent
                     </div>
-                    {agents.length === 0 ? (
-                        <div className="rounded-xl border border-dashed border-border/50 px-2 py-2 typography-meta text-muted-foreground">
-                            No agents configured
-                        </div>
-                    ) : (
-                        <div className="flex flex-col gap-2">
-                            {quickAgentNames.map((agentName) => {
-                                const agent = agents.find((entry) => entry.name === agentName);
+                    <div className="rounded-xl border border-border/40 overflow-hidden">
+                        {agents.length === 0 ? (
+                            <div className="px-3 py-2 typography-meta text-muted-foreground">
+                                No agents configured
+                            </div>
+                        ) : (
+                            quickAgentNames.map((agentName) => {
                                 const displayName = getAgentDisplayName(agents, agentName);
+                                const isSelected = agentName === uiAgentName;
                                 return (
-                                    <AgentRow
+                                    <button
                                         key={agentName}
-                                        name={displayName}
-                                        description={agent?.description}
-                                        isSelected={agentName === uiAgentName}
-                                        onSelect={() => handleAgentSelect(agentName)}
-                                    />
+                                        type="button"
+                                        onClick={() => handleAgentSelect(agentName)}
+                                        className={cn(
+                                            'flex min-h-[44px] w-full items-center border-b border-border/30 px-3 py-2 text-left last:border-b-0',
+                                            isSelected ? 'bg-primary/10' : ''
+                                        )}
+                                        aria-pressed={isSelected}
+                                    >
+                                        <span className="typography-meta font-medium text-foreground truncate">
+                                            {displayName}
+                                        </span>
+                                    </button>
                                 );
-                            })}
-                            {hasAgentOverflow && (
-                                <button
-                                    type="button"
-                                    onClick={onOpenAgent}
-                                    className="flex min-h-[44px] w-full items-center justify-center rounded-xl border border-border/40 px-2 py-2 typography-meta font-medium text-muted-foreground hover:bg-muted/50"
-                                    aria-label="More agents"
-                                >
-                                    ...
-                                </button>
-                            )}
-                        </div>
-                    )}
+                            })
+                        )}
+                        {hasAgentOverflow && (
+                            <button
+                                type="button"
+                                onClick={onOpenAgent}
+                                className="flex min-h-[44px] w-full items-center justify-center border-t border-border/30 px-3 py-2 typography-meta font-medium text-muted-foreground"
+                                aria-label="More agents"
+                            >
+                                ...
+                            </button>
+                        )}
+                    </div>
                 </div>
 
                 <div className="flex flex-col gap-2">
                     <div className="typography-meta font-semibold uppercase tracking-wide text-muted-foreground">
                         Model
                     </div>
-                    <div className="flex flex-col gap-2">
-                        {!hasCurrentInRecents && currentModelRow && (
-                            <button
-                                type="button"
-                                onClick={() => handleModelSelect(currentModelRow.providerID, currentModelRow.modelID)}
-                                className={cn(
-                                    'flex min-h-[44px] w-full items-center justify-between gap-2 rounded-xl border px-2 py-2 text-left',
-                                    currentProviderId === currentModelRow.providerID && currentModelId === currentModelRow.modelID
-                                        ? 'border-primary/30 bg-primary/10'
-                                        : 'border-border/40 hover:bg-muted/50'
-                                )}
-                            >
-                                <div className="min-w-0">
-                                    <div className="typography-meta font-medium text-foreground truncate">
-                                        {currentModelRow.modelName}
-                                    </div>
-                                    <div className="typography-micro text-muted-foreground">Current model</div>
-                                </div>
-                                <span className="typography-micro text-muted-foreground">{currentModelRow.providerName}</span>
-                            </button>
+                    <div className="rounded-xl border border-border/40 overflow-hidden">
+                        {recentModels.length === 0 && !hasCurrentInRecents && (
+                            <div className="px-3 py-2 typography-meta text-muted-foreground">
+                                No recent models
+                            </div>
                         )}
-
-                        {recentModels.map(({ providerID, modelID, provider, model }) => {
+                        {recentModels.map(({ providerID, modelID, model }) => {
                             const isSelected = providerID === currentProviderId && modelID === currentModelId;
                             const modelName = typeof model?.name === 'string' && model.name.trim().length > 0
                                 ? model.name
                                 : modelID;
+                            const metadata = getModelMetadata(providerID, modelID);
+                            const ctxTokens = formatTokens(metadata?.limit?.context);
+                            const outTokens = formatTokens(metadata?.limit?.output);
                             return (
                                 <button
                                     key={`recent-${providerID}-${modelID}`}
                                     type="button"
                                     onClick={() => handleModelSelect(providerID, modelID)}
                                     className={cn(
-                                        'flex min-h-[44px] w-full items-center justify-between gap-2 rounded-xl border px-2 py-2 text-left',
-                                        isSelected ? 'border-primary/30 bg-primary/10' : 'border-border/40 hover:bg-muted/50'
+                                        'flex min-h-[44px] w-full items-center gap-2 border-b border-border/30 px-3 py-2 text-left last:border-b-0',
+                                        isSelected ? 'bg-primary/10' : ''
                                     )}
                                 >
-                                    <span className="typography-meta font-medium text-foreground truncate min-w-0">
+                                    <ProviderLogo providerId={providerID} className="h-4 w-4 flex-shrink-0" />
+                                    <span className="typography-meta font-medium text-foreground truncate min-w-0 flex-1">
                                         {modelName}
                                     </span>
-                                    <span className="typography-micro text-muted-foreground">
-                                        {provider?.name || providerID}
-                                    </span>
+                                    {(ctxTokens || outTokens) && (
+                                        <span className="typography-micro text-muted-foreground whitespace-nowrap flex-shrink-0">
+                                            {ctxTokens && `${ctxTokens} ctx`}
+                                            {ctxTokens && outTokens && ' • '}
+                                            {outTokens && `${outTokens} out`}
+                                        </span>
+                                    )}
                                 </button>
                             );
                         })}
-
-                        {recentModels.length === 0 && !currentModelRow && (
-                            <div className="rounded-xl border border-dashed border-border/50 px-2 py-2 typography-meta text-muted-foreground">
-                                Not selected
-                            </div>
-                        )}
-
                         <button
                             type="button"
                             onClick={onOpenModel}
-                            className="flex min-h-[44px] w-full items-center justify-center rounded-xl border border-border/40 px-2 py-2 typography-meta font-medium text-muted-foreground hover:bg-muted/50"
+                            className="flex min-h-[44px] w-full items-center justify-center border-t border-border/30 px-3 py-2 typography-meta font-medium text-muted-foreground"
                             aria-label="More models"
                         >
                             ...
diff --git a/packages/ui/src/components/chat/message/parts/ToolPart.tsx b/packages/ui/src/components/chat/message/parts/ToolPart.tsx
index 8e62c2db..ab9e8ff2 100644
--- a/packages/ui/src/components/chat/message/parts/ToolPart.tsx
+++ b/packages/ui/src/components/chat/message/parts/ToolPart.tsx
@@ -1066,6 +1066,10 @@ const ToolPart: React.FC<ToolPartProps> = ({ part, isExpanded, onToggle, syntaxT
         let filePath: unknown;
         if (part.tool === 'edit' || part.tool === 'multiedit') {
             filePath = input?.filePath || input?.file_path || input?.path || metadata?.filePath || metadata?.file_path || metadata?.path;
+        } else if (part.tool === 'apply_patch') {
+            const files = Array.isArray(metadata?.files) ? metadata?.files : [];
+            const firstFile = files[0] as { relativePath?: string; filePath?: string } | undefined;
+            filePath = firstFile?.relativePath || firstFile?.filePath;
         } else if (['write', 'create', 'file_write', 'read', 'view', 'file_read', 'cat'].includes(part.tool)) {
             filePath = input?.filePath || input?.file_path || input?.path || metadata?.filePath || metadata?.file_path || metadata?.path;
         }
diff --git a/packages/ui/src/components/ui/ScrollableOverlay.tsx b/packages/ui/src/components/ui/ScrollableOverlay.tsx
index b2a7de3f..1ca61570 100644
--- a/packages/ui/src/components/ui/ScrollableOverlay.tsx
+++ b/packages/ui/src/components/ui/ScrollableOverlay.tsx
@@ -34,13 +34,13 @@ export const ScrollableOverlay = React.forwardRef<HTMLElement, ScrollableOverlay
 
     return (
       <div
-        className={cn("relative flex flex-col min-h-0 w-full overflow-hidden overscroll-auto", outerClassName)}
+        className={cn("relative flex flex-col min-h-0 w-full overflow-hidden overscroll-none", outerClassName)}
         data-keyboard-avoid={keyboardAvoid ? "true" : undefined}
       >
         <Component
           ref={containerRef as React.Ref<HTMLElement>}
           className={cn(
-            "overlay-scrollbar-target overlay-scrollbar-container overscroll-auto",
+            "overlay-scrollbar-target overlay-scrollbar-container overscroll-none",
             fillContainer ? "flex-1 min-h-0 w-full" : "flex-none w-full h-auto",
             disableHorizontal ? "overflow-y-auto overflow-x-hidden" : "overflow-auto",
             className