fix: revive first-run workflow and demo polish

.github/workflows/ci.yml

@@ -14,14 +14,14 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 9.15.9
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: "pnpm"
 
       - name: Install dependencies

CONTRIBUTING.md

@@ -6,28 +6,32 @@ Thank you for your interest in contributing to Agent Patterns! This document pro
 
 1. Fork the repository
 2. Clone your fork: `git clone https://github.com/harshmathurx/agent-patterns.git`
-3. Install dependencies: `pnpm install`
-4. Create a new branch: `git checkout -b feature/your-feature-name`
+3. Enable Corepack: `corepack enable`
+4. Install dependencies: `corepack pnpm install`
+5. Create a new branch: `git checkout -b feature/your-feature-name`
 
 ## Development
 
 ### Running Locally
 
 ```bash
+# Enable the pinned package manager
+corepack enable
+
 # Install dependencies
-pnpm install
+corepack pnpm install
 
 # Run playground
-cd apps/playground && pnpm dev
+cd apps/playground && corepack pnpm dev
 
 # Run tests
-pnpm test
+corepack pnpm test
 
 # Type check
-pnpm typecheck
+corepack pnpm typecheck
 
 # Lint
-pnpm lint
+corepack pnpm lint
 ```
 
 ## Adding a New Pattern

README.md

@@ -1,20 +1,21 @@
 # Agent Patterns
 
