vibefast-cli 1.1.5 → 1.2.1

package/recipes/audio-recorder-supabase/packages/backend/src/services/recordings.ts

@@ -0,0 +1,369 @@
+/**
+ * Recordings Service
+ *
+ * Handles recording operations including createRecordingDraft, finalizeRecording,
+ * listRecordings, updateRecordingName, and deleteRecording.
+ *
+ * Requirements: 12.1, 12.2, 12.3, 12.4, 12.5
+ */
+
+import type { SupabaseClientType } from '../lib/supabase';
+import type { Recording } from '../types';
+import type { Json } from '../types/database';
+
+export interface CreateRecordingDraftInput {
+  name?: string | null;
+  fileUri: string;
+}
+
+export interface CreateRecordingDraftResult {
+  success: boolean;
+  recording?: Recording;
+  error?: string;
+}
+
+export interface FinalizeRecordingInput {
+  recordingId: string;
+  duration: number;
+  fileUri: string;
+  metering?: Json | null;
+}
+
+export interface FinalizeRecordingResult {
+  success: boolean;
+  recording?: Recording;
+  error?: string;
+}
+
+export interface ListRecordingsResult {
+  success: boolean;
+  recordings?: Recording[];
+  hasMore?: boolean;
+  error?: string;
+}
+
+export interface UpdateRecordingNameResult {
+  success: boolean;
+  recording?: Recording;
+  error?: string;
+}
+
+export interface DeleteRecordingResult {
+  success: boolean;
+  error?: string;
+}
+
+const DEFAULT_PAGE_SIZE = 50;
+
+/**
+ * Create a recording draft
+ *
+ * Creates a new recording with status "draft". The recording can be finalized
+ * later with duration and metering data.
+ *
+ * @param supabase - Supabase client (authenticated)
+ * @param input - Recording draft data
+ * @returns The created recording draft
+ *
+ * Requirements: 12.1
+ */
+export async function createRecordingDraft(
+  supabase: SupabaseClientType,
+  input: CreateRecordingDraftInput
+): Promise<CreateRecordingDraftResult> {
+  // Get the current auth user
+  const { data: authData, error: authError } = await supabase.auth.getUser();
+
+  if (authError || !authData.user) {
+    return { success: false, error: 'Not authenticated' };
+  }
+
+  if (!input.fileUri) {
+    return { success: false, error: 'File URI is required' };
+  }
+
+  // Create the recording draft
+  const { data: recording, error: createError } = await supabase
+    .from('recordings')
+    .insert({
+      user_id: authData.user.id,
+      name: input.name || null,
+      file_uri: input.fileUri,
+      duration: 0, // Will be updated when finalized
+      status: 'draft',
+      metering: null,
+    })
+    .select()
+    .single();
+
+  if (createError) {
+    return { success: false, error: `Failed to create recording draft: ${createError.message}` };
+  }
+
+  return { success: true, recording };
+}
+
+
+/**
+ * Finalize a recording
+ *
+ * Updates a draft recording with duration, file URI, and metering data,
+ * then sets status to "completed".
+ *
+ * @param supabase - Supabase client (authenticated)
+ * @param input - Finalization data
+ * @returns The finalized recording
+ *
+ * Requirements: 12.2
+ */
+export async function finalizeRecording(
+  supabase: SupabaseClientType,
+  input: FinalizeRecordingInput
+): Promise<FinalizeRecordingResult> {
+  // Get the current auth user
+  const { data: authData, error: authError } = await supabase.auth.getUser();
+
+  if (authError || !authData.user) {
+    return { success: false, error: 'Not authenticated' };
+  }
+
+  if (!input.recordingId) {
+    return { success: false, error: 'Recording ID is required' };
+  }
+
+  if (input.duration < 0) {
+    return { success: false, error: 'Duration must be non-negative' };
+  }
+
+  if (!input.fileUri) {
+    return { success: false, error: 'File URI is required' };
+  }
+
+  // Update the recording (RLS + user_id check ensures ownership)
+  const { data: recording, error: updateError } = await supabase
+    .from('recordings')
+    .update({
+      duration: input.duration,
+      file_uri: input.fileUri,
+      metering: input.metering || null,
+      status: 'completed',
+    })
+    .eq('id', input.recordingId)
+    .eq('user_id', authData.user.id)
+    .eq('status', 'draft') // Can only finalize drafts
+    .select()
+    .single();
+
+  if (updateError) {
+    if (updateError.code === 'PGRST116') {
+      return { success: false, error: 'Recording not found, not owned by user, or already finalized' };
+    }
+    return { success: false, error: `Failed to finalize recording: ${updateError.message}` };
+  }
+
+  return { success: true, recording };
+}
+
+/**
+ * List recordings for the current user
+ *
+ * Returns only completed recordings, ordered by creation time (newest first).
+ *
+ * @param supabase - Supabase client (authenticated)
+ * @param options - Pagination options
+ * @returns Paginated list of completed recordings
+ *
+ * Requirements: 12.3
+ */
+export async function listRecordings(
+  supabase: SupabaseClientType,
+  options?: {
+    limit?: number;
+    cursor?: string; // created_at timestamp for cursor-based pagination
+  }
+): Promise<ListRecordingsResult> {
+  // Get the current auth user
+  const { data: authData, error: authError } = await supabase.auth.getUser();
+
+  if (authError || !authData.user) {
+    return { success: false, error: 'Not authenticated' };
+  }
+
+  const limit = options?.limit || DEFAULT_PAGE_SIZE;
+
+  // Build query - only return completed recordings
+  let query = supabase
+    .from('recordings')
+    .select('*')
+    .eq('user_id', authData.user.id)
+    .eq('status', 'completed')
+    .order('created_at', { ascending: false })
+    .limit(limit + 1); // Fetch one extra to check if there are more
+
+  // Apply cursor if provided
+  if (options?.cursor) {
+    query = query.lt('created_at', options.cursor);
+  }
+
+  const { data: recordings, error: listError } = await query;
+
+  if (listError) {
+    return { success: false, error: `Failed to list recordings: ${listError.message}` };
+  }
+
+  // Check if there are more results
+  const hasMore = recordings && recordings.length > limit;
+  const resultRecordings = hasMore ? recordings.slice(0, limit) : (recordings || []);
+
+  return {
+    success: true,
+    recordings: resultRecordings,
+    hasMore,
+  };
+}
+
+
+/**
+ * Update a recording's name
+ *
+ * Only allows update if the user owns the recording.
+ *
+ * @param supabase - Supabase client (authenticated)
+ * @param recordingId - The ID of the recording to update
+ * @param name - The new name for the recording
+ * @returns The updated recording
+ *
+ * Requirements: 12.4
+ */
+export async function updateRecordingName(
+  supabase: SupabaseClientType,
+  recordingId: string,
+  name: string | null
+): Promise<UpdateRecordingNameResult> {
+  // Get the current auth user
+  const { data: authData, error: authError } = await supabase.auth.getUser();
+
+  if (authError || !authData.user) {
+    return { success: false, error: 'Not authenticated' };
+  }
+
+  if (!recordingId) {
+    return { success: false, error: 'Recording ID is required' };
+  }
+
+  // Update the recording name (RLS + user_id check ensures ownership)
+  const { data: recording, error: updateError } = await supabase
+    .from('recordings')
+    .update({ name })
+    .eq('id', recordingId)
+    .eq('user_id', authData.user.id)
+    .select()
+    .single();
+
+  if (updateError) {
+    if (updateError.code === 'PGRST116') {
+      return { success: false, error: 'Recording not found or access denied' };
+    }
+    return { success: false, error: `Failed to update recording: ${updateError.message}` };
+  }
+
+  return { success: true, recording };
+}
+
+/**
+ * Delete a recording
+ *
+ * Removes the recording record. Note: This does not delete the associated
+ * file from storage - that should be handled separately.
+ *
+ * @param supabase - Supabase client (authenticated)
+ * @param recordingId - The ID of the recording to delete
+ * @returns Success or error
+ *
+ * Requirements: 12.5
+ */
+export async function deleteRecording(
+  supabase: SupabaseClientType,
+  recordingId: string
+): Promise<DeleteRecordingResult> {
+  // Get the current auth user
+  const { data: authData, error: authError } = await supabase.auth.getUser();
+
+  if (authError || !authData.user) {
+    return { success: false, error: 'Not authenticated' };
+  }
+
+  if (!recordingId) {
+    return { success: false, error: 'Recording ID is required' };
+  }
+
+  // Delete the recording (RLS + user_id check ensures ownership)
+  const { data, error: deleteError } = await supabase
+    .from('recordings')
+    .delete()
+    .eq('id', recordingId)
+    .eq('user_id', authData.user.id)
+    .select('id')
+    .single();
+
+  if (deleteError) {
+    if (deleteError.code === 'PGRST116') {
+      return { success: false, error: 'Recording not found or access denied' };
+    }
+    return { success: false, error: `Failed to delete recording: ${deleteError.message}` };
+  }
+
+  if (!data) {
+    return { success: false, error: 'Recording not found or access denied' };
+  }
+
+  return { success: true };
+}
+
+/**
+ * Get a recording by ID
+ *
+ * @param supabase - Supabase client (authenticated)
+ * @param recordingId - The ID of the recording
+ * @returns The recording or error
+ */
+export async function getRecordingById(
+  supabase: SupabaseClientType,
+  recordingId: string
+): Promise<{ success: boolean; recording?: Recording; error?: string }> {
+  // Get the current auth user
+  const { data: authData, error: authError } = await supabase.auth.getUser();
+
+  if (authError || !authData.user) {
+    return { success: false, error: 'Not authenticated' };
+  }
+
+  if (!recordingId) {
+    return { success: false, error: 'Recording ID is required' };
+  }
+
+  const { data: recording, error: getError } = await supabase
+    .from('recordings')
+    .select('*')
+    .eq('id', recordingId)
+    .eq('user_id', authData.user.id)
+    .single();
+
+  if (getError) {
+    if (getError.code === 'PGRST116') {
+      return { success: false, error: 'Recording not found' };
+    }
+    return { success: false, error: `Failed to get recording: ${getError.message}` };
+  }
+
+  return { success: true, recording };
+}
+
+export const recordingsService = {
+  createRecordingDraft,
+  finalizeRecording,
+  listRecordings,
+  updateRecordingName,
+  deleteRecording,
+  getRecordingById,
+};

