nastech-app 1.0.0

package/sources/hooks/useConnectTerminal.ts

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { Platform } from 'react-native';
+import { CameraView } from 'expo-camera';
+import { useAuth } from '@/auth/AuthContext';
+import { decodeBase64 } from '@/encryption/base64';
+import { encryptBox } from '@/encryption/libsodium';
+import { authApprove } from '@/auth/authApprove';
+import { useCheckScannerPermissions } from '@/hooks/useCheckCameraPermissions';
+import { Modal } from '@/modal';
+import { t } from '@/text';
+import { sync } from '@/sync/sync';
+
+interface UseConnectTerminalOptions {
+    onSuccess?: () => void;
+    onError?: (error: any) => void;
+}
+
+export function useConnectTerminal(options?: UseConnectTerminalOptions) {
+    const auth = useAuth();
+    const [isLoading, setIsLoading] = React.useState(false);
+    const checkScannerPermissions = useCheckScannerPermissions();
+
+    const processAuthUrl = React.useCallback(async (url: string) => {
+        if (!url.startsWith('nastech://terminal?')) {
+            Modal.alert(t('common.error'), t('modals.invalidAuthUrl'), [{ text: t('common.ok') }]);
+            return false;
+        }
+        
+        setIsLoading(true);
+        try {
+            const tail = url.slice('nastech://terminal?'.length);
+            const publicKey = decodeBase64(tail, 'base64url');
+            const responseV1 = encryptBox(decodeBase64(auth.credentials!.secret, 'base64url'), publicKey);
+            let responseV2Bundle = new Uint8Array(sync.encryption.contentDataKey.length + 1);
+            responseV2Bundle[0] = 0;
+            responseV2Bundle.set(sync.encryption.contentDataKey, 1);
+            const responseV2 = encryptBox(responseV2Bundle, publicKey);
+            await authApprove(auth.credentials!.token, publicKey, responseV1, responseV2);
+            
+            Modal.alert(t('common.success'), t('modals.terminalConnectedSuccessfully'), [
+                { 
+                    text: t('common.ok'), 
+                    onPress: () => options?.onSuccess?.()
+                }
+            ]);
+            return true;
+        } catch (e) {
+            console.error(e);
+            Modal.alert(t('common.error'), t('modals.failedToConnectTerminal'), [{ text: t('common.ok') }]);
+            options?.onError?.(e);
+            return false;
+        } finally {
+            setIsLoading(false);
+        }
+    }, [auth.credentials, options]);
+
+    const connectTerminal = React.useCallback(async () => {
+        if (await checkScannerPermissions()) {
+            // Use camera scanner
+            CameraView.launchScanner({
+                barcodeTypes: ['qr']
+            });
+        } else {
+            Modal.alert(t('common.error'), t('modals.cameraPermissionsRequiredToConnectTerminal'), [{ text: t('common.ok') }]);
+        }
+    }, [checkScannerPermissions]);
+
+    const connectWithUrl = React.useCallback(async (url: string) => {
+        return await processAuthUrl(url);
+    }, [processAuthUrl]);
+
+    // Set up barcode scanner listener
+    const isProcessingRef = React.useRef(false);
+    React.useEffect(() => {
+        if (CameraView.isModernBarcodeScannerAvailable) {
+            const subscription = CameraView.onModernBarcodeScanned(async (event) => {
+                if (isProcessingRef.current) return;
+                if (event.data.startsWith('nastech://terminal?')) {
+                    isProcessingRef.current = true;
+                    try {
+                        if (Platform.OS === 'ios') {
+                            try {
+                                await CameraView.dismissScanner();
+                            } catch (e) {
+                                console.warn('Failed to dismiss scanner', e);
+                            }
+                        }
+                        await processAuthUrl(event.data);
+                    } finally {
+                        isProcessingRef.current = false;
+                    }
+                }
+            });
+            return () => {
+                subscription.remove();
+                isProcessingRef.current = false;
+                if (Platform.OS === 'ios') {
+                    CameraView.dismissScanner().catch((e: unknown) => {
+                        console.warn('Failed to dismiss scanner during cleanup', e);
+                    });
+                }
+            };
+        }
+    }, [processAuthUrl]);
+
+    return {
+        connectTerminal,
+        connectWithUrl,
+        isLoading,
+        processAuthUrl
+    };
+}

