scale-stack 0.0.1-alpha.2 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scale-stack",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.2",
   "description": "SKALSTÅKK — flat-packed code efficiency delivered straight to your terminal",
   "type": "module",
   "packageManager": "pnpm@10.33.0",
@@ -9,7 +9,9 @@
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md",
+    "templates"
   ],
   "publishConfig": {
     "access": "public"
@@ -19,6 +21,7 @@
     "run": "node dist/index.js",
     "cli": "tsx src/cli/index.ts",
     "test": "vitest run",
+    "test:e2e": "pnpm build && vitest run --config vitest.e2e.config.ts",
     "test:watch": "vitest",
     "lint": "eslint . && prettier --check .",
     "fix": "eslint . --fix && prettier --write .",
@@ -55,7 +58,9 @@
   "dependencies": {
     "@clack/prompts": "^1.2.0",
     "commander": "^14.0.3",
+    "diff": "^9.0.0",
     "ejs": "^5.0.2",
+    "es-toolkit": "^1.45.1",
     "gradient-string": "^3.0.0",
     "picocolors": "^1.1.1",
     "semver": "^7.7.4"

package/templates/ai-chat/chat-panel.tsx.ejs

@@ -0,0 +1,70 @@
+"use client";
+
+import { type FormEvent, Fragment, useState } from "react";
+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+} from "@/components/ai-elements/conversation";
+import {
+  Message,
+  MessageContent,
+  MessageResponse,
+} from "@/components/ai-elements/message";
+import { useChat } from "../_hooks/useChat";
+
+export function ChatPanel() {
+  const [text, setText] = useState("");
+  const { messages, sendMessage, status } = useChat();
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const nextText = text.trim();
+    if (!nextText) {
+      return;
+    }
+
+    void sendMessage({ text: nextText });
+    setText("");
+  };
+
+  return (
+    <div className="flex min-h-[540px] flex-1 flex-col rounded-lg border bg-background p-4 shadow-sm">
+      <Conversation className="flex-1">
+        <ConversationContent>
+          {messages.map((message) => (
+            <Message from={message.role} key={message.id}>
+              <MessageContent>
+                {message.parts.map((part, index) => (
+                  <Fragment key={`${message.id}-${index}`}>
+                    {part.type === "text" ? (
+                      <MessageResponse>{part.text}</MessageResponse>
+                    ) : null}
+                  </Fragment>
+                ))}
+              </MessageContent>
+            </Message>
+          ))}
+        </ConversationContent>
+        <ConversationScrollButton />
+      </Conversation>
+
+      <form className="mt-4 flex gap-2" onSubmit={handleSubmit}>
+        <textarea
+          className="min-h-20 flex-1 resize-none rounded-md border bg-background px-3 py-2 text-sm outline-none ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          onChange={(event) => setText(event.currentTarget.value)}
+          placeholder="Ask the mock assistant anything..."
+          value={text}
+        />
+        <button
+          className="self-end rounded-md bg-primary px-4 py-2 text-primary-foreground text-sm font-medium disabled:cursor-not-allowed disabled:opacity-50"
+          disabled={!text.trim() || status === "streaming"}
+          type="submit"
+        >
+          {status === "streaming" ? "Sending..." : "Send"}
+        </button>
+      </form>
+    </div>
+  );
+}

package/templates/ai-chat/layout.tsx.ejs

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+<% if (i18n) { %>import { getTranslations } from "next-intl/server";
+import type { Locale } from "next-intl";
+<% } %>
+
+<% if (i18n) { %>type ChatLayoutProps = Readonly<{
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}>;
+
+export async function generateMetadata({
+  params,
+}: Pick<ChatLayoutProps, "params">): Promise<Metadata> {
+  const locale = (await params).locale as Locale;
+  const t = await getTranslations({ locale, namespace: "Chat" });
+
+  return {
+    title: t("metadataTitle"),
+    description: t("metadataDescription"),
+  };
+}
+<% } else { %>
+export const metadata: Metadata = {
+  title: "Chat",
+  description: "Deterministic AI SDK-compatible mock chat",
+};
+<% } %>
+
+export default function ChatLayout({
+  children,
+}: <% if (i18n) { %>ChatLayoutProps<% } else { %>Readonly<{
+  children: React.ReactNode;
+}><% } %>) {
+  return children;
+}

