clawdex-mobile 5.0.0 → 5.0.2

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

@@ -1,67 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-import { ActivityIndicator, Platform, StyleSheet, Text, View } from 'react-native';
-
-import { colors, radius, spacing } from '../theme';
-
-interface ToolBlockProps {
-  command: string;
-  status: 'running' | 'complete' | 'error';
-  icon?: keyof typeof Ionicons.glyphMap;
-}
-
-export function ToolBlock({
-  command,
-  status,
-  icon = 'terminal-outline',
-}: ToolBlockProps) {
-  const statusIcon: keyof typeof Ionicons.glyphMap | null =
-    status === 'running'
-      ? null
-      : status === 'complete'
-        ? 'checkmark'
-        : 'close';
-
-  const statusColor = status === 'running'
-    ? colors.statusRunning
-    : status === 'complete'
-      ? colors.statusComplete
-      : colors.statusError;
-
-  return (
-    <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>
-  );
-}
-
-const monoFont = Platform.select({ ios: 'Menlo', default: 'monospace' });
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.sm,
-    backgroundColor: colors.toolBlockBg,
-    borderLeftWidth: 2,
-    borderLeftColor: colors.toolBlockBorder,
-    borderRadius: radius.sm,
-    marginVertical: spacing.xs,
-    paddingHorizontal: spacing.sm,
-    paddingVertical: spacing.xs,
-  },
-  command: {
-    flex: 1,
-    fontFamily: monoFont,
-    fontSize: 12,
-    color: colors.textPrimary,
-    lineHeight: 18,
-  },
-});

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

@@ -1,64 +0,0 @@
-import { useEffect } from 'react';
-import { StyleSheet, View } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withDelay,
-  withRepeat,
-  withSequence,
-  withTiming,
-} from 'react-native-reanimated';
-
-import { colors, spacing } from '../theme';
-
-export function TypingIndicator() {
-  const dot1 = useSharedValue(0.3);
-  const dot2 = useSharedValue(0.3);
-  const dot3 = useSharedValue(0.3);
-
-  useEffect(() => {
-    const animateDot = (dot: typeof dot1, delay: number) => {
-      dot.value = withDelay(
-        delay,
-        withRepeat(
-          withSequence(
-            withTiming(1, { duration: 400 }),
-            withTiming(0.3, { duration: 400 }),
-          ),
-          -1,
-          false,
-        ),
-      );
-    };
-    animateDot(dot1, 0);
-    animateDot(dot2, 150);
-    animateDot(dot3, 300);
-  }, [dot1, dot2, dot3]);
-
-  const style1 = useAnimatedStyle(() => ({ opacity: dot1.value }));
-  const style2 = useAnimatedStyle(() => ({ opacity: dot2.value }));
-  const style3 = useAnimatedStyle(() => ({ opacity: dot3.value }));
-
-  return (
-    <View style={styles.container}>
-      <Animated.View style={[styles.dot, style1]} />
-      <Animated.View style={[styles.dot, style2]} />
-      <Animated.View style={[styles.dot, style3]} />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-    paddingVertical: spacing.sm,
-  },
-  dot: {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
-    backgroundColor: colors.textMuted,
-  },
-});

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

