nastech-app 1.0.0

package/sources/-session/sessionOverlayNav.ts

@@ -0,0 +1,34 @@
+import { create } from 'zustand';
+
+/**
+ * Cross-component bridge: lets the global SidebarNavigator's back / forward
+ * buttons drive the file-diff / file-view overlay stack owned by SessionView.
+ *
+ * SessionView publishes its current handlers + canBack / canForward whenever
+ * its overlay stack changes. SidebarNavigator reads them and runs them before
+ * falling through to router-level navigation.
+ */
+interface OverlayNavState {
+    canBack: boolean;
+    canForward: boolean;
+    back: () => boolean;
+    forward: () => boolean;
+}
+
+interface OverlayNavStore extends OverlayNavState {
+    publish: (state: OverlayNavState) => void;
+    reset: () => void;
+}
+
+const initial: OverlayNavState = {
+    canBack: false,
+    canForward: false,
+    back: () => false,
+    forward: () => false,
+};
+
+export const useOverlayNav = create<OverlayNavStore>((set) => ({
+    ...initial,
+    publish: (state) => set(state),
+    reset: () => set(initial),
+}));

package/sources/app/(app)/_layout.tsx

@@ -0,0 +1,321 @@
+import { Stack } from 'expo-router';
+import 'react-native-reanimated';
+import * as React from 'react';
+import { Typography } from '@/constants/Typography';
+import { createHeader } from '@/components/navigation/Header';
+import { Platform, TouchableOpacity, Text } from 'react-native';
+import { isRunningOnMac } from '@/utils/platform';
+import { useUnistyles } from 'react-native-unistyles';
+import { t } from '@/text';
+
+export const unstable_settings = {
+    initialRouteName: 'index',
+};
+
+export default function RootLayout() {
+    // Use custom header on Android and Mac Catalyst, native header on iOS (non-Catalyst)
+    const shouldUseCustomHeader = Platform.OS === 'android' || isRunningOnMac() || Platform.OS === 'web';
+    const { theme } = useUnistyles();
+
+    return (
+        <Stack
+            initialRouteName='index'
+            screenOptions={{
+                header: shouldUseCustomHeader ? createHeader : undefined,
+                headerBackTitle: t('common.back'),
+                headerShadowVisible: false,
+                contentStyle: {
+                    backgroundColor: theme.colors.surface,
+                },
+                headerStyle: {
+                    backgroundColor: theme.colors.header.background,
+                },
+                headerTintColor: theme.colors.header.tint,
+                headerTitleStyle: {
+                    color: theme.colors.header.tint,
+                    ...Typography.default('semiBold'),
+                },
+
+            }}
+        >
+            <Stack.Screen
+                name="index"
+                options={{
+                    headerShown: false,
+                    headerTitle: ''
+                }}
+            />
+            <Stack.Screen
+                name="inbox/index"
+                options={{
+                    headerShown: false,
+                    headerTitle: t('tabs.inbox'),
+                    headerBackTitle: t('common.home')
+                }}
+            />
+            <Stack.Screen
+                name="settings/index"
+                options={{
+                    headerShown: true,
+                    headerTitle: t('settings.title'),
+                    headerBackTitle: t('common.home')
+                }}
+            />
+            <Stack.Screen
+                name="session/[id]"
+                options={{
+                    headerShown: false
+                }}
+            />
+            <Stack.Screen
+                name="session/[id]/message/[messageId]"
+                options={{
+                    headerShown: true,
+                    headerBackTitle: t('common.back'),
+                    headerTitle: t('common.message')
+                }}
+            />
+            <Stack.Screen
+                name="session/[id]/info"
+                options={{
+                    headerShown: true,
+                    headerTitle: '',
+                    headerBackTitle: t('common.back'),
+                }}
+            />
+            <Stack.Screen
+                name="session/[id]/files"
+                options={{
+                    headerShown: true,
+                    headerTitle: t('common.files'),
+                    headerBackTitle: t('common.back'),
+                }}
+            />
+            <Stack.Screen
+                name="session/[id]/file"
+                options={{
+                    headerShown: true,
+                    headerTitle: t('common.fileViewer'),
+                    headerBackTitle: t('common.files'),
+                }}
+            />
+            <Stack.Screen
+                name="settings/account"
+                options={{
+                    headerTitle: t('settings.account'),
+                }}
+            />
+            <Stack.Screen
+                name="settings/appearance"
+                options={{
+                    headerTitle: t('settings.appearance'),
+                }}
+            />
+            <Stack.Screen
+                name="settings/agents"
+                options={{
+                    headerTitle: 'Agent Defaults',
+                }}
+            />
+            <Stack.Screen
+                name="settings/features"
+                options={{
+                    headerTitle: t('settings.features'),
+                }}
+            />
+            <Stack.Screen
+                name="terminal/connect"
+                options={{
+                    headerTitle: t('navigation.connectTerminal'),
+                }}
+            />
+            <Stack.Screen
+                name="terminal/index"
+                options={{
+                    headerTitle: t('navigation.connectTerminal'),
+                }}
+            />
+            <Stack.Screen
+                name="restore/index"
+                options={{
+                    headerShown: true,
+                    headerTitle: t('navigation.linkNewDevice'),
+                    headerBackTitle: t('common.back'),
+                }}
+            />
+            <Stack.Screen
+                name="restore/manual"
+                options={{
+                    headerShown: true,
+                    headerTitle: t('navigation.restoreWithSecretKey'),
+                    headerBackTitle: t('common.back'),
+                }}
+            />
+            <Stack.Screen
+                name="changelog"
+                options={{
+                    headerShown: true,
+                    headerTitle: t('navigation.whatsNew'),
+                    headerBackTitle: t('common.back'),
+                }}
+            />
+            <Stack.Screen
+                name="artifacts/index"
+                options={{
+                    headerShown: true,
+                    headerTitle: t('artifacts.title'),
+                    headerBackTitle: t('common.back'),
+                }}
+            />
+            <Stack.Screen
+                name="artifacts/[id]"
+                options={{
+                    headerShown: false, // We'll set header dynamically
+                }}
+            />
+            <Stack.Screen
+                name="artifacts/new"
+                options={{
+                    headerShown: true,
+                    headerTitle: t('artifacts.new'),
+                    headerBackTitle: t('common.cancel'),
+                }}
+            />
+            <Stack.Screen
+                name="artifacts/edit/[id]"
+                options={{
+                    headerShown: true,
+                    headerTitle: t('artifacts.edit'),
+                    headerBackTitle: t('common.cancel'),
+                }}
+            />
+            <Stack.Screen
+                name="text-selection"
+                options={{
+                    headerShown: true,
+                    headerTitle: t('textSelection.title'),
+                    headerBackTitle: t('common.back'),
+                }}
+            />
+            <Stack.Screen
+                name="friends/index"
+                options={({ navigation }) => ({
+                    headerShown: true,
+                    headerTitle: t('navigation.friends'),
+                    headerBackTitle: t('common.back'),
+                    headerRight: () => (
+                        <TouchableOpacity
+                            onPress={() => navigation.navigate('friends/search' as never)}
+                            style={{ paddingHorizontal: 16 }}
+                        >
+                            <Text style={{ color: theme.colors.button.primary.tint, fontSize: 16 }}>
+                                {t('friends.addFriend')}
+                            </Text>
+                        </TouchableOpacity>
+                    ),
+                })}
+            />
+            <Stack.Screen
+                name="friends/search"
+                options={{
+                    headerShown: true,
+                    headerTitle: t('friends.addFriend'),
+                    headerBackTitle: t('common.back'),
+                }}
+            />
+            <Stack.Screen
+                name="user/[id]"
+                options={{
+                    headerShown: true,
+                    headerTitle: '',
+                    headerBackTitle: t('common.back'),
+                }}
+            />
+            <Stack.Screen
+                name="dev/index"
+                options={{
+                    headerTitle: 'Developer Tools',
+                }}
+            />
+
+            <Stack.Screen
+                name="dev/list-demo"
+                options={{
+                    headerTitle: 'List Components Demo',
+                }}
+            />
+            <Stack.Screen
+                name="dev/typography"
+                options={{
+                    headerTitle: 'Typography',
+                }}
+            />
+            <Stack.Screen
+                name="dev/colors"
+                options={{
+                    headerTitle: 'Colors',
+                }}
+            />
+            <Stack.Screen
+                name="dev/tools2"
+                options={{
+                    headerTitle: 'Tool Views Demo',
+                }}
+            />
+            <Stack.Screen
+                name="dev/masked-progress"
+                options={{
+                    headerTitle: 'Masked Progress',
+                }}
+            />
+            <Stack.Screen
+                name="dev/shimmer-demo"
+                options={{
+                    headerTitle: 'Shimmer View Demo',
+                }}
+            />
+            <Stack.Screen
+                name="dev/multi-text-input"
+                options={{
+                    headerTitle: 'Multi Text Input',
+                }}
+            />
+            <Stack.Screen
+                name="dev/session-composer"
+                options={{
+                    headerTitle: 'Session Composer',
+                }}
+            />
+            <Stack.Screen
+                name="session/recent"
+                options={{
+                    headerShown: true,
+                    headerTitle: t('sessionHistory.title'),
+                    headerBackTitle: t('common.back'),
+                }}
+            />
+            <Stack.Screen
+                name="settings/connect/claude"
+                options={{
+                    headerShown: true,
+                    headerTitle: 'Connect to Claude',
+                    headerBackTitle: t('common.back'),
+                    // headerStyle: {
+                    //     backgroundColor: Platform.OS === 'web' ? theme.colors.header.background : '#1F1E1C',
+                    // },
+                    // headerTintColor: Platform.OS === 'web' ? theme.colors.header.tint : '#FFFFFF',
+                    // headerTitleStyle: {
+                    //     color: Platform.OS === 'web' ? theme.colors.header.tint : '#FFFFFF',
+                    // },
+                }}
+            />
+            <Stack.Screen
+                name="new/index"
+                options={{
+                    headerTitle: t('newSession.title'),
+                    headerBackTitle: t('common.back'),
+                }}
+            />
+        </Stack>
+    );
+}

