nastech-app 1.0.0

package/sources/components/usage/UsagePanel.tsx

@@ -0,0 +1,283 @@
+import React, { useState, useEffect } from 'react';
+import { View, ActivityIndicator, ScrollView, Pressable } from 'react-native';
+import { Text } from '@/components/StyledText';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { useAuth } from '@/auth/AuthContext';
+import { Item } from '@/components/Item';
+import { ItemGroup } from '@/components/ItemGroup';
+import { UsageChart } from './UsageChart';
+import { UsageBar } from './UsageBar';
+import { getUsageForPeriod, calculateTotals, UsageDataPoint } from '@/sync/apiUsage';
+import { Ionicons } from '@expo/vector-icons';
+import { NasTechError } from '@/utils/errors';
+import { t } from '@/text';
+
+type TimePeriod = 'today' | '7days' | '30days';
+
+const styles = StyleSheet.create((theme) => ({
+    container: {
+        flex: 1,
+    },
+    periodSelector: {
+        flexDirection: 'row',
+        padding: 16,
+        gap: 8,
+    },
+    periodButton: {
+        flex: 1,
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        borderRadius: 8,
+        backgroundColor: theme.colors.surface,
+        alignItems: 'center',
+    },
+    periodButtonActive: {
+        backgroundColor: '#007AFF',
+    },
+    periodText: {
+        fontSize: 14,
+        color: theme.colors.text,
+        fontWeight: '500',
+    },
+    periodTextActive: {
+        color: '#FFFFFF',
+    },
+    statsContainer: {
+        padding: 16,
+        backgroundColor: theme.colors.surface,
+        margin: 16,
+        borderRadius: 12,
+        gap: 12,
+    },
+    statRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    statLabel: {
+        fontSize: 16,
+        color: theme.colors.text,
+    },
+    statValue: {
+        fontSize: 20,
+        fontWeight: '700',
+        color: theme.colors.text,
+    },
+    chartSection: {
+        marginTop: 16,
+    },
+    sectionTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: theme.colors.text,
+        marginHorizontal: 16,
+        marginBottom: 8,
+    },
+    loadingContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 32,
+    },
+    errorContainer: {
+        padding: 32,
+        alignItems: 'center',
+    },
+    errorText: {
+        fontSize: 14,
+        color: theme.colors.status.error,
+        textAlign: 'center',
+    },
+    metricToggle: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        gap: 16,
+        padding: 16,
+    },
+    metricButton: {
+        paddingVertical: 6,
+        paddingHorizontal: 16,
+        borderRadius: 16,
+        backgroundColor: theme.colors.divider,
+    },
+    metricButtonActive: {
+        backgroundColor: '#007AFF',
+    },
+    metricText: {
+        fontSize: 14,
+        color: theme.colors.textSecondary,
+        fontWeight: '500',
+    },
+    metricTextActive: {
+        color: '#FFFFFF',
+    }
+}));
+
+export const UsagePanel: React.FC<{ sessionId?: string }> = ({ sessionId }) => {
+    const { theme } = useUnistyles();
+    const auth = useAuth();
+    const [period, setPeriod] = useState<TimePeriod>('7days');
+    const [chartMetric, setChartMetric] = useState<'tokens' | 'cost'>('tokens');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [usageData, setUsageData] = useState<UsageDataPoint[]>([]);
+    const [totals, setTotals] = useState({
+        totalTokens: 0,
+        totalCost: 0,
+        tokensByModel: {} as Record<string, number>,
+        costByModel: {} as Record<string, number>
+    });
+    
+    useEffect(() => {
+        loadUsageData();
+    }, [period, sessionId]);
+    
+    const loadUsageData = async () => {
+        if (!auth.credentials) {
+            setError('Not authenticated');
+            return;
+        }
+        
+        setLoading(true);
+        setError(null);
+        
+        try {
+            const response = await getUsageForPeriod(auth.credentials, period, sessionId);
+            setUsageData(response.usage || []);
+            setTotals(calculateTotals(response.usage || []));
+        } catch (err) {
+            console.error('Failed to load usage data:', err);
+            if (err instanceof NasTechError) {
+                setError(err.message);
+            } else {
+                setError('Failed to load usage data');
+            }
+        } finally {
+            setLoading(false);
+        }
+    };
+    
+    const formatTokens = (tokens: number): string => {
+        if (tokens >= 1000000) {
+            return `${(tokens / 1000000).toFixed(2)}M`;
+        } else if (tokens >= 1000) {
+            return `${(tokens / 1000).toFixed(1)}K`;
+        }
+        return tokens.toLocaleString();
+    };
+    
+    const formatCost = (cost: number): string => {
+        return `$${cost.toFixed(4)}`;
+    };
+    
+    const periodLabels: Record<TimePeriod, string> = {
+        'today': t('usage.today'),
+        '7days': t('usage.last7Days'),
+        '30days': t('usage.last30Days')
+    };
+    
+    if (loading) {
+        return (
+            <View style={styles.loadingContainer}>
+                <ActivityIndicator size="large" color="#007AFF" />
+            </View>
+        );
+    }
+    
+    if (error) {
+        return (
+            <View style={styles.errorContainer}>
+                <Ionicons name="alert-circle-outline" size={48} color={theme.colors.status.error} />
+                <Text style={styles.errorText}>{error}</Text>
+            </View>
+        );
+    }
+    
+    // Get top models by usage
+    const topModels = Object.entries(totals.tokensByModel)
+        .sort(([, a], [, b]) => b - a)
+        .slice(0, 5);
+    
+    const maxModelTokens = Math.max(...Object.values(totals.tokensByModel), 1);
+    
+    return (
+        <ScrollView style={styles.container}>
+            {/* Period Selector */}
+            <View style={styles.periodSelector}>
+                {(['today', '7days', '30days'] as TimePeriod[]).map((p) => (
+                    <Pressable
+                        key={p}
+                        style={[styles.periodButton, period === p && styles.periodButtonActive]}
+                        onPress={() => setPeriod(p)}
+                    >
+                        <Text style={[styles.periodText, period === p && styles.periodTextActive]}>
+                            {periodLabels[p]}
+                        </Text>
+                    </Pressable>
+                ))}
+            </View>
+            
+            {/* Summary Stats */}
+            <View style={styles.statsContainer}>
+                <View style={styles.statRow}>
+                    <Text style={styles.statLabel}>{t('usage.totalTokens')}</Text>
+                    <Text style={styles.statValue}>{formatTokens(totals.totalTokens)}</Text>
+                </View>
+                <View style={styles.statRow}>
+                    <Text style={styles.statLabel}>{t('usage.totalCost')}</Text>
+                    <Text style={styles.statValue}>{formatCost(totals.totalCost)}</Text>
+                </View>
+            </View>
+            
+            {/* Usage Chart */}
+            {usageData.length > 0 && (
+                <View style={styles.chartSection}>
+                    <Text style={styles.sectionTitle}>{t('usage.usageOverTime')}</Text>
+                    
+                    {/* Metric Toggle */}
+                    <View style={styles.metricToggle}>
+                        <Pressable
+                            style={[styles.metricButton, chartMetric === 'tokens' && styles.metricButtonActive]}
+                            onPress={() => setChartMetric('tokens')}
+                        >
+                            <Text style={[styles.metricText, chartMetric === 'tokens' && styles.metricTextActive]}>
+                                {t('usage.tokens')}
+                            </Text>
+                        </Pressable>
+                        <Pressable
+                            style={[styles.metricButton, chartMetric === 'cost' && styles.metricButtonActive]}
+                            onPress={() => setChartMetric('cost')}
+                        >
+                            <Text style={[styles.metricText, chartMetric === 'cost' && styles.metricTextActive]}>
+                                {t('usage.cost')}
+                            </Text>
+                        </Pressable>
+                    </View>
+                    
+                    <UsageChart 
+                        data={usageData}
+                        metric={chartMetric}
+                        height={180}
+                    />
+                </View>
+            )}
+            
+            {/* Usage by Model */}
+            {topModels.length > 0 && (
+                <ItemGroup title={t('usage.byModel')}>
+                    <View style={{ padding: 16 }}>
+                        {topModels.map(([model, tokens]) => (
+                            <UsageBar
+                                key={model}
+                                label={model}
+                                value={tokens}
+                                maxValue={maxModelTokens}
+                                color="#007AFF"
+                            />
+                        ))}
+                    </View>
+                </ItemGroup>
+            )}
+        </ScrollView>
+    );
+};