@@ -1,181 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-
-import { colors, spacing } from '../theme';
-import {
-  appendVoiceWaveformSample,
-  createVoiceWaveformSeed,
-  fallbackVoiceWaveformLevel,
-  formatVoiceRecordingDuration,
-  normalizeVoiceMetering,
-  VOICE_WAVEFORM_BAR_COUNT,
-  VOICE_WAVEFORM_SAMPLE_INTERVAL_MS,
-} from './voiceWaveform';
-
-const MIN_BAR_HEIGHT = 6;
-const MAX_BAR_HEIGHT = 26;
-
-interface VoiceRecordingWaveformProps {
-  durationMillis: number;
-  metering?: number | null;
-}
-
-interface WaveformBarProps {
-  ageOpacity: number;
-  level: number;
-}
-
-function WaveformBar({ ageOpacity, level }: WaveformBarProps) {
-  const animatedLevel = useSharedValue(level);
-
-  useEffect(() => {
-    animatedLevel.value = withTiming(level, {
-      duration: VOICE_WAVEFORM_SAMPLE_INTERVAL_MS + 30,
-    });
-  }, [animatedLevel, level]);
-
-  const animatedStyle = useAnimatedStyle(() => {
-    const height =
-      MIN_BAR_HEIGHT + animatedLevel.value * (MAX_BAR_HEIGHT - MIN_BAR_HEIGHT);
-    const opacity = Math.min(
-      1,
-      Math.max(0.18, ageOpacity * (0.45 + animatedLevel.value * 0.55))
-    );
-
-    return {
-      height,
-      opacity,
-    };
-  });
-
-  return (
-    <View style={styles.barTrack}>
-      <Animated.View style={[styles.bar, animatedStyle]} />
-    </View>
-  );
-}
-
-export function VoiceRecordingWaveform({
-  durationMillis,
-  metering,
-}: VoiceRecordingWaveformProps) {
-  const [samples, setSamples] = useState<number[]>(() =>
-    createVoiceWaveformSeed(VOICE_WAVEFORM_BAR_COUNT)
-  );
-  const meteringRef = useRef<number | null | undefined>(metering);
-  meteringRef.current = metering;
-
-  useEffect(() => {
-    let step = 0;
-
-    setSamples(createVoiceWaveformSeed(VOICE_WAVEFORM_BAR_COUNT));
-
-    const interval = setInterval(() => {
-      step += 1;
-      const level =
-        meteringRef.current == null
-          ? fallbackVoiceWaveformLevel(step)
-          : normalizeVoiceMetering(meteringRef.current);
-
-      setSamples((currentSamples) =>
-        appendVoiceWaveformSample(currentSamples, level, VOICE_WAVEFORM_BAR_COUNT)
-      );
-    }, VOICE_WAVEFORM_SAMPLE_INTERVAL_MS);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  const formattedDuration = formatVoiceRecordingDuration(durationMillis);
-
-  return (
-    <View
-      accessible
-      accessibilityLabel={`Voice recording in progress, ${formattedDuration} elapsed`}
-      style={styles.container}
-    >
-      <View style={styles.metaRow}>
-        <View style={styles.labelRow}>
-          <View style={styles.liveDot} />
-          <Text style={styles.label}>Listening</Text>
-        </View>
-        <Text style={styles.timer}>{formattedDuration}</Text>
-      </View>
-
-      <View style={styles.waveformRow}>
-        {samples.map((sample, index) => {
-          const denominator = Math.max(1, samples.length - 1);
-          const ageOpacity = 0.24 + (index / denominator) * 0.72;
-
-          return (
-            <WaveformBar
-              key={String(index)}
-              ageOpacity={ageOpacity}
-              level={sample}
-            />
-          );
-        })}
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    gap: spacing.xs,
-    justifyContent: 'center',
-    minHeight: 40,
-  },
-  metaRow: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  labelRow: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    gap: spacing.xs,
-  },
-  liveDot: {
-    backgroundColor: colors.error,
-    borderRadius: 4,
-    height: 8,
-    width: 8,
-  },
-  label: {
-    color: colors.textMuted,
-    fontSize: 11,
-    fontWeight: '600',
-    letterSpacing: 0.4,
-    textTransform: 'uppercase',
-  },
-  timer: {
-    color: colors.textSecondary,
-    fontFamily: 'monospace',
-    fontSize: 12,
-    fontVariant: ['tabular-nums'],
-  },
-  waveformRow: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    gap: 3,
-    height: MAX_BAR_HEIGHT,
-    overflow: 'hidden',
-  },
-  barTrack: {
-    alignItems: 'center',
-    height: MAX_BAR_HEIGHT,
-    justifyContent: 'center',
-    width: 3,
-  },
-  bar: {
-    backgroundColor: colors.textPrimary,
-    borderRadius: 999,
-    width: 3,
-  },
-});