create-dowel-app 0.7.0

package/templates/ai/src/app/app/agents/page.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+
+import type { LedgerAction } from "@/components/ui/ai-action-ledger";
+import type { PlanStep } from "@/components/ui/ai-agent-plan";
+import type { ApprovalDecision } from "@/components/ui/ai-approval-request";
+import { AgentConsoleBlock } from "@/components/blocks/agent-console";
+
+const PLAN: PlanStep[] = [
+  { id: "1", title: "Scan the contact table", status: "done", detail: "18,402 records" },
+  { id: "2", title: "Group likely duplicates", status: "done", detail: "41 groups" },
+  { id: "3", title: "Merge each group", status: "running" },
+  { id: "4", title: "Notify the record owners", status: "pending" },
+];
+
+const ACTIONS: LedgerAction[] = [
+  {
+    id: "a1",
+    summary: "Merged 3 contacts into Acme Inc.",
+    reversibility: "revertible",
+    status: "applied",
+  },
+  {
+    id: "a2",
+    summary: "Refunded $40.00 to Acme Inc.",
+    reversibility: "compensable",
+    status: "applied",
+  },
+  {
+    id: "a3",
+    summary: "Emailed 12 record owners",
+    reversibility: "irreversible",
+    status: "applied",
+  },
+];
+
+export default function AgentsPage() {
+  const [decision, setDecision] = useState<ApprovalDecision | undefined>(undefined);
+
+  return (
+    <AgentConsoleBlock
+      title="Deduplicate contacts"
+      description="Replace this with a real run from your own agent."
+      state={decision ? "working" : "waiting"}
+      plan={PLAN}
+      tokensUsed={42_180}
+      tokenLimit={128_000}
+      approval={{
+        tool: "delete_contacts",
+        summary: "Delete 3 contacts that look like duplicates of existing records.",
+        arguments: { ids: "c_8812, c_8813, c_8901", reason: "duplicate of c_1204" },
+        fields: [
+          { name: "ids", label: "Contact ids", readOnly: true },
+          { name: "reason", label: "Reason" },
+        ],
+        irreversible: "Deleted contacts cannot be restored.",
+        decision,
+      }}
+      onApprovalDecision={setDecision}
+      actions={ACTIONS}
+      onRevert={() => undefined}
+      onStop={() => undefined}
+    />
+  );
+}

package/templates/ai/src/app/app/page.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useState } from "react";
+
+import { AiChatBlock, type ChatMessage } from "@/components/blocks/ai-chat";
+
+/**
+ * Wire `onSend` to your own endpoint.
+ *
+ * The reply here is canned so the page works the moment it is generated. Swap
+ * the timeout for a fetch and stream tokens into the last message — the block
+ * renders `streaming` as a caret rather than as a spinner that hides the text
+ * already written.
+ */
+export default function ChatPage() {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [busy, setBusy] = useState(false);
+
+  const send = (content: string) => {
+    const question: ChatMessage = { id: crypto.randomUUID(), from: "user", content };
+    setMessages((previous) => [...previous, question]);
+    setBusy(true);
+
+    window.setTimeout(() => {
+      setMessages((previous) => [
+        ...previous,
+        {
+          id: crypto.randomUUID(),
+          from: "assistant",
+          content: "Replace this with a response from your model.",
+        },
+      ]);
+      setBusy(false);
+    }, 600);
+  };
+
+  return (
+    <div className="h-[calc(100dvh-8rem)]">
+      <AiChatBlock messages={messages} onSend={send} busy={busy} waiting={busy} />
+    </div>
+  );
+}

package/templates/ai/src/app/app/usage/page.tsx

