nastech-app 1.0.0

package/sources/components/tools/views/CodexPatchView.tsx

@@ -0,0 +1,186 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { Octicons } from '@expo/vector-icons';
+import { ToolCall } from '@/sync/typesMessage';
+import { ToolSectionView } from '../ToolSectionView';
+import { Metadata } from '@/sync/storageTypes';
+import { resolvePath } from '@/utils/pathUtils';
+import { ToolDiffView } from '@/components/tools/ToolDiffView';
+import { getDiffStats, getPatchDiffStats } from '@/components/diff/calculateDiff';
+
+interface CodexPatchViewProps {
+    tool: ToolCall;
+    metadata: Metadata | null;
+}
+
+type CodexPatchEntry = {
+    diff?: string;
+    kind?: {
+        type?: string;
+        move_path?: string | null;
+    };
+    add?: {
+        content?: string;
+    };
+    modify?: {
+        old_content?: string;
+        new_content?: string;
+    };
+    delete?: {
+        content?: string;
+    };
+};
+
+function getPatchChanges(input: any): Record<string, CodexPatchEntry> | null {
+    if (input?.changes && typeof input.changes === 'object' && !Array.isArray(input.changes)) {
+        return input.changes as Record<string, CodexPatchEntry>;
+    }
+    if (input?.fileChanges && typeof input.fileChanges === 'object' && !Array.isArray(input.fileChanges)) {
+        return input.fileChanges as Record<string, CodexPatchEntry>;
+    }
+    return null;
+}
+
+type PatchInput =
+    | { kind: 'patch'; patch: string }
+    | { kind: 'pair'; oldText: string; newText: string };
+
+function getPatchInput(change: CodexPatchEntry): PatchInput | null {
+    if (typeof change.diff === 'string') {
+        return { kind: 'patch', patch: change.diff };
+    }
+    if (change.modify) {
+        return { kind: 'pair', oldText: change.modify.old_content || '', newText: change.modify.new_content || '' };
+    }
+    if (change.add) {
+        return { kind: 'pair', oldText: '', newText: change.add.content || '' };
+    }
+    if (change.delete) {
+        return { kind: 'pair', oldText: change.delete.content || '', newText: '' };
+    }
+    return null;
+}
+
+function getPatchKindLabel(change: CodexPatchEntry): string | null {
+    switch (change.kind?.type) {
+        case 'add':
+            return 'new';
+        case 'delete':
+            return 'delete';
+        case 'update':
+            return change.kind.move_path ? 'move' : 'edit';
+        default:
+            return null;
+    }
+}
+
+export const CodexPatchView = React.memo<CodexPatchViewProps>(({ tool, metadata }) => {
+    const { theme } = useUnistyles();
+    const { input } = tool;
+    const changes = getPatchChanges(input);
+
+    const entries = changes ? Object.entries(changes) : [];
+
+    if (entries.length === 0) {
+        return null;
+    }
+
+    return (
+        <>
+            {entries.map(([file, change]) => {
+                const filePath = resolvePath(file, metadata);
+                const diffInput = getPatchInput(change);
+                const kindLabel = getPatchKindLabel(change);
+                const movePath = change.kind?.move_path ? resolvePath(change.kind.move_path, metadata) : null;
+                const fileName = file.split('/').pop() ?? file;
+                const stats = !diffInput
+                    ? null
+                    : diffInput.kind === 'patch'
+                        ? getPatchDiffStats(diffInput.patch)
+                        : getDiffStats(diffInput.oldText, diffInput.newText);
+
+                return (
+                    <ToolSectionView key={file} fullWidth>
+                        <View style={styles.patchContainer}>
+                            <View style={styles.fileHeader}>
+                                <View style={styles.fileHeaderMain}>
+                                    <Octicons name="file-diff" size={16} color={theme.colors.textSecondary} />
+                                    <Text style={styles.filePath}>{filePath}</Text>
+                                    {kindLabel ? <Text style={styles.kindLabel}>{kindLabel}</Text> : null}
+                                    {stats && (stats.additions > 0 || stats.deletions > 0) ? (
+                                        <View style={styles.stats}>
+                                            {stats.additions > 0 ? <Text style={styles.added}>+{stats.additions}</Text> : null}
+                                            {stats.deletions > 0 ? <Text style={styles.removed}>-{stats.deletions}</Text> : null}
+                                        </View>
+                                    ) : null}
+                                </View>
+                                {movePath ? <Text style={styles.movePath}>{movePath}</Text> : null}
+                            </View>
+                            {diffInput?.kind === 'patch' ? (
+                                <ToolDiffView patch={diffInput.patch} fileName={fileName} />
+                            ) : diffInput?.kind === 'pair' && (diffInput.oldText.length > 0 || diffInput.newText.length > 0) ? (
+                                <ToolDiffView
+                                    oldText={diffInput.oldText}
+                                    newText={diffInput.newText}
+                                    fileName={fileName}
+                                />
+                            ) : null}
+                        </View>
+                    </ToolSectionView>
+                );
+            })}
+        </>
+    );
+});
+
+const styles = StyleSheet.create((theme) => ({
+    patchContainer: {
+        backgroundColor: theme.colors.surface,
+        overflow: 'hidden',
+    },
+    fileHeader: {
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+        backgroundColor: theme.colors.surfaceHigh,
+        borderBottomWidth: 1,
+        borderBottomColor: theme.colors.divider,
+        gap: 4,
+    },
+    fileHeaderMain: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    filePath: {
+        fontSize: 13,
+        color: theme.colors.text,
+        fontFamily: 'monospace',
+        flex: 1,
+    },
+    kindLabel: {
+        fontSize: 11,
+        color: theme.colors.textSecondary,
+        textTransform: 'uppercase',
+        letterSpacing: 0.6,
+    },
+    movePath: {
+        fontSize: 12,
+        color: theme.colors.textSecondary,
+        fontFamily: 'monospace',
+    },
+    stats: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    added: {
+        fontSize: 12,
+        fontFamily: 'monospace',
+        color: '#34C759',
+    },
+    removed: {
+        fontSize: 12,
+        fontFamily: 'monospace',
+        color: '#FF3B30',
+    },
+}));

