clawdex-mobile 2.0.0 → 3.0.0

package/apps/mobile/src/components/ComposerUsageLimits.tsx

@@ -0,0 +1,167 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import type { ComposerUsageLimitBadgeModel } from './usageLimitBadges';
+import { spacing, typography } from '../theme';
+
+const BATTERY_BODY_WIDTH = 16;
+
+const toneColors = {
+  neutral: {
+    border: '#34C759',
+    background: 'rgba(52, 199, 89, 0.16)',
+    text: '#A7F3C1',
+    label: '#7EE2A8',
+  },
+  warning: {
+    border: '#F59E0B',
+    background: 'rgba(245, 158, 11, 0.16)',
+    text: '#FFE2A8',
+    label: '#F8C76B',
+  },
+  critical: {
+    border: '#EF4444',
+    background: 'rgba(239, 68, 68, 0.16)',
+    text: '#FFC1C1',
+    label: '#FF9C9C',
+  },
+} as const;
+
+interface ComposerUsageLimitsProps {
+  limits: ComposerUsageLimitBadgeModel[];
+}
+
+export function ComposerUsageLimits({ limits }: ComposerUsageLimitsProps) {
+  if (limits.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={styles.row}>
+      {limits.map((limit) => (
+        <View key={limit.id} style={styles.badge}>
+          <Text
+            style={[
+              styles.labelText,
+              {
+                color: toneColors[limit.tone].label,
+              },
+            ]}
+          >
+            {limit.label}
+          </Text>
+          <View style={styles.meterRow}>
+            <View style={styles.batteryWrap}>
+              <View
+                style={[
+                  styles.batteryBody,
+                  {
+                    borderColor: toneColors[limit.tone].border,
+                    backgroundColor: toneColors[limit.tone].background,
+                  },
+                ]}
+              >
+                <View
+                  style={[
+                    styles.batteryFill,
+                    {
+                      width: Math.max(
+                        0,
+                        Math.round((BATTERY_BODY_WIDTH - 2) * (limit.remainingPercent / 100))
+                      ),
+                      backgroundColor: toneColors[limit.tone].border,
+                    },
+                  ]}
+                />
+              </View>
+              <View
+                style={[
+                  styles.batteryCap,
+                  {
+                    backgroundColor: toneColors[limit.tone].border,
+                  },
+                ]}
+              />
+            </View>
+            <Text
+              style={[
+                styles.valueText,
+                {
+                  color: toneColors[limit.tone].text,
+                },
+              ]}
+            >
+              {formatPercent(limit.remainingPercent)}
+            </Text>
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+function formatPercent(value: number): string {
+  if (value >= 100) {
+    return '100';
+  }
+
+  if (value <= 0) {
+    return '0';
+  }
+
+  return `${String(value)}%`;
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    gap: spacing.xs + 2,
+  },
+  badge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  meterRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 3,
+  },
+  batteryWrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  batteryBody: {
+    width: BATTERY_BODY_WIDTH,
+    height: 8,
+    borderRadius: 2,
+    borderWidth: 1,
+    padding: 1,
+    overflow: 'hidden',
+  },
+  batteryFill: {
+    height: '100%',
+    borderRadius: 1,
+  },
+  batteryCap: {
+    width: 2,
+    height: 4,
+    borderRadius: 1,
+    marginLeft: 1,
+  },
+  labelText: {
+    ...typography.caption,
+    fontWeight: '600',
+    fontVariant: ['tabular-nums'],
+    fontSize: 8,
+    lineHeight: 9,
+    textTransform: 'lowercase',
+  },
+  valueText: {
+    ...typography.caption,
+    fontWeight: '700',
+    fontVariant: ['tabular-nums'],
+    fontSize: 8,
+    lineHeight: 9,
+  },
+});

package/apps/mobile/src/components/SelectionSheet.tsx

@@ -0,0 +1,466 @@
+import { Ionicons } from '@expo/vector-icons';
+import { type ComponentProps } from 'react';
+import {
+  ActivityIndicator,
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { colors, spacing, typography } from '../theme';
+
+type IoniconName = ComponentProps<typeof Ionicons>['name'];
+
+type OptionTone = 'default' | 'accent' | 'danger';
+type SelectionSheetPresentation = 'default' | 'expanded';
+
+export interface SelectionSheetOption {
+  key: string;
+  title: string;
+  description?: string;
+  badge?: string;
+  meta?: string;
+  icon?: IoniconName;
+  titleColor?: string;
+  descriptionColor?: string;
+  badgeBackgroundColor?: string;
+  badgeTextColor?: string;
+  metaColor?: string;
+  iconColor?: string;
+  selected?: boolean;
+  disabled?: boolean;
+  tone?: OptionTone;
+  onPress: () => void;
+}
+
+interface SelectionSheetProps {
+  visible: boolean;
+  title: string;
+  subtitle?: string;
+  eyebrow?: string;
+  options: SelectionSheetOption[];
+  onClose: () => void;
+  closeLabel?: string;
+  loading?: boolean;
+  loadingLabel?: string;
+  emptyLabel?: string;
+  presentation?: SelectionSheetPresentation;
+}
+
+export function SelectionSheet({
+  visible,
+  title,
+  subtitle,
+  eyebrow,
+  options,
+  onClose,
+  closeLabel = 'Close',
+  loading = false,
+  loadingLabel = 'Loading…',
+  emptyLabel = 'No options available.',
+  presentation = 'expanded',
+}: SelectionSheetProps) {
+  const insets = useSafeAreaInsets();
+  const { height: windowHeight } = useWindowDimensions();
+  const expanded = presentation === 'expanded';
+  const expandedTopInset = Math.max(insets.top + spacing.xl + 20, 112);
+  const expandedBottomInset = Math.max(insets.bottom + spacing.xl + 28, 118);
+  const expandedCardHeight = Math.min(
+    Math.max(360, Math.round(windowHeight * 0.62)),
+    windowHeight - expandedTopInset - expandedBottomInset
+  );
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      presentationStyle="overFullScreen"
+      onRequestClose={onClose}
+    >
+      <View style={styles.backdrop}>
+        <Pressable style={StyleSheet.absoluteFill} onPress={onClose} />
+        <View
+          style={[
+            styles.sheetOuter,
+            expanded && styles.sheetOuterExpanded,
+            {
+              paddingBottom: expanded ? expandedBottomInset : Math.max(insets.bottom, spacing.md),
+              paddingTop: expanded ? expandedTopInset : undefined,
+            },
+          ]}
+        >
+          <View
+            style={[
+              styles.sheetCard,
+              expanded && styles.sheetCardExpanded,
+              expanded ? { height: expandedCardHeight } : null,
+            ]}
+          >
+            <View style={styles.handle} />
+
+            <View style={styles.header}>
+              {eyebrow ? <Text style={styles.eyebrow}>{eyebrow}</Text> : null}
+              <Text style={styles.title}>{title}</Text>
+              {subtitle ? (
+                <Text style={styles.subtitle} numberOfLines={expanded ? 3 : 2}>
+                  {subtitle}
+                </Text>
+              ) : null}
+            </View>
+
+            {loading ? (
+              <View style={styles.loadingState}>
+                <ActivityIndicator color={colors.textPrimary} />
+                <Text style={styles.loadingLabel}>{loadingLabel}</Text>
+              </View>
+            ) : options.length > 0 ? (
+              <ScrollView
+                style={[styles.list, expanded && styles.listExpanded]}
+                contentContainerStyle={[
+                  styles.listContent,
+                  expanded && styles.listContentExpanded,
+                ]}
+                showsVerticalScrollIndicator={false}
+              >
+                {options.map((option) => {
+                  const tone = option.tone ?? 'default';
+                  const iconColor =
+                    option.iconColor ??
+                    (tone === 'danger'
+                      ? '#FF8A8A'
+                      : option.selected || tone === 'accent'
+                        ? colors.textPrimary
+                        : colors.textMuted);
+                  const titleColor = option.titleColor ?? colors.textPrimary;
+                  const descriptionColor = option.descriptionColor ?? colors.textMuted;
+                  const metaColor = option.metaColor ?? colors.textMuted;
+                  const badgeBackgroundColor =
+                    option.badgeBackgroundColor ?? styles.badge.backgroundColor;
+                  const badgeTextColor =
+                    option.badgeTextColor ?? styles.badgeText.color;
+
+                  return (
+                    <Pressable
+                      key={option.key}
+                      disabled={option.disabled}
+                      onPress={option.onPress}
+                      style={({ pressed }) => [
+                        styles.option,
+                        option.selected && styles.optionSelected,
+                        option.disabled && styles.optionDisabled,
+                        pressed && !option.disabled && styles.optionPressed,
+                      ]}
+                    >
+                      <View style={styles.optionMain}>
+                        {option.icon ? (
+                          <View
+                            style={[
+                              styles.iconWrap,
+                              option.selected && styles.iconWrapSelected,
+                              tone === 'danger' && styles.iconWrapDanger,
+                            ]}
+                          >
+                            <Ionicons name={option.icon} size={15} color={iconColor} />
+                          </View>
+                        ) : null}
+
+                        <View style={styles.copy}>
+                          <View style={styles.titleRow}>
+                            <Text
+                              style={[
+                                styles.optionTitle,
+                                option.selected && styles.optionTitleSelected,
+                                { color: titleColor },
+                              ]}
+                              numberOfLines={2}
+                            >
+                              {option.title}
+                            </Text>
+                            {option.badge ? (
+                              <View
+                                style={[
+                                  styles.badge,
+                                  { backgroundColor: badgeBackgroundColor },
+                                ]}
+                              >
+                                <Text style={[styles.badgeText, { color: badgeTextColor }]}>
+                                  {option.badge}
+                                </Text>
+                              </View>
+                            ) : null}
+                          </View>
+                          {option.description ? (
+                            <Text
+                              style={[styles.optionDescription, { color: descriptionColor }]}
+                              numberOfLines={2}
+                            >
+                              {option.description}
+                            </Text>
+                          ) : null}
+                        </View>
+                      </View>
+
+                      <View style={styles.accessory}>
+                        {option.meta ? (
+                          <Text
+                            style={[styles.meta, { color: metaColor }]}
+                            numberOfLines={1}
+                          >
+                            {option.meta}
+                          </Text>
+                        ) : null}
+                        {option.selected ? (
+                          <Ionicons
+                            name="checkmark-circle"
+                            size={18}
+                            color={colors.textPrimary}
+                          />
+                        ) : null}
+                      </View>
+                    </Pressable>
+                  );
+                })}
+              </ScrollView>
+            ) : (
+              <View style={styles.loadingState}>
+                <Text style={styles.loadingLabel}>{emptyLabel}</Text>
+              </View>
+            )}
+
+            <View style={styles.footer}>
+              <Pressable
+                onPress={onClose}
+                style={({ pressed }) => [
+                  styles.closeButton,
+                  pressed && styles.closeButtonPressed,
+                ]}
+              >
+                <Text style={styles.closeText}>{closeLabel}</Text>
+              </Pressable>
+            </View>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0, 0, 0, 0.52)',
+  },
+  sheetOuter: {
+    paddingHorizontal: spacing.md,
+    paddingTop: spacing.xl,
+  },
+  sheetOuterExpanded: {
+    paddingHorizontal: spacing.md,
+  },
+  sheetCard: {
+    maxHeight: '82%',
+    borderRadius: 24,
+    borderCurve: 'continuous',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.09)',
+    backgroundColor: '#07090C',
+    paddingHorizontal: spacing.lg,
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.lg,
+    gap: spacing.md,
+    boxShadow: '0 -10px 34px rgba(0, 0, 0, 0.42)',
+  },
+  sheetCardExpanded: {
+    maxHeight: undefined,
+    minHeight: undefined,
+    borderRadius: 28,
+  },
+  handle: {
+    alignSelf: 'center',
+    width: 38,
+    height: 4,
+    borderRadius: 999,
+    backgroundColor: 'rgba(255, 255, 255, 0.18)',
+  },
+  header: {
+    gap: 4,
+  },
+  eyebrow: {
+    ...typography.caption,
+    color: 'rgba(232, 236, 244, 0.58)',
+    fontSize: 10,
+    lineHeight: 12,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+  },
+  title: {
+    ...typography.headline,
+    color: colors.textPrimary,
+    fontSize: 18,
+    lineHeight: 22,
+    fontWeight: '700',
+  },
+  subtitle: {
+    ...typography.caption,
+    color: colors.textMuted,
+    fontSize: 12,
+    lineHeight: 16,
+  },
+  list: {
+    maxHeight: 420,
+  },
+  listExpanded: {
+    flex: 1,
+    maxHeight: undefined,
+  },
+  listContent: {
+    gap: spacing.sm,
+  },
+  listContentExpanded: {
+    paddingBottom: spacing.xs,
+  },
+  loadingState: {
+    minHeight: 120,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.sm,
+  },
+  loadingLabel: {
+    ...typography.caption,
+    color: colors.textMuted,
+    textAlign: 'center',
+  },
+  option: {
+    minHeight: 64,
+    borderRadius: 18,
+    borderCurve: 'continuous',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.08)',
+    backgroundColor: '#0D1014',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm + 2,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing.md,
+  },
+  optionSelected: {
+    borderColor: 'rgba(255, 255, 255, 0.22)',
+    backgroundColor: '#141920',
+  },
+  optionDisabled: {
+    opacity: 0.56,
+  },
+  optionPressed: {
+    opacity: 0.88,
+  },
+  optionMain: {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  iconWrap: {
+    width: 30,
+    height: 30,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#171C22',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.08)',
+  },
+  iconWrapSelected: {
+    backgroundColor: '#1C232C',
+    borderColor: 'rgba(255, 255, 255, 0.12)',
+  },
+  iconWrapDanger: {
+    backgroundColor: 'rgba(239, 68, 68, 0.12)',
+    borderColor: 'rgba(239, 68, 68, 0.24)',
+  },
+  copy: {
+    flex: 1,
+    minWidth: 0,
+    gap: 3,
+  },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs + 2,
+  },
+  optionTitle: {
+    ...typography.body,
+    flex: 1,
+    color: colors.textSecondary,
+    fontWeight: '600',
+    lineHeight: 18,
+  },
+  optionTitleSelected: {
+    color: colors.textPrimary,
+  },
+  optionDescription: {
+    ...typography.caption,
+    color: 'rgba(232, 236, 244, 0.62)',
+    lineHeight: 15,
+  },
+  badge: {
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.1)',
+    backgroundColor: '#11151A',
+    paddingHorizontal: spacing.xs + 4,
+    paddingVertical: 2,
+  },
+  badgeText: {
+    ...typography.caption,
+    color: colors.textMuted,
+    fontSize: 10,
+    lineHeight: 12,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 0.6,
+  },
+  accessory: {
+    flexShrink: 0,
+    alignItems: 'flex-end',
+    gap: 6,
+  },
+  meta: {
+    ...typography.caption,
+    color: colors.textMuted,
+    fontSize: 11,
+    lineHeight: 14,
+    fontWeight: '600',
+  },
+  footer: {
+    alignItems: 'flex-end',
+  },
+  closeButton: {
+    minWidth: 88,
+    borderRadius: 14,
+    borderCurve: 'continuous',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.1)',
+    backgroundColor: '#101318',
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.sm + 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeButtonPressed: {
+    opacity: 0.86,
+  },
+  closeText: {
+    ...typography.body,
+    color: colors.textPrimary,
+    fontWeight: '600',
+  },
+});

