nastech-app 1.0.0

package/sources/-session/SessionView.tsx

@@ -0,0 +1,944 @@
+import { AgentContentView } from '@/components/AgentContentView';
+import { AgentInput } from '@/components/AgentInput';
+import type { MultiTextInputHandle } from '@/components/MultiTextInput';
+import { layout } from '@/components/layout';
+import {
+    getAvailableModels,
+    getAvailablePermissionModes,
+    getEffortLevelsForModel,
+    resolveCurrentOption,
+    EffortLevel,
+} from '@/components/modelModeOptions';
+import { getSuggestions } from '@/components/autocomplete/suggestions';
+import { ChatHeaderView } from '@/components/ChatHeaderView';
+import { ChatList } from '@/components/ChatList';
+import { Deferred } from '@/components/Deferred';
+import { EmptyMessages } from '@/components/EmptyMessages';
+import { VoiceAssistantStatusBar } from '@/components/VoiceAssistantStatusBar';
+import { useDraft } from '@/hooks/useDraft';
+import { useImagePicker } from '@/hooks/useImagePicker';
+import { Modal } from '@/modal';
+import { voiceHooks } from '@/realtime/hooks/voiceHooks';
+import { getCurrentVoiceConversationId, getCurrentVoiceSessionDurationSeconds, startRealtimeSession, stopRealtimeSession } from '@/realtime/RealtimeSession';
+import { gitStatusSync } from '@/sync/gitStatusSync';
+import { sessionAbort } from '@/sync/ops';
+import { storage, useIsDataReady, useLocalSetting, useRealtimeStatus, useSessionMessages, useSessionUsage, useSetting } from '@/sync/storage';
+import { useSession } from '@/sync/storage';
+import { Session } from '@/sync/storageTypes';
+import { sync } from '@/sync/sync';
+import { t } from '@/text';
+import { tracking } from '@/track';
+import { getVoiceMessageCount, getVoiceOnboardingPromptLoadCount } from '@/sync/persistence';
+import { isRunningOnMac } from '@/utils/platform';
+import { useDeviceType, useHeaderHeight, useIsLandscape, useIsTablet } from '@/utils/responsive';
+import { FilesSidebar, SidebarMode } from '@/components/FilesSidebar';
+import { AllFilesDiffView } from '@/components/AllFilesDiffView';
+import { FileViewPanel } from '@/components/FileViewPanel';
+import { prefetchPierreDiff } from '@/components/diff/PierreDiffView';
+import { GitFileStatus } from '@/sync/gitStatusFiles';
+import { useOverlayNav } from '@/-session/sessionOverlayNav';
+import { formatPathRelativeToHome, getResumeCommandBlock, getSessionName, useSessionStatus } from '@/utils/sessionUtils';
+import { useSessionQuickActions } from '@/hooks/useSessionQuickActions';
+import { isVersionSupported, MINIMUM_CLI_VERSION } from '@/utils/versionUtils';
+import * as Clipboard from 'expo-clipboard';
+import { Ionicons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import * as React from 'react';
+import { useMemo } from 'react';
+import { ActivityIndicator, Platform, Pressable, Text, View, useWindowDimensions } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useUnistyles } from 'react-native-unistyles';
+import type { ModelMode, PermissionMode } from '@/components/PermissionModeSelector';
+import { resolveAgentDefaultConfig } from '@/sync/agentDefaults';
+
+export const SessionView = React.memo((props: { id: string }) => {
+    const sessionId = props.id;
+    const router = useRouter();
+    const session = useSession(sessionId);
+    const isDataReady = useIsDataReady();
+    const { theme } = useUnistyles();
+    const safeArea = useSafeAreaInsets();
+    const isLandscape = useIsLandscape();
+    const deviceType = useDeviceType();
+    const headerHeight = useHeaderHeight();
+    const realtimeStatus = useRealtimeStatus();
+    const isTablet = useIsTablet();
+    const { width: windowWidth } = useWindowDimensions();
+    const fileDiffsSidebarEnabled = useSetting('fileDiffsSidebar');
+    const zenMode = useLocalSetting('zenMode');
+
+    // Escape key exits zen mode (web only)
+    React.useEffect(() => {
+        if (Platform.OS !== 'web' || !zenMode) return;
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                storage.getState().applyLocalSettings({ zenMode: false });
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [zenMode]);
+
+    // Base condition: can we show the diff sidebar at all?
+    const canShowSidebar = fileDiffsSidebarEnabled
+        && (isRunningOnMac() || Platform.OS === 'web')
+        && windowWidth >= SIDEBAR_MIN_WINDOW_WIDTH
+        && isDataReady && !!session;
+
+    const showSidebar = canShowSidebar && !zenMode;
+
+    // Match left sidebar width: 30% of window, clamped to 250–360px
+    const sidebarWidth = Math.min(Math.max(Math.floor(windowWidth * 0.3), 250), 360);
+
+    // Animate diff sidebar width.
+    //
+    // On web we snap the value (duration: 0). The animated `width` change
+    // triggers a flex-row reflow on every frame, which in turn re-measures
+    // the entire chat tree (FlatList rows, message blocks). At ~60fps that
+    // grinds to ~15fps on dev builds. Snapping skips the layout thrash —
+    // the chat reflows once instead of 60 times. Native keeps the smooth
+    // animation because it runs on Reanimated's UI thread.
+    const sidebarAnim = useSharedValue(showSidebar ? 1 : 0);
+    React.useEffect(() => {
+        sidebarAnim.value = withTiming(showSidebar ? 1 : 0, {
+            duration: Platform.OS === 'web' ? 0 : 250,
+            easing: Easing.out(Easing.cubic),
+        });
+    }, [showSidebar]);
+    const animatedSidebarStyle = useAnimatedStyle(() => ({
+        width: sidebarAnim.value * sidebarWidth,
+        opacity: sidebarAnim.value,
+        overflow: 'hidden' as const,
+    }));
+
+    const [sidebarMode, setSidebarMode] = React.useState<SidebarMode>('changes');
+
+    // Overlay state is managed as a browser-style history stack so the
+    // sidebar's back / forward arrows can navigate between chat ↔ diff ↔ file
+    // without a per-overlay close button. Stack + cursor live in one piece
+    // of state so functional updates stay coordinated.
+    type OverlayEntry =
+        | { kind: 'none' }
+        | { kind: 'diff'; file: string }
+        | { kind: 'file'; path: string };
+    const [overlayHistory, setOverlayHistory] = React.useState<{ stack: OverlayEntry[]; cursor: number }>(
+        { stack: [{ kind: 'none' }], cursor: 0 }
+    );
+    const overlayCurrent = overlayHistory.stack[overlayHistory.cursor] ?? { kind: 'none' };
+    const diffViewOpen = overlayCurrent.kind === 'diff';
+    const fileViewPath = overlayCurrent.kind === 'file' ? overlayCurrent.path : null;
+    const scrollToFile = overlayCurrent.kind === 'diff' ? overlayCurrent.file : null;
+
+    const pushOverlay = React.useCallback((entry: OverlayEntry) => {
+        setOverlayHistory((prev) => {
+            const truncated = prev.stack.slice(0, prev.cursor + 1);
+            truncated.push(entry);
+            return { stack: truncated, cursor: truncated.length - 1 };
+        });
+    }, []);
+
+    const handleSidebarFilePress = React.useCallback((file: GitFileStatus) => {
+        if (file.status === 'deleted') return;
+        pushOverlay({ kind: 'diff', file: file.fullPath });
+    }, [pushOverlay]);
+    const handleAllFilesFilePress = React.useCallback((filePath: string) => {
+        pushOverlay({ kind: 'file', path: filePath });
+    }, [pushOverlay]);
+
+    // When sidebar capability is lost (screen too narrow, disabled), close views.
+    // Don't close on zen mode toggle — keep the view visible.
+    React.useEffect(() => {
+        if (!canShowSidebar) {
+            setOverlayHistory({ stack: [{ kind: 'none' }], cursor: 0 });
+        }
+    }, [canShowSidebar]);
+
+    // Right-side header content published by the active overlay (diff toggle / save button).
+    const [headerRightSlot, setHeaderRightSlot] = React.useState<React.ReactNode>(null);
+
+    // Wire intra-session back / forward into the global SidebarNavigator arrows.
+    const canOverlayBack = overlayHistory.cursor > 0;
+    const canOverlayForward = overlayHistory.cursor < overlayHistory.stack.length - 1;
+    React.useEffect(() => {
+        useOverlayNav.getState().publish({
+            canBack: canOverlayBack,
+            canForward: canOverlayForward,
+            back: () => {
+                if (!canOverlayBack) return false;
+                setOverlayHistory((prev) => (
+                    prev.cursor <= 0 ? prev : { ...prev, cursor: prev.cursor - 1 }
+                ));
+                return true;
+            },
+            forward: () => {
+                if (!canOverlayForward) return false;
+                setOverlayHistory((prev) => (
+                    prev.cursor >= prev.stack.length - 1 ? prev : { ...prev, cursor: prev.cursor + 1 }
+                ));
+                return true;
+            },
+        });
+        return () => useOverlayNav.getState().reset();
+    }, [canOverlayBack, canOverlayForward]);
+
+    // Warm Pierre's lazy web chunks while the user is still reading chat.
+    React.useEffect(() => {
+        prefetchPierreDiff();
+    }, []);
+
+    // Compute header props based on session state
+    const headerProps = useMemo(() => {
+        if (!isDataReady) {
+            return { title: '', folderName: undefined, isConnected: false };
+        }
+        if (!session) {
+            return { title: t('errors.sessionDeleted'), folderName: undefined, isConnected: false };
+        }
+        const isConnected = session.presence === 'online';
+        const pathSegments = session.metadata?.path?.split(/[/\\]/).filter(Boolean);
+        const folderName = pathSegments?.[pathSegments.length - 1];
+        const sessionName = getSessionName(session);
+        return {
+            title: sessionName,
+            folderName,
+            isConnected,
+        };
+    }, [session, isDataReady]);
+
+    const mainContent = (
+        <>
+            {/* Status bar shadow for landscape mode */}
+            {isLandscape && deviceType === 'phone' && (
+                <View style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    height: safeArea.top,
+                    backgroundColor: theme.colors.surface,
+                    zIndex: 1000,
+                    shadowColor: theme.colors.shadow.color,
+                    shadowOffset: {
+                        width: 0,
+                        height: 2,
+                    },
+                    shadowOpacity: theme.colors.shadow.opacity,
+                    shadowRadius: 3,
+                    elevation: 5,
+                }} />
+            )}
+
+            {/* Header - always shown on desktop/Mac, hidden in landscape mode only on actual phones */}
+            {!(isLandscape && deviceType === 'phone' && Platform.OS !== 'web') && (
+                <View style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    zIndex: 1000
+                }}>
+                    <ChatHeaderView
+                        title={headerProps.title}
+                        folderName={headerProps.folderName}
+                        isConnected={headerProps.isConnected}
+                        extraPathSegment={fileViewPath ?? undefined}
+                        rightSlot={(diffViewOpen || !!fileViewPath) ? headerRightSlot : null}
+                        onTitlePress={session ? () => router.push(`/session/${sessionId}/info`) : undefined}
+                        onBackPress={() => router.back()}
+                    />
+                    {/* Voice status bar below header - not on tablet (shown in sidebar) */}
+                    {!isTablet && realtimeStatus !== 'disconnected' && (
+                        <VoiceAssistantStatusBar variant="full" />
+                    )}
+                </View>
+            )}
+
+            {/* Content based on state */}
+            <View style={{ flex: 1, paddingTop: !(isLandscape && deviceType === 'phone' && Platform.OS !== 'web') ? safeArea.top + headerHeight + (!isTablet && realtimeStatus !== 'disconnected' ? 32 : 0) : 0 }}>
+                {!isDataReady ? (
+                    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                        <ActivityIndicator size="small" color={theme.colors.textSecondary} />
+                    </View>
+                ) : !session ? (
+                    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                        <Ionicons name="trash-outline" size={48} color={theme.colors.textSecondary} />
+                        <Text style={{ color: theme.colors.text, fontSize: 20, marginTop: 16, fontWeight: '600' }}>{t('errors.sessionDeleted')}</Text>
+                        <Text style={{ color: theme.colors.textSecondary, fontSize: 15, marginTop: 8, textAlign: 'center', paddingHorizontal: 32 }}>{t('errors.sessionDeletedDescription')}</Text>
+                    </View>
+                ) : (
+                    <SessionViewLoaded key={sessionId} sessionId={sessionId} session={session} />
+                )}
+            </View>
+        </>
+    );
+
+    if (!canShowSidebar) {
+        return mainContent;
+    }
+
+    // Desktop layout: chat + animated sidebar at the same level (full height).
+    // When a sidebar file is selected, InlineFileDiff overlays the main content
+    // (chat stays mounted underneath so state is preserved).
+    return (
+        <View style={{ flex: 1, flexDirection: 'row' }}>
+            <View
+                style={{
+                    flex: 1,
+                    // Web-only: isolate the chat subtree's layout from the
+                    // parent flex-row. If we ever bring back a width
+                    // animation on the right sidebar, `contain` prevents
+                    // layout work from leaking up to the chat tree on
+                    // every frame.
+                    ...(Platform.OS === 'web' ? { contain: 'layout style paint' as any } : {}),
+                }}
+            >
+                {mainContent}
+                {diffViewOpen && canShowSidebar && (
+                    <View
+                        pointerEvents="box-none"
+                        style={{
+                            position: 'absolute',
+                            top: safeArea.top + headerHeight,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            backgroundColor: theme.colors.surface,
+                        }}
+                    >
+                        <AllFilesDiffView
+                            sessionId={sessionId}
+                            scrollToFile={scrollToFile}
+                            onHeaderRightSlotChange={setHeaderRightSlot}
+                        />
+                    </View>
+                )}
+                {fileViewPath && canShowSidebar && (
+                    <View
+                        pointerEvents="box-none"
+                        style={{
+                            position: 'absolute',
+                            top: safeArea.top + headerHeight,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            backgroundColor: theme.colors.surface,
+                        }}
+                    >
+                        <FileViewPanel
+                            sessionId={sessionId}
+                            filePath={fileViewPath}
+                            onHeaderRightSlotChange={setHeaderRightSlot}
+                        />
+                    </View>
+                )}
+            </View>
+            <Animated.View style={[{ minWidth: 0, alignSelf: 'stretch' }, animatedSidebarStyle]}>
+                <View style={{ width: sidebarWidth, flex: 1 }}>
+                    <FilesSidebar
+                        sessionId={sessionId}
+                        selectedPath={sidebarMode === 'changes' ? scrollToFile : fileViewPath}
+                        onFilePress={handleSidebarFilePress}
+                        mode={sidebarMode}
+                        onModeChange={setSidebarMode}
+                        onAllFilesFilePress={handleAllFilesFilePress}
+                    />
+                </View>
+            </Animated.View>
+        </View>
+    );
+});
+
+const SIDEBAR_MIN_WINDOW_WIDTH = 1100;
+
+// Hoisted so AgentInput's React.memo doesn't see a new array ref on every keystroke
+const AGENT_INPUT_AUTOCOMPLETE_PREFIXES = ['@', '/'];
+
+// Imperative handle exposed by ChatComposer so SessionViewLoaded can read /
+// clear the message text without subscribing to it (which would re-render
+// the whole loaded screen on every keystroke).
+type ChatComposerHandle = {
+    getMessage: () => string;
+    clearMessage: () => void;
+};
+
+type ChatComposerProps = Omit<
+    React.ComponentProps<typeof AgentInput>,
+    'initialValue' | 'onChangeText'
+> & {
+    sessionId: string;
+    composerHandleRef: React.RefObject<ChatComposerHandle | null>;
+};
+
+// Owns the chat-message draft autosave. The textarea itself is uncontrolled:
+// keystrokes never round-trip through React state, so the parent can stay
+// stable on every keystroke and deletion doesn't batch on a busy main thread.
+// `message` here is a low-priority mirror updated via startTransition; it's
+// only used to feed useDraft's debounced autosave. Reads/clears on send go
+// through the MultiTextInput handle imperatively.
+const ChatComposer = React.memo(function ChatComposer(props: ChatComposerProps) {
+    const { sessionId, composerHandleRef, ...rest } = props;
+    // Synchronously hydrate the textarea with any saved draft so the user sees
+    // their work-in-progress on session open without an extra round-trip.
+    const initialDraft = React.useMemo(() => {
+        return storage.getState().sessions[sessionId]?.draft ?? '';
+    }, [sessionId]);
+    const inputHandleRef = React.useRef<MultiTextInputHandle>(null);
+    const [message, setMessage] = React.useState(initialDraft);
+
+    const applyDraft = React.useCallback((text: string) => {
+        inputHandleRef.current?.setTextAndSelection(text, { start: text.length, end: text.length });
+        setMessage(text);
+    }, []);
+
+    const { clearDraft } = useDraft(sessionId, message, applyDraft);
+
+    const handleChangeText = React.useCallback((text: string) => {
+        // Transition keeps the textarea responsive even when the draft
+        // autosave / re-render takes longer than a frame.
+        React.startTransition(() => setMessage(text));
+    }, []);
+
+    React.useImperativeHandle(composerHandleRef, () => ({
+        getMessage: () => inputHandleRef.current?.getText() ?? '',
+        clearMessage: () => {
+            inputHandleRef.current?.setTextAndSelection('', { start: 0, end: 0 });
+            setMessage('');
+            clearDraft();
+        },
+    }), [clearDraft]);
+
+    return (
+        <AgentInput
+            {...rest}
+            ref={inputHandleRef}
+            sessionId={sessionId}
+            initialValue={initialDraft}
+            onChangeText={handleChangeText}
+        />
+    );
+});
+
+function SessionViewLoaded({ sessionId, session }: { sessionId: string, session: Session }) {
+    const { theme } = useUnistyles();
+    const router = useRouter();
+    const safeArea = useSafeAreaInsets();
+    const isLandscape = useIsLandscape();
+    const deviceType = useDeviceType();
+    const isTablet = useIsTablet();
+    const realtimeStatus = useRealtimeStatus();
+    const { messages, isLoaded } = useSessionMessages(sessionId);
+    const acknowledgedCliVersions = useLocalSetting('acknowledgedCliVersions');
+    const zenMode = useLocalSetting('zenMode');
+    const sessionInputHorizontalPadding = Platform.OS === 'web' || isRunningOnMac() || isTablet ? 12 : 8;
+
+    // Check if CLI version is outdated and not already acknowledged
+    const cliVersion = session.metadata?.version;
+    const machineId = session.metadata?.machineId;
+    const isCliOutdated = cliVersion && !isVersionSupported(cliVersion, MINIMUM_CLI_VERSION);
+    const isAcknowledged = machineId && acknowledgedCliVersions[machineId] === cliVersion;
+    const shouldShowCliWarning = isCliOutdated && !isAcknowledged;
+    const flavor = session.metadata?.flavor;
+    const availableModels = React.useMemo(() => (
+        getAvailableModels(flavor, session.metadata, t)
+    ), [flavor, session.metadata]);
+    const availableModes = React.useMemo(() => (
+        getAvailablePermissionModes(flavor, session.metadata, t)
+    ), [flavor, session.metadata]);
+    const agentDefaultOverrides = useSetting('agentDefaultOverrides');
+    const effectiveAgentDefaults = React.useMemo(() => (
+        resolveAgentDefaultConfig(agentDefaultOverrides, flavor)
+    ), [agentDefaultOverrides, flavor]);
+
+    const permissionMode = React.useMemo<PermissionMode | null>(() => (
+        resolveCurrentOption(availableModes, [
+            session.permissionMode,
+            effectiveAgentDefaults.permissionMode,
+            session.metadata?.currentOperatingModeCode,
+        ])
+    ), [availableModes, session.permissionMode, effectiveAgentDefaults.permissionMode, session.metadata?.currentOperatingModeCode]);
+
+    const modelMode = React.useMemo<ModelMode | null>(() => (
+        resolveCurrentOption(availableModels, [
+            session.modelMode,
+            effectiveAgentDefaults.modelMode,
+            session.metadata?.currentModelCode,
+        ])
+    ), [availableModels, session.modelMode, effectiveAgentDefaults.modelMode, session.metadata?.currentModelCode]);
+
+    // Effort level state
+    const modelKey = modelMode?.key ?? 'default';
+    const availableEffortLevels = React.useMemo<EffortLevel[]>(() => (
+        getEffortLevelsForModel(flavor, modelKey)
+    ), [flavor, modelKey]);
+    const effortLevel = React.useMemo<EffortLevel | null>(() => (
+        resolveCurrentOption(availableEffortLevels, [
+            session.effortLevel,
+            effectiveAgentDefaults.effortLevel,
+        ])
+    ), [availableEffortLevels, session.effortLevel, effectiveAgentDefaults.effortLevel]);
+
+    const sessionStatus = useSessionStatus(session);
+    const sessionUsage = useSessionUsage(sessionId);
+    const alwaysShowContextSize = useSetting('alwaysShowContextSize');
+    const experiments = useSetting('experiments');
+    const expResumeSession = useSetting('expResumeSession');
+    const { canResume, resumeSession, resumingSession } = useSessionQuickActions(session);
+    const isDisconnected = !sessionStatus.isConnected;
+    const resumeCommandBlock = getResumeCommandBlock(session);
+
+    // Image attachment state (expImageUpload feature flag)
+    const expImageUpload = useSetting('expImageUpload');
+    const { selectedImages, pickImages, removeImage, clearImages, addImages } = useImagePicker();
+
+    // ChatComposer owns the message state + useDraft subscription. We only
+    // hold an imperative handle so handleSend can read the live text and
+    // clear it without subscribing to it (which would re-render the whole
+    // SessionViewLoaded tree on every keystroke).
+    const composerHandleRef = React.useRef<ChatComposerHandle | null>(null);
+
+    // Handle dismissing CLI version warning
+    const handleDismissCliWarning = React.useCallback(() => {
+        if (machineId && cliVersion) {
+            storage.getState().applyLocalSettings({
+                acknowledgedCliVersions: {
+                    ...acknowledgedCliVersions,
+                    [machineId]: cliVersion
+                }
+            });
+        }
+    }, [machineId, cliVersion, acknowledgedCliVersions]);
+
+    // Function to update permission mode
+    const updatePermissionMode = React.useCallback((mode: PermissionMode) => {
+        storage.getState().updateSessionPermissionMode(sessionId, mode.key);
+    }, [sessionId]);
+
+    const updateModelMode = React.useCallback((mode: ModelMode) => {
+        storage.getState().updateSessionModelMode(sessionId, mode.key);
+    }, [sessionId]);
+
+    const updateEffortLevel = React.useCallback((level: EffortLevel) => {
+        storage.getState().updateSessionEffortLevel(sessionId, level.key);
+    }, [sessionId]);
+
+    // Memoize header-dependent styles to prevent re-renders
+    const headerDependentStyles = React.useMemo(() => ({
+        contentContainer: {
+            flex: 1
+        },
+        flatListStyle: {
+            marginTop: 0 // No marginTop needed since header is handled by parent
+        },
+    }), []);
+
+    // handleSend reads the live message via the composer ref, so it doesn't
+    // need to re-create on every keystroke.
+    const handleSend = React.useCallback(() => {
+        const liveMessage = composerHandleRef.current?.getMessage() ?? '';
+        if (liveMessage.trim() || (expImageUpload && selectedImages.length > 0)) {
+            const attachments = expImageUpload ? selectedImages : undefined;
+            composerHandleRef.current?.clearMessage();
+            if (expImageUpload) clearImages();
+            sync.sendMessage(sessionId, liveMessage, { source: 'chat', attachments });
+        }
+    }, [sessionId, expImageUpload, selectedImages, clearImages]);
+
+    const handleAbort = React.useCallback(() => {
+        storage.getState().resetSessionAgentOverrides(sessionId);
+        sessionAbort(sessionId);
+    }, [sessionId]);
+
+    const handleFileViewerPress = React.useCallback(() => {
+        router.push(`/session/${sessionId}/files`);
+    }, [router, sessionId]);
+
+    const handleAutocompleteSuggestions = React.useCallback((query: string) => (
+        getSuggestions(sessionId, query)
+    ), [sessionId]);
+
+    const connectionStatus = React.useMemo(() => ({
+        text: sessionStatus.statusText,
+        color: sessionStatus.statusColor,
+        dotColor: sessionStatus.statusDotColor,
+        isPulsing: sessionStatus.isPulsing,
+    }), [sessionStatus.statusText, sessionStatus.statusColor, sessionStatus.statusDotColor, sessionStatus.isPulsing]);
+
+    const usageData = React.useMemo(() => {
+        const source = sessionUsage ?? session.latestUsage;
+        if (!source) return undefined;
+        return {
+            inputTokens: source.inputTokens,
+            outputTokens: source.outputTokens,
+            cacheCreation: source.cacheCreation,
+            cacheRead: source.cacheRead,
+            contextSize: source.contextSize,
+        };
+    }, [sessionUsage, session.latestUsage]);
+
+
+    // Handle microphone button press - memoized to prevent button flashing
+    const handleMicrophonePress = React.useCallback(async () => {
+        if (realtimeStatus === 'connecting') {
+            return; // Prevent actions during transitions
+        }
+        if (realtimeStatus === 'disconnected' || realtimeStatus === 'error') {
+            try {
+                const initialPrompt = voiceHooks.onVoiceStarted(sessionId);
+                const conversationId = await startRealtimeSession(sessionId, initialPrompt);
+                if (conversationId) {
+                    const hasPro = storage.getState().purchases.entitlements['pro'] ?? false;
+                    tracking?.capture('voice_session_started', {
+                        session_id: sessionId,
+                        elevenlabs_conversation_id: conversationId,
+                        has_pro: hasPro,
+                        onboarding_prompt_load_count: getVoiceOnboardingPromptLoadCount(),
+                        voice_message_count: getVoiceMessageCount(),
+                    });
+                }
+            } catch (error) {
+                console.error('Failed to start realtime session:', error);
+                Modal.alert(t('common.error'), t('errors.voiceSessionFailed'));
+                tracking?.capture('voice_session_error', {
+                    session_id: sessionId,
+                    elevenlabs_conversation_id: getCurrentVoiceConversationId(),
+                    error: error instanceof Error ? error.message : 'Unknown error',
+                });
+            }
+        } else if (realtimeStatus === 'connected') {
+            const conversationId = getCurrentVoiceConversationId();
+            const durationSeconds = getCurrentVoiceSessionDurationSeconds();
+            await stopRealtimeSession();
+            tracking?.capture('voice_session_stopped', {
+                session_id: sessionId,
+                elevenlabs_conversation_id: conversationId,
+                ...(durationSeconds !== undefined ? { duration_seconds: durationSeconds } : {}),
+            });
+
+            // Notify voice assistant about voice session stop
+            voiceHooks.onVoiceStopped();
+        }
+    }, [realtimeStatus, sessionId]);
+
+    // Memoize mic button state to prevent flashing during chat transitions
+    const micButtonState = useMemo(() => ({
+        onMicPress: handleMicrophonePress,
+        isMicActive: realtimeStatus === 'connected' || realtimeStatus === 'connecting'
+    }), [handleMicrophonePress, realtimeStatus]);
+
+    // Trigger session visibility and initialize git status sync
+    React.useLayoutEffect(() => {
+
+        // Trigger session sync
+        sync.onSessionVisible(sessionId);
+
+        // Mark session as currently being viewed (clears unread)
+        storage.getState().setCurrentViewingSession(sessionId);
+
+        // Initialize git status sync for this session
+        gitStatusSync.getSync(sessionId);
+
+        return () => {
+            // Clear viewing session on unmount
+            const current = storage.getState().currentViewingSessionId;
+            if (current === sessionId) {
+                storage.getState().setCurrentViewingSession(null);
+            }
+        };
+    }, [sessionId, realtimeStatus]);
+
+    let content = (
+        <>
+            <Deferred>
+                {messages.length > 0 && (
+                    <ChatList session={session} />
+                )}
+            </Deferred>
+        </>
+    );
+    const placeholder = messages.length === 0 ? (
+        <>
+            {isLoaded ? (
+                <EmptyMessages session={session} />
+            ) : (
+                <ActivityIndicator size="small" color={theme.colors.textSecondary} />
+            )}
+        </>
+    ) : null;
+
+    const composer = (
+        <ChatComposer
+            composerHandleRef={composerHandleRef}
+            placeholder={t('session.inputPlaceholder')}
+            sessionId={sessionId}
+            permissionMode={permissionMode}
+            onPermissionModeChange={updatePermissionMode}
+            availableModes={availableModes}
+            modelMode={modelMode}
+            availableModels={availableModels}
+            onModelModeChange={updateModelMode}
+            effortLevel={effortLevel}
+            availableEffortLevels={availableEffortLevels}
+            onEffortLevelChange={updateEffortLevel}
+            metadata={session.metadata}
+            connectionStatus={connectionStatus}
+            blockSend={false}
+            onSend={handleSend}
+            onMicPress={isDisconnected ? undefined : micButtonState.onMicPress}
+            isMicActive={isDisconnected ? false : micButtonState.isMicActive}
+            onAbort={isDisconnected ? undefined : handleAbort}
+            showAbortButton={sessionStatus.state === 'thinking' || sessionStatus.state === 'waiting'}
+            onFileViewerPress={experiments && !isTablet ? handleFileViewerPress : undefined}
+            selectedImages={expImageUpload ? selectedImages : undefined}
+            onPickImages={expImageUpload ? pickImages : undefined}
+            onRemoveImage={expImageUpload ? removeImage : undefined}
+            onAddImages={expImageUpload ? addImages : undefined}
+            autocompletePrefixes={AGENT_INPUT_AUTOCOMPLETE_PREFIXES}
+            autocompleteSuggestions={handleAutocompleteSuggestions}
+            usageData={usageData}
+            alwaysShowContextSize={alwaysShowContextSize}
+            zenMode={zenMode}
+        />
+    );
+
+    // Disconnected sessions get the full Resume affordance regardless of
+    // whether they were explicitly archived or just lost their CLI (e.g.
+    // Ctrl-C in terminal — lifecycleState stays 'running', server flips
+    // active=false). InactiveArchivedHint handles both cases: shows the
+    // Resume button when canResume is true, falls back to the
+    // copy-this-command hint when the experiments toggle is off or the
+    // machine isn't reachable.
+    const inactiveHint = isDisconnected ? (
+        <CenteredInputWidth horizontalPadding={sessionInputHorizontalPadding}>
+            <InactiveArchivedHint
+                resumeCommandBlock={expResumeSession ? resumeCommandBlock : null}
+                canResume={canResume}
+                resuming={resumingSession}
+                onResume={resumeSession}
+            />
+        </CenteredInputWidth>
+    ) : null;
+
+    const input = (
+        <>
+            {inactiveHint}
+            {composer}
+        </>
+    );
+
+
+    return (
+        <>
+            {/* CLI Version Warning Overlay - Subtle centered pill */}
+            {shouldShowCliWarning && !(isLandscape && deviceType === 'phone') && (
+                <Pressable
+                    onPress={handleDismissCliWarning}
+                    style={{
+                        position: 'absolute',
+                        top: 8, // Position at top of content area (padding handled by parent)
+                        alignSelf: 'center',
+                        backgroundColor: '#FFF3CD',
+                        borderRadius: 100, // Fully rounded pill
+                        paddingHorizontal: 14,
+                        paddingVertical: 7,
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        zIndex: 998, // Below voice bar but above content
+                        shadowColor: '#000',
+                        shadowOffset: { width: 0, height: 2 },
+                        shadowOpacity: 0.15,
+                        shadowRadius: 4,
+                        elevation: 4,
+                    }}
+                >
+                    <Ionicons name="warning-outline" size={14} color="#FF9500" style={{ marginRight: 6 }} />
+                    <Text style={{
+                        fontSize: 12,
+                        color: '#856404',
+                        fontWeight: '600'
+                    }}>
+                        {t('sessionInfo.cliVersionOutdated')}
+                    </Text>
+                    <Ionicons name="close" size={14} color="#856404" style={{ marginLeft: 8 }} />
+                </Pressable>
+            )}
+
+            {/* Main content area - no padding since header is overlay */}
+            <View style={{ flexBasis: 0, flexGrow: 1, paddingBottom: safeArea.bottom + ((isRunningOnMac() || Platform.OS === 'web') ? 8 : 0) }}>
+                <AgentContentView
+                    content={content}
+                    input={input}
+                    placeholder={placeholder}
+                />
+            </View >
+
+            {/* Back button for landscape phone mode when header is hidden */}
+            {
+                isLandscape && deviceType === 'phone' && (
+                    <Pressable
+                        onPress={() => router.back()}
+                        style={{
+                            position: 'absolute',
+                            top: safeArea.top + 8,
+                            left: 16,
+                            width: 44,
+                            height: 44,
+                            borderRadius: 22,
+                            backgroundColor: `rgba(${theme.dark ? '28, 23, 28' : '255, 255, 255'}, 0.9)`,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            ...Platform.select({
+                                ios: {
+                                    shadowColor: '#000',
+                                    shadowOffset: { width: 0, height: 2 },
+                                    shadowOpacity: 0.1,
+                                    shadowRadius: 4,
+                                },
+                                android: {
+                                    elevation: 2,
+                                }
+                            }),
+                        }}
+                        hitSlop={15}
+                    >
+                        <Ionicons
+                            name={Platform.OS === 'ios' ? 'chevron-back' : 'arrow-back'}
+                            size={Platform.select({ ios: 28, default: 24 })}
+                            color="#000"
+                        />
+                    </Pressable>
+                )
+            }
+        </>
+    )
+}
+
+function InactiveArchivedHint(props: {
+    resumeCommandBlock: NonNullable<ReturnType<typeof getResumeCommandBlock>> | null;
+    canResume: boolean;
+    resuming: boolean;
+    onResume: () => void;
+}) {
+    const { theme } = useUnistyles();
+    const hintTextStyle = {
+        color: theme.colors.agentEventText,
+        fontSize: 13,
+        lineHeight: 18,
+        textAlign: 'left' as const,
+    };
+
+    return (
+        <View style={{
+            paddingTop: 12,
+            paddingBottom: 10,
+            gap: 10,
+            alignItems: 'stretch',
+        }}>
+            <View style={{ paddingHorizontal: 8, gap: 4 }}>
+                <Text style={hintTextStyle}>
+                    {t('session.inactiveArchived')}
+                </Text>
+                {props.canResume ? null : props.resumeCommandBlock && (
+                    <Text style={hintTextStyle}>
+                        {t('session.resumeFromTerminal')}
+                    </Text>
+                )}
+            </View>
+            {props.canResume ? (
+                <Pressable
+                    onPress={props.onResume}
+                    disabled={props.resuming}
+                    style={({ pressed }) => ({
+                        height: 40,
+                        borderRadius: 10,
+                        backgroundColor: theme.colors.button.primary.background,
+                        opacity: props.resuming ? 0.6 : pressed ? 0.8 : 1,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        marginHorizontal: 8,
+                    })}
+                >
+                    {props.resuming ? (
+                        <ActivityIndicator size="small" color={theme.colors.button.primary.tint} />
+                    ) : (
+                        <Text style={{ color: theme.colors.button.primary.tint, fontSize: 15, fontWeight: '600' }}>
+                            {t('sessionInfo.resumeSession')}
+                        </Text>
+                    )}
+                </Pressable>
+            ) : props.resumeCommandBlock && (
+                <ResumeCommandCopyBlock resumeCommandBlock={props.resumeCommandBlock} />
+            )}
+        </View>
+    );
+}
+
+function ResumeCommandCopyBlock({ resumeCommandBlock }: {
+    resumeCommandBlock: NonNullable<ReturnType<typeof getResumeCommandBlock>>;
+}) {
+    const { theme } = useUnistyles();
+    const [copied, setCopied] = React.useState(false);
+
+    return (
+        <Pressable
+            onPress={async () => {
+                await Clipboard.setStringAsync(resumeCommandBlock.copyText);
+                setCopied(true);
+                setTimeout(() => setCopied(false), 2000);
+            }}
+            style={{
+                minHeight: 48,
+                borderRadius: 14,
+                backgroundColor: theme.colors.surfaceHigh,
+                flexDirection: 'row',
+                gap: 8,
+                paddingHorizontal: 16,
+                paddingVertical: 12,
+                alignItems: 'flex-start',
+            }}
+        >
+            <View style={{ flex: 1 }}>
+                {resumeCommandBlock.lines.map((line, index) => (
+                    <Text
+                        key={`${line}-${index}`}
+                        style={{
+                            color: theme.colors.text,
+                            fontSize: 13,
+                            lineHeight: 18,
+                            fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+                        }}
+                    >
+                        {line}
+                    </Text>
+                ))}
+            </View>
+            <Ionicons
+                name={copied ? 'checkmark' : 'copy-outline'}
+                size={16}
+                color={copied ? '#30D158' : theme.colors.textSecondary}
+                style={{ marginTop: 1 }}
+            />
+        </Pressable>
+    );
+}
+
+function CenteredInputWidth(props: {
+    children: React.ReactNode;
+    horizontalPadding: number;
+}) {
+    return (
+        <View style={{
+            width: '100%',
+            paddingHorizontal: props.horizontalPadding,
+            alignItems: 'center',
+        }}>
+            <View style={{
+                width: '100%',
+                maxWidth: layout.maxWidth,
+            }}>
+                {props.children}
+            </View>
+        </View>
+    );
+}