nastech-app 1.0.0

package/sources/changelog/changelog.json

@@ -0,0 +1,60 @@
+{
+  "entries": [
+    {
+      "title": "May 15 — Cleaner, steadier chat",
+      "summary": "Less clutter in the conversation, fewer stuck states, smoother scrolling.",
+      "markdown": "- Slash commands render as a clean chip — no more raw command markup or duplicated text.\n- Skill runs no longer dump a wall of raw instructions into the chat.\n- Chats pick up their real title instead of staying stuck on \"New chat\".\n- The view stays put while the agent streams — no more scroll jumps when you've scrolled up to read.\n- \"Permission required\" prompts clear properly after a session is interrupted.\n- Resumed sessions no longer replay your whole history as duplicate messages.\n- Slash-command and file autocomplete shows more results and keeps the highlighted item in view."
+    },
+    {
+      "title": "May 13 — Faster long chats",
+      "summary": "Long sessions open instantly. Messages load latest-first with older history streaming in on scroll.",
+      "markdown": "- Parallel decryption — no more freezing on sessions with thousands of messages.\n- Backward pagination — scroll up to load history on demand."
+    },
+    {
+      "title": "May 7 — Session retention, new sidebar, code editor, session branching",
+      "summary": "Desktop got a full refresh with a file browser, built-in editor, and zen mode. Sessions can now be branched or rewound.",
+      "markdown": "**Session retention: 2 months.** Older sessions are cleaned up automatically to keep storage costs manageable.\n\n## Features and fixes\n\n- Thinking effort selection bug fixed.\n- Smarter push notifications — suppressed when you're already in the app.\n- Unread dots persist on sessions until you open them.\n- Redesigned sidebar with file browser, code editor, and zen mode.\n- Fixed stale sessions refusing to load, blank screen on launch, dual cursors in remote mode, `claude --resume` not finding NasTech sessions.\n\n## Experimental\n\nEnable in Settings → Features:\n\n- File diffs sidebar — see git changes next to chat on desktop.\n- Session fork & rewind — branch off any session or roll back to any message."
+    },
+    {
+      "title": "April 26 — Voice fixes, diffs, scroll",
+      "summary": "Voice actually works reliably now, plus better content rendering.",
+      "markdown": "- Voice calls no longer break on second session.\n- Tables and code blocks scroll horizontally.\n- New diff viewer with syntax highlighting and unified/split toggle.\n- Model and effort choices persist on mobile.\n- Permission prompts no longer get lost.\n- Settings stop randomly resetting during sync.\n- Scroll-to-bottom button in chat.\n- Delete machines from settings."
+    },
+    {
+      "title": "April 8 — Gemini models, voice onboarding, CLI fixes",
+      "summary": "New models, smoother onboarding, fewer CLI hangs.",
+      "markdown": "- Latest Gemini models in the picker.\n- Better voice onboarding — clearer first-run prompts.\n- CLI plan approval buttons actually show up now.\n- CLI background tasks and Codex turns no longer hang."
+    },
+    {
+      "title": "March 19 — New session screen, git worktrees, more agents",
+      "summary": "Completely new way to start sessions, plus worktree support and more agents.",
+      "markdown": "- New session composer — pick machine, worktree, draft persists.\n- Git worktree management from the app. Auto-cleanup on delete.\n- Auto plan mode when your agent enters planning.\n- OpenClaw as a selectable agent.\n- Session quick actions, resume, delete from info screen.\n- \"Bypass\" renamed to \"yolo\"."
+    },
+    {
+      "title": "December 22 — Agent updates, voice changes, tables",
+      "summary": "Agent config changes and voice pricing heads-up.",
+      "markdown": "- Gemini support coming via ACP.\n- Model config removed from app — use CLI defaults.\n- Voice going subscription after 3 free trials.\n- Markdown tables render properly now."
+    },
+    {
+      "title": "September 12 — Codex, daemon mode, one-tap launch",
+      "summary": "Sessions start instantly now. No more manual CLI startup.",
+      "markdown": "- Codex support for code completion and generation.\n- Daemon mode — sessions start instantly without manual CLI startup.\n- One-tap launch from mobile.\n- Connect Anthropic and GPT accounts."
+    },
+    {
+      "title": "August 29 — GitHub integration",
+      "summary": "Your GitHub identity in NasTech.",
+      "markdown": "- Connect your GitHub account via OAuth.\n- Avatar, name, and bio sync to the app.\n- Encrypted token storage."
+    },
+    {
+      "title": "June 26 — QR login, dark mode, voice",
+      "summary": "Link devices instantly, look good doing it.",
+      "markdown": "- QR code auth for instant device linking.\n- Dark theme with system preference detection.\n- Faster voice responses.\n- Modified file indicators in session list.\n- 15+ languages for voice."
+    },
+    {
+      "title": "May 12 — Hello world",
+      "summary": "First release. Everything is new.",
+      "markdown": "- E2E encrypted sessions.\n- Voice assistant.\n- File manager with syntax highlighting.\n- Real-time sync across devices."
+    }
+  ],
+  "latestTitle": "May 15 — Cleaner, steadier chat"
+}

