nastech-app 1.0.0

package/sources/app/(app)/dev/index.tsx

@@ -0,0 +1,400 @@
+import * as React from 'react';
+import { ActivityIndicator } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { Item } from '@/components/Item';
+import { ItemGroup } from '@/components/ItemGroup';
+import { ItemList } from '@/components/ItemList';
+import { useRouter } from 'expo-router';
+import Constants from 'expo-constants';
+import * as Application from 'expo-application';
+import { useLocalSettingMutable, useSocketStatus } from '@/sync/storage';
+import { Modal } from '@/modal';
+import { sync } from '@/sync/sync';
+import { getServerUrl, setServerUrl, validateServerUrl, getLogServerUrl, setLogServerUrl } from '@/sync/serverConfig';
+import { Switch } from '@/components/Switch';
+import { useUnistyles } from 'react-native-unistyles';
+import { setLastViewedTitle } from '@/changelog';
+
+export default function DevScreen() {
+    const router = useRouter();
+    const [debugMode, setDebugMode] = useLocalSettingMutable('debugMode');
+    const [verboseLogging, setVerboseLogging] = useLocalSettingMutable('verboseLogging');
+    const [consoleLoggingEnabled, setConsoleLoggingEnabled] = useLocalSettingMutable('consoleLoggingEnabled');
+    const socketStatus = useSocketStatus();
+    const anonymousId = sync.encryption!.anonID;
+    const { theme } = useUnistyles();
+
+    const handleEditServerUrl = async () => {
+        const currentUrl = getServerUrl();
+
+        const newUrl = await Modal.prompt(
+            'Edit API Endpoint',
+            'Enter the server URL:',
+            {
+                defaultValue: currentUrl,
+                confirmText: 'Save'
+            }
+        );
+
+        if (newUrl && newUrl !== currentUrl) {
+            const validation = validateServerUrl(newUrl);
+            if (validation.valid) {
+                setServerUrl(newUrl);
+                Modal.alert('Success', 'Server URL updated. Please restart the app for changes to take effect.');
+            } else {
+                Modal.alert('Invalid URL', validation.error || 'Please enter a valid URL');
+            }
+        }
+    };
+
+    const handleEditLogServerUrl = async () => {
+        const currentUrl = getLogServerUrl() || '';
+
+        const newUrl = await Modal.prompt(
+            'Remote Log Server',
+            'Sends ALL console output as unencrypted plaintext over HTTP to this URL. Use your Mac\'s local IP (e.g. http://192.168.1.5:8787). Run "yarn app-logs" on your Mac to receive. Clear to disable.',
+            {
+                defaultValue: currentUrl,
+                confirmText: 'Save'
+            }
+        );
+
+        if (newUrl !== undefined && newUrl !== currentUrl) {
+            if (!newUrl || !newUrl.trim()) {
+                setLogServerUrl(null);
+                Modal.alert('Success', 'Remote logging disabled. Restart app for changes to take effect.');
+            } else {
+                const validation = validateServerUrl(newUrl);
+                if (validation.valid) {
+                    setLogServerUrl(newUrl);
+                    Modal.alert('Success', 'Log server URL updated. Restart app for changes to take effect.');
+                } else {
+                    Modal.alert('Invalid URL', validation.error || 'Please enter a valid URL');
+                }
+            }
+        }
+    };
+
+    const handleClearCache = async () => {
+        const confirmed = await Modal.confirm(
+            'Clear Cache',
+            'Are you sure you want to clear all cached data?',
+            { confirmText: 'Clear', destructive: true }
+        );
+        if (confirmed) {
+            console.log('Cache cleared');
+            Modal.alert('Success', 'Cache has been cleared');
+        }
+    };
+
+    // Helper function to format time ago
+    const formatTimeAgo = (timestamp: number | null): string => {
+        if (!timestamp) return '';
+
+        const now = Date.now();
+        const diff = now - timestamp;
+        const seconds = Math.floor(diff / 1000);
+        const minutes = Math.floor(seconds / 60);
+        const hours = Math.floor(minutes / 60);
+        const days = Math.floor(hours / 24);
+
+        if (seconds < 10) return 'Just now';
+        if (seconds < 60) return `${seconds}s ago`;
+        if (minutes < 60) return `${minutes}m ago`;
+        if (hours < 24) return `${hours}h ago`;
+        if (days < 7) return `${days}d ago`;
+
+        return new Date(timestamp).toLocaleDateString();
+    };
+
+    // Helper function to get socket status subtitle
+    const getSocketStatusSubtitle = (): string => {
+        const { status, lastConnectedAt, lastDisconnectedAt } = socketStatus;
+
+        if (status === 'connected' && lastConnectedAt) {
+            return `Connected ${formatTimeAgo(lastConnectedAt)}`;
+        } else if ((status === 'disconnected' || status === 'error') && lastDisconnectedAt) {
+            return `Last connected ${formatTimeAgo(lastDisconnectedAt)}`;
+        } else if (status === 'connecting') {
+            return 'Connecting to server...';
+        }
+
+        return 'No connection info';
+    };
+
+    // Socket status indicator component
+    const SocketStatusIndicator = () => {
+        switch (socketStatus.status) {
+            case 'connected':
+                return <Ionicons name="checkmark-circle" size={22} color="#34C759" />;
+            case 'connecting':
+                return <ActivityIndicator size="small" color={theme.colors.textSecondary} />;
+            case 'error':
+                return <Ionicons name="close-circle" size={22} color="#FF3B30" />;
+            case 'disconnected':
+                return <Ionicons name="close-circle" size={22} color="#FF9500" />;
+            default:
+                return <Ionicons name="help-circle" size={22} color="#8E8E93" />;
+        }
+    };
+
+    return (
+        <ItemList>
+            {/* App Information */}
+            <ItemGroup title="App Information">
+                <Item
+                    title="Version"
+                    detail={Constants.expoConfig?.version || '1.0.0'}
+                />
+                <Item
+                    title="Build Number"
+                    detail={Application.nativeBuildVersion || 'N/A'}
+                />
+                <Item
+                    title="SDK Version"
+                    detail={Constants.expoConfig?.sdkVersion || 'Unknown'}
+                />
+                <Item
+                    title="Platform"
+                    detail={`${Constants.platform?.ios ? 'iOS' : 'Android'} ${Constants.systemVersion || ''}`}
+                />
+                <Item
+                    title="Anonymous ID"
+                    detail={anonymousId}
+                />
+            </ItemGroup>
+
+            {/* Debug Options */}
+            <ItemGroup title="Debug Options">
+                <Item
+                    title="Debug Mode"
+                    rightElement={
+                        <Switch
+                            value={debugMode}
+                            onValueChange={setDebugMode}
+                        />
+                    }
+                    showChevron={false}
+                />
+                <Item
+                    title="Console Output"
+                    subtitle="Enable console output in production builds"
+                    rightElement={
+                        <Switch
+                            value={consoleLoggingEnabled}
+                            onValueChange={setConsoleLoggingEnabled}
+                        />
+                    }
+                    showChevron={false}
+                />
+                <Item
+                    title="Verbose Logging"
+                    subtitle="Log all network requests and responses"
+                    rightElement={
+                        <Switch
+                            value={verboseLogging}
+                            onValueChange={setVerboseLogging}
+                        />
+                    }
+                    showChevron={false}
+                />
+                <Item
+                    title="View Logs"
+                    icon={<Ionicons name="document-text-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/dev/logs')}
+                />
+            </ItemGroup>
+
+            {/* Component Demos */}
+            <ItemGroup title="Component Demos">
+                <Item
+                    title="Device Info"
+                    subtitle="Safe area insets and device parameters"
+                    icon={<Ionicons name="phone-portrait-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/dev/device-info')}
+                />
+                <Item
+                    title="List Components"
+                    subtitle="Demo of Item, ItemGroup, and ItemList"
+                    icon={<Ionicons name="list-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/dev/list-demo')}
+                />
+                <Item
+                    title="Typography"
+                    subtitle="All typography styles"
+                    icon={<Ionicons name="text-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/dev/typography')}
+                />
+                <Item
+                    title="Colors"
+                    subtitle="Color palette and themes"
+                    icon={<Ionicons name="color-palette-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/dev/colors')}
+                />
+                <Item
+                    title="Message Demos"
+                    subtitle="Various message types and components"
+                    icon={<Ionicons name="chatbubbles-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/dev/messages-demo')}
+                />
+                <Item
+                    title="Inverted List Test"
+                    subtitle="Test inverted FlatList with keyboard"
+                    icon={<Ionicons name="swap-vertical-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/dev/inverted-list')}
+                />
+                <Item
+                    title="Tool Views"
+                    subtitle="Tool call visualization components"
+                    icon={<Ionicons name="construct-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/dev/tools2')}
+                />
+                <Item
+                    title="Shimmer View"
+                    subtitle="Shimmer loading effects with masks"
+                    icon={<Ionicons name="sparkles-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/dev/shimmer-demo')}
+                />
+                <Item
+                    title="Multi Text Input"
+                    subtitle="Auto-growing multiline text input"
+                    icon={<Ionicons name="create-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/dev/multi-text-input')}
+                />
+                <Item
+                    title="Input Styles"
+                    subtitle="10+ different input field style variants"
+                    icon={<Ionicons name="color-palette-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/dev/input-styles')}
+                />
+                <Item
+                    title="Modal System"
+                    subtitle="Alert, confirm, and custom modals"
+                    icon={<Ionicons name="albums-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/dev/modal-demo')}
+                />
+                <Item
+                    title="Unit Tests"
+                    subtitle="Run tests in the app environment"
+                    icon={<Ionicons name="flask-outline" size={28} color="#34C759" />}
+                    onPress={() => router.push('/dev/tests')}
+                />
+                <Item
+                    title="Unistyles Demo"
+                    subtitle="React Native Unistyles features and capabilities"
+                    icon={<Ionicons name="brush-outline" size={28} color="#FF6B6B" />}
+                    onPress={() => router.push('/dev/unistyles-demo')}
+                />
+                <Item
+                    title="QR Code Test"
+                    subtitle="Test QR code generation with different parameters"
+                    icon={<Ionicons name="qr-code-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/dev/qr-test')}
+                />
+                <Item
+                    title="Session Composer"
+                    subtitle="New session creation screen layout"
+                    icon={<Ionicons name="add-circle-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/dev/session-composer' as any)}
+                />
+            </ItemGroup>
+
+            {/* Test Features */}
+            <ItemGroup title="Test Features" footer="These actions may affect app stability">
+                <Item
+                    title="Claude OAuth Test"
+                    subtitle="Test Claude authentication flow"
+                    icon={<Ionicons name="key-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/settings/connect/claude')}
+                />
+                <Item
+                    title="Test Crash"
+                    subtitle="Trigger a test crash"
+                    destructive={true}
+                    icon={<Ionicons name="warning-outline" size={28} color="#FF3B30" />}
+                    onPress={async () => {
+                        const confirmed = await Modal.confirm(
+                            'Test Crash',
+                            'This will crash the app. Continue?',
+                            { confirmText: 'Crash', destructive: true }
+                        );
+                        if (confirmed) {
+                            throw new Error('Test crash triggered from dev menu');
+                        }
+                    }}
+                />
+                <Item
+                    title="Clear Cache"
+                    subtitle="Remove all cached data"
+                    icon={<Ionicons name="trash-outline" size={28} color="#FF9500" />}
+                    onPress={handleClearCache}
+                />
+                <Item
+                    title="Reset Changelog"
+                    subtitle="Show 'What's New' banner again"
+                    icon={<Ionicons name="sparkles-outline" size={28} color="#007AFF" />}
+                    onPress={() => {
+                        setLastViewedTitle('');
+                        Modal.alert('Done', 'Changelog reset. Restart app to see the banner.');
+                    }}
+                />
+                <Item
+                    title="Reset App State"
+                    subtitle="Clear all user data and preferences"
+                    destructive={true}
+                    icon={<Ionicons name="refresh-outline" size={28} color="#FF3B30" />}
+                    onPress={async () => {
+                        const confirmed = await Modal.confirm(
+                            'Reset App',
+                            'This will delete all data. Are you sure?',
+                            { confirmText: 'Reset', destructive: true }
+                        );
+                        if (confirmed) {
+                            console.log('App state reset');
+                        }
+                    }}
+                />
+            </ItemGroup>
+
+            {/* System */}
+            <ItemGroup title="System">
+                <Item
+                    title="Purchases"
+                    subtitle="View subscriptions and entitlements"
+                    icon={<Ionicons name="card-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/dev/purchases')}
+                />
+                <Item
+                    title="Expo Constants"
+                    subtitle="View expoConfig, manifests, and system constants"
+                    icon={<Ionicons name="information-circle-outline" size={28} color="#007AFF" />}
+                    onPress={() => router.push('/dev/expo-constants')}
+                />
+            </ItemGroup>
+
+            {/* Network */}
+            <ItemGroup title="Network">
+                <Item
+                    title="API Endpoint"
+                    detail={getServerUrl()}
+                    onPress={handleEditServerUrl}
+                    detailStyle={{ flex: 1, textAlign: 'right', minWidth: '70%' }}
+                />
+                <Item
+                    title="Log Server"
+                    subtitle="Sends unencrypted console logs over HTTP"
+                    detail={getLogServerUrl() || 'Off'}
+                    onPress={handleEditLogServerUrl}
+                    detailStyle={{ flex: 1, textAlign: 'right', minWidth: '50%' }}
+                />
+                <Item
+                    title="Socket.IO Status"
+                    subtitle={getSocketStatusSubtitle()}
+                    detail={socketStatus.status}
+                    rightElement={<SocketStatusIndicator />}
+                    showChevron={false}
+                />
+            </ItemGroup>
+        </ItemList>
+    );
+}