package/recipes/audio-recorder-supabase/packages/backend/supabase/migrations/recordings.sql

@@ -0,0 +1,70 @@
+-- Audio Recorder Feature Migration
+-- Creates tables for recording metadata and storage
+-- Run this migration when adding the audio-recorder feature via CLI
+
+-- ============================================================================
+-- RECORDINGS TABLE
+-- Stores audio recording metadata
+-- ============================================================================
+CREATE TABLE IF NOT EXISTS recordings (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  name TEXT,
+  file_uri TEXT NOT NULL,
+  duration INTEGER NOT NULL,
+  status TEXT NOT NULL CHECK (status IN ('draft', 'completed')),
+  metering JSONB,
+  created_at TIMESTAMPTZ DEFAULT now()
+);
+
+-- ============================================================================
+-- INDEXES
+-- ============================================================================
+CREATE INDEX IF NOT EXISTS idx_recordings_user_id_status ON recordings(user_id, status);
+
+-- ============================================================================
+-- RLS POLICIES
+-- ============================================================================
+ALTER TABLE recordings ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "recordings_select_own" ON recordings
+  FOR SELECT USING (auth.uid() = user_id);
+
+CREATE POLICY "recordings_insert_own" ON recordings
+  FOR INSERT WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "recordings_update_own" ON recordings
+  FOR UPDATE USING (auth.uid() = user_id);
+
+CREATE POLICY "recordings_delete_own" ON recordings
+  FOR DELETE USING (auth.uid() = user_id);
+
+-- ============================================================================
+-- STORAGE BUCKET - recordings
+-- ============================================================================
+INSERT INTO storage.buckets (id, name, public, file_size_limit, allowed_mime_types)
+VALUES (
+  'recordings',
+  'recordings',
+  false,
+  104857600,  -- 100MB limit
+  ARRAY['audio/mpeg', 'audio/wav', 'audio/m4a', 'audio/aac', 'audio/ogg']
+) ON CONFLICT (id) DO NOTHING;
+
+-- Storage RLS for recordings
+CREATE POLICY "Users can view their own recordings"
+ON storage.objects FOR SELECT TO authenticated
+USING (bucket_id = 'recordings' AND (storage.foldername(name))[1] = auth.uid()::text);
+
+CREATE POLICY "Users can upload their own recordings"
+ON storage.objects FOR INSERT TO authenticated
+WITH CHECK (bucket_id = 'recordings' AND (storage.foldername(name))[1] = auth.uid()::text);
+
+CREATE POLICY "Users can update their own recordings"
+ON storage.objects FOR UPDATE TO authenticated
+USING (bucket_id = 'recordings' AND (storage.foldername(name))[1] = auth.uid()::text)
+WITH CHECK (bucket_id = 'recordings' AND (storage.foldername(name))[1] = auth.uid()::text);
+
+CREATE POLICY "Users can delete their own recordings"
+ON storage.objects FOR DELETE TO authenticated
+USING (bucket_id = 'recordings' AND (storage.foldername(name))[1] = auth.uid()::text);