package/sources/changelog/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './parser';
+export * from './storage';

package/sources/changelog/parser.ts

@@ -0,0 +1,23 @@
+import { ChangelogData, ChangelogEntry } from './types';
+
+let changelogData: ChangelogData | null = null;
+
+export function getChangelogData(): ChangelogData {
+    if (!changelogData) {
+        try {
+            changelogData = require('./changelog.json') as ChangelogData;
+        } catch (error) {
+            console.warn('Changelog data not found, returning empty changelog');
+            changelogData = { entries: [], latestTitle: '' };
+        }
+    }
+    return changelogData;
+}
+
+export function getChangelogEntries(): ChangelogEntry[] {
+    return getChangelogData().entries;
+}
+
+export function getLatestTitle(): string {
+    return getChangelogData().latestTitle;
+}

package/sources/changelog/storage.ts

@@ -0,0 +1,17 @@
+import { MMKV } from 'react-native-mmkv';
+
+const mmkv = new MMKV();
+
+const LAST_VIEWED_KEY = 'changelog-last-viewed-title';
+
+export function getLastViewedTitle(): string {
+    return mmkv.getString(LAST_VIEWED_KEY) ?? '';
+}
+
+export function setLastViewedTitle(title: string): void {
+    mmkv.set(LAST_VIEWED_KEY, title);
+}
+
+export function hasUnreadChangelog(latestTitle: string): boolean {
+    return latestTitle !== '' && latestTitle !== getLastViewedTitle();
+}

package/sources/changelog/types.ts

@@ -0,0 +1,10 @@
+export interface ChangelogEntry {
+    title: string;
+    summary: string;
+    markdown: string;
+}
+
+export interface ChangelogData {
+    entries: ChangelogEntry[];
+    latestTitle: string;
+}

package/sources/components/ActiveSessionsGroupCompact.tsx