package/sources/hooks/useDemoMessages.ts

@@ -0,0 +1,48 @@
+import { useEffect } from 'react';
+import { storage } from '@/sync/storage';
+import { Message } from '@/sync/typesMessage';
+import { createReducer } from '@/sync/reducer/reducer';
+
+const DEMO_SESSION_ID = 'demo-messages-session';
+
+export function useDemoMessages(messages: Message[]) {
+    useEffect(() => {
+        // Create messages map
+        const messagesMap: Record<string, Message> = {};
+        messages.forEach(msg => {
+            messagesMap[msg.id] = msg;
+        });
+
+        // Sort messages by createdAt
+        const sortedMessages = [...messages].sort((a, b) => b.createdAt - a.createdAt);
+
+        // Write the demo messages to the hardcoded session
+        storage.setState((state) => ({
+            ...state,
+            sessionMessages: {
+                ...state.sessionMessages,
+                [DEMO_SESSION_ID]: {
+                    messages: sortedMessages,
+                    messagesMap: messagesMap,
+                    reducerState: createReducer(),
+                    isLoaded: true,
+                    hasMoreOlder: false,
+                    isLoadingOlder: false
+                }
+            }
+        }));
+
+        // Cleanup function to remove the demo session
+        return () => {
+            storage.setState((state) => {
+                const { [DEMO_SESSION_ID]: _, ...restSessions } = state.sessionMessages;
+                return {
+                    ...state,
+                    sessionMessages: restSessions
+                };
+            });
+        };
+    }, [messages]);
+
+    return DEMO_SESSION_ID;
+}

package/sources/hooks/useDraft.ts

@@ -0,0 +1,120 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { AppState, AppStateStatus } from 'react-native';
+import { storage } from '@/sync/storage';
+import { useIsFocused } from '@react-navigation/native';
+
+interface UseDraftOptions {
+    autoSaveInterval?: number; // in milliseconds, default 2000
+}
+
+export function useDraft(
+    sessionId: string | null | undefined,
+    value: string,
+    onChange: (value: string) => void,
+    options: UseDraftOptions = {}
+) {
+    const { autoSaveInterval = 2000 } = options;
+    const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    // Seed with the initial value so a pre-hydrated draft (e.g. ChatComposer
+    // reads storage synchronously on mount) doesn't trip the autosave into
+    // re-writing what we just loaded.
+    const lastSavedValue = useRef<string>(value);
+    const isFocused = useIsFocused();
+
+    // Save draft to storage
+    const saveDraft = useCallback((draft: string) => {
+        if (!sessionId) return;
+        
+        storage.getState().updateSessionDraft(sessionId, draft);
+        lastSavedValue.current = draft;
+    }, [sessionId]);
+
+    // Load draft on mount and when focused
+    useEffect(() => {
+        if (!sessionId || !isFocused) return;
+
+        const session = storage.getState().sessions[sessionId];
+        if (session?.draft && !value) {
+            onChange(session.draft);
+            lastSavedValue.current = session.draft;
+        } else if (!session?.draft) {
+            // Ensure lastSavedValue is empty if there's no draft
+            lastSavedValue.current = '';
+        }
+    }, [sessionId, isFocused, onChange]);
+
+    // Auto-save with smart debouncing
+    useEffect(() => {
+        if (!sessionId) return;
+
+        // Clear any existing timeout
+        if (saveTimeoutRef.current) {
+            clearTimeout(saveTimeoutRef.current);
+        }
+
+        // Only save if value has changed
+        if (value !== lastSavedValue.current) {
+            const wasEmpty = !lastSavedValue.current.trim();
+            const isEmpty = !value.trim();
+
+            if (wasEmpty !== isEmpty) {
+                // State transition: empty <-> non-empty
+                // Save immediately for instant feedback
+                saveDraft(value);
+            } else if (!isEmpty) {
+                // Text is being modified (non-empty to non-empty)
+                // Debounce to avoid excessive saves
+                saveTimeoutRef.current = setTimeout(() => {
+                    saveDraft(value);
+                }, autoSaveInterval);
+            }
+            // If both are empty, no need to save
+        }
+
+        return () => {
+            if (saveTimeoutRef.current) {
+                clearTimeout(saveTimeoutRef.current);
+            }
+        };
+    }, [value, sessionId, autoSaveInterval, saveDraft]);
+
+    // Save on app state change (background/inactive)
+    useEffect(() => {
+        if (!sessionId) return;
+
+        const handleAppStateChange = (nextAppState: AppStateStatus) => {
+            if (nextAppState === 'background' || nextAppState === 'inactive') {
+                if (value !== lastSavedValue.current) {
+                    saveDraft(value);
+                }
+            }
+        };
+
+        const subscription = AppState.addEventListener('change', handleAppStateChange);
+
+        return () => {
+            subscription.remove();
+        };
+    }, [sessionId, value, saveDraft]);
+
+    // Save on unmount
+    useEffect(() => {
+        return () => {
+            if (sessionId && value !== lastSavedValue.current) {
+                saveDraft(value);
+            }
+        };
+    }, [sessionId, value, saveDraft]);
+
+    // Clear draft (used after message is sent)
+    const clearDraft = useCallback(() => {
+        if (!sessionId) return;
+        
+        storage.getState().updateSessionDraft(sessionId, null);
+        lastSavedValue.current = '';
+    }, [sessionId]);
+
+    return {
+        clearDraft
+    };
+}