package/apps/mobile/src/components/ToolBlock.tsx

@@ -1,15 +1,19 @@
 import { Ionicons } from '@expo/vector-icons';
 import { ActivityIndicator, Platform, StyleSheet, Text, View } from 'react-native';
-import Animated, { FadeInUp } from 'react-native-reanimated';
 
 import { colors, radius, spacing } from '../theme';
 
 interface ToolBlockProps {
   command: string;
   status: 'running' | 'complete' | 'error';
+  icon?: keyof typeof Ionicons.glyphMap;
 }
 
-export function ToolBlock({ command, status }: ToolBlockProps) {
+export function ToolBlock({
+  command,
+  status,
+  icon = 'terminal-outline',
+}: ToolBlockProps) {
   const statusIcon: keyof typeof Ionicons.glyphMap | null =
     status === 'running'
       ? null
@@ -24,19 +28,17 @@ export function ToolBlock({ command, status }: ToolBlockProps) {
       : colors.statusError;
 
   return (
-    <Animated.View entering={FadeInUp.duration(300)}>
-      <View style={styles.container}>
-        <Ionicons name="terminal-outline" size={14} color={colors.textSecondary} />
-        <Text style={styles.command} numberOfLines={1}>
-          {command}
-        </Text>
-        {status === 'running' ? (
-          <ActivityIndicator size="small" color={statusColor} />
-        ) : statusIcon ? (
-          <Ionicons name={statusIcon} size={14} color={statusColor} />
-        ) : null}
-      </View>
-    </Animated.View>
+    <View style={styles.container}>
+      <Ionicons name={icon} size={14} color={colors.textSecondary} />
+      <Text style={styles.command} numberOfLines={1}>
+        {command}
+      </Text>
+      {status === 'running' ? (
+        <ActivityIndicator size="small" color={statusColor} />
+      ) : statusIcon ? (
+        <Ionicons name={statusIcon} size={14} color={statusColor} />
+      ) : null}
+    </View>
   );
 }