nastech-app 1.0.0

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

@@ -0,0 +1,274 @@
+import React from 'react';
+import { View, ActivityIndicator } from 'react-native';
+import { Text } from '@/components/StyledText';
+import { Ionicons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import { Item } from '@/components/Item';
+import { ItemGroup } from '@/components/ItemGroup';
+import { ItemList } from '@/components/ItemList';
+import { Switch } from '@/components/Switch';
+import { UsageBar } from '@/components/usage/UsageBar';
+import { useSettingMutable, useEntitlement, useLocalSetting, useLocalSettingMutable, useSetting } from '@/sync/storage';
+import { useAuth } from '@/auth/AuthContext';
+import { findLanguageByCode, getLanguageDisplayName, LANGUAGES } from '@/constants/Languages';
+import { fetchVoiceUsage, type VoiceUsageResponse } from '@/sync/apiVoice';
+import { t } from '@/text';
+import { Modal } from '@/modal';
+import { sync } from '@/sync/sync';
+import { trackPaywallButtonClicked } from '@/track';
+import { getVoiceExperimentStatus, getVoiceUpsellVariantLabel } from '@/realtime/voiceExperiment';
+import { getVoiceLocalCounters, resetVoiceLocalCounters } from '@/sync/persistence';
+
+function formatVoiceTime(totalSeconds: number): string {
+    const mins = Math.floor(totalSeconds / 60);
+    const secs = totalSeconds % 60;
+    return `${mins}m ${secs}s`;
+}
+
+export default React.memo(function VoiceSettingsScreen() {
+    const router = useRouter();
+    const auth = useAuth();
+    const [voiceAssistantLanguage] = useSettingMutable('voiceAssistantLanguage');
+    const [voiceCustomAgentId, setVoiceCustomAgentId] = useSettingMutable('voiceCustomAgentId');
+    const [voiceBypassToken, setVoiceBypassToken] = useSettingMutable('voiceBypassToken');
+    const [voiceUpsellOverride, setVoiceUpsellOverride] = useLocalSettingMutable('voiceUpsellOverride');
+    const experiments = useSetting('experiments');
+    const devModeEnabled = __DEV__ || useLocalSetting('devModeEnabled');
+
+    const hasPro = useEntitlement('pro');
+
+    const [usage, setUsage] = React.useState<VoiceUsageResponse | null>(null);
+    const [usageLoading, setUsageLoading] = React.useState(true);
+    const [voiceLocalCounters, setVoiceLocalCounters] = React.useState(() => getVoiceLocalCounters());
+
+    React.useEffect(() => {
+        fetchVoiceUsage()
+            .then(setUsage)
+            .catch(() => {})
+            .finally(() => setUsageLoading(false));
+    }, []);
+
+    // Find current language or default to first option
+    const currentLanguage = findLanguageByCode(voiceAssistantLanguage) || LANGUAGES[0];
+
+    const handleSupportUs = React.useCallback(async () => {
+        trackPaywallButtonClicked('voluntary_support');
+        await sync.presentPaywall('voluntary_support');
+    }, []);
+
+    const handleCustomAgentId = React.useCallback(async () => {
+        const value = await Modal.prompt(
+            t('settingsVoice.customAgentId'),
+            t('settingsVoice.customAgentIdDescription'),
+            {
+                defaultValue: voiceCustomAgentId ?? '',
+                placeholder: t('settingsVoice.customAgentIdPlaceholder'),
+            }
+        );
+        if (value !== null) {
+            const trimmed = value.trim() || null;
+            setVoiceCustomAgentId(trimmed);
+            // Auto-toggle bypass when setting/clearing agent ID
+            setVoiceBypassToken(trimmed !== null);
+        }
+    }, [voiceCustomAgentId, setVoiceCustomAgentId, setVoiceBypassToken]);
+
+    const handleVoiceExperimentOverride = React.useCallback(() => {
+        Modal.alert(
+            'Voice Experiment Override',
+            'Select a local override for the voice-upsell experiment.',
+            [
+                { text: 'No Override', onPress: () => setVoiceUpsellOverride(null) },
+                { text: 'Control', onPress: () => setVoiceUpsellOverride('control') },
+                { text: 'Soft Paywall', onPress: () => setVoiceUpsellOverride('show-paywall-before-first-voice-chat') },
+                { text: 'Onboarding + Upsell', onPress: () => setVoiceUpsellOverride('voice-onboarding-and-upsell') },
+            ],
+        );
+    }, [setVoiceUpsellOverride]);
+
+    const handleResetVoiceCounters = React.useCallback(async () => {
+        const confirmed = await Modal.confirm(
+            'Reset Voice Counters',
+            'Clear local voice counters used for onboarding and soft-paywall behavior on this device?',
+            {
+                confirmText: 'Reset',
+                destructive: true,
+            },
+        );
+        if (!confirmed) {
+            return;
+        }
+
+        resetVoiceLocalCounters();
+        setVoiceLocalCounters(getVoiceLocalCounters());
+    }, []);
+
+    const voiceExperimentStatus = React.useMemo(() => {
+        return getVoiceExperimentStatus({
+            voiceBypassToken,
+            voiceCustomAgentId,
+            voiceUpsellOverride,
+            voiceUpsellOverrideEnabled: devModeEnabled,
+        });
+    }, [devModeEnabled, voiceBypassToken, voiceCustomAgentId, voiceUpsellOverride]);
+
+    const developerExperimentSubtitle = React.useMemo(() => {
+        const upsellVariant = getVoiceUpsellVariantLabel(voiceExperimentStatus.upsellVariant);
+        const gatingMode = voiceExperimentStatus.gatingMode === 'direct-byo-agent'
+            ? 'direct BYO agent bypass'
+            : 'NasTech server gate';
+
+        return [
+            `voice-upsell: ${upsellVariant}`,
+            `source: ${voiceExperimentStatus.upsellVariantSource}`,
+            `gate: ${gatingMode}`,
+            `experiments setting: ${experiments ? 'on' : 'off'}`,
+        ].join('\n');
+    }, [experiments, voiceExperimentStatus]);
+
+    const developerOverrideLabel = React.useMemo(() => {
+        if (!voiceUpsellOverride) {
+            return 'No Override';
+        }
+        return getVoiceUpsellVariantLabel(voiceUpsellOverride);
+    }, [voiceUpsellOverride]);
+
+    const developerCountersSubtitle = React.useMemo(() => {
+        return [
+            `soft paywall shown: ${voiceLocalCounters.softPaywallShownCount}`,
+            `onboarding prompt loads: ${voiceLocalCounters.onboardingPromptLoadCount}`,
+            `voice messages: ${voiceLocalCounters.voiceMessageCount}`,
+        ].join('\n');
+    }, [voiceLocalCounters]);
+
+    return (
+        <ItemList style={{ paddingTop: 0 }}>
+            {/* Voice Usage */}
+            {usageLoading ? (
+                <View style={{ paddingVertical: 24, alignItems: 'center' }}>
+                    <ActivityIndicator />
+                </View>
+            ) : usage ? (
+                <ItemGroup
+                    title={t('settingsVoice.usageTitle')}
+                    footer={t('settingsVoice.usageFooter')}
+                >
+                    <View style={{ paddingHorizontal: 16, paddingVertical: 8 }}>
+                        <UsageBar
+                            label={t('settingsVoice.usageLabel')}
+                            value={usage.usedSeconds}
+                            maxValue={usage.limitSeconds}
+                            color={usage.usedSeconds >= usage.limitSeconds ? '#FF3B30' : '#007AFF'}
+                        />
+                        <Text style={{ fontSize: 13, color: '#8E8E93', marginTop: 4 }}>
+                            {formatVoiceTime(usage.usedSeconds)} / {formatVoiceTime(usage.limitSeconds)}
+                        </Text>
+                        <UsageBar
+                            label={t('settingsVoice.conversationsLabel')}
+                            value={usage.conversationCount}
+                            maxValue={usage.conversationLimit}
+                            color={usage.conversationCount >= usage.conversationLimit ? '#FF3B30' : '#007AFF'}
+                        />
+                        <Text style={{ fontSize: 13, color: '#8E8E93', marginTop: 4 }}>
+                            {usage.conversationCount} / {usage.conversationLimit}
+                        </Text>
+                    </View>
+                </ItemGroup>
+            ) : null}
+
+            {/* Support / Upgrade */}
+            {!hasPro && (
+                <ItemGroup>
+                    <Item
+                        title={t('settingsVoice.supportTitle')}
+                        subtitle={t('settingsVoice.supportSubtitle')}
+                        icon={<Ionicons name="heart-outline" size={29} color="#FF2D55" />}
+                        onPress={handleSupportUs}
+                    />
+                </ItemGroup>
+            )}
+
+            {devModeEnabled && (
+                <ItemGroup
+                    title="Developer"
+                    footer="Developer-only diagnostics and local override controls for the current voice rollout. The paid voice gate runs through NasTech server unless Direct Connection and a custom ElevenLabs agent are both enabled."
+                >
+                    <Item
+                        title="Voice Experiment Override"
+                        subtitle="Simple local override for the voice-upsell flag"
+                        detail={developerOverrideLabel}
+                        icon={<Ionicons name="options-outline" size={29} color="#007AFF" />}
+                        onPress={handleVoiceExperimentOverride}
+                    />
+                    <Item
+                        title="Voice Experiment Status"
+                        subtitle={developerExperimentSubtitle}
+                        subtitleLines={0}
+                        icon={<Ionicons name="flask-outline" size={29} color="#5856D6" />}
+                        showChevron={false}
+                        copy={developerExperimentSubtitle}
+                    />
+                    <Item
+                        title="Reset Voice Counters"
+                        subtitle={developerCountersSubtitle}
+                        subtitleLines={0}
+                        icon={<Ionicons name="refresh-outline" size={29} color="#FF9500" />}
+                        onPress={handleResetVoiceCounters}
+                    />
+                </ItemGroup>
+            )}
+
+            {/* Language Settings */}
+            <ItemGroup
+                title={t('settingsVoice.languageTitle')}
+                footer={t('settingsVoice.languageDescription')}
+            >
+                <Item
+                    title={t('settingsVoice.preferredLanguage')}
+                    subtitle={t('settingsVoice.preferredLanguageSubtitle')}
+                    icon={<Ionicons name="language-outline" size={29} color="#007AFF" />}
+                    detail={getLanguageDisplayName(currentLanguage)}
+                    onPress={() => router.push('/settings/voice/language')}
+                />
+            </ItemGroup>
+
+            {/* Bring Your Own Agent */}
+            <ItemGroup
+                title={t('settingsVoice.byoTitle')}
+                footer={t('settingsVoice.byoDescription')}
+            >
+                <Item
+                    title={t('settingsVoice.customAgentId')}
+                    subtitle={voiceCustomAgentId ?? t('settingsVoice.customAgentIdNotSet')}
+                    icon={<Ionicons name="key-outline" size={29} color="#FF9500" />}
+                    onPress={handleCustomAgentId}
+                />
+                <Item
+                    title={t('settingsVoice.bypassToken')}
+                    subtitle={t('settingsVoice.bypassTokenSubtitle')}
+                    icon={<Ionicons name="flash-outline" size={29} color="#FF3B30" />}
+                    rightElement={
+                        <Switch
+                            value={voiceBypassToken}
+                            onValueChange={setVoiceBypassToken}
+                        />
+                    }
+                />
+            </ItemGroup>
+
+            {/* Prompt Guide — shown when custom agent is configured */}
+            {voiceCustomAgentId && (
+                <ItemGroup
+                    title={t('settingsVoice.promptGuideTitle')}
+                    footer={t('settingsVoice.promptGuideDescription')}
+                >
+                    <Item
+                        title={t('settingsVoice.customAgentId')}
+                        subtitle={voiceCustomAgentId}
+                        copy={voiceCustomAgentId}
+                    />
+                </ItemGroup>
+            )}
+        </ItemList>
+    );
+});

package/sources/app/(app)/terminal/connect.tsx

@@ -0,0 +1,241 @@
+import React, { useState, useEffect } from 'react';
+import { View, Platform } from 'react-native';
+import { Text } from '@/components/StyledText';
+import { useRouter } from 'expo-router';
+import { Typography } from '@/constants/Typography';
+import { RoundButton } from '@/components/RoundButton';
+import { useConnectTerminal } from '@/hooks/useConnectTerminal';
+import { Ionicons } from '@expo/vector-icons';
+import { ItemList } from '@/components/ItemList';
+import { ItemGroup } from '@/components/ItemGroup';
+import { Item } from '@/components/Item';
+import { t } from '@/text';
+
+export default function TerminalConnectScreen() {
+    const router = useRouter();
+    const [publicKey, setPublicKey] = useState<string | null>(null);
+    const [hashProcessed, setHashProcessed] = useState(false);
+    const { processAuthUrl, isLoading } = useConnectTerminal({
+        onSuccess: () => {
+            router.back();
+        }
+    });
+
+    // Extract key from hash on web platform
+    useEffect(() => {
+        if (Platform.OS === 'web' && typeof window !== 'undefined' && !hashProcessed) {
+            const hash = window.location.hash;
+            if (hash.startsWith('#key=')) {
+                const key = hash.substring(5); // Remove '#key='
+                setPublicKey(key);
+                
+                // Clear the hash from URL to prevent exposure in browser history
+                window.history.replaceState(null, '', window.location.pathname + window.location.search);
+                setHashProcessed(true);
+            } else {
+                setHashProcessed(true);
+            }
+        }
+    }, [hashProcessed]);
+
+    const handleConnect = async () => {
+        if (publicKey) {
+            // Convert the hash key format to the expected nastech:// URL format
+            const authUrl = `nastech://terminal?${publicKey}`;
+            await processAuthUrl(authUrl);
+        }
+    };
+
+    const handleReject = () => {
+        router.back();
+    };
+
+    // Show placeholder for mobile platforms
+    if (Platform.OS !== 'web') {
+        return (
+            <ItemList>
+                <ItemGroup>
+                    <View style={{ 
+                        alignItems: 'center',
+                        paddingVertical: 32,
+                        paddingHorizontal: 16
+                    }}>
+                        <Ionicons 
+                            name="laptop-outline" 
+                            size={64} 
+                            color="#8E8E93" 
+                            style={{ marginBottom: 16 }} 
+                        />
+                        <Text style={{ 
+                            ...Typography.default('semiBold'), 
+                            fontSize: 18, 
+                            textAlign: 'center',
+                            marginBottom: 12 
+                        }}>
+                            {t('terminal.webBrowserRequired')}
+                        </Text>
+                        <Text style={{ 
+                            ...Typography.default(), 
+                            fontSize: 14, 
+                            color: '#666', 
+                            textAlign: 'center',
+                            lineHeight: 20 
+                        }}>
+                            {t('terminal.webBrowserRequiredDescription')}
+                        </Text>
+                    </View>
+                </ItemGroup>
+            </ItemList>
+        );
+    }
+
+    // Show loading state while processing hash
+    if (!hashProcessed) {
+        return (
+            <ItemList>
+                <ItemGroup>
+                    <View style={{ 
+                        alignItems: 'center',
+                        paddingVertical: 32,
+                        paddingHorizontal: 16
+                    }}>
+                        <Text style={{ ...Typography.default(), color: '#666' }}>
+                            {t('terminal.processingConnection')}
+                        </Text>
+                    </View>
+                </ItemGroup>
+            </ItemList>
+        );
+    }
+
+    // Show error if no key found
+    if (!publicKey) {
+        return (
+            <ItemList>
+                <ItemGroup>
+                    <View style={{ 
+                        alignItems: 'center',
+                        paddingVertical: 32,
+                        paddingHorizontal: 16
+                    }}>
+                        <Ionicons 
+                            name="warning-outline" 
+                            size={48} 
+                            color="#FF3B30" 
+                            style={{ marginBottom: 16 }} 
+                        />
+                        <Text style={{ 
+                            ...Typography.default('semiBold'), 
+                            fontSize: 16, 
+                            color: '#FF3B30',
+                            textAlign: 'center',
+                            marginBottom: 8 
+                        }}>
+                            {t('terminal.invalidConnectionLink')}
+                        </Text>
+                        <Text style={{ 
+                            ...Typography.default(), 
+                            fontSize: 14, 
+                            color: '#666', 
+                            textAlign: 'center',
+                            lineHeight: 20 
+                        }}>
+                            {t('terminal.invalidConnectionLinkDescription')}
+                        </Text>
+                    </View>
+                </ItemGroup>
+            </ItemList>
+        );
+    }
+
+    // Show confirmation screen for valid connection
+    return (
+        <ItemList>
+            {/* Connection Request Header */}
+            <ItemGroup>
+                <View style={{ 
+                    alignItems: 'center',
+                    paddingVertical: 24,
+                    paddingHorizontal: 16
+                }}>
+                    <Ionicons 
+                        name="terminal-outline" 
+                        size={48} 
+                        color="#007AFF" 
+                        style={{ marginBottom: 16 }} 
+                    />
+                    <Text style={{ 
+                        ...Typography.default('semiBold'), 
+                        fontSize: 20, 
+                        textAlign: 'center',
+                        marginBottom: 12
+                    }}>
+                        {t('terminal.connectTerminal')}
+                    </Text>
+                    <Text style={{ 
+                        ...Typography.default(), 
+                        fontSize: 14, 
+                        color: '#666', 
+                        textAlign: 'center',
+                        lineHeight: 20 
+                    }}>
+                        {t('terminal.terminalRequestDescription')}
+                    </Text>
+                </View>
+            </ItemGroup>
+
+            {/* Connection Details */}
+            <ItemGroup title={t('terminal.connectionDetails')}>
+                <Item
+                    title={t('terminal.publicKey')}
+                    detail={`${publicKey.substring(0, 12)}...`}
+                    icon={<Ionicons name="key-outline" size={29} color="#007AFF" />}
+                    showChevron={false}
+                />
+                <Item
+                    title={t('terminal.encryption')}
+                    detail={t('terminal.endToEndEncrypted')}
+                    icon={<Ionicons name="lock-closed-outline" size={29} color="#34C759" />}
+                    showChevron={false}
+                />
+            </ItemGroup>
+
+            {/* Action Buttons */}
+            <ItemGroup>
+                <View style={{ 
+                    paddingHorizontal: 16,
+                    paddingVertical: 16,
+                    gap: 12 
+                }}>
+                    <RoundButton
+                        title={isLoading ? t('terminal.connecting') : t('terminal.acceptConnection')}
+                        onPress={handleConnect}
+                        size="large"
+                        disabled={isLoading}
+                        loading={isLoading}
+                    />
+                    <RoundButton
+                        title={t('terminal.reject')}
+                        onPress={handleReject}
+                        size="large"
+                        display="inverted"
+                        disabled={isLoading}
+                    />
+                </View>
+            </ItemGroup>
+
+            {/* Security Notice */}
+            <ItemGroup 
+                title={t('terminal.security')}
+                footer={t('terminal.securityFooter')}
+            >
+                <Item
+                    title={t('terminal.clientSideProcessing')}
+                    subtitle={t('terminal.linkProcessedLocally')}
+                    icon={<Ionicons name="shield-checkmark-outline" size={29} color="#34C759" />}
+                    showChevron={false}
+                />
+            </ItemGroup>
+        </ItemList>
+    );
+}