clawdex-mobile 2.0.1 → 3.0.0

package/apps/mobile/src/components/__tests__/composerUsageLimits.test.ts

@@ -0,0 +1,138 @@
+import {
+  buildComposerUsageLimitBadges,
+  formatComposerUsageLimitLabel,
+} from '../usageLimitBadges';
+
+describe('composerUsageLimits', () => {
+  it('maps primary and secondary windows into remaining-percentage badges', () => {
+    const badges = buildComposerUsageLimitBadges({
+      limitId: 'codex',
+      limitName: 'Codex',
+      planType: 'plus',
+      credits: null,
+      primary: {
+        usedPercent: 34,
+        windowDurationMins: 300,
+        resetsAt: 1_700_000_000,
+      },
+      secondary: {
+        usedPercent: 79,
+        windowDurationMins: 10_080,
+        resetsAt: 1_700_000_100,
+      },
+    });
+
+    expect(badges).toEqual([
+      {
+        id: 'primary',
+        label: '5h',
+        remainingPercent: 66,
+        tone: 'neutral',
+      },
+      {
+        id: 'secondary',
+        label: 'weekly',
+        remainingPercent: 21,
+        tone: 'warning',
+      },
+    ]);
+  });
+
+  it('clamps remaining percent and escalates critical limits', () => {
+    const badges = buildComposerUsageLimitBadges({
+      limitId: 'codex',
+      limitName: null,
+      planType: 'pro',
+      credits: null,
+      primary: {
+        usedPercent: 140,
+        windowDurationMins: 60,
+        resetsAt: null,
+      },
+      secondary: {
+        usedPercent: 89.6,
+        windowDurationMins: 1_440,
+        resetsAt: null,
+      },
+    });
+
+    expect(badges).toEqual([
+      {
+        id: 'primary',
+        label: '1h',
+        remainingPercent: 0,
+        tone: 'critical',
+      },
+      {
+        id: 'secondary',
+        label: '1d',
+        remainingPercent: 10,
+        tone: 'critical',
+      },
+    ]);
+  });
+
+  it('omits missing windows', () => {
+    const badges = buildComposerUsageLimitBadges({
+      limitId: 'codex',
+      limitName: null,
+      planType: 'team',
+      credits: null,
+      primary: null,
+      secondary: {
+        usedPercent: 45,
+        windowDurationMins: 120,
+        resetsAt: null,
+      },
+    });
+
+    expect(badges).toEqual([
+      {
+        id: 'secondary',
+        label: '2h',
+        remainingPercent: 55,
+        tone: 'neutral',
+      },
+    ]);
+  });
+
+  it('formats generic duration labels', () => {
+    expect(formatComposerUsageLimitLabel(45)).toBe('45m');
+    expect(formatComposerUsageLimitLabel(720)).toBe('12h');
+    expect(formatComposerUsageLimitLabel(2_880)).toBe('2d');
+  });
+
+  it('falls back to 5h and weekly for the default codex pair when duration is omitted', () => {
+    const badges = buildComposerUsageLimitBadges({
+      limitId: 'codex',
+      limitName: 'Codex',
+      planType: 'plus',
+      credits: null,
+      primary: {
+        usedPercent: 31,
+        windowDurationMins: null,
+        resetsAt: 1_700_000_000,
+      },
+      secondary: {
+        usedPercent: 82,
+        windowDurationMins: null,
+        resetsAt: 1_700_000_100,
+      },
+    });
+
+    expect(badges).toEqual([
+      {
+        id: 'primary',
+        label: '5h',
+        remainingPercent: 69,
+        tone: 'neutral',
+      },
+      {
+        id: 'secondary',
+        label: 'weekly',
+        remainingPercent: 18,
+        tone: 'warning',
+      },
+    ]);
+  });
+});

package/apps/mobile/src/components/__tests__/voiceWaveform.test.ts