package/recipes/audio-recorder-supabase/recipe.json

@@ -0,0 +1,35 @@
+{
+  "name": "audio-recorder",
+  "version": "1.0.0",
+  "description": "Audio recording with Supabase storage",
+  "copy": [
+    {
+      "from": "apps/native/src/features/audio-recorder",
+      "to": "apps/native/src/features/audio-recorder"
+    },
+    {
+      "from": "packages/backend/supabase/migrations/recordings.sql",
+      "to": "packages/backend/supabase/migrations/recordings.sql"
+    },
+    {
+      "from": "packages/backend/src/services/recordings.ts",
+      "to": "packages/backend/src/services/recordings.ts"
+    }
+  ],
+  "nav": {
+    "href": "/(root)/(protected)/audio-recorder",
+    "label": "Audio Recorder",
+    "icon": "🎙️",
+    "color": "#EF4444"
+  },
+  "target": "native",
+  "dependencies": {
+    "expo": ["@supabase/supabase-js", "expo-av", "expo-file-system"]
+  },
+  "manualSteps": [
+    {
+      "title": "Apply Supabase migration",
+      "description": "Run: cd packages/backend && supabase db push"
+    }
+  ]
+}

package/recipes/charts/apps/native/src/features/charts/components/bar-chart.tsx

