nastech-app 1.0.0

package/sources/components/ChatList.tsx

@@ -0,0 +1,283 @@
+import * as React from 'react';
+import { useSession, useSessionMessages, useSetting } from "@/sync/storage";
+import { sync } from '@/sync/sync';
+import { ActivityIndicator, FlatList, NativeScrollEvent, NativeSyntheticEvent, Platform, Pressable, View } from 'react-native';
+import { useCallback } from 'react';
+import { useHeaderHeight } from '@/utils/responsive';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { MessageView } from './MessageView';
+import { ToolGroupView } from './ToolGroupView';
+import { DuplicateSheet } from './DuplicateSheet';
+import { Metadata, Session } from '@/sync/storageTypes';
+import { ChatFooter } from './ChatFooter';
+import { Message } from '@/sync/typesMessage';
+import { DisplayItem, ToolGroupItem, useGroupedMessages } from '@/hooks/useGroupedMessages';
+import { Octicons } from '@expo/vector-icons';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { Modal } from '@/modal';
+import { useSessionQuickActions } from '@/hooks/useSessionQuickActions';
+
+const SCROLL_THRESHOLD = 300;
+
+export const ChatList = React.memo((props: { session: Session }) => {
+    const { messages, hasMoreOlder, isLoadingOlder } = useSessionMessages(props.session.id);
+    return (
+        <ChatListInternal
+            metadata={props.session.metadata}
+            sessionId={props.session.id}
+            messages={messages}
+            hasMoreOlder={hasMoreOlder}
+            isLoadingOlder={isLoadingOlder}
+        />
+    )
+});
+
+const ListHeader = React.memo((props: { isLoadingOlder: boolean }) => {
+    const headerHeight = useHeaderHeight();
+    const safeArea = useSafeAreaInsets();
+    // ListFooterComponent on an inverted FlatList renders at the visual top
+    // — that is exactly where the spinner for "loading older messages"
+    // belongs. The spacer below keeps the header bar from clipping the
+    // oldest message.
+    return (
+        <View>
+            {props.isLoadingOlder && (
+                <View style={{ paddingVertical: 12, alignItems: 'center', justifyContent: 'center' }}>
+                    <ActivityIndicator size="small" />
+                </View>
+            )}
+            <View style={{ flexDirection: 'row', alignItems: 'center', height: headerHeight + safeArea.top + 32 }} />
+        </View>
+    );
+});
+
+const ListFooter = React.memo((props: { sessionId: string }) => {
+    const session = useSession(props.sessionId)!;
+    return (
+        <ChatFooter controlledByUser={session.agentState?.controlledByUser || false} />
+    )
+});
+
+const ChatListInternal = React.memo((props: {
+    metadata: Metadata | null,
+    sessionId: string,
+    messages: Message[],
+    hasMoreOlder: boolean,
+    isLoadingOlder: boolean,
+}) => {
+    const { theme } = useUnistyles();
+    const flatListRef = React.useRef<FlatList>(null);
+    const [showScrollButton, setShowScrollButton] = React.useState(false);
+    // Tracks whether the scroll-button is currently shown, so we only call
+    // setShowScrollButton when the threshold is actually crossed instead of
+    // on every scroll frame (60Hz). Without this guard, the entire list
+    // parent re-renders on every wheel tick.
+    const showScrollButtonRef = React.useRef(false);
+
+    // Group consecutive tool calls between text messages into collapsible
+    // containers — unless the user disabled it in settings.
+    const groupToolCalls = useSetting('groupToolCalls');
+    const displayItems = useGroupedMessages(props.messages, groupToolCalls);
+
+    // Track which groups the user has manually toggled (flips their default state)
+    const [toggledGroups, setToggledGroups] = React.useState<Set<string>>(new Set());
+
+    // Auto-collapse groups when they finish running: clear toggle state so
+    // they return to the default (collapsed for completed groups)
+    React.useEffect(() => {
+        setToggledGroups((prev) => {
+            let changed = false;
+            const next = new Set(prev);
+            for (const item of displayItems) {
+                if (item.type === 'tool-group' && !item.hasRunning && prev.has(item.id)) {
+                    next.delete(item.id);
+                    changed = true;
+                }
+            }
+            return changed ? next : prev;
+        });
+    }, [displayItems]);
+
+    const handleToggleGroup = useCallback((groupId: string) => {
+        setToggledGroups((prev) => {
+            const next = new Set(prev);
+            if (next.has(groupId)) {
+                next.delete(groupId);
+            } else {
+                next.add(groupId);
+            }
+            return next;
+        });
+    }, []);
+
+    const keyExtractor = useCallback((item: DisplayItem) => item.id, []);
+
+    // Long-press → fork-from-this-message. Uses the same canFork gate as
+    // the rest of the fork affordances: ridden by the expResumeSession
+    // experiments toggle, requires a Claude session with claudeSessionId
+    // and a machine that's online. Active OR inactive — fork works either
+    // way (the on-disk JSONL exists in both cases).
+    const session = useSession(props.sessionId);
+    const { canFork } = useSessionQuickActions(session!, {});
+
+    const handleForkFromMessage = useCallback((_messageId: string, claudeUuid: string) => {
+        Modal.show({
+            component: DuplicateSheet,
+            props: {
+                sessionId: props.sessionId,
+                initialClaudeUuid: claudeUuid,
+            },
+        } as any);
+    }, [props.sessionId]);
+
+    const renderItem = useCallback(({ item }: { item: DisplayItem }) => {
+        if (item.type === 'tool-group') {
+            const defaultExpanded = item.hasRunning;
+            const expanded = toggledGroups.has(item.id) ? !defaultExpanded : defaultExpanded;
+            return (
+                <ToolGroupView
+                    group={item}
+                    metadata={props.metadata}
+                    sessionId={props.sessionId}
+                    expanded={expanded}
+                    onToggle={() => handleToggleGroup(item.id)}
+                />
+            );
+        }
+        return (
+            <MessageView
+                message={item.message}
+                metadata={props.metadata}
+                sessionId={props.sessionId}
+                onForkFromUserMessage={canFork ? handleForkFromMessage : undefined}
+            />
+        );
+    }, [props.metadata, props.sessionId, canFork, handleForkFromMessage, toggledGroups, handleToggleGroup]);
+
+    // In inverted FlatList, offset 0 = latest messages (visual bottom).
+    // Offset increases as user scrolls up to see older messages.
+    // Auto-stick-to-bottom on new messages is handled natively by FlatList's
+    // maintainVisibleContentPosition.autoscrollToBottomThreshold — no JS-side
+    // scrollToOffset is needed (and running both produces a fight that drags
+    // the user's viewport when reading older messages mid-stream).
+    const handleScroll = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
+        const offsetY = e.nativeEvent.contentOffset.y;
+        const next = offsetY > SCROLL_THRESHOLD;
+        if (next !== showScrollButtonRef.current) {
+            showScrollButtonRef.current = next;
+            setShowScrollButton(next);
+        }
+    }, []);
+
+    const scrollToBottom = useCallback(() => {
+        flatListRef.current?.scrollToOffset({ offset: 0, animated: true });
+    }, []);
+
+    // In an inverted FlatList, `onEndReached` fires when the user scrolls
+    // past the visual top — i.e. when they want to see older history.
+    // Initial fetch only loads the latest 100 messages (see
+    // sync.fetchInitialLatestPage), so we lazy-load earlier pages here.
+    const sessionId = props.sessionId;
+    const hasMoreOlder = props.hasMoreOlder;
+    const isLoadingOlder = props.isLoadingOlder;
+    const handleLoadOlder = useCallback(() => {
+        if (!hasMoreOlder || isLoadingOlder) return;
+        void sync.loadOlderMessages(sessionId);
+    }, [sessionId, hasMoreOlder, isLoadingOlder]);
+
+    // On macOS/web, Shift+wheel swaps deltaX/deltaY — restore vertical scrolling
+    React.useEffect(() => {
+        if (Platform.OS !== 'web') return;
+        const node = (flatListRef.current as any)?.getScrollableNode?.() as HTMLElement | undefined;
+        if (!node) return;
+        const handler = (e: WheelEvent) => {
+            if (e.shiftKey && Math.abs(e.deltaX) > 0 && Math.abs(e.deltaY) < 1) {
+                node.scrollTop += e.deltaX;
+                e.preventDefault();
+            }
+        };
+        node.addEventListener('wheel', handler, { passive: false });
+        return () => node.removeEventListener('wheel', handler);
+    }, []);
+
+    return (
+        <View style={{ flex: 1 }}>
+            <FlatList
+                ref={flatListRef}
+                data={displayItems}
+                inverted={true}
+                keyExtractor={keyExtractor}
+                maintainVisibleContentPosition={{
+                    // Anchor on the second-newest message (index 1), not the
+                    // newest. The newest slot (index 0) gets a brand-new item
+                    // each agent token, which would otherwise destabilise the
+                    // anchor and drag the viewport up.
+                    //
+                    // autoscrollToTopThreshold: for INVERTED lists this is
+                    // actually the auto-stick-to-visual-bottom threshold —
+                    // contentOffset 0 is at the visual bottom in an inverted
+                    // list, and this prop sticks the viewport to offset 0
+                    // when the user is within N units of it.
+                    minIndexForVisible: 1,
+                    autoscrollToTopThreshold: 50,
+                }}
+                keyboardShouldPersistTaps="handled"
+                keyboardDismissMode={Platform.OS === 'ios' ? 'interactive' : 'none'}
+                renderItem={renderItem}
+                onScroll={handleScroll}
+                scrollEventThrottle={16}
+                ListHeaderComponent={<ListFooter sessionId={props.sessionId} />}
+                ListFooterComponent={<ListHeader isLoadingOlder={props.isLoadingOlder} />}
+                onEndReached={handleLoadOlder}
+                onEndReachedThreshold={0.5}
+            />
+            {showScrollButton && (
+                <View style={styles.scrollButtonContainer}>
+                    <Pressable
+                        style={({ pressed }) => [
+                            styles.scrollButton,
+                            pressed ? styles.scrollButtonPressed : styles.scrollButtonDefault
+                        ]}
+                        onPress={scrollToBottom}
+                    >
+                        <Octicons name="arrow-down" size={14} color={theme.colors.text} />
+                    </Pressable>
+                </View>
+            )}
+        </View>
+    )
+});
+
+const styles = StyleSheet.create((theme) => ({
+    scrollButtonContainer: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+        pointerEvents: 'box-none',
+    },
+    scrollButton: {
+        borderRadius: 16,
+        width: 32,
+        height: 32,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: theme.colors.divider,
+        shadowColor: theme.colors.shadow.color,
+        shadowOffset: { width: 0, height: 1 },
+        shadowRadius: 2,
+        shadowOpacity: theme.colors.shadow.opacity * 0.5,
+        elevation: 2,
+    },
+    scrollButtonDefault: {
+        backgroundColor: theme.colors.surface,
+        opacity: 0.9,
+    },
+    scrollButtonPressed: {
+        backgroundColor: theme.colors.surface,
+        opacity: 0.7,
+    },
+}));