@@ -0,0 +1,58 @@
+import { AiDashboardBlock } from "@/components/blocks/ai-dashboard";
+
+export default function UsagePage() {
+  return (
+    <AiDashboardBlock
+      tokens={15_480_000}
+      previousTokens={11_200_000}
+      spend="$252.50"
+      spendValue={252.5}
+      previousSpendValue={198.4}
+      runs={3_470}
+      previousRuns={2_910}
+      failureRate={0.041}
+      previousFailureRate={0.062}
+      models={[
+        { id: "opus", model: "claude-opus-5", runs: 118, tokens: 4_240_000, cost: "$182.40" },
+        {
+          id: "sonnet",
+          model: "claude-sonnet-5",
+          runs: 942,
+          tokens: 8_060_000,
+          cost: "$61.20",
+        },
+        {
+          id: "haiku",
+          model: "claude-haiku-4-5",
+          runs: 2_410,
+          tokens: 3_180_000,
+          cost: "$8.90",
+        },
+      ]}
+      recentRuns={[
+        {
+          id: "r1",
+          title: "Deduplicate contacts",
+          state: "working",
+          model: "claude-opus-5",
+          tokens: 42_180,
+          href: "/app/agents",
+        },
+        {
+          id: "r2",
+          title: "Draft weekly digest",
+          state: "waiting",
+          model: "claude-sonnet-5",
+          tokens: 18_400,
+        },
+        {
+          id: "r3",
+          title: "Classify inbound tickets",
+          state: "done",
+          model: "claude-haiku-4-5",
+          tokens: 6_120,
+        },
+      ]}
+    />
+  );
+}

package/templates/ai/src/app/page.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+export default function Home() {
+  return (
+    <main className="mx-auto flex min-h-dvh max-w-3xl flex-col justify-center gap-6 px-6 py-16">
+      <h1 className="text-3xl font-semibold tracking-tight text-balance">__PROJECT_NAME__</h1>
+      <p className="text-pretty text-muted-foreground">
+        An AI product scaffolded with __LIBRARY_NAME__. The chat surface, agent console and
+        usage dashboard are source files in this repository — including the parts most component
+        sets do not ship: the approval before a tool runs, and the ledger of what it did
+        afterwards.
+      </p>
+      <div className="flex flex-wrap gap-3">
+        <Button asChild>
+          <Link href="/app">Open the app</Link>
+        </Button>
+        <Button variant="outline" asChild>
+          <a href="__DOCS_URL__">Documentation</a>
+        </Button>
+      </div>
+    </main>
+  );
+}

package/templates/app-shell/src/app/app/layout.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+
+import { AppNav, type AppNavLink } from "@/components/app-nav";
+
+const LINKS: AppNavLink[] = __APP_LINKS__;
+
+export default function AppLayout({ children }: { children: ReactNode }) {
+  return (
+    <SidebarProvider>
+      <div className="flex min-h-dvh">
+        <Sidebar label="Application">
+          <SidebarHeader>
+            <SidebarTrigger />
+            <span className="truncate font-semibold tracking-tight">__PROJECT_NAME__</span>
+          </SidebarHeader>
+
+          <SidebarContent>
+            <SidebarGroup>
+              <AppNav links={LINKS} />
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
+
+        <SidebarInset className="px-6 py-8">
+          {/* Skip link first in the tab order, so a keyboard user is not made
+              to walk the navigation on every page. */}
+          <a
+            href="#content"
+            className="sr-only rounded-md px-2 py-1 text-sm underline-offset-4 focus-visible:not-sr-only focus-visible:ring-2 focus-visible:ring-ring/55"
+          >
+            Skip to content
+          </a>
+          <div id="content">{children}</div>
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
+  );
+}

package/templates/app-shell/src/components/app-nav.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuLabel,
+} from "@/components/ui/sidebar";
+
+export interface AppNavLink {
+  href: string;
+  label: string;
+}
+
+/**
+ * The application's navigation entries.
+ *
+ * `asChild` so Next's Link does the routing while the sidebar does the styling
+ * and the semantics — `aria-current` on the active entry comes from
+ * SidebarMenuButton rather than being hand-wired here.
+ */
+export function AppNav({ links }: { links: AppNavLink[] }) {
+  const pathname = usePathname();
+
+  return (
+    <SidebarMenu>
+      {links.map((link) => (
+        <SidebarMenuItem key={link.href}>
+          <SidebarMenuButton asChild isActive={pathname === link.href}>
+            <Link href={link.href}>
+              <SidebarMenuLabel>{link.label}</SidebarMenuLabel>
+            </Link>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  );
+}

package/templates/base/gitignore

@@ -0,0 +1,16 @@
+node_modules
+.next
+out
+build
+.DS_Store
+*.pem
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+.env*.local
+.vercel
+*.tsbuildinfo
+next-env.d.ts

package/templates/base/next.config.ts

@@ -0,0 +1,5 @@
+import type { NextConfig } from "next";
+
+const config: NextConfig = {};
+
+export default config;

package/templates/base/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "__PROJECT_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "16.3.3",
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "4.3.3",
+    "@types/node": "26.4.0",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.5",
+    "tailwindcss": "4.3.3",
+    "typescript": "6.0.3"
+  }
+}

package/templates/base/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

package/templates/base/src/app/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/base/src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "__PROJECT_NAME__",
+  description: "Built with __LIBRARY_NAME__.",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    /*
+      `data-theme` selects the preset and the `dark` class selects the mode;
+      they are independent, so every preset works in both. Swap the preset here,
+      or drive it from a theme switcher — no component file changes either way.
+    */
+    <html lang="en" data-theme="__THEME__" suppressHydrationWarning>
+      <body className="bg-background text-foreground antialiased">{children}</body>
+    </html>
+  );
+}

