Add React Native mobile app for Makima (#3)

* [WIP] Heartbeat checkpoint - 2026-01-18 02:58:27 UTC

* feat(mobile): complete mobile app integration and verification

- Add ThemeColors type export to Colors.ts for type safety
- Export SUPABASE_URL from supabase.ts and use environment variables
- Update .env.example with correct default URLs
- Add comprehensive README.md with setup instructions

Verified:
- TypeScript compiles without errors
- App exports successfully for iOS and Android
- All screens accessible (login, dashboard, tasks, settings, task detail)
- Auth flow working with Zustand store and Supabase

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Task completion checkpoint

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

1 files changed, 111 insertions, 0 deletions

diff --git a/apps/mobile/components/TaskStatusBadge.tsx b/apps/mobile/components/TaskStatusBadge.tsx
new file mode 100644
index 0000000..a1ba9cb
--- /dev/null
+++ b/apps/mobile/components/TaskStatusBadge.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { TaskStatusColors } from '../constants/Colors';
+import type { TaskStatus } from '../lib/api';
+
+interface TaskStatusBadgeProps {
+  status: TaskStatus;
+  showLabel?: boolean;
+  size?: 'small' | 'medium' | 'large';
+}
+
+const statusLabels: Record<TaskStatus, string> = {
+  pending: 'Pending',
+  initializing: 'Initializing',
+  starting: 'Starting',
+  running: 'Running',
+  paused: 'Paused',
+  blocked: 'Blocked',
+  done: 'Done',
+  failed: 'Failed',
+  merged: 'Merged',
+};
+
+export function TaskStatusBadge({
+  status,
+  showLabel = false,
+  size = 'medium',
+}: TaskStatusBadgeProps) {
+  const colors = TaskStatusColors[status] || TaskStatusColors.pending;
+
+  const dotSize = {
+    small: 8,
+    medium: 10,
+    large: 12,
+  }[size];
+
+  const fontSize = {
+    small: 10,
+    medium: 12,
+    large: 14,
+  }[size];
+
+  const paddingHorizontal = {
+    small: 6,
+    medium: 8,
+    large: 10,
+  }[size];
+
+  const paddingVertical = {
+    small: 2,
+    medium: 4,
+    large: 6,
+  }[size];
+
+  if (showLabel) {
+    return (
+      <View
+        style={[
+          styles.badge,
+          {
+            backgroundColor: colors.bg,
+            paddingHorizontal,
+            paddingVertical,
+          },
+        ]}
+      >
+        <View
+          style={[
+            styles.dot,
+            {
+              backgroundColor: colors.dot,
+              width: dotSize,
+              height: dotSize,
+            },
+          ]}
+        />
+        <Text style={[styles.label, { color: colors.text, fontSize }]}>
+          {statusLabels[status]}
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[
+        styles.dot,
+        {
+          backgroundColor: colors.dot,
+          width: dotSize,
+          height: dotSize,
+        },
+      ]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 999,
+    gap: 6,
+  },
+  dot: {
+    borderRadius: 999,
+  },
+  label: {
+    fontWeight: '500',
+  },
+});