package/sources/components/tools/views/EditView.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { ToolSectionView } from '../../tools/ToolSectionView';
+import { ToolViewProps } from './_all';
+import { ToolDiffView } from '@/components/tools/ToolDiffView';
+import { knownTools } from '../../tools/knownTools';
+import { trimIdent } from '@/utils/trimIdent';
+import { useSetting } from '@/sync/storage';
+
+
+export const EditView = React.memo<ToolViewProps>(({ tool }) => {
+    const showLineNumbersInToolViews = useSetting('showLineNumbersInToolViews');
+    
+    let oldString = '';
+    let newString = '';
+    const parsed = knownTools.Edit.input.safeParse(tool.input);
+    if (parsed.success) {
+        oldString = trimIdent(parsed.data.old_string || '');
+        newString = trimIdent(parsed.data.new_string || '');
+    }
+
+    return (
+        <>
+            <ToolSectionView fullWidth>
+                <ToolDiffView 
+                    oldText={oldString} 
+                    newText={newString} 
+                    showLineNumbers={showLineNumbersInToolViews}
+                    showPlusMinusSymbols={showLineNumbersInToolViews}
+                />
+            </ToolSectionView>
+        </>
+    );
+});

package/sources/components/tools/views/EditViewFull.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { ToolCall } from '@/sync/typesMessage';
+import { Metadata } from '@/sync/storageTypes';
+import { knownTools } from '@/components/tools/knownTools';
+import { toolFullViewStyles } from '../ToolFullView';
+import { ToolDiffView } from '@/components/tools/ToolDiffView';
+import { trimIdent } from '@/utils/trimIdent';
+
+interface EditViewFullProps {
+    tool: ToolCall;
+    metadata: Metadata | null;
+}
+
+export const EditViewFull = React.memo<EditViewFullProps>(({ tool, metadata }) => {
+    const { input } = tool;
+
+    // Parse the input
+    let oldString = '';
+    let newString = '';
+    const parsed = knownTools.Edit.input.safeParse(input);
+    if (parsed.success) {
+        oldString = trimIdent(parsed.data.old_string || '');
+        newString = trimIdent(parsed.data.new_string || '');
+    }
+
+    return (
+        <View style={toolFullViewStyles.sectionFullWidth}>
+            <ToolDiffView 
+                oldText={oldString} 
+                newText={newString} 
+                style={{ width: '100%' }}
+                showLineNumbers={true}
+                showPlusMinusSymbols={true}
+            />
+        </View>
+    );
+});