package/sources/components/CodeEditor.tsx

@@ -0,0 +1,22 @@
+/**
+ * Native fallback for CodeEditor — should never be rendered on native.
+ * The file edit feature is web-only. This stub prevents import errors.
+ */
+import * as React from 'react';
+import { View, Text } from 'react-native';
+
+interface CodeEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    language: string | null;
+    darkMode: boolean;
+    readOnly?: boolean;
+}
+
+export const CodeEditor = React.memo(function CodeEditor(_props: CodeEditorProps) {
+    return (
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <Text>Editor not available on this platform</Text>
+        </View>
+    );
+});

package/sources/components/CodeEditor.web.tsx

@@ -0,0 +1,180 @@
+/**
+ * Web-only code editor with syntax highlighting.
+ * Uses react-simple-code-editor + Prism.js.
+ * Theme colors match the app's syntax highlighting (Pierre-consistent).
+ */
+import * as React from 'react';
+import Editor from 'react-simple-code-editor';
+import Prism from 'prismjs';
+
+// Load Prism languages (order matters — dependencies first)
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-tsx';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-toml';
+import 'prismjs/components/prism-ini';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-docker';
+import 'prismjs/components/prism-graphql';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-swift';
+import 'prismjs/components/prism-kotlin';
+import 'prismjs/components/prism-hcl';
+
+interface CodeEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    language: string | null;
+    darkMode: boolean;
+    readOnly?: boolean;
+}
+
+const LANG_MAP: Record<string, string> = {
+    javascript: 'javascript',
+    typescript: 'typescript',
+    jsx: 'jsx',
+    tsx: 'tsx',
+    python: 'python',
+    html: 'markup',
+    css: 'css',
+    json: 'json',
+    markdown: 'markdown',
+    xml: 'markup',
+    yaml: 'yaml',
+    toml: 'toml',
+    ini: 'ini',
+    bash: 'bash',
+    shell: 'bash',
+    docker: 'docker',
+    graphql: 'graphql',
+    sql: 'sql',
+    go: 'go',
+    rust: 'rust',
+    java: 'java',
+    c: 'c',
+    cpp: 'cpp',
+    ruby: 'ruby',
+    swift: 'swift',
+    kotlin: 'kotlin',
+    hcl: 'hcl',
+};
+
+export const CodeEditor = React.memo(function CodeEditor({
+    value,
+    onChange,
+    language,
+    darkMode,
+    readOnly = false,
+}: CodeEditorProps) {
+    const highlight = React.useCallback((code: string) => {
+        const prismLang = language ? (LANG_MAP[language] ?? null) : null;
+        const grammar = prismLang ? Prism.languages[prismLang] : null;
+        if (!grammar || !prismLang) return escapeHtml(code);
+        try {
+            return Prism.highlight(code, grammar, prismLang);
+        } catch {
+            return escapeHtml(code);
+        }
+    }, [language]);
+
+    // Inject theme CSS into document head
+    React.useEffect(() => {
+        const id = 'prism-editor-theme';
+        let el = document.getElementById(id);
+        if (!el) {
+            el = document.createElement('style');
+            el.id = id;
+            document.head.appendChild(el);
+        }
+        el.textContent = darkMode ? DARK_THEME_CSS : LIGHT_THEME_CSS;
+    }, [darkMode]);
+
+    return (
+        <div
+            style={{
+                flex: 1,
+                overflow: 'auto',
+                backgroundColor: 'transparent',
+            }}
+        >
+            <Editor
+                value={value}
+                onValueChange={readOnly ? () => {} : onChange}
+                highlight={highlight}
+                padding={16}
+                readOnly={readOnly}
+                style={{
+                    fontFamily: 'ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, Monaco, Consolas, monospace',
+                    fontSize: 14,
+                    lineHeight: 1.5,
+                    minHeight: '100%',
+                    color: darkMode ? '#D4D4D4' : '#374151',
+                    backgroundColor: 'transparent',
+                }}
+                textareaClassName="code-editor-textarea"
+            />
+        </div>
+    );
+});
+
+function escapeHtml(text: string): string {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+
+// Colors from theme.ts dark mode (matches Pierre github-dark-default)
+const DARK_THEME_CSS = `
+.code-editor-textarea {
+    outline: none !important;
+    caret-color: #fff !important;
+}
+.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6A9955; font-style: italic; }
+.token.punctuation { color: #D4D4D4; }
+.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol { color: #B5CEA8; }
+.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #CE9178; }
+.token.operator, .token.entity, .token.url { color: #D4D4D4; }
+.token.atrule, .token.attr-value, .token.keyword, .token.class-name { color: #569CD6; }
+.token.function { color: #DCDCAA; }
+.token.regex, .token.important, .token.variable { color: #D16969; }
+.token.deleted { color: #CE9178; text-decoration: line-through; }
+.token.namespace { color: #4EC9B0; }
+.token.tag .token.punctuation { color: #808080; }
+.token.tag .token.attr-name { color: #9CDCFE; }
+.token.tag .token.attr-value { color: #CE9178; }
+`;
+
+// Colors from theme.ts light mode
+const LIGHT_THEME_CSS = `
+.code-editor-textarea {
+    outline: none !important;
+    caret-color: #000 !important;
+}
+.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6b7280; font-style: italic; }
+.token.punctuation { color: #374151; }
+.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol { color: #0891b2; }
+.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #059669; }
+.token.operator, .token.entity, .token.url { color: #374151; }
+.token.atrule, .token.attr-value, .token.keyword, .token.class-name { color: #1d4ed8; }
+.token.function { color: #9333ea; }
+.token.regex, .token.important, .token.variable { color: #dc2626; }
+.token.deleted { color: #dc2626; text-decoration: line-through; }
+.token.namespace { color: #0d9488; }
+.token.tag .token.punctuation { color: #6b7280; }
+.token.tag .token.attr-name { color: #1d4ed8; }
+.token.tag .token.attr-value { color: #059669; }
+`;

package/sources/components/CodeView.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Text, View, Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+interface CodeViewProps {
+    code: string;
+    language?: string;
+}
+
+export const CodeView = React.memo<CodeViewProps>(({ 
+    code, 
+    language
+}) => {
+    return (
+        <View style={styles.codeBlock}>
+            <Text style={styles.codeText}>{code}</Text>
+        </View>
+    );
+});
+
+const styles = StyleSheet.create((theme) => ({
+    codeBlock: {
+        backgroundColor: theme.colors.surfaceHigh,
+        borderRadius: 6,
+        padding: 12,
+    },
+    codeText: {
+        fontFamily: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'monospace' }),
+        fontSize: 12,
+        color: theme.colors.text,
+        lineHeight: 18,
+    },
+}));