package/sources/hooks/useElapsedTime.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+
+export function useElapsedTime(date: Date | number | null | undefined): number {
+    const [elapsedSeconds, setElapsedSeconds] = useState(0);
+
+    useEffect(() => {
+        // Handle null/undefined dates
+        if (!date) {
+            setElapsedSeconds(0);
+            return;
+        }
+
+        // Convert to timestamp if Date object
+        const timestamp = date instanceof Date ? date.getTime() : date;
+
+        // Update function to calculate elapsed seconds
+        const updateElapsed = () => {
+            const now = Date.now();
+            const elapsed = Math.max(0, Math.floor((now - timestamp) / 1000));
+            setElapsedSeconds(elapsed);
+        };
+
+        // Initial update
+        updateElapsed();
+
+        // Set up interval to update every second
+        const interval = setInterval(updateElapsed, 1000);
+
+        // Cleanup
+        return () => {
+            clearInterval(interval);
+        };
+    }, [date]);
+
+    return elapsedSeconds;
+}

package/sources/hooks/useGetPath.ts

@@ -0,0 +1,13 @@
+import { Metadata } from '@/sync/storageTypes';
+
+/**
+ * Get a relative path from an absolute path using the metadata base path
+ */
+export function getRelativePath(metadata: Metadata | null | undefined, filePath: string): string {
+    if (!metadata || !metadata.path || !filePath.startsWith(metadata.path)) {
+        return filePath;
+    }
+
+    const relativePath = filePath.slice(metadata.path.length);
+    return relativePath.startsWith('/') ? relativePath.slice(1) : relativePath;
+}

package/sources/hooks/useGitStatusFiles.ts

@@ -0,0 +1,45 @@
+/**
+ * Stale-while-revalidate hook for git status files.
+ *
+ * On first visit (no cache): shows isLoading=true while fetching.
+ * On subsequent visits (e.g. returning from file view): renders cached data
+ * instantly from the Zustand store, refreshes silently in the background.
+ * The component only re-renders if the fetched data actually differs from cache.
+ */
+
+import * as React from 'react';
+import { useFocusEffect } from 'expo-router';
+import { getGitStatusFiles, GitStatusFiles } from '@/sync/gitStatusFiles';
+import { storage, useSessionGitStatusFiles } from '@/sync/storage';
+
+export function useGitStatusFiles(sessionId: string) {
+    const cached = useSessionGitStatusFiles(sessionId);
+    const [isFetching, setIsFetching] = React.useState(false);
+
+    const refresh = React.useCallback(async () => {
+        const pathKey = storage.getState().getSessionPathKey(sessionId);
+        if (!pathKey) return;
+        setIsFetching(true);
+        try {
+            const result = await getGitStatusFiles(sessionId);
+            storage.getState().applyGitStatusFiles(pathKey, result);
+        } catch (error) {
+            console.error('Failed to load git status files:', error);
+        } finally {
+            setIsFetching(false);
+        }
+    }, [sessionId]);
+
+    // Refresh on mount and every time the screen is focused
+    useFocusEffect(
+        React.useCallback(() => {
+            refresh();
+        }, [refresh])
+    );
+
+    return {
+        data: cached,
+        // Only show loading spinner when there's no cached data yet
+        isLoading: !cached && isFetching,
+    };
+}

