@10play/expo-air 0.12.0 → 0.12.2

package/widget/components/Header.tsx

@@ -0,0 +1,225 @@
+import React, { useRef, useEffect } from "react";
+import { View, Text, StyleSheet, NativeModules, TouchableOpacity, Animated, Easing, type TextProps, type ViewProps } from "react-native";
+import type { ConnectionStatus } from "../services/websocket";
+import { SPACING, LAYOUT, COLORS, TYPOGRAPHY, SIZES } from "../constants/design";
+
+// Typed animated components for React 19 compatibility
+const AnimatedView = Animated.View as React.ComponentClass<Animated.AnimatedProps<ViewProps>>;
+
+// WidgetBridge is a simple native module available in the widget runtime
+// ExpoAir is the main app's module (fallback)
+const { WidgetBridge, ExpoAir } = NativeModules;
+
+function handleCollapse() {
+  try {
+    // Try WidgetBridge first (widget runtime), then ExpoAir (main app)
+    if (WidgetBridge?.collapse) {
+      WidgetBridge.collapse();
+    } else if (ExpoAir?.collapse) {
+      ExpoAir.collapse();
+    } else {
+      console.warn("[expo-air] No collapse method available");
+    }
+  } catch (e) {
+    console.warn("[expo-air] Failed to collapse:", e);
+  }
+}
+
+interface HeaderProps {
+  status: ConnectionStatus;
+  branchName: string;
+  onBranchPress: () => void;
+}
+
+export function Header({ status, branchName, onBranchPress }: HeaderProps) {
+  const statusColors = {
+    disconnected: COLORS.STATUS_ERROR,
+    connecting: COLORS.STATUS_INFO,
+    connected: COLORS.STATUS_SUCCESS,
+    processing: COLORS.STATUS_INFO,
+  };
+
+  return (
+    <View style={styles.header}>
+      <TouchableOpacity onPress={handleCollapse} style={styles.closeButton}>
+        <Text style={styles.closeButtonText}>✕</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.branchButton} onPress={onBranchPress} disabled={!branchName}>
+        {branchName ? (
+          <>
+            <Text style={styles.branchName} numberOfLines={1}>
+              {branchName}
+            </Text>
+            <Text style={styles.branchChevron}>▾</Text>
+          </>
+        ) : (
+          <View style={styles.branchLoadingBar} />
+        )}
+      </TouchableOpacity>
+
+      <View style={[styles.statusDot, { backgroundColor: statusColors[status] }]} />
+    </View>
+  );
+}
+
+export function PulsingIndicator({ status }: { status: ConnectionStatus }) {
+  const colors = {
+    disconnected: COLORS.STATUS_ERROR,
+    connecting: COLORS.STATUS_INFO,
+    connected: COLORS.STATUS_SUCCESS,
+    processing: COLORS.STATUS_INFO,
+  };
+
+  const isAnimating = status === "processing" || status === "connecting";
+
+  // Animated values for the pulsing ring
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+  const opacityAnim = useRef(new Animated.Value(0.4)).current;
+
+  useEffect(() => {
+    if (isAnimating) {
+      // Create a soft pulsing animation
+      const pulseAnimation = Animated.loop(
+        Animated.sequence([
+          Animated.parallel([
+            Animated.timing(scaleAnim, {
+              toValue: 1.3,
+              duration: 1200,
+              easing: Easing.inOut(Easing.ease),
+              useNativeDriver: true,
+            }),
+            Animated.timing(opacityAnim, {
+              toValue: 0,
+              duration: 1200,
+              easing: Easing.inOut(Easing.ease),
+              useNativeDriver: true,
+            }),
+          ]),
+          Animated.parallel([
+            Animated.timing(scaleAnim, {
+              toValue: 1,
+              duration: 0,
+              useNativeDriver: true,
+            }),
+            Animated.timing(opacityAnim, {
+              toValue: 0.4,
+              duration: 0,
+              useNativeDriver: true,
+            }),
+          ]),
+        ])
+      );
+      pulseAnimation.start();
+      return () => pulseAnimation.stop();
+    } else {
+      // Reset when not animating
+      scaleAnim.setValue(1);
+      opacityAnim.setValue(0.4);
+    }
+  }, [isAnimating, scaleAnim, opacityAnim]);
+
+  return (
+    <View style={styles.indicatorContainer}>
+      <View
+        style={[
+          styles.indicator,
+          { backgroundColor: colors[status] },
+        ]}
+      />
+      {isAnimating && (
+        <AnimatedView
+          style={[
+            styles.indicatorRing,
+            {
+              borderColor: colors[status],
+              transform: [{ scale: scaleAnim }],
+              opacity: opacityAnim,
+            },
+          ]}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: LAYOUT.CONTENT_PADDING_H,
+    paddingVertical: SPACING.MD + 2, // 14px for comfortable header height
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.BORDER,
+  },
+  closeButton: {
+    width: SIZES.CLOSE_BUTTON,
+    height: SIZES.CLOSE_BUTTON,
+    borderRadius: SIZES.CLOSE_BUTTON / 2,
+    // Make invisible - native close button handles the tap
+    backgroundColor: "transparent",
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: SPACING.MD,
+  },
+  closeButtonText: {
+    // Hide the text - native button shows the X
+    color: "transparent",
+    fontSize: TYPOGRAPHY.SIZE_MD,
+    fontWeight: TYPOGRAPHY.WEIGHT_SEMIBOLD,
+  },
+  branchButton: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  branchName: {
+    flexShrink: 1,
+    color: COLORS.TEXT_SECONDARY,
+    fontSize: TYPOGRAPHY.SIZE_MD,
+    fontWeight: TYPOGRAPHY.WEIGHT_MEDIUM,
+  },
+  branchChevron: {
+    color: COLORS.TEXT_MUTED,
+    fontSize: TYPOGRAPHY.SIZE_SM,
+    marginLeft: SPACING.XS,
+  },
+  branchLoadingBar: {
+    width: 80,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: "rgba(255,255,255,0.08)",
+  },
+  statusDot: {
+    width: SIZES.STATUS_DOT,
+    height: SIZES.STATUS_DOT,
+    borderRadius: SIZES.STATUS_DOT / 2,
+    marginLeft: SPACING.MD, // Match the closeButton marginRight for visual balance
+  },
+  collapsedPill: {
+    width: 100,
+    height: 32,
+    backgroundColor: "transparent",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  indicatorContainer: {
+    width: 20,
+    height: 20,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  indicator: {
+    width: SIZES.STATUS_DOT,
+    height: SIZES.STATUS_DOT,
+    borderRadius: SIZES.STATUS_DOT / 2,
+  },
+  indicatorRing: {
+    position: "absolute",
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    borderWidth: 1.5,
+    opacity: 0.4,
+  },
+});

package/widget/components/MessageItems.tsx

@@ -0,0 +1,308 @@
+import React from "react";
+import { View, Text, StyleSheet, Platform, Image } from "react-native";
+import type {
+  ServerMessage,
+  ToolMessage,
+  ResultMessage,
+  UserPromptMessage,
+  HistoryResultMessage,
+  SystemDisplayMessage,
+  AssistantPart,
+  AssistantPartsMessage,
+} from "../services/websocket";
+import { FormattedText } from "./FormattedText";
+import { SPACING, LAYOUT, COLORS, TYPOGRAPHY } from "../constants/design";
+
+export function MessageItem({ message }: { key?: React.Key; message: ServerMessage }) {
+  switch (message.type) {
+    case "stream":
+      return null; // Handled by currentParts
+
+    case "tool":
+      // Legacy: individual tool messages from history
+      return <ToolItem tool={message} />;
+
+    case "result":
+      return <ResultItem result={message} />;
+
+    case "error":
+      return (
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorText}>{message.message}</Text>
+        </View>
+      );
+
+    case "status":
+      return null; // Handled by header
+
+    case "user_prompt":
+      return <UserPromptItem message={message} />;
+
+    case "history_result":
+      return <HistoryResultItem message={message} />;
+
+    case "assistant_parts":
+      return <AssistantPartsItem message={message} />;
+
+    case "system_message":
+      return <SystemMessageItem message={message} />;
+
+    default:
+      return null;
+  }
+}
+
+function UserPromptItem({ message }: { message: UserPromptMessage }) {
+  return (
+    <View style={styles.userPromptContainer}>
+      {message.images && message.images.length > 0 && (
+        <View style={styles.userImages}>
+          {message.images.map((img, i) => (
+            <Image key={i} source={{ uri: img.uri }} style={styles.userImageThumb} />
+          ))}
+        </View>
+      )}
+      {message.content ? (
+        <Text style={styles.userPromptText} selectable>{message.content}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+function HistoryResultItem({ message }: { message: HistoryResultMessage }) {
+  return (
+    <View style={styles.resultContainer}>
+      <FormattedText content={message.content} />
+    </View>
+  );
+}
+
+function SystemMessageItem({ message }: { message: SystemDisplayMessage }) {
+  // Use error styling for errors, muted styling for other system messages
+  if (message.messageType === "error") {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>{message.content}</Text>
+      </View>
+    );
+  }
+  // Stopped and info messages use muted styling
+  return (
+    <View style={styles.systemContainer}>
+      <Text style={styles.systemText}>{message.content}</Text>
+    </View>
+  );
+}
+
+// Renders interleaved text and tool parts in order
+export function PartsRenderer({ parts, isStreaming }: { parts: AssistantPart[], isStreaming: boolean }) {
+  return (
+    <View style={styles.partsContainer}>
+      {parts.map((part, index) => {
+        if (part.type === "text") {
+          const isLastPart = index === parts.length - 1;
+          return (
+            <View key={part.id} style={styles.messageContainer}>
+              <FormattedText content={part.content} isStreaming={isStreaming && isLastPart} />
+            </View>
+          );
+        } else if (part.type === "tool") {
+          return <ToolPartItem key={part.id} part={part} />;
+        }
+        return null;
+      })}
+    </View>
+  );
+}
+
+// Renders a completed assistant response with parts
+function AssistantPartsItem({ message }: { message: AssistantPartsMessage }) {
+  return (
+    <View style={styles.resultContainer}>
+      <PartsRenderer parts={message.parts} isStreaming={false} />
+      {!message.isComplete && (
+        <Text style={styles.interruptedText}>(interrupted)</Text>
+      )}
+    </View>
+  );
+}
+
+// Shared helper for tool display info
+function getToolDisplayInfo(toolName: string, input: Record<string, unknown> | undefined): { label: string; value: string } {
+  const getFileName = (path: string): string => path.split('/').pop() || path;
+
+  switch (toolName) {
+    case "Read":
+      return { label: "read", value: getFileName(input?.file_path as string || "file") };
+    case "Edit":
+      return { label: "edit", value: getFileName(input?.file_path as string || "file") };
+    case "Write":
+      return { label: "write", value: getFileName(input?.file_path as string || "file") };
+    case "Bash": {
+      const cmd = input?.command as string || "";
+      return { label: "$", value: cmd.length > 45 ? cmd.slice(0, 45) + "…" : cmd };
+    }
+    case "Glob":
+      return { label: "glob", value: input?.pattern as string || "*" };
+    case "Grep":
+      return { label: "grep", value: input?.pattern as string || "search" };
+    case "Task":
+      return { label: "agent", value: input?.description as string || "task" };
+    default:
+      return { label: toolName.toLowerCase(), value: "" };
+  }
+}
+
+// Renders a tool display line (shared between ToolPartItem and ToolItem)
+function ToolDisplay({ toolName, input, isFailed }: { toolName: string; input?: unknown; isFailed: boolean }) {
+  const { label, value } = getToolDisplayInfo(toolName, input as Record<string, unknown> | undefined);
+
+  return (
+    <View style={styles.toolLine}>
+      <Text style={isFailed ? styles.toolLabelFailed : styles.toolLabel}>{label}</Text>
+      <Text style={isFailed ? styles.toolValueFailed : styles.toolValue} numberOfLines={1}>{value}</Text>
+      {isFailed && <Text style={styles.toolLabelFailed}> ✕</Text>}
+    </View>
+  );
+}
+
+// Tool part renderer (for parts in AssistantPartsMessage)
+function ToolPartItem({ part }: { key?: React.Key; part: AssistantPart & { type: "tool" } }) {
+  if (part.status === "started") return null;
+  return <ToolDisplay toolName={part.toolName} input={part.input} isFailed={part.status === "failed"} />;
+}
+
+// Tool item renderer (for legacy ToolMessage from history)
+function ToolItem({ tool }: { tool: ToolMessage }) {
+  if (tool.status === "started") return null;
+  return <ToolDisplay toolName={tool.toolName} input={tool.input} isFailed={tool.status === "failed"} />;
+}
+
+function ResultItem({ result }: { result: ResultMessage }) {
+  if (!result.success && result.error) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>{result.error}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.resultContainer}>
+      {result.result && (
+        <Text style={styles.responseText} selectable>{result.result}</Text>
+      )}
+      {result.durationMs !== undefined && (
+        <Text style={styles.metaText}>
+          {`${result.durationMs}ms`}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  messageContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+  },
+  responseText: {
+    color: "rgba(255,255,255,0.95)",
+    fontSize: TYPOGRAPHY.SIZE_LG,
+    lineHeight: 22,
+  },
+  resultContainer: {
+    marginTop: SPACING.SM,
+  },
+  partsContainer: {
+    // Container for interleaved parts
+  },
+  interruptedText: {
+    color: COLORS.TEXT_MUTED,
+    fontSize: TYPOGRAPHY.SIZE_XS + 1, // 12px
+    fontStyle: "italic",
+    marginTop: SPACING.XS,
+  },
+  metaText: {
+    color: COLORS.TEXT_MUTED,
+    fontSize: TYPOGRAPHY.SIZE_XS + 1, // 12px
+    marginTop: SPACING.SM + 2, // 10px
+  },
+  errorContainer: {
+    backgroundColor: "rgba(255,59,48,0.15)",
+    borderRadius: SPACING.MD,
+    padding: SPACING.MD,
+    marginVertical: SPACING.SM - 2, // 6px
+  },
+  errorText: {
+    color: "#FF6B6B",
+    fontSize: TYPOGRAPHY.SIZE_MD,
+  },
+  systemContainer: {
+    backgroundColor: "rgba(255,255,255,0.05)",
+    borderRadius: SPACING.MD,
+    padding: SPACING.MD,
+    marginVertical: SPACING.SM - 2, // 6px
+  },
+  systemText: {
+    color: COLORS.TEXT_TERTIARY,
+    fontSize: TYPOGRAPHY.SIZE_MD,
+    fontStyle: "italic",
+  },
+  toolLine: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginVertical: SPACING.XS,
+  },
+  toolLabel: {
+    color: COLORS.TEXT_MUTED,
+    fontSize: TYPOGRAPHY.SIZE_XS + 1, // 12px
+    fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
+    marginRight: SPACING.SM,
+    minWidth: 36,
+  },
+  toolLabelFailed: {
+    color: "rgba(255,100,100,0.6)",
+    fontSize: TYPOGRAPHY.SIZE_XS + 1, // 12px
+    fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
+    marginRight: SPACING.SM,
+    minWidth: 36,
+  },
+  toolValue: {
+    color: "rgba(255,255,255,0.7)",
+    fontSize: TYPOGRAPHY.SIZE_SM,
+    fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
+    flexShrink: 1,
+  },
+  toolValueFailed: {
+    color: "rgba(255,100,100,0.7)",
+    fontSize: TYPOGRAPHY.SIZE_SM,
+    fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
+    flexShrink: 1,
+  },
+  userPromptContainer: {
+    backgroundColor: "rgba(0,122,255,0.15)",
+    borderRadius: LAYOUT.BORDER_RADIUS_SM + 2, // 16px
+    padding: SPACING.MD,
+    marginVertical: SPACING.SM,
+    alignSelf: "flex-end",
+    maxWidth: "85%",
+  },
+  userPromptText: {
+    color: COLORS.TEXT_PRIMARY,
+    fontSize: TYPOGRAPHY.SIZE_LG,
+    lineHeight: 20,
+  },
+  userImages: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SPACING.SM,
+    marginBottom: SPACING.SM,
+  },
+  userImageThumb: {
+    width: 80,
+    height: 80,
+    borderRadius: SPACING.SM,
+    backgroundColor: "rgba(255,255,255,0.1)",
+  },
+});