awel 0.1.1 → 0.2.0

package/dist/cli/templates/saas/src/app/dashboard/page.tsx

@@ -0,0 +1,10 @@
+export default function Dashboard() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-8">
+      <h1 className="text-3xl font-bold">Dashboard</h1>
+      <p className="mt-4 text-gray-600 dark:text-gray-400">
+        Welcome to your dashboard. Ask Awel to build out the features you need.
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { Navbar } from '@/components/Navbar';
+
+export default function Home() {
+  return (
+    <>
+      <Navbar />
+      <main>
+        <section className="flex flex-col items-center px-6 py-24 text-center">
+          <span className="rounded-full bg-blue-100 px-4 py-1 text-sm font-medium text-blue-700 dark:bg-blue-900 dark:text-blue-300">
+            Now in beta
+          </span>
+          <h1 className="mt-6 max-w-3xl text-5xl font-bold tracking-tight sm:text-6xl">
+            The platform for modern teams
+          </h1>
+          <p className="mt-6 max-w-xl text-lg text-gray-600 dark:text-gray-400">
+            Streamline your workflow with our all-in-one SaaS platform. Built for
+            teams that move fast.
+          </p>
+          <div className="mt-10 flex gap-4">
+            <a
+              href="/dashboard"
+              className="rounded-lg bg-blue-600 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-blue-500"
+            >
+              Get started free
+            </a>
+            <a
+              href="/pricing"
+              className="rounded-lg border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800"
+            >
+              View pricing
+            </a>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}

package/dist/cli/templates/saas/src/app/pricing/page.tsx

@@ -0,0 +1,53 @@
+import { Navbar } from '@/components/Navbar';
+import { PricingCard } from '@/components/PricingCard';
+
+const plans = [
+  {
+    name: 'Free',
+    price: '$0',
+    period: 'forever',
+    description: 'For individuals getting started.',
+    features: ['1 project', '100 API calls/day', 'Community support'],
+    cta: 'Get started',
+    highlighted: false,
+  },
+  {
+    name: 'Pro',
+    price: '$29',
+    period: '/month',
+    description: 'For growing teams.',
+    features: ['Unlimited projects', '10,000 API calls/day', 'Priority support', 'Advanced analytics'],
+    cta: 'Start free trial',
+    highlighted: true,
+  },
+  {
+    name: 'Enterprise',
+    price: 'Custom',
+    period: '',
+    description: 'For large organizations.',
+    features: ['Unlimited everything', 'Dedicated support', 'Custom integrations', 'SLA guarantee'],
+    cta: 'Contact sales',
+    highlighted: false,
+  },
+];
+
+export default function Pricing() {
+  return (
+    <>
+      <Navbar />
+      <main className="px-6 py-24">
+        <div className="mx-auto max-w-5xl text-center">
+          <h1 className="text-4xl font-bold tracking-tight">Simple, transparent pricing</h1>
+          <p className="mt-4 text-gray-600 dark:text-gray-400">
+            Choose the plan that works for your team.
+          </p>
+        </div>
+        <div className="mx-auto mt-16 grid max-w-5xl gap-8 lg:grid-cols-3">
+          {plans.map((plan) => (
+            <PricingCard key={plan.name} {...plan} />
+          ))}
+        </div>
+      </main>
+    </>
+  );
+}

package/dist/cli/templates/saas/src/components/Navbar.tsx

@@ -0,0 +1,25 @@
+import Link from 'next/link';
+
+export function Navbar() {
+  return (
+    <nav className="flex items-center justify-between px-6 py-4">
+      <Link href="/" className="text-lg font-bold">
+        SaaSApp
+      </Link>
+      <div className="flex items-center gap-6">
+        <Link
+          href="/pricing"
+          className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+        >
+          Pricing
+        </Link>
+        <Link
+          href="/dashboard"
+          className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500"
+        >
+          Dashboard
+        </Link>
+      </div>
+    </nav>
+  );
+}

package/dist/cli/templates/saas/src/components/PricingCard.tsx

@@ -0,0 +1,46 @@
+interface PricingCardProps {
+  name: string;
+  price: string;
+  period: string;
+  description: string;
+  features: string[];
+  cta: string;
+  highlighted: boolean;
+}
+
+export function PricingCard({ name, price, period, description, features, cta, highlighted }: PricingCardProps) {
+  return (
+    <div
+      className={`rounded-xl border p-8 ${
+        highlighted
+          ? 'border-blue-600 ring-2 ring-blue-600 dark:border-blue-400 dark:ring-blue-400'
+          : 'border-gray-200 dark:border-gray-800'
+      }`}
+    >
+      <h3 className="text-lg font-semibold">{name}</h3>
+      <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">{description}</p>
+      <p className="mt-6">
+        <span className="text-4xl font-bold">{price}</span>
+        {period && <span className="text-sm text-gray-500">{period}</span>}
+      </p>
+      <ul className="mt-8 space-y-3">
+        {features.map((feature) => (
+          <li key={feature} className="flex items-center gap-2 text-sm">
+            <span className="text-green-600 dark:text-green-400">&#10003;</span>
+            {feature}
+          </li>
+        ))}
+      </ul>
+      <a
+        href="/dashboard"
+        className={`mt-8 block rounded-lg py-2.5 text-center text-sm font-semibold ${
+          highlighted
+            ? 'bg-blue-600 text-white hover:bg-blue-500'
+            : 'border border-gray-300 text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800'
+        }`}
+      >
+        {cta}
+      </a>
+    </div>
+  );
+}

package/dist/cli/templates/templates/blank/AGENT.md

@@ -0,0 +1,24 @@
+# Project Guide
+
+## Overview
+
+This is a blank Next.js project created with Awel. It uses the App Router, TypeScript, and Tailwind CSS.
+
+## Structure
+
+- `src/app/page.tsx` — Home page
+- `src/app/layout.tsx` — Root layout with metadata and fonts
+- `src/app/globals.css` — Global styles and Tailwind imports
+
+## Conventions
+
+- Use server components by default; add `'use client'` only when needed
+- Style with Tailwind CSS utility classes
+- Keep components in `src/components/`
+- Use TypeScript for all files
+
+## Example Prompts
+
+- "Add a navigation bar with links to Home and About pages"
+- "Create an About page at /about with a brief bio section"
+- "Add a dark mode toggle using Tailwind's dark: variant"

package/dist/cli/templates/templates/blank/src/app/page.tsx

@@ -0,0 +1,10 @@
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-8">
+      <h1 className="text-4xl font-bold tracking-tight">Welcome to your new project</h1>
+      <p className="mt-4 text-lg text-gray-600 dark:text-gray-400">
+        Open the Awel overlay to start building with AI.
+      </p>
+    </main>
+  );
+}

