nastech-app 1.0.0

package/sources/hooks/useSessionQuickActions.ts

@@ -0,0 +1,325 @@
+import * as React from 'react';
+import { useNasTechAction } from '@/hooks/useNasTechAction';
+import { useNavigateToSession } from '@/hooks/useNavigateToSession';
+import { Modal } from '@/modal';
+import { machineResumeSession, sessionArchive, sessionKill, forkAndSpawn, type ForkSource } from '@/sync/ops';
+import { maybeCleanupWorktree } from '@/hooks/useWorktreeCleanup';
+import { storage, useLocalSetting, useMachine, useSetting } from '@/sync/storage';
+import { Machine, Session } from '@/sync/storageTypes';
+import { sync } from '@/sync/sync';
+import { resolveMessageModeMeta } from '@/sync/messageMeta';
+import { t } from '@/text';
+import { NasTechError } from '@/utils/errors';
+import { copySessionMetadataToClipboard, copySessionMetadataAndLogsToClipboard } from '@/utils/copySessionMetadataToClipboard';
+import { useSessionStatus } from '@/utils/sessionUtils';
+import { isMachineOnline } from '@/utils/machineUtils';
+import { useRouter } from 'expo-router';
+import { useSession } from '@/sync/storage';
+import { DuplicateSheet } from '@/components/DuplicateSheet';
+
+export interface SessionActionItem {
+    id: string;
+    label: string;
+    icon: string;
+    onPress: () => void;
+    destructive?: boolean;
+}
+
+interface UseSessionQuickActionsOptions {
+    onAfterArchive?: () => void;
+    onAfterDelete?: () => void;
+    onAfterCopySessionMetadata?: () => void;
+}
+
+type ResumeAvailability = {
+    canResume: boolean;
+    canShowResume: boolean;
+    subtitle: string;
+    message: string;
+};
+
+function getResumeAvailability(session: Session, machine: Machine | null | undefined, isConnected: boolean): ResumeAvailability {
+    if (isConnected) {
+        return {
+            canResume: false,
+            canShowResume: false,
+            subtitle: '',
+            message: '',
+        };
+    }
+
+    const machineId = session.metadata?.machineId;
+    if (!machineId) {
+        const message = t('sessionInfo.resumeSessionMissingMachine');
+        return {
+            canResume: false,
+            canShowResume: true,
+            subtitle: message,
+            message,
+        };
+    }
+
+    const hasBackendResumeId = Boolean(session.metadata?.claudeSessionId || session.metadata?.codexThreadId);
+    if (!hasBackendResumeId) {
+        const message = t('sessionInfo.resumeSessionMissingBackendId');
+        return {
+            canResume: false,
+            canShowResume: true,
+            subtitle: message,
+            message,
+        };
+    }
+
+    if (!machine) {
+        const message = t('sessionInfo.resumeSessionSameMachineOnly');
+        return {
+            canResume: false,
+            canShowResume: true,
+            subtitle: message,
+            message,
+        };
+    }
+
+    if (!isMachineOnline(machine)) {
+        return {
+            canResume: false,
+            canShowResume: true,
+            subtitle: t('sessionInfo.resumeSessionMachineOffline'),
+            message: t('sessionInfo.resumeSessionMachineOffline'),
+        };
+    }
+
+    return {
+        canResume: true,
+        canShowResume: true,
+        subtitle: t('sessionInfo.resumeSessionSubtitle'),
+        message: t('sessionInfo.resumeSessionSubtitle'),
+    };
+}
+
+export function useSessionQuickActions(
+    session: Session,
+    options: UseSessionQuickActionsOptions = {},
+) {
+    const {
+        onAfterArchive,
+        onAfterCopySessionMetadata,
+    } = options;
+    const router = useRouter();
+    const navigateToSession = useNavigateToSession();
+    const sessionStatus = useSessionStatus(session);
+    const machineId = session.metadata?.machineId ?? '';
+    const machine = useMachine(machineId);
+    const devModeEnabled = useLocalSetting('devModeEnabled');
+    const expResumeSession = useSetting('expResumeSession');
+    const resumeAvailability = React.useMemo(
+        () => expResumeSession ? getResumeAvailability(session, machine, sessionStatus.isConnected) : { canResume: false, canShowResume: false, subtitle: '', message: '' },
+        [machine, session, sessionStatus.isConnected, expResumeSession],
+    );
+
+    // Fork eligibility — separate from resume because fork works on both
+    // active AND inactive Claude sessions (the on-disk JSONL exists either
+    // way; copyFile is atomic). The user-facing toggle is the same
+    // expResumeSession experiment so all three flows (resume / fork /
+    // duplicate) ride a single switch on settings/features.
+    const claudeFlavor = !session.metadata?.flavor || session.metadata.flavor === 'claude';
+    const claudeSessionId = session.metadata?.claudeSessionId;
+    const canFork = Boolean(
+        expResumeSession
+        && claudeFlavor
+        && claudeSessionId
+        && machineId
+        && machine
+        && isMachineOnline(machine),
+    );
+
+    const openDetails = React.useCallback(() => {
+        router.push(`/session/${session.id}/info`);
+    }, [router, session.id]);
+
+    const copySessionMetadata = React.useCallback(() => {
+        void (async () => {
+            const copied = await copySessionMetadataToClipboard(session);
+            if (copied) {
+                onAfterCopySessionMetadata?.();
+            }
+        })();
+    }, [onAfterCopySessionMetadata, session]);
+
+    const copySessionMetadataAndLogs = React.useCallback(() => {
+        void (async () => {
+            const copied = await copySessionMetadataAndLogsToClipboard(session);
+            if (copied) {
+                onAfterCopySessionMetadata?.();
+            }
+        })();
+    }, [onAfterCopySessionMetadata, session]);
+
+    const [resumingSession, performResume] = useNasTechAction(async () => {
+        if (!resumeAvailability.canResume) {
+            throw new NasTechError(resumeAvailability.message, false);
+        }
+
+        if (!machineId) {
+            throw new NasTechError(t('sessionInfo.resumeSessionMissingMachine'), false);
+        }
+
+        const modeMeta = resolveMessageModeMeta(session, storage.getState().settings);
+        const result = await machineResumeSession({
+            machineId,
+            sessionId: session.id,
+            model: modeMeta.model ?? undefined,
+            permissionMode: modeMeta.permissionMode,
+        });
+
+        switch (result.type) {
+            case 'success': {
+                // Session reconnects to the same ID, so messages are preserved.
+                // Refresh to pick up the updated session state.
+                await sync.refreshSessions();
+
+                if (session.permissionMode) {
+                    storage.getState().updateSessionPermissionMode(result.sessionId, session.permissionMode);
+                }
+                if (session.modelMode) {
+                    storage.getState().updateSessionModelMode(result.sessionId, session.modelMode);
+                }
+
+                navigateToSession(result.sessionId);
+                return;
+            }
+            case 'requestToApproveDirectoryCreation':
+                throw new NasTechError(t('sessionInfo.resumeSessionUnexpectedDirectoryPrompt'), false);
+            case 'error':
+                throw new NasTechError(result.errorMessage, false);
+        }
+    });
+
+    const [archivingSession, performArchive] = useNasTechAction(async () => {
+        await maybeCleanupWorktree(session.id, session.metadata?.path, session.metadata?.machineId);
+
+        // Try to kill the CLI process; if it's already dead, force-archive via server
+        const killResult = await sessionKill(session.id);
+        if (!killResult.success) {
+            await sessionArchive(session.id);
+        }
+        onAfterArchive?.();
+    });
+
+    const archiveSession = React.useCallback(() => {
+        performArchive();
+    }, [performArchive]);
+
+    const resumeSession = React.useCallback(() => {
+        performResume();
+    }, [performResume]);
+
+    // Fork the session (no truncation) — copies the on-disk Claude JSONL
+    // and spawns a fresh NasTech session on the same machine. Works for
+    // both active and inactive sessions; the source row stays untouched.
+    const [forking, performFork] = useNasTechAction(async () => {
+        if (!canFork) {
+            throw new NasTechError(t('session.forkErrorMissingMetadata'), false);
+        }
+        const directory = session.metadata?.path;
+        if (!machineId || !directory || !claudeSessionId) {
+            throw new NasTechError(t('session.forkErrorMissingMetadata'), false);
+        }
+        const source: ForkSource = { sessionId: session.id, machineId, directory, claudeSessionId };
+        const result = await forkAndSpawn(source);
+        if (result.type !== 'success') {
+            throw new NasTechError(result.type === 'error' ? result.errorMessage : t('session.forkErrorGeneric'), false);
+        }
+        navigateToSession(result.sessionId);
+    });
+
+    const forkSession = React.useCallback(() => {
+        performFork();
+    }, [performFork]);
+
+    const openDuplicateSheet = React.useCallback(() => {
+        if (!canFork) return;
+        Modal.show({
+            component: DuplicateSheet,
+            props: { sessionId: session.id },
+        } as any);
+    }, [canFork, session.id]);
+
+    const canCopySessionMetadata = __DEV__ || devModeEnabled;
+
+    const actionItems = React.useMemo<SessionActionItem[]>(() => {
+        const items: SessionActionItem[] = [
+            { id: 'details', icon: 'information-circle-outline', label: t('profile.details'), onPress: openDetails },
+        ];
+
+        if (resumeAvailability.canShowResume) {
+            items.push({ id: 'resume', icon: 'play-circle-outline', label: t('sessionInfo.resumeSession'), onPress: resumeSession });
+        }
+
+        if (canFork) {
+            items.push({ id: 'fork', icon: 'git-branch-outline', label: t('session.forkAction'), onPress: forkSession });
+            items.push({ id: 'duplicate', icon: 'time-outline', label: t('session.duplicateAction'), onPress: openDuplicateSheet });
+        }
+
+        if (canCopySessionMetadata) {
+            items.push({ id: 'copy-metadata', icon: 'bug-outline', label: t('sessionInfo.copyMetadata'), onPress: copySessionMetadata });
+            items.push({ id: 'copy-metadata-and-logs', icon: 'document-text-outline', label: t('sessionInfo.copyMetadata') + ' & Client Logs', onPress: copySessionMetadataAndLogs });
+        }
+
+        items.push({ id: 'archive', icon: 'archive-outline', label: 'Archive', onPress: archiveSession, destructive: true });
+
+        return items;
+    }, [
+        archiveSession,
+        canCopySessionMetadata,
+        canFork,
+        copySessionMetadata,
+        copySessionMetadataAndLogs,
+        forkSession,
+        openDetails,
+        openDuplicateSheet,
+        resumeAvailability.canShowResume,
+        resumeSession,
+    ]);
+
+    const showActionAlert = React.useCallback(() => {
+        const buttons: Array<{ text: string; onPress?: () => void; style?: 'cancel' | 'destructive' | 'default' }> = actionItems.map(item => ({
+            text: item.label,
+            onPress: item.onPress,
+            style: item.destructive ? 'destructive' as const : undefined,
+        }));
+        buttons.push({ text: t('common.cancel'), style: 'cancel' });
+        Modal.alert('Session', undefined, buttons);
+    }, [actionItems]);
+
+    return {
+        actionItems,
+        showActionAlert,
+        archiveSession,
+        archivingSession,
+        canArchive: true,
+        canCopySessionMetadata,
+        canResume: resumeAvailability.canResume,
+        canShowResume: resumeAvailability.canShowResume,
+        canFork,
+        copySessionMetadata,
+        copySessionMetadataAndLogs,
+        forkSession,
+        forking,
+        openDetails,
+        openDuplicateSheet,
+        resumeSession,
+        resumeSessionSubtitle: resumeAvailability.subtitle,
+        resumingSession,
+    };
+}
+
+/**
+ * Lightweight hook for list items that only have a sessionId.
+ * Returns a long-press handler that shows the action alert on mobile.
+ */
+export function useSessionActionAlert(sessionId: string) {
+    const session = useSession(sessionId);
+    const { showActionAlert } = useSessionQuickActions(session!, {});
+    return session ? showActionAlert : undefined;
+}