package/templates/ai-chat/page.tsx.ejs

@@ -0,0 +1,37 @@
+<% if (i18n) { %>import { getTranslations } from "next-intl/server";
+import type { Locale } from "next-intl";
+
+<% } %>
+import { ChatPanel } from "./_components/ChatPanel";
+
+<% if (i18n) { %>type ChatPageProps = Readonly<{
+  params: Promise<{ locale: Locale }>;
+}>;
+
+<% } %>export default <% if (i18n) { %>async <% } %>function ChatPage(<% if (i18n) { %>{ params }: ChatPageProps<% } %>) {
+<% if (i18n) { %>  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "Chat" });
+
+<% } %>
+  return (
+    <main className="flex flex-1 flex-col px-6 py-16">
+      <section className="mx-auto flex min-h-[calc(100vh-8rem)] w-full max-w-5xl flex-col gap-6">
+        <div className="space-y-4">
+          <p className="text-sm font-medium tracking-[0.2em] text-muted-foreground uppercase">
+            <% if (i18n) { %>{t("eyebrow")}<% } else { %>AI Chat<% } %>
+          </p>
+          <div className="space-y-3">
+            <h1 className="max-w-3xl text-3xl font-semibold tracking-tight text-balance">
+              <% if (i18n) { %>{t("title")}<% } else { %>AI Elements and AI SDK are wired to a deterministic mock.<% } %>
+            </h1>
+            <p className="max-w-3xl text-muted-foreground text-balance">
+              <% if (i18n) { %>{t("description")}<% } else { %>The UI is ready for an external chat backend, but this scaffold
+              stays provider-free so the route works before credentials exist.<% } %>
+            </p>
+          </div>
+        </div>
+        <ChatPanel />
+      </section>
+    </main>
+  );
+}

package/templates/ai-chat/route.ts.ejs

@@ -0,0 +1,68 @@
+import {
+  createUIMessageStream,
+  createUIMessageStreamResponse,
+  type UIMessage,
+} from "ai";
+
+export const maxDuration = 30;
+
+const SIMULATED_TOKEN_DELAY_MS = 35;
+
+interface ChatRequestBody {
+  messages?: UIMessage[];
+}
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function getLastUserText(messages: UIMessage[]): string {
+  const lastUserMessage = messages.findLast(
+    (message) => message.role === "user",
+  );
+
+  const text = lastUserMessage?.parts
+    .filter((part) => part.type === "text")
+    .map((part) => part.text)
+    .join(" ")
+    .trim();
+
+  return text || "your message";
+}
+
+function splitIntoSimulatedTokens(text: string): string[] {
+  return text.match(/\S+\s*/g) ?? [text];
+}
+
+export async function POST(req: Request) {
+  const body = (await req.json().catch(() => ({}))) as ChatRequestBody;
+  const messages = Array.isArray(body.messages) ? body.messages : [];
+  const lastUserText = getLastUserText(messages);
+  const responseText = `Mock response: I received "${lastUserText}". Replace this route with your external chat backend when ready.`;
+
+  // TODO: Replace this deterministic mock with the external chat backend proxy.
+  return createUIMessageStreamResponse({
+    stream: createUIMessageStream({
+      async execute({ writer }) {
+        writer.write({
+          type: "text-start",
+          id: "mock-response",
+        });
+
+        for (const token of splitIntoSimulatedTokens(responseText)) {
+          writer.write({
+            type: "text-delta",
+            id: "mock-response",
+            delta: token,
+          });
+          await sleep(SIMULATED_TOKEN_DELAY_MS);
+        }
+
+        writer.write({
+          type: "text-end",
+          id: "mock-response",
+        });
+      },
+    }),
+  });
+}

package/templates/ai-chat/use-chat.ts.ejs

@@ -0,0 +1,26 @@
+"use client";
+
+import { useChat as useAiChat } from "@ai-sdk/react";
+import { DefaultChatTransport, type UIMessage } from "ai";
+
+const initialMessages: UIMessage[] = [
+  {
+    id: "mock-assistant-welcome",
+    role: "assistant",
+    parts: [
+      {
+        type: "text",
+        text: "Hi! This is a deterministic mock assistant. Send a message to verify the AI SDK transport before connecting a real backend.",
+      },
+    ],
+  },
+];
+
+export function useChat() {
+  return useAiChat({
+    messages: initialMessages,
+    transport: new DefaultChatTransport({
+      api: "/api/chat",
+    }),
+  });
+}