package/sources/components/web/FaviconPermissionIndicator.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import { storage } from '@/sync/storage';
+import { updateFaviconWithNotification, resetFavicon } from '@/utils/web/faviconGenerator';
+
+/**
+ * Component that monitors all sessions and updates the favicon
+ * when any online session has pending permissions
+ */
+export const FaviconPermissionIndicator = React.memo(() => {
+    if (Platform.OS !== 'web' || typeof window === 'undefined' || typeof document === 'undefined') {
+        return null;
+    }
+
+    const hasOnlineSessionWithPermissions = storage((state) => {
+        return Object.values(state.sessions).some(session => {
+            // Use centralized presence logic - only "online" sessions matter
+            const isOnline = session.presence === 'online';
+
+            const hasPermissions = session.agentState?.requests && 
+                Object.keys(session.agentState.requests).length > 0;
+
+            return isOnline && hasPermissions;
+        });
+    });
+
+    React.useLayoutEffect(() => {
+        if (hasOnlineSessionWithPermissions) {
+            updateFaviconWithNotification();
+        } else {
+            resetFavicon();
+        }
+    }, [hasOnlineSessionWithPermissions]);
+
+    React.useLayoutEffect(() => {
+        return () => {
+            resetFavicon();
+        };
+    }, []);
+
+    return null;
+});
+
+FaviconPermissionIndicator.displayName = 'FaviconPermissionIndicator';