package/sources/hooks/useTauriDrag.ts

@@ -0,0 +1,76 @@
+import { useEffect, useRef } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { isTauri } from '@/utils/isTauri';
+import { useHeaderHeight } from '@/utils/responsive';
+
+const INTERACTIVE_TAGS = new Set(['button', 'a', 'input', 'textarea', 'select']);
+const INTERACTIVE_ROLES = new Set(['button', 'link', 'textbox', 'menuitem', 'tab', 'switch', 'checkbox', 'radio']);
+
+const DESKTOP_CSS = `
+    html, body {
+        user-select: none;
+        -webkit-user-select: none;
+    }
+    input, textarea, [contenteditable="true"], [contenteditable=""] {
+        user-select: text;
+        -webkit-user-select: text;
+    }
+    img {
+        -webkit-user-drag: none;
+        user-drag: none;
+    }
+`;
+
+// Tauri's built-in drag.js only inspects e.target directly, so clicks on header
+// children (text/icons/Pressables) silently fail. We drag when the click lands
+// in the top strip (safe-area + header height) and isn't on an interactive element.
+export function useTauriDrag() {
+    const safeArea = useSafeAreaInsets();
+    const headerHeight = useHeaderHeight();
+    const dragZoneRef = useRef(0);
+    dragZoneRef.current = safeArea.top + headerHeight;
+
+    useEffect(() => {
+        if (!isTauri()) return;
+
+        const style = document.createElement('style');
+        style.setAttribute('data-tauri-desktop', '');
+        style.textContent = DESKTOP_CSS;
+        document.head.appendChild(style);
+
+        const isInteractive = (start: HTMLElement | null): boolean => {
+            let node: HTMLElement | null = start;
+            while (node && node !== document.body) {
+                if (node.getAttribute('data-tauri-drag-region') === 'false') return true;
+                const tag = node.tagName.toLowerCase();
+                if (INTERACTIVE_TAGS.has(tag)) return true;
+                const role = node.getAttribute('role');
+                if (role && INTERACTIVE_ROLES.has(role)) return true;
+                const tabindex = node.getAttribute('tabindex');
+                if (tabindex !== null && tabindex !== '-1') return true;
+                node = node.parentElement;
+            }
+            return false;
+        };
+
+        const onMouseDown = (e: MouseEvent) => {
+            if (e.button !== 0) return;
+            if (e.clientY > dragZoneRef.current) return;
+            const target = e.target as HTMLElement | null;
+            if (isInteractive(target)) return;
+
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            window.getSelection()?.removeAllRanges();
+            const cmd = e.detail === 2 ? 'internal_toggle_maximize' : 'start_dragging';
+            (window as any).__TAURI_INTERNALS__.invoke('plugin:window|' + cmd)
+                .catch((err: unknown) => console.error('[useTauriDrag] invoke failed:', err));
+        };
+
+        document.addEventListener('mousedown', onMouseDown, true);
+        return () => {
+            document.removeEventListener('mousedown', onMouseDown, true);
+            style.remove();
+        };
+    }, []);
+}