package/templates/base/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "ES2022"],
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "allowJs": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "incremental": true,
+    "skipLibCheck": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/saas/src/app/app/analytics/page.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { AnalyticsBlock, type AnalyticsPoint } from "@/components/blocks/analytics";
+
+/*
+  A client component, because of the `format` below.
+
+  The blocks are client components, and a function cannot cross the server
+  boundary into one — React has no way to send it. So a page that hands a block
+  a formatter, a comparator or an event handler has to be a client component
+  itself. Data-only props are fine from the server; the moment a function is
+  among them, this directive is required, and the build says so rather than
+  failing at runtime.
+*/
+
+const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+
+const SERIES: AnalyticsPoint[] = [1240, 1810, 1520, 2140, 2380, 1180, 940].map(
+  (value, index) => ({
+    at: `2026-03-0${String(index + 1)}`,
+    label: DAYS[index] ?? "",
+    value,
+  }),
+);
+
+export default function AnalyticsPage() {
+  return (
+    <AnalyticsBlock
+      metrics={[
+        {
+          id: "visitors",
+          label: "Visitors",
+          value: 11_210,
+          previous: 9_840,
+          comparisonLabel: "vs last week",
+        },
+        {
+          id: "signups",
+          label: "Signups",
+          value: 284,
+          previous: 231,
+          comparisonLabel: "vs last week",
+        },
+        {
+          id: "bounce",
+          label: "Bounce rate",
+          value: 38,
+          previous: 44,
+          polarity: "lower-is-better",
+          format: (value) => `${String(value)}%`,
+        },
+        { id: "sessions", label: "Sessions", value: 18_400, previous: 16_120 },
+      ]}
+      series={SERIES}
+      breakdown={[
+        { id: "search", label: "Organic search", value: 5820 },
+        { id: "direct", label: "Direct", value: 2940 },
+        { id: "referral", label: "Referral", value: 1610 },
+      ]}
+    />
+  );
+}

package/templates/saas/src/app/app/billing/page.tsx

@@ -0,0 +1,36 @@
+import { BillingBlock } from "@/components/blocks/billing";
+
+export default function BillingPage() {
+  return (
+    <BillingBlock
+      plan={{
+        name: "Team",
+        price: "$240",
+        interval: "per month, billed annually",
+        renewsAt: "2027-03-03",
+        renewsLabel: "3 March 2027",
+      }}
+      usage={[
+        { id: "seats", label: "Seats", used: 8, limit: 10, unit: "seats" },
+        { id: "storage", label: "Storage", used: 128, limit: 250, unit: "GB" },
+      ]}
+      paymentMethod={{ brand: "Visa", last4: "4242", expires: "04/2029" }}
+      invoices={[
+        {
+          id: "in_2",
+          at: "2026-02-01",
+          label: "1 February 2026",
+          amount: "$240.00",
+          status: "paid",
+        },
+        {
+          id: "in_1",
+          at: "2026-01-01",
+          label: "1 January 2026",
+          amount: "$240.00",
+          status: "paid",
+        },
+      ]}
+    />
+  );
+}

package/templates/saas/src/app/app/page.tsx

