nastech-app 1.0.0

package/sources/app/(app)/settings/agents.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { Ionicons } from '@expo/vector-icons';
+import { useUnistyles } from 'react-native-unistyles';
+import { Item } from '@/components/Item';
+import { ItemGroup } from '@/components/ItemGroup';
+import { ItemList } from '@/components/ItemList';
+import {
+    getEffortLevelsForModel,
+    getHardcodedModelModes,
+    getHardcodedPermissionModes,
+    type ModeOption,
+} from '@/components/modelModeOptions';
+import { useSettingMutable } from '@/sync/storage';
+import {
+    agentKeys,
+    getCodeAgentDefaults,
+    getAgentDefaultOverrideValue,
+    hasAgentDefaultOverride,
+    resolveAgentDefaultConfig,
+    setAgentDefaultOverride,
+    type AgentDefaultField,
+    type AgentKey,
+} from '@/sync/agentDefaults';
+import { t } from '@/text';
+
+type ExpandedField = {
+    agent: AgentKey;
+    field: AgentDefaultField;
+} | null;
+
+type FieldConfig = {
+    field: AgentDefaultField;
+    title: string;
+    icon: keyof typeof Ionicons.glyphMap;
+    options: ModeOption[];
+    codeDefaultKey: string | null;
+};
+
+const agentLabels: Record<AgentKey, string> = {
+    claude: 'Claude Code',
+    codex: 'Codex',
+    gemini: 'Gemini',
+    openclaw: 'OpenClaw',
+};
+
+function optionName(options: ModeOption[], key: string | null | undefined): string {
+    if (!key) return 'none';
+    return options.find((option) => option.key === key)?.name ?? key;
+}
+
+export default function AgentDefaultsSettingsScreen() {
+    const { theme } = useUnistyles();
+    const [agentDefaultOverrides, setAgentDefaultOverrides] = useSettingMutable('agentDefaultOverrides');
+    const [expanded, setExpanded] = React.useState<ExpandedField>(null);
+
+    const updateOverride = React.useCallback((
+        agent: AgentKey,
+        field: AgentDefaultField,
+        value: string | null,
+    ) => {
+        setAgentDefaultOverrides(setAgentDefaultOverride(agentDefaultOverrides, agent, field, value));
+    }, [agentDefaultOverrides, setAgentDefaultOverrides]);
+
+    const renderOption = (
+        agent: AgentKey,
+        field: AgentDefaultField,
+        title: string,
+        subtitle: string | undefined,
+        selected: boolean,
+        value: string | null,
+    ) => (
+        <Item
+            key={`${agent}-${field}-${value ?? 'default'}`}
+            title={title}
+            subtitle={subtitle}
+            onPress={() => updateOverride(agent, field, value)}
+            showChevron={false}
+            rightElement={selected ? (
+                <Ionicons name="checkmark" size={20} color={theme.colors.header.tint} />
+            ) : undefined}
+        />
+    );
+
+    const renderField = (agent: AgentKey, config: FieldConfig) => {
+        const effectiveDefaults = resolveAgentDefaultConfig(agentDefaultOverrides, agent);
+        const effectiveValue = effectiveDefaults[config.field];
+        const overrideValue = getAgentDefaultOverrideValue(agentDefaultOverrides, agent, config.field);
+        const hasOverride = hasAgentDefaultOverride(agentDefaultOverrides, agent, config.field);
+        const isExpanded = expanded?.agent === agent && expanded.field === config.field;
+        const detail = hasOverride
+            ? optionName(config.options, overrideValue)
+            : `Default (${optionName(config.options, effectiveValue)})`;
+        const codeDefaultLabel = optionName(config.options, config.codeDefaultKey);
+
+        return (
+            <React.Fragment key={`${agent}-${config.field}`}>
+                <Item
+                    title={config.title}
+                    detail={detail}
+                    icon={<Ionicons name={config.icon} size={29} color="#5856D6" />}
+                    onPress={() => setExpanded(isExpanded ? null : { agent, field: config.field })}
+                />
+                {isExpanded && (
+                    <>
+                        {renderOption(
+                            agent,
+                            config.field,
+                            'Use code default',
+                            codeDefaultLabel ? codeDefaultLabel : undefined,
+                            !hasOverride,
+                            null,
+                        )}
+                        {config.options.map((option) => renderOption(
+                            agent,
+                            config.field,
+                            option.name,
+                            option.description ?? undefined,
+                            hasOverride && overrideValue === option.key,
+                            option.key,
+                        ))}
+                    </>
+                )}
+            </React.Fragment>
+        );
+    };
+
+    return (
+        <ItemList style={{ paddingTop: 0 }}>
+            <ItemGroup
+                title="Agent Defaults"
+            >
+                <Item
+                    title="Clear Overrides"
+                    subtitle="Return every agent to code defaults"
+                    icon={<Ionicons name="refresh-outline" size={29} color="#FF9500" />}
+                    onPress={() => setAgentDefaultOverrides({})}
+                    disabled={Object.keys(agentDefaultOverrides).length === 0}
+                    showChevron={false}
+                />
+            </ItemGroup>
+
+            {agentKeys.map((agent) => {
+                const codeDefaults = getCodeAgentDefaults(agent);
+                const effectiveDefaults = resolveAgentDefaultConfig(agentDefaultOverrides, agent);
+                const permissionOptions = getHardcodedPermissionModes(agent, t);
+                const modelOptions = getHardcodedModelModes(agent, t).filter((option) => option.key !== 'default');
+                const effortOptions = getEffortLevelsForModel(agent, effectiveDefaults.modelMode);
+                const fields: FieldConfig[] = [
+                    {
+                        field: 'permissionMode',
+                        title: 'Permission',
+                        icon: 'shield-checkmark-outline',
+                        options: permissionOptions,
+                        codeDefaultKey: codeDefaults.permissionMode,
+                    },
+                    ...(modelOptions.length > 0 ? [{
+                        field: 'modelMode' as const,
+                        title: 'Model',
+                        icon: 'hardware-chip-outline' as const,
+                        options: modelOptions,
+                        codeDefaultKey: codeDefaults.modelMode,
+                    }] : []),
+                    ...(effortOptions.length > 0 ? [{
+                        field: 'effortLevel' as const,
+                        title: 'Effort',
+                        icon: 'speedometer-outline' as const,
+                        options: effortOptions,
+                        codeDefaultKey: codeDefaults.effortLevel,
+                    }] : []),
+                ];
+
+                return (
+                    <ItemGroup key={agent} title={agentLabels[agent]}>
+                        {fields.map((field) => renderField(agent, field))}
+                    </ItemGroup>
+                );
+            })}
+        </ItemList>
+    );
+}