package/dist/cli/templates/templates/blog/AGENT.md

@@ -0,0 +1,26 @@
+# Project Guide
+
+## Overview
+
+A blog application built with Next.js, TypeScript, and Tailwind CSS. Features a post listing page and dynamic post pages.
+
+## Structure
+
+- `src/app/page.tsx` — Blog listing page showing all posts
+- `src/app/blog/[slug]/page.tsx` — Dynamic blog post page
+- `src/lib/posts.ts` — Post data and utility functions
+
+## Conventions
+
+- Use server components by default; add `'use client'` only when needed
+- Style with Tailwind CSS utility classes
+- Keep components in `src/components/`
+- Use TypeScript for all files
+- Posts are stored as data in `src/lib/posts.ts` (replace with a CMS or MDX later)
+
+## Example Prompts
+
+- "Add a new blog post about getting started with Next.js"
+- "Add tags to posts and create a filter by tag"
+- "Add a search bar to filter posts by title"
+- "Create an RSS feed at /feed.xml"

package/dist/cli/templates/templates/blog/src/app/blog/[slug]/page.tsx

@@ -0,0 +1,38 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { getPostBySlug, getAllPosts } from '@/lib/posts';
+
+export function generateStaticParams() {
+  return getAllPosts().map((post) => ({ slug: post.slug }));
+}
+
+export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const post = getPostBySlug(slug);
+
+  if (!post) {
+    notFound();
+  }
+
+  return (
+    <main className="mx-auto max-w-3xl px-6 py-16">
+      <Link
+        href="/"
+        className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+      >
+        &larr; Back to blog
+      </Link>
+      <article className="mt-8">
+        <time className="text-sm text-gray-500 dark:text-gray-400">
+          {post.date}
+        </time>
+        <h1 className="mt-2 text-4xl font-bold tracking-tight">
+          {post.title}
+        </h1>
+        <div className="prose prose-gray mt-8 dark:prose-invert">
+          <p>{post.content}</p>
+        </div>
+      </article>
+    </main>
+  );
+}

