clawdex-mobile 5.0.1 → 5.0.2

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

@@ -1,167 +0,0 @@
-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

@@ -1,466 +0,0 @@
-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/StatusLine.tsx

@@ -1,52 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-import { StyleSheet, Text } from 'react-native';
-import Animated, { FadeInUp } from 'react-native-reanimated';
-
-import type { RunEvent } from '../api/types';
-import { colors, spacing, typography } from '../theme';
-
-interface StatusLineProps {
-  event: RunEvent;
-}
-
-const labels: Record<string, string> = {
-  'run.started': 'Run started',
-  'run.completed': 'Run completed',
-  'run.failed': 'Run failed',
-};
-
-const icons: Record<string, { name: keyof typeof Ionicons.glyphMap; color: string }> = {
-  'run.started': { name: 'play-circle-outline', color: colors.statusRunning },
-  'run.completed': { name: 'checkmark-circle-outline', color: colors.statusComplete },
-  'run.failed': { name: 'close-circle-outline', color: colors.statusError },
-};
-
-export function StatusLine({ event }: StatusLineProps) {
-  const label = labels[event.eventType] ?? event.eventType;
-  const icon = icons[event.eventType] ?? { name: 'ellipse-outline', color: colors.textMuted };
-  const detail = event.detail;
-
-  return (
-    <Animated.View entering={FadeInUp.duration(200)} style={styles.container}>
-      <Ionicons name={icon.name} size={14} color={icon.color} />
-      <Text style={[styles.text, { color: icon.color }]}>
-        {label}
-        {detail ? ` — ${detail}` : ''}
-      </Text>
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.sm,
-    paddingVertical: spacing.xs,
-  },
-  text: {
-    ...typography.caption,
-    fontStyle: 'italic',
-    color: colors.textMuted,
-  },
-});