package/sources/config.ts

@@ -0,0 +1,3 @@
+import { loadAppConfig } from "./sync/appConfig";
+
+export const config = loadAppConfig();

package/sources/constants/Languages.ts

@@ -0,0 +1,116 @@
+// ElevenLabs supported language codes
+export type ElevenLabsLanguage = "en" | "ja" | "zh" | "de" | "hi" | "fr" | "ko" | 
+    "pt" | "pt-br" | "it" | "es" | "id" | "nl" | "tr" | "pl" | "sv" | "bg" | 
+    "ro" | "ar" | "cs" | "el" | "fi" | "ms" | "da" | "ta" | "uk" | "ru" | 
+    "hu" | "hr" | "sk" | "no" | "vi";
+
+// Language type definition
+export interface Language {
+    code: string | null; // null for autodetect
+    name: string;
+    nativeName: string;
+    region?: string;
+    elevenLabsCode?: ElevenLabsLanguage; // ElevenLabs language code mapping
+}
+
+// Comprehensive language list with locale codes, names, and regions
+// First option is autodetect (null value)
+export const LANGUAGES: Language[] = [
+    { code: null, name: 'Auto-detect', nativeName: 'Auto-detect' },
+    { code: 'en-US', name: 'English', nativeName: 'English', region: 'United States', elevenLabsCode: 'en' },
+    { code: 'en-GB', name: 'English', nativeName: 'English', region: 'United Kingdom', elevenLabsCode: 'en' },
+    { code: 'en-AU', name: 'English', nativeName: 'English', region: 'Australia', elevenLabsCode: 'en' },
+    { code: 'en-CA', name: 'English', nativeName: 'English', region: 'Canada', elevenLabsCode: 'en' },
+    { code: 'es-ES', name: 'Spanish', nativeName: 'Español', region: 'Spain', elevenLabsCode: 'es' },
+    { code: 'es-MX', name: 'Spanish', nativeName: 'Español', region: 'Mexico', elevenLabsCode: 'es' },
+    { code: 'es-AR', name: 'Spanish', nativeName: 'Español', region: 'Argentina', elevenLabsCode: 'es' },
+    { code: 'fr-FR', name: 'French', nativeName: 'Français', region: 'France', elevenLabsCode: 'fr' },
+    { code: 'fr-CA', name: 'French', nativeName: 'Français', region: 'Canada', elevenLabsCode: 'fr' },
+    { code: 'de-DE', name: 'German', nativeName: 'Deutsch', region: 'Germany', elevenLabsCode: 'de' },
+    { code: 'de-AT', name: 'German', nativeName: 'Deutsch', region: 'Austria', elevenLabsCode: 'de' },
+    { code: 'it-IT', name: 'Italian', nativeName: 'Italiano', elevenLabsCode: 'it' },
+    { code: 'pt-BR', name: 'Portuguese', nativeName: 'Português', region: 'Brazil', elevenLabsCode: 'pt-br' },
+    { code: 'pt-PT', name: 'Portuguese', nativeName: 'Português', region: 'Portugal', elevenLabsCode: 'pt' },
+    { code: 'ru-RU', name: 'Russian', nativeName: 'Русский', elevenLabsCode: 'ru' },
+    { code: 'zh-CN', name: 'Chinese', nativeName: '中文', region: 'Simplified', elevenLabsCode: 'zh' },
+    { code: 'zh-TW', name: 'Chinese', nativeName: '中文', region: 'Traditional', elevenLabsCode: 'zh' },
+    { code: 'ja-JP', name: 'Japanese', nativeName: '日本語', elevenLabsCode: 'ja' },
+    { code: 'ko-KR', name: 'Korean', nativeName: '한국어', elevenLabsCode: 'ko' },
+    { code: 'ar-SA', name: 'Arabic', nativeName: 'العربية', elevenLabsCode: 'ar' },
+    { code: 'hi-IN', name: 'Hindi', nativeName: 'हिन्दी', elevenLabsCode: 'hi' },
+    { code: 'nl-NL', name: 'Dutch', nativeName: 'Nederlands', elevenLabsCode: 'nl' },
+    { code: 'sv-SE', name: 'Swedish', nativeName: 'Svenska', elevenLabsCode: 'sv' },
+    { code: 'no-NO', name: 'Norwegian', nativeName: 'Norsk', elevenLabsCode: 'no' },
+    { code: 'da-DK', name: 'Danish', nativeName: 'Dansk', elevenLabsCode: 'da' },
+    { code: 'fi-FI', name: 'Finnish', nativeName: 'Suomi', elevenLabsCode: 'fi' },
+    { code: 'pl-PL', name: 'Polish', nativeName: 'Polski', elevenLabsCode: 'pl' },
+    { code: 'tr-TR', name: 'Turkish', nativeName: 'Türkçe', elevenLabsCode: 'tr' },
+    { code: 'he-IL', name: 'Hebrew', nativeName: 'עברית' }, // Not supported by ElevenLabs
+    { code: 'th-TH', name: 'Thai', nativeName: 'ไทย' }, // Not supported by ElevenLabs
+    { code: 'vi-VN', name: 'Vietnamese', nativeName: 'Tiếng Việt', elevenLabsCode: 'vi' },
+    { code: 'id-ID', name: 'Indonesian', nativeName: 'Bahasa Indonesia', elevenLabsCode: 'id' },
+    { code: 'ms-MY', name: 'Malay', nativeName: 'Bahasa Melayu', elevenLabsCode: 'ms' },
+    { code: 'uk-UA', name: 'Ukrainian', nativeName: 'Українська', elevenLabsCode: 'uk' },
+    { code: 'cs-CZ', name: 'Czech', nativeName: 'Čeština', elevenLabsCode: 'cs' },
+    { code: 'hu-HU', name: 'Hungarian', nativeName: 'Magyar', elevenLabsCode: 'hu' },
+    { code: 'ro-RO', name: 'Romanian', nativeName: 'Română', elevenLabsCode: 'ro' },
+    { code: 'bg-BG', name: 'Bulgarian', nativeName: 'Български', elevenLabsCode: 'bg' },
+    { code: 'el-GR', name: 'Greek', nativeName: 'Ελληνικά', elevenLabsCode: 'el' },
+    { code: 'hr-HR', name: 'Croatian', nativeName: 'Hrvatski', elevenLabsCode: 'hr' },
+    { code: 'sk-SK', name: 'Slovak', nativeName: 'Slovenčina', elevenLabsCode: 'sk' },
+    { code: 'sl-SI', name: 'Slovenian', nativeName: 'Slovenščina' }, // Not supported by ElevenLabs
+    { code: 'et-EE', name: 'Estonian', nativeName: 'Eesti' }, // Not supported by ElevenLabs
+    { code: 'lv-LV', name: 'Latvian', nativeName: 'Latviešu' }, // Not supported by ElevenLabs
+    { code: 'lt-LT', name: 'Lithuanian', nativeName: 'Lietuvių' }, // Not supported by ElevenLabs
+];
+
+/**
+ * Format display name for a language
+ */
+export const getLanguageDisplayName = (language: Language) => {
+    const parts = [];
+    
+    if (language.name !== language.nativeName) {
+        parts.push(`${language.name} (${language.nativeName})`);
+    } else {
+        parts.push(language.name);
+    }
+    
+    if (language.region) {
+        parts.push(language.region);
+    }
+    
+    return parts.join(' - ');
+};
+
+/**
+ * Find a language by its code (including null for autodetect)
+ */
+export const findLanguageByCode = (code: string | null): Language | undefined => {
+    return LANGUAGES.find(lang => lang.code === code);
+};
+
+/**
+ * Get the ElevenLabs language code for a given language
+ */
+export const getElevenLabsCode = (language: Language): ElevenLabsLanguage | undefined => {
+    return language.elevenLabsCode;
+};
+
+/**
+ * Get ElevenLabs code from user's language preference (handles null/autodetect)
+ */
+export const getElevenLabsCodeFromPreference = (
+    languageCode: string | null
+): ElevenLabsLanguage | undefined => {
+    if (!languageCode) return undefined; // Auto-detect case
+    const language = findLanguageByCode(languageCode);
+    return language?.elevenLabsCode;
+};
+
+/**
+ * Get all languages that support ElevenLabs
+ */
+export const getElevenLabsSupportedLanguages = (): Language[] => {
+    return LANGUAGES.filter(lang => lang.elevenLabsCode !== undefined);
+};