@@ -0,0 +1,567 @@
+import React from 'react';
+import { View, Pressable, Platform } from 'react-native';
+import { Swipeable } from 'react-native-gesture-handler';
+import { Text } from '@/components/StyledText';
+import { Machine } from '@/sync/storageTypes';
+import { SessionRowData } from '@/sync/storage';
+import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import { type SessionState, formatPathRelativeToHome, vibingMessages, formatLastSeen } from '@/utils/sessionUtils';
+import { Avatar } from './Avatar';
+import { Typography } from '@/constants/Typography';
+import { StatusDot } from './StatusDot';
+import { useAllMachines, useSessionGitStatus } from '@/sync/storage';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { t } from '@/text';
+import { useNavigateToSession } from '@/hooks/useNavigateToSession';
+import { useNasTechAction } from '@/hooks/useNasTechAction';
+import { NasTechError } from '@/utils/errors';
+import { SessionActionsAnchor, SessionActionsPopover } from './SessionActionsPopover';
+import { useSessionActionAlert } from '@/hooks/useSessionQuickActions';
+import { sessionKill } from '@/sync/ops';
+import { isWorktreePath, getRepoPath, getWorktreeName } from '@/utils/worktree';
+import { useNewSessionDraft } from '@/hooks/useNewSessionDraft';
+import { useRouter } from 'expo-router';
+
+const STATUS_CONFIG: Record<SessionState, { color: string; dotColor: string; isPulsing: boolean; isConnected: boolean }> = {
+    disconnected: { color: '#999', dotColor: '#999', isPulsing: false, isConnected: false },
+    thinking: { color: '#007AFF', dotColor: '#007AFF', isPulsing: true, isConnected: true },
+    waiting: { color: '#34C759', dotColor: '#34C759', isPulsing: false, isConnected: true },
+    permission_required: { color: '#FF9500', dotColor: '#FF9500', isPulsing: true, isConnected: true },
+};
+
+interface ActiveSessionsGroupProps {
+    sessions: SessionRowData[];
+    selectedSessionId?: string;
+}
+
+/**
+ * Hook to get git display info for a section header:
+ * branch name, line changes, and worktree status.
+ */
+function useSectionGitInfo(sessionId: string) {
+    const gitStatus = useSessionGitStatus(sessionId);
+
+    return React.useMemo(() => {
+        if (!gitStatus || gitStatus.lastUpdatedAt === 0) {
+            return { branch: null, linesAdded: 0, linesRemoved: 0, hasChanges: false };
+        }
+        return {
+            branch: gitStatus.branch,
+            linesAdded: gitStatus.unstagedLinesAdded,
+            linesRemoved: gitStatus.unstagedLinesRemoved,
+            hasChanges: gitStatus.unstagedLinesAdded > 0 || gitStatus.unstagedLinesRemoved > 0,
+        };
+    }, [gitStatus]);
+}
+
+// Section header: avatar | path + branch + tree icon + line changes | + button
+const SectionHeader = React.memo(({ session, displayPath }: { session: SessionRowData; displayPath: string }) => {
+    const styles = stylesheet;
+    const { theme } = useUnistyles();
+    const router = useRouter();
+    const draft = useNewSessionDraft();
+
+    const sessionPath = session.path || '';
+    const isWorktree = isWorktreePath(sessionPath);
+    const repoPath = isWorktree ? getRepoPath(sessionPath) : sessionPath;
+    const repoDisplayPath = isWorktree
+        ? formatPathRelativeToHome(repoPath, session.homeDir ?? undefined)
+        : displayPath;
+    const repoFolderName = repoPath.split(/[/\\]/).filter(Boolean).pop() || repoDisplayPath;
+    const worktreeName = isWorktree ? getWorktreeName(sessionPath) : null;
+
+    const gitInfo = useSectionGitInfo(session.id);
+    const branchName = worktreeName || gitInfo.branch;
+    const hasBranch = !!branchName;
+
+    const handleAdd = React.useCallback(() => {
+        const machineId = session.machineId;
+        if (machineId) {
+            draft.setMachineId(machineId);
+        }
+        const pathToSet = formatPathRelativeToHome(repoPath, session.homeDir ?? undefined);
+        draft.setPath(pathToSet);
+        draft.setSessionType(isWorktree ? 'worktree' : 'simple');
+        draft.setWorktreeKey(isWorktree ? sessionPath : null);
+        router.navigate('/new');
+    }, [session.machineId, session.homeDir, repoPath, isWorktree, sessionPath, draft, router]);
+
+    const [isHovered, setIsHovered] = React.useState(false);
+
+    return (
+        <View
+            style={hasBranch ? styles.sectionHeader : styles.sectionHeaderSingleLine}
+            // @ts-ignore - Web only events
+            onMouseEnter={() => setIsHovered(true)}
+            // @ts-ignore - Web only events
+            onMouseLeave={() => setIsHovered(false)}
+        >
+            {/* Avatar — vertically centered */}
+            <View style={styles.sectionHeaderAvatar}>
+                <Avatar id={session.avatarId} size={24} flavor={null} />
+            </View>
+
+            {/* Path + branch */}
+            <View style={styles.sectionHeaderContent}>
+                <Text style={styles.sectionHeaderPath} numberOfLines={1}>
+                    {repoFolderName}
+                </Text>
+                {hasBranch && (
+                    <View style={styles.branchRow}>
+                        <Text style={styles.branchText} numberOfLines={1}>
+                            {branchName}
+                        </Text>
+                        {isWorktree && (
+                            <MaterialCommunityIcons
+                                name="tree"
+                                size={11}
+                                color={theme.colors.textSecondary}
+                                style={styles.worktreeIcon}
+                            />
+                        )}
+                        {gitInfo.linesAdded > 0 && (
+                            <Text style={styles.addedText}>+{gitInfo.linesAdded}</Text>
+                        )}
+                        {gitInfo.linesRemoved > 0 && (
+                            <Text style={styles.removedText}>-{gitInfo.linesRemoved}</Text>
+                        )}
+                    </View>
+                )}
+            </View>
+
+            {/* + button — vertically centered, large hit area; desktop: hover-only */}
+            <Pressable
+                onPress={handleAdd}
+                hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }}
+                style={[styles.addButton, { opacity: Platform.OS !== 'web' || isHovered ? 1 : 0 }]}
+            >
+                <Ionicons name="add-outline" size={14} color={theme.colors.textSecondary} />
+            </Pressable>
+        </View>
+    );
+});
+
+// Full-width separator between machine groups: ——— 🖥 name ———
+const MachineSeparator = React.memo(({ machineName, machineId }: { machineName: string; machineId: string }) => {
+    const styles = stylesheet;
+    const { theme } = useUnistyles();
+    const router = useRouter();
+
+    const handlePress = React.useCallback(() => {
+        router.navigate(`/machine/${machineId}` as any);
+    }, [router, machineId]);
+
+    return (
+        <Pressable onPress={handlePress} style={styles.machineSeparator} hitSlop={{ top: 8, bottom: 8 }}>
+            <View style={styles.machineSeparatorLine} />
+            <Ionicons name="desktop-outline" size={11} color={theme.colors.textSecondary} style={{ marginHorizontal: 6 }} />
+            <Text style={styles.machineSeparatorText} numberOfLines={1}>
+                {machineName}
+            </Text>
+            <View style={styles.machineSeparatorLine} />
+        </Pressable>
+    );
+});
+
+export function ActiveSessionsGroupCompact({ sessions, selectedSessionId }: ActiveSessionsGroupProps) {
+    const styles = stylesheet;
+    const machines = useAllMachines();
+
+    const machinesMap = React.useMemo(() => {
+        const map: Record<string, Machine> = {};
+        machines.forEach(machine => {
+            map[machine.id] = machine;
+        });
+        return map;
+    }, [machines]);
+
+    // Group sessions by machine, then by project within each machine
+    const { machineGroups, hasMultipleMachines } = React.useMemo(() => {
+        const unknownText = t('status.unknown');
+        const byMachine = new Map<string, {
+            machineId: string;
+            machineName: string;
+            projects: Map<string, {
+                displayPath: string;
+                sessions: SessionRowData[];
+            }>;
+        }>();
+
+        sessions.forEach(session => {
+            const machineId = session.machineId || unknownText;
+            const machine = machineId !== unknownText ? machinesMap[machineId] : null;
+            const machineName = machine?.metadata?.displayName ||
+                machine?.metadata?.host ||
+                (machineId !== unknownText ? machineId : `<${unknownText}>`);
+
+            let machineGroup = byMachine.get(machineId);
+            if (!machineGroup) {
+                machineGroup = { machineId, machineName, projects: new Map() };
+                byMachine.set(machineId, machineGroup);
+            }
+
+            const projectPath = session.path || '';
+            let projectGroup = machineGroup.projects.get(projectPath);
+            if (!projectGroup) {
+                const displayPath = formatPathRelativeToHome(projectPath, session.homeDir ?? undefined);
+                projectGroup = { displayPath, sessions: [] };
+                machineGroup.projects.set(projectPath, projectGroup);
+            }
+
+            projectGroup.sessions.push(session);
+        });
+
+        // Sort sessions within each project group
+        byMachine.forEach(mg => {
+            mg.projects.forEach(pg => {
+                pg.sessions.sort((a, b) => (b.createdAt ?? 0) - (a.createdAt ?? 0));
+            });
+        });
+
+        const sorted = Array.from(byMachine.values()).sort((a, b) =>
+            a.machineName.localeCompare(b.machineName)
+        );
+
+        return { machineGroups: sorted, hasMultipleMachines: byMachine.size > 1 };
+    }, [sessions, machinesMap]);
+
+    return (
+        <View style={styles.container}>
+            {machineGroups.map(machineGroup => {
+                const sortedProjects = Array.from(machineGroup.projects.entries()).sort(
+                    ([, a], [, b]) => a.displayPath.localeCompare(b.displayPath)
+                );
+
+                return (
+                    <React.Fragment key={machineGroup.machineId}>
+                        {hasMultipleMachines && (
+                            <MachineSeparator
+                                machineName={machineGroup.machineName}
+                                machineId={machineGroup.machineId}
+                            />
+                        )}
+                        {sortedProjects.map(([projectPath, projectGroup]) => {
+                            const firstSession = projectGroup.sessions[0];
+                            if (!firstSession) return null;
+
+                            return (
+                                <View key={projectPath}>
+                                    <SectionHeader
+                                        session={firstSession}
+                                        displayPath={projectGroup.displayPath}
+                                    />
+                                    <View style={styles.projectCard}>
+                                        {projectGroup.sessions.map((session, index) => (
+                                            <CompactSessionRow
+                                                key={session.id}
+                                                session={session}
+                                                selected={selectedSessionId === session.id}
+                                                showBorder={index < projectGroup.sessions.length - 1}
+                                            />
+                                        ))}
+                                    </View>
+                                </View>
+                            );
+                        })}
+                    </React.Fragment>
+                );
+            })}
+        </View>
+    );
+}
+
+// Compact session row with status dot indicator
+const CompactSessionRow = React.memo(({ session, selected, showBorder }: { session: SessionRowData; selected?: boolean; showBorder?: boolean }) => {
+    const styles = stylesheet;
+    const { theme } = useUnistyles();
+    const baseStatus = STATUS_CONFIG[session.state];
+    // Override to solid blue when session has unread results
+    const status = session.hasUnread
+        ? { ...baseStatus, color: '#007AFF', dotColor: '#007AFF', isPulsing: false, isConnected: baseStatus.isConnected }
+        : baseStatus;
+    const navigateToSession = useNavigateToSession();
+    const swipeableRef = React.useRef<Swipeable | null>(null);
+    const swipeEnabled = Platform.OS !== 'web';
+    const [actionsAnchor, setActionsAnchor] = React.useState<SessionActionsAnchor | null>(null);
+
+    const [archivingSession, performArchive] = useNasTechAction(async () => {
+        const result = await sessionKill(session.id);
+        if (!result.success) {
+            throw new NasTechError(result.message || t('sessionInfo.failedToArchiveSession'), false);
+        }
+    });
+
+    const handleArchive = React.useCallback(() => {
+        swipeableRef.current?.close();
+        performArchive();
+    }, [performArchive]);
+
+    const handlePress = React.useCallback(() => {
+        navigateToSession(session.id);
+    }, [navigateToSession, session.id]);
+
+    const handleContextMenu = React.useCallback((event: any) => {
+        event.preventDefault?.();
+        event.stopPropagation?.();
+        setActionsAnchor({
+            type: 'point',
+            x: event.nativeEvent.clientX ?? event.nativeEvent.pageX ?? 0,
+            y: event.nativeEvent.clientY ?? event.nativeEvent.pageY ?? 0,
+        });
+    }, []);
+
+    const showActionAlert = useSessionActionAlert(session.id);
+    const menuProps = Platform.OS === 'web' ? {
+        onContextMenu: handleContextMenu,
+    } as any : {
+        onLongPress: showActionAlert,
+    };
+
+    const renderLeadingIndicator = () => {
+        let indicator: React.ReactNode = null;
+
+        if (session.hasUnread) {
+            indicator = <StatusDot color={status.dotColor} isPulsing={false} />;
+        } else if (session.state === 'waiting' && session.hasDraft) {
+            indicator = (
+                <Ionicons
+                    name="create-outline"
+                    size={14}
+                    color={theme.colors.textSecondary}
+                />
+            );
+        } else if (session.state === 'permission_required' || session.state === 'thinking') {
+            indicator = <StatusDot color={status.dotColor} isPulsing={status.isPulsing} />;
+        } else if (session.state === 'waiting') {
+            indicator = <StatusDot color={theme.colors.textSecondary} isPulsing={false} />;
+        }
+
+        return (
+            <View style={styles.leadingIndicatorSlot}>
+                {indicator}
+            </View>
+        );
+    };
+
+    const itemContent = (
+        <Pressable
+            style={[
+                styles.sessionRow,
+                showBorder && styles.sessionRowWithBorder,
+                selected && styles.sessionRowSelected
+            ]}
+            onPress={handlePress}
+            {...menuProps}
+        >
+            <View style={styles.sessionContent}>
+                <View style={styles.sessionTitleRow}>
+                    {renderLeadingIndicator()}
+
+                    <Text
+                        style={[
+                            styles.sessionTitle,
+                            status.isConnected ? styles.sessionTitleConnected : styles.sessionTitleDisconnected
+                        ]}
+                        numberOfLines={2}
+                    >
+                        {session.name}
+                    </Text>
+                </View>
+            </View>
+        </Pressable>
+    );
+
+    if (!swipeEnabled) {
+        return (
+            <>
+                {itemContent}
+                <SessionActionsPopover
+                    anchor={actionsAnchor}
+                    onClose={() => setActionsAnchor(null)}
+                    sessionId={session.id}
+                    visible={!!actionsAnchor}
+                />
+            </>
+        );
+    }
+
+    const renderRightActions = () => (
+        <Pressable
+            style={styles.swipeAction}
+            onPress={handleArchive}
+            disabled={archivingSession}
+        >
+            <Ionicons name="archive-outline" size={20} color="#FFFFFF" />
+            <Text style={styles.swipeActionText} numberOfLines={2}>
+                {t('sessionInfo.archiveSession')}
+            </Text>
+        </Pressable>
+    );
+
+    return (
+        <Swipeable
+            ref={swipeableRef}
+            renderRightActions={renderRightActions}
+            overshootRight={false}
+            enabled={!archivingSession}
+        >
+            {itemContent}
+        </Swipeable>
+    );
+});
+
+const stylesheet = StyleSheet.create((theme) => ({
+    container: {
+        backgroundColor: theme.colors.groupped.background,
+        paddingTop: 8,
+    },
+    // Section header styles
+    sectionHeader: {
+        paddingTop: 12,
+        paddingBottom: Platform.select({ ios: 6, default: 8 }),
+        paddingHorizontal: Platform.select({ ios: 32, default: 24 }),
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    sectionHeaderSingleLine: {
+        paddingTop: 12,
+        paddingBottom: Platform.select({ ios: 6, default: 8 }),
+        paddingHorizontal: Platform.select({ ios: 32, default: 24 }),
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    sectionHeaderAvatar: {
+        marginRight: 8,
+    },
+    sectionHeaderContent: {
+        flex: 1,
+        justifyContent: 'center',
+        minWidth: 0,
+    },
+    sectionHeaderPath: {
+        ...Typography.default('regular'),
+        color: theme.colors.groupped.sectionTitle,
+        fontSize: Platform.select({ ios: 13, default: 14 }),
+        lineHeight: Platform.select({ ios: 18, default: 20 }),
+        letterSpacing: Platform.select({ ios: -0.08, default: 0.1 }),
+        fontWeight: Platform.select({ ios: 'normal', default: '500' }),
+        flexShrink: 1,
+    },
+    branchRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 1,
+    },
+    branchText: {
+        fontSize: 11,
+        color: theme.colors.textSecondary,
+        ...Typography.default('regular'),
+        flexShrink: 1,
+    },
+    worktreeIcon: {
+        marginLeft: 4,
+    },
+    addedText: {
+        fontSize: 11,
+        fontWeight: '600',
+        color: theme.colors.gitAddedText,
+        marginLeft: 6,
+    },
+    removedText: {
+        fontSize: 11,
+        fontWeight: '600',
+        color: theme.colors.gitRemovedText,
+        marginLeft: 3,
+    },
+    addButton: {
+        marginLeft: 4,
+        padding: 8,
+    },
+    // Machine separator styles
+    machineSeparator: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: Platform.select({ ios: 32, default: 24 }),
+        paddingTop: 8,
+        paddingBottom: 0,
+    },
+    machineSeparatorLine: {
+        flex: 1,
+        height: StyleSheet.hairlineWidth,
+        backgroundColor: theme.colors.divider,
+    },
+    machineSeparatorText: {
+        fontSize: 11,
+        color: theme.colors.textSecondary,
+        ...Typography.default('regular'),
+        marginRight: 4,
+    },
+    // Project card styles
+    projectCard: {
+        backgroundColor: theme.colors.surface,
+        marginBottom: 8,
+        marginHorizontal: Platform.select({ ios: 16, default: 12 }),
+        borderRadius: Platform.select({ ios: 10, default: 16 }),
+        overflow: 'hidden',
+        shadowColor: theme.colors.shadow.color,
+        shadowOffset: { width: 0, height: 0.33 },
+        shadowOpacity: theme.colors.shadow.opacity,
+        shadowRadius: 0,
+        elevation: 1,
+    },
+    // Session row styles
+    sessionRow: {
+        height: 56,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        backgroundColor: theme.colors.surface,
+    },
+    sessionRowWithBorder: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: theme.colors.divider,
+    },
+    sessionRowSelected: {
+        backgroundColor: theme.colors.surfaceSelected,
+    },
+    sessionContent: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    sessionTitleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    sessionTitle: {
+        fontSize: 15,
+        flex: 1,
+        ...Typography.default('regular'),
+    },
+    sessionTitleConnected: {
+        color: theme.colors.text,
+    },
+    sessionTitleDisconnected: {
+        color: theme.colors.textSecondary,
+    },
+    leadingIndicatorSlot: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 16,
+        height: 16,
+        marginRight: 8,
+    },
+    swipeAction: {
+        width: 112,
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: theme.colors.status.error,
+    },
+    swipeActionText: {
+        marginTop: 4,
+        fontSize: 12,
+        color: '#FFFFFF',
+        textAlign: 'center',
+        ...Typography.default('semiBold'),
+    },
+}));