package/sources/hooks/useGlobalKeyboard.ts

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { Platform } from 'react-native';
+
+export function useGlobalKeyboard(onCommandPalette: () => void) {
+    useEffect(() => {
+        if (Platform.OS !== 'web') {
+            return;
+        }
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            // Check for CMD+K (Mac) or Ctrl+K (Windows/Linux)
+            const isModifierPressed = e.metaKey || e.ctrlKey;
+            
+            if (isModifierPressed && e.key === 'k') {
+                e.preventDefault();
+                e.stopPropagation();
+                onCommandPalette();
+            }
+        };
+
+        // Add event listener
+        window.addEventListener('keydown', handleKeyDown);
+
+        // Cleanup
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [onCommandPalette]);
+}

package/sources/hooks/useGroupedMessages.ts

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import { Message } from '@/sync/typesMessage';
+import { Metadata } from '@/sync/storageTypes';
+import { knownTools } from '@/components/tools/knownTools';
+import { t } from '@/text';
+
+// Display item types for the grouped message list
+export type TextItem = {
+    type: 'message';
+    id: string;
+    message: Message;
+};
+
+export type ToolGroupItem = {
+    type: 'tool-group';
+    id: string;
+    messages: Message[];
+    hasRunning: boolean;
+};
+
+export type DisplayItem = TextItem | ToolGroupItem;
+
+/**
+ * Groups consecutive non-text messages (tool calls, thinking, events) into
+ * collapsible ToolGroupItems. Text messages pass through as TextItems.
+ *
+ * The messages array is newest-first (inverted FlatList). Group IDs are
+ * derived from the last message in each group (oldest chronologically)
+ * for stability as new messages prepend.
+ *
+ * When `enabled` is false (user disabled grouping in settings), every
+ * message passes through as a standalone TextItem — restoring the
+ * pre-grouping behavior where MessageView renders each message (and
+ * returns null for hidden tools/thinking) on its own.
+ */
+export function useGroupedMessages(messages: Message[], enabled: boolean = true): DisplayItem[] {
+    return React.useMemo(() => {
+        if (!enabled) {
+            return messages.map((msg) => ({ type: 'message', id: msg.id, message: msg } as TextItem));
+        }
+
+        const result: DisplayItem[] = [];
+        let buffer: Message[] = [];
+
+        const flushBuffer = () => {
+            if (buffer.length === 0) return;
+
+            let hasRunning = false;
+            for (const msg of buffer) {
+                if (msg.kind === 'tool-call' && msg.tool.state === 'running') {
+                    hasRunning = true;
+                    break;
+                }
+            }
+
+            result.push({
+                type: 'tool-group',
+                id: `group-${buffer[buffer.length - 1].id}`,
+                messages: buffer,
+                hasRunning,
+            });
+            buffer = [];
+        };
+
+        for (const msg of messages) {
+            if (isStandaloneMessage(msg) || isUserAttachment(msg)) {
+                flushBuffer();
+                result.push({ type: 'message', id: msg.id, message: msg });
+            } else if (isInvisibleMessage(msg)) {
+                // Skip messages that render as null (hidden tools, thinking, empty text)
+                continue;
+            } else {
+                buffer.push(msg);
+            }
+        }
+
+        flushBuffer();
+        return result;
+    }, [messages, enabled]);
+}
+
+/** Returns true for messages that should NOT be grouped (displayed standalone) */
+function isStandaloneMessage(msg: Message): boolean {
+    if (msg.kind === 'user-text') return true;
+    if (msg.kind === 'agent-event') return true; // Mode switches, "aborted by user", etc.
+    if (msg.kind === 'agent-text') {
+        // Thinking messages go into groups, non-empty text stands alone
+        if (msg.isThinking) return false;
+        if (msg.text.trim().length === 0) return false;
+        return true;
+    }
+    return false;
+}
+
+/** Returns true for messages that render as null and should be excluded from groups */
+function isInvisibleMessage(msg: Message): boolean {
+    // Hidden tools (ToolSearch, CodexReasoning, etc.)
+    if (msg.kind === 'tool-call') {
+        const known = knownTools[msg.tool.name as keyof typeof knownTools] as any;
+        return known?.hidden === true;
+    }
+    // Thinking messages render as null in MessageView
+    if (msg.kind === 'agent-text') {
+        if (msg.isThinking) return true;
+        if (msg.text.trim().length === 0) return true;
+    }
+    return false;
+}
+
+/** User-sent file/image attachments should never be collapsed into a group */
+function isUserAttachment(msg: Message): boolean {
+    return msg.kind === 'tool-call' && msg.tool.name === 'file';
+}
+
+// Tool name → category mapping for summary generation
+const TOOL_CATEGORIES: Record<string, string> = {
+    Edit: 'edit', MultiEdit: 'edit', Write: 'edit',
+    CodexPatch: 'edit', GeminiPatch: 'edit', edit: 'edit', NotebookEdit: 'edit',
+    Read: 'read', read: 'read', NotebookRead: 'read',
+    Bash: 'terminal', CodexBash: 'terminal', GeminiBash: 'terminal',
+    shell: 'terminal', execute: 'terminal',
+    Grep: 'search', Glob: 'search', LS: 'search', search: 'search', WebSearch: 'search',
+    WebFetch: 'web',
+    Task: 'task', Agent: 'task',
+};
+
+/** Generate a human-readable summary of tools in a group */
+export function generateGroupSummary(messages: Message[]): string {
+    const counts: Record<string, number> = {};
+
+    for (const msg of messages) {
+        if (msg.kind === 'tool-call') {
+            const category = TOOL_CATEGORIES[msg.tool.name] || 'other';
+            counts[category] = (counts[category] || 0) + 1;
+        }
+    }
+
+    const parts: string[] = [];
+
+    if (counts.edit) parts.push(t('toolGroup.editedFiles', { count: counts.edit }));
+    if (counts.read) parts.push(t('toolGroup.readFiles', { count: counts.read }));
+    if (counts.terminal) parts.push(t('toolGroup.ranCommands', { count: counts.terminal }));
+    if (counts.search) parts.push(t('toolGroup.searched', { count: counts.search }));
+    if (counts.web) parts.push(t('toolGroup.fetchedUrls', { count: counts.web }));
+    if (counts.task) parts.push(t('toolGroup.ranTasks', { count: counts.task }));
+    if (counts.other) parts.push(t('toolGroup.usedTools', { count: counts.other }));
+
+    return parts.join(', ') || t('toolGroup.usedTools', { count: messages.length });
+}