package/sources/components/CommandPalette/CommandPalette.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { View, StyleSheet, Platform } from 'react-native';
+import { CommandPaletteInput } from './CommandPaletteInput';
+import { CommandPaletteResults } from './CommandPaletteResults';
+import { useCommandPalette } from './useCommandPalette';
+import { Command } from './types';
+
+interface CommandPaletteProps {
+    commands: Command[];
+    onClose: () => void;
+}
+
+export function CommandPalette({ commands, onClose }: CommandPaletteProps) {
+    const {
+        searchQuery,
+        selectedIndex,
+        filteredCategories,
+        inputRef,
+        handleSearchChange,
+        handleSelectCommand,
+        handleKeyPress,
+        setSelectedIndex,
+    } = useCommandPalette(commands, onClose);
+
+    // Only render on web
+    if (Platform.OS !== 'web') {
+        return null;
+    }
+
+    return (
+        <View style={styles.container}>
+            <CommandPaletteInput
+                value={searchQuery}
+                onChangeText={handleSearchChange}
+                onKeyPress={handleKeyPress}
+                inputRef={inputRef}
+            />
+            <CommandPaletteResults
+                categories={filteredCategories}
+                selectedIndex={selectedIndex}
+                onSelectCommand={handleSelectCommand}
+                onSelectionChange={setSelectedIndex}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: '#FFFFFF',
+        borderRadius: 16,
+        width: '100%',
+        maxWidth: 800, // Increased from 640 for wider input
+        // Use viewport-based height for better layout
+        ...(Platform.OS === 'web' ? {
+            maxHeight: '60vh', // Takes up to 60% of viewport height
+        } as any : {
+            maxHeight: 500, // Fallback for native
+        }),
+        overflow: 'hidden',
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 20,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 40,
+        elevation: 20,
+        borderWidth: 1,
+        borderColor: 'rgba(0, 0, 0, 0.08)',
+    },
+});

