thepopebot 1.1.2 → 1.2.3

package/setup/setup.mjs

@@ -35,7 +35,6 @@ import {
   getPATCreationURL,
 } from './lib/github.mjs';
 import {
-  validateAnthropicKey,
   writeEnvFile,
   writeModelsJson,
   encodeSecretsBase64,
@@ -171,22 +170,19 @@ async function main() {
     }
   }
 
+  // Initialize git repo if needed
+  if (!prereqs.git.initialized) {
+    const initSpinner = ora('Initializing git repo...').start();
+    execSync('git init', { stdio: 'ignore' });
+    initSpinner.succeed('Git repo initialized');
+  }
+
   if (prereqs.git.remoteInfo) {
     owner = prereqs.git.remoteInfo.owner;
     repo = prereqs.git.remoteInfo.repo;
     printSuccess(`Repository: ${owner}/${repo}`);
   } else {
-    printWarning('No GitHub repository detected.');
-
-    // Initialize git repo if needed
-    try {
-      execSync('git rev-parse --git-dir', { stdio: 'ignore' });
-      printSuccess('Git repo already initialized');
-    } catch {
-      const initSpinner = ora('Initializing git repo...').start();
-      execSync('git init', { stdio: 'ignore' });
-      initSpinner.succeed('Git repo initialized');
-    }
+    printWarning('No GitHub remote detected. We\'ll set one up.');
 
     // Stage and commit
     execSync('git add .', { stdio: 'ignore' });
@@ -288,7 +284,7 @@ async function main() {
 
   console.log(chalk.dim(`  Create a fine-grained PAT scoped to ${chalk.bold(`${owner}/${repo}`)} only:\n`));
   console.log(chalk.dim('    \u2022 Repository access: Only select repositories \u2192 ') + chalk.bold(`${owner}/${repo}`));
-  console.log(chalk.dim('    \u2022 Actions: Read-only'));
+  console.log(chalk.dim('    \u2022 Actions: Read and write'));
   console.log(chalk.dim('    \u2022 Contents: Read and write'));
   console.log(chalk.dim('    \u2022 Metadata: Read-only (required, auto-selected)'));
   console.log(chalk.dim('    \u2022 Pull requests: Read and write'));
@@ -347,7 +343,8 @@ async function main() {
         const output = (err.stdout || '') + (err.stderr || '');
         if (output) printError(output.trim());
         execSync(`git remote set-url origin ${remote}`, { stdio: 'ignore' });
-        await pressEnter('Fix the issue, then press enter to retry');
+        printInfo('Your PAT may not have write access to this repository.');
+        pat = await promptForPAT();
         continue;
       }
 
@@ -395,31 +392,7 @@ async function main() {
     printSuccess(`${providerConfig.name} key added (${maskSecret(agentApiKey)})`);
   }
 
-  // Step 3b: Event Handler (Anthropic required)
-  if (collectedKeys['ANTHROPIC_API_KEY']) {
-    printSuccess('Using your Anthropic key for the chatbot too.');
-  } else {
-    console.log('');
-    printInfo('Your chatbot requires an Anthropic (Claude) API key.');
-
-    let anthropicValid = false;
-    while (!anthropicValid) {
-      const anthropicKey = await promptForApiKey('anthropic');
-
-      const validateSpinner = ora('Validating Anthropic API key...').start();
-      const validation = await validateAnthropicKey(anthropicKey);
-
-      if (validation.valid) {
-        validateSpinner.succeed('Anthropic API key valid');
-        collectedKeys['ANTHROPIC_API_KEY'] = anthropicKey;
-        anthropicValid = true;
-      } else {
-        validateSpinner.fail(`Invalid key: ${validation.error}`);
-      }
-    }
-  }
-
-  // Step 3c: Voice Messages (OpenAI optional)
+  // Step 3b: Voice Messages (OpenAI optional)
   if (collectedKeys['OPENAI_API_KEY']) {
     printSuccess('Your OpenAI key can also power voice messages.');
   } else {
@@ -430,7 +403,7 @@ async function main() {
     }
   }
 
-  // Step 3d: Brave Search (optional, default: true since it's free)
+  // Step 3c: Brave Search (optional, default: true since it's free)
   braveKey = await promptForBraveKey();
   if (braveKey) {
     printSuccess(`Brave Search key added (${maskSecret(braveKey)})`);
@@ -489,8 +462,8 @@ async function main() {
   const defaultVars = {
     AUTO_MERGE: 'true',
     ALLOWED_PATHS: '/logs',
-    PROVIDER: agentProvider,
-    MODEL: agentModel,
+    LLM_PROVIDER: agentProvider,
+    LLM_MODEL: agentModel,
   };
 
   let allVarsSet = false;
@@ -535,17 +508,20 @@ async function main() {
   }
 
   // Write .env file (now at project root, not event_handler/)
-  const apiKey = generateWebhookSecret().slice(0, 32); // Random API key for webhook endpoint
   const telegramVerification = telegramToken ? generateVerificationCode() : null;
+  const providerConfig = agentProvider !== 'custom' ? PROVIDERS[agentProvider] : null;
+  const providerEnvKey = providerConfig ? providerConfig.envKey : 'CUSTOM_API_KEY';
   const envPath = writeEnvFile({
-    apiKey,
     githubToken: pat,
     githubOwner: owner,
     githubRepo: repo,
     telegramBotToken: telegramToken,
     telegramWebhookSecret,
     ghWebhookSecret: webhookSecret,
-    anthropicApiKey: collectedKeys['ANTHROPIC_API_KEY'] || '',
+    llmProvider: agentProvider,
+    llmModel: agentModel,
+    providerEnvKey,
+    providerApiKey: collectedKeys[providerEnvKey] || '',
     openaiApiKey: collectedKeys['OPENAI_API_KEY'] || '',
     telegramChatId: null,
     telegramVerification,
@@ -565,81 +541,65 @@ async function main() {
     try {
       const response = await fetch('http://localhost:3000/api/ping', {
         method: 'GET',
-        headers: { 'x-api-key': apiKey },
         signal: AbortSignal.timeout(5000),
       });
-      if (response.ok) {
-        serverSpinner.succeed('Server is running');
-        serverReachable = true;
-      } else {
-        serverSpinner.fail(`Server returned status ${response.status}`);
-      }
+      // Any HTTP response means the server is running (even 401)
+      serverSpinner.succeed('Server is running');
+      serverReachable = true;
     } catch {
       serverSpinner.fail('Could not reach server on localhost:3000');
     }
   }
 
-  // Step 7: ngrok
-  printStep(++currentStep, TOTAL_STEPS, 'Expose Server with ngrok');
+  // Step 7: APP_URL
+  printStep(++currentStep, TOTAL_STEPS, 'App URL');
 
-  console.log(chalk.bold('  Start ngrok in another terminal window:\n'));
-  console.log(chalk.cyan('     ngrok http 3000\n'));
-  console.log(chalk.dim('  ngrok will show a "Forwarding" URL like: https://abc123.ngrok.io\n'));
-  console.log(chalk.yellow('  Note: ') + chalk.dim('ngrok URLs change each time you restart it (unless you have a paid plan).'));
-  console.log(chalk.dim('  When your URL changes, run: ') + chalk.cyan('npm run setup-telegram') + chalk.dim(' to reconfigure.\n'));
+  console.log(chalk.dim('  Your app needs a public URL for GitHub webhooks and Telegram.\n'));
+  console.log(chalk.dim('  Examples:'));
+  console.log(chalk.dim('    \u2022 ngrok: ') + chalk.cyan('https://abc123.ngrok.io'));
+  console.log(chalk.dim('    \u2022 VPS:   ') + chalk.cyan('https://mybot.example.com'));
+  console.log(chalk.dim('    \u2022 PaaS:  ') + chalk.cyan('https://mybot.vercel.app\n'));
 
-  let ngrokUrl = null;
-  while (!ngrokUrl) {
-    const { url: ngrokInput } = await inquirer.prompt([
+  let appUrl = null;
+  while (!appUrl) {
+    const { url: urlInput } = await inquirer.prompt([
       {
         type: 'input',
         name: 'url',
-        message: 'Paste your ngrok URL (https://...ngrok...):',
+        message: 'Enter your APP_URL (https://...):',
         validate: (input) => {
           if (!input) return 'URL is required';
           if (!input.startsWith('https://')) return 'URL must start with https://';
-          if (!input.includes('ngrok')) return 'URL should be an ngrok URL';
           return true;
         },
       },
     ]);
-    const candidate = ngrokInput.replace(/\/$/, '');
-
-    const ngrokSpinner = ora('Verifying server is reachable through ngrok...').start();
-    try {
-      const response = await fetch(`${candidate}/api/ping`, {
-        method: 'GET',
-        headers: { 'x-api-key': apiKey },
-        signal: AbortSignal.timeout(10000),
-      });
-      if (response.ok) {
-        ngrokSpinner.succeed('Server is reachable through ngrok');
-        ngrokUrl = candidate;
-      } else {
-        ngrokSpinner.fail(`Server returned status ${response.status}`);
-      }
-    } catch {
-      ngrokSpinner.fail('Could not reach server through ngrok');
-    }
+    appUrl = urlInput.replace(/\/$/, '');
   }
 
-  // Set GH_WEBHOOK_URL variable
-  let webhookUrlSet = false;
-  while (!webhookUrlSet) {
-    const urlSpinner = ora('Setting GH_WEBHOOK_URL variable...').start();
-    const urlResult = await setVariables(owner, repo, { GH_WEBHOOK_URL: ngrokUrl });
-    if (urlResult.GH_WEBHOOK_URL.success) {
-      urlSpinner.succeed('GH_WEBHOOK_URL variable set');
-      webhookUrlSet = true;
+  // Save APP_URL and APP_HOSTNAME to .env
+  const appHostname = new URL(appUrl).hostname;
+  updateEnvVariable('APP_URL', appUrl);
+  updateEnvVariable('APP_HOSTNAME', appHostname);
+  printSuccess(`APP_URL saved to .env`);
+
+  // Set APP_URL variable on GitHub
+  let appUrlSet = false;
+  while (!appUrlSet) {
+    const urlSpinner = ora('Setting APP_URL variable...').start();
+    const urlResult = await setVariables(owner, repo, { APP_URL: appUrl });
+    if (urlResult.APP_URL.success) {
+      urlSpinner.succeed('APP_URL variable set');
+      appUrlSet = true;
     } else {
-      urlSpinner.fail(`Failed: ${urlResult.GH_WEBHOOK_URL.error}`);
+      urlSpinner.fail(`Failed: ${urlResult.APP_URL.error}`);
       await pressEnter('Fix the issue, then press enter to retry');
     }
   }
 
   // Register Telegram webhook if configured
   if (telegramToken) {
-    const webhookUrl = `${ngrokUrl}/api/telegram/webhook`;
+    const webhookUrl = `${appUrl}/api/telegram/webhook`;
     let tgWebhookSet = false;
     while (!tgWebhookSet) {
       const tgSpinner = ora('Registering Telegram webhook...').start();
@@ -662,7 +622,7 @@ async function main() {
         updateEnvVariable('TELEGRAM_CHAT_ID', chatId);
         printSuccess(`Chat ID saved: ${chatId}`);
 
-        const verified = await verifyRestart(ngrokUrl, apiKey);
+        const verified = await verifyRestart(appUrl);
         if (verified) {
           printSuccess('Telegram bot is configured and working!');
         } else {
@@ -683,7 +643,7 @@ async function main() {
 
   const providerLabel = agentProvider === 'custom' ? 'Custom / Local' : PROVIDERS[agentProvider].label;
   console.log(`  ${chalk.dim('Repository:')}      ${owner}/${repo}`);
-  console.log(`  ${chalk.dim('Webhook URL:')}     ${ngrokUrl}`);
+  console.log(`  ${chalk.dim('App URL:')}         ${appUrl}`);
   console.log(`  ${chalk.dim('Agent LLM:')}       ${providerLabel} (${agentModel})`);
   console.log(`  ${chalk.dim('GitHub PAT:')}      ${maskSecret(pat)}`);
   for (const [envVar, value] of Object.entries(collectedKeys)) {
@@ -698,18 +658,18 @@ async function main() {
   console.log('  \u2022 GH_WEBHOOK_SECRET');
 
   console.log(chalk.bold('\n  GitHub Variables Set:\n'));
-  console.log('  \u2022 GH_WEBHOOK_URL');
+  console.log('  \u2022 APP_URL');
   console.log('  \u2022 AUTO_MERGE = true');
   console.log('  \u2022 ALLOWED_PATHS = /logs');
-  console.log(`  \u2022 PROVIDER = ${agentProvider}`);
-  console.log(`  \u2022 MODEL = ${agentModel}`);
+  console.log(`  \u2022 LLM_PROVIDER = ${agentProvider}`);
+  console.log(`  \u2022 LLM_MODEL = ${agentModel}`);
 
   console.log(chalk.bold.green('\n  You\'re all set!\n'));
 
   if (telegramToken) {
     console.log(chalk.cyan('  Message your Telegram bot to create your first job!'));
   } else {
-    console.log(chalk.dim('  Use the /api/webhook endpoint to create jobs.'));
+    console.log(chalk.dim('  Use the /api/create-job endpoint to create jobs.'));
   }
 
   console.log('\n');

package/templates/.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+.env
+data/
+logs/
+.git

package/templates/.env.example

@@ -2,8 +2,16 @@
 # Copy this file to .env and fill in your values
 # NEVER commit the actual .env file with real secrets!
 
-# Authentication key for /api/webhook endpoint (generate random string)
-API_KEY=your_random_api_key_here
+# Auth.js secret for session encryption (auto-generated by setup wizard)
+# To generate manually: openssl rand -base64 32
+AUTH_SECRET=
+
+# Public URL for webhooks, Telegram, and Traefik hostname
+APP_URL=
+
+# Hostname extracted from APP_URL (e.g., mybot.example.com) — used by docker-compose/Traefik
+# Auto-set by setup wizard
+APP_HOSTNAME=
 
 # GitHub Personal Access Token (needs repo, workflow scopes)
 GH_TOKEN=ghp_your_token_here
@@ -36,3 +44,11 @@ OPENAI_API_KEY=
 # Default Telegram chat ID for scheduled notifications
 # Get this by messaging your bot and checking the webhook logs, or use @userinfobot
 TELEGRAM_CHAT_ID=
+
+# Let's Encrypt email for automatic SSL (docker-compose only, optional)
+# If not set, Traefik uses a self-signed certificate
+# LETSENCRYPT_EMAIL=
+
+# Custom Docker images (optional, defaults to stephengpope/thepopebot-* images)
+# EVENT_HANDLER_IMAGE_URL=
+# JOB_IMAGE_URL=

package/templates/.github/workflows/auto-merge.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   auto-merge:
-    runs-on: ubuntu-latest
+    runs-on: ${{ vars.RUNS_ON || 'ubuntu-latest' }}
     if: startsWith(github.event.pull_request.head.ref, 'job/')
     permissions:
       contents: write

package/templates/.github/workflows/build-image.yml

@@ -3,11 +3,13 @@ name: Build and Push Docker Image
 on:
   push:
     branches: [main]
+    paths: ['docker/job/**']
+  workflow_dispatch:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
-    if: vars.IMAGE_URL != '' && startsWith(vars.IMAGE_URL, 'ghcr.io/')
+    runs-on: ${{ vars.RUNS_ON || 'ubuntu-latest' }}
+    if: vars.JOB_IMAGE_URL != '' && startsWith(vars.JOB_IMAGE_URL, 'ghcr.io/')
     permissions:
       contents: read
       packages: write
@@ -29,6 +31,6 @@ jobs:
       - name: Build and push
         uses: docker/build-push-action@v6
         with:
-          context: ./docker
+          context: ./docker/job
           push: true
-          tags: ${{ vars.IMAGE_URL }}:latest
+          tags: ${{ vars.JOB_IMAGE_URL }}:latest

package/templates/.github/workflows/notify-job-failed.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   notify-failure:
-    runs-on: ubuntu-latest
+    runs-on: ${{ vars.RUNS_ON || 'ubuntu-latest' }}
     if: >
       github.event.workflow_run.conclusion != 'success' &&
       startsWith(github.event.workflow_run.head_branch, 'job/')
@@ -60,7 +60,7 @@ jobs:
               merge_result: ""
             }' > /tmp/payload.json
 
-          curl -s -X POST "${{ vars.GH_WEBHOOK_URL }}/api/github/webhook" \
+          curl -s -X POST "${{ vars.APP_URL }}/api/github/webhook" \
             -H "Content-Type: application/json" \
             -H "X-GitHub-Webhook-Secret-Token: ${{ secrets.GH_WEBHOOK_SECRET }}" \
             -d @/tmp/payload.json

package/templates/.github/workflows/notify-pr-complete.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   notify:
-    runs-on: ubuntu-latest
+    runs-on: ${{ vars.RUNS_ON || 'ubuntu-latest' }}
     if: startsWith(github.event.workflow_run.head_branch, 'job/')
     permissions:
       contents: read
@@ -120,7 +120,7 @@ jobs:
             }' > /tmp/payload.json
 
           # 7. Send to event handler
-          curl -s -X POST "${{ vars.GH_WEBHOOK_URL }}/api/github/webhook" \
+          curl -s -X POST "${{ vars.APP_URL }}/api/github/webhook" \
             -H "Content-Type: application/json" \
             -H "X-GitHub-Webhook-Secret-Token: ${{ secrets.GH_WEBHOOK_SECRET }}" \
             -d @/tmp/payload.json

package/templates/.github/workflows/run-job.yml

@@ -5,15 +5,28 @@ on:
 
 jobs:
   run-agent:
-    runs-on: ubuntu-latest
+    runs-on: ${{ vars.RUNS_ON || 'ubuntu-latest' }}
     if: github.ref_type == 'branch' && startsWith(github.ref_name, 'job/')
     permissions:
       contents: write
       packages: read
 
     steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.ref_name }}
+          sparse-checkout: package-lock.json
+          sparse-checkout-cone-mode: false
+
+      - name: Get thepopebot version
+        id: version
+        run: |
+          VERSION=$(node -p "require('./package-lock.json').packages['node_modules/thepopebot']?.version || 'latest'")
+          echo "tag=$VERSION" >> $GITHUB_OUTPUT
+
       - name: Login to GHCR
-        if: startsWith(vars.IMAGE_URL, 'ghcr.io/')
+        if: startsWith(vars.JOB_IMAGE_URL, 'ghcr.io/')
         uses: docker/login-action@v3
         with:
           registry: ghcr.io
@@ -22,14 +35,15 @@ jobs:
 
       - name: Run thepopebot Agent
         env:
-          IMAGE_URL: ${{ vars.IMAGE_URL }}
-          MODEL: ${{ vars.MODEL }}
-          PROVIDER: ${{ vars.PROVIDER }}
+          JOB_IMAGE_URL: ${{ vars.JOB_IMAGE_URL }}
+          THEPOPEBOT_VERSION: ${{ steps.version.outputs.tag }}
+          LLM_MODEL: ${{ vars.LLM_MODEL }}
+          LLM_PROVIDER: ${{ vars.LLM_PROVIDER }}
         run: |
-          if [ -n "$IMAGE_URL" ]; then
-            IMAGE="${IMAGE_URL}"
+          if [ -n "$JOB_IMAGE_URL" ]; then
+            IMAGE="${JOB_IMAGE_URL}:latest"
           else
-            IMAGE="stephengpope/thepopebot:latest"
+            IMAGE="stephengpope/thepopebot:${THEPOPEBOT_VERSION}"
           fi
           echo "Using image: $IMAGE"
           docker run --rm \
@@ -37,6 +51,6 @@ jobs:
             -e BRANCH="${{ github.ref_name }}" \
             -e SECRETS='${{ secrets.SECRETS }}' \
             -e LLM_SECRETS='${{ secrets.LLM_SECRETS }}' \
-            -e MODEL="${MODEL}" \
-            -e PROVIDER="${PROVIDER}" \
+            -e LLM_MODEL="${LLM_MODEL}" \
+            -e LLM_PROVIDER="${LLM_PROVIDER}" \
             "$IMAGE"

package/templates/CLAUDE.md

@@ -23,8 +23,10 @@ This is an autonomous AI agent powered by [thepopebot](https://github.com/stephe
 │   ├── page.js                 # Home page
 │   └── api/[...thepopebot]/    # Framework API routes
 ├── docker/
-│   ├── Dockerfile              # Agent container (customizable)
-│   └── entrypoint.sh           # Container startup script
+│   ├── job/                    # Job agent container (customizable)
+│   ├── event_handler/          # Event handler container
+│   └── runner/                 # GitHub Actions runner container
+├── docker-compose.yml          # Production deployment
 ├── cron/                       # Working dir for command-type cron actions
 ├── triggers/                   # Working dir for command-type trigger actions
 ├── logs/                       # Per-job directories (job.md + session logs)
@@ -66,7 +68,7 @@ All API routes are under `/api/`:
 
 | Endpoint | Method | Purpose |
 |----------|--------|---------|
-| `/api/webhook` | POST | Create a new job (requires API_KEY) |
+| `/api/create-job` | POST | Create a new job (requires API_KEY) |
 | `/api/telegram/webhook` | POST | Telegram bot webhook |
 | `/api/telegram/register` | POST | Register Telegram webhook URL |
 | `/api/github/webhook` | POST | Receives notifications from GitHub Actions |

package/templates/app/api/auth/[...nextauth]/route.js

@@ -0,0 +1 @@
+export { GET, POST } from 'thepopebot/auth';

package/templates/app/api/chat/route.js

@@ -0,0 +1 @@
+export { POST } from 'thepopebot/chat/api';

package/templates/app/chat/[chatId]/page.js

@@ -0,0 +1,8 @@
+import { auth } from 'thepopebot/auth';
+import { ChatPage } from 'thepopebot/chat';
+
+export default async function ChatRoute({ params }) {
+  const { chatId } = await params;
+  const session = await auth();
+  return <ChatPage session={session} needsSetup={false} chatId={chatId} />;
+}

package/templates/app/chats/page.js

@@ -0,0 +1,7 @@
+import { auth } from 'thepopebot/auth';
+import { ChatsPage } from 'thepopebot/chat';
+
+export default async function ChatsRoute() {
+  const session = await auth();
+  return <ChatsPage session={session} />;
+}

package/templates/app/components/ascii-logo.jsx

@@ -0,0 +1,10 @@
+export function AsciiLogo() {
+  return (
+    <pre className="text-foreground text-[clamp(0.45rem,1.5vw,0.85rem)] leading-snug text-left mb-8 select-none">{` _____ _          ____                  ____        _
+|_   _| |__   ___|  _ \\ ___  _ __   ___| __ )  ___ | |_
+  | | | '_ \\ / _ \\ |_) / _ \\| '_ \\ / _ \\  _ \\ / _ \\| __|
+  | | | | | |  __/  __/ (_) | |_) |  __/ |_) | (_) | |_
+  |_| |_| |_|\\___|_|   \\___/| .__/ \\___|____/ \\___/ \\__|
+                            |_|`}</pre>
+  );
+}

package/templates/app/components/login-form.jsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useState } from 'react';
+import { signIn } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './ui/card';
+
+export function LoginForm() {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const result = await signIn('credentials', {
+        email,
+        password,
+        redirect: false,
+      });
+
+      if (result?.error) {
+        setError('Invalid email or password.');
+      } else {
+        router.push('/');
+      }
+    } catch {
+      setError('Something went wrong. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Card className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Sign In</CardTitle>
+        <CardDescription>Log in to your agent dashboard.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="admin@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+          </div>
+          {error && (
+            <p className="text-sm text-destructive">{error}</p>
+          )}
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? 'Signing in...' : 'Sign In'}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}