package/sources/components/tools/views/ExitPlanToolView.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ToolViewProps } from "./_all";
+import { ToolSectionView } from '../../tools/ToolSectionView';
+import { MarkdownView } from '@/components/markdown/MarkdownView';
+import { knownTools } from '../../tools/knownTools';
+import { View } from 'react-native';
+
+export const ExitPlanToolView = React.memo<ToolViewProps>(({ tool, sessionId }) => {
+    let plan = '<empty>'
+    const parsed = knownTools.ExitPlanMode.input.safeParse(tool.input);
+    if (parsed.success) {
+        plan = parsed.data.plan ?? '<empty>';
+    }
+    return (
+        <ToolSectionView>
+            <View style={{ paddingHorizontal: 8, marginTop: -10 }}>
+                <MarkdownView markdown={plan} sessionId={sessionId} />
+            </View>
+        </ToolSectionView>
+    );
+});

package/sources/components/tools/views/FileView.tsx

@@ -0,0 +1,118 @@
+/**
+ * View for 'file' tool calls (image attachments sent by user).
+ * Downloads and decrypts the encrypted blob via apiAttachments + sessionBlobKey,
+ * then renders the full image inline with the thumbhash as placeholder.
+ *
+ * Always renders inline when a ref is present — if dimensions are missing
+ * (older messages, iOS picker that didn't report w/h), a default 4:3 aspect
+ * ratio is used until the actual image lands and contentFit shows it.
+ */
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Image } from 'expo-image';
+import { Ionicons } from '@expo/vector-icons';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { ToolViewProps } from './_all';
+import { z } from 'zod';
+import { useAttachmentImage } from '@/hooks/useAttachmentImage';
+import { thumbhashToDataUri } from '@/utils/thumbhash';
+
+const fileInputSchema = z.object({
+    ref: z.string(),
+    name: z.string(),
+    size: z.number().optional(),
+    image: z.object({
+        width: z.number(),
+        height: z.number(),
+        thumbhash: z.string().optional(),
+    }).optional(),
+});
+
+const BORDER_RADIUS = 8;
+const MAX_IMAGE_WIDTH = 280;
+const MAX_IMAGE_HEIGHT = 360;
+const DEFAULT_ASPECT = 4 / 3; // when wire-format omits image{} dimensions
+
+export const FileView = React.memo<ToolViewProps>(({ tool, sessionId }) => {
+    const { theme } = useUnistyles();
+    const parsed = fileInputSchema.safeParse(tool.input);
+    if (!parsed.success) return null;
+
+    const { name, image, ref } = parsed.data;
+
+    const placeholder = React.useMemo(() => {
+        if (!image?.thumbhash) return undefined;
+        const uri = thumbhashToDataUri(image.thumbhash);
+        return uri ? { uri } : undefined;
+    }, [image?.thumbhash]);
+
+    const { uri, error } = useAttachmentImage(sessionId ?? '', sessionId ? ref : undefined);
+
+    // Pick display dimensions. Real w/h drives the aspect ratio when present,
+    // but a missing image{} block (older messages, iOS picker that didn't
+    // report dimensions) shouldn't downgrade to a compact filename row —
+    // the user attached an image, render it inline. Default to 4:3 at the
+    // bubble's max width; expo-image's contentFit="cover" handles the
+    // mismatch once the real image arrives.
+    const aspect = image && image.width > 0 && image.height > 0
+        ? image.width / image.height
+        : DEFAULT_ASPECT;
+    let displayW = Math.min(image?.width && image.width > 0 ? image.width : MAX_IMAGE_WIDTH, MAX_IMAGE_WIDTH);
+    let displayH = displayW / aspect;
+    if (displayH > MAX_IMAGE_HEIGHT) {
+        displayH = MAX_IMAGE_HEIGHT;
+        displayW = displayH * aspect;
+    }
+
+    return (
+        <View style={styles.inlineContainer}>
+            <View style={[styles.inlineWrapper, { borderColor: theme.colors.divider }]}>
+                <Image
+                    source={uri ? { uri } : undefined}
+                    placeholder={placeholder}
+                    style={[{ width: displayW, height: displayH }, styles.inlineImage]}
+                    contentFit="cover"
+                    transition={150}
+                />
+                {error && !uri && (
+                    <View style={[styles.errorOverlay, { backgroundColor: theme.colors.surfaceHigh }]}>
+                        <Ionicons name="alert-circle-outline" size={20} color={theme.colors.textSecondary} />
+                    </View>
+                )}
+            </View>
+            <Text style={[styles.filename, { color: theme.colors.textSecondary }]} numberOfLines={1}>{name}</Text>
+        </View>
+    );
+});
+
+const styles = StyleSheet.create(() => ({
+    inlineContainer: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        gap: 4,
+    },
+    inlineWrapper: {
+        borderRadius: BORDER_RADIUS,
+        borderWidth: 1,
+        overflow: 'hidden',
+        alignSelf: 'flex-start',
+        position: 'relative',
+    },
+    inlineImage: {
+        borderRadius: BORDER_RADIUS,
+    },
+    errorOverlay: {
+        position: 'absolute',
+        top: 4,
+        right: 4,
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    filename: {
+        fontSize: 13,
+        fontWeight: '500',
+    },
+}));

