nastech-app 1.0.0

package/sources/components/navigation/Header.tsx

@@ -0,0 +1,252 @@
+import * as React from 'react';
+import { View, Text, Platform, StatusBar, Pressable } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import type { NativeStackHeaderProps } from '@react-navigation/native-stack';
+import { Ionicons } from '@expo/vector-icons';
+import { layout } from '../layout';
+import { useHeaderHeight, useIsTablet } from '@/utils/responsive';
+import { Typography } from '@/constants/Typography';
+import { StyleSheet } from 'react-native-unistyles';
+
+interface HeaderProps {
+    title?: React.ReactNode;
+    subtitle?: string;
+    headerLeft?: (() => React.ReactNode) | null;
+    headerRight?: (() => React.ReactNode) | null;
+    headerStyle?: any;
+    headerTitleStyle?: any;
+    headerSubtitleStyle?: any;
+    headerTintColor?: string;
+    headerBackgroundColor?: string;
+    headerShadowVisible?: boolean;
+    headerTransparent?: boolean;
+    safeAreaEnabled?: boolean;
+}
+
+export const Header = React.memo((props: HeaderProps) => {
+    const styles = stylesheet;
+
+    const {
+        title,
+        subtitle,
+        headerLeft,
+        headerRight,
+        headerStyle,
+        headerTitleStyle,
+        headerSubtitleStyle,
+        headerTintColor, // Accept but ignore - using theme instead
+        headerBackgroundColor, // Accept but ignore - using theme instead
+        headerShadowVisible = true,
+        headerTransparent = false,
+        safeAreaEnabled = true,
+    } = props;
+
+    const insets = useSafeAreaInsets();
+    const paddingTop = safeAreaEnabled ? insets.top : 0;
+    const headerHeight = useHeaderHeight();
+
+    const containerStyle = [
+        styles.container,
+        headerTransparent && styles.containerTransparent,
+        !headerTransparent && styles.containerNormal,
+        {
+            paddingTop,
+        },
+        headerShadowVisible && styles.shadow,
+        headerStyle,
+    ];
+
+    const subtitleStyle = [
+        styles.subtitle,
+        headerSubtitleStyle,
+    ];
+
+    return (
+        <View style={[containerStyle]}>
+            <View style={styles.contentWrapper}>
+                <View style={[styles.content, { height: headerHeight }]}>
+                    <View style={styles.leftContainer}>
+                        {headerLeft && headerLeft()}
+                    </View>
+
+                    <View style={styles.centerContainer}>
+                        {title}
+                        {subtitle && <Text style={subtitleStyle} numberOfLines={1}>{subtitle}</Text>}
+                    </View>
+
+                    <View style={styles.rightContainer}>
+                        {headerRight && headerRight()}
+                    </View>
+                </View>
+            </View>
+        </View>
+    );
+});
+
+// Extended navigation options to support subtitle
+interface ExtendedNavigationOptions extends Partial<NativeStackHeaderProps['options']> {
+    headerSubtitle?: string;
+    headerSubtitleStyle?: any;
+}
+
+// Default back button component
+const DefaultBackButton: React.FC<{ tintColor?: string; onPress: () => void }> = ({ tintColor = '#000', onPress }) => {
+    return (
+        <Pressable onPress={onPress} hitSlop={15}>
+            <Ionicons
+                name={Platform.OS === 'ios' ? 'chevron-back' : 'arrow-back'}
+                size={24}
+                color={tintColor}
+            />
+        </Pressable>
+    );
+};
+
+// Component wrapper for navigation header
+const NavigationHeaderComponent: React.FC<NativeStackHeaderProps> = React.memo((props) => {
+    const { options, route, back, navigation } = props;
+    const extendedOptions = options as ExtendedNavigationOptions;
+    const isTablet = useIsTablet();
+
+    // Hide back button on tablet — navigation is handled via sidebar and persistent header
+    const shouldHideBackButton = isTablet;
+
+    // Extract title - handle both string and function types
+    let title: React.ReactNode | null = null;
+    if (options.headerTitle) {
+        if (typeof options.headerTitle === 'string') {
+            title = (
+                <Text style={[
+                    { fontSize: 17, fontWeight: '600', textAlign: Platform.OS === 'ios' ? 'center' : 'left', color: options.headerTintColor || '#000' },
+                    Typography.default('semiBold'),
+                    options.headerTitleStyle
+                ]}>
+                    {options.headerTitle}
+                </Text>
+            );
+        } else if (typeof options.headerTitle === 'function') {
+            // Handle function type headerTitle
+            title = options.headerTitle({ children: route.name, tintColor: options.headerTintColor });
+        }
+    } else if (typeof options.title === 'string') {
+        title = (
+            <Text style={[
+                { fontSize: 17, fontWeight: '600', textAlign: Platform.OS === 'ios' ? 'center' : 'left', color: options.headerTintColor || '#000' },
+                Typography.default('semiBold'),
+                options.headerTitleStyle
+            ]}>
+                {options.title}
+            </Text>
+        );
+    }
+
+    // Determine header left content
+    let headerLeftContent: (() => React.ReactNode) | undefined | null = null;
+    if (options.headerLeft) {
+        // Use custom headerLeft if provided
+        headerLeftContent = () => options.headerLeft!({ canGoBack: !!back, tintColor: options.headerTintColor });
+    } else if (back && options.headerBackVisible !== false && !shouldHideBackButton) {
+        // Show default back button if can go back and not explicitly hidden
+        // Also hide on tablet when at first or second screen
+        headerLeftContent = () => (
+            <DefaultBackButton
+                tintColor={options.headerTintColor}
+                onPress={() => navigation.goBack()}
+            />
+        );
+    }
+
+    return (
+        <Header
+            title={title}
+            subtitle={extendedOptions.headerSubtitle}
+            headerLeft={headerLeftContent}
+            headerRight={options.headerRight ?
+                () => options.headerRight!({ canGoBack: !!back, tintColor: options.headerTintColor }) :
+                undefined
+            }
+            headerStyle={options.headerStyle}
+            headerTitleStyle={options.headerTitleStyle}
+            headerSubtitleStyle={extendedOptions.headerSubtitleStyle}
+            headerShadowVisible={options.headerShadowVisible}
+            headerTransparent={options.headerTransparent}
+        />
+    );
+});
+
+// Export a render function for React Navigation
+export const createHeader = (props: NativeStackHeaderProps) => {
+    if (props.options.headerShown === false) {
+        return null;
+    }
+    return <NavigationHeaderComponent {...props} />;
+};
+
+const stylesheet = StyleSheet.create((theme, runtime) => ({
+    container: {
+        position: 'relative',
+        zIndex: 100,
+    },
+    containerTransparent: {
+        backgroundColor: 'transparent',
+    },
+    containerNormal: {
+        backgroundColor: theme.colors.header.background,
+    },
+    contentWrapper: {
+        width: '100%',
+        alignItems: 'center',
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: Platform.select({ ios: 8, default: 16 }),
+        width: '100%',
+        maxWidth: layout.headerMaxWidth,
+    },
+    leftContainer: {
+        flexGrow: 0,
+        flexShrink: 0,
+        alignItems: 'flex-start',
+    },
+    centerContainer: {
+        flexGrow: 1,
+        flexBasis: 0,
+        alignSelf: 'stretch',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: Platform.OS === 'ios' ? 'center' : 'flex-start',
+        paddingHorizontal: 12,
+    },
+    rightContainer: {
+        flexGrow: 0,
+        flexShrink: 0,
+        alignItems: 'flex-end',
+    },
+    title: {
+        fontSize: 17,
+        fontWeight: '600',
+        textAlign: 'center',
+        color: theme.colors.header.tint,
+        ...Typography.default('semiBold'),
+    },
+    subtitle: {
+        fontSize: 13,
+        fontWeight: '400',
+        textAlign: Platform.OS === 'ios' ? 'center' : 'left',
+        marginTop: 2,
+        color: theme.colors.header.tint,
+        ...Typography.default('regular'),
+    },
+    shadow: {
+        shadowColor: theme.colors.shadow.color,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: theme.colors.shadow.opacity,
+        shadowRadius: 3,
+        elevation: 4,
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.15)',
+    },
+    backButton: {
+        color: theme.colors.header.tint,
+    },
+}));

