nastech-app 1.0.0

package/sources/components/SidebarNavigator.tsx

@@ -0,0 +1,218 @@
+import { useAuth } from '@/auth/AuthContext';
+import * as React from 'react';
+import { Drawer } from 'expo-router/drawer';
+import { useIsTablet, useHeaderHeight } from '@/utils/responsive';
+import { SidebarView } from './SidebarView';
+import { useWindowDimensions, View, Pressable, Platform } from 'react-native';
+import { useLocalSetting, useLocalSettingMutable } from '@/sync/storage';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useRouter, usePathname } from 'expo-router';
+import { Image } from 'expo-image';
+import { Ionicons } from '@expo/vector-icons';
+import { useUnistyles } from 'react-native-unistyles';
+import { t } from '@/text';
+import { isTauri } from '@/utils/isTauri';
+import { useOverlayNav } from '@/-session/sessionOverlayNav';
+import { DEFAULT_APP_ZOOM } from '@/hooks/useTauriZoom';
+
+const TAURI_HEADER_CONTROL_LEFT = Math.ceil(92 / DEFAULT_APP_ZOOM);
+
+/**
+ * Tracks navigation history to determine if back/forward is possible.
+ * We maintain our own stack + cursor because the web History API
+ * doesn't expose whether forward entries exist.
+ */
+function useNavHistory() {
+    const pathname = usePathname();
+    const historyRef = React.useRef<string[]>([pathname]);
+    const cursorRef = React.useRef(0);
+    const directionRef = React.useRef<'back' | 'forward' | null>(null);
+    const [canGoBack, setCanGoBack] = React.useState(false);
+    const [canGoForward, setCanGoForward] = React.useState(false);
+
+    React.useEffect(() => {
+        const dir = directionRef.current;
+        directionRef.current = null;
+
+        if (dir === 'back') {
+            cursorRef.current = Math.max(0, cursorRef.current - 1);
+        } else if (dir === 'forward') {
+            cursorRef.current = Math.min(historyRef.current.length - 1, cursorRef.current + 1);
+        } else {
+            // Regular navigation — trim forward entries and push
+            const cursor = cursorRef.current;
+            historyRef.current = historyRef.current.slice(0, cursor + 1);
+            historyRef.current.push(pathname);
+            cursorRef.current = historyRef.current.length - 1;
+        }
+
+        setCanGoBack(cursorRef.current > 0);
+        setCanGoForward(cursorRef.current < historyRef.current.length - 1);
+    }, [pathname]);
+
+    const markBack = React.useCallback(() => { directionRef.current = 'back'; }, []);
+    const markForward = React.useCallback(() => { directionRef.current = 'forward'; }, []);
+
+    return { canGoBack, canGoForward, markBack, markForward };
+}
+
+export const SidebarNavigator = React.memo(() => {
+    const auth = useAuth();
+    const isTablet = useIsTablet();
+    const zenMode = useLocalSetting('zenMode');
+    const isDesktopLayout = auth.isAuthenticated && isTablet;
+    const showSidebar = isDesktopLayout && !zenMode;
+    const { width: windowWidth } = useWindowDimensions();
+
+    // Calculate target drawer width
+    const fullDrawerWidth = React.useMemo(() => {
+        if (!isDesktopLayout) return 280;
+        return Math.min(Math.max(Math.floor(windowWidth * 0.3), 250), 360);
+    }, [windowWidth, isDesktopLayout]);
+    const drawerWidth = showSidebar ? fullDrawerWidth : 0;
+
+    const drawerNavigationOptions = React.useMemo(() => {
+        if (!isDesktopLayout) {
+            // Non-tablet: use front drawer, hidden
+            return {
+                lazy: false,
+                headerShown: false,
+                drawerType: 'front' as const,
+                swipeEnabled: false,
+                drawerStyle: {
+                    width: 0,
+                    display: 'none' as const,
+                },
+            };
+        }
+
+        // Tablet: always permanent, just collapse width in zen mode.
+        //
+        // We deliberately do NOT animate `width` on web. A CSS transition on
+        // the drawer width re-flowed the chat flex-1 sibling on every frame,
+        // re-measuring the entire FlatList tree at ~15fps. Snapping the
+        // width change makes the chat reflow exactly once. Native already
+        // snaps because RN doesn't honor CSS transition properties.
+        return {
+            lazy: false,
+            headerShown: false,
+            drawerType: 'permanent' as const,
+            drawerStyle: {
+                backgroundColor: 'white',
+                borderRightWidth: 0,
+                width: drawerWidth,
+                overflow: 'hidden' as const,
+            } as any,
+            swipeEnabled: false,
+            drawerActiveTintColor: 'transparent',
+            drawerInactiveTintColor: 'transparent',
+            drawerItemStyle: { display: 'none' as const },
+            drawerLabelStyle: { display: 'none' as const },
+        };
+    }, [isDesktopLayout, drawerWidth]);
+
+    const drawerContent = React.useCallback(
+        () => <SidebarView />,
+        []
+    );
+
+    return (
+        <View style={{ flex: 1 }}>
+            <Drawer
+                screenOptions={drawerNavigationOptions}
+                drawerContent={isDesktopLayout ? drawerContent : undefined}
+            />
+            {/* Persistent header overlay — always visible on desktop, same position regardless of zen mode */}
+            {isDesktopLayout && (
+                <PersistentHeader />
+            )}
+        </View>
+    );
+});
+
+// Header block that stays in the same position whether zen mode is on or off
+const PersistentHeader = React.memo(() => {
+    const { theme } = useUnistyles();
+    const safeArea = useSafeAreaInsets();
+    const headerHeight = useHeaderHeight();
+    const router = useRouter();
+    const [zenMode, setZenMode] = useLocalSettingMutable('zenMode');
+    const inTauri = isTauri();
+    const isMacTauri = inTauri && typeof navigator !== 'undefined' && /Mac/.test(navigator.platform);
+
+    const { canGoBack, canGoForward, markBack, markForward } = useNavHistory();
+    const overlayCanBack = useOverlayNav((s) => s.canBack);
+    const overlayCanForward = useOverlayNav((s) => s.canForward);
+
+    const handleZenToggle = React.useCallback(() => {
+        setZenMode(!zenMode);
+    }, [zenMode, setZenMode]);
+
+    const handleBack = React.useCallback(() => {
+        // Intra-session overlay (file diff / file view) consumes back first,
+        // so the chat → diff → file flow can be unwound without a close X.
+        if (useOverlayNav.getState().back()) return;
+        markBack();
+        router.back();
+    }, [router, markBack]);
+
+    const handleForward = React.useCallback(() => {
+        if (useOverlayNav.getState().forward()) return;
+        if (Platform.OS === 'web' && typeof window !== 'undefined') {
+            markForward();
+            window.history.forward();
+        }
+    }, [markForward]);
+
+    const canGoBackEffective = canGoBack || overlayCanBack;
+    const canGoForwardEffective = canGoForward || overlayCanForward;
+
+    return (
+        <View
+            style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                paddingTop: safeArea.top,
+                paddingLeft: isMacTauri ? TAURI_HEADER_CONTROL_LEFT : 16,
+                paddingRight: 16,
+                height: safeArea.top + headerHeight,
+                flexDirection: 'row',
+                alignItems: 'center',
+                zIndex: 1100,
+            }}
+            pointerEvents="box-none"
+            {...(inTauri ? { dataSet: { tauriDragRegion: 'true' } } : {})}
+        >
+            {/* Zen / Back / Forward buttons */}
+            <View
+                style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}
+                pointerEvents="auto"
+                {...(inTauri ? { dataSet: { tauriDragRegion: 'false' } } : {})}
+            >
+                <Pressable
+                    onPress={handleZenToggle}
+                    hitSlop={10}
+                    style={{ width: 28, height: 28, alignItems: 'center', justifyContent: 'center' }}
+                    accessibilityLabel={t('zen.toggle')}
+                >
+                    <Image
+                        source={require('@/assets/images/zen-icon.png')}
+                        contentFit="contain"
+                        style={{ width: 18, height: 18 }}
+                        tintColor={zenMode ? theme.colors.textLink : theme.colors.header.tint}
+                    />
+                </Pressable>
+                <Pressable onPress={handleBack} disabled={!canGoBackEffective} hitSlop={10} style={{ width: 28, height: 28, alignItems: 'center', justifyContent: 'center', opacity: canGoBackEffective ? 1 : 0.3 }}>
+                    <Ionicons name="chevron-back" size={20} color={theme.colors.header.tint} />
+                </Pressable>
+                {Platform.OS === 'web' && (
+                    <Pressable onPress={handleForward} disabled={!canGoForwardEffective} hitSlop={10} style={{ width: 28, height: 28, alignItems: 'center', justifyContent: 'center', opacity: canGoForwardEffective ? 1 : 0.3 }}>
+                        <Ionicons name="chevron-forward" size={20} color={theme.colors.header.tint} />
+                    </Pressable>
+                )}
+            </View>
+        </View>
+    );
+});

