availsync 0.1.0

package/frontend/app/docs/api/page.tsx

@@ -0,0 +1,157 @@
+import type { Metadata } from 'next';
+import { SiteHeader } from '@/components/marketing/SiteHeader';
+import { SiteFooter } from '@/components/marketing/SiteFooter';
+import { JsonLd } from '@/components/seo/JsonLd';
+import { Button } from '@/components/ui/Button';
+import { webPageSchema } from '@/lib/seo';
+
+export const metadata: Metadata = {
+  title: 'API Reference',
+  description:
+    'Pragmatic Availsync v1 API reference for work guardrails, activity, billing status, value health, and MCP heartbeat.',
+  alternates: {
+    canonical: '/docs/api',
+  },
+};
+
+const endpoints = [
+  {
+    group: 'Automation guardrail',
+    auth: 'Agent API key or workspace session',
+    rows: [
+      ['POST /v1/work/run/start', 'Start a guarded run. Returns proceed or skip_run. In observe mode it proceeds and may include shadow_decision.'],
+      ['POST /v1/work/run/extend', 'Extend an active claim lease while the agent is still working.'],
+      ['POST /v1/work/run/finish', 'Release a run claim. Safe to call more than once.'],
+    ],
+  },
+  {
+    group: 'Lower-level work coordination',
+    auth: 'Agent API key or workspace session',
+    rows: [
+      ['POST /v1/work/check', 'Preview whether a repo or project resource is available. Does not mutate claims.'],
+      ['POST /v1/work/claim', 'Create an enforcing work claim, or return 409 when blocked. Supports Idempotency-Key.'],
+      ['POST /v1/work/claims/:claim_id/extend', 'Extend a specific claim.'],
+      ['DELETE /v1/work/claims/:claim_id', 'Release a specific claim.'],
+      ['GET /v1/work/claims', 'List current and recent claims. Agent keys only see their own claims.'],
+    ],
+  },
+  {
+    group: 'Activity and value',
+    auth: 'Workspace session unless noted',
+    rows: [
+      ['GET /v1/activity', 'List runtime traffic metadata. Workspace users can filter by agent, status, type, and date.'],
+      ['POST /v1/activity/usage', 'Agent-key endpoint for reporting optional token usage or external run metadata.'],
+      ['GET /v1/value/health', 'Dashboard value summary and agent health for the current workspace.'],
+    ],
+  },
+  {
+    group: 'Billing and setup',
+    auth: 'Workspace session',
+    rows: [
+      ['GET /v1/billing/status', 'Current plan, limits, usage, and upgrade hints.'],
+      ['POST /v1/orgs/:org_id/agents/:agent_id/test-connection', 'Read-only setup readiness check for one agent.'],
+      ['POST /v1/orgs/:org_id/agents/:agent_id/setup-test', 'Dashboard-run validation flow. Does not require the raw API key.'],
+    ],
+  },
+  {
+    group: 'MCP',
+    auth: 'Agent API key',
+    rows: [
+      ['POST /v1/mcp/heartbeat', 'MCP clients use this to report online status. SDK and REST traffic use last_seen_at instead.'],
+    ],
+  },
+];
+
+const responseNotes = [
+  ['proceed', 'The agent can run. A claim may exist in enforce mode; observe mode can proceed without a claim.'],
+  ['skip_run', 'Another active claim has priority. Scheduled jobs should exit cleanly with the reason.'],
+  ['already_finished', 'Finish was called for a claim that is already released or expired. Treat as success.'],
+  ['plan_limit_reached', 'HTTP 402. The workspace hit a plan limit such as agents, protected resources, active claims, or monthly API calls.'],
+];
+
+export default function ApiReferencePage() {
+  return (
+    <>
+      <JsonLd data={webPageSchema('/docs/api', 'Availsync API Reference', metadata.description as string)} />
+      <SiteHeader />
+      <main className="min-h-screen bg-bg">
+        <section className="mx-auto max-w-6xl px-4 py-16">
+          <p className="text-label uppercase text-text-tertiary">API reference</p>
+          <h1 className="mt-3 max-w-4xl text-5xl font-semibold text-text-primary">
+            Availsync v1 API reference.
+          </h1>
+          <p className="mt-5 max-w-3xl text-heading leading-7 text-text-secondary">
+            Use the Node SDK or MCP package for most pilots. Use the REST API directly when you
+            need to integrate another runtime, language, or workflow engine.
+          </p>
+          <div className="mt-8 flex flex-wrap gap-3">
+            <Button href="/docs/sdk/node">Node SDK</Button>
+            <Button href="/docs/quickstart" variant="secondary">Quickstart</Button>
+            <Button href="/docs/reliability" variant="secondary">Reliability</Button>
+          </div>
+
+          <section className="mt-12 rounded border border-border bg-surface p-5">
+            <h2 className="text-heading font-semibold text-text-primary">Authentication</h2>
+            <p className="mt-2 text-body leading-6 text-text-secondary">
+              Agent calls use <code>Authorization: Bearer API_KEY</code>. Workspace dashboard calls
+              use the login session cookie. Raw API keys are shown once at create or rotation time,
+              then never returned again.
+            </p>
+            <pre className="mt-4 overflow-auto rounded border border-border bg-bg p-4 text-sm text-text-secondary">
+{`Authorization: Bearer AVAILSYNC_API_KEY
+Content-Type: application/json
+Idempotency-Key: optional-stable-key`}
+            </pre>
+          </section>
+
+          <section className="mt-12 grid gap-4">
+            {endpoints.map((section) => (
+              <div className="rounded border border-border bg-surface p-5" key={section.group}>
+                <div className="flex flex-wrap items-start justify-between gap-3">
+                  <h2 className="text-heading font-semibold text-text-primary">{section.group}</h2>
+                  <span className="rounded border border-border bg-bg px-3 py-1 font-mono text-label text-text-tertiary">
+                    {section.auth}
+                  </span>
+                </div>
+                <div className="mt-4 grid gap-2">
+                  {section.rows.map(([endpoint, body]) => (
+                    <div className="grid gap-2 rounded border border-border bg-bg p-3 md:grid-cols-[260px_1fr]" key={endpoint}>
+                      <code className="font-mono text-sm text-text-primary">{endpoint}</code>
+                      <p className="text-body leading-6 text-text-secondary">{body}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </section>
+
+          <section className="mt-12 grid gap-4 lg:grid-cols-2">
+            <div className="rounded border border-border bg-surface p-5">
+              <h2 className="text-heading font-semibold text-text-primary">Common response actions</h2>
+              <div className="mt-4 space-y-3">
+                {responseNotes.map(([action, body]) => (
+                  <div className="rounded border border-border bg-bg p-3" key={action}>
+                    <code className="font-mono text-sm text-text-primary">{action}</code>
+                    <p className="mt-1 text-body leading-6 text-text-secondary">{body}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="rounded border border-border bg-surface p-5">
+              <h2 className="text-heading font-semibold text-text-primary">Failure policy</h2>
+              <p className="mt-2 text-body leading-6 text-text-secondary">
+                The API returns structured errors with <code>error</code>, optional <code>message</code>,
+                and <code>request_id</code>. The SDK throws for network and API failures so your
+                automation can choose fail-closed in enforce mode or fail-open in observe mode.
+              </p>
+              <div className="mt-5">
+                <Button href="/docs/reliability" variant="secondary">Read reliability guidance</Button>
+              </div>
+            </div>
+          </section>
+        </section>
+      </main>
+      <SiteFooter />
+    </>
+  );
+}

package/frontend/app/docs/page.tsx

@@ -0,0 +1,296 @@
+import type { Metadata } from 'next';
+import { SiteHeader } from '@/components/marketing/SiteHeader';
+import { SiteFooter } from '@/components/marketing/SiteFooter';
+import { JsonLd } from '@/components/seo/JsonLd';
+import { Button } from '@/components/ui/Button';
+import { docsPageSchema } from '@/lib/seo';
+
+export const metadata: Metadata = {
+  title: 'API Docs',
+  description:
+    'Read the Availsync docs for AI agent coordination, repo claims, observe mode, MCP setup, API reference, and reliability.',
+  alternates: {
+    canonical: '/docs',
+  },
+};
+
+const coreConcepts = [
+  [
+    'Workspace',
+    'The admin account for your team. Humans log in with email and password, manage agents, billing, rules, and logs.',
+  ],
+  [
+    'Agent',
+    'A runtime identity for a coding agent, MCP client, scheduling tool, cron job, or server automation.',
+  ],
+  [
+    'Agent API key',
+    'A one-time secret used by agents only. It is scoped to one agent and should live in MCP, server, or automation env vars.',
+  ],
+  [
+    'Work claim',
+    'A lease on a protected repo or project. It stops another agent from working on the same resource at the same time.',
+  ],
+  [
+    'Enforce vs observe',
+    'Enforce stops conflicting runs. Observe lets the run continue, creates no lease, and records what Availsync would have blocked.',
+  ],
+  [
+    'Availability hold',
+    'A secondary scheduling primitive for reserving a time window before an agent books a meeting, release, focus block, or other scheduled action.',
+  ],
+  [
+    'Activity vs Audit',
+    'Activity shows runtime traffic. Audit shows governance events: holds, conflicts, work claims, releases, and actors.',
+  ],
+];
+
+const flows = [
+  {
+    title: 'Coding agents on the same repo',
+    body: 'Use @availsync/node@alpha or work/run/start before an automation begins. Enforce mode returns skip_run when blocked; observe mode proceeds and records what would have happened.',
+    steps: ['Install SDK', 'Start run', 'Extend lease when claimed', 'Finish run when claimed'],
+  },
+  {
+    title: 'Dashboard setup validation',
+    body: 'Run the dashboard setup test first to confirm the backend flow works, then connect the real Node SDK, public MCP package, or REST client.',
+    steps: ['Run setup test', 'Copy config', 'Connect client', 'Verify Activity'],
+  },
+  {
+    title: 'Scheduling agents before booking',
+    body: 'Secondary flow: ask for availability, preview the conflict, then create a hold only when the slot is safe.',
+    steps: ['Check availability', 'Preview conflict', 'Create hold', 'Release hold'],
+  },
+];
+
+const resourceScopes = [
+  {
+    title: 'Repo-level guardrail',
+    example: 'repo:owner/name',
+    body:
+      'Safest default. Only one active agent can work in the repo at a time, so shared files and context cannot change underneath another guarded run.',
+    bestFor: 'Use for new agents, scheduled automations, deploy work, migrations, and any repo where agents may touch shared files.',
+  },
+  {
+    title: 'Project-level guardrail',
+    example: 'project:homepage',
+    body:
+      'Advanced mode. Different projects can run in parallel, but Availsync only blocks conflicts on the same project key.',
+    bestFor:
+      'Use only when work streams are truly independent. If homepage depends on product-catalog, protect them with the same repo-level resource.',
+  },
+];
+
+const apiSections = [
+  {
+    title: 'Workspace auth',
+    endpoints: ['POST /v1/auth/signup', 'POST /v1/auth/login', 'POST /v1/auth/logout', 'GET /v1/session'],
+    body: 'Used by humans in the dashboard. Sessions are stored in secure httpOnly cookies.',
+  },
+  {
+    title: 'Work coordination',
+    endpoints: ['@availsync/node@alpha', '@availsync/mcp@alpha', 'POST /v1/work/run/start', 'POST /v1/work/run/extend', 'POST /v1/work/run/finish'],
+    body: 'The default runtime path for coding agents and automations that need repo or project guardrails. Use the SDK or MCP package first; use REST directly when you need lower-level control.',
+  },
+  {
+    title: 'Scheduling coordination',
+    endpoints: ['GET /v1/availability', 'POST /v1/conflicts/check', 'POST /v1/holds', 'DELETE /v1/holds/:hold_id'],
+    body: 'Used by agents that also need to check time windows and reserve slots before booking downstream systems.',
+  },
+  {
+    title: 'Activity and diagnostics',
+    endpoints: ['GET /v1/activity', 'POST /v1/activity/usage', 'GET /health'],
+    body: 'Used to confirm real traffic, debug setup, and inspect system health without exposing secrets.',
+  },
+];
+
+const securityNotes = [
+  'Dashboard users authenticate with email and password. Agent API keys are not dashboard logins.',
+  'Raw API keys are shown once after create or rotation, then never returned again.',
+  'Agent API keys are one-time secrets. Store them only in your agent, MCP, or server environment.',
+  'Agent keys are scoped to one agent by default and cannot manage workspace agents.',
+  'Blocked automations should skip with a clear reason, not wait or retry forever.',
+  'Observe-only agents do not create active leases, so they measure risk but do not protect the repo yet.',
+];
+
+export default function DocsPage() {
+  return (
+    <>
+      <JsonLd data={docsPageSchema()} />
+      <SiteHeader />
+      <main className="min-h-screen bg-bg">
+        <section className="mx-auto max-w-6xl px-4 py-16">
+          <p className="text-label uppercase text-text-tertiary">Docs</p>
+          <h1 className="mt-3 max-w-4xl text-5xl font-semibold text-text-primary">
+            Availsync API docs
+          </h1>
+          <p className="mt-5 max-w-3xl text-heading leading-7 text-text-secondary">
+            Availsync is the pre-flight coordination layer your agents check before they claim a
+            repo, edit a project, start a release, run an automation, or book a downstream slot.
+          </p>
+          <p className="mt-4 max-w-3xl text-body leading-6 text-text-primary">
+            Every integrated agent checks in before it acts.
+          </p>
+          <div className="mt-8 flex flex-wrap gap-3">
+            <Button href="/docs/pilot">Pilot in 10 minutes</Button>
+            <Button href="/docs/sdk/node" variant="secondary">
+              Node SDK
+            </Button>
+            <Button href="/docs/quickstart" variant="secondary">
+              MCP setup
+            </Button>
+            <Button href="/docs/api" variant="secondary">
+              API reference
+            </Button>
+            <Button href="/docs/reliability" variant="secondary">
+              Reliability
+            </Button>
+            <Button href="/pricing" variant="secondary">
+              View plans
+            </Button>
+          </div>
+
+          <section className="mt-14">
+            <p className="text-label uppercase text-text-tertiary">Core model</p>
+            <h2 className="mt-2 text-3xl font-semibold text-text-primary">
+              The pieces agents work with
+            </h2>
+            <div className="mt-6 grid gap-4 md:grid-cols-2">
+              {coreConcepts.map(([title, body]) => (
+                <div className="rounded border border-border bg-surface p-5" key={title}>
+                  <h3 className="text-heading font-semibold text-text-primary">{title}</h3>
+                  <p className="mt-2 text-body leading-6 text-text-secondary">{body}</p>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="mt-16">
+            <p className="text-label uppercase text-text-tertiary">Runtime flows</p>
+            <h2 className="mt-2 text-3xl font-semibold text-text-primary">
+              What agents should do before they act
+            </h2>
+            <div className="mt-6 grid gap-4 lg:grid-cols-3">
+              {flows.map((flow) => (
+                <div className="rounded border border-border bg-surface p-5" key={flow.title}>
+                  <h3 className="text-heading font-semibold text-text-primary">{flow.title}</h3>
+                  <p className="mt-2 min-h-24 text-body leading-6 text-text-secondary">{flow.body}</p>
+                  <div className="mt-5 space-y-2">
+                    {flow.steps.map((step, index) => (
+                      <div className="flex items-center gap-2 text-body text-text-secondary" key={step}>
+                        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded border border-border bg-bg font-mono text-label text-text-tertiary">
+                          {index + 1}
+                        </span>
+                        {step}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="mt-16">
+            <p className="text-label uppercase text-text-tertiary">Resource scope</p>
+            <h2 className="mt-2 text-3xl font-semibold text-text-primary">
+              Choose safety or parallelism intentionally
+            </h2>
+            <p className="mt-3 max-w-3xl text-body leading-6 text-text-secondary">
+              Availsync blocks simultaneous work on the same resource. Different resources can run
+              in parallel, so choose resource keys based on how much safety the agent needs.
+            </p>
+            <div className="mt-6 grid gap-4 md:grid-cols-2">
+              {resourceScopes.map((scope) => (
+                <div className="rounded border border-border bg-surface p-5" key={scope.title}>
+                  <h3 className="text-heading font-semibold text-text-primary">{scope.title}</h3>
+                  <code className="mt-3 block rounded border border-border bg-bg px-3 py-2 font-mono text-sm text-text-secondary">
+                    {scope.example}
+                  </code>
+                  <p className="mt-3 text-body leading-6 text-text-secondary">{scope.body}</p>
+                  <p className="mt-3 text-body leading-6 text-text-tertiary">{scope.bestFor}</p>
+                </div>
+              ))}
+            </div>
+            <div className="mt-4 rounded border border-warning/40 bg-warning/10 p-4 text-body leading-6 text-text-secondary">
+              Availsync does not yet infer dependencies between different resources. For example,
+              it will not automatically know that <code>project:homepage</code> depends on{' '}
+              <code>project:product-catalog</code>. Use repo-level scope when that dependency
+              matters during the same run.
+            </div>
+          </section>
+
+          <section className="mt-16">
+            <p className="text-label uppercase text-text-tertiary">API map</p>
+            <h2 className="mt-2 text-3xl font-semibold text-text-primary">
+              Main endpoint groups
+            </h2>
+            <div className="mt-6 grid gap-4 md:grid-cols-2">
+              {apiSections.map((section) => (
+                <div className="rounded border border-border bg-surface p-5" key={section.title}>
+                  <h3 className="text-heading font-semibold text-text-primary">{section.title}</h3>
+                  <p className="mt-2 text-body leading-6 text-text-secondary">{section.body}</p>
+                  <div className="mt-4 space-y-2">
+                    {section.endpoints.map((endpoint) => (
+                      <code
+                        className="block rounded border border-border bg-bg px-3 py-2 font-mono text-sm text-text-secondary"
+                        key={endpoint}
+                      >
+                        {endpoint}
+                      </code>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="mt-16 rounded border border-border bg-surface p-6">
+            <p className="text-label uppercase text-text-tertiary">Plan limits</p>
+            <h2 className="mt-2 text-3xl font-semibold text-text-primary">
+              How usage limits are counted
+            </h2>
+            <div className="mt-5 grid gap-3 text-body leading-6 text-text-secondary md:grid-cols-3">
+              <div className="rounded border border-border bg-bg p-4">
+                A protected resource is each unique <code>(resource_type, resource_key)</code> saved
+                in the workspace. Releasing a claim does not remove the resource.
+              </div>
+              <div className="rounded border border-border bg-bg p-4">
+                An active work claim is a claim with <code>status='active'</code> and{' '}
+                <code>expires_at</code> still in the future.
+              </div>
+              <div className="rounded border border-border bg-bg p-4">
+                On Free, you can create up to 3 agents, but only 1 work claim can be active at the
+                same time.
+              </div>
+            </div>
+          </section>
+
+          <section className="mt-16 grid gap-5 rounded border border-border bg-surface p-6 lg:grid-cols-[1fr_1.2fr]">
+            <div>
+              <p className="text-label uppercase text-text-tertiary">Recommended path</p>
+              <h2 className="mt-2 text-3xl font-semibold text-text-primary">
+                Start with the pilot guide, use Docs as the map
+              </h2>
+              <p className="mt-3 text-body leading-6 text-text-secondary">
+                The shortest proof-of-value path is: run verification, install the Node SDK, use
+                observe mode, then confirm real traffic in Activity. Quickstart keeps MCP, REST,
+                shell, Codex, and OpenClaw examples for teams that need those integration paths.
+              </p>
+              <div className="mt-5">
+                <Button href="/docs/pilot">Open pilot guide</Button>
+              </div>
+            </div>
+            <div className="space-y-3">
+              {securityNotes.map((note) => (
+                <div className="rounded border border-border bg-bg px-4 py-3 text-body leading-6 text-text-secondary" key={note}>
+                  {note}
+                </div>
+              ))}
+            </div>
+          </section>
+        </section>
+      </main>
+      <SiteFooter />
+    </>
+  );
+}

package/frontend/app/docs/pilot/page.tsx

@@ -0,0 +1,127 @@
+import type { Metadata } from 'next';
+import { SiteHeader } from '@/components/marketing/SiteHeader';
+import { SiteFooter } from '@/components/marketing/SiteFooter';
+import { JsonLd } from '@/components/seo/JsonLd';
+import { Button } from '@/components/ui/Button';
+import { pilotPageSchema } from '@/lib/seo';
+
+export const metadata: Metadata = {
+  title: 'Pilot in 10 minutes',
+  description:
+    'Run a self-serve Availsync pilot: verify setup, install the Node SDK, switch to observe mode, and confirm real agent traffic.',
+  alternates: {
+    canonical: '/docs/pilot',
+  },
+};
+
+const steps = [
+  {
+    title: 'Start free',
+    body: 'Create a workspace and agent. The free plan includes 3 agents, 2 protected resources, and 1 active work claim.',
+    cta: 'Create workspace',
+    href: '/signup',
+  },
+  {
+    title: 'Run verification',
+    body: 'Use the dashboard verification flow to see Availsync resolve a real conflict between two agents without touching your repo.',
+    cta: 'Open verification',
+    href: '/app/onboarding/verify',
+  },
+  {
+    title: 'Switch the pilot agent to Observe',
+    body: 'Observe mode lets the automation run normally while Availsync records what it would have blocked.',
+    cta: 'Open agents',
+    href: '/app/agents',
+  },
+  {
+    title: 'Install the Node SDK',
+    body: 'Add @availsync/node@alpha to the automation project and wrap the repo work with withClaim.',
+    cta: 'Read SDK docs',
+    href: '/docs/sdk/node',
+  },
+  {
+    title: 'Run one guarded repo task',
+    body: 'Use resource repo:owner/repo as the safe default. Blocked enforce-mode runs should exit with skip_run.',
+    cta: 'Open quickstart',
+    href: '/docs/quickstart',
+  },
+  {
+    title: 'Confirm value',
+    body: 'Check Activity for real runtime calls and Overview for blocked or would-have-blocked work runs.',
+    cta: 'Open dashboard',
+    href: '/app',
+  },
+];
+
+const successSignals = [
+  'Activity shows client @availsync/node or your MCP/client name.',
+  'Overview shows real API calls, not only setup tests.',
+  'Observe mode shows would-have-blocked runs when conflicts would happen.',
+  'Enforce mode returns skip_run before a second agent touches the same repo.',
+];
+
+export default function PilotPage() {
+  return (
+    <>
+      <JsonLd data={pilotPageSchema()} />
+      <SiteHeader />
+      <main className="min-h-screen bg-bg">
+        <section className="mx-auto max-w-5xl px-4 py-16">
+          <p className="text-label uppercase text-text-tertiary">Pilot guide</p>
+          <h1 className="mt-3 max-w-4xl text-5xl font-semibold text-text-primary">
+            Pilot Availsync in 10 minutes.
+          </h1>
+          <p className="mt-5 max-w-3xl text-heading leading-7 text-text-secondary">
+            This is the self-serve path for first users: verify the product, run in observe mode,
+            then turn on enforcement once the dashboard proves value.
+          </p>
+          <div className="mt-8 flex flex-wrap gap-3">
+            <Button href="/signup">Start free</Button>
+            <Button href="/docs/sdk/node" variant="secondary">
+              Read SDK docs
+            </Button>
+          </div>
+
+          <section className="mt-12 grid gap-4">
+            {steps.map((step, index) => (
+              <div className="grid gap-4 rounded border border-border bg-surface p-5 md:grid-cols-[72px_1fr_auto] md:items-center" key={step.title}>
+                <div className="flex h-12 w-12 items-center justify-center rounded border border-border bg-bg font-mono text-heading text-text-primary">
+                  {index + 1}
+                </div>
+                <div>
+                  <h2 className="text-heading font-semibold text-text-primary">{step.title}</h2>
+                  <p className="mt-1 text-body leading-6 text-text-secondary">{step.body}</p>
+                </div>
+                <Button href={step.href} variant={index === 0 ? 'primary' : 'secondary'}>
+                  {step.cta}
+                </Button>
+              </div>
+            ))}
+          </section>
+
+          <section className="mt-14 rounded border border-border bg-surface p-6">
+            <p className="text-label uppercase text-text-tertiary">Success criteria</p>
+            <h2 className="mt-2 text-3xl font-semibold text-text-primary">What a good pilot looks like</h2>
+            <div className="mt-5 grid gap-3 md:grid-cols-2">
+              {successSignals.map((signal) => (
+                <div className="rounded border border-border bg-bg p-4 text-body leading-6 text-text-secondary" key={signal}>
+                  {signal}
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="mt-14 rounded border border-warning/40 bg-warning/10 p-5">
+            <h2 className="text-heading font-semibold text-text-primary">Scope for the first pilot</h2>
+            <p className="mt-2 text-body leading-6 text-text-secondary">
+              Use repo-level resources for the first pilot. Availsync blocks simultaneous work on
+              the same resource, but it does not yet infer dependencies between separate project
+              keys or sync external calendar providers.
+            </p>
+          </section>
+        </section>
+      </main>
+      <SiteFooter />
+    </>
+  );
+}