vibefast-cli 1.2.1 → 1.3.1

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

@@ -32,7 +32,9 @@ type Props = {
 
 export const RadarChart = ({ data, config = {}, style }: Props) => {
   const hasData = data.length > 0;
-  const [containerWidth, setContainerWidth] = useState(() => config.width ?? 300);
+  const [containerWidth, setContainerWidth] = useState(
+    () => config.width ?? 300,
+  );
   const {
     height = 200,
     showLabels = true,

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

@@ -42,7 +42,9 @@ export const StackedBarChart = ({
   categories = [],
   horizontal = false,
 }: Props) => {
-  const [containerWidth, setContainerWidth] = useState(() => config.width ?? 300);
+  const [containerWidth, setContainerWidth] = useState(
+    () => config.width ?? 300,
+  );
   const {
     height = 200,
     padding = 20,

package/recipes/charts/recipe.json

@@ -1,8 +1,12 @@
 {
   "name": "charts",
   "version": "1.0.0",
-  "description": "Beautiful animated charts",
+  "description": "Beautiful data visualization with charts",
   "copy": [
+    {
+      "from": "apps/native/src/app/charts",
+      "to": "apps/native/src/app/(root)/(protected)/charts"
+    },
     {
       "from": "apps/native/src/features/charts",
       "to": "apps/native/src/features/charts"
@@ -12,8 +16,13 @@
     "href": "/(root)/(protected)/charts",
     "label": "Charts",
     "icon": "📊",
-    "color": "#10B981"
+    "color": "#6366F1"
   },
   "target": "native",
-  "dependencies": { "expo": ["react-native-reanimated", "react-native-svg"] }
-}
+  "dependencies": {
+    "expo": [
+      "@shopify/react-native-skia",
+      "react-native-svg"
+    ]
+  }
+}

package/recipes/chatbot/apps/native/src/features/chatbot/components/chat-markdown.tsx

@@ -19,9 +19,9 @@
  * and render rules, but the complex logic has been extracted into separate modules.
  */
 
-import * as Clipboard from "expo-clipboard";
-import MarkdownIt from "markdown-it";
-import React, { useCallback, useEffect, useMemo } from "react";
+import * as Clipboard from 'expo-clipboard';
+import MarkdownIt from 'markdown-it';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import {
   Image,
   type ImageStyle,
@@ -33,18 +33,18 @@ import {
   UIManager,
   View,
   type ViewStyle,
-} from "react-native";
-import Markdown, { type RenderRules } from "react-native-markdown-display";
+} from 'react-native';
+import Markdown, { type RenderRules } from 'react-native-markdown-display';
 import {
   atomOneDark,
   github,
-} from "react-syntax-highlighter/dist/esm/styles/hljs";
+} from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
-import { useToast } from "@/components/ui/utils";
-import { translate } from "@/lib";
-import { useThemeConfig } from "@/lib/use-theme-config";
+import { useToast } from '@/components/ui/utils';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
 
-import { CodeBlock, TableRenderer } from "./markdown";
+import { CodeBlock, TableRenderer } from './markdown';
 
 const md = new MarkdownIt({
   linkify: true,
@@ -70,8 +70,8 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
 
   useEffect(() => {
     if (
-      Platform.OS === "android" &&
-      typeof UIManager.setLayoutAnimationEnabledExperimental === "function"
+      Platform.OS === 'android' &&
+      typeof UIManager.setLayoutAnimationEnabledExperimental === 'function'
     ) {
       UIManager.setLayoutAnimationEnabledExperimental(true);
     }
@@ -88,11 +88,11 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
   const monospaceFontFamily = useMemo(
     () =>
       Platform.select({
-        ios: "Menlo-Regular",
-        android: "monospace",
-        default: "Menlo",
-      }) ?? "Menlo",
-    []
+        ios: 'Menlo-Regular',
+        android: 'monospace',
+        default: 'Menlo',
+      }) ?? 'Menlo',
+    [],
   );
 
   const columnDividerWidth = StyleSheet.hairlineWidth || 0.5;
@@ -114,15 +114,15 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       paragraph: { marginBottom: 10, color: textColor },
       link: {
         color: linkColor,
-        textDecorationLine: "underline" as TextStyle["textDecorationLine"],
-        fontWeight: "500" as TextStyle["fontWeight"],
+        textDecorationLine: 'underline' as TextStyle['textDecorationLine'],
+        fontWeight: '500' as TextStyle['fontWeight'],
       },
       strong: {
-        fontWeight: "600" as TextStyle["fontWeight"],
+        fontWeight: '600' as TextStyle['fontWeight'],
         color: textColor,
       },
       em: {
-        fontStyle: "italic" as TextStyle["fontStyle"],
+        fontStyle: 'italic' as TextStyle['fontStyle'],
         color: textColor,
       },
       code_inline: {
@@ -155,7 +155,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       },
       list_item: { marginBottom: 6, color: textColor },
       table: {
-        minWidth: "100%",
+        minWidth: '100%',
         backgroundColor: theme.colors.background,
       },
       thead: {
@@ -165,7 +165,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       tr: {
         borderBottomWidth: StyleSheet.hairlineWidth,
         borderColor,
-        flexDirection: "row",
+        flexDirection: 'row',
       },
       th: {
         flexGrow: 0,
@@ -188,42 +188,42 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       },
       heading1: {
         fontSize: 28,
-        fontWeight: "700",
+        fontWeight: '700',
         color: textColor,
         marginTop: 18,
         marginBottom: 12,
       },
       heading2: {
         fontSize: 22,
-        fontWeight: "700",
+        fontWeight: '700',
         color: textColor,
         marginTop: 16,
         marginBottom: 10,
       },
       heading3: {
         fontSize: 19,
-        fontWeight: "600",
+        fontWeight: '600',
         color: textColor,
         marginTop: 14,
         marginBottom: 8,
       },
       heading4: {
         fontSize: 17,
-        fontWeight: "600",
+        fontWeight: '600',
         color: textColor,
         marginTop: 12,
         marginBottom: 8,
       },
       heading5: {
         fontSize: 16,
-        fontWeight: "600",
+        fontWeight: '600',
         color: textColor,
         marginTop: 10,
         marginBottom: 6,
       },
       heading6: {
         fontSize: 15,
-        fontWeight: "600" as TextStyle["fontWeight"],
+        fontWeight: '600' as TextStyle['fontWeight'],
         color: textColor,
         marginTop: 8,
         marginBottom: 6,
@@ -236,10 +236,10 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       imageWrapper: {
         marginVertical: 8,
         borderRadius: 14,
-        overflow: "hidden",
+        overflow: 'hidden',
       },
       image: {
-        width: "100%",
+        width: '100%',
         aspectRatio: 16 / 9,
         backgroundColor: codeBg,
       },
@@ -247,7 +247,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
         marginTop: 6,
         fontSize: 13,
         color: subtleText,
-        textAlign: "center",
+        textAlign: 'center',
       },
     };
 
@@ -270,7 +270,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       ...baseTheme,
       hljs: {
         ...baseTheme.hljs,
-        background: "transparent",
+        background: 'transparent',
         color: codeFg,
       },
     };
@@ -279,27 +279,27 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
   const codeContentStyle = useMemo(
     () =>
       ({
-        backgroundColor: "transparent",
+        backgroundColor: 'transparent',
         padding: 0,
         margin: 0,
-      } satisfies ViewStyle),
-    []
+      }) satisfies ViewStyle,
+    [],
   );
 
   const tableScrollViewStyle = useMemo(
     () =>
       ({
         marginVertical: 0,
-      } satisfies ViewStyle),
-    []
+      }) satisfies ViewStyle,
+    [],
   );
 
   const tableScrollContentStyle = useMemo(
     () =>
       ({
         flexGrow: 1,
-      } satisfies ViewStyle),
-    []
+      }) satisfies ViewStyle,
+    [],
   );
 
   const tableOuterStyle = useMemo(
@@ -308,84 +308,84 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
         borderWidth: 1,
         borderColor,
         borderRadius: 10,
-        overflow: "hidden",
+        overflow: 'hidden',
         marginVertical: 12,
         backgroundColor: theme.colors.background,
-      } satisfies ViewStyle),
-    [borderColor, theme.colors.background]
+      }) satisfies ViewStyle,
+    [borderColor, theme.colors.background],
   );
 
   const codeActionsContainerStyle = useMemo(
     () =>
       ({
-        position: "absolute",
+        position: 'absolute',
         top: 12,
         right: 12,
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "flex-end",
-      } satisfies ViewStyle),
-    []
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+      }) satisfies ViewStyle,
+    [],
   );
 
   const codeActionButtonBaseStyle = useMemo(
     () =>
       ({
-        alignItems: "center",
-        justifyContent: "center",
+        alignItems: 'center',
+        justifyContent: 'center',
         borderRadius: 999,
         borderWidth: 1,
         borderColor,
         paddingHorizontal: 12,
         paddingVertical: 8,
         backgroundColor: isDarkMode
-          ? "rgba(15, 15, 15, 0.9)"
-          : "rgba(255, 255, 255, 0.92)",
-      } satisfies ViewStyle),
-    [borderColor, isDarkMode]
+          ? 'rgba(15, 15, 15, 0.9)'
+          : 'rgba(255, 255, 255, 0.92)',
+      }) satisfies ViewStyle,
+    [borderColor, isDarkMode],
   );
 
   const codeToggleButtonSpacingStyle = useMemo(
     () =>
       ({
         marginLeft: 16,
-      } satisfies ViewStyle),
-    []
+      }) satisfies ViewStyle,
+    [],
   );
 
   const codeContentContainerStyle = useMemo(
     () =>
       ({
-        overflow: "hidden",
+        overflow: 'hidden',
         marginTop: 24,
-      } satisfies ViewStyle),
-    []
+      }) satisfies ViewStyle,
+    [],
   );
 
   const copyCodeToClipboard = useCallback(
     async (code: string) => {
       try {
         if (!code.trim()) {
-          toast.warning(translate("chatbot.empty_message"), {
+          toast.warning(translate('chatbot.empty_message'), {
             duration: 2000,
           });
           return;
         }
 
         await Clipboard.setStringAsync(code);
-        toast.success(translate("chatbot.copy_code_success"), {
+        toast.success(translate('chatbot.copy_code_success'), {
           duration: 2000,
         });
       } catch (error) {
-        console.error("[CHATBOT_FRONTEND] Copy code failed:", {
-          error: error instanceof Error ? error.message : "Unknown error",
+        console.error('[CHATBOT_FRONTEND] Copy code failed:', {
+          error: error instanceof Error ? error.message : 'Unknown error',
         });
-        toast.error(translate("chatbot.copy_code_failed"), {
+        toast.error(translate('chatbot.copy_code_failed'), {
           duration: 3000,
         });
       }
     },
-    [toast]
+    [toast],
   );
 
   // Memoize CodeBlock wrapper to pass all required props
@@ -393,7 +393,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
     (
       containerStyle: ViewStyle | TextStyle | ImageStyle,
       content: string,
-      language: string
+      language: string,
     ) => {
       return (
         <CodeBlock
@@ -422,7 +422,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       codeToggleButtonSpacingStyle,
       codeContentContainerStyle,
       copyCodeToClipboard,
-    ]
+    ],
   );
 
   const handleLinkPress = useCallback((url: string) => {
@@ -443,25 +443,25 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       _children: React.ReactNode[],
       _parent: any[],
       styles: Record<string, any>,
-      _inheritedStyles: Record<string, any> = {}
+      _inheritedStyles: Record<string, any> = {},
     ) => {
-      const rawContent = typeof node.content === "string" ? node.content : "";
-      const trimmed = rawContent.replace(/\n+$/u, "");
+      const rawContent = typeof node.content === 'string' ? node.content : '';
+      const trimmed = rawContent.replace(/\n+$/u, '');
       const content = trimmed.length > 0 ? trimmed : rawContent;
 
       const info = node.attributes?.info;
       const className = node.attributes?.class;
       const languageFromInfo =
-        typeof info === "string" && info.trim().length > 0
+        typeof info === 'string' && info.trim().length > 0
           ? info.trim().split(/\s+/u)[0]
           : undefined;
       const languageFromClass =
-        typeof className === "string"
-          ? className.match(/language-([\w-]+)/u)?.[1] ??
-            className.match(/lang-([\w-]+)/u)?.[1]
+        typeof className === 'string'
+          ? (className.match(/language-([\w-]+)/u)?.[1] ??
+            className.match(/lang-([\w-]+)/u)?.[1])
           : undefined;
-      const language = (languageFromInfo ?? languageFromClass ?? "")
-        .replace(/^language-/u, "")
+      const language = (languageFromInfo ?? languageFromClass ?? '')
+        .replace(/^language-/u, '')
         .toLowerCase();
 
       const containerStyle =
@@ -476,7 +476,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
 
     return {
       code: (node, _children, _parent, styles) => {
-        const content = node.content || "";
+        const content = node.content || '';
         return (
           <Text key={node.key} style={styles.code_inline}>
             {content}
@@ -501,21 +501,21 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
       },
       link: (node, children, _parent, styles) => {
         const href =
-          typeof node.attributes?.href === "string" ? node.attributes.href : "";
+          typeof node.attributes?.href === 'string' ? node.attributes.href : '';
         const titleAttr =
-          typeof node.attributes?.title === "string"
+          typeof node.attributes?.title === 'string'
             ? node.attributes.title.trim()
-            : "";
+            : '';
         const fallbackLabel =
-          typeof node.content === "string" && node.content.trim().length > 0
+          typeof node.content === 'string' && node.content.trim().length > 0
             ? node.content.trim()
             : href;
         const linkLabel =
           titleAttr.length > 0
             ? titleAttr
             : children && children.length > 0
-            ? children
-            : fallbackLabel;
+              ? children
+              : fallbackLabel;
 
         return (
           <Text
@@ -537,7 +537,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
           return null;
         }
 
-        const alt = node.attributes?.alt ?? "";
+        const alt = node.attributes?.alt ?? '';
         const caption = alt.trim().length > 0 ? alt : undefined;
 
         return (
@@ -547,7 +547,7 @@ export const ChatMarkdown = React.memo(function ChatMarkdown({
               style={styles.image}
               resizeMode="cover"
               accessible
-              accessibilityLabel={caption ?? "Markdown image"}
+              accessibilityLabel={caption ?? 'Markdown image'}
             />
             {caption ? (
               <Text style={styles.image_caption}>{caption}</Text>

package/recipes/chatbot/apps/native/src/features/chatbot/components/markdown/code-block.tsx

@@ -11,12 +11,12 @@ import {
   type ViewStyle,
 } from 'react-native';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
-import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
-import ts from 'react-syntax-highlighter/dist/esm/languages/hljs/typescript';
-import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python';
-import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
 import bash from 'react-syntax-highlighter/dist/esm/languages/hljs/bash';
 import css from 'react-syntax-highlighter/dist/esm/languages/hljs/css';
+import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
+import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
+import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python';
+import ts from 'react-syntax-highlighter/dist/esm/languages/hljs/typescript';
 import xml from 'react-syntax-highlighter/dist/esm/languages/hljs/xml';
 
 import { translate } from '@/lib';

package/recipes/chatbot/recipe.json

@@ -12,12 +12,8 @@
       "to": "apps/native/src/features/chatbot"
     },
     {
-      "from": "apps/native/src/api-client/chatbot.ts",
-      "to": "apps/native/src/api-client/chatbot.ts"
-    },
-    {
-      "from": "packages/backend/convex/agents.ts",
-      "to": "packages/backend/convex/agents.ts"
+      "from": "packages/backend/convex/chatbot",
+      "to": "packages/backend/convex/chatbot"
     },
     {
       "from": "packages/backend/convex/chatbotAgent.ts",
@@ -26,21 +22,8 @@
     {
       "from": "packages/backend/convex/chatbotHistory.ts",
       "to": "packages/backend/convex/chatbotHistory.ts"
-    },
-    {
-      "from": "packages/backend/convex/tools",
-      "to": "packages/backend/convex/tools"
-    },
-    {
-      "from": "packages/backend/convex/chatbot",
-      "to": "packages/backend/convex/chatbot"
     }
   ],
-  "configuration": {
-    "apiClient": {
-      "exports": ["export { type ChatbotApi, chatbotApi } from './chatbot';"]
-    }
-  },
   "nav": {
     "href": "/(root)/(protected)/chatbot",
     "label": "AI Chatbot",
@@ -58,25 +41,5 @@
       "react-native-reanimated",
       "react-native-safe-area-context"
     ]
-  },
-  "env": [
-    {
-      "key": "OPENAI_API_KEY",
-      "description": "OpenAI API key for chat completions",
-      "example": "sk-...",
-      "link": "https://platform.openai.com/api-keys",
-      "file": "packages/backend/.env.local",
-      "required": true
-    }
-  ],
-  "manualSteps": [
-    {
-      "title": "Configure Convex Environment Variables",
-      "description": "Run: npx convex env set OPENAI_API_KEY sk-your-key\\nOr set it in the Convex dashboard"
-    },
-    {
-      "title": "Deploy Convex Schema",
-      "description": "Run: npx convex dev\\nThis will sync the schema with Convex"
-    }
-  ]
+  }
 }

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/components/chat-markdown.tsx

@@ -35,7 +35,10 @@ import {
   type ViewStyle,
 } from 'react-native';
 import Markdown, { type RenderRules } from 'react-native-markdown-display';
-import { atomOneDark, github } from 'react-syntax-highlighter/styles/hljs';
+import {
+  atomOneDark,
+  github,
+} from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 import { useToast } from '@/components/ui/utils';
 import { translate } from '@/lib';