@mars-stack/cli 3.0.2 → 4.0.0

package/dist/index.js

@@ -2808,6 +2808,8 @@ async function generateOnboarding(projectRoot) {
     }
     await addUserRelation(projectRoot, "onboardingProgress OnboardingProgress?", ctx);
     await registerRoute(projectRoot, "onboarding", "/onboarding", ctx);
+    await patchDashboardWithOnboardingRedirect(projectRoot, ctx);
+    await patchProxyWithOnboardingRoute(projectRoot, ctx);
     await setConfigFlag6(projectRoot, ctx);
     await ctx.commit();
     log.success(`Generated onboarding feature with ${count} files`);
@@ -2816,10 +2818,11 @@ async function generateOnboarding(projectRoot) {
     log.step("src/app/(protected)/onboarding/ \u2014 onboarding page");
     log.step("src/app/api/protected/onboarding/ \u2014 progress and step API routes");
     log.step("prisma/schema/onboarding.prisma \u2014 OnboardingProgress model");
+    log.step("src/app/(protected)/dashboard/page.tsx \u2014 onboarding redirect for new users");
+    log.step("src/proxy.ts \u2014 /onboarding added to protected routes");
     log.blank();
     log.warn("Next steps:");
     log.step("Run `yarn db:push` to sync the Prisma schema");
-    log.step("Add onboarding redirect check to your protected layout");
     log.step("Customize steps in `src/features/onboarding/config.ts`");
     log.blank();
   } catch (error) {
@@ -2827,6 +2830,66 @@ async function generateOnboarding(projectRoot) {
     throw error;
   }
 }