package/sources/hooks/useImagePicker.ts

@@ -0,0 +1,135 @@
+/**
+ * Image picker hook for attaching images to messages.
+ *
+ * Wraps expo-image-picker with permission handling and thumbhash generation.
+ * Enforces limits: max 20 images per message, 10MB per file.
+ *
+ * Note: fileSize from expo-image-picker is optional — some platforms do not
+ * provide it (returns undefined → size=0). Such files pass the client-side
+ * size check; the server enforces the limit on upload. Phase 5 should handle
+ * 413 responses gracefully.
+ */
+import { useState, useCallback, useRef, useEffect } from 'react';
+import * as ImagePicker from 'expo-image-picker';
+import { Platform } from 'react-native';
+import { Modal } from '@/modal';
+import { generateThumbhash } from '@/utils/thumbhash';
+import { t } from '@/text';
+import type { AttachmentPreview } from '@/sync/attachmentTypes';
+
+export const MAX_IMAGES_PER_MESSAGE = 20;
+export const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+
+export type { AttachmentPreview };
+
+type UseImagePickerResult = {
+    selectedImages: AttachmentPreview[];
+    pickImages: () => Promise<void>;
+    removeImage: (id: string) => void;
+    clearImages: () => void;
+    addImages: (images: AttachmentPreview[]) => void;
+};
+
+export function useImagePicker(): UseImagePickerResult {
+    const [selectedImages, setSelectedImages] = useState<AttachmentPreview[]>([]);
+    // Ref tracks current count to avoid stale closures on rapid taps.
+    const selectedCountRef = useRef(0);
+    useEffect(() => {
+        selectedCountRef.current = selectedImages.length;
+    }, [selectedImages]);
+
+    const requestPermission = useCallback(async (): Promise<boolean> => {
+        if (Platform.OS === 'web') return true;
+
+        const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+        if (status !== 'granted') {
+            Modal.alert(
+                t('imageUpload.permissionTitle'),
+                t('imageUpload.permissionMessage'),
+                [{ text: t('common.ok') }],
+            );
+            return false;
+        }
+        return true;
+    }, []);
+
+    const pickImages = useCallback(async () => {
+        const hasPermission = await requestPermission();
+        if (!hasPermission) return;
+
+        const remaining = MAX_IMAGES_PER_MESSAGE - selectedCountRef.current;
+        if (remaining <= 0) {
+            Modal.alert(
+                t('imageUpload.limitTitle'),
+                t('imageUpload.limitMessage', { max: MAX_IMAGES_PER_MESSAGE }),
+                [{ text: t('common.ok') }],
+            );
+            return;
+        }
+
+        const result = await ImagePicker.launchImageLibraryAsync({
+            mediaTypes: ['images'], // expo-image-picker ~55: MediaTypeOptions deprecated
+            allowsMultipleSelection: true,
+            selectionLimit: remaining,
+            quality: 1, // no recompression — preserve original for Claude
+            exif: false,
+        });
+
+        if (result.canceled || !result.assets.length) return;
+
+        // On web, selectionLimit is not enforced by the browser — clamp here.
+        const assets = result.assets.slice(0, remaining);
+        const previews: AttachmentPreview[] = [];
+
+        for (const asset of assets) {
+            const size = asset.fileSize ?? 0;
+
+            if (size > MAX_FILE_SIZE) {
+                Modal.alert(
+                    t('imageUpload.fileTooLargeTitle'),
+                    t('imageUpload.fileTooLargeMessage', { name: asset.fileName ?? 'image', maxMb: 10 }),
+                    [{ text: t('common.ok') }],
+                );
+                continue;
+            }
+
+            // Skip thumbhash if dimensions are unavailable (prevents divide-by-zero).
+            const thumbhash = (asset.width > 0 && asset.height > 0)
+                ? await generateThumbhash(asset.uri, asset.width, asset.height)
+                : undefined;
+
+            previews.push({
+                id: `${Date.now()}_${Math.random().toString(36).slice(2)}`,
+                uri: asset.uri,
+                width: asset.width,
+                height: asset.height,
+                mimeType: asset.mimeType ?? 'image/jpeg',
+                size,
+                name: asset.fileName ?? `image_${Date.now()}.jpg`,
+                thumbhash,
+            });
+        }
+
+        if (previews.length > 0) {
+            setSelectedImages(prev => [...prev, ...previews].slice(0, MAX_IMAGES_PER_MESSAGE));
+        }
+    }, [requestPermission]);
+
+    const removeImage = useCallback((id: string) => {
+        setSelectedImages(prev => prev.filter(img => img.id !== id));
+    }, []);
+
+    const clearImages = useCallback(() => {
+        setSelectedImages([]);
+    }, []);
+
+    const addImages = useCallback((images: AttachmentPreview[]) => {
+        setSelectedImages(prev => {
+            const remaining = MAX_IMAGES_PER_MESSAGE - prev.length;
+            if (remaining <= 0) return prev;
+            return [...prev, ...images.slice(0, remaining)];
+        });
+    }, []);
+
+    return { selectedImages, pickImages, removeImage, clearImages, addImages };
+}