package/dist/cli/templates/templates/blog/src/app/page.tsx

@@ -0,0 +1,35 @@
+import Link from 'next/link';
+import { getAllPosts } from '@/lib/posts';
+
+export default function BlogHome() {
+  const posts = getAllPosts();
+
+  return (
+    <main className="mx-auto max-w-3xl px-6 py-16">
+      <h1 className="text-4xl font-bold tracking-tight">Blog</h1>
+      <p className="mt-4 text-gray-600 dark:text-gray-400">
+        Thoughts, ideas, and tutorials.
+      </p>
+      <div className="mt-12 space-y-10">
+        {posts.map((post) => (
+          <article key={post.slug}>
+            <time className="text-sm text-gray-500 dark:text-gray-400">
+              {post.date}
+            </time>
+            <h2 className="mt-1 text-xl font-semibold">
+              <Link
+                href={`/blog/${post.slug}`}
+                className="hover:underline"
+              >
+                {post.title}
+              </Link>
+            </h2>
+            <p className="mt-2 text-gray-600 dark:text-gray-400">
+              {post.excerpt}
+            </p>
+          </article>
+        ))}
+      </div>
+    </main>
+  );
+}

package/dist/cli/templates/templates/blog/src/lib/posts.ts

@@ -0,0 +1,42 @@
+export interface Post {
+  slug: string;
+  title: string;
+  date: string;
+  excerpt: string;
+  content: string;
+}
+
+const posts: Post[] = [
+  {
+    slug: 'getting-started',
+    title: 'Getting Started with Awel',
+    date: '2025-01-15',
+    excerpt: 'Learn how to set up your first project with Awel and Next.js.',
+    content:
+      'Awel is an AI-powered development overlay for Next.js. It helps you build, modify, and understand your code with an interactive AI assistant. To get started, run npx awel dev in your project directory and look for the floating button in the bottom-right corner.',
+  },
+  {
+    slug: 'building-with-ai',
+    title: 'Building with AI Assistance',
+    date: '2025-01-10',
+    excerpt: 'How AI-assisted development can speed up your workflow.',
+    content:
+      'AI-assisted development is transforming how we build software. With tools like Awel, you can describe what you want to build in natural language, and the AI will help you write the code. This approach is especially powerful for scaffolding new features, debugging issues, and learning new frameworks.',
+  },
+  {
+    slug: 'nextjs-best-practices',
+    title: 'Next.js Best Practices',
+    date: '2025-01-05',
+    excerpt: 'Tips and patterns for building performant Next.js applications.',
+    content:
+      'Next.js provides many built-in optimizations, but there are additional patterns you can follow. Use server components by default and only add the use client directive when you need interactivity. Leverage the Image component for automatic optimization. Use dynamic imports for heavy components that are not needed on initial load.',
+  },
+];
+
+export function getAllPosts(): Post[] {
+  return posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+}
+
+export function getPostBySlug(slug: string): Post | undefined {
+  return posts.find((post) => post.slug === slug);
+}

package/dist/cli/templates/templates/dashboard/AGENT.md

@@ -0,0 +1,26 @@
+# Project Guide
+
+## Overview
+
+A dashboard application built with Next.js, TypeScript, and Tailwind CSS. Features a sidebar navigation and stats cards.
+
+## Structure
+
+- `src/app/page.tsx` — Dashboard main page with stats overview
+- `src/app/layout.tsx` — Root layout with sidebar
+- `src/components/Sidebar.tsx` — Sidebar navigation component
+- `src/components/StatsCard.tsx` — Reusable stats card component
+
+## Conventions
+
+- Use server components by default; add `'use client'` only when needed
+- Style with Tailwind CSS utility classes
+- Keep components in `src/components/`
+- Use TypeScript for all files
+
+## Example Prompts
+
+- "Add a new page for user settings at /settings"
+- "Add a chart component to the dashboard showing weekly data"
+- "Create a data table component with sorting"
+- "Add a notification bell icon to the sidebar header"

package/dist/cli/templates/templates/dashboard/src/app/layout.tsx