package/sources/components/tools/views/GeminiEditView.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { ToolSectionView } from '../../tools/ToolSectionView';
+import { ToolViewProps } from './_all';
+import { ToolDiffView } from '@/components/tools/ToolDiffView';
+import { trimIdent } from '@/utils/trimIdent';
+import { useSetting } from '@/sync/storage';
+
+/**
+ * Extract edit content from Gemini's nested input format.
+ * 
+ * Gemini sends data in nested structure:
+ * - tool.input.toolCall.content[0] 
+ * - tool.input.input[0]
+ * - tool.input (direct fields)
+ */
+function extractEditContent(input: any): { oldText: string; newText: string; path: string } {
+    // Try various locations where Gemini might put the edit data
+    
+    // 1. Check tool.input.toolCall.content[0]
+    if (input?.toolCall?.content?.[0]) {
+        const content = input.toolCall.content[0];
+        return {
+            oldText: content.oldText || '',
+            newText: content.newText || '',
+            path: content.path || ''
+        };
+    }
+    
+    // 2. Check tool.input.input[0] (array format)
+    if (Array.isArray(input?.input) && input.input[0]) {
+        const content = input.input[0];
+        return {
+            oldText: content.oldText || '',
+            newText: content.newText || '',
+            path: content.path || ''
+        };
+    }
+    
+    // 3. Check direct fields (simple format)
+    return {
+        oldText: input?.oldText || input?.old_string || '',
+        newText: input?.newText || input?.new_string || '',
+        path: input?.path || input?.file_path || ''
+    };
+}
+
+/**
+ * Gemini Edit View
+ * 
+ * Handles Gemini's edit tool format which uses:
+ * - oldText (instead of old_string)
+ * - newText (instead of new_string)
+ * - path (instead of file_path)
+ */
+export const GeminiEditView = React.memo<ToolViewProps>(({ tool }) => {
+    const showLineNumbersInToolViews = useSetting('showLineNumbersInToolViews');
+    
+    const { oldText, newText } = extractEditContent(tool.input);
+    const oldString = trimIdent(oldText);
+    const newString = trimIdent(newText);
+
+    return (
+        <>
+            <ToolSectionView fullWidth>
+                <ToolDiffView 
+                    oldText={oldString} 
+                    newText={newString} 
+                    showLineNumbers={showLineNumbersInToolViews}
+                    showPlusMinusSymbols={showLineNumbersInToolViews}
+                />
+            </ToolSectionView>
+        </>
+    );
+});
+

