ai-forge-cli 0.4.2 → 0.4.6

package/dist/add-page-GIC2ZXJI.js

@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+import {
+  kebabCase,
+  pascalCase,
+  renderTemplate
+} from "./chunk-MBF6K2AC.js";
+import {
+  fileExists,
+  logger,
+  readFile,
+  writeFile
+} from "./chunk-HL4K5AHI.js";
+
+// src/commands/add-page.ts
+import { defineCommand } from "citty";
+import { join } from "path";
+var add_page_default = defineCommand({
+  meta: {
+    name: "add:page",
+    description: "Create a non-feature page (about, pricing, settings)"
+  },
+  args: {
+    name: {
+      type: "positional",
+      description: "Page name or path (e.g., 'about' or 'settings/profile')",
+      required: true
+    }
+  },
+  async run({ args }) {
+    const cwd = process.cwd();
+    const rawName = args.name;
+    const name = kebabCase(rawName);
+    const routePath = name.includes("/") ? name.replace(/\//g, ".") : name;
+    const componentFolder = name.includes("/") ? name.split("/")[0] : name;
+    const componentName = pascalCase(name.replace(/\//g, "-"));
+    const routeFile = join(cwd, "src/routes", `${routePath}.tsx`);
+    if (await fileExists(routeFile)) {
+      logger.error(`Page "${name}" already exists at ${routeFile}`);
+      process.exit(1);
+    }
+    logger.blank();
+    const templateData = {
+      name,
+      routePath,
+      componentFolder,
+      componentName
+    };
+    const routeContent = renderTemplate("page/route.tsx.hbs", templateData);
+    await writeFile(routeFile, routeContent);
+    logger.success(`Created src/routes/${routePath}.tsx`);
+    const contentPath = join(cwd, "src/components", componentFolder, `${componentName}Content.tsx`);
+    const contentTemplate = renderTemplate("page/components/Content.tsx.hbs", templateData);
+    await writeFile(contentPath, contentTemplate);
+    logger.success(`Created src/components/${componentFolder}/${componentName}Content.tsx`);
+    const indexPath = join(cwd, "src/components", componentFolder, "index.ts");
+    const exportLine = `export { ${componentName}Content } from "./${componentName}Content";`;
+    if (await fileExists(indexPath)) {
+      const existing = await readFile(indexPath);
+      if (!existing.includes(exportLine)) {
+        await writeFile(indexPath, existing.trim() + "\n" + exportLine + "\n");
+        logger.success(`Updated src/components/${componentFolder}/index.ts`);
+      }
+    } else {
+      const indexContent = renderTemplate("page/components/index.ts.hbs", templateData);
+      await writeFile(indexPath, indexContent);
+      logger.success(`Created src/components/${componentFolder}/index.ts`);
+    }
+    logger.blank();
+    logger.log(`  Page "${name}" created!`);
+    logger.blank();
+    logger.log("  Files:");
+    logger.log(`    - src/routes/${routePath}.tsx`);
+    logger.log(`    - src/components/${componentFolder}/${componentName}Content.tsx`);
+    logger.blank();
+    logger.log(`  Visit: http://localhost:3000/${name.replace(/\./g, "/")}`);
+    logger.blank();
+  }
+});
+export {
+  add_page_default as default
+};

package/dist/add-util-T5JXAV4G.js

@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+import {
+  camelCase,
+  kebabCase,
+  renderTemplate
+} from "./chunk-MBF6K2AC.js";
+import {
+  fileExists,
+  logger,
+  readFile,
+  writeFile
+} from "./chunk-HL4K5AHI.js";
+
+// src/commands/add-util.ts
+import { defineCommand } from "citty";
+import { join } from "path";
+var add_util_default = defineCommand({
+  meta: {
+    name: "add:util",
+    description: "Create a new utility function in src/lib"
+  },
+  args: {
+    name: {
+      type: "positional",
+      description: "Utility name (will be camelCased)",
+      required: true
+    }
+  },
+  async run({ args }) {
+    const cwd = process.cwd();
+    const rawName = args.name;
+    const utilName = camelCase(rawName);
+    const fileName = kebabCase(rawName);
+    const libDir = join(cwd, "src/lib");
+    const utilPath = join(libDir, `${fileName}.ts`);
+    const indexPath = join(libDir, "index.ts");
+    if (await fileExists(utilPath)) {
+      logger.error(`Utility "${utilName}" already exists at src/lib/${fileName}.ts`);
+      process.exit(1);
+    }
+    logger.blank();
+    const templateData = {
+      utilName,
+      fileName
+    };
+    const content = renderTemplate("util/util.ts.hbs", templateData);
+    await writeFile(utilPath, content);
+    logger.success(`Created src/lib/${fileName}.ts`);
+    const exportLine = `export { ${utilName} } from "./${fileName}";`;
+    if (await fileExists(indexPath)) {
+      const existing = await readFile(indexPath);
+      if (!existing.includes(exportLine)) {
+        await writeFile(indexPath, existing.trim() + "\n" + exportLine + "\n");
+        logger.success("Updated src/lib/index.ts");
+      }
+    } else {
+      await writeFile(indexPath, exportLine + "\n");
+      logger.success("Created src/lib/index.ts");
+    }
+    logger.blank();
+    logger.log(`  Utility "${utilName}" created!`);
+    logger.blank();
+    logger.log("  Location:");
+    logger.log(`    src/lib/${fileName}.ts`);
+    logger.blank();
+    logger.log("  Import:");
+    logger.log(`    import { ${utilName} } from "~/lib";`);
+    logger.blank();
+  }
+});
+export {
+  add_util_default as default
+};

package/dist/{chunk-PIFX2L5H.js → chunk-MBF6K2AC.js}

@@ -41,6 +41,7 @@ function renderTemplate(templatePath, data) {
 
 export {
   camelCase,
+  pascalCase,
   kebabCase,
   renderTemplate
 };

package/dist/chunk-YMJTSRWM.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+import {
+  logger
+} from "./chunk-HL4K5AHI.js";
+
+// src/utils/shadcn.ts
+import { spawn } from "child_process";
+import { existsSync } from "fs";
+import { join } from "path";
+var SHADCN_DEPS = {
+  feature: ["button", "input", "label"],
+  auth: ["button", "input", "label"],
+  storage: ["button"],
+  dashboard: ["button", "avatar", "dropdown-menu", "sheet"],
+  marketing: ["button"]
+};
+function runCommand(cmd, args, cwd) {
+  return new Promise((resolve, reject) => {
+    const proc = spawn(cmd, args, { cwd, stdio: "pipe" });
+    proc.on("close", (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`Command failed with code ${code}`));
+    });
+    proc.on("error", reject);
+  });
+}
+async function ensureShadcnComponents(cwd, type) {
+  const required = SHADCN_DEPS[type];
+  if (!required || required.length === 0) return;
+  const uiDir = join(cwd, "src/components/ui");
+  const missing = required.filter(
+    (component) => !existsSync(join(uiDir, `${component}.tsx`))
+  );
+  if (missing.length === 0) {
+    return;
+  }
+  const step = logger.step(`Installing shadcn components: ${missing.join(", ")}`);
+  try {
+    await runCommand("npx", ["shadcn@latest", "add", ...missing, "--yes"], cwd);
+    step.succeed("shadcn components installed");
+  } catch {
+    step.fail("Could not auto-install shadcn components");
+    logger.warn(`Run manually: npx shadcn@latest add ${missing.join(" ")}`);
+  }
+}
+
+export {
+  ensureShadcnComponents
+};

package/dist/index.js

@@ -19,9 +19,14 @@ var main = defineCommand({
     }
   },
   subCommands: {
-    init: () => import("./init-OYJP5QCZ.js").then((m) => m.default),
-    "add:feature": () => import("./add-feature-2AR4DP7P.js").then((m) => m.default),
-    "add:integration": () => import("./add-integration-QXB63S3V.js").then((m) => m.default),
+    init: () => import("./init-C4FFZDSP.js").then((m) => m.default),
+    "add:feature": () => import("./add-feature-VEY62Y5M.js").then((m) => m.default),
+    "add:integration": () => import("./add-integration-NJ56UXSY.js").then((m) => m.default),
+    "add:page": () => import("./add-page-GIC2ZXJI.js").then((m) => m.default),
+    "add:layout": () => import("./add-layout-2KQPPTJX.js").then((m) => m.default),
+    "add:component": () => import("./add-component-AQPCXQ4O.js").then((m) => m.default),
+    "add:hook": () => import("./add-hook-OE4BKE6B.js").then((m) => m.default),
+    "add:util": () => import("./add-util-T5JXAV4G.js").then((m) => m.default),
     check: () => import("./check-YMGJNKME.js").then((m) => m.default),
     version: () => import("./version-VO3LHLDO.js").then((m) => m.default)
   },

package/dist/{init-OYJP5QCZ.js → init-C4FFZDSP.js}

@@ -2,7 +2,7 @@
 import {
   kebabCase,
   renderTemplate
-} from "./chunk-PIFX2L5H.js";
+} from "./chunk-MBF6K2AC.js";
 import {
   ensureDir,
   fileExists,

package/dist/templates/component/Component.tsx.hbs

@@ -0,0 +1,11 @@
+interface {{componentName}}Props {
+  className?: string;
+}
+
+export function {{componentName}}({ className }: {{componentName}}Props) {
+  return (
+    <div className={className}>
+      {/* {{componentName}} content */}
+    </div>
+  );
+}

package/dist/templates/feature/routes/$id.tsx.hbs

@@ -1,5 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { use{{pascalCase name}} } from "~/features/{{camelCase name}}";
+import { {{pascalCase name}}Detail } from "~/features/{{camelCase name}}";
 import type { Id } from "@convex/_generated/dataModel";
 
 export const Route = createFileRoute("/{{kebabCase name}}/$id")({
@@ -8,20 +8,10 @@ export const Route = createFileRoute("/{{kebabCase name}}/$id")({
 
 function {{pascalCase name}}DetailRoute() {
   const { id } = Route.useParams();
-  const { item, isLoading } = use{{pascalCase name}}(id as Id<"{{camelCase name}}">);
-
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
-
-  if (!item) {
-    return <div>Not found</div>;
-  }
 
   return (
-    <div>
-      <h1>{{pascalCase name}} Detail</h1>
-      {/* Build your UI here */}
+    <div className="container py-8">
+      <{{pascalCase name}}Detail id={id as Id<"{{camelCase name}}">} />
     </div>
   );
 }

package/dist/templates/feature/routes/index.tsx.hbs

@@ -1,21 +1,31 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { use{{pascalCase name}}List } from "~/features/{{camelCase name}}";
+import { {{pascalCase name}}List, {{pascalCase name}}Form } from "~/features/{{camelCase name}}";
+import { useState } from "react";
+import { Button } from "~/components/ui/button";
 
 export const Route = createFileRoute("/{{kebabCase name}}/")({
   component: {{pascalCase name}}IndexRoute,
 });
 
 function {{pascalCase name}}IndexRoute() {
-  const { items, isLoading } = use{{pascalCase name}}List();
-
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
+  const [showForm, setShowForm] = useState(false);
 
   return (
-    <div>
-      <h1>{{pascalCase name}}</h1>
-      {/* Build your UI here */}
+    <div className="container py-8 space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-3xl font-bold">{{pascalCase name}}</h1>
+        <Button onClick={() => setShowForm(!showForm)}>
+          {showForm ? "Cancel" : "Create New"}
+        </Button>
+      </div>
+
+      {showForm && (
+        <div className="rounded-lg border p-4">
+          <{{pascalCase name}}Form onSuccess={() => setShowForm(false)} />
+        </div>
+      )}
+
+      <{{pascalCase name}}List />
     </div>
   );
 }

package/dist/templates/feature/src/components/Card.tsx.hbs

@@ -0,0 +1,21 @@
+import { Link } from "@tanstack/react-router";
+import type { Doc } from "@convex/_generated/dataModel";
+
+interface {{pascalCase name}}CardProps {
+  {{camelCase name}}: Doc<"{{camelCase name}}">;
+}
+
+export function {{pascalCase name}}Card({ {{camelCase name}} }: {{pascalCase name}}CardProps) {
+  return (
+    <Link
+      to="/{{kebabCase name}}/$id"
+      params=\{{ id: {{camelCase name}}._id }}
+      className="block rounded-lg border p-4 hover:border-foreground transition-colors"
+    >
+      <h3 className="font-medium">{{pascalCase name}}</h3>
+      <p className="text-sm text-muted-foreground">
+        Created {new Date({{camelCase name}}.createdAt).toLocaleDateString()}
+      </p>
+    </Link>
+  );
+}

package/dist/templates/feature/src/components/Detail.tsx.hbs

@@ -0,0 +1,28 @@
+import { use{{pascalCase name}} } from "../hooks";
+import type { Id } from "@convex/_generated/dataModel";
+
+interface {{pascalCase name}}DetailProps {
+  id: Id<"{{camelCase name}}">;
+}
+
+export function {{pascalCase name}}Detail({ id }: {{pascalCase name}}DetailProps) {
+  const { item, isLoading } = use{{pascalCase name}}(id);
+
+  if (isLoading) {
+    return <div className="animate-pulse">Loading...</div>;
+  }
+
+  if (!item) {
+    return <div>Not found</div>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <h1 className="text-2xl font-bold">{{pascalCase name}} Details</h1>
+      {/* Customize your detail view here */}
+      <pre className="rounded bg-muted p-4 text-sm overflow-auto">
+        {JSON.stringify(item, null, 2)}
+      </pre>
+    </div>
+  );
+}

package/dist/templates/feature/src/components/Form.tsx.hbs

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { use{{pascalCase name}}Mutations } from "../hooks";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+
+interface {{pascalCase name}}FormProps {
+  onSuccess?: () => void;
+}
+
+export function {{pascalCase name}}Form({ onSuccess }: {{pascalCase name}}FormProps) {
+  const { create } = use{{pascalCase name}}Mutations();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    const formData = new FormData(e.currentTarget);
+
+    try {
+      await create({
+        // Add your fields here from formData
+        // Example: name: formData.get("name") as string,
+      });
+      e.currentTarget.reset();
+      onSuccess?.();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      {/* Add your form fields here */}
+      <div className="space-y-2">
+        <Label htmlFor="name">Name</Label>
+        <Input id="name" name="name" required />
+      </div>
+
+      <Button type="submit" disabled={isLoading}>
+        {isLoading ? "Creating..." : "Create {{pascalCase name}}"}
+      </Button>
+    </form>
+  );
+}

package/dist/templates/feature/src/components/List.tsx.hbs

@@ -0,0 +1,26 @@
+import { use{{pascalCase name}}List } from "../hooks";
+import { {{pascalCase name}}Card } from "./{{pascalCase name}}Card";
+
+export function {{pascalCase name}}List() {
+  const { items, isLoading } = use{{pascalCase name}}List();
+
+  if (isLoading) {
+    return <div className="animate-pulse">Loading...</div>;
+  }
+
+  if (items.length === 0) {
+    return (
+      <div className="text-center py-12 text-muted-foreground">
+        No {{name}} yet. Create your first one!
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {items.map((item) => (
+        <{{pascalCase name}}Card key={item._id} {{camelCase name}}={item} />
+      ))}
+    </div>
+  );
+}

package/dist/templates/feature/src/components/index.ts.hbs

@@ -1,4 +1,4 @@
-// Export components as you create them
-// export { {{pascalCase name}}Card } from "./{{pascalCase name}}Card";
-// export { {{pascalCase name}}List } from "./{{pascalCase name}}List";
-// export { {{pascalCase name}}Form } from "./{{pascalCase name}}Form";
+export { {{pascalCase name}}List } from "./{{pascalCase name}}List";
+export { {{pascalCase name}}Card } from "./{{pascalCase name}}Card";
+export { {{pascalCase name}}Form } from "./{{pascalCase name}}Form";
+export { {{pascalCase name}}Detail } from "./{{pascalCase name}}Detail";

package/dist/templates/hook/feature-hook.ts.hbs

@@ -0,0 +1,4 @@
+export function {{hookName}}() {
+  // Add your hook logic here
+  return {};
+}

package/dist/templates/hook/global-hook.ts.hbs

@@ -0,0 +1,11 @@
+import { useState, useCallback } from "react";
+
+export function {{hookName}}() {
+  const [state, setState] = useState<unknown>(null);
+
+  const update = useCallback((value: unknown) => {
+    setState(value);
+  }, []);
+
+  return { state, update };
+}

package/dist/templates/init/claude.md.hbs

@@ -25,12 +25,35 @@ The ONLY route you may create directly is `src/routes/index.tsx` (homepage).
 pnpm dev                       # Start dev server
 npx convex dev                 # Start Convex backend
 pnpm lint                      # Check with Biome
-forge add:feature <name>       # Scaffold a new feature
-forge add:integration auth     # Add Convex Auth
-forge add:integration storage  # Add Convex file storage
 forge check                    # Validate architecture (run before finishing)
 ```
 
+## Forge CLI Commands
+
+```bash
+# Features (vertical slice architecture)
+forge add:feature <name>       # Scaffold full-stack feature (components, hooks, routes, Convex backend)
+
+# Pages & Layouts
+forge add:page <name>          # Create a non-feature page (about, pricing, settings/profile)
+forge add:layout <name>        # Create a layout with preset (--preset dashboard|auth|marketing)
+
+# Components, Hooks & Utilities
+forge add:component <name>     # Create component in src/components/ui/
+forge add:component <name> --feature <feature>  # Add component to a feature
+forge add:component <name> --page <page>        # Add component to a page folder
+forge add:component <name> --layout <layout>    # Add component to a layout folder
+
+forge add:hook <name>          # Create hook in src/hooks/
+forge add:hook <name> --feature <feature>       # Append hook to feature's hooks.ts
+
+forge add:util <name>          # Create utility in src/lib/
+
+# Integrations
+forge add:integration auth     # Add Convex Auth with password flow + UI
+forge add:integration storage  # Add Convex file storage + UI components
+```
+
 ## Integrations
 
 For infrastructure (not features), use `forge add:integration`:
@@ -44,9 +67,10 @@ These create files in `convex/` and `src/lib/` - NOT in features.
 ```
 src/routes/         → Thin route files (import from features, no logic)
 src/features/       → Feature code (components/, hooks.ts)
-src/components/ui/  → shadcn primitives only
-src/components/     → Truly shared components (Header, Footer, Logo)
-src/lib/            → Utilities + integration hooks (auth.ts, storage.ts)
+src/components/ui/  → shadcn primitives + global custom components
+src/components/     → Page and layout specific components
+src/hooks/          → Global hooks (created via forge add:hook)
+src/lib/            → Utilities (cn.ts, auth.ts, storage.ts)
 convex/features/    → Backend (mirrors src/features/)
 convex/lib/         → Shared backend utilities (storage.ts)
 convex/auth.ts      → Auth configuration (from forge add:integration auth)
@@ -54,12 +78,12 @@ convex/auth.ts      → Auth configuration (from forge add:integration auth)
 
 ## Where Components Go
 
-- `src/components/ui/*` → shadcn primitives (Button, Card, Dialog)
-- `src/components/*.tsx` → Truly shared components used across multiple pages
-- `src/features/<name>/components/` → Page-specific components
+- `src/components/ui/*` → shadcn primitives (Button, Card, Dialog) + global custom components
+- `src/components/<page>/` → Page-specific components (created via `forge add:page` or `forge add:component --page`)
+- `src/components/<layout>/` → Layout components (Sidebar, Header - created via `forge add:layout`)
+- `src/features/<name>/components/` → Feature-specific components
 
-**IMPORTANT:** NO subdirectories in `src/components/` except `ui/`.
-If you need 3+ components for a page, create a feature with `forge add:feature`.
+Use `forge add:component` with appropriate flags to scaffold components in the correct location.
 
 ## Rules
 
@@ -71,4 +95,6 @@ If you need 3+ components for a page, create a feature with `forge add:feature`.
 
 - **Data/Mutations**: Use hooks from `src/features/<name>/hooks.ts`
 - **UI Components**: Import from `~/components/ui/*` (shadcn)
+- **Global Hooks**: Import from `~/hooks`
+- **Utilities**: Import from `~/lib`
 - **Styling**: Tailwind classes only

package/dist/templates/integration/auth/src/components/auth/AuthGuard.tsx.hbs

@@ -0,0 +1,31 @@
+"use client";
+
+import { useConvexAuth } from "convex/react";
+import { useNavigate } from "@tanstack/react-router";
+import { useEffect } from "react";
+
+interface AuthGuardProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+export function AuthGuard({ children, fallback }: AuthGuardProps) {
+  const { isAuthenticated, isLoading } = useConvexAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      navigate({ to: "/login" });
+    }
+  }, [isAuthenticated, isLoading, navigate]);
+
+  if (isLoading) {
+    return fallback ?? <div className="flex h-screen items-center justify-center">Loading...</div>;
+  }
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return <>{children}</>;
+}