@@ -0,0 +1,31 @@
+import {
+  appendVoiceWaveformSample,
+  fallbackVoiceWaveformLevel,
+  formatVoiceRecordingDuration,
+  normalizeVoiceMetering,
+} from '../voiceWaveform';
+
+describe('voiceWaveform', () => {
+  it('formats recording duration as mm:ss', () => {
+    expect(formatVoiceRecordingDuration(0)).toBe('00:00');
+    expect(formatVoiceRecordingDuration(9_000)).toBe('00:09');
+    expect(formatVoiceRecordingDuration(65_000)).toBe('01:05');
+  });
+
+  it('normalizes metering into a bounded waveform level', () => {
+    expect(normalizeVoiceMetering(undefined)).toBe(0);
+    expect(normalizeVoiceMetering(-160)).toBe(0);
+    expect(normalizeVoiceMetering(5)).toBe(1);
+    expect(normalizeVoiceMetering(-5)).toBeGreaterThan(normalizeVoiceMetering(-35));
+  });
+
+  it('keeps only the newest waveform samples', () => {
+    expect(appendVoiceWaveformSample([0.1, 0.2], 0.3, 4)).toEqual([0.1, 0.2, 0.3]);
+    expect(appendVoiceWaveformSample([0.1, 0.2, 0.3], 0.4, 3)).toEqual([0.2, 0.3, 0.4]);
+  });
+
+  it('provides a subtle fallback waveform level when metering is unavailable', () => {
+    expect(fallbackVoiceWaveformLevel(0)).toBeGreaterThan(0);
+    expect(fallbackVoiceWaveformLevel(10)).toBeLessThanOrEqual(1);
+  });
+});

package/apps/mobile/src/components/chat-input-layout.ts

@@ -0,0 +1,59 @@
+import { spacing } from '../theme';
+
+const IOS_HOME_INDICATOR_THRESHOLD = 20;
+const ANDROID_NAV_BUTTONS_THRESHOLD = 16;
+
+export interface ComposerBottomSpacing {
+  baseBottomPadding: number;
+  extraBottomInset: number;
+  totalBottomPadding: number;
+}
+
+export function resolveComposerBottomSpacing(
+  platform: string,
+  safeAreaBottomInset: number,
+  keyboardVisible: boolean
+): ComposerBottomSpacing {
+  const normalizedInset = Number.isFinite(safeAreaBottomInset)
+    ? Math.max(0, safeAreaBottomInset)
+    : 0;
+
+  const baseBottomPadding = resolveBaseBottomPadding(platform, keyboardVisible);
+  const extraBottomInset = keyboardVisible
+    ? 0
+    : resolveRestingBottomInset(platform, normalizedInset);
+
+  return {
+    baseBottomPadding,
+    extraBottomInset,
+    totalBottomPadding: baseBottomPadding + extraBottomInset,
+  };
+}
+
+function resolveBaseBottomPadding(platform: string, keyboardVisible: boolean): number {
+  if (platform === 'ios') {
+    return keyboardVisible ? 2 : spacing.xs + 2;
+  }
+
+  if (platform === 'android') {
+    return keyboardVisible ? 0 : spacing.sm;
+  }
+
+  return keyboardVisible ? 0 : spacing.sm;
+}
+
+function resolveRestingBottomInset(platform: string, safeAreaBottomInset: number): number {
+  if (platform === 'ios') {
+    return safeAreaBottomInset >= IOS_HOME_INDICATOR_THRESHOLD ? spacing.sm : 0;
+  }
+
+  if (platform === 'android') {
+    if (safeAreaBottomInset >= ANDROID_NAV_BUTTONS_THRESHOLD) {
+      return spacing.sm;
+    }
+
+    return safeAreaBottomInset > 0 ? 2 : 0;
+  }
+
+  return safeAreaBottomInset;
+}

package/apps/mobile/src/components/chatImageSource.ts