package/templates/analytics/analytics-provider.tsx.ejs

@@ -0,0 +1,32 @@
+"use client";
+
+import type { ReactNode } from "react";
+import Script from "next/script";
+import { env } from "@/env";
+
+export interface AnalyticsProviderProps {
+  children: ReactNode;
+  hasConsent?: boolean;
+}
+
+export function AnalyticsProvider({
+  children,
+  hasConsent = false,
+}: AnalyticsProviderProps) {
+  if (!hasConsent) {
+    return <>{children}</>;
+  }
+
+  return (
+    <>
+      {children}
+      <Script id="plausible-analytics-bootstrap" strategy="afterInteractive">
+        {`window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};plausible.init({captureOnLocalhost:${env.NEXT_PUBLIC_PLAUSIBLE_CAPTURE_LOCALHOST === "true"}})`}
+      </Script>
+      <Script
+        src={env.NEXT_PUBLIC_PLAUSIBLE_SCRIPT_SRC}
+        strategy="afterInteractive"
+      />
+    </>
+  );
+}

package/templates/analytics/analytics.ts.ejs

@@ -0,0 +1,40 @@
+export interface AnalyticsEvents {
+  page_viewed: undefined;
+  cta_clicked: {
+    location: string;
+    label?: string;
+  };
+  form_submitted: {
+    formId: string;
+    success: boolean;
+  };
+}
+
+export type AnalyticsEventName = keyof AnalyticsEvents;
+
+type PlausibleProperties = Record<string, string | number | boolean | null>;
+
+type PlausibleEvent = (
+  eventName: string,
+  options?: { props?: PlausibleProperties },
+) => void;
+
+declare global {
+  interface Window {
+    plausible?: PlausibleEvent;
+  }
+}
+
+export function trackEvent<EventName extends AnalyticsEventName>(
+  eventName: EventName,
+  ...args: AnalyticsEvents[EventName] extends undefined
+    ? []
+    : [properties: AnalyticsEvents[EventName]]
+): void {
+  if (typeof window === "undefined" || typeof window.plausible !== "function") {
+    return;
+  }
+
+  const properties = args[0] as PlausibleProperties | undefined;
+  window.plausible(eventName, properties ? { props: properties } : undefined);
+}

package/templates/auth/auth-client.ts.ejs

@@ -0,0 +1,7 @@
+"use client";
+
+import { createAuthClient } from "better-auth/react";
+
+export const authClient = createAuthClient();
+
+export const { signIn, signUp, signOut, useSession } = authClient;

package/templates/auth/auth.ts.ejs

@@ -0,0 +1,45 @@
+import { betterAuth } from "better-auth";
+<% if (isStateful) { %>import { prismaAdapter } from "better-auth/adapters/prisma";
+import { prisma } from "@/lib/prisma";
+<% } %>import { nextCookies } from "better-auth/next-js";
+import { env } from "@/env";
+
+export const auth = betterAuth({
+  baseURL: env.BETTER_AUTH_URL,
+  secret: env.BETTER_AUTH_SECRET,
+  advanced: {
+    disableCSRFCheck: false,
+  },
+  socialProviders: {
+    microsoft: {
+      clientId: env.MICROSOFT_CLIENT_ID,
+      clientSecret: env.MICROSOFT_CLIENT_SECRET,
+      tenantId: env.MICROSOFT_TENANT_ID,
+      authority: "https://login.microsoftonline.com",
+      prompt: "select_account",
+      // Create an app registration in Microsoft Entra admin center.
+      // Copy its Application (client) ID and client secret into env vars.
+      // Add this redirect URI for local dev:
+      // http://localhost:3000/api/auth/callback/microsoft
+    },
+  },
+<% if (isStateful) { %>  database: prismaAdapter(prisma, {
+    provider: "postgresql",
+  }),
+  emailAndPassword: {
+    enabled: true,
+  },
+<% } else { %>  session: {
+    cookieCache: {
+      enabled: true,
+      maxAge: 7 * 24 * 60 * 60,
+      strategy: "jwe",
+      refreshCache: true,
+    },
+  },
+  account: {
+    storeStateStrategy: "cookie",
+    storeAccountCookie: true,
+  },
+<% } %>  plugins: [nextCookies()],
+});