@@ -0,0 +1,69 @@
+import {
+  DashboardBlock,
+  type DashboardEvent,
+  type DashboardStat,
+} from "@/components/blocks/dashboard";
+import { OnboardingBlock, type OnboardingStep } from "@/components/blocks/onboarding";
+
+/**
+ * Replace these with your own data.
+ *
+ * They are inline rather than fetched so the page renders the moment it is
+ * generated — a scaffold that needs a database before it shows anything is a
+ * scaffold nobody sees working.
+ */
+const STATS: DashboardStat[] = [
+  {
+    id: "mrr",
+    label: "Monthly revenue",
+    value: "$48,120",
+    change: 12.4,
+    comparison: "on last month",
+  },
+  {
+    id: "users",
+    label: "Active users",
+    value: "2,410",
+    change: 4.2,
+    comparison: "on last week",
+  },
+  { id: "churn", label: "Churn", value: "1.8%", change: 0.4, higherIsBetter: false },
+  { id: "uptime", label: "Uptime", value: "99.98%" },
+];
+
+const EVENTS: DashboardEvent[] = [
+  {
+    id: "1",
+    title: "Deployed to production",
+    at: "2026-03-04T09:12:00Z",
+    label: "12 minutes ago",
+    tone: "success",
+  },
+  {
+    id: "2",
+    title: "New customer: Acme Inc.",
+    at: "2026-03-04T08:40:00Z",
+    label: "44 minutes ago",
+  },
+];
+
+const STEPS: OnboardingStep[] = [
+  { id: "account", title: "Create your account", status: "done" },
+  {
+    id: "team",
+    title: "Invite your team",
+    status: "current",
+    actionLabel: "Invite",
+    estimate: "2 minutes",
+  },
+  { id: "billing", title: "Add a payment method", status: "todo", actionLabel: "Add" },
+];
+
+export default function AppPage() {
+  return (
+    <div className="flex flex-col gap-8">
+      <DashboardBlock stats={STATS} events={EVENTS} />
+      <OnboardingBlock steps={STEPS} />
+    </div>
+  );
+}

package/templates/saas/src/app/app/settings/page.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useState } from "react";
+
+import {
+  SettingsBlock,
+  type SettingsNotification,
+  type SettingsProfile,
+} from "@/components/blocks/settings";
+
+export default function SettingsPage() {
+  const [profile, setProfile] = useState<SettingsProfile>({
+    name: "Ada Lovelace",
+    email: "ada@example.com",
+    bio: "Replace this with the signed-in user.",
+  });
+
+  const [notifications, setNotifications] = useState<SettingsNotification[]>([
+    {
+      id: "product",
+      label: "Product updates",
+      description: "New features and changes worth knowing about.",
+      enabled: true,
+    },
+    {
+      id: "billing",
+      label: "Billing",
+      description: "Invoices, failed payments and plan changes.",
+      enabled: true,
+    },
+    {
+      id: "digest",
+      label: "Weekly digest",
+      description: "A summary of activity every Monday.",
+      enabled: false,
+    },
+  ]);
+
+  return (
+    <SettingsBlock
+      profile={profile}
+      notifications={notifications}
+      onSaveProfile={setProfile}
+      onToggleNotification={(id, enabled) => {
+        setNotifications((previous) =>
+          previous.map((entry) => (entry.id === id ? { ...entry, enabled } : entry)),
+        );
+      }}
+    />
+  );
+}

package/templates/saas/src/app/page.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+export default function Home() {
+  return (
+    <main className="mx-auto flex min-h-dvh max-w-3xl flex-col justify-center gap-6 px-6 py-16">
+      <h1 className="text-3xl font-semibold tracking-tight text-balance">__PROJECT_NAME__</h1>
+      <p className="text-pretty text-muted-foreground">
+        A SaaS application scaffolded with __LIBRARY_NAME__. The dashboard, analytics, billing,
+        settings and onboarding surfaces are source files in this repository — open one and
+        change it.
+      </p>
+      <div className="flex flex-wrap gap-3">
+        <Button asChild>
+          <Link href="/app">Open the app</Link>
+        </Button>
+        <Button variant="outline" asChild>
+          <a href="__DOCS_URL__">Documentation</a>
+        </Button>
+      </div>
+    </main>
+  );
+}