package/sources/components/tools/views/GeminiExecuteView.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { ToolSectionView } from '../../tools/ToolSectionView';
+import { ToolViewProps } from './_all';
+import { CodeView } from '@/components/CodeView';
+
+/**
+ * Extract execute command info from Gemini's nested input format.
+ */
+function extractExecuteInfo(input: any): { command: string; description: string; cwd: string } {
+    let command = '';
+    let description = '';
+    let cwd = '';
+    
+    // Try to get title from toolCall.title
+    // Format: "rm file.txt [current working directory /path] (description)"
+    if (input?.toolCall?.title) {
+        const fullTitle = input.toolCall.title;
+        
+        // Extract command (before [)
+        const bracketIdx = fullTitle.indexOf(' [');
+        if (bracketIdx > 0) {
+            command = fullTitle.substring(0, bracketIdx);
+        } else {
+            command = fullTitle;
+        }
+        
+        // Extract cwd from [current working directory /path]
+        const cwdMatch = fullTitle.match(/\[current working directory ([^\]]+)\]/);
+        if (cwdMatch) {
+            cwd = cwdMatch[1];
+        }
+        
+        // Extract description from (...)
+        const descMatch = fullTitle.match(/\(([^)]+)\)$/);
+        if (descMatch) {
+            description = descMatch[1];
+        }
+    }
+    
+    return { command, description, cwd };
+}
+
+/**
+ * Gemini Execute View
+ * 
+ * Displays shell/terminal commands from Gemini's execute tool.
+ */
+export const GeminiExecuteView = React.memo<ToolViewProps>(({ tool }) => {
+    const { command, description, cwd } = extractExecuteInfo(tool.input);
+
+    if (!command) {
+        return null;
+    }
+
+    return (
+        <>
+            <ToolSectionView fullWidth>
+                <CodeView code={command} />
+            </ToolSectionView>
+            {(description || cwd) && (
+                <View style={styles.infoContainer}>
+                    {cwd && (
+                        <Text style={styles.cwdText}>📁 {cwd}</Text>
+                    )}
+                    {description && (
+                        <Text style={styles.descriptionText}>{description}</Text>
+                    )}
+                </View>
+            )}
+        </>
+    );
+});
+
+const styles = StyleSheet.create((theme) => ({
+    infoContainer: {
+        paddingHorizontal: 12,
+        paddingBottom: 8,
+    },
+    cwdText: {
+        fontSize: 12,
+        color: theme.colors.textSecondary,
+        marginBottom: 4,
+    },
+    descriptionText: {
+        fontSize: 13,
+        color: theme.colors.textSecondary,
+        fontStyle: 'italic',
+    },
+}));
+

package/sources/components/tools/views/MCPToolView.tsx

@@ -0,0 +1,31 @@
+/**
+ * Converts snake_case string to PascalCase with spaces
+ * Example: "create_issue" -> "Create Issue"
+ */
+function snakeToPascalWithSpaces(str: string): string {
+    return str
+        .split('_')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ');
+}
+
+/**
+ * Formats MCP tool name to display title
+ * Example: "mcp__linear__create_issue" -> "MCP: Linear Create Issue"
+ */
+export function formatMCPTitle(toolName: string): string {
+    // Remove "mcp__" prefix
+    const withoutPrefix = toolName.replace(/^mcp__/, '');
+    
+    // Split into parts by "__"
+    const parts = withoutPrefix.split('__');
+    
+    if (parts.length >= 2) {
+        const serverName = snakeToPascalWithSpaces(parts[0]);
+        const toolNamePart = snakeToPascalWithSpaces(parts.slice(1).join('_'));
+        return `MCP: ${serverName} ${toolNamePart}`;
+    }
+    
+    // Fallback if format doesn't match expected pattern
+    return `MCP: ${snakeToPascalWithSpaces(withoutPrefix)}`;
+}

package/sources/components/tools/views/MultiEditView.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { ToolSectionView } from '../../tools/ToolSectionView';
+import { ToolViewProps } from './_all';
+import { ToolDiffView } from '@/components/tools/ToolDiffView';
+import { knownTools } from '../../tools/knownTools';
+import { trimIdent } from '@/utils/trimIdent';
+
+export const MultiEditView = React.memo<ToolViewProps>(({ tool }) => {
+    let edits: Array<{ old_string: string; new_string: string; replace_all?: boolean }> = [];
+
+    const parsed = knownTools.MultiEdit.input.safeParse(tool.input);
+    if (parsed.success && parsed.data.edits) {
+        edits = parsed.data.edits;
+    }
+
+    if (edits.length === 0) {
+        return null;
+    }
+
+    return (
+        <ToolSectionView fullWidth>
+            {edits.map((edit, index) => {
+                const oldString = trimIdent(edit.old_string || '');
+                const newString = trimIdent(edit.new_string || '');
+                return (
+                    <View key={index}>
+                        <ToolDiffView oldText={oldString} newText={newString} />
+                        {index < edits.length - 1 && <View style={styles.separator} />}
+                    </View>
+                );
+            })}
+        </ToolSectionView>
+    );
+});
+
+const styles = StyleSheet.create({
+    separator: {
+        height: 8,
+    },
+});