nastech-app 1.0.0

package/sources/components/AgentInput.tsx

@@ -0,0 +1,1468 @@
+import { Ionicons, Octicons } from '@expo/vector-icons';
+import * as React from 'react';
+import { View, Platform, useWindowDimensions, ViewStyle, Text, ActivityIndicator, TouchableWithoutFeedback, Image as RNImage, Pressable } from 'react-native';
+import { Image } from 'expo-image';
+import { AgentInputAttachmentStrip } from './AgentInputAttachmentStrip';
+import type { AttachmentPreview } from '@/sync/attachmentTypes';
+import { generateThumbhash } from '@/utils/thumbhash';
+import { layout } from './layout';
+import { MultiTextInput, KeyPressEvent } from './MultiTextInput';
+import { Typography } from '@/constants/Typography';
+import { PermissionMode, ModelMode } from './PermissionModeSelector';
+import { EffortLevel } from './modelModeOptions';
+import { hapticsLight, hapticsError } from './haptics';
+import { Shaker, ShakeInstance } from './Shaker';
+import { StatusDot } from './StatusDot';
+import { useActiveWord } from './autocomplete/useActiveWord';
+import { useActiveSuggestions } from './autocomplete/useActiveSuggestions';
+import { AgentInputAutocomplete } from './AgentInputAutocomplete';
+import { FloatingOverlay } from './FloatingOverlay';
+import { TextInputState, MultiTextInputHandle } from './MultiTextInput';
+import { applySuggestion } from './autocomplete/applySuggestion';
+import { GitStatusBadge, useHasMeaningfulGitStatus } from './GitStatusBadge';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { useSetting } from '@/sync/storage';
+import { hackMode, hackModes } from '@/sync/modeHacks';
+import { Theme } from '@/theme';
+import { t } from '@/text';
+import { Metadata } from '@/sync/storageTypes';
+
+interface AgentInputProps {
+    // `initialValue` seeds the uncontrolled textarea once; keystrokes never
+    // round-trip back into it via React, which is what keeps fast typing/
+    // deletion crisp. The parent reads the live text via the imperative ref.
+    initialValue: string;
+    placeholder: string;
+    // Fires on every keystroke so the parent can sync derived state (drafts,
+    // hasText) — typically wrapped in startTransition / debounce by the caller.
+    onChangeText?: (text: string) => void;
+    sessionId?: string;
+    onSend: () => void;
+    sendIcon?: React.ReactNode;
+    onMicPress?: () => void;
+    isMicActive?: boolean;
+    permissionMode?: PermissionMode | null;
+    availableModes?: PermissionMode[];
+    onPermissionModeChange?: (mode: PermissionMode) => void;
+    modelMode?: ModelMode | null;
+    availableModels?: ModelMode[];
+    onModelModeChange?: (mode: ModelMode) => void;
+    effortLevel?: EffortLevel | null;
+    availableEffortLevels?: EffortLevel[];
+    onEffortLevelChange?: (level: EffortLevel) => void;
+    metadata?: Metadata | null;
+    onAbort?: () => void | Promise<void>;
+    showAbortButton?: boolean;
+    connectionStatus?: {
+        text: string;
+        color: string;
+        dotColor: string;
+        isPulsing?: boolean;
+        cliStatus?: {
+            claude: boolean | null;
+            codex: boolean | null;
+            gemini?: boolean | null;
+        };
+    };
+    autocompletePrefixes: string[];
+    autocompleteSuggestions: (query: string) => Promise<{ key: string, text: string, component: React.ElementType }[]>;
+    usageData?: {
+        inputTokens: number;
+        outputTokens: number;
+        cacheCreation: number;
+        cacheRead: number;
+        contextSize: number;
+    };
+    alwaysShowContextSize?: boolean;
+    onFileViewerPress?: () => void;
+    agentType?: 'claude' | 'codex' | 'gemini' | 'openclaw';
+    onAgentClick?: () => void;
+    machineName?: string | null;
+    onMachineClick?: () => void;
+    currentPath?: string | null;
+    onPathClick?: () => void;
+    blockSend?: boolean;
+    isSendDisabled?: boolean;
+    isSending?: boolean;
+    minHeight?: number;
+    zenMode?: boolean;
+    /** Image attachments waiting to be sent (expImageUpload feature). */
+    selectedImages?: AttachmentPreview[];
+    onPickImages?: () => void;
+    onRemoveImage?: (id: string) => void;
+    onAddImages?: (images: AttachmentPreview[]) => void;
+}
+
+const MAX_CONTEXT_SIZE = 190000;
+
+const stylesheet = StyleSheet.create((theme, runtime) => ({
+    container: {
+        alignItems: 'center',
+        paddingBottom: 8,
+        paddingTop: 8,
+    },
+    innerContainer: {
+        width: '100%',
+        position: 'relative',
+    },
+    unifiedPanel: {
+        backgroundColor: theme.colors.input.background,
+        borderRadius: Platform.select({ default: 16, android: 20 }),
+        overflow: 'hidden',
+        paddingVertical: 2,
+        paddingBottom: 8,
+        paddingHorizontal: 8,
+    },
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderWidth: 0,
+        paddingLeft: 8,
+        paddingRight: 8,
+        paddingVertical: 4,
+        minHeight: 40,
+    },
+
+    // Overlay styles
+    autocompleteOverlay: {
+        position: 'absolute',
+        bottom: '100%',
+        left: 0,
+        right: 0,
+        marginBottom: 8,
+        zIndex: 1000,
+    },
+    settingsOverlay: {
+        position: 'absolute',
+        bottom: '100%',
+        left: 0,
+        right: 0,
+        marginBottom: 8,
+        zIndex: 1000,
+    },
+    overlayBackdrop: {
+        position: 'absolute',
+        top: -1000,
+        left: -1000,
+        right: -1000,
+        bottom: -1000,
+        zIndex: 999,
+    },
+    overlaySection: {
+        paddingVertical: 8,
+    },
+    overlaySectionTitle: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: theme.colors.textSecondary,
+        paddingHorizontal: 16,
+        paddingBottom: 4,
+        ...Typography.default('semiBold'),
+    },
+    overlayDivider: {
+        height: 1,
+        backgroundColor: theme.colors.divider,
+        marginHorizontal: 16,
+    },
+
+    // Selection styles
+    selectionItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        backgroundColor: 'transparent',
+    },
+    selectionItemPressed: {
+        backgroundColor: theme.colors.surfacePressed,
+    },
+    radioButton: {
+        width: 16,
+        height: 16,
+        borderRadius: 8,
+        borderWidth: 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 12,
+    },
+    radioButtonActive: {
+        borderColor: theme.colors.radio.active,
+    },
+    radioButtonInactive: {
+        borderColor: theme.colors.radio.inactive,
+    },
+    radioButtonDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: theme.colors.radio.dot,
+    },
+    selectionLabel: {
+        fontSize: 14,
+        ...Typography.default(),
+    },
+    selectionLabelActive: {
+        color: theme.colors.radio.active,
+    },
+    selectionLabelInactive: {
+        color: theme.colors.text,
+    },
+
+    // Status styles
+    statusContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingBottom: 4,
+    },
+    statusRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    statusText: {
+        fontSize: 11,
+        ...Typography.default(),
+    },
+    permissionModeContainer: {
+        flexDirection: 'column',
+        alignItems: 'flex-end',
+    },
+    permissionModeText: {
+        fontSize: 11,
+        ...Typography.default(),
+    },
+    contextWarningText: {
+        fontSize: 11,
+        marginLeft: 8,
+        ...Typography.default(),
+    },
+
+    // Button styles
+    actionButtonsContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 0,
+    },
+    actionButtonsLeft: {
+        flexDirection: 'row',
+        gap: 8,
+        flex: 1,
+        overflow: 'hidden',
+    },
+    actionButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: Platform.select({ default: 16, android: 20 }),
+        paddingHorizontal: 8,
+        paddingVertical: 6,
+        justifyContent: 'center',
+        height: 32,
+    },
+    actionButtonPressed: {
+        opacity: 0.7,
+    },
+    actionButtonIcon: {
+        color: theme.colors.button.secondary.tint,
+    },
+    sendButton: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexShrink: 0,
+        marginLeft: 8,
+    },
+    sendButtonActive: {
+        backgroundColor: theme.colors.button.primary.background,
+    },
+    sendButtonInactive: {
+        backgroundColor: theme.colors.button.primary.disabled,
+    },
+    sendButtonLocked: {
+        backgroundColor: theme.colors.surfaceHigh,
+        borderWidth: 1,
+        borderColor: theme.colors.divider,
+    },
+    sendButtonInner: {
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    sendButtonInnerPressed: {
+        opacity: 0.7,
+    },
+    sendButtonIcon: {
+        color: theme.colors.button.primary.tint,
+    },
+}));
+
+const getContextWarning = (contextSize: number, alwaysShow: boolean = false, theme: Theme) => {
+    const percentageUsed = (contextSize / MAX_CONTEXT_SIZE) * 100;
+    const percentageRemaining = Math.max(0, Math.min(100, 100 - percentageUsed));
+
+    if (percentageRemaining <= 5) {
+        return { text: t('agentInput.context.remaining', { percent: Math.round(percentageRemaining) }), color: theme.colors.warningCritical };
+    } else if (percentageRemaining <= 10) {
+        return { text: t('agentInput.context.remaining', { percent: Math.round(percentageRemaining) }), color: theme.colors.warning };
+    } else if (alwaysShow) {
+        // Show context remaining in neutral color when not near limit
+        return { text: t('agentInput.context.remaining', { percent: Math.round(percentageRemaining) }), color: theme.colors.warning };
+    }
+    return null; // No display needed
+};
+
+// Stable sub-trees extracted from AgentInput so they don't reconcile when
+// the input's keystroke-derived state (hasText / inputState) flips. Their
+// props are derived from session metadata, not from the textarea content,
+// so memo skips re-render on typing entirely.
+
+type StatusRowProps = {
+    connectionStatus?: AgentInputProps['connectionStatus'];
+    contextWarning: { text: string; color: string } | null;
+    displayPermissionMode: ReturnType<typeof hackMode> | null;
+    permissionModeKey: string;
+    isSandboxedYoloMode: boolean;
+    permissionLabel: string | null;
+    zenMode?: boolean;
+};
+
+const AgentInputStatusRow = React.memo(function AgentInputStatusRow(p: StatusRowProps) {
+    const { theme } = useUnistyles();
+    const showPermissionBadge = !!p.displayPermissionMode
+        && p.permissionModeKey !== 'default'
+        && !p.zenMode
+        && !!p.permissionLabel;
+    if (!p.connectionStatus && !p.contextWarning && !showPermissionBadge) {
+        return null;
+    }
+    return (
+        <View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingHorizontal: 16,
+            paddingBottom: 4,
+            minHeight: 20,
+        }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1, gap: 11 }}>
+                {p.connectionStatus && (
+                    <>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                            <StatusDot
+                                color={p.connectionStatus.dotColor}
+                                isPulsing={p.connectionStatus.isPulsing}
+                                size={6}
+                            />
+                            <Text style={{
+                                fontSize: 11,
+                                color: p.connectionStatus.color,
+                                ...Typography.default()
+                            }}>
+                                {p.connectionStatus.text}
+                            </Text>
+                        </View>
+                        {p.connectionStatus.cliStatus && (
+                            <>
+                                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                                    <Text style={{
+                                        fontSize: 11,
+                                        color: p.connectionStatus.cliStatus.claude ? theme.colors.success : theme.colors.textDestructive,
+                                        ...Typography.default()
+                                    }}>
+                                        {p.connectionStatus.cliStatus.claude ? '✓' : '✗'}
+                                    </Text>
+                                    <Text style={{
+                                        fontSize: 11,
+                                        color: p.connectionStatus.cliStatus.claude ? theme.colors.success : theme.colors.textDestructive,
+                                        ...Typography.default()
+                                    }}>
+                                        claude
+                                    </Text>
+                                </View>
+                                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                                    <Text style={{
+                                        fontSize: 11,
+                                        color: p.connectionStatus.cliStatus.codex ? theme.colors.success : theme.colors.textDestructive,
+                                        ...Typography.default()
+                                    }}>
+                                        {p.connectionStatus.cliStatus.codex ? '✓' : '✗'}
+                                    </Text>
+                                    <Text style={{
+                                        fontSize: 11,
+                                        color: p.connectionStatus.cliStatus.codex ? theme.colors.success : theme.colors.textDestructive,
+                                        ...Typography.default()
+                                    }}>
+                                        codex
+                                    </Text>
+                                </View>
+                                {p.connectionStatus.cliStatus.gemini !== undefined && (
+                                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                                        <Text style={{
+                                            fontSize: 11,
+                                            color: p.connectionStatus.cliStatus.gemini ? theme.colors.success : theme.colors.textDestructive,
+                                            ...Typography.default()
+                                        }}>
+                                            {p.connectionStatus.cliStatus.gemini ? '✓' : '✗'}
+                                        </Text>
+                                        <Text style={{
+                                            fontSize: 11,
+                                            color: p.connectionStatus.cliStatus.gemini ? theme.colors.success : theme.colors.textDestructive,
+                                            ...Typography.default()
+                                        }}>
+                                            gemini
+                                        </Text>
+                                    </View>
+                                )}
+                            </>
+                        )}
+                    </>
+                )}
+                {p.contextWarning && (
+                    <Text style={{
+                        fontSize: 11,
+                        color: p.contextWarning.color,
+                        marginLeft: p.connectionStatus ? 8 : 0,
+                        ...Typography.default()
+                    }}>
+                        {p.connectionStatus ? '• ' : ''}{p.contextWarning.text}
+                    </Text>
+                )}
+            </View>
+            {showPermissionBadge && (() => {
+                const permColor = p.isSandboxedYoloMode ? '#4169E1' :
+                    p.permissionModeKey === 'acceptEdits' ? theme.colors.permission.acceptEdits :
+                        p.permissionModeKey === 'bypassPermissions' ? theme.colors.permission.bypass :
+                            p.permissionModeKey === 'plan' ? theme.colors.permission.plan :
+                                p.permissionModeKey === 'read-only' ? theme.colors.permission.readOnly :
+                                    p.permissionModeKey === 'safe-yolo' ? theme.colors.permission.safeYolo :
+                                        p.permissionModeKey === 'yolo' ? theme.colors.permission.yolo :
+                                            theme.colors.textSecondary;
+                const permIcon: 'play-forward' | 'pause' =
+                    p.permissionModeKey === 'plan' || p.permissionModeKey === 'read-only'
+                        ? 'pause' : 'play-forward';
+                return (
+                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                        <Ionicons name={permIcon} size={11} color={permColor} />
+                        <Text style={{
+                            fontSize: 11,
+                            color: permColor,
+                            ...Typography.default()
+                        }}>
+                            {p.permissionLabel}
+                        </Text>
+                    </View>
+                );
+            })()}
+        </View>
+    );
+});
+
+type ContextChipsProps = {
+    machineName?: string | null;
+    onMachineClick?: () => void;
+    currentPath?: string | null;
+    onPathClick?: () => void;
+};
+
+const AgentInputContextChips = React.memo(function AgentInputContextChips(p: ContextChipsProps) {
+    const { theme } = useUnistyles();
+    if (p.machineName === undefined && !p.currentPath) {
+        return null;
+    }
+    return (
+        <View style={{
+            backgroundColor: theme.colors.surfacePressed,
+            borderRadius: 12,
+            padding: 8,
+            marginBottom: 8,
+            gap: 4,
+        }}>
+            {p.machineName !== undefined && p.onMachineClick && (
+                <Pressable
+                    onPress={() => {
+                        hapticsLight();
+                        p.onMachineClick?.();
+                    }}
+                    hitSlop={{ top: 5, bottom: 10, left: 0, right: 0 }}
+                    style={(s) => ({
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        borderRadius: Platform.select({ default: 16, android: 20 }),
+                        paddingHorizontal: 10,
+                        paddingVertical: 6,
+                        height: 32,
+                        opacity: s.pressed ? 0.7 : 1,
+                        gap: 6,
+                    })}
+                >
+                    <Ionicons name="desktop-outline" size={14} color={theme.colors.textSecondary} />
+                    <Text style={{
+                        fontSize: 13,
+                        color: theme.colors.text,
+                        fontWeight: '600',
+                        ...Typography.default('semiBold'),
+                    }}>
+                        {p.machineName === null ? t('agentInput.noMachinesAvailable') : p.machineName}
+                    </Text>
+                </Pressable>
+            )}
+            {p.currentPath && p.onPathClick && (
+                <Pressable
+                    onPress={() => {
+                        hapticsLight();
+                        p.onPathClick?.();
+                    }}
+                    hitSlop={{ top: 5, bottom: 10, left: 0, right: 0 }}
+                    style={(s) => ({
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        borderRadius: Platform.select({ default: 16, android: 20 }),
+                        paddingHorizontal: 10,
+                        paddingVertical: 6,
+                        height: 32,
+                        opacity: s.pressed ? 0.7 : 1,
+                        gap: 6,
+                    })}
+                >
+                    <Ionicons name="folder-outline" size={14} color={theme.colors.textSecondary} />
+                    <Text style={{
+                        fontSize: 13,
+                        color: theme.colors.text,
+                        fontWeight: '600',
+                        ...Typography.default('semiBold'),
+                    }}>
+                        {p.currentPath}
+                    </Text>
+                </Pressable>
+            )}
+        </View>
+    );
+});
+
+export const AgentInput = React.memo(React.forwardRef<MultiTextInputHandle, AgentInputProps>((props, ref) => {
+    const styles = stylesheet;
+    const { theme } = useUnistyles();
+    const screenWidth = useWindowDimensions().width;
+    const isSendBlocked = props.blockSend ?? false;
+
+    // `hasText` drives only the send-button appearance/enabled state. It's
+    // updated via startTransition from the keystroke handler so a busy reducer
+    // never blocks the next character from landing in the textarea.
+    const [hasText, setHasText] = React.useState(() => props.initialValue.trim().length > 0);
+    const hasImages = (props.selectedImages?.length ?? 0) > 0;
+    const canPressSendButton = !props.isSending
+        && !props.isSendDisabled
+        && (isSendBlocked ? (hasText || hasImages) : (hasText || hasImages || !!props.onMicPress));
+
+    // Check if this is a Codex, Gemini, or OpenClaw session
+    // Use metadata.flavor for existing sessions, agentType prop for new sessions
+    const isCodex = props.metadata?.flavor === 'codex' || props.agentType === 'codex';
+    const isGemini = props.metadata?.flavor === 'gemini' || props.agentType === 'gemini';
+    const isOpenClaw = props.metadata?.flavor === 'openclaw' || props.agentType === 'openclaw';
+    const displayPermissionMode = React.useMemo(() => (
+        props.permissionMode ? hackMode(props.permissionMode) : null
+    ), [props.permissionMode]);
+    const permissionModeKey = displayPermissionMode?.key ?? 'default';
+    const availableModes = React.useMemo(() => (
+        hackModes(props.availableModes ?? [])
+    ), [props.availableModes]);
+    const availableModels = props.availableModels ?? [];
+    const availableEffortLevels = props.availableEffortLevels ?? [];
+    const isSandboxEnabled = React.useMemo(() => {
+        const sandbox = props.metadata?.sandbox as unknown;
+        if (!sandbox) {
+            return false;
+        }
+        if (typeof sandbox === 'object' && sandbox !== null && 'enabled' in sandbox) {
+            return Boolean((sandbox as { enabled?: unknown }).enabled);
+        }
+        return true;
+    }, [props.metadata?.sandbox]);
+    const isSandboxedYoloMode = isSandboxEnabled && (
+        permissionModeKey === 'bypassPermissions' || permissionModeKey === 'yolo'
+    );
+
+    const withSandboxSuffix = React.useCallback((label: string, modeKey?: string) => {
+        if (!isSandboxEnabled) {
+            return label;
+        }
+        if (modeKey === 'bypassPermissions' || modeKey === 'yolo') {
+            return `${label} (sandboxed)`;
+        }
+        return label;
+    }, [isSandboxEnabled]);
+
+    // Calculate context warning
+    const contextWarning = props.usageData?.contextSize
+        ? getContextWarning(props.usageData.contextSize, props.alwaysShowContextSize ?? false, theme)
+        : null;
+
+    const agentInputEnterToSend = useSetting('agentInputEnterToSend');
+
+
+    // Abort button state
+    const [isAborting, setIsAborting] = React.useState(false);
+    const shakerRef = React.useRef<ShakeInstance>(null);
+    const sendBlockShakerRef = React.useRef<ShakeInstance>(null);
+    const inputRef = React.useRef<MultiTextInputHandle>(null);
+
+    // Forward ref to the MultiTextInput
+    React.useImperativeHandle(ref, () => inputRef.current!, []);
+
+    // Web paste/drag — intercept image pastes and file drops for the
+    // attachment feature. Both handlers funnel through props.onAddImages.
+    React.useEffect(() => {
+        if (Platform.OS !== 'web' || !props.onAddImages) return;
+
+        const handlePaste = async (e: ClipboardEvent) => {
+            // Only handle pastes targeted at a focused text-editable element.
+            // The listener is attached to document, so without this guard a
+            // paste in the URL bar, another modal, or any focused-elsewhere
+            // input would steal images intended for somewhere else.
+            const active = document.activeElement;
+            const isEditableTarget = active instanceof HTMLInputElement
+                || active instanceof HTMLTextAreaElement
+                || (active instanceof HTMLElement && active.isContentEditable);
+            if (!isEditableTarget) return;
+
+            const { getImagesFromClipboard, fileToAttachmentPreview } = await import('@/utils/pasteImages.web');
+            const files = getImagesFromClipboard(e);
+            if (!files.length) return;
+            e.preventDefault();
+            const previews = (await Promise.all(
+                files.map((f) => fileToAttachmentPreview(f, generateThumbhash))
+            )).filter(Boolean) as Omit<AttachmentPreview, 'id'>[];
+            if (previews.length) {
+                props.onAddImages!(previews.map((p) => ({
+                    ...p,
+                    id: `paste_${Date.now()}_${Math.random().toString(36).slice(2)}`,
+                })));
+            }
+        };
+
+        // dragover must call preventDefault for drop to fire; we gate on
+        // `types.includes('Files')` so we don't hijack drag-text/HTML in the
+        // rest of the app.
+        const isFileDrag = (e: DragEvent) => {
+            const types = e.dataTransfer?.types;
+            if (!types) return false;
+            // DataTransferItemList vs DOMStringList — both expose .includes-ish.
+            for (let i = 0; i < types.length; i++) {
+                if (types[i] === 'Files') return true;
+            }
+            return false;
+        };
+
+        const handleDragOver = (e: DragEvent) => {
+            if (!isFileDrag(e)) return;
+            e.preventDefault();
+            if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+        };
+
+        const handleDrop = async (e: DragEvent) => {
+            if (!isFileDrag(e)) return;
+            e.preventDefault();
+            const { getImagesFromDrop, fileToAttachmentPreview } = await import('@/utils/pasteImages.web');
+            const files = getImagesFromDrop(e);
+            if (!files.length) return;
+            const previews = (await Promise.all(
+                files.map((f) => fileToAttachmentPreview(f, generateThumbhash))
+            )).filter(Boolean) as Omit<AttachmentPreview, 'id'>[];
+            if (previews.length) {
+                props.onAddImages!(previews.map((p) => ({
+                    ...p,
+                    id: `drop_${Date.now()}_${Math.random().toString(36).slice(2)}`,
+                })));
+            }
+        };
+
+        document.addEventListener('paste', handlePaste as any);
+        document.addEventListener('dragover', handleDragOver);
+        document.addEventListener('drop', handleDrop);
+        return () => {
+            document.removeEventListener('paste', handlePaste as any);
+            document.removeEventListener('dragover', handleDragOver);
+            document.removeEventListener('drop', handleDrop);
+        };
+    }, [props.onAddImages]);
+
+    // Autocomplete state — text + selection. Updated via startTransition so
+    // typing renders the character immediately and the autocomplete pipeline
+    // catches up on the next idle frame instead of blocking input.
+    const [inputState, setInputState] = React.useState<TextInputState>(() => ({
+        text: props.initialValue,
+        selection: { start: props.initialValue.length, end: props.initialValue.length }
+    }));
+
+    const onChangeTextProp = props.onChangeText;
+    const handleTextChange = React.useCallback((text: string) => {
+        React.startTransition(() => {
+            setHasText(text.trim().length > 0);
+        });
+        onChangeTextProp?.(text);
+    }, [onChangeTextProp]);
+
+    const handleInputStateChange = React.useCallback((newState: TextInputState) => {
+        React.startTransition(() => {
+            setInputState(newState);
+        });
+    }, []);
+
+    // Use the tracked selection from inputState
+    const activeWord = useActiveWord(inputState.text, inputState.selection, props.autocompletePrefixes);
+    // Using default options: clampSelection=true, autoSelectFirst=true, wrapAround=true
+    // To customize: useActiveSuggestions(activeWord, props.autocompleteSuggestions, { clampSelection: false, wrapAround: false })
+    const [suggestions, selected, moveUp, moveDown] = useActiveSuggestions(activeWord, props.autocompleteSuggestions, { clampSelection: true, wrapAround: true });
+
+    // Debug logging
+    // React.useEffect(() => {
+    //     console.log('🔍 Autocomplete Debug:', JSON.stringify({
+    //         value: props.value,
+    //         inputState,
+    //         activeWord,
+    //         suggestionsCount: suggestions.length,
+    //         selected,
+    //         prefixes: props.autocompletePrefixes
+    //     }, null, 2));
+    // }, [props.value, inputState, activeWord, suggestions.length, selected]);
+
+    // Handle suggestion selection
+    const handleSuggestionSelect = React.useCallback((index: number) => {
+        if (!suggestions[index] || !inputRef.current) return;
+
+        const suggestion = suggestions[index];
+
+        // Apply the suggestion
+        const result = applySuggestion(
+            inputState.text,
+            inputState.selection,
+            suggestion.text,
+            props.autocompletePrefixes,
+            true // add space after
+        );
+
+        // Use imperative API to set text and selection
+        inputRef.current.setTextAndSelection(result.text, {
+            start: result.cursorPosition,
+            end: result.cursorPosition
+        });
+
+        // console.log('Selected suggestion:', suggestion.text);
+
+        // Small haptic feedback
+        hapticsLight();
+    }, [suggestions, inputState, props.autocompletePrefixes]);
+
+    // Settings modal state
+    const [showSettings, setShowSettings] = React.useState(false);
+
+    // Handle settings button press
+    const handleSettingsPress = React.useCallback(() => {
+        hapticsLight();
+        setShowSettings(prev => !prev);
+    }, []);
+
+    // Handle settings selection
+    const handleSettingsSelect = React.useCallback((mode: PermissionMode) => {
+        hapticsLight();
+        props.onPermissionModeChange?.(mode);
+        setShowSettings(false);
+    }, [props.onPermissionModeChange]);
+
+    // Handle abort button press
+    const handleAbortPress = React.useCallback(async () => {
+        if (!props.onAbort) return;
+
+        hapticsError();
+        setIsAborting(true);
+        const startTime = Date.now();
+
+        try {
+            await props.onAbort?.();
+
+            // Ensure minimum 300ms loading time
+            const elapsed = Date.now() - startTime;
+            if (elapsed < 300) {
+                await new Promise(resolve => setTimeout(resolve, 300 - elapsed));
+            }
+        } catch (error) {
+            // Shake on error
+            shakerRef.current?.shake();
+            console.error('Abort RPC call failed:', error);
+        } finally {
+            setIsAborting(false);
+        }
+    }, [props.onAbort]);
+
+    const handleBlockedSendAttempt = React.useCallback(() => {
+        if (!isSendBlocked || !hasText || props.isSending) return;
+        hapticsError();
+        sendBlockShakerRef.current?.shake();
+    }, [hasText, isSendBlocked, props.isSending]);
+
+    const handleSendPress = React.useCallback(() => {
+        if (isSendBlocked) {
+            handleBlockedSendAttempt();
+            return;
+        }
+        if (props.isSendDisabled || props.isSending) return;
+
+        hapticsLight();
+        // Live read avoids stalling behind the transitioned `hasText`.
+        const liveHasText = (inputRef.current?.getText() ?? '').trim().length > 0;
+        if (liveHasText || hasImages) {
+            props.onSend();
+        } else {
+            props.onMicPress?.();
+        }
+    }, [handleBlockedSendAttempt, hasImages, isSendBlocked, props.isSendDisabled, props.isSending, props.onSend, props.onMicPress]);
+
+    // Handle keyboard navigation
+    const handleKeyPress = React.useCallback((event: KeyPressEvent): boolean => {
+        // Handle autocomplete navigation first
+        if (suggestions.length > 0) {
+            if (event.key === 'ArrowUp') {
+                moveUp();
+                return true;
+            } else if (event.key === 'ArrowDown') {
+                moveDown();
+                return true;
+            } else if ((event.key === 'Enter' || (event.key === 'Tab' && !event.shiftKey))) {
+                // Both Enter and Tab select the current suggestion
+                // If none selected (selected === -1), select the first one
+                const indexToSelect = selected >= 0 ? selected : 0;
+                handleSuggestionSelect(indexToSelect);
+                return true;
+            } else if (event.key === 'Escape') {
+                // Clear suggestions by collapsing selection (triggers activeWord to clear)
+                if (inputRef.current) {
+                    const cursorPos = inputState.selection.start;
+                    inputRef.current.setTextAndSelection(inputState.text, {
+                        start: cursorPos,
+                        end: cursorPos
+                    });
+                }
+                return true;
+            }
+        }
+
+        // Handle Escape for abort when no suggestions are visible
+        if (event.key === 'Escape' && props.showAbortButton && props.onAbort && !isAborting) {
+            handleAbortPress();
+            return true;
+        }
+
+        // Original key handling
+        if (Platform.OS === 'web') {
+            // On mobile web (touch devices), Enter should insert a newline since
+            // there's no Shift key available. Users send via the send button instead.
+            // Use pointer:coarse media query instead of ontouchstart/maxTouchPoints
+            // to avoid false positives on Windows touch-screen laptops with keyboards.
+            const isTouchDevice = typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches;
+            if (agentInputEnterToSend && event.key === 'Enter' && !event.shiftKey && !isTouchDevice) {
+                // Read live text from the textarea — `hasText` is debounced via
+                // startTransition and would lag behind a quick type-then-Enter.
+                const liveText = inputRef.current?.getText() ?? '';
+                if (liveText.trim()) {
+                    if (isSendBlocked) {
+                        handleBlockedSendAttempt();
+                    } else if (!props.isSendDisabled) {
+                        props.onSend();
+                    }
+                    return true; // Key was handled
+                }
+            }
+            // Handle Shift+Tab for permission mode switching
+            if (event.key === 'Tab' && event.shiftKey && props.onPermissionModeChange && availableModes.length > 0) {
+                const currentIndex = availableModes.findIndex((mode) => mode.key === permissionModeKey);
+                const nextIndex = ((currentIndex >= 0 ? currentIndex : 0) + 1) % availableModes.length;
+                props.onPermissionModeChange(availableModes[nextIndex]);
+                hapticsLight();
+                return true; // Key was handled, prevent default tab behavior
+            }
+
+        }
+        return false; // Key was not handled
+    }, [suggestions, moveUp, moveDown, selected, handleSuggestionSelect, props.showAbortButton, props.onAbort, isAborting, handleAbortPress, agentInputEnterToSend, props.onSend, props.onPermissionModeChange, availableModes, permissionModeKey, isSendBlocked, handleBlockedSendAttempt, props.isSendDisabled]);
+
+
+
+
+    return (
+        <View style={[
+            styles.container,
+            { paddingHorizontal: screenWidth > 700 ? 12 : 8 }
+        ]}>
+            <View style={[
+                styles.innerContainer,
+                { maxWidth: layout.maxWidth }
+            ]}>
+                {/* Autocomplete suggestions overlay */}
+                {suggestions.length > 0 && (
+                    <View style={[
+                        styles.autocompleteOverlay,
+                        { paddingHorizontal: screenWidth > 700 ? 0 : 8 }
+                    ]}>
+                        <AgentInputAutocomplete
+                            suggestions={suggestions.map(s => {
+                                const Component = s.component;
+                                return <Component key={s.key} />;
+                            })}
+                            selectedIndex={selected}
+                            onSelect={handleSuggestionSelect}
+                            itemHeight={48}
+                        />
+                    </View>
+                )}
+
+                {/* Settings overlay */}
+                {showSettings && (
+                    <>
+                        <TouchableWithoutFeedback onPress={() => setShowSettings(false)}>
+                            <View style={styles.overlayBackdrop} />
+                        </TouchableWithoutFeedback>
+                        <View style={[
+                            styles.settingsOverlay,
+                            { paddingHorizontal: screenWidth > 700 ? 0 : 8 }
+                        ]}>
+                            <FloatingOverlay maxHeight={400} keyboardShouldPersistTaps="always">
+                                {/* Permission Mode Section */}
+                                <View style={styles.overlaySection}>
+                                    <Text style={styles.overlaySectionTitle}>
+                                        {isCodex ? t('agentInput.codexPermissionMode.title') : isGemini ? t('agentInput.geminiPermissionMode.title') : t('agentInput.permissionMode.title')}
+                                    </Text>
+                                    {availableModes.map((mode) => {
+                                        const isSelected = permissionModeKey === mode.key;
+
+                                        return (
+                                            <Pressable
+                                                key={mode.key}
+                                                onPress={() => handleSettingsSelect(mode)}
+                                                style={({ pressed }) => ({
+                                                    flexDirection: 'row',
+                                                    alignItems: 'flex-start',
+                                                    paddingHorizontal: 16,
+                                                    paddingVertical: 8,
+                                                    backgroundColor: pressed ? theme.colors.surfacePressed : 'transparent'
+                                                })}
+                                            >
+                                                <View style={{
+                                                    width: 16,
+                                                    height: 16,
+                                                    borderRadius: 8,
+                                                    borderWidth: 2,
+                                                    borderColor: isSelected ? theme.colors.radio.active : theme.colors.radio.inactive,
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    marginRight: 12,
+                                                    marginTop: 2,
+                                                }}>
+                                                    {isSelected && (
+                                                        <View style={{
+                                                            width: 6,
+                                                            height: 6,
+                                                            borderRadius: 3,
+                                                            backgroundColor: theme.colors.radio.dot
+                                                        }} />
+                                                    )}
+                                                </View>
+                                                <View style={{ flex: 1 }}>
+                                                    <Text style={{
+                                                        fontSize: 14,
+                                                        color: isSelected ? theme.colors.radio.active : theme.colors.text,
+                                                        ...Typography.default()
+                                                    }}>
+                                                        {withSandboxSuffix(mode.name, mode.key)}
+                                                    </Text>
+                                                    {!!mode.description && (
+                                                        <Text style={{
+                                                            fontSize: 11,
+                                                            color: theme.colors.textSecondary,
+                                                            ...Typography.default()
+                                                        }}>
+                                                            {mode.description}
+                                                        </Text>
+                                                    )}
+                                                </View>
+                                            </Pressable>
+                                        );
+                                    })}
+                                </View>
+
+                                {/* Divider */}
+                                <View style={{
+                                    height: 1,
+                                    backgroundColor: theme.colors.divider,
+                                    marginHorizontal: 16
+                                }} />
+
+                                {/* Model + Effort side by side */}
+                                <View style={{ flexDirection: 'row' }}>
+                                    {/* Model Section */}
+                                    <View style={{ paddingVertical: 8, flex: 1 }}>
+                                        <Text style={{
+                                            fontSize: 12,
+                                            fontWeight: '600',
+                                            color: theme.colors.textSecondary,
+                                            paddingHorizontal: 16,
+                                            paddingBottom: 4,
+                                            ...Typography.default('semiBold')
+                                        }}>
+                                            {t('agentInput.model.title')}
+                                        </Text>
+                                        {availableModels.length > 0 ? (
+                                            availableModels.map((model) => {
+                                                const isSelected = props.modelMode?.key === model.key;
+
+                                                return (
+                                                    <Pressable
+                                                        key={model.key}
+                                                        onPress={() => {
+                                                            hapticsLight();
+                                                            props.onModelModeChange?.(model);
+                                                            setShowSettings(false);
+                                                        }}
+                                                        style={({ pressed }) => ({
+                                                            flexDirection: 'row',
+                                                            alignItems: 'flex-start',
+                                                            paddingHorizontal: 16,
+                                                            paddingVertical: 8,
+                                                            backgroundColor: pressed ? theme.colors.surfacePressed : 'transparent'
+                                                        })}
+                                                    >
+                                                        <View style={{
+                                                            width: 16,
+                                                            height: 16,
+                                                            borderRadius: 8,
+                                                            borderWidth: 2,
+                                                            borderColor: isSelected ? theme.colors.radio.active : theme.colors.radio.inactive,
+                                                            alignItems: 'center',
+                                                            justifyContent: 'center',
+                                                            marginRight: 12,
+                                                            marginTop: 2,
+                                                        }}>
+                                                            {isSelected && (
+                                                                <View style={{
+                                                                    width: 6,
+                                                                    height: 6,
+                                                                    borderRadius: 3,
+                                                                    backgroundColor: theme.colors.radio.dot
+                                                                }} />
+                                                            )}
+                                                        </View>
+                                                        <View>
+                                                            <Text style={{
+                                                                fontSize: 14,
+                                                                color: isSelected ? theme.colors.radio.active : theme.colors.text,
+                                                                ...Typography.default()
+                                                            }}>
+                                                                {model.name}
+                                                            </Text>
+                                                            {!!model.description && (
+                                                                <Text style={{
+                                                                    fontSize: 11,
+                                                                    color: theme.colors.textSecondary,
+                                                                    ...Typography.default()
+                                                                }}>
+                                                                    {model.description}
+                                                                </Text>
+                                                            )}
+                                                        </View>
+                                                    </Pressable>
+                                                );
+                                            })
+                                        ) : (
+                                            <Text style={{
+                                                fontSize: 13,
+                                                color: theme.colors.textSecondary,
+                                                paddingHorizontal: 16,
+                                                paddingVertical: 8,
+                                                ...Typography.default()
+                                            }}>
+                                                {t('agentInput.model.configureInCli')}
+                                            </Text>
+                                        )}
+                                    </View>
+
+                                    {/* Effort Level Section — second column */}
+                                    {availableEffortLevels.length > 0 && props.onEffortLevelChange && (
+                                        <>
+                                            <View style={{
+                                                width: 1,
+                                                backgroundColor: theme.colors.divider,
+                                                marginVertical: 8,
+                                            }} />
+                                            <View style={{ paddingVertical: 8, flex: 1 }}>
+                                                <Text style={{
+                                                    fontSize: 12,
+                                                    fontWeight: '600',
+                                                    color: theme.colors.textSecondary,
+                                                    paddingHorizontal: 16,
+                                                    paddingBottom: 4,
+                                                    ...Typography.default('semiBold')
+                                                }}>
+                                                    {t('agentInput.effort.title')}
+                                                </Text>
+                                                {availableEffortLevels.map((level) => {
+                                                    const isSelected = props.effortLevel?.key === level.key;
+
+                                                    return (
+                                                        <Pressable
+                                                            key={level.key}
+                                                            onPress={() => {
+                                                                hapticsLight();
+                                                                props.onEffortLevelChange?.(level);
+                                                                setShowSettings(false);
+                                                            }}
+                                                            style={({ pressed }) => ({
+                                                                flexDirection: 'row',
+                                                                alignItems: 'flex-start',
+                                                                paddingHorizontal: 16,
+                                                                paddingVertical: 8,
+                                                                backgroundColor: pressed ? theme.colors.surfacePressed : 'transparent'
+                                                            })}
+                                                        >
+                                                            <View style={{
+                                                                width: 16,
+                                                                height: 16,
+                                                                borderRadius: 8,
+                                                                borderWidth: 2,
+                                                                borderColor: isSelected ? theme.colors.radio.active : theme.colors.radio.inactive,
+                                                                alignItems: 'center',
+                                                                justifyContent: 'center',
+                                                                marginRight: 12,
+                                                                marginTop: 2,
+                                                            }}>
+                                                                {isSelected && (
+                                                                    <View style={{
+                                                                        width: 6,
+                                                                        height: 6,
+                                                                        borderRadius: 3,
+                                                                        backgroundColor: theme.colors.radio.dot
+                                                                    }} />
+                                                                )}
+                                                            </View>
+                                                            <View>
+                                                                <Text style={{
+                                                                    fontSize: 14,
+                                                                    color: isSelected ? theme.colors.radio.active : theme.colors.text,
+                                                                    ...Typography.default()
+                                                                }}>
+                                                                    {level.name}
+                                                                </Text>
+                                                                {!!level.description && (
+                                                                    <Text style={{
+                                                                        fontSize: 11,
+                                                                        color: theme.colors.textSecondary,
+                                                                        ...Typography.default()
+                                                                    }}>
+                                                                        {level.description}
+                                                                    </Text>
+                                                                )}
+                                                            </View>
+                                                        </Pressable>
+                                                    );
+                                                })}
+                                            </View>
+                                        </>
+                                    )}
+                                </View>
+                            </FloatingOverlay>
+                        </View>
+                    </>
+                )}
+
+                <AgentInputStatusRow
+                    connectionStatus={props.connectionStatus}
+                    contextWarning={contextWarning}
+                    displayPermissionMode={displayPermissionMode}
+                    permissionModeKey={permissionModeKey}
+                    isSandboxedYoloMode={isSandboxedYoloMode}
+                    permissionLabel={displayPermissionMode ? withSandboxSuffix(displayPermissionMode.name, permissionModeKey) : null}
+                    zenMode={props.zenMode}
+                />
+
+                <AgentInputContextChips
+                    machineName={props.machineName}
+                    onMachineClick={props.onMachineClick}
+                    currentPath={props.currentPath}
+                    onPathClick={props.onPathClick}
+                />
+
+                {/* Box 2: Action Area (Input + Send) */}
+                <Shaker ref={sendBlockShakerRef}>
+                <View style={styles.unifiedPanel}>
+                    {/* Attachment preview strip */}
+                    {props.selectedImages && props.selectedImages.length > 0 && (
+                        <AgentInputAttachmentStrip
+                            images={props.selectedImages}
+                            onRemove={props.onRemoveImage ?? (() => {})}
+                        />
+                    )}
+                    {/* Input field */}
+                    <View style={[styles.inputContainer, props.minHeight ? { minHeight: props.minHeight } : undefined]}>
+                        <MultiTextInput
+                            ref={inputRef}
+                            defaultValue={props.initialValue}
+                            paddingTop={Platform.OS === 'web' ? 10 : 8}
+                            paddingBottom={Platform.OS === 'web' ? 10 : 8}
+                            onChangeText={handleTextChange}
+                            placeholder={props.placeholder}
+                            onKeyPress={handleKeyPress}
+                            onStateChange={handleInputStateChange}
+                            maxHeight={Platform.OS === 'web' ? 480 : 120}
+                        />
+                    </View>
+
+                    {/* Action buttons below input */}
+                    <View style={styles.actionButtonsContainer}>
+                        <View style={{ flexDirection: 'column', flex: 1, gap: 2 }}>
+                            {/* Row 1: Settings, Profile (FIRST), Agent, Abort, Git Status */}
+                            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                                {props.zenMode && <View style={{ flex: 1 }} />}
+                                {!props.zenMode && <View style={styles.actionButtonsLeft}>
+
+                                {/* Settings button */}
+                                {props.onPermissionModeChange && (
+                                    <Pressable
+                                        onPress={handleSettingsPress}
+                                        hitSlop={{ top: 5, bottom: 10, left: 0, right: 0 }}
+                                        style={(p) => ({
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            borderRadius: Platform.select({ default: 16, android: 20 }),
+                                            paddingHorizontal: 8,
+                                            paddingVertical: 6,
+                                            justifyContent: 'center',
+                                            height: 32,
+                                            opacity: p.pressed ? 0.7 : 1,
+                                        })}
+                                    >
+                                        <Octicons
+                                            name={'gear'}
+                                            size={16}
+                                            color={theme.colors.button.secondary.tint}
+                                        />
+                                    </Pressable>
+                                )}
+
+                                {/* Agent selector button */}
+                                {props.agentType && props.onAgentClick && (
+                                    <Pressable
+                                        onPress={() => {
+                                            hapticsLight();
+                                            props.onAgentClick?.();
+                                        }}
+                                        hitSlop={{ top: 5, bottom: 10, left: 0, right: 0 }}
+                                        style={(p) => ({
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            borderRadius: Platform.select({ default: 16, android: 20 }),
+                                            paddingHorizontal: 10,
+                                            paddingVertical: 6,
+                                            justifyContent: 'center',
+                                            height: 32,
+                                            opacity: p.pressed ? 0.7 : 1,
+                                            gap: 6,
+                                        })}
+                                    >
+                                        <Octicons
+                                            name="cpu"
+                                            size={14}
+                                            color={theme.colors.button.secondary.tint}
+                                        />
+                                        <Text style={{
+                                            fontSize: 13,
+                                            color: theme.colors.button.secondary.tint,
+                                            fontWeight: '600',
+                                            ...Typography.default('semiBold'),
+                                        }}>
+                                            {props.agentType === 'claude' ? t('agentInput.agent.claude') : props.agentType === 'codex' ? t('agentInput.agent.codex') : props.agentType === 'openclaw' ? t('agentInput.agent.openclaw') : t('agentInput.agent.gemini')}
+                                        </Text>
+                                    </Pressable>
+                                )}
+
+                                {/* Abort button */}
+                                {props.onAbort && (
+                                    <Shaker ref={shakerRef}>
+                                        <Pressable
+                                            style={(p) => ({
+                                                flexDirection: 'row',
+                                                alignItems: 'center',
+                                                borderRadius: Platform.select({ default: 16, android: 20 }),
+                                                paddingHorizontal: 8,
+                                                paddingVertical: 6,
+                                                justifyContent: 'center',
+                                                height: 32,
+                                                opacity: p.pressed ? 0.7 : 1,
+                                            })}
+                                            hitSlop={{ top: 5, bottom: 10, left: 0, right: 0 }}
+                                            onPress={handleAbortPress}
+                                            disabled={isAborting}
+                                        >
+                                            {isAborting ? (
+                                                <ActivityIndicator
+                                                    size="small"
+                                                    color={theme.colors.button.secondary.tint}
+                                                />
+                                            ) : (
+                                                <Octicons
+                                                    name={"stop"}
+                                                    size={16}
+                                                    color={theme.colors.button.secondary.tint}
+                                                />
+                                            )}
+                                        </Pressable>
+                                    </Shaker>
+                                )}
+
+                                {/* Git Status Badge */}
+                                <GitStatusButton sessionId={props.sessionId} onPress={props.onFileViewerPress} />
+
+                                {/* Image picker button (expImageUpload) */}
+                                {props.onPickImages && (
+                                    <Pressable
+                                        onPress={props.onPickImages}
+                                        hitSlop={{ top: 5, bottom: 10, left: 0, right: 0 }}
+                                        style={(p) => ({
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            borderRadius: Platform.select({ default: 16, android: 20 }),
+                                            paddingHorizontal: 8,
+                                            paddingVertical: 6,
+                                            justifyContent: 'center',
+                                            height: 32,
+                                            opacity: p.pressed ? 0.7 : 1,
+                                        })}
+                                    >
+                                        <Ionicons
+                                            name="image-outline"
+                                            size={16}
+                                            color={(props.selectedImages?.length ?? 0) > 0
+                                                ? theme.colors.radio.active
+                                                : theme.colors.button.secondary.tint}
+                                        />
+                                    </Pressable>
+                                )}
+                                </View>}
+
+                                {/* Send/Voice button - aligned with first row */}
+                                <View
+                                    style={[
+                                        styles.sendButton,
+                                        isSendBlocked ? styles.sendButtonLocked :
+                                        (hasText || props.isSending || (props.onMicPress && !props.isMicActive))
+                                            ? styles.sendButtonActive
+                                            : styles.sendButtonInactive
+                                    ]}
+                                >
+                                    <Pressable
+                                        style={(p) => ({
+                                            width: '100%',
+                                            height: '100%',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            opacity: p.pressed ? 0.7 : 1,
+                                        })}
+                                        hitSlop={{ top: 5, bottom: 10, left: 0, right: 0 }}
+                                        onPress={handleSendPress}
+                                        disabled={!canPressSendButton}
+                                    >
+                                        {props.isSending ? (
+                                            <ActivityIndicator
+                                                size="small"
+                                                color={theme.colors.button.primary.tint}
+                                            />
+                                        ) : isSendBlocked ? (
+                                            <Ionicons
+                                                name="lock-closed"
+                                                size={15}
+                                                color={theme.colors.textSecondary}
+                                            />
+                                        ) : hasText ? (
+                                            <Octicons
+                                                name="arrow-up"
+                                                size={16}
+                                                color={theme.colors.button.primary.tint}
+                                                style={[
+                                                    styles.sendButtonIcon,
+                                                    { marginTop: Platform.OS === 'web' ? 2 : 0 }
+                                                ]}
+                                            />
+                                        ) : props.onMicPress && !props.isMicActive ? (
+                                            <Image
+                                                source={require('@/assets/images/icon-voice-white.png')}
+                                                style={{
+                                                    width: 24,
+                                                    height: 24,
+                                                }}
+                                                tintColor={theme.colors.button.primary.tint}
+                                            />
+                                        ) : (
+                                            <Octicons
+                                                name="arrow-up"
+                                                size={16}
+                                                color={theme.colors.button.primary.tint}
+                                                style={[
+                                                    styles.sendButtonIcon,
+                                                    { marginTop: Platform.OS === 'web' ? 2 : 0 }
+                                                ]}
+                                            />
+                                        )}
+                                    </Pressable>
+                                </View>
+                            </View>
+                        </View>
+                    </View>
+                </View>
+                </Shaker>
+            </View>
+        </View>
+    );
+}));
+
+// Git Status Button Component
+function GitStatusButton({ sessionId, onPress }: { sessionId?: string, onPress?: () => void }) {
+    const hasMeaningfulGitStatus = useHasMeaningfulGitStatus(sessionId || '');
+    const styles = stylesheet;
+    const { theme } = useUnistyles();
+
+    if (!sessionId || !onPress) {
+        return null;
+    }
+
+    return (
+        <Pressable
+            style={(p) => ({
+                flexDirection: 'row',
+                alignItems: 'center',
+                borderRadius: Platform.select({ default: 16, android: 20 }),
+                paddingHorizontal: 8,
+                paddingVertical: 6,
+                height: 32,
+                opacity: p.pressed ? 0.7 : 1,
+                flex: 1,
+                overflow: 'hidden',
+            })}
+            hitSlop={{ top: 5, bottom: 10, left: 0, right: 0 }}
+            onPress={() => {
+                hapticsLight();
+                onPress?.();
+            }}
+        >
+            {hasMeaningfulGitStatus ? (
+                <GitStatusBadge sessionId={sessionId} />
+            ) : (
+                <Octicons
+                    name="git-branch"
+                    size={16}
+                    color={theme.colors.button.secondary.tint}
+                />
+            )}
+        </Pressable>
+    );
+}