@@ -0,0 +1,28 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { Sidebar } from '@/components/Sidebar';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Dashboard',
+  description: 'Dashboard application built with Awel',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <div className="flex min-h-screen">
+          <Sidebar />
+          <main className="flex-1 p-8">{children}</main>
+        </div>
+      </body>
+    </html>
+  );
+}

package/dist/cli/templates/templates/dashboard/src/app/page.tsx

@@ -0,0 +1,30 @@
+import { StatsCard } from '@/components/StatsCard';
+
+const stats = [
+  { title: 'Total Users', value: '2,847', change: '+12.5%', trend: 'up' as const },
+  { title: 'Revenue', value: '$45,231', change: '+8.2%', trend: 'up' as const },
+  { title: 'Active Sessions', value: '1,024', change: '-3.1%', trend: 'down' as const },
+  { title: 'Conversion Rate', value: '3.24%', change: '+1.8%', trend: 'up' as const },
+];
+
+export default function Dashboard() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold">Dashboard</h1>
+      <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+        Welcome back. Here&apos;s an overview of your metrics.
+      </p>
+      <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+        {stats.map((stat) => (
+          <StatsCard key={stat.title} {...stat} />
+        ))}
+      </div>
+      <div className="mt-8 rounded-xl border border-gray-200 p-6 dark:border-gray-800">
+        <h2 className="text-lg font-semibold">Recent Activity</h2>
+        <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+          No recent activity to display. Ask Awel to add a data table or chart here.
+        </p>
+      </div>
+    </div>
+  );
+}

package/dist/cli/templates/templates/dashboard/src/components/Sidebar.tsx