+async function patchDashboardWithOnboardingRedirect(projectRoot, ctx) {
+  const dashboardPath = path13.join(
+    projectRoot,
+    "src",
+    "app",
+    "(protected)",
+    "dashboard",
+    "page.tsx"
+  );
+  if (!await fs13.pathExists(dashboardPath)) return;
+  await ctx.trackModifiedFile(dashboardPath);
+  let content = await fs13.readFile(dashboardPath, "utf-8");
+  if (content.includes("isOnboardingComplete")) return;
+  const redirectImport = `import { redirect } from 'next/navigation';
+`;
+  const onboardingImport = `import { isOnboardingComplete } from '@/features/onboarding/server';
+`;
+  if (!content.includes("from 'next/navigation'")) {
+    const firstImport = content.indexOf("import ");
+    if (firstImport >= 0) {
+      content = content.slice(0, firstImport) + redirectImport + content.slice(firstImport);
+    }
+  }
+  const configImportIdx = content.indexOf("from '@/config/app.config'");
+  if (configImportIdx >= 0) {
+    const lineEnd = content.indexOf("\n", configImportIdx);
+    content = content.slice(0, lineEnd + 1) + onboardingImport + content.slice(lineEnd + 1);
+  } else {
+    const firstImport = content.indexOf("import ");
+    if (firstImport >= 0) {
+      content = content.slice(0, firstImport) + onboardingImport + content.slice(firstImport);
+    }
+  }
+  const sessionLine = content.match(/const session = await verifySession\(\);?\n/);
+  if (sessionLine && sessionLine.index !== void 0) {
+    const insertAt = sessionLine.index + sessionLine[0].length;
+    const redirectBlock = `
+  if (appConfig.features.onboarding) {
+    const complete = await isOnboardingComplete(session.userId);
+    if (!complete) {
+      redirect('/onboarding');
+    }
+  }
+`;
+    content = content.slice(0, insertAt) + redirectBlock + content.slice(insertAt);
+  }
+  await fs13.writeFile(dashboardPath, content);
+}
+async function patchProxyWithOnboardingRoute(projectRoot, ctx) {
+  const proxyPath = path13.join(projectRoot, "src", "proxy.ts");
+  if (!await fs13.pathExists(proxyPath)) return;
+  await ctx.trackModifiedFile(proxyPath);
+  let content = await fs13.readFile(proxyPath, "utf-8");
+  if (content.includes("routes.onboarding")) return;
+  content = content.replace(
+    /const protectedRoutes = \[([^\]]*)\]/,
+    "const protectedRoutes = [$1, routes.onboarding]"
+  );
+  await fs13.writeFile(proxyPath, content);
+}
 async function setConfigFlag6(projectRoot, ctx) {
   const configPath = path13.join(projectRoot, "src", "config", "app.config.ts");
   if (!await fs13.pathExists(configPath)) return;
@@ -4171,8 +4234,13 @@ async function generateAI(projectRoot) {
       "src/features/ai/server/anthropic-provider.ts": anthropicProvider(),
       "src/features/ai/validation/schemas.ts": schemas5(),
       "src/features/ai/hooks/use-chat.ts": useChatHook(),
+      "src/features/ai/components/ChatMessages.tsx": chatMessagesComponent(),
+      "src/features/ai/components/ChatInput.tsx": chatInputComponent(),
+      "src/features/ai/components/Chat.tsx": chatComponent(),
+      "src/features/ai/components/index.ts": componentBarrel(),
       "src/features/ai/index.ts": barrelExports2(),
-      "src/app/api/protected/ai/chat/route.ts": chatRoute()
+      "src/app/api/protected/ai/chat/route.ts": chatRoute(),
+      "src/app/(protected)/ai/page.tsx": aiPage()
     };
     let count = 0;
     for (const [filePath, content] of Object.entries(files)) {
@@ -4186,18 +4254,20 @@ async function generateAI(projectRoot) {
       openai: "^4.0.0",
       "@anthropic-ai/sdk": "^0.30.0"
     });
+    await registerRoute(projectRoot, "ai", "/ai", ctx);
+    await wireProtectedNav4(projectRoot, ctx);
     await setConfigFlag9(projectRoot, ctx);
     await ctx.commit();
     log.success(`Generated AI feature with ${count} files`);
     log.blank();
-    log.step("src/features/ai/ \u2014 types, provider factory, hooks, validation");
+    log.step("src/features/ai/ \u2014 types, provider factory, hooks, validation, chat UI");
+    log.step("src/features/ai/components/ \u2014 Chat, ChatMessages, ChatInput");
+    log.step("src/app/(protected)/ai/ \u2014 AI chat page");
     log.step("src/app/api/protected/ai/chat/ \u2014 streaming chat endpoint");
     log.blank();
     log.warn("Next steps:");
     log.step('Set the provider in appConfig.services.ai.provider ("openai" or "anthropic")');
     log.step("Set OPENAI_API_KEY or ANTHROPIC_API_KEY in .env");
-    log.step("Use getAIProvider() from server code for chat/streaming");
-    log.step("Use useChat() hook for client-side chat interfaces");
     log.blank();
   } catch (error) {
     await ctx.rollback();
@@ -4588,11 +4658,281 @@ export function useChat(options: UseChatOptions = {}): UseChatReturn {
 }
 `;
 }
+function chatMessagesComponent() {
+  return `${STAMP9}
+'use client';
+
+import { useEffect, useRef } from 'react';
+import type { ChatMessage } from '../types';
+import { Spinner } from '@mars-stack/ui';
+
+interface ChatMessagesProps {
+  messages: ChatMessage[];
+  isLoading: boolean;
+}
+
+export function ChatMessages({ messages, isLoading }: ChatMessagesProps) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  if (messages.length === 0) {
+    return (
+      <div className="flex flex-1 items-center justify-center">
+        <div className="text-center">
+          <svg
+            className="mx-auto h-10 w-10 text-text-muted"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1}
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z"
+            />
+          </svg>
+          <p className="mt-3 text-sm text-text-secondary">Start a conversation</p>
+          <p className="mt-1 text-xs text-text-muted">Send a message to begin chatting with the AI assistant.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto px-4 py-6 space-y-4">
+      {messages.map((message, index) => (
+        <div
+          key={index}
+          className={\`flex \${message.role === 'user' ? 'justify-end' : 'justify-start'}\`}
+        >
+          <div
+            className={\`max-w-[80%] rounded-2xl px-4 py-2.5 \${
+              message.role === 'user'
+                ? 'bg-brand-primary text-text-on-brand'
+                : 'bg-surface-card border border-border-default text-text-primary'
+            }\`}
+          >
+            {message.content ? (
+              <p className="text-sm whitespace-pre-wrap">{message.content}</p>
+            ) : isLoading && index === messages.length - 1 ? (
+              <div className="flex items-center gap-1.5 py-1">
+                <Spinner size="sm" />
+                <span className="text-xs text-text-muted">Thinking...</span>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      ))}
+      <div ref={bottomRef} />
+    </div>
+  );
+}
+`;
+}
+function chatInputComponent() {
+  return `${STAMP9}
+'use client';
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { Button } from '@mars-stack/ui';
+
+interface ChatInputProps {
+  onSend: (content: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+function SendIcon() {
+  return (
+    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+    </svg>
+  );
+}
+
+export function ChatInput({ onSend, disabled = false, placeholder = 'Type a message...' }: ChatInputProps) {
+  const [input, setInput] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleSubmit = useCallback(() => {
+    const trimmed = input.trim();
+    if (!trimmed || disabled) return;
+
+    onSend(trimmed);
+    setInput('');
+
+    requestAnimationFrame(() => {
+      if (textareaRef.current) {
+        textareaRef.current.style.height = 'auto';
+      }
+    });
+  }, [input, disabled, onSend]);
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (event.key === 'Enter' && !event.shiftKey) {
+        event.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit],
+  );
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    textarea.style.height = 'auto';
+    textarea.style.height = \`\${Math.min(textarea.scrollHeight, 160)}px\`;
+  }, [input]);
+
+  return (
+    <div className="border-t border-border-default bg-surface-card p-4">
+      <div className="flex items-end gap-2">
+        <textarea
+          ref={textareaRef}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={disabled}
+          rows={1}
+          className="flex-1 resize-none rounded-xl border border-border-input bg-surface-input px-4 py-2.5 text-sm text-text-primary placeholder:text-text-muted focus:border-border-focus focus:outline-none focus:ring-2 focus:ring-ring-focus disabled:opacity-50"
+        />
+        <Button
+          variant="primary"
+          size="md"
+          onClick={handleSubmit}
+          disabled={disabled || !input.trim()}
+          aria-label="Send message"
+        >
+          <SendIcon />
+        </Button>
+      </div>
+      <p className="mt-1.5 text-xs text-text-muted">
+        Press Enter to send, Shift+Enter for a new line.
+      </p>
+    </div>
+  );
+}
+`;
+}
+function chatComponent() {
+  return `${STAMP9}
+'use client';
+
+import { useChat } from '../hooks/use-chat';
+import { ChatMessages } from './ChatMessages';
+import { ChatInput } from './ChatInput';
+
+interface ChatProps {
+  systemPrompt?: string;
+  placeholder?: string;
+  className?: string;
+}
+
+export function Chat({ placeholder, className }: ChatProps) {
+  const { messages, isLoading, error, send, reset } = useChat();
+
+  return (
+    <div className={\`flex flex-col h-full \${className ?? ''}\`}>
+      {error && (
+        <div className="mx-4 mt-4 rounded-lg border border-border-default bg-error-muted p-3">
+          <div className="flex items-center justify-between gap-2">
+            <p className="text-sm text-text-error">{error}</p>
+            <button
+              type="button"
+              onClick={reset}
+              className="text-xs font-medium text-text-link hover:text-text-link-hover"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+      )}
+
+      <ChatMessages messages={messages} isLoading={isLoading} />
+
+      <ChatInput
+        onSend={send}
+        disabled={isLoading}
+        placeholder={placeholder}
+      />
+    </div>
+  );
+}
+`;
+}
+function componentBarrel() {
+  return `${STAMP9}
+export { Chat } from './Chat';
+export { ChatMessages } from './ChatMessages';
+export { ChatInput } from './ChatInput';
+`;
+}
+async function wireProtectedNav4(projectRoot, ctx) {
+  const layoutPath = path16.join(
+    projectRoot,
+    "src",
+    "app",
+    "(protected)",
+    "layout.tsx"
+  );
+  if (!await fs16.pathExists(layoutPath)) return;
+  let content = await fs16.readFile(layoutPath, "utf-8");
+  if (content.includes("routes.ai") || content.includes("label: 'AI'")) return;
+  await ctx.trackModifiedFile(layoutPath);
+  const insertion = `  if (appConfig.features.ai) {
+    items.push({ label: 'AI', href: routes.ai });
+  }
+`;
+  if (content.includes("function buildNavItems()") && content.includes("return items;")) {
+    const returnMarker = "  return items;";
+    const insertPos = content.lastIndexOf(returnMarker);
+    if (insertPos !== -1) {
+      content = content.slice(0, insertPos) + insertion + content.slice(insertPos);
+    }
+  } else if (content.includes("NAV_ITEMS")) {
+    content = insertImportAfterDirectives(
+      content,
+      "// AI nav link added by mars generate ai\n"
+    );
+  }
+  await fs16.writeFile(layoutPath, content);
+}
+function aiPage() {
+  return `${STAMP9}
+'use client';
+
+import { Chat } from '@/features/ai/components';
+
+export default function AIPage() {
+  return (
+    <div className="flex h-[calc(100vh-8rem)] flex-col">
+      <div className="mb-4">
+        <h1 className="text-2xl font-bold text-text-primary">AI Assistant</h1>
+        <p className="mt-1 text-text-secondary">Chat with the AI assistant.</p>
+      </div>
+
+      <div className="flex-1 overflow-hidden rounded-xl border border-border-default bg-surface-card">
+        <Chat placeholder="Ask me anything..." />
+      </div>
+    </div>
+  );
+}
+`;
+}
 function barrelExports2() {
   return `${STAMP9}
 export type { ChatMessage, ChatParams, ChatResponse, AIProvider } from './types';
-export { chatSchema, type ChatInput } from './validation/schemas';
+export { chatSchema } from './validation/schemas';
+export type { ChatInput as ChatFormInput } from './validation/schemas';
 export { useChat } from './hooks/use-chat';
+export { Chat, ChatMessages, ChatInput } from './components';
 `;
 }
 function chatRoute() {
@@ -4636,9 +4976,11 @@ var GENERATOR_VERSION9, STAMP9;
 var init_ai = __esm({
   "src/generators/features/ai.ts"() {
     "use strict";
+    init_client_file_patch();
     init_logger();
     init_rollback();
     init_dependencies();
+    init_routes();
     GENERATOR_VERSION9 = "0.1.0";
     STAMP9 = `// @mars-generated ai@${GENERATOR_VERSION9}`;
   }
@@ -6609,10 +6951,12 @@ var FEATURE_DIRECTORY_MAP = {
     "src/features/billing",
     "src/app/api/protected/billing",
     "src/app/api/webhooks/stripe",
+    "src/app/(protected)/settings/billing",
     "prisma/schema/subscription.prisma"
   ],
   fileUpload: [
     "src/features/uploads",
+    "src/app/(protected)/files",
     "src/app/api/protected/files",
     "prisma/schema/file.prisma"
   ]