@10play/expo-air 0.12.0 → 0.12.2

package/widget/components/BranchSwitcher.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import {
   View,
   Text,
@@ -6,25 +6,71 @@ import {
   TouchableOpacity,
   ScrollView,
   TextInput,
+  Animated,
+  Easing,
 } from "react-native";
 import type { BranchInfo } from "../services/websocket";
 import { SPACING, LAYOUT, COLORS, TYPOGRAPHY } from "../constants/design";
 
 // Header height: paddingVertical (14) * 2 + content (~20) + border (1) ≈ 49
 const HEADER_HEIGHT = 49;
+const DEFAULT_BRANCHES = ["main", "master"];
+const RECENT_COUNT = 5;
 
 interface BranchSwitcherProps {
   branches: BranchInfo[];
   currentBranch: string;
+  loading?: boolean;
   onSelect: (branchName: string) => void;
   onCreate: (branchName: string) => void;
   onClose: () => void;
   error?: string | null;
 }
 
+interface BranchSection {
+  title: string;
+  branches: BranchInfo[];
+}
+
+function groupBranches(
+  branches: BranchInfo[],
+  searchQuery: string
+): BranchSection[] {
+  const query = searchQuery.toLowerCase().trim();
+  const filtered = query
+    ? branches.filter((b) => b.name.toLowerCase().includes(query))
+    : branches;
+
+  const defaultBranch = filtered.filter((b) =>
+    DEFAULT_BRANCHES.includes(b.name)
+  );
+  const remaining = filtered.filter(
+    (b) => !DEFAULT_BRANCHES.includes(b.name)
+  );
+
+  // Recent: local non-default branches, top N by commit date (already sorted)
+  const recentLocal = remaining.filter((b) => !b.isRemote);
+  const recent = recentLocal.slice(0, RECENT_COUNT);
+  const recentNames = new Set(recent.map((b) => b.name));
+
+  // Other: everything else
+  const other = remaining.filter((b) => !recentNames.has(b.name));
+
+  const sections: BranchSection[] = [];
+  if (defaultBranch.length > 0)
+    sections.push({ title: "Default", branches: defaultBranch });
+  if (recent.length > 0)
+    sections.push({ title: "Recent", branches: recent });
+  if (other.length > 0)
+    sections.push({ title: "Other", branches: other });
+
+  return sections;
+}
+
 export function BranchSwitcher({
   branches,
   currentBranch,
+  loading,
   onSelect,
   onCreate,
   onClose,
@@ -33,6 +79,8 @@ export function BranchSwitcher({
   const [showCreateInput, setShowCreateInput] = useState(false);
   const [newBranchName, setNewBranchName] = useState("");
 
+  const sections = groupBranches(branches, "");
+
   const handleCreate = () => {
     const trimmed = newBranchName.trim();
     if (trimmed) {
@@ -42,53 +90,84 @@ export function BranchSwitcher({
     }
   };
 
+  const renderBranchItem = (branch: BranchInfo, isFirst: boolean) => {
+    const isCurrent = branch.name === currentBranch;
+    return (
+      <TouchableOpacity
+        key={branch.name}
+        style={[
+          styles.branchItem,
+          isCurrent && styles.branchItemCurrent,
+          isFirst && styles.branchItemFirst,
+        ]}
+        onPress={() => {
+          if (!isCurrent) {
+            onSelect(branch.name);
+          }
+        }}
+        activeOpacity={isCurrent ? 1 : 0.6}
+      >
+        <View style={styles.branchInfo}>
+          <Text
+            style={[
+              styles.branchName,
+              isCurrent && styles.branchNameCurrent,
+            ]}
+            numberOfLines={1}
+          >
+            {branch.name}
+          </Text>
+          {branch.prNumber && (
+            <View style={styles.prBadge}>
+              <Text style={styles.prBadgeText}>#{branch.prNumber}</Text>
+            </View>
+          )}
+          {branch.isRemote && (
+            <View style={styles.remoteBadge}>
+              <Text style={styles.remoteBadgeText}>remote</Text>
+            </View>
+          )}
+        </View>
+        {isCurrent && <Text style={styles.currentIndicator}>✓</Text>}
+      </TouchableOpacity>
+    );
+  };
+
   return (
     <View style={styles.overlay}>
-      <TouchableOpacity style={styles.backdrop} onPress={onClose} activeOpacity={1} />
+      <TouchableOpacity
+        style={styles.backdrop}
+        onPress={onClose}
+        activeOpacity={1}
+      />
       <View style={styles.dropdown}>
         {error && (
           <View style={styles.errorBanner}>
-            <Text style={styles.errorText} numberOfLines={2}>{error}</Text>
+            <Text style={styles.errorText} numberOfLines={2}>
+              {error}
+            </Text>
           </View>
         )}
-        <ScrollView style={styles.branchList} bounces={false}>
-          {branches.map((branch, index) => (
-            <TouchableOpacity
-              key={branch.name}
-              style={[
-                styles.branchItem,
-                branch.isCurrent && styles.branchItemCurrent,
-                index === 0 && styles.branchItemFirst,
-              ]}
-              onPress={() => {
-                if (!branch.isCurrent) {
-                  onSelect(branch.name);
-                }
-              }}
-              activeOpacity={branch.isCurrent ? 1 : 0.6}
-            >
-              <View style={styles.branchInfo}>
-                <Text
-                  style={[
-                    styles.branchName,
-                    branch.isCurrent && styles.branchNameCurrent,
-                  ]}
-                  numberOfLines={1}
-                >
-                  {branch.name}
-                </Text>
-                {branch.prNumber && (
-                  <View style={styles.prBadge}>
-                    <Text style={styles.prBadgeText}>#{branch.prNumber}</Text>
-                  </View>
+        {loading && branches.length === 0 ? (
+          <View style={styles.loadingContainer}>
+            <LoadingDots />
+          </View>
+        ) : (
+          <ScrollView style={styles.branchList} bounces={false}>
+            {sections.map((section) => (
+              <View key={section.title}>
+                <View style={styles.sectionHeader}>
+                  <Text style={styles.sectionHeaderText}>
+                    {section.title}
+                  </Text>
+                </View>
+                {section.branches.map((branch, index) =>
+                  renderBranchItem(branch, index === 0)
                 )}
               </View>
-              {branch.isCurrent && (
-                <Text style={styles.currentIndicator}>✓</Text>
-              )}
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
+            ))}
+          </ScrollView>
+        )}
 
         <View style={styles.createSection}>
           {showCreateInput ? (
@@ -121,7 +200,9 @@ export function BranchSwitcher({
               style={styles.createButton}
               onPress={() => setShowCreateInput(true)}
             >
-              <Text style={styles.createButtonText}>+ New branch from main</Text>
+              <Text style={styles.createButtonText}>
+                + New branch from main
+              </Text>
             </TouchableOpacity>
           )}
         </View>
@@ -130,6 +211,52 @@ export function BranchSwitcher({
   );
 }
 
+function LoadingDots() {
+  const dot1 = useRef(new Animated.Value(0.3)).current;
+  const dot2 = useRef(new Animated.Value(0.3)).current;
+  const dot3 = useRef(new Animated.Value(0.3)).current;
+
+  useEffect(() => {
+    const animate = (dot: Animated.Value, delay: number) =>
+      Animated.loop(
+        Animated.sequence([
+          Animated.delay(delay),
+          Animated.timing(dot, {
+            toValue: 1,
+            duration: 300,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+          }),
+          Animated.timing(dot, {
+            toValue: 0.3,
+            duration: 300,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+          }),
+        ]),
+      );
+    const a1 = animate(dot1, 0);
+    const a2 = animate(dot2, 150);
+    const a3 = animate(dot3, 300);
+    a1.start();
+    a2.start();
+    a3.start();
+    return () => {
+      a1.stop();
+      a2.stop();
+      a3.stop();
+    };
+  }, [dot1, dot2, dot3]);
+
+  return (
+    <View style={styles.loadingDots}>
+      {[dot1, dot2, dot3].map((dot, i) => (
+        <Animated.View key={i} style={[styles.loadingDot, { opacity: dot }]} />
+      ))}
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,
@@ -151,9 +278,36 @@ const styles = StyleSheet.create({
     borderColor: "rgba(255,255,255,0.12)",
     overflow: "hidden",
   },
+  loadingContainer: {
+    paddingVertical: SPACING.XL,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  loadingDots: {
+    flexDirection: "row",
+    gap: 6,
+  },
+  loadingDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: "rgba(255,255,255,0.5)",
+  },
   branchList: {
     maxHeight: 300,
   },
+  sectionHeader: {
+    paddingHorizontal: SPACING.LG,
+    paddingTop: SPACING.MD,
+    paddingBottom: SPACING.XS,
+  },
+  sectionHeaderText: {
+    color: COLORS.TEXT_MUTED,
+    fontSize: TYPOGRAPHY.SIZE_XS,
+    fontWeight: TYPOGRAPHY.WEIGHT_SEMIBOLD,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+  },
   branchItem: {
     flexDirection: "row",
     alignItems: "center",
@@ -196,6 +350,17 @@ const styles = StyleSheet.create({
     fontSize: TYPOGRAPHY.SIZE_XS,
     fontWeight: TYPOGRAPHY.WEIGHT_MEDIUM,
   },
+  remoteBadge: {
+    backgroundColor: "rgba(255,255,255,0.06)",
+    paddingHorizontal: SPACING.SM,
+    paddingVertical: 2,
+    borderRadius: 8,
+  },
+  remoteBadgeText: {
+    color: COLORS.TEXT_MUTED,
+    fontSize: TYPOGRAPHY.SIZE_XS,
+    fontWeight: TYPOGRAPHY.WEIGHT_NORMAL,
+  },
   currentIndicator: {
     color: COLORS.STATUS_SUCCESS,
     fontSize: TYPOGRAPHY.SIZE_SM,

package/widget/components/FormattedText.tsx

@@ -0,0 +1,320 @@
+import React from "react";
+import { View, Text, StyleSheet, Platform, Linking } from "react-native";
+import { SPACING, COLORS, TYPOGRAPHY } from "../constants/design";
+
+// Renders formatted text with markdown-style lists, code, and emphasis
+export function FormattedText({ content, isStreaming }: { content: string; isStreaming?: boolean }) {
+  const lines = content.split('\n');
+  const elements: React.ReactNode[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+    const trimmed = line.trim();
+
+    // Code block start (check first to avoid matching content inside code blocks)
+    if (trimmed.startsWith('```')) {
+      const codeLines: string[] = [];
+      const lang = trimmed.slice(3).trim();
+      i++;
+      while (i < lines.length && !lines[i].trim().startsWith('```')) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      elements.push(
+        <View key={`code-${i}`} style={styles.codeBlock}>
+          {lang && <Text style={styles.codeLang}>{lang}</Text>}
+          <Text style={styles.codeText} selectable>{codeLines.join('\n')}</Text>
+        </View>
+      );
+      i++; // skip closing ```
+      continue;
+    }
+
+    // Heading (# ## ### etc.)
+    const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
+    if (headingMatch) {
+      const level = headingMatch[1].length;
+      const headingStyle = level <= 2 ? styles.heading1 : level <= 4 ? styles.heading2 : styles.heading3;
+      elements.push(
+        <Text key={i} style={headingStyle} selectable>{formatInlineText(headingMatch[2])}</Text>
+      );
+      i++;
+      continue;
+    }
+
+    // Blockquote (> text) - collect consecutive > lines
+    if (trimmed.startsWith('> ') || trimmed === '>') {
+      const quoteLines: string[] = [];
+      while (i < lines.length && (lines[i].trim().startsWith('> ') || lines[i].trim() === '>')) {
+        const qContent = lines[i].trim().startsWith('> ') ? lines[i].trim().slice(2) : '';
+        quoteLines.push(qContent);
+        i++;
+      }
+      elements.push(
+        <View key={`quote-${i}`} style={styles.blockquote}>
+          <Text style={styles.blockquoteText} selectable>{formatInlineText(quoteLines.join('\n'))}</Text>
+        </View>
+      );
+      continue;
+    }
+
+    // Task list item (- [ ] or - [x])
+    const taskMatch = trimmed.match(/^[-*]\s+\[([ xX])\]\s+(.+)$/);
+    if (taskMatch) {
+      const checked = taskMatch[1] !== ' ';
+      elements.push(
+        <View key={i} style={styles.listItem}>
+          <Text style={styles.listBullet}>{checked ? '☑' : '☐'}</Text>
+          <Text style={styles.listText} selectable>{formatInlineText(taskMatch[2])}</Text>
+        </View>
+      );
+      i++;
+      continue;
+    }
+
+    // Numbered list item (1. 2. 3.) - with nesting via indentation
+    const numberedMatch = line.match(/^(\s*)(\d+)\.\s+(.+)$/);
+    if (numberedMatch) {
+      const indent = Math.floor(numberedMatch[1].length / 2);
+      const [, , num, text] = numberedMatch;
+      elements.push(
+        <View key={i} style={[styles.listItem, indent > 0 && { paddingLeft: SPACING.SM + indent * SPACING.LG }]}>
+          <Text style={styles.listNumber}>{num}.</Text>
+          <Text style={styles.listText} selectable>{formatInlineText(text)}</Text>
+        </View>
+      );
+      i++;
+      continue;
+    }
+
+    // Bullet list item (- or *) - with nesting via indentation
+    const bulletMatch = line.match(/^(\s*)[-*]\s+(.+)$/);
+    if (bulletMatch) {
+      const indent = Math.floor(bulletMatch[1].length / 2);
+      const bulletChar = indent === 0 ? '•' : indent === 1 ? '◦' : '▪';
+      elements.push(
+        <View key={i} style={[styles.listItem, indent > 0 && { paddingLeft: SPACING.SM + indent * SPACING.LG }]}>
+          <Text style={styles.listBullet}>{bulletChar}</Text>
+          <Text style={styles.listText} selectable>{formatInlineText(bulletMatch[2])}</Text>
+        </View>
+      );
+      i++;
+      continue;
+    }
+
+    // Horizontal rule (---, ***, ___)
+    if (/^[-*_]{3,}$/.test(trimmed)) {
+      elements.push(<View key={i} style={styles.horizontalRule} />);
+      i++;
+      continue;
+    }
+
+    // Empty line = paragraph break
+    if (!trimmed) {
+      elements.push(<View key={i} style={styles.paragraphBreak} />);
+      i++;
+      continue;
+    }
+
+    // Regular text
+    elements.push(
+      <Text key={i} style={styles.responseText} selectable>{formatInlineText(line)}</Text>
+    );
+    i++;
+  }
+
+  return (
+    <View style={styles.formattedContainer}>
+      {elements}
+      {isStreaming && <View style={styles.cursor} />}
+    </View>
+  );
+}
+
+// Format inline elements: code spans first, then links, then emphasis
+function formatInlineText(text: string): React.ReactNode {
+  // Split on inline code first to avoid processing markdown inside code spans
+  const codeParts = text.split(/(`[^`]+`)/g);
+  if (codeParts.length === 1) {
+    return formatLinks(text);
+  }
+
+  return codeParts.map((part, i) => {
+    if (part.startsWith('`') && part.endsWith('`')) {
+      return <Text key={i} style={styles.inlineCode}>{part.slice(1, -1)}</Text>;
+    }
+    return <React.Fragment key={i}>{formatLinks(part)}</React.Fragment>;
+  });
+}
+
+// Format markdown links [text](url)
+function formatLinks(text: string): React.ReactNode {
+  const parts = text.split(/(\[[^\]]+\]\([^)]+\))/g);
+  if (parts.length === 1) return formatEmphasis(text);
+
+  return parts.map((part, i) => {
+    const linkMatch = part.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
+    if (linkMatch) {
+      return (
+        <Text
+          key={i}
+          style={styles.linkText}
+          onPress={() => Linking.openURL(linkMatch[2])}
+        >
+          {linkMatch[1]}
+        </Text>
+      );
+    }
+    return <React.Fragment key={i}>{formatEmphasis(part)}</React.Fragment>;
+  });
+}
+
+// Format bold, italic, and strikethrough emphasis
+function formatEmphasis(text: string): React.ReactNode {
+  // Match **bold**, ~~strikethrough~~, *italic*, and plain text segments
+  const parts = text.split(/(\*\*[^*]+\*\*|~~[^~]+~~|\*[^*]+\*)/g);
+  if (parts.length === 1) return text;
+
+  return parts.map((part, i) => {
+    if (part.startsWith('**') && part.endsWith('**')) {
+      return <Text key={i} style={styles.boldText}>{part.slice(2, -2)}</Text>;
+    }
+    if (part.startsWith('~~') && part.endsWith('~~')) {
+      return <Text key={i} style={styles.strikethroughText}>{part.slice(2, -2)}</Text>;
+    }
+    if (part.startsWith('*') && part.endsWith('*')) {
+      return <Text key={i} style={styles.italicText}>{part.slice(1, -1)}</Text>;
+    }
+    return part;
+  });
+}
+
+const styles = StyleSheet.create({
+  formattedContainer: {
+    flexDirection: "column",
+  },
+  responseText: {
+    color: "rgba(255,255,255,0.95)",
+    fontSize: TYPOGRAPHY.SIZE_LG,
+    lineHeight: 22,
+  },
+  cursor: {
+    width: 2,
+    height: 18,
+    backgroundColor: COLORS.TEXT_PRIMARY,
+    marginLeft: 2,
+    opacity: 0.7,
+  },
+  listItem: {
+    flexDirection: "row",
+    marginVertical: SPACING.XS / 2,
+    paddingLeft: SPACING.SM,
+  },
+  listNumber: {
+    color: COLORS.TEXT_MUTED,
+    fontSize: TYPOGRAPHY.SIZE_LG,
+    lineHeight: 22,
+    width: 24,
+    fontWeight: TYPOGRAPHY.WEIGHT_MEDIUM,
+  },
+  listBullet: {
+    color: COLORS.TEXT_MUTED,
+    fontSize: TYPOGRAPHY.SIZE_LG,
+    lineHeight: 22,
+    width: 18,
+  },
+  listText: {
+    flex: 1,
+    color: "rgba(255,255,255,0.95)",
+    fontSize: TYPOGRAPHY.SIZE_LG,
+    lineHeight: 22,
+  },
+  codeBlock: {
+    backgroundColor: "rgba(255,255,255,0.06)",
+    borderRadius: SPACING.SM,
+    padding: SPACING.MD,
+    marginVertical: SPACING.SM,
+  },
+  codeLang: {
+    color: COLORS.TEXT_MUTED,
+    fontSize: TYPOGRAPHY.SIZE_XS,
+    fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
+    marginBottom: SPACING.XS,
+    textTransform: "uppercase",
+  },
+  codeText: {
+    color: "rgba(255,255,255,0.85)",
+    fontSize: TYPOGRAPHY.SIZE_SM,
+    fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
+    lineHeight: 18,
+  },
+  inlineCode: {
+    backgroundColor: "rgba(255,255,255,0.1)",
+    color: "rgba(255,255,255,0.9)",
+    fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
+    fontSize: TYPOGRAPHY.SIZE_MD,
+    paddingHorizontal: 4,
+    borderRadius: 3,
+  },
+  heading1: {
+    color: COLORS.TEXT_PRIMARY,
+    fontSize: TYPOGRAPHY.SIZE_XL,
+    fontWeight: TYPOGRAPHY.WEIGHT_SEMIBOLD,
+    lineHeight: 24,
+    marginTop: SPACING.MD,
+    marginBottom: SPACING.XS,
+  },
+  heading2: {
+    color: "rgba(255,255,255,0.9)",
+    fontSize: TYPOGRAPHY.SIZE_LG,
+    fontWeight: TYPOGRAPHY.WEIGHT_SEMIBOLD,
+    lineHeight: 22,
+    marginTop: SPACING.SM,
+    marginBottom: SPACING.XS,
+  },
+  heading3: {
+    color: "rgba(255,255,255,0.85)",
+    fontSize: TYPOGRAPHY.SIZE_LG,
+    fontWeight: TYPOGRAPHY.WEIGHT_MEDIUM,
+    lineHeight: 22,
+    marginTop: SPACING.SM,
+    marginBottom: SPACING.XS,
+  },
+  boldText: {
+    fontWeight: TYPOGRAPHY.WEIGHT_SEMIBOLD,
+    color: COLORS.TEXT_PRIMARY,
+  },
+  italicText: {
+    fontStyle: "italic",
+    color: "rgba(255,255,255,0.85)",
+  },
+  strikethroughText: {
+    textDecorationLine: "line-through",
+    color: COLORS.TEXT_MUTED,
+  },
+  linkText: {
+    color: COLORS.STATUS_INFO,
+    textDecorationLine: "underline",
+  },
+  blockquote: {
+    borderLeftWidth: 3,
+    borderLeftColor: "rgba(255,255,255,0.15)",
+    paddingLeft: SPACING.MD,
+    marginVertical: SPACING.XS,
+  },
+  blockquoteText: {
+    color: COLORS.TEXT_SECONDARY,
+    fontSize: TYPOGRAPHY.SIZE_LG,
+    lineHeight: 22,
+    fontStyle: "italic",
+  },
+  horizontalRule: {
+    height: 1,
+    backgroundColor: COLORS.BORDER,
+    marginVertical: SPACING.MD,
+  },
+  paragraphBreak: {
+    height: SPACING.SM,
+  },
+});