package/templates/auth/route.ts.ejs

@@ -0,0 +1,4 @@
+import { auth } from "@/lib/auth";
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { GET, POST } = toNextJsHandler(auth);

package/templates/auth/sign-in-page.tsx.ejs

@@ -0,0 +1,122 @@
+"use client";
+
+<% if (isStateful) { %>import type { FormEvent } from "react";
+<% if (i18n) { %>import { Link } from "@/i18n/navigation";
+<% } else { %>import Link from "next/link";
+<% } %><% } %><% if (i18n) { %>import { useTranslations } from "next-intl";
+<% } %>import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+<% if (isStateful) { %>  CardFooter,
+<% } %>  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+<% if (isStateful) { %>import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+<% } %>import { authClient } from "@/lib/auth-client";
+
+export default function SignInPage() {
+<% if (i18n) { %>  const t = useTranslations("Auth");
+<% } %>
+<% if (isStateful) { %>  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+<% } %>  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function signInWithMicrosoft() {
+    setPending(true);
+    setError(null);
+    const result = await authClient.signIn.social({
+      provider: "microsoft",
+      callbackURL: "/",
+    });
+    setPending(false);
+
+    if (result.error) {
+      setError(result.error.message ?? <% if (i18n) { %>t("microsoftSignInFailed")<% } else { %>"Microsoft sign-in failed."<% } %>);
+    }
+  }
+<% if (isStateful) { %>
+  async function signInWithEmail(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setPending(true);
+    setError(null);
+    const result = await authClient.signIn.email({
+      email,
+      password,
+      callbackURL: "/",
+    });
+    setPending(false);
+
+    if (result.error) {
+      setError(result.error.message ?? <% if (i18n) { %>t("emailSignInFailed")<% } else { %>"Email sign-in failed."<% } %>);
+    }
+  }
+<% } %>
+  return (
+    <main className="flex flex-1 items-center justify-center px-6 py-24">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle><% if (i18n) { %>{t("signInTitle")}<% } else { %>Sign in<% } %></CardTitle>
+          <CardDescription>
+            <% if (i18n) { %>{t("<% if (isStateful) { %>signInDescriptionStateful<% } else { %>signInDescriptionStateless<% } %>")}<% } else { %>Use your Microsoft account<% if (isStateful) { %> or email and password<% } %> to continue.<% } %>
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <Button
+            className="w-full"
+            type="button"
+            variant="outline"
+            onClick={signInWithMicrosoft}
+            disabled={pending}
+          >
+            <% if (i18n) { %>{t("continueWithMicrosoft")}<% } else { %>Continue with Microsoft<% } %>
+          </Button>
+<% if (isStateful) { %>
+          <form className="space-y-4" onSubmit={signInWithEmail}>
+            <div className="space-y-2">
+              <Label htmlFor="email"><% if (i18n) { %>{t("email")}<% } else { %>Email<% } %></Label>
+              <Input
+                id="email"
+                type="email"
+                autoComplete="email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password"><% if (i18n) { %>{t("password")}<% } else { %>Password<% } %></Label>
+              <Input
+                id="password"
+                type="password"
+                autoComplete="current-password"
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                required
+              />
+            </div>
+            <Button className="w-full" type="submit" disabled={pending}>
+              <% if (i18n) { %>{t("signInWithEmail")}<% } else { %>Sign in with email<% } %>
+            </Button>
+          </form>
+<% } %>
+          {error ? <p className="text-sm text-destructive">{error}</p> : null}
+        </CardContent>
+<% if (isStateful) { %>
+        <CardFooter>
+          <p className="text-sm text-muted-foreground">
+            <% if (i18n) { %>{t("noAccount")}<% } else { %>No account?<% } %>{" "}
+            <Link className="font-medium text-foreground underline" href="/sign-up">
+              <% if (i18n) { %>{t("createOne")}<% } else { %>Create one<% } %>
+            </Link>
+          </p>
+        </CardFooter>
+<% } %>
+      </Card>
+    </main>
+  );
+}

package/templates/auth/sign-up-page.tsx.ejs