package/sources/components/parseLocalCommandMessage.spec.ts

@@ -0,0 +1,96 @@
+import { describe, it, expect } from 'vitest';
+import { parseLocalCommandMessage, isUserSlashCommandEcho } from './parseLocalCommandMessage';
+
+describe('parseLocalCommandMessage', () => {
+    it('hides the local-command caveat wrapper', () => {
+        const text = '<local-command-caveat>The user typed a slash command.</local-command-caveat>';
+        expect(parseLocalCommandMessage(text)).toEqual({ kind: 'caveat' });
+    });
+
+    it('collapses a no-arg command to a chip', () => {
+        const text = '<command-message>compact</command-message><command-name>/compact</command-name>';
+        expect(parseLocalCommandMessage(text)).toEqual({
+            kind: 'command-run',
+            commandName: 'compact',
+            args: undefined,
+        });
+    });
+
+    it('collapses a command WITH args to a chip and surfaces the args', () => {
+        const text =
+            '<command-message>brainstorming is running</command-message>' +
+            '<command-name>/superpowers:brainstorming</command-name>' +
+            '<command-args>think of a feature so I can charge money</command-args>';
+        expect(parseLocalCommandMessage(text)).toEqual({
+            kind: 'command-run',
+            commandName: 'superpowers:brainstorming',
+            args: 'think of a feature so I can charge money',
+        });
+    });
+
+    it('trims surrounding whitespace inside command-args', () => {
+        const text =
+            '<command-message>x</command-message><command-name>/x</command-name>' +
+            '<command-args>   spaced arg   </command-args>';
+        const parsed = parseLocalCommandMessage(text);
+        expect(parsed).toEqual({ kind: 'command-run', commandName: 'x', args: 'spaced arg' });
+    });
+
+    it('treats an empty command-args as no args', () => {
+        const text =
+            '<command-message>x</command-message><command-name>/x</command-name><command-args></command-args>';
+        expect(parseLocalCommandMessage(text)).toEqual({
+            kind: 'command-run',
+            commandName: 'x',
+            args: undefined,
+        });
+    });
+
+    it('keeps real text but drops the wrapper tags for mixed content', () => {
+        const text =
+            'Please run this:\n<command-message>x</command-message><command-name>/x</command-name><command-args>a</command-args>';
+        expect(parseLocalCommandMessage(text)).toEqual({
+            kind: 'text',
+            text: 'Please run this:',
+        });
+    });
+
+    it('passes ordinary user text through untouched', () => {
+        const text = 'just a normal message';
+        expect(parseLocalCommandMessage(text)).toEqual({ kind: 'text', text });
+    });
+});
+
+describe('isUserSlashCommandEcho', () => {
+    it('detects a bare command echo with a localId', () => {
+        expect(isUserSlashCommandEcho('/compact', true)).toBe(true);
+    });
+
+    it('detects a command-with-args echo with a localId', () => {
+        expect(isUserSlashCommandEcho('/superpowers:brainstorming make me rich', true)).toBe(true);
+    });
+
+    it('ignores echoes without a localId (SDK-originated, not user-sent)', () => {
+        expect(isUserSlashCommandEcho('/compact', false)).toBe(false);
+    });
+
+    it('does not treat the SDK wrapper itself as a raw echo', () => {
+        const wrapper =
+            '<command-message>x</command-message><command-name>/x</command-name><command-args>a</command-args>';
+        expect(isUserSlashCommandEcho(wrapper, true)).toBe(false);
+    });
+
+    it('does not match unix-style paths', () => {
+        expect(isUserSlashCommandEcho('/etc/hosts is the file', true)).toBe(false);
+        expect(isUserSlashCommandEcho('/usr/local/bin', true)).toBe(false);
+    });
+
+    it('does not match a lone slash or ordinary text', () => {
+        expect(isUserSlashCommandEcho('/', true)).toBe(false);
+        expect(isUserSlashCommandEcho('please run /compact later', true)).toBe(false);
+    });
+
+    it('tolerates surrounding whitespace', () => {
+        expect(isUserSlashCommandEcho('  /clear  ', true)).toBe(true);
+    });
+});