@@ -27,7 +27,7 @@ type Props = {
 };
 
 export const BarChart = ({ data, config = {}, style }: Props) => {
-  const [containerWidth, setContainerWidth] = useState(300);
+  const [containerWidth, setContainerWidth] = useState(() => config.width ?? 300);
   const {
     height = 200,
     padding = 20,
@@ -36,7 +36,7 @@ export const BarChart = ({ data, config = {}, style }: Props) => {
     showLabels = true,
   } = config;
 
-  const chartWidth = containerWidth || config.width || 300;
+  const chartWidth = config.width ?? containerWidth;
 
   const theme = useThemeConfig();
   const primaryColor = theme.colors.primary as string;
@@ -71,7 +71,7 @@ export const BarChart = ({ data, config = {}, style }: Props) => {
 
   if (!data.length) return null;
 
-  const maxValue = Math.max(...data.map((d) => d.value));
+  const maxValue = Math.max(1, ...data.map((d) => d.value));
   const innerChartWidth = chartWidth - padding * 2;
   const chartHeight = height - padding * 2;
   const barWidth = (innerChartWidth / data.length) * 0.8;

package/recipes/charts/apps/native/src/features/charts/components/candlestick-chart.tsx

@@ -36,7 +36,7 @@ type Props = {
 };
 
 export const CandlestickChart = ({ data, config = {}, style }: Props) => {
-  const [containerWidth, setContainerWidth] = useState(300);
+  const [containerWidth, setContainerWidth] = useState(() => config.width ?? 300);
 
   const {
     height = 200,
@@ -47,7 +47,7 @@ export const CandlestickChart = ({ data, config = {}, style }: Props) => {
     duration = 800,
   } = config;
 
-  const chartWidth = containerWidth || config.width || 300;
+  const chartWidth = config.width ?? containerWidth;
 
   const theme = useThemeConfig();
   const bullishColor = '#10B981';

package/recipes/charts/apps/native/src/features/charts/components/chart-card.tsx

@@ -1,11 +1,9 @@
 import type React from 'react';
-import { Dimensions, View } from 'react-native';
+import { useWindowDimensions, View } from 'react-native';
 
 import { Text } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
 
-const { width: screenWidth } = Dimensions.get('window');
-
 interface ChartCardProps {
   title: string;
   subtitle?: string;
@@ -17,17 +15,19 @@ interface ChartCardProps {
 const ChartCard: React.FC<ChartCardProps> = ({
   title,
   subtitle,
-  width = screenWidth - 32,
+  width,
   height: _height,
   children,
 }) => {
   const theme = useThemeConfig();
+  const { width: screenWidth } = useWindowDimensions();
+  const cardWidth = width ?? screenWidth - 32;
 
   return (
     <View
       className="mb-4 overflow-hidden rounded-xl"
       style={{
-        width,
+        width: cardWidth,
         backgroundColor: theme.colors.card,
         borderColor: theme.colors.outline,
         borderWidth: 1,

package/recipes/charts/apps/native/src/features/charts/components/column-chart.tsx

@@ -27,7 +27,7 @@ type Props = {
 };
 
 export const ColumnChart = ({ data, config = {}, style }: Props) => {
-  const [containerWidth, setContainerWidth] = useState(300);
+  const [containerWidth, setContainerWidth] = useState(() => config.width ?? 300);
   const {
     height = 200,
     padding = 20,
@@ -35,7 +35,7 @@ export const ColumnChart = ({ data, config = {}, style }: Props) => {
     animated = true,
     duration = 800,
   } = config;
-  const chartWidth = containerWidth || config.width || 300;
+  const chartWidth = config.width ?? containerWidth;
 
   const theme = useThemeConfig();
   const primaryColor = theme.colors.primary as string;
@@ -70,7 +70,7 @@ export const ColumnChart = ({ data, config = {}, style }: Props) => {
 
   if (!data.length) return null;
 
-  const maxValue = Math.max(...data.map((d) => d.value));
+  const maxValue = Math.max(1, ...data.map((d) => d.value));
   const innerChartWidth = chartWidth - padding * 2;
   const chartHeight = height - padding * 2;
   const barHeight = (chartHeight / data.length) * 0.8;

package/recipes/charts/apps/native/src/features/charts/components/doughnut-chart.tsx

@@ -40,6 +40,21 @@ const makeDonutSlicePath = (
   startAngle: number,
   endAngle: number,
 ) => {
+  if (innerR <= 0.5) {
+    const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
+    const x1 = cx + outerR * Math.cos(startAngle);
+    const y1 = cy + outerR * Math.sin(startAngle);
+    const x2 = cx + outerR * Math.cos(endAngle);
+    const y2 = cy + outerR * Math.sin(endAngle);
+    const pathData = [
+      `M ${cx} ${cy}`,
+      `L ${x1} ${y1}`,
+      `A ${outerR} ${outerR} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
+      'Z',
+    ].join(' ');
+    return Skia.Path.MakeFromSVGString(pathData) || Skia.Path.Make();
+  }
+
   const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
 
   const x1 = cx + outerR * Math.cos(startAngle);
@@ -64,7 +79,7 @@ const makeDonutSlicePath = (
 };
 
 export const DoughnutChart = ({ data, config = {}, style }: Props) => {
-  const [containerWidth, setContainerWidth] = useState(300);
+  const [containerWidth, setContainerWidth] = useState(() => config.width ?? 300);
   const {
     height = 200,
     animated = true,
@@ -75,7 +90,7 @@ export const DoughnutChart = ({ data, config = {}, style }: Props) => {
 
   const theme = useThemeConfig();
   const primaryColor = theme.colors.primary as string;
-  const chartWidth = containerWidth || config.width || 300;
+  const chartWidth = config.width ?? containerWidth;
   const centerX = chartWidth / 2;
   const centerY = height / 2;
 
@@ -83,8 +98,9 @@ export const DoughnutChart = ({ data, config = {}, style }: Props) => {
     1,
     data.reduce((s, d) => s + d.value, 0),
   );
-  const outerR = Math.min(chartWidth, height) / 2 - 20;
-  const innerR = outerR * innerRadius;
+  const outerR = Math.max(1, Math.min(chartWidth, height) / 2 - 20);
+  const safeInnerRadius = Math.min(0.95, Math.max(0, innerRadius));
+  const innerR = outerR * safeInnerRadius;
 
   const [progress, setProgress] = useState(1);
 

package/recipes/charts/apps/native/src/features/charts/components/line-chart.tsx

@@ -89,12 +89,13 @@ const formatNumber = (num: number): string => {
 
 export const LineChart = ({ data, config = {}, style }: Props) => {
   const hasData = data.length > 0;
-  const [containerWidth, setContainerWidth] = useState(300);
+  const [containerWidth, setContainerWidth] = useState(() => config.width ?? 300);
   const [progress, setProgress] = useState(1);
   const {
     height = 200,
     padding = 20,
     showGrid = true,
+    showLabels = false,
     animated = true,
     duration = 1000,
     gradient = false,
@@ -103,7 +104,7 @@ export const LineChart = ({ data, config = {}, style }: Props) => {
     yAxisWidth = 20,
   } = config;
 
-  const chartWidth = containerWidth || config.width || 300;
+  const chartWidth = config.width ?? containerWidth;
   const theme = useThemeConfig();
   const primaryColor = theme.colors.primary as string;
   const mutedColor = theme.colors.mutedForeground as string;
@@ -167,7 +168,7 @@ export const LineChart = ({ data, config = {}, style }: Props) => {
   // Simple horizontal grid lines
   const yAxisLabels = useMemo(() => {
     const labels: { value: number; y: number }[] = [];
-    const count = yLabelCount;
+    const count = Math.max(2, yLabelCount);
     for (let i = 0; i < count; i++) {
       const ratio = i / (count - 1);
       const value = maxValue - ratio * valueRange;
@@ -263,13 +264,13 @@ export const LineChart = ({ data, config = {}, style }: Props) => {
         ))}
       </Canvas>
       {/* Labels overlays for parity with SVG */}
-      {(config.showYLabels || config.showLabels) && (
+      {(showYLabels || showLabels) && (
         <Svg
           width={chartWidth}
           height={height}
           style={{ position: 'absolute', left: 0, top: 0 }}
         >
-          {config.showYLabels && (
+          {showYLabels && (
             <G>
               {yAxisLabels.map((label, index) => (
                 <SvgText
@@ -285,7 +286,7 @@ export const LineChart = ({ data, config = {}, style }: Props) => {
               ))}
             </G>
           )}
-          {config.showLabels && (
+          {showLabels && (
             <G>
               {data.map((point, index) => (
                 <SvgText