package/sources/app/(app)/artifacts/[id].tsx

@@ -0,0 +1,279 @@
+import React from 'react';
+import { View, ScrollView, ActivityIndicator, Pressable, Platform } from 'react-native';
+import { Text } from '@/components/StyledText';
+import { useArtifact } from '@/sync/storage';
+import { useLocalSearchParams, useRouter, Stack } from 'expo-router';
+import { StyleSheet } from 'react-native-unistyles';
+import { t } from '@/text';
+import { layout } from '@/components/layout';
+import { Ionicons } from '@expo/vector-icons';
+import { Modal } from '@/modal';
+import { sync } from '@/sync/sync';
+import { deleteArtifact } from '@/sync/apiArtifacts';
+import { storage } from '@/sync/storage';
+import { MarkdownView } from '@/components/markdown/MarkdownView';
+
+const stylesheet = StyleSheet.create((theme) => ({
+    container: {
+        flex: 1,
+        backgroundColor: theme.colors.groupped.background,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    contentContainer: {
+        padding: 16,
+        paddingBottom: 100,
+    },
+    loadingContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    errorContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 32,
+    },
+    errorIcon: {
+        marginBottom: 16,
+        color: theme.colors.textDestructive,
+    },
+    errorText: {
+        fontSize: 16,
+        color: theme.colors.text,
+        textAlign: 'center',
+    },
+    titleContainer: {
+        marginBottom: 24,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: '700',
+        color: theme.colors.text,
+        marginBottom: 8,
+    },
+    untitledTitle: {
+        color: theme.colors.textSecondary,
+        fontStyle: 'italic',
+    },
+    meta: {
+        fontSize: 13,
+        color: theme.colors.textSecondary,
+    },
+    bodyContainer: {
+        minHeight: 200,
+    },
+    emptyBody: {
+        fontSize: 15,
+        color: theme.colors.textSecondary,
+        fontStyle: 'italic',
+        lineHeight: 22,
+    },
+}));
+
+export default function ArtifactDetailScreen() {
+    const styles = stylesheet;
+    const { id } = useLocalSearchParams<{ id: string }>();
+    const router = useRouter();
+    const artifact = useArtifact(id);
+    const [isLoading, setIsLoading] = React.useState(!artifact?.body);
+    const [isDeleting, setIsDeleting] = React.useState(false);
+    const [error, setError] = React.useState<string | null>(null);
+
+    // Load full artifact with body if not already loaded
+    React.useEffect(() => {
+        if (!artifact || artifact.body !== undefined) return;
+        
+        let cancelled = false;
+        
+        (async () => {
+            try {
+                setIsLoading(true);
+                setError(null);
+                
+                const credentials = sync.getCredentials();
+                if (!credentials) {
+                    throw new Error('Not authenticated');
+                }
+                
+                // Fetch full artifact with body
+                const fullArtifact = await sync.fetchArtifactWithBody(id);
+                if (!cancelled && fullArtifact) {
+                    storage.getState().updateArtifact(fullArtifact);
+                }
+            } catch (err) {
+                if (!cancelled) {
+                    console.error('Failed to load artifact:', err);
+                    setError(t('artifacts.error'));
+                }
+            } finally {
+                if (!cancelled) {
+                    setIsLoading(false);
+                }
+            }
+        })();
+        
+        return () => {
+            cancelled = true;
+        };
+    }, [id, artifact]);
+
+    const handleEdit = React.useCallback(() => {
+        router.push(`/artifacts/edit/${id}`);
+    }, [id, router]);
+
+    const handleDelete = React.useCallback(async () => {
+        const confirmed = await Modal.confirm(
+            t('artifacts.deleteConfirm'),
+            t('artifacts.deleteConfirmDescription'),
+            {
+                confirmText: t('artifacts.delete'),
+                destructive: true,
+            }
+        );
+
+        if (!confirmed) return;
+
+        try {
+            setIsDeleting(true);
+            
+            const credentials = sync.getCredentials();
+            if (!credentials) {
+                throw new Error('Not authenticated');
+            }
+
+            await deleteArtifact(credentials, id);
+            storage.getState().deleteArtifact(id);
+            
+            // Navigate back
+            router.back();
+        } catch (err) {
+            console.error('Failed to delete artifact:', err);
+            Modal.alert(
+                t('common.error'),
+                'Failed to delete artifact'
+            );
+        } finally {
+            setIsDeleting(false);
+        }
+    }, [id, router]);
+
+    // Format date
+    const formattedDate = React.useMemo(() => {
+        if (!artifact) return '';
+        return new Date(artifact.updatedAt).toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    }, [artifact]);
+
+    if (isLoading) {
+        return (
+            <View style={styles.container}>
+                <Stack.Screen 
+                    options={{
+                        headerShown: true,
+                        headerTitle: t('artifacts.loading'),
+                    }}
+                />
+                <View style={styles.loadingContainer}>
+                    <ActivityIndicator size="large" />
+                </View>
+            </View>
+        );
+    }
+
+    if (error || !artifact) {
+        return (
+            <View style={styles.container}>
+                <Stack.Screen 
+                    options={{
+                        headerShown: true,
+                        headerTitle: t('common.error'),
+                    }}
+                />
+                <View style={styles.errorContainer}>
+                        <Ionicons 
+                            name="alert-circle-outline" 
+                            size={64} 
+                            style={styles.errorIcon}
+                        />
+                        <Text style={styles.errorText}>
+                            {error || t('artifacts.error')}
+                        </Text>
+                </View>
+            </View>
+        );
+    }
+
+    return (
+        <>
+            <Stack.Screen 
+                options={{
+                    headerShown: true,
+                    headerTitle: artifact.title || 'Untitled',
+                    headerRight: () => (
+                        <View style={{ flexDirection: 'row' }}>
+                            <Pressable
+                                onPress={handleEdit}
+                                style={{ padding: 8, marginRight: 8 }}
+                                disabled={isDeleting}
+                            >
+                                <Ionicons name="create-outline" size={22} color={styles.title.color} />
+                            </Pressable>
+                            <Pressable
+                                onPress={handleDelete}
+                                style={{ padding: 8 }}
+                                disabled={isDeleting}
+                            >
+                                <Ionicons 
+                                    name="trash-outline" 
+                                    size={22} 
+                                    color={isDeleting ? styles.meta.color : styles.errorIcon.color} 
+                                />
+                            </Pressable>
+                        </View>
+                    ),
+                }}
+            />
+            <View style={styles.container}>
+                <ScrollView 
+                    style={styles.scrollView}
+                    contentContainerStyle={[
+                        styles.contentContainer,
+                        { maxWidth: layout.maxWidth, alignSelf: 'center', width: '100%' }
+                    ]}
+                >
+                    <View style={styles.titleContainer}>
+                        <Text 
+                            style={[
+                                styles.title,
+                                !artifact.title && styles.untitledTitle
+                            ]}
+                        >
+                            {artifact.title || 'Untitled'}
+                        </Text>
+                        <Text style={styles.meta}>
+                            {formattedDate}
+                        </Text>
+                    </View>
+
+                    <View style={styles.bodyContainer}>
+                        {artifact.body ? (
+                            <MarkdownView markdown={artifact.body} />
+                        ) : (
+                            <Text style={styles.emptyBody}>
+                                No content
+                            </Text>
+                        )}
+                    </View>
+                </ScrollView>
+            </View>
+        </>
+    );
+}