package/sources/components/parseLocalCommandMessage.ts

@@ -0,0 +1,97 @@
+/**
+ * Parses Claude Agent SDK's local-slash-command wrapper messages.
+ *
+ * When a `/foo` command runs, the SDK injects synthetic user messages whose
+ * content is XML-like tags such as:
+ *   <local-command-caveat>...</local-command-caveat>
+ *   <command-message>foo</command-message><command-name>/foo</command-name>
+ *   <command-message>foo</command-message><command-name>/foo</command-name><command-args>the args</command-args>
+ *
+ * Rendered through markdown unchanged they look like raw HTML in the chat —
+ * and because the old parser only stripped <command-message>/<command-name>,
+ * any command WITH arguments left a non-empty <command-args> tag behind, so
+ * it fell through to plain text instead of collapsing to a chip (looked like
+ * the user's message duplicated, and the "command ran" chip never showed).
+ *
+ * We strip / collapse them into structured intents the renderer can show
+ * (or hide) cleanly, carrying the args out separately so the renderer can
+ * display them as the user's actual prompt.
+ */
+
+export type LocalCommandMessage =
+    | { kind: 'caveat' }
+    | { kind: 'command-run'; commandName: string; args?: string }
+    | { kind: 'text'; text: string };
+
+const CAVEAT_RE = /^\s*<local-command-caveat>[\s\S]*?<\/local-command-caveat>\s*$/;
+const COMMAND_NAME_RE = /<command-name>\s*\/?([^<]+?)\s*<\/command-name>/;
+const COMMAND_ARGS_RE = /<command-args>\s*([\s\S]*?)\s*<\/command-args>/;
+const COMMAND_MESSAGE_RE = /<command-message>[\s\S]*?<\/command-message>/g;
+const COMMAND_NAME_TAG_RE = /<command-name>[\s\S]*?<\/command-name>/g;
+const COMMAND_ARGS_TAG_RE = /<command-args>[\s\S]*?<\/command-args>/g;
+
+export function parseLocalCommandMessage(text: string): LocalCommandMessage {
+    if (CAVEAT_RE.test(text)) {
+        return { kind: 'caveat' };
+    }
+
+    const nameMatch = text.match(COMMAND_NAME_RE);
+    if (nameMatch) {
+        const argsMatch = text.match(COMMAND_ARGS_RE);
+        const args = argsMatch?.[1].trim();
+
+        // If the message is just the command wrappers (after stripping all of
+        // them only whitespace remains), collapse to a chip. The args, if any,
+        // are surfaced separately so the renderer can show them as the user's
+        // actual prompt rather than as raw XML.
+        const stripped = text
+            .replace(COMMAND_MESSAGE_RE, '')
+            .replace(COMMAND_NAME_TAG_RE, '')
+            .replace(COMMAND_ARGS_TAG_RE, '')
+            .trim();
+        if (stripped.length === 0) {
+            return {
+                kind: 'command-run',
+                commandName: nameMatch[1],
+                args: args && args.length > 0 ? args : undefined,
+            };
+        }
+        // Mixed content: keep the surrounding text, drop the tags.
+        return { kind: 'text', text: stripped };
+    }
+
+    return { kind: 'text', text };
+}
+
+// A pure slash-command invocation: starts with `/`, a command token
+// (letters, digits, `:`, `-`, `_`), optionally followed by whitespace +
+// args. Deliberately strict so paths like `/etc/hosts` or a lone `/`
+// do NOT match.
+const SLASH_COMMAND_RE = /^\/[a-zA-Z][\w:-]*(?:\s[\s\S]*)?$/;
+
+/**
+ * True when this user-text message is the user's OWN echoed slash-command
+ * input (e.g. `/superpowers:brainstorming do the thing`) that the Claude
+ * Agent SDK will re-emit as a `<command-message>/<command-name>` wrapper.
+ *
+ * NasTech shows the user's sent message optimistically (it carries a
+ * `localId`); the SDK then injects the canonical wrapper (no `localId`,
+ * rendered as a chip). Showing both looks like a duplicate, so we hide
+ * the raw echo and let the wrapper chip stand in — matching how the
+ * Claude Code terminal renders slash commands.
+ *
+ * Gated on `hasLocalId` so we only ever hide a message the user actually
+ * sent from NasTech, never an agent/SDK-originated one.
+ */
+export function isUserSlashCommandEcho(text: string, hasLocalId: boolean): boolean {
+    if (!hasLocalId) {
+        return false;
+    }
+    const trimmed = text.trim();
+    if (!SLASH_COMMAND_RE.test(trimmed)) {
+        return false;
+    }
+    // Guard: a real wrapper message also contains <command-name>; never
+    // treat that as a raw echo.
+    return parseLocalCommandMessage(trimmed).kind === 'text';
+}

