awel 0.1.2 → 0.2.1

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

@@ -0,0 +1,50 @@
+import { ProjectCard } from '@/components/ProjectCard';
+
+const projects = [
+  {
+    title: 'Project Alpha',
+    description: 'A full-stack web application built with Next.js and PostgreSQL.',
+    tags: ['Next.js', 'TypeScript', 'PostgreSQL'],
+    href: '#',
+  },
+  {
+    title: 'Project Beta',
+    description: 'A mobile-first e-commerce platform with real-time inventory.',
+    tags: ['React Native', 'Node.js', 'Redis'],
+    href: '#',
+  },
+  {
+    title: 'Project Gamma',
+    description: 'An open-source CLI tool for automating deployment workflows.',
+    tags: ['Go', 'Docker', 'CI/CD'],
+    href: '#',
+  },
+  {
+    title: 'Project Delta',
+    description: 'A real-time collaborative document editor with conflict resolution.',
+    tags: ['WebSocket', 'CRDT', 'React'],
+    href: '#',
+  },
+];
+
+export default function Portfolio() {
+  return (
+    <main className="mx-auto max-w-4xl px-6 py-16">
+      <section className="mb-16">
+        <h1 className="text-4xl font-bold tracking-tight">Hi, I&apos;m a developer</h1>
+        <p className="mt-4 max-w-2xl text-lg text-gray-600 dark:text-gray-400">
+          I build web applications and open-source tools. This portfolio was
+          scaffolded with Awel — ask the AI to customize it for you.
+        </p>
+      </section>
+      <section>
+        <h2 className="text-2xl font-bold">Projects</h2>
+        <div className="mt-8 grid gap-6 sm:grid-cols-2">
+          {projects.map((project) => (
+            <ProjectCard key={project.title} {...project} />
+          ))}
+        </div>
+      </section>
+    </main>
+  );
+}

package/dist/cli/templates/portfolio/src/components/ProjectCard.tsx

@@ -0,0 +1,30 @@
+interface ProjectCardProps {
+  title: string;
+  description: string;
+  tags: string[];
+  href: string;
+}
+
+export function ProjectCard({ title, description, tags, href }: ProjectCardProps) {
+  return (
+    <a
+      href={href}
+      className="group block rounded-xl border border-gray-200 p-6 transition-colors hover:border-gray-400 dark:border-gray-800 dark:hover:border-gray-600"
+    >
+      <h3 className="text-lg font-semibold group-hover:underline">{title}</h3>
+      <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+        {description}
+      </p>
+      <div className="mt-4 flex flex-wrap gap-2">
+        {tags.map((tag) => (
+          <span
+            key={tag}
+            className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300"
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+    </a>
+  );
+}

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

@@ -0,0 +1,28 @@
+# Project Guide
+
+## Overview
+
+A SaaS application template built with Next.js, TypeScript, and Tailwind CSS. Includes a marketing landing page, pricing page, and dashboard shell.
+
+## Structure
+
+- `src/app/page.tsx` — SaaS marketing landing page
+- `src/app/pricing/page.tsx` — Pricing page with plan comparison
+- `src/app/dashboard/page.tsx` — Authenticated dashboard shell
+- `src/components/Navbar.tsx` — Top navigation bar
+- `src/components/PricingCard.tsx` — Reusable pricing 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
+- The Navbar is shared across marketing pages
+
+## Example Prompts
+
+- "Add a features comparison table to the pricing page"
+- "Create a sign-up form with email and password fields"
+- "Add a testimonials carousel to the landing page"
+- "Build a billing settings page at /dashboard/billing"

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>
+  );
+}