availsync 0.1.0

package/frontend/app/app/work/page.tsx

@@ -0,0 +1,426 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { CheckCircle2, Play, RefreshCw, ShieldCheck, Trash2 } from 'lucide-react';
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Select } from '@/components/ui/Select';
+import { checkWork, claimWork, extendWorkClaim, listAgents, listWorkClaims, listWorkResources, releaseWorkClaim, restoreSession } from '@/lib/api';
+import { billingUpgradesEnabled } from '@/lib/billing';
+import type { Agent, WorkClaim, WorkResource } from '@/lib/schemas';
+
+function formatTime(value: string) {
+  return new Intl.DateTimeFormat('da-DK', {
+    dateStyle: 'short',
+    timeStyle: 'short',
+  }).format(new Date(value));
+}
+
+function statusVariant(status: string): 'success' | 'warning' | 'error' | 'neutral' | 'accent' {
+  if (status === 'available') return 'success';
+  if (status === 'would_win') return 'accent';
+  if (status === 'would_lose' || status === 'blocked') return 'error';
+  if (status === 'active') return 'success';
+  if (status === 'superseded') return 'warning';
+  return 'neutral';
+}
+
+function isExpiringSoon(claim: WorkClaim) {
+  const seconds = claim.seconds_until_expiry ?? Math.floor((new Date(claim.expires_at).getTime() - Date.now()) / 1000);
+  return seconds > 0 && seconds < 10 * 60;
+}
+
+export default function WorkCoordinationPage() {
+  const [orgId, setOrgId] = useState('');
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [resources, setResources] = useState<WorkResource[]>([]);
+  const [claims, setClaims] = useState<WorkClaim[]>([]);
+  const [releasedClaims, setReleasedClaims] = useState<WorkClaim[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [result, setResult] = useState<{
+    status: 'available' | 'would_win' | 'would_lose';
+    explanation: string;
+    suggested_retry_at: string | null;
+  } | null>(null);
+  const [error, setError] = useState('');
+  const [planLimit, setPlanLimit] = useState<{ message: string; upgrade_plan: string | null } | null>(null);
+  const [form, setForm] = useState({
+    agent_id: '',
+    resource_type: 'repo' as 'project' | 'repo',
+    resource_key: 'arkilstsko/availsync',
+    label: 'Availsync repo',
+    duration_minutes: 45,
+    reason: 'coding-agent work slot',
+  });
+
+  const selectedAgent = useMemo(
+    () => agents.find((agent) => agent.id === form.agent_id),
+    [agents, form.agent_id],
+  );
+
+  async function refresh(currentOrgId = orgId) {
+    if (!currentOrgId) return;
+    const [agentRows, resourceRows, activeRows, releasedRows] = await Promise.all([
+      listAgents(currentOrgId),
+      listWorkResources(),
+      listWorkClaims({ status: 'active', limit: 100 }),
+      listWorkClaims({ status: 'released', limit: 25 }),
+    ]);
+    setAgents(agentRows);
+    setResources(resourceRows);
+    setClaims(activeRows);
+    setReleasedClaims(releasedRows);
+    setForm((current) => ({
+      ...current,
+      agent_id: current.agent_id || agentRows[0]?.id || '',
+    }));
+  }
+
+  useEffect(() => {
+    restoreSession()
+      .then(async (session) => {
+        setOrgId(session.org.id);
+        await refresh(session.org.id);
+      })
+      .catch(() => {
+        window.location.href = '/login';
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  async function runCheck() {
+    setBusy(true);
+    setError('');
+    setPlanLimit(null);
+    try {
+      const response = await checkWork(form);
+      setResult({
+        status: response.status,
+        explanation: response.explanation,
+        suggested_retry_at: response.suggested_retry_at,
+      });
+      await refresh();
+    } catch (err) {
+      capturePlanLimit(err);
+      setError((err as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function runClaim() {
+    setBusy(true);
+    setError('');
+    setPlanLimit(null);
+    try {
+      const response = await claimWork(form);
+      setResult({
+        status: response.status,
+        explanation:
+          response.status === 'would_win'
+            ? 'Claim created and lower-priority work was superseded.'
+            : 'Claim created. This agent may start work.',
+        suggested_retry_at: null,
+      });
+      await refresh();
+    } catch (err) {
+      capturePlanLimit(err);
+      setError((err as Error).message);
+      await refresh();
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function releaseClaim(claimId: string) {
+    setBusy(true);
+    setError('');
+    setPlanLimit(null);
+    try {
+      await releaseWorkClaim(claimId);
+      await refresh();
+    } catch (err) {
+      capturePlanLimit(err);
+      setError((err as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function extendClaim(claimId: string) {
+    setBusy(true);
+    setError('');
+    setPlanLimit(null);
+    try {
+      await extendWorkClaim({ claimId, duration_minutes: 45 });
+      await refresh();
+    } catch (err) {
+      capturePlanLimit(err);
+      setError((err as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function capturePlanLimit(err: unknown) {
+    const body = (err as { body?: { error?: string; message?: string; upgrade_plan?: string | null } }).body;
+    if (body?.error === 'plan_limit_reached') {
+      setPlanLimit({ message: body.message || (err as Error).message, upgrade_plan: body.upgrade_plan ?? null });
+    }
+  }
+
+  return (
+    <div className="w-full max-w-none p-4 sm:p-6">
+      <div className="mb-6">
+        <h1 className="text-title font-semibold text-text-primary">Work Coordination</h1>
+        <p className="mt-1 max-w-2xl text-body text-text-secondary">
+          Stop coding agents from acting on the same selected resource at the same time. Agents check, claim, work, then release.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 xl:grid-cols-[440px_1fr]">
+        <section className="rounded border border-border bg-surface p-4">
+          <div className="mb-4 flex items-center gap-2">
+            <ShieldCheck className="h-4 w-4 text-accent" />
+            <h2 className="text-heading font-medium text-text-primary">Test work claim</h2>
+          </div>
+
+          <div className="mb-4 rounded border border-border bg-bg p-3 text-body leading-6 text-text-secondary">
+            Use repo-level when agents may touch shared files or context. Project-level allows
+            parallel work only for independent streams.
+          </div>
+
+          <div className="space-y-3">
+            <label className="block">
+              <span className="mb-1 block text-label uppercase text-text-tertiary">Agent</span>
+              <Select
+                value={form.agent_id}
+                onChange={(event) => setForm({ ...form, agent_id: event.target.value })}
+              >
+                {agents.map((agent) => (
+                  <option key={agent.id} value={agent.id}>
+                    {agent.name} · priority {agent.priority}
+                  </option>
+                ))}
+              </Select>
+            </label>
+
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-[120px_1fr]">
+              <label className="block">
+                <span className="mb-1 block text-label uppercase text-text-tertiary">Type</span>
+                <Select
+                  value={form.resource_type}
+                  onChange={(event) => setForm({ ...form, resource_type: event.target.value as 'project' | 'repo' })}
+                >
+                  <option value="repo">Repo · safest</option>
+                  <option value="project">Project · advanced</option>
+                </Select>
+                <p className="mt-1 text-label text-text-tertiary">
+                  {form.resource_type === 'repo'
+                    ? 'Safest: one active agent per repo.'
+                    : 'Advanced: allows parallel work for independent streams.'}
+                </p>
+              </label>
+              <label className="block">
+                <span className="mb-1 block text-label uppercase text-text-tertiary">Resource key</span>
+                <Input
+                  value={form.resource_key}
+                  onChange={(event) => setForm({ ...form, resource_key: event.target.value })}
+                  placeholder="owner/repo"
+                />
+              </label>
+            </div>
+
+            <label className="block">
+              <span className="mb-1 block text-label uppercase text-text-tertiary">Label</span>
+              <Input
+                value={form.label}
+                onChange={(event) => setForm({ ...form, label: event.target.value })}
+                placeholder="Availsync repo"
+              />
+            </label>
+
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-[120px_1fr]">
+              <label className="block">
+                <span className="mb-1 block text-label uppercase text-text-tertiary">Minutes</span>
+                <Input
+                  type="number"
+                  min={1}
+                  max={1440}
+                  value={form.duration_minutes}
+                  onChange={(event) => setForm({ ...form, duration_minutes: Number(event.target.value) })}
+                />
+              </label>
+              <label className="block">
+                <span className="mb-1 block text-label uppercase text-text-tertiary">Reason</span>
+                <Input
+                  value={form.reason}
+                  onChange={(event) => setForm({ ...form, reason: event.target.value })}
+                />
+              </label>
+            </div>
+
+            <div className="flex gap-2 pt-1">
+              <Button type="button" variant="secondary" disabled={busy || !form.agent_id} onClick={runCheck}>
+                <CheckCircle2 className="h-4 w-4" />
+                Check
+              </Button>
+              <Button type="button" disabled={busy || !form.agent_id} onClick={runClaim}>
+                <Play className="h-4 w-4" />
+                Claim
+              </Button>
+            </div>
+          </div>
+
+          {result && (
+            <div className="mt-4 rounded border border-border bg-bg p-3">
+              <Badge variant={statusVariant(result.status)}>{result.status.replace('_', ' ')}</Badge>
+              <p className="mt-2 text-body text-text-secondary">{result.explanation}</p>
+              {result.suggested_retry_at && (
+                <p className="mt-1 text-label text-text-tertiary">
+                  Retry after {formatTime(result.suggested_retry_at)}
+                </p>
+              )}
+            </div>
+          )}
+
+          {error && (
+            <div className="mt-4 rounded border border-error/30 bg-error/10 p-3 text-body text-error">
+              {error}
+              {planLimit?.upgrade_plan && (
+                <a
+                  className="mt-2 block text-accent hover:text-accent-hover"
+                  href={billingUpgradesEnabled() ? `/checkout?plan=${planLimit.upgrade_plan}` : '/app/settings?tab=billing'}
+                >
+                  {billingUpgradesEnabled() ? `Upgrade to ${planLimit.upgrade_plan}` : 'Join paid plan waitlist'}
+                </a>
+              )}
+            </div>
+          )}
+        </section>
+
+        <div className="space-y-4">
+          <section className="rounded border border-border bg-surface">
+            <div className="border-b border-border px-4 py-3">
+              <h2 className="text-heading font-medium text-text-primary">Active work claims</h2>
+            </div>
+            {loading || claims.length === 0 ? (
+              <p className="p-4 text-body text-text-tertiary">
+                {loading ? 'Loading claims...' : 'No active work claims.'}
+              </p>
+            ) : (
+              <div className="overflow-x-auto dark-scroll">
+              <table className="w-full min-w-[920px]">
+                <thead>
+                  <tr className="border-b border-border text-label uppercase text-text-tertiary">
+                    <th className="px-4 py-2 text-left font-medium">Resource</th>
+                    <th className="px-4 py-2 text-left font-medium">Agent</th>
+                    <th className="px-4 py-2 text-left font-medium">Until</th>
+                    <th className="px-4 py-2 text-left font-medium">Lease</th>
+                    <th className="px-4 py-2 text-left font-medium">Status</th>
+                    <th className="px-4 py-2 text-right font-medium">Action</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {claims.map((claim) => (
+                    <tr key={claim.id} className={`border-b border-border last:border-b-0 ${isExpiringSoon(claim) ? 'bg-warning/5' : ''}`}>
+                      <td className="px-4 py-2">
+                        <div className="text-body text-text-primary">{claim.resource_label || claim.resource_key}</div>
+                        <div className="font-mono text-label text-text-tertiary">{claim.resource_key}</div>
+                      </td>
+                      <td className="px-4 py-2 text-body text-text-secondary">
+                        {claim.agent_name || selectedAgent?.name || claim.agent_id.slice(0, 8)}
+                      </td>
+                      <td className="px-4 py-2 text-body text-text-secondary">{formatTime(claim.end_at)}</td>
+                      <td className="px-4 py-2">
+                        <div className="text-body text-text-secondary">
+                          Expires {formatTime(claim.expires_at)}
+                        </div>
+                        <div className={isExpiringSoon(claim) ? 'text-label text-warning' : 'text-label text-text-tertiary'}>
+                          renewed {claim.renewal_count}x · last {formatTime(claim.last_renewed_at)}
+                        </div>
+                      </td>
+                      <td className="px-4 py-2">
+                        <Badge variant={statusVariant(claim.status)}>{claim.status}</Badge>
+                      </td>
+                      <td className="px-4 py-2 text-right">
+                        <button
+                          type="button"
+                          onClick={() => extendClaim(claim.id)}
+                          disabled={busy}
+                          className="mr-1 inline-flex h-8 w-8 items-center justify-center rounded text-text-tertiary hover:bg-surface-raised hover:text-text-primary disabled:opacity-50"
+                          title="Extend 45 minutes"
+                        >
+                          <RefreshCw className="h-4 w-4" />
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => releaseClaim(claim.id)}
+                          disabled={busy}
+                          className="inline-flex h-8 w-8 items-center justify-center rounded text-text-tertiary hover:bg-surface-raised hover:text-text-primary disabled:opacity-50"
+                          title="Release"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              </div>
+            )}
+          </section>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            <section className="rounded border border-border bg-surface">
+              <div className="border-b border-border px-4 py-3">
+                <h2 className="text-heading font-medium text-text-primary">Protected resources</h2>
+              </div>
+              {resources.length === 0 ? (
+                <p className="p-4 text-body text-text-tertiary">Create a claim to register the first resource.</p>
+              ) : (
+                <div className="divide-y divide-border">
+                  {resources.map((resource) => (
+                    <div key={resource.id || resource.resource_key} className="px-4 py-3">
+                      <div className="flex items-center justify-between gap-3">
+                        <div>
+                          <div className="text-body text-text-primary">{resource.label}</div>
+                          <div className="font-mono text-label text-text-tertiary">{resource.resource_key}</div>
+                        </div>
+                        <Badge variant={(resource.active_claims_count ?? 0) > 0 ? 'success' : 'neutral'}>
+                          {resource.active_claims_count ?? 0} active
+                        </Badge>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </section>
+
+            <section className="rounded border border-border bg-surface">
+              <div className="border-b border-border px-4 py-3">
+                <h2 className="text-heading font-medium text-text-primary">Recently released</h2>
+              </div>
+              {releasedClaims.length === 0 ? (
+                <p className="p-4 text-body text-text-tertiary">Released work slots will appear here.</p>
+              ) : (
+                <div className="divide-y divide-border">
+                  {releasedClaims.map((claim) => (
+                    <div key={claim.id} className="px-4 py-3">
+                      <div className="text-body text-text-primary">{claim.resource_label || claim.resource_key}</div>
+                      <div className="text-label text-text-tertiary">
+                        {claim.agent_name || claim.agent_id.slice(0, 8)} · released · {formatTime(claim.created_at)}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/frontend/app/changelog/page.tsx

@@ -0,0 +1,93 @@
+import type { Metadata } from 'next';
+import { SiteHeader } from '@/components/marketing/SiteHeader';
+import { SiteFooter } from '@/components/marketing/SiteFooter';
+import { JsonLd } from '@/components/seo/JsonLd';
+import { webPageSchema } from '@/lib/seo';
+
+export const metadata: Metadata = {
+  title: 'Changelog',
+  description: 'Availsync product changelog for Node SDK alpha, observe mode, onboarding verification, and work guardrails.',
+  alternates: {
+    canonical: '/changelog',
+  },
+};
+
+const entries = [
+  {
+    date: '2026-05-14',
+    title: 'Paid plan waitlist',
+    items: [
+      'Paid Individual and Team plans are waitlist-only during the private pilot.',
+      'Checkout stays behind a billing-upgrades flag so paid plans can be enabled quickly later.',
+      'Free workspaces remain available for verification, SDK tests, and observe-mode pilots.',
+    ],
+  },
+  {
+    date: '2026-05-13',
+    title: 'Node SDK alpha',
+    items: [
+      '@availsync/node@alpha published for guarded repo automations.',
+      'withClaim helper wraps start, extend, finish, skip_run, and observe-mode metadata.',
+      'SDK docs and pilot guide added for first self-serve integrations.',
+    ],
+  },
+  {
+    date: '2026-05-13',
+    title: 'Observe-only pilot mode',
+    items: [
+      'Agents can run in enforce or observe mode.',
+      'Observe mode records would-have-blocked runs without creating active leases.',
+      'Overview value metrics separate real prevented conflicts from shadow-only signals.',
+    ],
+  },
+  {
+    date: '2026-05-13',
+    title: 'Onboarding verification',
+    items: [
+      'Dashboard verification shows Availsync resolving a real conflict between two agents.',
+      'Verification marks the workspace as verified and cleans up temporary resources.',
+      'Activity and audit records distinguish setup traffic from production traffic.',
+    ],
+  },
+  {
+    date: '2026-05-12',
+    title: 'Work guardrails',
+    items: [
+      'Repo and project work claims protect resources before coding agents act.',
+      'Runtime APIs support start, extend, finish, idempotency, and clean skip_run responses.',
+      'Agent connection, activity, billing, admin, and health views added around the core guardrail flow.',
+    ],
+  },
+];
+
+export default function ChangelogPage() {
+  return (
+    <>
+      <JsonLd data={webPageSchema('/changelog', 'Availsync changelog', metadata.description as string)} />
+      <SiteHeader />
+      <main className="min-h-screen bg-bg">
+        <section className="mx-auto max-w-4xl px-4 py-16">
+          <p className="text-label uppercase text-text-tertiary">Changelog</p>
+          <h1 className="mt-3 text-5xl font-semibold text-text-primary">Product updates.</h1>
+          <p className="mt-5 text-heading leading-7 text-text-secondary">
+            The current focus is first-pilot readiness for coding-agent repo guardrails.
+          </p>
+          <div className="mt-10 space-y-5">
+            {entries.map((entry) => (
+              <article className="rounded border border-border bg-surface p-5" key={`${entry.date}-${entry.title}`}>
+                <p className="font-mono text-sm text-text-tertiary">{entry.date}</p>
+                <h2 className="mt-2 text-heading font-semibold text-text-primary">{entry.title}</h2>
+                <ul className="mt-3 space-y-2 text-body leading-6 text-text-secondary">
+                  {entry.items.map((item) => (
+                    <li key={item}>- {item}</li>
+                  ))}
+                </ul>
+              </article>
+            ))}
+          </div>
+        </section>
+      </main>
+      <SiteFooter />
+    </>
+  );
+}

package/frontend/app/checkout/page.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from 'next';
+import { Suspense } from 'react';
+import { SiteHeader } from '@/components/marketing/SiteHeader';
+import { CheckoutClient } from '@/components/checkout/CheckoutClient';
+
+export const metadata: Metadata = {
+  title: 'Checkout',
+  robots: {
+    index: false,
+    follow: false,
+  },
+};
+
+export default function CheckoutPage() {
+  return (
+    <>
+      <SiteHeader />
+      <main className="bg-bg">
+        <Suspense fallback={<p className="mx-auto max-w-xl px-4 py-20 text-text-secondary">Loading checkout...</p>}>
+          <CheckoutClient />
+        </Suspense>
+      </main>
+    </>
+  );
+}