availsync 0.1.0

package/frontend/components/marketing/Faq.tsx

@@ -0,0 +1,41 @@
+import { faqSchemaItems } from '@/lib/seo';
+import { Plus } from 'lucide-react';
+
+export function Faq() {
+  return (
+    <section className="bg-bg">
+      <div className="mx-auto grid max-w-6xl gap-8 px-4 py-20 lg:grid-cols-[0.72fr_1.28fr]">
+        <div>
+          <p className="text-label uppercase text-text-tertiary">FAQ</p>
+          <h2 className="mt-3 text-3xl font-semibold text-text-primary">Questions buyers ask</h2>
+          <p className="mt-4 max-w-sm text-body leading-6 text-text-secondary">
+            Short answers for teams comparing Availsync with agent frameworks, policy tools,
+            calendars, and homegrown locks.
+          </p>
+        </div>
+        <div className="space-y-3">
+          {faqSchemaItems.map(({ question, answer }) => (
+            <details
+              className="group rounded border border-border bg-surface transition-colors open:border-border-focus open:bg-surface-raised"
+              key={question}
+            >
+              <summary className="flex cursor-pointer list-none items-start justify-between gap-4 px-5 py-4 text-heading font-semibold text-text-primary marker:hidden">
+                <span>{question}</span>
+                <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded border border-border bg-bg text-text-tertiary transition-transform group-open:rotate-45 group-open:text-accent">
+                  <Plus className="h-4 w-4" />
+                </span>
+              </summary>
+              <div className="px-5 pb-5 pt-0">
+                {answer.split('\n\n').map((paragraph) => (
+                  <p className="mt-3 text-body leading-6 text-text-secondary first:mt-0" key={paragraph}>
+                    {paragraph}
+                  </p>
+                ))}
+              </div>
+            </details>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/frontend/components/marketing/Hero.tsx

@@ -0,0 +1,73 @@
+import { ArrowRight, RadioTower, ShieldCheck } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+
+export function Hero() {
+  return (
+    <section className="relative overflow-hidden border-b border-border bg-bg">
+      <img
+        alt=""
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full object-cover opacity-70 saturate-90"
+        src="/marketing/hero-agent-coordination.png"
+      />
+      <div className="absolute inset-0 bg-bg/70" />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_72%_35%,rgba(94,106,210,0.18),transparent_34%),linear-gradient(90deg,rgba(15,15,15,0.98)_0%,rgba(15,15,15,0.84)_45%,rgba(15,15,15,0.58)_100%)]" />
+      <div className="relative mx-auto grid min-h-[640px] max-w-6xl items-center gap-8 px-4 py-10 md:grid-cols-[0.86fr_1.14fr] md:py-12">
+        <div className="relative z-10">
+          <p className="mb-4 inline-flex items-center gap-2 rounded border border-border bg-surface px-3 py-2 text-label font-medium uppercase text-text-secondary">
+            <ShieldCheck className="h-4 w-4" />
+            Built for AI and coding agents
+          </p>
+          <h1 className="max-w-3xl text-5xl font-semibold leading-tight text-text-primary md:text-6xl">
+            Give your coding agents one place to coordinate
+          </h1>
+          <p className="mt-6 max-w-xl text-heading leading-7 text-text-secondary">
+            Availsync gives Codex, Claude, Cursor, MCP clients, and server automations one shared place to claim a repo or project before they edit, deploy, or schedule work.
+          </p>
+          <p className="mt-4 max-w-xl text-body leading-6 text-text-primary">
+            Every integrated agent checks in before it acts.
+          </p>
+          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
+            <Button href="/signup">
+              Start free <ArrowRight className="h-4 w-4" />
+            </Button>
+            <Button href="/docs/sdk/node" variant="secondary">
+              Read SDK docs
+            </Button>
+          </div>
+          <p className="mt-5 text-body text-text-tertiary">Free plan includes 3 agents. No card required.</p>
+          <p className="mt-1 text-body text-text-secondary">Paid plans are waitlist-only during the private pilot.</p>
+        </div>
+        <div className="relative z-10 md:-mr-8">
+          <div className="rounded border border-border/90 bg-surface/95 p-5 shadow-[0_28px_90px_rgba(0,0,0,0.55),inset_0_0_0_1px_rgba(255,255,255,0.04)] backdrop-blur-sm">
+            <div className="flex items-center justify-between border-b border-border pb-3">
+              <div>
+                <p className="text-label uppercase text-text-tertiary">Repo guardrail active</p>
+                <p className="mt-1 text-title font-semibold text-text-primary">Deploy Agent claimed owner/repo</p>
+              </div>
+              <span className="flex h-8 w-8 items-center justify-center rounded bg-accent/15 text-accent">
+                <RadioTower className="h-4 w-4" />
+              </span>
+            </div>
+            <div className="mt-4 grid gap-2">
+              {[
+                ['repo', 'proceed', 'Deploy Agent'],
+                ['repo', 'skip_run', 'Refactor Agent'],
+                ['docs', 'proceed', 'Docs Agent'],
+              ].map(([scope, action, label]) => (
+                <div className="grid grid-cols-[76px_1fr_auto] items-center gap-3 rounded border border-border bg-bg px-4 py-3 text-body" key={`${scope}-${label}`}>
+                  <span className="font-mono text-text-primary">{scope}</span>
+                  <span className="text-text-secondary">{label}</span>
+                  <span className="rounded bg-surface-raised px-2 py-1 font-mono text-[11px] text-text-secondary">{action}</span>
+                </div>
+              ))}
+            </div>
+            <p className="mt-4 text-body text-text-tertiary">
+              Overlapping agents skip cleanly before stale context turns into conflicting edits.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/frontend/components/marketing/HowItWorks.tsx

@@ -0,0 +1,28 @@
+const steps = [
+  ['Create agents', 'Add each coding agent, AI tool, or assistant with its own priority and API key.'],
+  ['Choose resource scope', 'Use repo-level locks by default, then split into projects only when work streams are independent.'],
+  [
+    'Claim before work',
+    'Agents call run/start, extend the lease while working, and release it when the run finishes.',
+  ],
+];
+
+export function HowItWorks() {
+  return (
+    <section className="border-b border-border bg-surface">
+      <div className="mx-auto max-w-6xl px-4 py-20">
+        <p className="text-label uppercase text-text-tertiary">Workflow</p>
+        <h2 className="mt-3 text-3xl font-semibold text-text-primary">How it works</h2>
+        <div className="mt-8 grid gap-4 md:grid-cols-3">
+          {steps.map(([title, body], index) => (
+            <div className="rounded border border-border bg-bg p-5" key={title}>
+              <p className="font-mono text-[11px] text-accent">0{index + 1}</p>
+              <h3 className="mt-3 text-title font-semibold text-text-primary">{title}</h3>
+              <p className="mt-3 text-body leading-6 text-text-secondary">{body}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/frontend/components/marketing/ObserveModeTeaser.tsx

@@ -0,0 +1,41 @@
+import { Button } from '@/components/ui/Button';
+
+export function ObserveModeTeaser() {
+  return (
+    <section className="border-b border-border bg-bg">
+      <div className="mx-auto grid max-w-6xl gap-6 px-4 py-16 lg:grid-cols-[0.9fr_1.1fr]">
+        <div>
+          <p className="text-label uppercase text-text-tertiary">Pilot safely</p>
+          <h2 className="mt-3 text-3xl font-semibold text-text-primary">
+            Start in observe mode.
+          </h2>
+          <p className="mt-4 text-heading leading-7 text-text-secondary">
+            Availsync will not block your agents yet. It records what it would have stopped,
+            so you can measure value before enforcing.
+          </p>
+          <div className="mt-6">
+            <Button href="/docs/pilot" variant="secondary">
+              Pilot in 10 minutes
+            </Button>
+          </div>
+        </div>
+        <div className="grid gap-3 md:grid-cols-2">
+          <div className="rounded border border-border bg-surface p-5">
+            <p className="text-label uppercase text-text-tertiary">Observe</p>
+            <h3 className="mt-2 text-title font-semibold text-text-primary">Measure first</h3>
+            <p className="mt-3 text-body leading-6 text-text-secondary">
+              Agents continue running. Activity shows which runs would have received skip_run.
+            </p>
+          </div>
+          <div className="rounded border border-border bg-surface p-5">
+            <p className="text-label uppercase text-text-tertiary">Enforce</p>
+            <h3 className="mt-2 text-title font-semibold text-text-primary">Protect later</h3>
+            <p className="mt-3 text-body leading-6 text-text-secondary">
+              Once the signal is useful, switch selected agents to enforce and block overlapping claims.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/frontend/components/marketing/PricingTeaser.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@/components/ui/Button';
+
+export function PricingTeaser() {
+  return (
+    <section className="border-b border-border bg-surface text-text-primary">
+      <div className="mx-auto flex max-w-6xl flex-col items-start justify-between gap-6 px-4 py-16 md:flex-row md:items-center">
+        <div>
+          <h2 className="text-3xl font-semibold">Start with 3 agents for free.</h2>
+          <p className="mt-3 max-w-2xl text-body leading-6 text-text-secondary">
+            Paid tiers are waitlist-only during the private pilot. Start free, run verification,
+            and join the waitlist when you need more agents or protected resources.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <Button href="/signup">Start free</Button>
+          <Button href="/docs/sdk/node" variant="secondary">
+            Read SDK docs
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}

package/frontend/components/marketing/ProblemSolution.tsx

@@ -0,0 +1,36 @@
+export function ProblemSolution() {
+  return (
+    <section className="border-b border-border bg-bg">
+      <div className="mx-auto grid max-w-6xl gap-10 px-4 py-20 md:grid-cols-[0.9fr_1.1fr]">
+        <div>
+          <p className="text-label uppercase text-text-tertiary">The failure mode</p>
+          <h2 className="mt-3 max-w-lg text-3xl font-semibold text-text-primary">
+            Your agents can read stale context and edit the same repo.
+          </h2>
+          <p className="mt-4 text-heading leading-7 text-text-secondary">
+            One agent improves the homepage while another changes the product catalog it depends
+            on. Without a shared resource claim, both runs look safe locally and conflict later.
+          </p>
+        </div>
+        <div className="rounded border border-border bg-surface p-5">
+          <p className="text-label uppercase text-text-tertiary">Decision layer</p>
+          <h2 className="mt-3 text-3xl font-semibold text-text-primary">
+            Availsync arbitrates before the agent starts work.
+          </h2>
+          <div className="mt-6 grid gap-3">
+            {[
+              ['Resource claims', 'Protect a repo or project so only the right agent works there at once.'],
+              ['Priority rules', 'Let deploys, migrations, reviews, and customer-facing work win deterministically.'],
+              ['Runtime history', 'See checks, claims, blocked runs, extensions, releases, and actors later.'],
+            ].map(([title, body]) => (
+              <div className="rounded border border-border bg-bg p-4" key={title}>
+                <p className="text-heading font-medium text-text-primary">{title}</p>
+                <p className="mt-1 text-body text-text-secondary">{body}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/frontend/components/marketing/SiteFooter.tsx

@@ -0,0 +1,59 @@
+import { AvailsyncLogo } from '@/components/brand/AvailsyncLogo';
+import { CookieSettingsButton } from '@/components/privacy/CookieSettingsButton';
+
+export function SiteFooter() {
+  return (
+    <footer className="border-t border-border bg-bg text-text-primary">
+      <div className="mx-auto grid max-w-6xl gap-6 px-4 py-10 md:grid-cols-4">
+        <div>
+          <AvailsyncLogo />
+          <p className="mt-2 text-body text-text-secondary">Coordination layer for AI and coding agents.</p>
+        </div>
+        <div className="text-body text-text-secondary">
+          <p className="font-semibold text-text-primary">Product</p>
+          <a className="mt-2 block" href="/pricing">
+            Pricing
+          </a>
+          <a className="mt-2 block" href="/docs">
+            Docs
+          </a>
+          <a className="mt-2 block" href="/docs/pilot">
+            Pilot guide
+          </a>
+          <a className="mt-2 block" href="/docs/sdk/node">
+            Node SDK
+          </a>
+          <a className="mt-2 block" href="/docs/api">
+            API reference
+          </a>
+          <a className="mt-2 block" href="/signup">
+            Start free
+          </a>
+        </div>
+        <div className="text-body text-text-secondary">
+          <p className="font-semibold text-text-primary">Company</p>
+          <a className="mt-2 block" href="/changelog">
+            Changelog
+          </a>
+          <a className="mt-2 block" href="/privacy">
+            Privacy
+          </a>
+          <CookieSettingsButton className="mt-2 block text-left text-text-secondary transition hover:text-text-primary" />
+          <a className="mt-2 block" href="/terms">
+            Terms
+          </a>
+        </div>
+        <div className="text-body text-text-secondary">
+          <p className="font-semibold text-text-primary">Trust</p>
+          <a className="mt-2 block" href="/security">
+            Security
+          </a>
+          <a className="mt-2 block" href="/docs/reliability">
+            Reliability
+          </a>
+          <p className="mt-2">API keys are hashed. Runtime events store metadata, not raw request bodies.</p>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/frontend/components/marketing/SiteHeader.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/Button';
+import { AvailsyncLogo } from '@/components/brand/AvailsyncLogo';
+import { loadSession, type StoredSession } from '@/lib/storage';
+
+export function SiteHeader() {
+  const [session, setSession] = useState<StoredSession | null>(null);
+
+  useEffect(() => {
+    setSession(loadSession());
+  }, []);
+
+  return (
+    <header className="sticky top-0 z-40 border-b border-border bg-bg/95 backdrop-blur">
+      <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-4">
+        <a className="text-text-primary" href="/">
+          <AvailsyncLogo glow />
+        </a>
+        <nav className="hidden items-center gap-6 text-body text-text-secondary md:flex">
+          <a className="transition hover:text-text-primary" href="/pricing">Pricing</a>
+          <a className="transition hover:text-text-primary" href="/docs">Docs</a>
+          <a className="transition hover:text-text-primary" href="/docs/sdk/node">SDK</a>
+          <a className="transition hover:text-text-primary" href="/docs/quickstart">Quickstart</a>
+        </nav>
+        {session ? (
+          <div className="flex items-center gap-3">
+            <span className="hidden max-w-48 truncate text-body text-text-tertiary sm:block">
+              {session.email}
+            </span>
+            <Button href="/app">Dashboard</Button>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2">
+            <Button href="/login" variant="ghost">
+              Sign in
+            </Button>
+            <Button href="/signup">Start free</Button>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}

package/frontend/components/marketing/UseCases.tsx

@@ -0,0 +1,27 @@
+const cases = [
+  ['Coding agents', 'Claim a repo before Codex, Claude, Cursor, or MCP-based agents edit files. Block overlapping runs with skip_run.'],
+  ['Server automations', 'Let cron jobs, CI workers, and scheduled scripts claim the same resources your agents use.'],
+  ['Deploy and review windows', 'Give deploys, migrations, review passes, and customer-impacting work deterministic priority.'],
+  ['Scheduling agents', 'Secondary flow: coordinate availability, holds, and meeting-time conflicts before agents book downstream systems.'],
+];
+
+export function UseCases() {
+  return (
+    <section className="border-b border-border bg-bg">
+      <div className="mx-auto max-w-6xl px-4 py-20">
+        <p className="text-label uppercase text-text-tertiary">Use cases</p>
+        <h2 className="mt-3 text-3xl font-semibold text-text-primary">
+          Built for multi-agent coordination
+        </h2>
+        <div className="mt-8 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {cases.map(([title, body]) => (
+            <div className="rounded border border-border bg-surface p-5" key={title}>
+              <h3 className="text-title font-semibold text-text-primary">{title}</h3>
+              <p className="mt-3 text-body leading-6 text-text-secondary">{body}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/frontend/components/onboarding/OnboardingClient.tsx

@@ -0,0 +1,278 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { signupWorkspace, createAvailabilityWindow } from '@/lib/api';
+import { saveSession } from '@/lib/storage';
+import { type AgentType } from '@/lib/schemas';
+import { Copy, Check, ArrowRight, Eye, EyeOff } from 'lucide-react';
+
+export function OnboardingClient() {
+  const router = useRouter();
+  const [step, setStep] = useState(1);
+  const [workspaceName, setWorkspaceName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [agentName, setAgentName] = useState('');
+  const [agentType, setAgentType] = useState<AgentType>('generic');
+  const [priority, setPriority] = useState(0);
+  const [apiKey, setApiKey] = useState('');
+  const [agentId, setAgentId] = useState('');
+  const [error, setError] = useState('');
+  const [setupWarning, setSetupWarning] = useState('');
+  const [copied, setCopied] = useState(false);
+  const [showKey, setShowKey] = useState(false);
+  const [savedKey, setSavedKey] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleSignup = async () => {
+    if (!workspaceName.trim() || !email.trim() || password.length < 8 || !agentName.trim()) return;
+    setLoading(true);
+    setError('');
+    setSetupWarning('');
+    try {
+      const result = await signupWorkspace({
+        workspace_name: workspaceName.trim(),
+        email: email.trim(),
+        password,
+        agent: {
+          name: agentName.trim(),
+          agent_type: agentType,
+          priority,
+        },
+      });
+
+      saveSession({
+        orgId: result.org.id,
+        userId: result.user.id,
+        email: result.user.email,
+      });
+      setApiKey(result.apiKey);
+      setAgentId(result.agent.id);
+      setStep(2);
+
+      try {
+        const tomorrow = new Date(Date.now() + 86400000);
+        tomorrow.setHours(9, 0, 0, 0);
+        const tomorrowEnd = new Date(tomorrow);
+        tomorrowEnd.setHours(17, 0, 0, 0);
+
+        await createAvailabilityWindow({
+          agent_id: result.agent.id,
+          start_at: tomorrow.toISOString(),
+          end_at: tomorrowEnd.toISOString(),
+          window_type: 'available',
+        });
+      } catch {
+        setSetupWarning('Workspace created. The optional demo availability window was not created, but your agent key is ready.');
+      }
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(apiKey);
+    setCopied(true);
+    setSavedKey(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleCopyAgentId = () => {
+    navigator.clipboard.writeText(agentId);
+  };
+
+  return (
+    <div className="min-h-screen bg-bg flex items-center justify-center p-6">
+      <div className="w-full max-w-md">
+        <div className="flex items-center gap-2 mb-8">
+          {[1, 2].map((s) => (
+            <div key={s} className="flex items-center gap-2">
+              <div
+                className={`w-6 h-6 rounded-full flex items-center justify-center text-[11px] font-medium ${
+                  s <= step
+                    ? 'bg-accent text-white'
+                    : 'bg-surface border border-border text-text-tertiary'
+                }`}
+              >
+                {s < step ? <Check className="h-3 w-3" /> : s}
+              </div>
+              {s < 2 && <div className={`w-8 h-px ${s < step ? 'bg-accent' : 'bg-border'}`} />}
+            </div>
+          ))}
+        </div>
+
+        {step === 1 && (
+          <div>
+            <h1 className="text-title font-semibold text-text-primary mb-2">Create your agent workspace</h1>
+            <p className="text-body text-text-secondary mb-6">
+              Set up dashboard access and generate the first runtime key for a coding or automation agent.
+            </p>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-label uppercase text-text-tertiary mb-1">Workspace</label>
+                <input
+                  value={workspaceName}
+                  onChange={(e) => setWorkspaceName(e.target.value)}
+                  placeholder="Acme Engineering"
+                  className="w-full rounded bg-surface border border-border px-3 py-2.5 text-body text-text-primary outline-none focus:border-border-focus"
+                  autoFocus
+                />
+              </div>
+              <div>
+                <label className="block text-label uppercase text-text-tertiary mb-1">Email</label>
+                <input
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  type="email"
+                  placeholder="you@company.com"
+                  className="w-full rounded bg-surface border border-border px-3 py-2.5 text-body text-text-primary outline-none focus:border-border-focus"
+                />
+              </div>
+              <div>
+                <label className="block text-label uppercase text-text-tertiary mb-1">Password</label>
+                <input
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  type="password"
+                  minLength={8}
+                  placeholder="Minimum 8 characters"
+                  className="w-full rounded bg-surface border border-border px-3 py-2.5 text-body text-text-primary outline-none focus:border-border-focus"
+                />
+              </div>
+              <div>
+                <label className="block text-label uppercase text-text-tertiary mb-1">First agent</label>
+                <input
+                  value={agentName}
+                  onChange={(e) => setAgentName(e.target.value)}
+                  placeholder="deploy_agent"
+                  className="w-full rounded bg-surface border border-border px-3 py-2.5 text-body text-text-primary outline-none focus:border-border-focus"
+                />
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-label uppercase text-text-tertiary mb-1">Type</label>
+                  <select
+                    value={agentType}
+                    onChange={(e) => setAgentType(e.target.value as AgentType)}
+                    className="w-full rounded bg-surface border border-border px-3 py-2.5 text-body text-text-primary outline-none focus:border-border-focus"
+                  >
+                    <option value="generic">Coding / generic</option>
+                    <option value="external_meeting">External meeting</option>
+                    <option value="internal">Internal</option>
+                    <option value="focus">Focus</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-label uppercase text-text-tertiary mb-1">Priority</label>
+                  <input
+                    type="number"
+                    value={priority}
+                    onChange={(e) => setPriority(Number(e.target.value))}
+                    className="w-full rounded bg-surface border border-border px-3 py-2.5 text-body text-text-primary outline-none focus:border-border-focus"
+                  />
+                </div>
+              </div>
+            </div>
+            {error && <p className="text-body text-error mt-3">{error}</p>}
+            <button
+              onClick={handleSignup}
+              disabled={loading || !workspaceName.trim() || !email.trim() || password.length < 8 || !agentName.trim()}
+              className="w-full mt-6 rounded bg-accent text-white py-2.5 text-body font-medium hover:bg-accent-hover transition-colors disabled:opacity-40 active:scale-[0.98]"
+            >
+              {loading ? 'Creating...' : 'Create workspace'}
+            </button>
+          </div>
+        )}
+
+        {step === 2 && (
+          <div>
+            <h1 className="text-title font-semibold text-text-primary mb-2">Agent runtime key</h1>
+            <p className="text-body text-text-secondary mb-4">
+              Use this key in your coding agent or server environment. Dashboard access uses your email
+              and password.
+            </p>
+            {setupWarning && (
+              <div className="mb-4 rounded border border-warning/30 bg-warning/10 p-3 text-body text-warning">
+                {setupWarning}
+              </div>
+            )}
+            <div className="rounded bg-surface border border-warning/30 p-4 mb-4">
+              <p className="text-body font-medium text-warning mb-3">
+                Copy now - you will not see this key again
+              </p>
+              <div className="mb-3 flex items-center gap-2 rounded bg-bg p-3">
+                <input
+                  readOnly
+                  type={showKey ? 'text' : 'password'}
+                  value={apiKey}
+                  className="min-w-0 flex-1 bg-transparent font-mono text-[12px] text-text-secondary outline-none"
+                />
+                <button
+                  onClick={() => setShowKey((value) => !value)}
+                  className="shrink-0 text-text-tertiary hover:text-text-secondary"
+                  title={showKey ? 'Hide API key' : 'Reveal API key'}
+                >
+                  {showKey ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+                </button>
+              </div>
+              <div className="flex flex-wrap items-center gap-3">
+                <button
+                  onClick={handleCopy}
+                  className="flex items-center gap-1.5 text-body text-accent hover:text-accent-hover"
+                >
+                  {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+                  {copied ? 'Copied' : 'Copy to clipboard'}
+                </button>
+                <label className="flex items-center gap-2 text-body text-text-secondary">
+                  <input
+                    type="checkbox"
+                    checked={savedKey}
+                    onChange={(event) => setSavedKey(event.target.checked)}
+                    className="h-4 w-4 accent-accent"
+                  />
+                  I saved this key
+                </label>
+              </div>
+            </div>
+            <div className="rounded border border-border bg-surface p-3 mb-6">
+              <label className="block text-label uppercase text-text-tertiary mb-1">Agent ID</label>
+              <div className="flex items-center gap-2">
+                <div className="font-mono text-[12px] text-text-secondary break-all">{agentId}</div>
+                <button
+                  onClick={handleCopyAgentId}
+                  className="text-text-tertiary hover:text-text-secondary"
+                  title="Copy agent ID"
+                >
+                  <Copy className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            </div>
+            <button
+              onClick={() => router.push(`/app/agents?connect=${agentId}`)}
+              disabled={!savedKey}
+              className="w-full flex items-center justify-center gap-2 rounded bg-accent text-white py-2.5 text-body font-medium hover:bg-accent-hover transition-colors active:scale-[0.98]"
+            >
+              Set up first agent
+              <ArrowRight className="h-3.5 w-3.5" />
+            </button>
+            <button
+              onClick={() => router.push('/app/agents')}
+              className="mt-3 w-full rounded border border-border bg-surface py-2.5 text-body font-medium text-text-secondary transition-colors hover:text-text-primary active:scale-[0.98]"
+            >
+              Create second agent to run verification
+            </button>
+            <button
+              onClick={() => router.push('/app')}
+              className="mt-3 w-full rounded border border-transparent py-2.5 text-body font-medium text-text-tertiary transition-colors hover:text-text-primary active:scale-[0.98]"
+            >
+              Go to dashboard
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}