@@ -0,0 +1,86 @@
+type RemoteImageSource = {
+  uri: string;
+  headers?: Record<string, string>;
+};
+
+const REMOTE_SCHEME_PATTERN =
+  /^(?:https?:\/\/|data:image\/|content:\/\/|assets-library:\/\/|ph:\/\/|blob:)/i;
+const FILE_SCHEME_PATTERN = /^file:\/\//i;
+const WINDOWS_ABSOLUTE_PATH_PATTERN = /^[A-Za-z]:[\\/]/;
+
+export function toMarkdownImageSource(
+  rawSource: string,
+  bridgeUrl: string | null | undefined,
+  bridgeToken: string | null | undefined
+): RemoteImageSource | null {
+  const normalizedSource = rawSource.trim();
+  if (!normalizedSource) {
+    return null;
+  }
+
+  if (FILE_SCHEME_PATTERN.test(normalizedSource)) {
+    const withoutScheme = normalizedSource.replace(FILE_SCHEME_PATTERN, '');
+    return toBridgeImageSource(withoutScheme, bridgeUrl, bridgeToken);
+  }
+
+  if (REMOTE_SCHEME_PATTERN.test(normalizedSource)) {
+    return { uri: normalizedSource };
+  }
+
+  if (normalizedSource.startsWith('/') || WINDOWS_ABSOLUTE_PATH_PATTERN.test(normalizedSource)) {
+    return toBridgeImageSource(normalizedSource, bridgeUrl, bridgeToken);
+  }
+
+  return null;
+}
+
+function toBridgeImageSource(
+  rawPath: string,
+  bridgeUrl: string | null | undefined,
+  bridgeToken: string | null | undefined
+): RemoteImageSource | null {
+  const normalizedBridgeUrl = bridgeUrl?.trim();
+  if (!normalizedBridgeUrl) {
+    return null;
+  }
+
+  const normalizedPath = normalizeLocalPath(rawPath);
+  if (!normalizedPath) {
+    return null;
+  }
+
+  const uri = `${normalizedBridgeUrl.replace(/\/$/, '')}/local-image?path=${encodeURIComponent(
+    normalizedPath
+  )}`;
+  const token = bridgeToken?.trim();
+
+  return token
+    ? {
+        uri,
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    : { uri };
+}
+
+function normalizeLocalPath(rawPath: string): string | null {
+  let normalizedPath = rawPath.trim();
+  if (!normalizedPath) {
+    return null;
+  }
+
+  normalizedPath = normalizedPath.replace(/\\/g, '/');
+
+  try {
+    normalizedPath = decodeURI(normalizedPath);
+  } catch {
+    // Keep original path when URI decoding fails.
+  }
+
+  if (WINDOWS_ABSOLUTE_PATH_PATTERN.test(normalizedPath) && !normalizedPath.startsWith('/')) {
+    normalizedPath = `/${normalizedPath}`;
+  }
+
+  return normalizedPath;
+}

package/apps/mobile/src/components/usageLimitBadges.ts

@@ -0,0 +1,109 @@
+import type { AccountRateLimitSnapshot, AccountRateLimitWindow } from '../api/types';
+
+export type ComposerUsageLimitTone = 'neutral' | 'warning' | 'critical';
+
+export interface ComposerUsageLimitBadgeModel {
+  id: 'primary' | 'secondary';
+  label: string;
+  remainingPercent: number;
+  tone: ComposerUsageLimitTone;
+}
+
+export function buildComposerUsageLimitBadges(
+  snapshot: AccountRateLimitSnapshot | null
+): ComposerUsageLimitBadgeModel[] {
+  if (!snapshot) {
+    return [];
+  }
+
+  const badges: ComposerUsageLimitBadgeModel[] = [];
+  const primary = toComposerUsageLimitBadge('primary', snapshot.primary, snapshot);
+  if (primary) {
+    badges.push(primary);
+  }
+
+  const secondary = toComposerUsageLimitBadge('secondary', snapshot.secondary, snapshot);
+  if (secondary) {
+    badges.push(secondary);
+  }
+
+  return badges;
+}
+
+export function formatComposerUsageLimitLabel(windowDurationMins: number | null): string {
+  if (windowDurationMins === null || windowDurationMins <= 0) {
+    return 'limit';
+  }
+
+  if (windowDurationMins === 300) {
+    return '5h';
+  }
+
+  if (windowDurationMins === 10_080) {
+    return 'weekly';
+  }
+
+  if (windowDurationMins < 60) {
+    return `${String(windowDurationMins)}m`;
+  }
+
+  if (windowDurationMins < 1_440) {
+    return `${String(Math.round(windowDurationMins / 60))}h`;
+  }
+
+  return `${String(Math.round(windowDurationMins / 1_440))}d`;
+}
+
+function toComposerUsageLimitBadge(
+  id: ComposerUsageLimitBadgeModel['id'],
+  window: AccountRateLimitWindow | null,
+  snapshot: AccountRateLimitSnapshot
+): ComposerUsageLimitBadgeModel | null {
+  if (!window) {
+    return null;
+  }
+
+  const remainingPercent = clampPercent(100 - window.usedPercent);
+  return {
+    id,
+    label: resolveComposerUsageLimitLabel(id, window.windowDurationMins, snapshot),
+    remainingPercent,
+    tone:
+      remainingPercent <= 10
+        ? 'critical'
+        : remainingPercent <= 25
+          ? 'warning'
+          : 'neutral',
+  };
+}
+
+function resolveComposerUsageLimitLabel(
+  id: ComposerUsageLimitBadgeModel['id'],
+  windowDurationMins: number | null,
+  snapshot: AccountRateLimitSnapshot
+): string {
+  const explicitLabel = formatComposerUsageLimitLabel(windowDurationMins);
+  if (explicitLabel !== 'limit') {
+    return explicitLabel;
+  }
+
+  const normalizedLimitId = snapshot.limitId?.trim().toLowerCase() ?? null;
+  const hasPrimary = Boolean(snapshot.primary);
+  const hasSecondary = Boolean(snapshot.secondary);
+  const looksLikeDefaultCodexPair =
+    hasPrimary && hasSecondary && (!normalizedLimitId || normalizedLimitId === 'codex');
+
+  if (looksLikeDefaultCodexPair) {
+    return id === 'primary' ? '5h' : 'weekly';
+  }
+
+  return 'limit';
+}
+
+function clampPercent(value: number): number {
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+
+  return Math.max(0, Math.min(100, Math.round(value)));
+}

package/apps/mobile/src/components/voiceWaveform.ts

@@ -0,0 +1,46 @@
+export const VOICE_WAVEFORM_BAR_COUNT = 28;
+export const VOICE_WAVEFORM_SAMPLE_INTERVAL_MS = 80;
+
+const METERING_FLOOR_DB = -55;
+
+export function createVoiceWaveformSeed(barCount: number): number[] {
+  return Array.from({ length: Math.max(1, barCount) }, () => 0);
+}
+
+export function appendVoiceWaveformSample(
+  previousSamples: number[],
+  nextSample: number,
+  maxBars: number
+): number[] {
+  const trimmedSamples = previousSamples.slice(-(Math.max(1, maxBars) - 1));
+  return [...trimmedSamples, clampWaveformLevel(nextSample)];
+}
+
+export function normalizeVoiceMetering(metering: number | null | undefined): number {
+  if (typeof metering !== 'number' || Number.isNaN(metering)) {
+    return 0;
+  }
+
+  const clampedMetering = Math.max(METERING_FLOOR_DB, Math.min(0, metering));
+  const normalizedLevel = (clampedMetering - METERING_FLOOR_DB) / Math.abs(METERING_FLOOR_DB);
+  return clampWaveformLevel(Math.pow(normalizedLevel, 0.65));
+}
+
+export function fallbackVoiceWaveformLevel(step: number): number {
+  const oscillation = Math.abs(Math.sin(step / 2.35));
+  return clampWaveformLevel(0.12 + oscillation * 0.24);
+}
+
+export function formatVoiceRecordingDuration(durationMillis: number): string {
+  const totalSeconds = Math.max(0, Math.floor(durationMillis / 1_000));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}
+
+function clampWaveformLevel(level: number): number {
+  if (!Number.isFinite(level)) {
+    return 0;
+  }
+  return Math.max(0, Math.min(1, level));
+}

package/apps/mobile/src/config.ts

@@ -1,5 +1,10 @@
 import { isInsecureRemoteUrl, normalizeBridgeUrlInput } from './bridgeUrl';
 
+const defaultPrivacyPolicyUrl =
+  'https://mohit-patil.github.io/clawdex-mobile/privacy/';
+const defaultTermsOfServiceUrl =
+  'https://mohit-patil.github.io/clawdex-mobile/terms/';
+
 const legacyHostBridgeUrl = normalizeBridgeUrlInput(
   process.env.EXPO_PUBLIC_HOST_BRIDGE_URL ??
     process.env.EXPO_PUBLIC_MAC_BRIDGE_URL ??
@@ -15,8 +20,10 @@ const allowWsQueryTokenAuth =
 const allowInsecureRemoteBridge =
   process.env.EXPO_PUBLIC_ALLOW_INSECURE_REMOTE_BRIDGE?.trim().toLowerCase() ===
   'true';
-const privacyPolicyUrl = process.env.EXPO_PUBLIC_PRIVACY_POLICY_URL?.trim() || null;
-const termsOfServiceUrl = process.env.EXPO_PUBLIC_TERMS_OF_SERVICE_URL?.trim() || null;
+const privacyPolicyUrl =
+  process.env.EXPO_PUBLIC_PRIVACY_POLICY_URL?.trim() || defaultPrivacyPolicyUrl;
+const termsOfServiceUrl =
+  process.env.EXPO_PUBLIC_TERMS_OF_SERVICE_URL?.trim() || defaultTermsOfServiceUrl;
 const externalStatusFullSyncDebounceMs = parseNonNegativeIntEnv(
   process.env.EXPO_PUBLIC_EXTERNAL_STATUS_FULL_SYNC_DEBOUNCE_MS,
   450

package/apps/mobile/src/hooks/useVoiceRecorder.ts

@@ -6,6 +6,7 @@ import {
   requestRecordingPermissionsAsync,
   setAudioModeAsync,
   useAudioRecorder,
+  useAudioRecorderState,
 } from 'expo-audio';
 import * as FileSystem from 'expo-file-system/legacy';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -30,9 +31,10 @@ interface UseVoiceRecorderOptions {
 const MIN_RECORDING_DURATION_MS = 1_000;
 const MAX_RECORDING_FILE_BYTES = 20 * 1024 * 1024;
 const MAX_RECORDING_FILE_MB = MAX_RECORDING_FILE_BYTES / (1024 * 1024);
+const RECORDER_STATE_POLL_INTERVAL_MS = 80;
 
 const RECORDING_OPTIONS: RecordingOptions = {
-  isMeteringEnabled: false,
+  isMeteringEnabled: true,
   extension: '.m4a',
   sampleRate: 16_000,
   numberOfChannels: 1,
@@ -119,6 +121,7 @@ export function useVoiceRecorder({
 }: UseVoiceRecorderOptions) {
   const [voiceState, setVoiceState] = useState<VoiceState>('idle');
   const recorder = useAudioRecorder(RECORDING_OPTIONS);
+  const recorderState = useAudioRecorderState(recorder, RECORDER_STATE_POLL_INTERVAL_MS);
   const startTimeRef = useRef<number>(0);
   const recorderRef = useRef<AudioRecorder>(recorder);
   recorderRef.current = recorder;
@@ -256,6 +259,10 @@ export function useVoiceRecorder({
 
   return {
     voiceState,
+    recordingDurationMillis:
+      voiceState === 'recording' ? recorderState.durationMillis : 0,
+    recordingMetering:
+      voiceState === 'recording' ? recorderState.metering ?? null : null,
     startRecording,
     stopRecordingAndTranscribe,
     cancelRecording,