package/sources/constants/Typography.ts

@@ -0,0 +1,116 @@
+import { Platform } from 'react-native';
+
+/**
+ * Typography system for NasTech app
+ * 
+ * Default typography: IBM Plex Sans
+ * Monospace typography: IBM Plex Mono  
+ * Logo typography: Bricolage Grotesque (specific use only)
+ * 
+ * Usage Examples:
+ * 
+ * // Default typography (IBM Plex Sans)
+ * <Text style={{ fontSize: 16, ...Typography.default() }}>Regular text</Text>
+ * <Text style={{ fontSize: 16, ...Typography.default('italic') }}>Italic text</Text>
+ * <Text style={{ fontSize: 16, ...Typography.default('semiBold') }}>Semi-bold text</Text>
+ * 
+ * // Monospace typography (IBM Plex Mono)
+ * <Text style={{ fontSize: 14, ...Typography.mono() }}>Code text</Text>
+ * <Text style={{ fontSize: 14, ...Typography.mono('italic') }}>Italic code</Text>
+ * <Text style={{ fontSize: 14, ...Typography.mono('semiBold') }}>Bold code</Text>
+ * 
+ * // Logo typography (Bricolage Grotesque - use sparingly!)
+ * // Note: Don't add fontWeight as this font is already bold
+ * <Text style={{ fontSize: 28, ...Typography.logo() }}>Logo Text</Text>
+ * 
+ * // Alternative direct usage
+ * <Text style={{ fontSize: 16, fontFamily: getDefaultFont('semiBold') }}>Direct usage</Text>
+ * <Text style={{ fontSize: 14, fontFamily: getMonoFont() }}>Direct mono usage</Text>
+ * <Text style={{ fontSize: 28, fontFamily: getLogoFont() }}>Direct logo usage</Text>
+ */
+
+// Font family constants
+export const FontFamilies = {
+  // IBM Plex Sans (default typography)
+  default: {
+    regular: 'IBMPlexSans-Regular',
+    italic: 'IBMPlexSans-Italic', 
+    semiBold: 'IBMPlexSans-SemiBold',
+  },
+  
+  // IBM Plex Mono (default monospace)
+  mono: {
+    regular: 'IBMPlexMono-Regular',
+    italic: 'IBMPlexMono-Italic',
+    semiBold: 'IBMPlexMono-SemiBold',
+  },
+  
+  // Bricolage Grotesque (logo/special use only)
+  logo: {
+    bold: 'BricolageGrotesque-Bold',
+  },
+  
+  // Legacy fonts (keep for backward compatibility)
+  legacy: {
+    spaceMono: 'SpaceMono',
+    systemMono: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+  }
+};
+
+// Helper functions for easy access to font families
+export const getDefaultFont = (weight: 'regular' | 'italic' | 'semiBold' = 'regular') => {
+  return FontFamilies.default[weight];
+};
+
+export const getMonoFont = (weight: 'regular' | 'italic' | 'semiBold' = 'regular') => {
+  return FontFamilies.mono[weight];
+};
+
+export const getLogoFont = () => {
+  return FontFamilies.logo.bold;
+};
+
+// Font weight mappings for the font families
+export const FontWeights = {
+  regular: '400',
+  semiBold: '600', 
+  bold: '700',
+} as const;
+
+// Style utilities for easy inline usage
+export const Typography = {
+  // Default font styles (IBM Plex Sans)
+  default: (weight: 'regular' | 'italic' | 'semiBold' = 'regular') => ({
+    fontFamily: getDefaultFont(weight),
+  }),
+  
+  // Monospace font styles (IBM Plex Mono)
+  mono: (weight: 'regular' | 'italic' | 'semiBold' = 'regular') => ({
+    fontFamily: getMonoFont(weight),
+  }),
+  
+  // Logo font style (Bricolage Grotesque)
+  logo: () => ({
+    fontFamily: getLogoFont(),
+  }),
+  
+  // Header text style
+  header: () => ({
+    fontFamily: getDefaultFont('semiBold'),
+  }),
+  
+  // Body text style
+  body: () => ({
+    fontFamily: getDefaultFont('regular'),
+  }),
+  
+  // Legacy font styles (for backward compatibility)
+  legacy: {
+    spaceMono: () => ({
+      fontFamily: FontFamilies.legacy.spaceMono,
+    }),
+    systemMono: () => ({
+      fontFamily: FontFamilies.legacy.systemMono,
+    }),
+  }
+};