package/sources/hooks/useTauriZoom.ts

@@ -0,0 +1,67 @@
+import { useEffect } from 'react';
+import { Platform } from 'react-native';
+import { isTauri } from '@/utils/isTauri';
+
+export const DEFAULT_APP_ZOOM = 1.0;
+
+const MIN_APP_ZOOM = 0.5;
+const MAX_APP_ZOOM = 2.5;
+const WEB_ZOOM_CLASS = 'nastech-app-zoomed';
+
+const clampZoom = (zoom: number) => Math.max(MIN_APP_ZOOM, Math.min(MAX_APP_ZOOM, zoom));
+
+// Cmd/Ctrl+=, Cmd/Ctrl+-, Cmd/Ctrl+0 zoom shortcuts for the Tauri desktop app.
+// Uses Tauri's native webview.setZoom — unlike CSS `zoom`, this shrinks the
+// layout viewport so matchMedia / window.innerWidth change and responsive
+// breakpoints (unistyles etc.) react correctly.
+export function useTauriZoom() {
+    useEffect(() => {
+        if (Platform.OS !== 'web' || typeof window === 'undefined' || typeof document === 'undefined') return;
+
+        const inTauri = isTauri();
+        const root = document.documentElement;
+
+        if (!inTauri) {
+            root.style.setProperty('--nastech-app-zoom', String(DEFAULT_APP_ZOOM));
+            root.classList.add(WEB_ZOOM_CLASS);
+            return () => {
+                root.classList.remove(WEB_ZOOM_CLASS);
+                root.style.removeProperty('--nastech-app-zoom');
+            };
+        }
+
+        root.classList.remove(WEB_ZOOM_CLASS);
+        root.style.removeProperty('--nastech-app-zoom');
+
+        let zoom = DEFAULT_APP_ZOOM;
+        let webview: { setZoom: (z: number) => Promise<void> } | null = null;
+
+        const apply = (z: number) => {
+            zoom = clampZoom(z);
+            webview?.setZoom(zoom).catch((e) => console.error('setZoom failed:', e));
+        };
+
+        (async () => {
+            const { getCurrentWebview } = await import('@tauri-apps/api/webview');
+            webview = getCurrentWebview();
+            apply(zoom);
+        })();
+
+        const onKey = (e: KeyboardEvent) => {
+            if ((!e.metaKey && !e.ctrlKey) || e.altKey) return;
+            if (e.key === '=' || e.key === '+') {
+                e.preventDefault();
+                apply(zoom + 0.1);
+            } else if (e.key === '-' || e.key === '_') {
+                e.preventDefault();
+                apply(zoom - 0.1);
+            } else if (e.key === '0') {
+                e.preventDefault();
+                apply(DEFAULT_APP_ZOOM);
+            }
+        };
+
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, []);
+}

package/sources/hooks/useUpdates.ts

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+import { AppState, AppStateStatus, Platform } from 'react-native';
+import * as Updates from 'expo-updates';
+import { trackOtaUpdateAvailable, trackOtaUpdateApplied } from '@/track';
+
+type PendingOtaUpdate = {
+    ota_version?: string;
+    ota_runtime_version?: string;
+};
+
+export function useUpdates() {
+    const [updateAvailable, setUpdateAvailable] = useState(false);
+    const [isChecking, setIsChecking] = useState(false);
+    const [pendingUpdate, setPendingUpdate] = useState<PendingOtaUpdate | null>(null);
+
+    useEffect(() => {
+        // Check for updates when app becomes active
+        const subscription = AppState.addEventListener('change', handleAppStateChange);
+
+        // Initial check
+        checkForUpdates();
+
+        return () => {
+            subscription.remove();
+        };
+    }, []);
+
+    const handleAppStateChange = (nextAppState: AppStateStatus) => {
+        if (nextAppState === 'active') {
+            checkForUpdates();
+        }
+    };
+
+    const checkForUpdates = async () => {
+        if (__DEV__) {
+            // Don't check for updates in development
+            return;
+        }
+
+        if (isChecking) {
+            return;
+        }
+
+        setIsChecking(true);
+
+        try {
+            const update = await Updates.checkForUpdateAsync();
+            if (update.isAvailable) {
+                const pendingUpdate = {
+                    ota_version: update.manifest.id,
+                    ota_runtime_version: 'runtimeVersion' in update.manifest ? update.manifest.runtimeVersion : undefined,
+                };
+                await Updates.fetchUpdateAsync();
+                trackOtaUpdateAvailable(pendingUpdate);
+                setPendingUpdate(pendingUpdate);
+                setUpdateAvailable(true);
+            }
+        } catch (error) {
+            console.error('Error checking for updates:', error);
+        } finally {
+            setIsChecking(false);
+        }
+    };
+
+    const reloadApp = async () => {
+        trackOtaUpdateApplied(pendingUpdate ?? undefined);
+        if (Platform.OS === 'web') {
+            window.location.reload();
+        } else {
+            try {
+                await Updates.reloadAsync();
+            } catch (error) {
+                console.error('Error reloading app:', error);
+            }
+        }
+    };
+
+    return {
+        updateAvailable,
+        isChecking,
+        checkForUpdates,
+        reloadApp,
+    };
+}

package/sources/hooks/useVisibleSessionListViewData.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { SessionListViewItem, useSessionListViewData, useSetting } from '@/sync/storage';
+
+export function useVisibleSessionListViewData(): SessionListViewItem[] | null {
+    const data = useSessionListViewData();
+    const hideInactiveSessions = useSetting('hideInactiveSessions');
+
+    return React.useMemo(() => {
+        if (!data) {
+            return data;
+        }
+
+        const result: SessionListViewItem[] = [];
+        let hasInactive = false;
+
+        // First pass: add active sessions group and check if inactive sessions exist
+        for (const item of data) {
+            if (item.type === 'active-sessions') {
+                result.push(item);
+            } else if (item.type === 'session' && !item.session.active) {
+                hasInactive = true;
+            }
+        }
+
+        // Insert archive toggle if there are inactive sessions
+        if (hasInactive) {
+            result.push({ type: 'archive-toggle', hidden: hideInactiveSessions });
+        }
+
+        // If not hiding, add all remaining items (headers, project groups, inactive sessions)
+        if (!hideInactiveSessions) {
+            let pendingProjectGroup: SessionListViewItem | null = null;
+
+            for (const item of data) {
+                if (item.type === 'active-sessions') {
+                    continue; // already added
+                }
+
+                if (item.type === 'project-group') {
+                    pendingProjectGroup = item;
+                    continue;
+                }
+
+                if (item.type === 'session') {
+                    if (!item.session.active) {
+                        if (pendingProjectGroup) {
+                            result.push(pendingProjectGroup);
+                            pendingProjectGroup = null;
+                        }
+                        result.push(item);
+                    }
+                    continue;
+                }
+
+                pendingProjectGroup = null;
+
+                if (item.type === 'header') {
+                    result.push(item);
+                }
+            }
+        }
+
+        return result;
+    }, [data, hideInactiveSessions]);
+}

package/sources/hooks/useWorktreeCleanup.ts

@@ -0,0 +1,69 @@
+/**
+ * Worktree cleanup logic shared by archive and delete flows.
+ *
+ * When a session lives inside a worktree, this hook decides whether to offer
+ * the user the option to delete the worktree:
+ *
+ * 1. If other active sessions still reference the same worktree → skip silently.
+ * 2. If git status has uncommitted changes → skip silently.
+ * 3. Otherwise → show a confirmation dialog ("Delete worktree" / "Keep files").
+ *
+ * The prompt only appears when: no other active sessions AND git is clean.
+ */
+
+import { storage } from '@/sync/storage';
+import { machineBash } from '@/sync/ops';
+import { isWorktreePath, removeWorktree } from '@/utils/worktree';
+import { Modal } from '@/modal';
+import { t } from '@/text';
+
+/**
+ * Check whether any *other* active session shares the same worktree path,
+ * then optionally prompt the user to delete the worktree.
+ *
+ * Returns after the worktree has been removed or the user chose to keep it.
+ */
+export async function maybeCleanupWorktree(
+    sessionId: string,
+    sessionPath: string | undefined,
+    machineId: string | undefined,
+): Promise<void> {
+    if (!sessionPath || !machineId || !isWorktreePath(sessionPath)) {
+        return;
+    }
+
+    // 1. Check if other active sessions use the same worktree
+    const allSessions = storage.getState().getActiveSessions();
+    const otherOnSameWorktree = allSessions.some(
+        s => s.id !== sessionId && s.metadata?.path === sessionPath,
+    );
+    if (otherOnSameWorktree) {
+        return;
+    }
+
+    // 2. Check git status for uncommitted changes
+    const statusResult = await machineBash(
+        machineId,
+        'git status --porcelain',
+        sessionPath,
+    );
+    if (!statusResult.success || statusResult.stdout.trim().length > 0) {
+        // Either git failed (not a repo / machine offline) or there are changes → skip
+        return;
+    }
+
+    // 3. Git is clean, no other sessions → ask the user
+    const shouldDelete = await Modal.confirm(
+        t('sessionInfo.worktreeCleanupTitle'),
+        t('sessionInfo.worktreeCleanupMessage'),
+        {
+            confirmText: t('sessionInfo.worktreeCleanupDelete'),
+            cancelText: t('sessionInfo.worktreeCleanupKeep'),
+            destructive: true,
+        },
+    );
+
+    if (shouldDelete) {
+        await removeWorktree(machineId, sessionPath).catch(() => {});
+    }
+}