@@ -0,0 +1,137 @@
+"use client";
+
+<% if (isStateful) { %>import type { FormEvent } from "react";
+<% if (i18n) { %>import { Link } from "@/i18n/navigation";
+<% } else { %>import Link from "next/link";
+<% } %><% } %><% if (i18n) { %>import { useTranslations } from "next-intl";
+<% } %>import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+<% if (isStateful) { %>  CardFooter,
+<% } %>
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+<% if (isStateful) { %>import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+<% } %>import { authClient } from "@/lib/auth-client";
+
+export default function SignUpPage() {
+<% if (i18n) { %>  const t = useTranslations("Auth");
+<% } %>
+<% if (isStateful) { %>  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+<% } %>  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function signInWithMicrosoft() {
+    setPending(true);
+    setError(null);
+    const result = await authClient.signIn.social({
+      provider: "microsoft",
+      callbackURL: "/",
+    });
+    setPending(false);
+
+    if (result.error) {
+      setError(result.error.message ?? <% if (i18n) { %>t("microsoftSignInFailed")<% } else { %>"Microsoft sign-in failed."<% } %>);
+    }
+  }
+<% if (isStateful) { %>
+  async function signUpWithEmail(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setPending(true);
+    setError(null);
+    const result = await authClient.signUp.email({
+      name,
+      email,
+      password,
+      callbackURL: "/",
+    });
+    setPending(false);
+
+    if (result.error) {
+      setError(result.error.message ?? <% if (i18n) { %>t("emailSignUpFailed")<% } else { %>"Email sign-up failed."<% } %>);
+    }
+  }
+<% } %>
+  return (
+    <main className="flex flex-1 items-center justify-center px-6 py-24">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle><% if (i18n) { %>{t("<% if (isStateful) { %>createAccountTitle<% } else { %>createAccountMicrosoftTitle<% } %>")}<% } else { %><% if (isStateful) { %>Create account<% } else { %>Create account with Microsoft<% } %><% } %></CardTitle>
+          <CardDescription>
+            <% if (i18n) { %>{t("<% if (isStateful) { %>createAccountDescriptionStateful<% } else { %>createAccountDescriptionStateless<% } %>")}<% } else { %><% if (isStateful) { %>Use Microsoft or email/password to create your account.<% } else { %>Account creation is handled by Microsoft Entra for this stateless setup.<% } %><% } %>
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <Button
+            className="w-full"
+            type="button"
+            variant="outline"
+            onClick={signInWithMicrosoft}
+            disabled={pending}
+          >
+            <% if (i18n) { %>{t("continueWithMicrosoft")}<% } else { %>Continue with Microsoft<% } %>
+          </Button>
+<% if (isStateful) { %>
+          <form className="space-y-4" onSubmit={signUpWithEmail}>
+            <div className="space-y-2">
+              <Label htmlFor="name"><% if (i18n) { %>{t("name")}<% } else { %>Name<% } %></Label>
+              <Input
+                id="name"
+                type="text"
+                autoComplete="name"
+                value={name}
+                onChange={(event) => setName(event.target.value)}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="email"><% if (i18n) { %>{t("email")}<% } else { %>Email<% } %></Label>
+              <Input
+                id="email"
+                type="email"
+                autoComplete="email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password"><% if (i18n) { %>{t("password")}<% } else { %>Password<% } %></Label>
+              <Input
+                id="password"
+                type="password"
+                autoComplete="new-password"
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                minLength={8}
+                required
+              />
+            </div>
+            <Button className="w-full" type="submit" disabled={pending}>
+              <% if (i18n) { %>{t("createAccountTitle")}<% } else { %>Create account<% } %>
+            </Button>
+          </form>
+<% } %>
+          {error ? <p className="text-sm text-destructive">{error}</p> : null}
+        </CardContent>
+<% if (isStateful) { %>
+        <CardFooter>
+          <p className="text-sm text-muted-foreground">
+            <% if (i18n) { %>{t("alreadyHaveAccount")}<% } else { %>Already have an account?<% } %>{" "}
+            <Link className="font-medium text-foreground underline" href="/sign-in">
+              <% if (i18n) { %>{t("signInTitle")}<% } else { %>Sign in<% } %>
+            </Link>
+          </p>
+        </CardFooter>
+<% } %>
+      </Card>
+    </main>
+  );
+}