package/sources/app/(app)/settings/appearance.tsx

@@ -0,0 +1,259 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Item } from '@/components/Item';
+import { ItemGroup } from '@/components/ItemGroup';
+import { ItemList } from '@/components/ItemList';
+import { useSettingMutable, useLocalSettingMutable } from '@/sync/storage';
+import { useRouter } from 'expo-router';
+import * as Localization from 'expo-localization';
+import { useUnistyles, UnistylesRuntime } from 'react-native-unistyles';
+import { Switch } from '@/components/Switch';
+import { Appearance } from 'react-native';
+import * as SystemUI from 'expo-system-ui';
+import { darkTheme, lightTheme } from '@/theme';
+import { t, getLanguageNativeName, SUPPORTED_LANGUAGES } from '@/text';
+
+// Define known avatar styles for this version of the app
+type KnownAvatarStyle = 'pixelated' | 'gradient' | 'brutalist';
+
+const isKnownAvatarStyle = (style: string): style is KnownAvatarStyle => {
+    return style === 'pixelated' || style === 'gradient' || style === 'brutalist';
+};
+
+export default function AppearanceSettingsScreen() {
+    const { theme } = useUnistyles();
+    const router = useRouter();
+    const [viewInline, setViewInline] = useSettingMutable('viewInline');
+    const [expandTodos, setExpandTodos] = useSettingMutable('expandTodos');
+    const [showLineNumbers, setShowLineNumbers] = useSettingMutable('showLineNumbers');
+    const [showLineNumbersInToolViews, setShowLineNumbersInToolViews] = useSettingMutable('showLineNumbersInToolViews');
+    const [wrapLinesInDiffs, setWrapLinesInDiffs] = useSettingMutable('wrapLinesInDiffs');
+    const [diffStyle, setDiffStyle] = useSettingMutable('diffStyle');
+    const [alwaysShowContextSize, setAlwaysShowContextSize] = useSettingMutable('alwaysShowContextSize');
+    const [avatarStyle, setAvatarStyle] = useSettingMutable('avatarStyle');
+    const [showFlavorIcons, setShowFlavorIcons] = useSettingMutable('showFlavorIcons');
+    const [themePreference, setThemePreference] = useLocalSettingMutable('themePreference');
+    const [preferredLanguage] = useSettingMutable('preferredLanguage');
+    
+    // Ensure we have a valid style for display, defaulting to gradient for unknown values
+    const displayStyle: KnownAvatarStyle = isKnownAvatarStyle(avatarStyle) ? avatarStyle : 'gradient';
+    
+    // Language display
+    const getLanguageDisplayText = () => {
+        if (preferredLanguage === null) {
+            const deviceLocale = Localization.getLocales()?.[0]?.languageTag ?? 'en-US';
+            const deviceLanguage = deviceLocale.split('-')[0].toLowerCase();
+            const detectedLanguageName = deviceLanguage in SUPPORTED_LANGUAGES ? 
+                                        getLanguageNativeName(deviceLanguage as keyof typeof SUPPORTED_LANGUAGES) : 
+                                        getLanguageNativeName('en');
+            return `${t('settingsLanguage.automatic')} (${detectedLanguageName})`;
+        } else if (preferredLanguage && preferredLanguage in SUPPORTED_LANGUAGES) {
+            return getLanguageNativeName(preferredLanguage as keyof typeof SUPPORTED_LANGUAGES);
+        }
+        return t('settingsLanguage.automatic');
+    };
+    return (
+        <ItemList style={{ paddingTop: 0 }}>
+
+            {/* Theme Settings */}
+            <ItemGroup title={t('settingsAppearance.theme')} footer={t('settingsAppearance.themeDescription')}>
+                <Item
+                    title={t('settings.appearance')}
+                    subtitle={themePreference === 'adaptive' ? t('settingsAppearance.themeDescriptions.adaptive') : themePreference === 'light' ? t('settingsAppearance.themeDescriptions.light') : t('settingsAppearance.themeDescriptions.dark')}
+                    icon={<Ionicons name="contrast-outline" size={29} color={theme.colors.status.connecting} />}
+                    detail={themePreference === 'adaptive' ? t('settingsAppearance.themeOptions.adaptive') : themePreference === 'light' ? t('settingsAppearance.themeOptions.light') : t('settingsAppearance.themeOptions.dark')}
+                    onPress={() => {
+                        const currentIndex = themePreference === 'adaptive' ? 0 : themePreference === 'light' ? 1 : 2;
+                        const nextIndex = (currentIndex + 1) % 3;
+                        const nextTheme = nextIndex === 0 ? 'adaptive' : nextIndex === 1 ? 'light' : 'dark';
+                        
+                        // Update the setting
+                        setThemePreference(nextTheme);
+                        
+                        // Apply the theme change immediately
+                        if (nextTheme === 'adaptive') {
+                            // Enable adaptive themes and set to system theme
+                            UnistylesRuntime.setAdaptiveThemes(true);
+                            const systemTheme = Appearance.getColorScheme();
+                            const color = systemTheme === 'dark' ? darkTheme.colors.groupped.background : lightTheme.colors.groupped.background;
+                            UnistylesRuntime.setRootViewBackgroundColor(color);
+                            SystemUI.setBackgroundColorAsync(color);
+                        } else {
+                            // Disable adaptive themes and set explicit theme
+                            UnistylesRuntime.setAdaptiveThemes(false);
+                            UnistylesRuntime.setTheme(nextTheme);
+                            const color = nextTheme === 'dark' ? darkTheme.colors.groupped.background : lightTheme.colors.groupped.background;
+                            UnistylesRuntime.setRootViewBackgroundColor(color);
+                            SystemUI.setBackgroundColorAsync(color);
+                        }
+                    }}
+                />
+            </ItemGroup>
+
+            {/* Language Settings */}
+            <ItemGroup title={t('settingsLanguage.title')} footer={t('settingsLanguage.description')}>
+                <Item
+                    title={t('settingsLanguage.currentLanguage')}
+                    icon={<Ionicons name="language-outline" size={29} color="#007AFF" />}
+                    detail={getLanguageDisplayText()}
+                    onPress={() => router.push('/settings/language')}
+                />
+            </ItemGroup>
+
+            {/* Text Settings */}
+            {/* <ItemGroup title="Text" footer="Adjust text size and font preferences">
+                <Item
+                    title="Text Size"
+                    subtitle="Make text larger or smaller"
+                    icon={<Ionicons name="text-outline" size={29} color="#FF9500" />}
+                    detail="Default"
+                    onPress={() => { }}
+                    disabled
+                />
+                <Item
+                    title="Font"
+                    subtitle="Choose your preferred font"
+                    icon={<Ionicons name="text-outline" size={29} color="#FF9500" />}
+                    detail="System"
+                    onPress={() => { }}
+                    disabled
+                />
+            </ItemGroup> */}
+
+            {/* Display Settings */}
+            <ItemGroup title={t('settingsAppearance.display')} footer={t('settingsAppearance.displayDescription')}>
+                <Item
+                    title={t('settingsAppearance.inlineToolCalls')}
+                    subtitle={t('settingsAppearance.inlineToolCallsDescription')}
+                    icon={<Ionicons name="code-slash-outline" size={29} color="#5856D6" />}
+                    rightElement={
+                        <Switch
+                            value={viewInline}
+                            onValueChange={setViewInline}
+                        />
+                    }
+                />
+                <Item
+                    title={t('settingsAppearance.expandTodoLists')}
+                    subtitle={t('settingsAppearance.expandTodoListsDescription')}
+                    icon={<Ionicons name="checkmark-done-outline" size={29} color="#5856D6" />}
+                    rightElement={
+                        <Switch
+                            value={expandTodos}
+                            onValueChange={setExpandTodos}
+                        />
+                    }
+                />
+                <Item
+                    title={t('settingsAppearance.showLineNumbersInDiffs')}
+                    subtitle={t('settingsAppearance.showLineNumbersInDiffsDescription')}
+                    icon={<Ionicons name="list-outline" size={29} color="#5856D6" />}
+                    rightElement={
+                        <Switch
+                            value={showLineNumbers}
+                            onValueChange={setShowLineNumbers}
+                        />
+                    }
+                />
+                <Item
+                    title={t('settingsAppearance.showLineNumbersInToolViews')}
+                    subtitle={t('settingsAppearance.showLineNumbersInToolViewsDescription')}
+                    icon={<Ionicons name="code-working-outline" size={29} color="#5856D6" />}
+                    rightElement={
+                        <Switch
+                            value={showLineNumbersInToolViews}
+                            onValueChange={setShowLineNumbersInToolViews}
+                        />
+                    }
+                />
+                <Item
+                    title={t('settingsAppearance.wrapLinesInDiffs')}
+                    subtitle={t('settingsAppearance.wrapLinesInDiffsDescription')}
+                    icon={<Ionicons name="return-down-forward-outline" size={29} color="#5856D6" />}
+                    rightElement={
+                        <Switch
+                            value={wrapLinesInDiffs}
+                            onValueChange={setWrapLinesInDiffs}
+                        />
+                    }
+                />
+                <Item
+                    title={t('settingsAppearance.diffStyle')}
+                    subtitle={t('settingsAppearance.diffStyleDescription')}
+                    icon={<Ionicons name="git-compare-outline" size={29} color="#5856D6" />}
+                    detail={diffStyle === 'split' ? t('settingsAppearance.diffStyleOptions.split') : t('settingsAppearance.diffStyleOptions.unified')}
+                    onPress={() => setDiffStyle(diffStyle === 'unified' ? 'split' : 'unified')}
+                />
+                <Item
+                    title={t('settingsAppearance.alwaysShowContextSize')}
+                    subtitle={t('settingsAppearance.alwaysShowContextSizeDescription')}
+                    icon={<Ionicons name="analytics-outline" size={29} color="#5856D6" />}
+                    rightElement={
+                        <Switch
+                            value={alwaysShowContextSize}
+                            onValueChange={setAlwaysShowContextSize}
+                        />
+                    }
+                />
+                <Item
+                    title={t('settingsAppearance.avatarStyle')}
+                    subtitle={t('settingsAppearance.avatarStyleDescription')}
+                    icon={<Ionicons name="person-circle-outline" size={29} color="#5856D6" />}
+                    detail={displayStyle === 'pixelated' ? t('settingsAppearance.avatarOptions.pixelated') : displayStyle === 'brutalist' ? t('settingsAppearance.avatarOptions.brutalist') : t('settingsAppearance.avatarOptions.gradient')}
+                    onPress={() => {
+                        const currentIndex = displayStyle === 'pixelated' ? 0 : displayStyle === 'gradient' ? 1 : 2;
+                        const nextIndex = (currentIndex + 1) % 3;
+                        const nextStyle = nextIndex === 0 ? 'pixelated' : nextIndex === 1 ? 'gradient' : 'brutalist';
+                        setAvatarStyle(nextStyle);
+                    }}
+                />
+                <Item
+                    title={t('settingsAppearance.showFlavorIcons')}
+                    subtitle={t('settingsAppearance.showFlavorIconsDescription')}
+                    icon={<Ionicons name="apps-outline" size={29} color="#5856D6" />}
+                    rightElement={
+                        <Switch
+                            value={showFlavorIcons}
+                            onValueChange={setShowFlavorIcons}
+                        />
+                    }
+                />
+                {/* <Item
+                    title="Compact Mode"
+                    subtitle="Reduce spacing between elements"
+                    icon={<Ionicons name="contract-outline" size={29} color="#5856D6" />}
+                    disabled
+                    rightElement={
+                        <Switch
+                            value={false}
+                            disabled
+                        />
+                    }
+                />
+                <Item
+                    title="Show Avatars"
+                    subtitle="Display user and assistant avatars"
+                    icon={<Ionicons name="person-circle-outline" size={29} color="#5856D6" />}
+                    disabled
+                    rightElement={
+                        <Switch
+                            value={true}
+                            disabled
+                        />
+                    }
+                /> */}
+            </ItemGroup>
+
+            {/* Colors */}
+            {/* <ItemGroup title="Colors" footer="Customize accent colors and highlights">
+                <Item
+                    title="Accent Color"
+                    subtitle="Choose your accent color"
+                    icon={<Ionicons name="color-palette-outline" size={29} color="#FF3B30" />}
+                    detail="Blue"
+                    onPress={() => { }}
+                    disabled
+                />
+            </ItemGroup> */}
+        </ItemList>
+    );
+}