package/sources/components/qr/QRCode.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import { Canvas, Rect, Path, RoundedRect, DiffRect, rrect, rect, Group } from '@shopify/react-native-skia';
+import { createQRMatrix } from './qrMatrix';
+
+// Check if point is in a locator pattern area
+function isInLocatorPattern(x: number, y: number, matrixSize: number): boolean {
+    // Top-left pattern
+    if (x < 7 && y < 7) return true;
+    // Top-right pattern  
+    if (x >= matrixSize - 7 && y < 7) return true;
+    // Bottom-left pattern
+    if (x < 7 && y >= matrixSize - 7) return true;
+    return false;
+}
+
+// Generate path string for rectangle with selective rounded corners
+function getRectPath(x: number, y: number, w: number, h: number,
+    tlr: number, trr: number, brr: number, blr: number): string {
+    return `M ${x} ${y + tlr}
+            A ${tlr} ${tlr} 0 0 1 ${x + tlr} ${y}
+            L ${x + w - trr} ${y}
+            A ${trr} ${trr} 0 0 1 ${x + w} ${y + trr}
+            L ${x + w} ${y + h - brr}
+            A ${brr} ${brr} 0 0 1 ${x + w - brr} ${y + h}
+            L ${x + blr} ${y + h}
+            A ${blr} ${blr} 0 0 1 ${x} ${y + h - blr}
+            Z`;
+}
+
+interface QRCodeProps {
+    data: string;
+    size?: number;
+    errorCorrectionLevel?: 'low' | 'medium' | 'quartile' | 'high';
+    foregroundColor?: string;
+    backgroundColor?: string;
+}
+
+export const QRCode = React.memo((props: QRCodeProps) => {
+    const {
+        data,
+        size = 200,
+        errorCorrectionLevel = 'medium',
+        foregroundColor = '#000000',
+        backgroundColor = '#FFFFFF'
+    } = props;
+
+    // Generate QR matrix
+    const qrMatrix = React.useMemo(() => {
+        return createQRMatrix(data, errorCorrectionLevel);
+    }, [data, errorCorrectionLevel]);
+
+    // Calculate module size
+    const moduleSize = size / (qrMatrix.size + 4/* space around */);
+
+    // Generate modules with rounded corners
+    const modules = React.useMemo(() => {
+        const elements: React.ReactElement[] = [];
+
+        for (let y = 0; y < qrMatrix.size; y++) {
+            for (let x = 0; x < qrMatrix.size; x++) {
+                // Skip locator pattern areas
+                if (isInLocatorPattern(x, y, qrMatrix.size)) continue;
+
+                const neighbors = qrMatrix.getNeighbors(x, y);
+
+                if (neighbors.current) {
+                    let tlr = 0, trr = 0, brr = 0, blr = 0;
+                    const cornerRadius = Math.min(moduleSize / 3, size * 0.01);
+
+                    // Calculate rounded corners based on neighbors
+                    if (!neighbors.top && !neighbors.left) tlr = cornerRadius;    // top-left
+                    if (!neighbors.top && !neighbors.right) blr = cornerRadius;   // bottom-left (when no top and no right)
+                    if (!neighbors.bottom && !neighbors.left) trr = cornerRadius; // top-right (when no bottom and no left)
+                    if (!neighbors.bottom && !neighbors.right) brr = cornerRadius; // bottom-right
+
+                    // Use Path if any corner is rounded
+                    if (tlr || trr || brr || blr) {
+                        const path = getRectPath(
+                            x * moduleSize - 0.5,
+                            y * moduleSize - 0.5,
+                            moduleSize + 1,  // Slight overlap to avoid gaps
+                            moduleSize + 1,
+                            tlr, trr, brr, blr
+                        );
+
+                        elements.push(
+                            <Path
+                                key={`${x}-${y}`}
+                                path={path}
+                                color={foregroundColor}
+                            />
+                        );
+                    } else {
+                        // Use simple Rect for modules with no rounded corners
+                        elements.push(
+                            <Rect
+                                key={`${x}-${y}`}
+                                x={x * moduleSize - 0.5}
+                                y={y * moduleSize - 0.5}
+                                width={moduleSize + 1}
+                                height={moduleSize + 1}
+                                color={foregroundColor}
+                            />
+                        );
+                    }
+                }
+            }
+        }
+
+        return elements;
+    }, [qrMatrix, moduleSize, foregroundColor]);
+
+    const baseRadius = 0.5;
+
+    return (
+        <Canvas style={{ width: size, height: size }}>
+            {/* Background */}
+            <RoundedRect
+                x={0}
+                y={0}
+                width={size}
+                height={size}
+                color={backgroundColor}
+                r={moduleSize * baseRadius * 3}
+            />
+
+            <Group transform={[{ translateX: moduleSize * 2 }, { translateY: moduleSize * 2 }]}>
+                {/* QR modules with rounded corners */}
+                {modules}
+
+                {/* Top-left locator pattern */}
+                <DiffRect
+                    inner={rrect(rect(moduleSize, moduleSize, 5 * moduleSize, 5 * moduleSize), moduleSize * baseRadius, moduleSize * baseRadius)}
+                    outer={rrect(rect(0, 0, 7 * moduleSize, 7 * moduleSize), moduleSize * (baseRadius + 1), moduleSize * (baseRadius + 1))}
+                    color={foregroundColor}
+                />
+                <RoundedRect
+                    x={2 * moduleSize}
+                    y={2 * moduleSize}
+                    width={3 * moduleSize}
+                    height={3 * moduleSize}
+                    r={moduleSize}
+                    color={foregroundColor}
+                />
+
+                {/* Top-right locator pattern */}
+                <DiffRect
+                    inner={rrect(rect((qrMatrix.size - 7 + 1) * moduleSize, moduleSize, 5 * moduleSize, 5 * moduleSize), moduleSize * baseRadius, moduleSize * baseRadius)}
+                    outer={rrect(rect((qrMatrix.size - 7) * moduleSize, 0, 7 * moduleSize, 7 * moduleSize), moduleSize * (baseRadius + 1), moduleSize * (baseRadius + 1))}
+                    color={foregroundColor}
+                />
+                <RoundedRect
+                    x={(qrMatrix.size - 7 + 2) * moduleSize}
+                    y={2 * moduleSize}
+                    width={3 * moduleSize}
+                    height={3 * moduleSize}
+                    r={moduleSize}
+                    color={foregroundColor}
+                />
+
+                {/* Bottom-left locator pattern */}
+                <DiffRect
+                    inner={rrect(rect(moduleSize, (qrMatrix.size - 7 + 1) * moduleSize, 5 * moduleSize, 5 * moduleSize), moduleSize * baseRadius, moduleSize * baseRadius)}
+                    outer={rrect(rect(0, (qrMatrix.size - 7) * moduleSize, 7 * moduleSize, 7 * moduleSize), moduleSize * (baseRadius + 1), moduleSize * (baseRadius + 1))}
+                    color={foregroundColor}
+                />
+                <RoundedRect
+                    x={2 * moduleSize}
+                    y={(qrMatrix.size - 7 + 2) * moduleSize}
+                    width={3 * moduleSize}
+                    height={3 * moduleSize}
+                    r={moduleSize}
+                    color={foregroundColor}
+                />
+            </Group>
+        </Canvas>
+    );
+});