@@ -0,0 +1,31 @@
+const navItems = [
+  { label: 'Dashboard', href: '/', icon: '📊' },
+  { label: 'Analytics', href: '/analytics', icon: '📈' },
+  { label: 'Users', href: '/users', icon: '👥' },
+  { label: 'Settings', href: '/settings', icon: '⚙️' },
+];
+
+export function Sidebar() {
+  return (
+    <aside className="flex w-64 flex-col border-r border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900">
+      <div className="flex h-16 items-center px-6">
+        <span className="text-lg font-bold">MyApp</span>
+      </div>
+      <nav className="flex-1 px-4 py-4">
+        <ul className="space-y-1">
+          {navItems.map((item) => (
+            <li key={item.href}>
+              <a
+                href={item.href}
+                className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-800"
+              >
+                <span>{item.icon}</span>
+                {item.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </aside>
+  );
+}

package/dist/cli/templates/templates/dashboard/src/components/StatsCard.tsx

@@ -0,0 +1,24 @@
+interface StatsCardProps {
+  title: string;
+  value: string;
+  change: string;
+  trend: 'up' | 'down';
+}
+
+export function StatsCard({ title, value, change, trend }: StatsCardProps) {
+  return (
+    <div className="rounded-xl border border-gray-200 p-6 dark:border-gray-800">
+      <p className="text-sm text-gray-600 dark:text-gray-400">{title}</p>
+      <p className="mt-2 text-3xl font-bold">{value}</p>
+      <p
+        className={`mt-2 text-sm font-medium ${
+          trend === 'up'
+            ? 'text-green-600 dark:text-green-400'
+            : 'text-red-600 dark:text-red-400'
+        }`}
+      >
+        {change}
+      </p>
+    </div>
+  );
+}

package/dist/cli/templates/templates/landing/AGENT.md

@@ -0,0 +1,26 @@
+# Project Guide
+
+## Overview
+
+A landing page built with Next.js, TypeScript, and Tailwind CSS. Features a hero section, features grid, and call-to-action.
+
+## Structure
+
+- `src/app/page.tsx` — Main landing page (composes Hero, Features, CTA)
+- `src/components/Hero.tsx` — Hero section with headline and CTA button
+- `src/components/Features.tsx` — Features grid (3 columns)
+- `src/components/CTA.tsx` — Call-to-action section and footer
+
+## Conventions
+
+- Use server components by default; add `'use client'` only when needed
+- Style with Tailwind CSS utility classes
+- Keep components in `src/components/`
+- Use TypeScript for all files
+
+## Example Prompts
+
+- "Change the hero headline and add a subtitle"
+- "Add a fourth feature card about security"
+- "Add a testimonials section between Features and CTA"
+- "Make the CTA section have a gradient background"

package/dist/cli/templates/templates/landing/src/app/page.tsx

@@ -0,0 +1,13 @@
+import { Hero } from '@/components/Hero';
+import { Features } from '@/components/Features';
+import { CTA } from '@/components/CTA';
+
+export default function Home() {
+  return (
+    <main>
+      <Hero />
+      <Features />
+      <CTA />
+    </main>
+  );
+}

package/dist/cli/templates/templates/landing/src/components/CTA.tsx

@@ -0,0 +1,23 @@
+export function CTA() {
+  return (
+    <section id="cta" className="px-6 py-24">
+      <div className="mx-auto max-w-3xl rounded-2xl bg-gray-900 px-8 py-16 text-center dark:bg-gray-800">
+        <h2 className="text-3xl font-bold tracking-tight text-white">
+          Ready to get started?
+        </h2>
+        <p className="mt-4 text-gray-300">
+          Start building your project with AI-assisted development.
+        </p>
+        <a
+          href="#"
+          className="mt-8 inline-block rounded-lg bg-white px-6 py-3 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100"
+        >
+          Start building
+        </a>
+      </div>
+      <footer className="mt-16 text-center text-sm text-gray-500">
+        Built with Awel and Next.js
+      </footer>
+    </section>
+  );
+}

package/dist/cli/templates/templates/landing/src/components/Features.tsx

@@ -0,0 +1,46 @@
+const features = [
+  {
+    title: 'Lightning Fast',
+    description: 'Built on Next.js with optimized rendering and automatic code splitting for peak performance.',
+    icon: '⚡',
+  },
+  {
+    title: 'AI-Powered',
+    description: 'Develop faster with Awel — your AI coding assistant that understands your entire project.',
+    icon: '🤖',
+  },
+  {
+    title: 'Beautiful Design',
+    description: 'Tailwind CSS utility-first styling makes it easy to create responsive, polished interfaces.',
+    icon: '🎨',
+  },
+];
+
+export function Features() {
+  return (
+    <section id="features" className="px-6 py-24">
+      <div className="mx-auto max-w-5xl">
+        <h2 className="text-center text-3xl font-bold tracking-tight">
+          Everything you need
+        </h2>
+        <p className="mt-4 text-center text-gray-600 dark:text-gray-400">
+          Start with a solid foundation and build from there.
+        </p>
+        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {features.map((feature) => (
+            <div
+              key={feature.title}
+              className="rounded-xl border border-gray-200 p-6 dark:border-gray-800"
+            >
+              <div className="text-3xl">{feature.icon}</div>
+              <h3 className="mt-4 text-lg font-semibold">{feature.title}</h3>
+              <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/dist/cli/templates/templates/landing/src/components/Hero.tsx

@@ -0,0 +1,26 @@
+export function Hero() {
+  return (
+    <section className="flex flex-col items-center justify-center px-6 py-24 text-center">
+      <h1 className="max-w-3xl text-5xl font-bold tracking-tight sm:text-6xl">
+        Build something amazing
+      </h1>
+      <p className="mt-6 max-w-xl text-lg text-gray-600 dark:text-gray-400">
+        A modern landing page template powered by Next.js, Tailwind CSS, and AI-assisted development with Awel.
+      </p>
+      <div className="mt-10 flex gap-4">
+        <a
+          href="#features"
+          className="rounded-lg bg-gray-900 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100"
+        >
+          Get started
+        </a>
+        <a
+          href="#cta"
+          className="rounded-lg border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800"
+        >
+          Learn more
+        </a>
+      </div>
+    </section>
+  );
+}

package/dist/cli/templates/templates/portfolio/AGENT.md

@@ -0,0 +1,24 @@
+# Project Guide
+
+## Overview
+
+A portfolio website built with Next.js, TypeScript, and Tailwind CSS. Showcases projects with a card-based layout.
+
+## Structure
+
+- `src/app/page.tsx` — Portfolio main page with intro and project grid
+- `src/components/ProjectCard.tsx` — Reusable project card component
+
+## Conventions
+
+- Use server components by default; add `'use client'` only when needed
+- Style with Tailwind CSS utility classes
+- Keep components in `src/components/`
+- Use TypeScript for all files
+
+## Example Prompts
+
+- "Add a contact form section at the bottom of the page"
+- "Add a skills section showing technologies I know"
+- "Create a project detail page at /projects/[slug]"
+- "Add animation to the project cards on hover"