package/sources/app/(app)/settings/connect/claude.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import { useRouter } from 'expo-router';
+import { OAuthView } from '@/components/OAuthView';
+import { buildAuthorizationUrl, ClaudeAuthTokens, exchangeCodeForTokens } from '@/utils/oauth';
+import { Modal } from '@/modal';
+import { t } from '@/text';
+import { StatusBar } from 'expo-status-bar';
+import { useAuth } from '@/auth/AuthContext';
+import { connectService } from '@/sync/apiServices';
+import { sync } from '@/sync/sync';
+import { View } from 'react-native';
+import { Text } from '@/components/StyledText';
+import { StyleSheet } from 'react-native-unistyles';
+import { Platform } from 'react-native';
+
+export default function ClaudeOAuth() {
+    // const router = useRouter();
+    // const auth = useAuth();
+
+    // const handleSuccess = async (tokens: ClaudeAuthTokens) => {
+    //     try {
+    //         // Send tokens to server which will update profile.connectedServices
+    //         // Pass the raw token response to the server
+    //         await connectService(auth.credentials!, 'anthropic', tokens);
+    //         await sync.refreshProfile();
+
+    //         // The server will handle updating the profile's connectedServices array
+    //         // and it will sync back to the client automatically
+    //         Modal.alert(
+    //             t('common.success'),
+    //             t('settings.claudeAuthSuccess'),
+    //             [
+    //                 {
+    //                     text: t('common.ok'),
+    //                     onPress: () => router.back(),
+    //                 }
+    //             ]
+    //         );
+    //     } catch (error) {
+    //         console.error('Failed to connect Claude account:', error);
+    //         Modal.alert(
+    //             t('common.error'),
+    //             t('errors.connectServiceFailed', { service: 'Claude' })
+    //         );
+    //     }
+    // };
+
+    return (
+        <>
+            <OAuthViewUnsupported name="Claude" command="nastech connect claude" />
+            {/* <OAuthView
+                name="Claude"
+                command="nastech connect claude"
+                backgroundColor={'#1F1E1C'}
+                foregroundColor={'#FFFFFF'}
+                config={{
+                    authUrl: (pkce, state, _redirectUri) =>
+                        buildAuthorizationUrl(pkce.challenge, state),
+                    tokenExchange: exchangeCodeForTokens,
+                    onSuccess: handleSuccess,
+                }}
+            /> */}
+        </>
+    );
+}
+
+const OAuthViewUnsupported = React.memo((props: {
+    name: string;
+    command?: string;
+}) => {
+    const command = props.command || `nastech connect ${props.name.toLowerCase()}`;
+
+    return (
+        <View style={styles.unsupportedContainer}>
+            <Text style={styles.unsupportedTitle}>Connect {props.name}</Text>
+            <Text style={styles.unsupportedText}>
+                Run the following command in your terminal:
+            </Text>
+            <View style={styles.terminalContainer}>
+                <Text style={styles.terminalCommand}>
+                    <Text style={styles.terminalPrompt}>$ </Text>
+                    {command}
+                </Text>
+            </View>
+        </View>
+    );
+});
+
+const styles = StyleSheet.create((theme) => ({
+    container: {
+        flex: 1,
+        backgroundColor: theme.colors.surface,
+    },
+    webview: {
+        flex: 1,
+        backgroundColor: 'rgba(255, 255, 255, 0)',
+    },
+    loadingContainer: {
+        ...StyleSheet.absoluteFillObject,
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: theme.colors.surface,
+    },
+    loadingOverlay: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: theme.colors.surface,
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 1000,
+    },
+    loadingText: {
+        marginTop: 16,
+        fontSize: 16,
+        color: theme.colors.text,
+    },
+    errorContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+        backgroundColor: theme.colors.surface,
+    },
+    errorText: {
+        fontSize: 16,
+        color: theme.colors.textDestructive,
+        textAlign: 'center',
+        marginBottom: 20,
+    },
+    retryButton: {
+        paddingHorizontal: 20,
+        paddingVertical: 10,
+        backgroundColor: '#007AFF',
+        borderRadius: 8,
+    },
+    retryButtonText: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    unsupportedContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+        backgroundColor: theme.colors.surface,
+    },
+    unsupportedTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: theme.colors.text,
+        marginBottom: 20,
+    },
+    unsupportedText: {
+        fontSize: 14,
+        color: theme.colors.textSecondary,
+        textAlign: 'center',
+        marginBottom: 24,
+    },
+    terminalContainer: {
+        backgroundColor: '#1e1e1e',
+        borderRadius: 8,
+        padding: 16,
+        minWidth: 280,
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.1)',
+    },
+    terminalPrompt: {
+        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontSize: 14,
+        color: '#00ff00',
+    },
+    terminalCommand: {
+        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontSize: 14,
+        color: '#ffffff',
+    },
+}));