-![Agent Patterns Hero](https://via.placeholder.com/1200x400/1a1a1a/ffffff?text=Agent+Patterns+%7C+15+Copy-Paste+UI+Components+for+AI+Apps)
+> shadcn-style UI patterns that agents can actually use correctly.
 
-> Copy-paste UI patterns optimized for AI code generation.
-
-Beautiful, production-ready React components designed for LLM code generation. Each pattern has a Zod schema that AI models understand. No dependencies, just copy and paste.
+Agent Patterns is 15 copy-paste agent UI patterns for React apps: dashboards, task queues, chat artifacts, forms, tables, timelines, and the Zod schemas agents need to generate valid props instead of hallucinated UI glue.
 
 ---
 
 ## 🚀 Quick Start
 
 ```bash
-# 1. Copy a pattern into your project
-npx agent-patterns@latest add metric-card
+# 1. Make sure this repo uses the pinned pnpm version
+corepack enable
+
+# 2. Copy a pattern into your project
+corepack pnpm dlx @agent-patterns/cli add metric-card
 
-# 2. Use it in your code
+# 3. Use it in your code
 import { MetricCard } from '@/patterns/metric-card/component'
 
 <MetricCard 
@@ -24,7 +25,7 @@ import { MetricCard } from '@/patterns/metric-card/component'
 />
 ```
 
-That's it. No npm install, no version conflicts, no build config.
+That's it. Own the code. No black-box runtime dependency, no version conflicts, no build config.
 
 ---
 
@@ -52,6 +53,18 @@ That's it. No npm install, no version conflicts, no build config.
 
 ---
 
+## Stealable Examples
+
+Start with a complete surface instead of assembling patterns from scratch:
+
+- **Analytics dashboard** — metrics, chart, accounts table, and prioritized AI insights.
+- **Agent inbox / task queue** — kanban triage, task detail, timeline, and human handoff.
+- **AI chat with artifacts + actions** — chat messages, generated code, confirmation flows, and command actions.
+
+See [`docs/STEALABLE_EXAMPLES.md`](docs/STEALABLE_EXAMPLES.md) for copy-paste React examples.
+
+---
+
 ## 🤖 Built for AI Code Generation
 
 Every pattern has an LLM-optimized Zod schema:
@@ -79,11 +92,11 @@ const props = metricCardSchema.parse({
 
 ## ✨ Why Agent Patterns?
 
-### 1. **Zero Dependencies**
-No npm install. No version conflicts. No build config. Just copy the component file and use it.
+### 1. **Agent-native props**
+Every pattern includes a Zod schema with field descriptions, variants, defaults, and validation boundaries. Agents get a constrained interface instead of guessing JSX.
 
-### 2. **LLM-First Design**
-Zod schemas with detailed descriptions that AI models understand. Your LLM generates valid props automatically.
+### 2. **Prompt packs included**
+Use the bundled system prompt and build prompts to make Cursor, Claude, ChatGPT, or v0 select the right pattern and emit valid props.
 
 ### 3. **Production Ready**
 Not toy examples. Real components with:
@@ -122,60 +135,21 @@ Own your code. Modify freely. No black-box libraries. No "ejecting."
 
 ---
 
-## 🏗️ Example: Build a Dashboard in 60 Seconds
+## Launch Kit
 
-```typescript
-import { StatsGrid } from '@/patterns/stats-grid/component'
-import { Chart } from '@/patterns/chart/component'
-import { DataTable } from '@/patterns/data-table/component'
-
-export default function Dashboard() {
-  return (
-    <div className="p-6 space-y-6">
-      {/* 4 Key Metrics */}
-      <StatsGrid 
-        stats={[
-          { id: '1', label: 'Revenue', value: '$847K', change: 12, trend: 'up' },
-          { id: '2', label: 'Users', value: '12.4K', change: 8, trend: 'up' },
-          { id: '3', label: 'Conversion', value: '3.2%', change: -2, trend: 'down' },
-          { id: '4', label: 'Avg Order', value: '$68', change: 5, trend: 'up' },
-        ]}
-        columns={4}
-      />
-
-      {/* Revenue Trend */}
-      <Chart
-        title="Monthly Revenue"
-        type="bar"
-        data={[
-          { label: 'Jan', value: 125000 },
-          { label: 'Feb', value: 132000 },
-          { label: 'Mar', value: 148000 },
-        ]}
-      />
-
-      {/* Transactions Table */}
-      <DataTable
-        columns={[
-          { key: 'id', header: 'ID' },
-          { key: 'customer', header: 'Customer' },
-          { key: 'amount', header: 'Amount' },
-          { key: 'status', header: 'Status' },
-        ]}
-        data={transactions}
-        searchable
-        pagination
-        pageSize={10}
-      />
-    </div>
-  )
-}
-```
+This repo is meant to work as a clean proof-of-work artifact:
+
+- one-line wedge: `shadcn-style UI patterns that agents can actually use correctly`
+- resume bullet: [`docs/LAUNCH_KIT.md`](docs/LAUNCH_KIT.md#resume-bullet)
+- 45-second demo script: [`docs/LAUNCH_KIT.md`](docs/LAUNCH_KIT.md#45-second-demo-script)
+- launch copy draft: [`docs/LAUNCH_KIT.md`](docs/LAUNCH_KIT.md#launch-copy-draft)
 
 ---
 
 ## 📚 Documentation
 
+- **[Stealable Examples](docs/STEALABLE_EXAMPLES.md)** — Analytics dashboard, agent inbox, and chat-with-artifacts examples
+- **[Launch Kit](docs/LAUNCH_KIT.md)** — Resume bullet, demo script, and launch copy
 - **[Pattern Index](prompts/pattern-index.md)** — Complete schema reference for all 15 patterns
 - **[System Prompt](prompts/system-prompt.md)** — Use with Cursor, Claude, ChatGPT
 - **[Build Guides](prompts/)** — Example prompts for common layouts

apps/playground/src/app/globals.css

@@ -55,6 +55,7 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   }
 }
 

apps/playground/src/app/landing.tsx

@@ -6,6 +6,7 @@ import { HeroAnimation } from "@/components/hero-animation"
 import { PatternGallery } from "@/components/pattern-gallery"
 import { ThemeShowcase } from "@/components/theme-showcase"
 import { AIDemoZeroTokens } from "@/components/ai-demo-zero-tokens"
+import { LaunchDemos } from "@/components/launch-demos"
 import Link from "next/link"
 
 export default function NewLandingPage() {
@@ -44,21 +45,24 @@ export default function NewLandingPage() {
               <a href="#hero" className="text-foreground hover:text-primary transition-colors">
                 Home
               </a>
+              <a href="#launch-demos" className="text-foreground hover:text-primary transition-colors">
+                Examples
+              </a>
               <a href="#patterns" className="text-foreground hover:text-primary transition-colors">
                 Patterns
               </a>
               <a href="#demo" className="text-foreground hover:text-primary transition-colors">
                 Demo
               </a>
-              <Link href="/playground" className="text-foreground hover:text-primary transition-colors">
+              <Link href="/?view=playground" className="text-foreground hover:text-primary transition-colors">
                 Playground
               </Link>
             </nav>
           </div>
 
           <div className="flex items-center gap-3">
             <a
-              href="https://github.com/yourusername/agent-patterns"
+              href="https://github.com/harshmathurx/agent-patterns"
               target="_blank"
               rel="noopener noreferrer"
               className="inline-flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors"
@@ -83,27 +87,27 @@ export default function NewLandingPage() {
             <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
               <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
             </svg>
-            Copy-paste UI patterns designed for LLM generation
+            shadcn-style UI patterns that agents can actually use correctly
           </div>
 
           <h1 className="mb-6 text-5xl font-extrabold tracking-tight text-foreground md:text-6xl lg:text-7xl">
             Agent Patterns
           </h1>
 
           <p className="mx-auto mb-8 max-w-3xl text-xl text-muted-foreground md:text-2xl">
-            Production-ready React components with LLM-optimized Zod schemas. 
-            Build AI-powered UIs that work with any agent framework.
+            15 copy-paste agent UI patterns for React apps: dashboards, task queues,
+            chat artifacts, forms, tables, timelines, and the schemas agents need to use them correctly.
           </p>
 
           <div className="flex flex-wrap justify-center gap-4">
             <a
-              href="#patterns"
+              href="#launch-demos"
               className="inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 text-lg font-semibold text-primary-foreground shadow-lg transition-all hover:bg-primary/90 hover:shadow-xl"
             >
-              Browse Patterns →
+              Steal the examples →
             </a>
             <a
-              href="https://github.com/yourusername/agent-patterns"
+              href="https://github.com/harshmathurx/agent-patterns"
               target="_blank"
               rel="noopener noreferrer"
               className="inline-flex items-center gap-2 rounded-lg border-2 border-border bg-background px-6 py-3 text-lg font-semibold text-foreground transition-all hover:border-primary hover:bg-muted"
@@ -159,6 +163,9 @@ export default function NewLandingPage() {
         </div>
       </section>
 
+      {/* Launch Demos */}
+      <LaunchDemos />
+
       {/* Pattern Gallery */}
       <section id="patterns" className="border-t border-border bg-muted/30 py-16 md:py-24">
         <div className="container mx-auto px-4">
@@ -209,13 +216,13 @@ export default function NewLandingPage() {
           </p>
           <div className="flex flex-wrap justify-center gap-4">
             <Link
-              href="/playground"
+              href="/?view=playground"
               className="inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 text-lg font-semibold text-primary-foreground shadow-lg transition-all hover:bg-primary/90 hover:shadow-xl"
             >
               Try the Playground →
             </Link>
             <a
-              href="https://github.com/yourusername/agent-patterns"
+              href="https://github.com/harshmathurx/agent-patterns"
               target="_blank"
               rel="noopener noreferrer"
               className="inline-flex items-center gap-2 rounded-lg border-2 border-border bg-background px-6 py-3 text-lg font-semibold text-foreground transition-all hover:border-primary hover:bg-muted"
@@ -230,16 +237,16 @@ export default function NewLandingPage() {
       <footer className="border-t border-border bg-card py-8">
         <div className="container mx-auto px-4 text-center text-sm text-muted-foreground">
           <p>
-            Built by developers, for developers. Open source and free to use.
+            Built for developers shipping agent interfaces. Open source and free to use.
           </p>
           <div className="mt-4 flex justify-center gap-6">
-            <a href="https://github.com/yourusername/agent-patterns" className="hover:text-foreground transition-colors">
+            <a href="https://github.com/harshmathurx/agent-patterns" className="hover:text-foreground transition-colors">
               GitHub
             </a>
-            <a href="https://twitter.com/yourusername" className="hover:text-foreground transition-colors">
+            <a href="https://x.com/butwhyharsh" className="hover:text-foreground transition-colors">
               Twitter
             </a>
-            <a href="/playground" className="hover:text-foreground transition-colors">
+            <a href="/?view=playground" className="hover:text-foreground transition-colors">
               Playground
             </a>
           </div>

apps/playground/src/app/layout.tsx

@@ -1,10 +1,7 @@
 import type { Metadata } from "next"
-import { Inter } from "next/font/google"
 import "./globals.css"
 import { ToastProvider } from "@/components/ui/toast"
 
-const inter = Inter({ subsets: ["latin"] })
-
 export const metadata: Metadata = {
   title: "Agent Patterns - Playground",
   description: "Interactive playground for Agent Patterns",
@@ -17,7 +14,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body>
         <ToastProvider>{children}</ToastProvider>
       </body>
     </html>