package/sources/components/CommandPalette/CommandPaletteInput.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { View, TextInput, StyleSheet, Platform } from 'react-native';
+import { Typography } from '@/constants/Typography';
+import { t } from '@/text';
+
+interface CommandPaletteInputProps {
+    value: string;
+    onChangeText: (text: string) => void;
+    onKeyPress?: (key: string) => void;
+    inputRef?: React.RefObject<TextInput | null>;
+}
+
+export function CommandPaletteInput({ value, onChangeText, onKeyPress, inputRef }: CommandPaletteInputProps) {
+    const handleKeyDown = React.useCallback((e: any) => {
+        if (Platform.OS === 'web' && onKeyPress) {
+            const key = e.nativeEvent.key;
+            
+            // Handle navigation keys
+            if (['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(key)) {
+                e.preventDefault();
+                e.stopPropagation();
+                onKeyPress(key);
+            }
+        }
+    }, [onKeyPress]);
+
+    return (
+        <View style={styles.container}>
+            <TextInput
+                ref={inputRef}
+                style={[styles.input, Typography.default()]}
+                value={value}
+                onChangeText={onChangeText}
+                placeholder={t('commandPalette.placeholder')}
+                placeholderTextColor="#999"
+                autoFocus
+                autoCorrect={false}
+                autoCapitalize="none"
+                returnKeyType="go"
+                onKeyPress={handleKeyDown}
+                blurOnSubmit={false}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        borderBottomWidth: 1,
+        borderBottomColor: 'rgba(0, 0, 0, 0.06)',
+        backgroundColor: '#FAFAFA',
+    },
+    input: {
+        paddingHorizontal: 32,
+        paddingVertical: 24,
+        fontSize: 20,
+        color: '#000',
+        letterSpacing: -0.3,
+        // Remove outline on web
+        ...(Platform.OS === 'web' ? {
+            outlineStyle: 'none',
+            outlineWidth: 0,
+        } as any : {}),
+    },
+});