package/sources/components/SidebarView.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { Text, View, Pressable } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useRouter } from 'expo-router';
+import { useHeaderHeight } from '@/utils/responsive';
+import { VoiceAssistantStatusBar } from './VoiceAssistantStatusBar';
+import { useRealtimeStatus } from '@/sync/storage';
+import { MainView } from './MainView';
+import { StyleSheet } from 'react-native-unistyles';
+import { t } from '@/text';
+import { Ionicons } from '@expo/vector-icons';
+import { Typography } from '@/constants/Typography';
+
+const stylesheet = StyleSheet.create((theme) => ({
+    container: {
+        flex: 1,
+        borderStyle: 'solid',
+        backgroundColor: theme.colors.groupped.background,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderColor: theme.colors.divider,
+    },
+    newSessionButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginHorizontal: 16,
+        marginTop: 8,
+        marginBottom: 4,
+        paddingVertical: 10,
+        paddingHorizontal: 14,
+        borderRadius: 10,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderColor: theme.colors.divider,
+        backgroundColor: theme.colors.surface,
+        gap: 8,
+    },
+    newSessionButtonPressed: {
+        backgroundColor: theme.colors.surfacePressed,
+    },
+    newSessionText: {
+        fontSize: 14,
+        fontWeight: '500',
+        color: theme.colors.text,
+        ...Typography.default('semiBold'),
+    },
+    settingsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        borderTopWidth: StyleSheet.hairlineWidth,
+        borderTopColor: theme.colors.divider,
+        gap: 10,
+    },
+    settingsText: {
+        fontSize: 14,
+        fontWeight: '500',
+        color: theme.colors.text,
+        ...Typography.default(),
+    },
+}));
+
+export const SidebarView = React.memo(() => {
+    const styles = stylesheet;
+    const safeArea = useSafeAreaInsets();
+    const router = useRouter();
+    const headerHeight = useHeaderHeight();
+    const realtimeStatus = useRealtimeStatus();
+
+    const handleNewSession = React.useCallback(() => {
+        router.navigate('/new');
+    }, [router]);
+
+    return (
+        <View style={[styles.container, { paddingTop: safeArea.top + headerHeight }]}>
+            {/* New Session button */}
+            <Pressable
+                onPress={handleNewSession}
+                style={({ pressed }) => [
+                    styles.newSessionButton,
+                    pressed && styles.newSessionButtonPressed,
+                ]}
+            >
+                <Ionicons name="create-outline" size={16} color={stylesheet.newSessionText.color} />
+                <Text style={styles.newSessionText}>{t('sidebar.newSession')}</Text>
+            </Pressable>
+
+            {realtimeStatus !== 'disconnected' && (
+                <VoiceAssistantStatusBar variant="sidebar" />
+            )}
+
+            {/* Sessions list */}
+            <MainView variant="sidebar" />
+
+            {/* Settings at bottom */}
+            <Pressable
+                onPress={() => router.push('/settings')}
+                style={styles.settingsRow}
+            >
+                <Ionicons name="settings-outline" size={18} color={stylesheet.settingsText.color} />
+                <Text style={styles.settingsText}>{t('settings.title')}</Text>
+            </Pressable>
+        </View>
+    );
+});

package/sources/components/SimpleSyntaxHighlighter.tsx

@@ -0,0 +1,322 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { useUnistyles } from 'react-native-unistyles';
+import { Typography } from '@/constants/Typography';
+
+interface SimpleSyntaxHighlighterProps {
+  code: string;
+  language: string | null;
+  selectable: boolean;
+}
+
+// Get theme-aware colors
+const getColors = (theme: any) => ({
+  // Use theme colors directly for syntax highlighting
+  keyword: theme.colors.syntaxKeyword,
+  controlFlow: theme.colors.syntaxKeyword,
+  type: theme.colors.syntaxKeyword,
+  modifier: theme.colors.syntaxKeyword,
+  
+  string: theme.colors.syntaxString,
+  number: theme.colors.syntaxNumber,
+  boolean: theme.colors.syntaxNumber,
+  regex: theme.colors.syntaxString,
+  
+  function: theme.colors.syntaxFunction,
+  method: theme.colors.syntaxFunction,
+  property: theme.colors.syntaxDefault,
+  
+  comment: theme.colors.syntaxComment,
+  docstring: theme.colors.syntaxComment,
+  
+  operator: theme.colors.syntaxDefault,
+  assignment: theme.colors.syntaxKeyword,
+  comparison: theme.colors.syntaxKeyword,
+  logical: theme.colors.syntaxKeyword,
+  
+  bracket1: theme.colors.syntaxBracket1,
+  bracket2: theme.colors.syntaxBracket2,
+  bracket3: theme.colors.syntaxBracket3,
+  bracket4: theme.colors.syntaxBracket4,
+  bracket5: theme.colors.syntaxBracket5,
+  
+  decorator: theme.colors.syntaxKeyword,
+  import: theme.colors.syntaxKeyword,
+  variable: theme.colors.syntaxDefault,
+  parameter: theme.colors.syntaxDefault,
+  
+  default: theme.colors.syntaxDefault,
+  punctuation: theme.colors.syntaxDefault,
+});
+
+// Bracket pairs for nesting detection
+const bracketPairs = {
+  '(': ')',
+  '[': ']',
+  '{': '}',
+  '<': '>',
+};
+
+const openBrackets = Object.keys(bracketPairs);
+const closeBrackets = Object.values(bracketPairs);
+
+// Enhanced tokenizer with comprehensive token types
+const tokenizeCode = (code: string, language: string | null) => {
+  const tokens: Array<{ text: string; type: string; nestLevel?: number }> = [];
+  
+  if (!language) {
+    return [{ text: code, type: 'default' }];
+  }
+
+  const lang = language.toLowerCase();
+  
+  // Language-specific keyword sets
+  const keywordSets = {
+    controlFlow: ['if', 'else', 'elif', 'for', 'while', 'do', 'switch', 'case', 'break', 'continue', 'return', 'yield', 'try', 'catch', 'finally', 'throw', 'with'],
+    keywords: ['function', 'const', 'let', 'var', 'def', 'class', 'interface', 'enum', 'struct', 'union', 'namespace', 'module'],
+    types: ['int', 'string', 'bool', 'float', 'double', 'char', 'void', 'any', 'unknown', 'never', 'object', 'array', 'number', 'boolean'],
+    modifiers: ['public', 'private', 'protected', 'static', 'final', 'abstract', 'virtual', 'override', 'async', 'await', 'export', 'default'],
+    boolean: ['true', 'false', 'null', 'undefined', 'None', 'True', 'False', 'nil'],
+    imports: ['import', 'from', 'export', 'require', 'include', 'using', 'package'],
+  };
+
+  // Language-specific additions
+  if (lang === 'python' || lang === 'py') {
+    keywordSets.keywords.push('def', 'lambda', 'pass', 'global', 'nonlocal', 'as', 'in', 'is', 'not', 'and', 'or');
+    keywordSets.types.push('str', 'list', 'dict', 'tuple', 'set');
+  } else if (lang === 'typescript' || lang === 'ts') {
+    keywordSets.types.push('Record', 'Partial', 'Required', 'Readonly', 'Pick', 'Omit');
+    keywordSets.keywords.push('type', 'interface', 'extends', 'implements', 'keyof', 'typeof');
+  } else if (lang === 'java') {
+    keywordSets.keywords.push('package', 'extends', 'implements', 'super', 'this');
+    keywordSets.modifiers.push('synchronized', 'transient', 'volatile', 'native', 'strictfp');
+  }
+
+  // Enhanced regex patterns for comprehensive tokenization
+  const patterns = [
+    // Comments (highest priority)
+    { regex: /(\/\*[\s\S]*?\*\/)/g, type: 'comment' },
+    { regex: /(\/\/.*$)/gm, type: 'comment' },
+    { regex: /(#.*$)/gm, type: 'comment' },
+    { regex: /("""[\s\S]*?"""|'''[\s\S]*?''')/g, type: 'docstring' },
+    
+    // Strings and regex
+    { regex: /(r?["'`])((?:(?!\1)[^\\]|\\.)*)(\1)/g, type: 'string' },
+    { regex: /(\/(?:[^\/\\\n]|\\.)+\/[gimuy]*)/g, type: 'regex' },
+    
+    // Numbers (including hex, binary, floats)
+    { regex: /\b(0x[0-9a-fA-F]+|0b[01]+|0o[0-7]+|\d+\.?\d*(?:[eE][+-]?\d+)?)\b/g, type: 'number' },
+    
+    // Decorators
+    { regex: /@\w+/g, type: 'decorator' },
+    
+    // Function definitions and calls
+    { regex: /\b(function|def|async function)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)/g, type: 'function', captureGroup: 2 },
+    { regex: /\b([a-zA-Z_$][a-zA-Z0-9_$]*)\s*(?=\()/g, type: 'function' },
+    
+    // Method calls (object.method)
+    { regex: /\.([a-zA-Z_$][a-zA-Z0-9_$]*)\s*(?=\()/g, type: 'method', captureGroup: 1 },
+    { regex: /\.([a-zA-Z_$][a-zA-Z0-9_$]*)/g, type: 'property', captureGroup: 1 },
+    
+    // Keywords by category
+    { regex: new RegExp(`\\b(${keywordSets.imports.join('|')})\\b`, 'g'), type: 'import' },
+    { regex: new RegExp(`\\b(${keywordSets.controlFlow.join('|')})\\b`, 'g'), type: 'controlFlow' },
+    { regex: new RegExp(`\\b(${keywordSets.keywords.join('|')})\\b`, 'g'), type: 'keyword' },
+    { regex: new RegExp(`\\b(${keywordSets.types.join('|')})\\b`, 'g'), type: 'type' },
+    { regex: new RegExp(`\\b(${keywordSets.modifiers.join('|')})\\b`, 'g'), type: 'modifier' },
+    { regex: new RegExp(`\\b(${keywordSets.boolean.join('|')})\\b`, 'g'), type: 'boolean' },
+    
+    // Operators by category
+    { regex: /(===|!==|==|!=|<=|>=|<|>)/g, type: 'comparison' },
+    { regex: /(&&|\|\||!)/g, type: 'logical' },
+    { regex: /(=|\+=|\-=|\*=|\/=|%=|\|=|&=|\^=)/g, type: 'assignment' },
+    { regex: /(\+|\-|\*|\/|%|\*\*)/g, type: 'operator' },
+    { regex: /(\?|:)/g, type: 'operator' },
+    
+    // Brackets and punctuation
+    { regex: /([()[\]{}])/g, type: 'bracket' },
+    { regex: /([.,;])/g, type: 'punctuation' },
+  ];
+
+  // Calculate bracket nesting levels
+  const calculateBracketNesting = (code: string) => {
+    const nestingMap = new Map<number, number>();
+    const stack: Array<{ char: string; pos: number }> = [];
+    
+    for (let i = 0; i < code.length; i++) {
+      const char = code[i];
+      
+      if (openBrackets.includes(char)) {
+        stack.push({ char, pos: i });
+        nestingMap.set(i, stack.length);
+      } else if (closeBrackets.includes(char)) {
+        if (stack.length > 0) {
+          const lastOpen = stack.pop();
+          if (lastOpen && bracketPairs[lastOpen.char as keyof typeof bracketPairs] === char) {
+            nestingMap.set(i, stack.length + 1);
+          }
+        }
+      }
+    }
+    
+    return nestingMap;
+  };
+
+  const nestingMap = calculateBracketNesting(code);
+
+  // Split code into lines to preserve line breaks
+  const lines = code.split('\n');
+  let globalOffset = 0;
+  
+  lines.forEach((line, lineIndex) => {
+    if (lineIndex > 0) {
+      tokens.push({ text: '\n', type: 'default' });
+      globalOffset += 1; // for the \n character
+    }
+    
+    const lineTokens: Array<{ start: number; end: number; type: string; text: string; captureGroup?: number }> = [];
+
+    // Find all matches for all patterns
+    patterns.forEach(pattern => {
+      let match;
+      pattern.regex.lastIndex = 0;
+      while ((match = pattern.regex.exec(line)) !== null) {
+        const tokenText = pattern.captureGroup ? match[pattern.captureGroup] : match[0];
+        const tokenStart = pattern.captureGroup ? match.index + match[0].indexOf(tokenText) : match.index;
+        
+        lineTokens.push({
+          start: tokenStart,
+          end: tokenStart + tokenText.length,
+          type: pattern.type,
+          text: tokenText,
+          captureGroup: pattern.captureGroup
+        });
+      }
+    });
+
+    // Sort tokens by position and remove overlaps
+    lineTokens.sort((a, b) => a.start - b.start);
+    
+    const filteredTokens: typeof lineTokens = [];
+    let lastEnd = 0;
+    lineTokens.forEach(token => {
+      if (token.start >= lastEnd) {
+        filteredTokens.push(token);
+        lastEnd = token.end;
+      }
+    });
+
+    // Add tokens with proper nesting levels for brackets
+    let currentIndex = 0;
+    filteredTokens.forEach(token => {
+      // Add text before this token
+      if (token.start > currentIndex) {
+        const beforeText = line.slice(currentIndex, token.start);
+        if (beforeText) {
+          tokens.push({ text: beforeText, type: 'default' });
+        }
+      }
+      
+      // Add the token with nesting level if it's a bracket
+      if (token.type === 'bracket') {
+        const globalPos = globalOffset + token.start;
+        const nestLevel = nestingMap.get(globalPos) || 1;
+        tokens.push({ 
+          text: token.text, 
+          type: token.type,
+          nestLevel: nestLevel
+        });
+      } else {
+        tokens.push({ text: token.text, type: token.type });
+      }
+      
+      currentIndex = token.end;
+    });
+
+    // Add remaining text
+    if (currentIndex < line.length) {
+      const remainingText = line.slice(currentIndex);
+      if (remainingText) {
+        tokens.push({ text: remainingText, type: 'default' });
+      }
+    }
+    
+    globalOffset += line.length;
+  });
+
+  return tokens;
+};
+
+export const SimpleSyntaxHighlighter: React.FC<SimpleSyntaxHighlighterProps> = ({
+  code,
+  language,
+  selectable
+}) => {
+  const { theme } = useUnistyles();
+  const colors = getColors(theme);
+  const tokens = tokenizeCode(code, language);
+
+  const getColorForType = (type: string, nestLevel?: number): string => {
+    switch (type) {
+      case 'keyword': return colors.keyword;
+      case 'controlFlow': return colors.controlFlow;
+      case 'type': return colors.type;
+      case 'modifier': return colors.modifier;
+      case 'string': return colors.string;
+      case 'number': return colors.number;
+      case 'boolean': return colors.boolean;
+      case 'regex': return colors.regex;
+      case 'function': return colors.function;
+      case 'method': return colors.method;
+      case 'property': return colors.property;
+      case 'comment': return colors.comment;
+      case 'docstring': return colors.docstring;
+      case 'operator': return colors.operator;
+      case 'assignment': return colors.assignment;
+      case 'comparison': return colors.comparison;
+      case 'logical': return colors.logical;
+      case 'decorator': return colors.decorator;
+      case 'import': return colors.import;
+      case 'variable': return colors.variable;
+      case 'parameter': return colors.parameter;
+      case 'punctuation': return colors.punctuation;
+      case 'bracket': 
+        switch ((nestLevel || 1) % 5) {
+          case 1: return colors.bracket1;
+          case 2: return colors.bracket2;
+          case 3: return colors.bracket3;
+          case 4: return colors.bracket4;
+          case 0: return colors.bracket5; // Level 5, 10, 15, etc.
+          default: return colors.bracket1;
+        }
+      default: return colors.default;
+    }
+  };
+
+  return (
+    <View>
+      <Text 
+        selectable={selectable}
+        style={{ 
+          fontFamily: Typography.mono().fontFamily,
+          fontSize: 14,
+          lineHeight: 20,
+        }}
+      >
+        {tokens.map((token, index) => (
+          <Text
+            key={index}
+            selectable={selectable}
+            style={{
+              color: getColorForType(token.type, token.nestLevel),
+              fontFamily: Typography.mono().fontFamily,
+              fontWeight: ['keyword', 'controlFlow', 'type', 'function'].includes(token.type) ? '600' : '400',
+            }}
+          >
+            {token.text}
+          </Text>
+        ))}
+      </Text>
+    </View>
+  );
+}; 

package/sources/components/StatusBarProvider.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StatusBar } from 'expo-status-bar';
+import { useUnistyles } from 'react-native-unistyles';
+
+
+export const StatusBarProvider = React.memo(() => {
+    const { theme } = useUnistyles();
+    const statusBarStyle = theme.dark ? 'light' : 'dark';
+    return (
+        <StatusBar style={statusBarStyle} animated={true} />
+    );
+});