availsync 0.1.0

package/frontend/app/app/holds/page.tsx

@@ -0,0 +1,262 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { loadSession, type StoredSession } from '@/lib/storage';
+import { listAgents, listHolds, createHold, releaseHold } from '@/lib/api';
+import { Badge } from '@/components/ui/Badge';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { SkeletonRow } from '@/components/ui/Skeleton';
+import { useToast } from '@/components/ui/Toast';
+import { CalendarClock, Plus, X } from 'lucide-react';
+import { toLocalInputValue } from '@/lib/format';
+import type { Agent } from '@/lib/schemas';
+
+type HoldItem = {
+  id: string;
+  agent_id: string;
+  start_at: string;
+  end_at: string;
+  reason?: string;
+  status: string;
+  created_at: string;
+};
+
+export default function HoldsPage() {
+  const { toast } = useToast();
+  const [session, setSession] = useState<StoredSession | null>(null);
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [selectedAgent, setSelectedAgent] = useState('');
+  const [holds, setHolds] = useState<HoldItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [form, setForm] = useState({
+    start_at: toLocalInputValue(new Date(Date.now() + 86400000)),
+    end_at: toLocalInputValue(new Date(Date.now() + 86400000 + 1800000)),
+    reason: '',
+  });
+  const [creating, setCreating] = useState(false);
+
+  const fetchHolds = () => {
+    const s = loadSession();
+    setSession(s);
+    if (s) {
+      Promise.all([
+        listAgents(s.orgId),
+        listHolds({ agent_id: selectedAgent || undefined }),
+      ])
+        .then(([agentRows, holdRows]) => {
+          setAgents(agentRows);
+          if (!selectedAgent && agentRows.length > 0) {
+            setSelectedAgent(agentRows[0].id);
+          }
+          setHolds(holdRows as unknown as HoldItem[]);
+          setLoading(false);
+        })
+        .catch(() => setLoading(false));
+    } else {
+      setLoading(false);
+    }
+  };
+
+  const fetchHoldsOnly = () => {
+    if (session) {
+      listHolds({ agent_id: selectedAgent || undefined })
+        .then((data) => {
+          setHolds(data as unknown as HoldItem[]);
+          setLoading(false);
+        })
+        .catch(() => setLoading(false));
+    }
+  };
+
+  useEffect(() => { fetchHolds(); }, []);
+  useEffect(() => {
+    if (session) fetchHoldsOnly();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedAgent]);
+
+  const handleCreate = async () => {
+    if (!session || !selectedAgent) return;
+    setCreating(true);
+    try {
+      await createHold({
+        agent_id: selectedAgent,
+        start_at: new Date(form.start_at).toISOString(),
+        end_at: new Date(form.end_at).toISOString(),
+        reason: form.reason || undefined,
+      });
+      toast('Hold created', 'success');
+      setShowForm(false);
+      fetchHolds();
+    } catch (err) {
+      toast((err as Error).message, 'error');
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleRelease = async (holdId: string) => {
+    if (!session) return;
+    try {
+      await releaseHold(holdId);
+      toast('Hold released', 'success');
+      fetchHolds();
+    } catch (err) {
+      toast((err as Error).message, 'error');
+    }
+  };
+
+  const statusVariant: Record<string, 'success' | 'warning' | 'neutral'> = {
+    confirmed: 'success',
+    superseded: 'warning',
+    released: 'neutral',
+  };
+
+  return (
+    <div className="w-full max-w-none p-4 sm:p-6">
+      <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
+        <h1 className="text-title font-semibold text-text-primary">Holds</h1>
+        <div className="flex flex-wrap items-center gap-2">
+          <select
+            value={selectedAgent}
+            onChange={(e) => setSelectedAgent(e.target.value)}
+            className="rounded bg-surface border border-border px-3 py-1.5 text-body text-text-primary outline-none focus:border-border-focus"
+          >
+            <option value="">All agents</option>
+            {agents.map((agent) => (
+              <option key={agent.id} value={agent.id}>{agent.name}</option>
+            ))}
+          </select>
+          <button
+            onClick={() => setShowForm(!showForm)}
+            className="flex items-center gap-1.5 rounded bg-accent text-white px-3 py-1.5 text-body font-medium hover:bg-accent-hover transition-colors active:scale-[0.98]"
+          >
+            <Plus className="h-3.5 w-3.5" />
+            New hold
+          </button>
+        </div>
+      </div>
+
+      {showForm && (
+        <div className="rounded border border-border bg-surface p-4 mb-6 space-y-3">
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <div>
+              <label className="block text-label uppercase text-text-tertiary mb-1">Start</label>
+              <input
+                type="datetime-local"
+                value={form.start_at}
+                onChange={(e) => setForm({ ...form, start_at: e.target.value })}
+                className="w-full rounded bg-bg border border-border px-3 py-1.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">End</label>
+              <input
+                type="datetime-local"
+                value={form.end_at}
+                onChange={(e) => setForm({ ...form, end_at: e.target.value })}
+                className="w-full rounded bg-bg border border-border px-3 py-1.5 text-body text-text-primary outline-none focus:border-border-focus"
+              />
+            </div>
+          </div>
+          <div>
+            <label className="block text-label uppercase text-text-tertiary mb-1">Agent</label>
+            <select
+              value={selectedAgent}
+              onChange={(e) => setSelectedAgent(e.target.value)}
+              className="w-full rounded bg-bg border border-border px-3 py-1.5 text-body text-text-primary outline-none focus:border-border-focus"
+            >
+              {agents.map((agent) => (
+                <option key={agent.id} value={agent.id}>{agent.name}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-label uppercase text-text-tertiary mb-1">Reason</label>
+            <input
+              value={form.reason}
+              onChange={(e) => setForm({ ...form, reason: e.target.value })}
+              className="w-full rounded bg-bg border border-border px-3 py-1.5 text-body text-text-primary outline-none focus:border-border-focus"
+              placeholder="Optional"
+            />
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={handleCreate}
+              disabled={creating}
+              className="rounded bg-accent text-white px-3 py-1.5 text-body font-medium hover:bg-accent-hover transition-colors disabled:opacity-40"
+            >
+              {creating ? 'Creating...' : 'Create hold'}
+            </button>
+            <button
+              onClick={() => setShowForm(false)}
+              className="rounded px-3 py-1.5 text-body text-text-secondary hover:bg-surface-raised transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {loading ? (
+        <div className="overflow-hidden rounded border border-border">
+          {Array.from({ length: 3 }).map((_, i) => <SkeletonRow key={i} />)}
+        </div>
+      ) : holds.length === 0 ? (
+        <EmptyState
+          icon={CalendarClock}
+          title="No holds"
+          description="Holds are time windows reserved by your agents."
+          action={
+            <button
+              onClick={() => setShowForm(true)}
+              className="rounded bg-accent text-white px-3 py-1.5 text-body font-medium hover:bg-accent-hover transition-colors"
+            >
+              Create hold
+            </button>
+          }
+        />
+      ) : (
+        <div className="overflow-x-auto rounded border border-border dark-scroll">
+          <table className="w-full min-w-[820px]">
+            <thead>
+              <tr className="border-b border-border bg-surface text-label uppercase text-text-tertiary">
+                <th className="text-left px-4 py-2 font-medium">Start</th>
+                <th className="text-left px-4 py-2 font-medium">End</th>
+                <th className="text-left px-4 py-2 font-medium">Reason</th>
+                <th className="text-left px-4 py-2 font-medium">Status</th>
+                <th className="text-left px-4 py-2 font-medium"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {holds.map((hold) => (
+                <tr key={hold.id} className="border-b border-border h-9 hover:bg-surface-raised transition-colors duration-150">
+                  <td className="px-4 font-mono text-body text-text-secondary">
+                    {new Date(hold.start_at).toLocaleString()}
+                  </td>
+                  <td className="px-4 font-mono text-body text-text-secondary">
+                    {new Date(hold.end_at).toLocaleString()}
+                  </td>
+                  <td className="px-4 text-body text-text-secondary">{hold.reason || '-'}</td>
+                  <td className="px-4">
+                    <Badge variant={statusVariant[hold.status] || 'neutral'}>{hold.status}</Badge>
+                  </td>
+                  <td className="px-4">
+                    {hold.status === 'confirmed' && (
+                      <button
+                        onClick={() => handleRelease(hold.id)}
+                        className="text-body text-error hover:text-error/80 transition-colors"
+                      >
+                        Release
+                      </button>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

package/frontend/app/app/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import { AppShell } from '@/components/dashboard/AppShell';
+import { ToastProvider } from '@/components/ui/Toast';
+
+export const metadata: Metadata = {
+  title: 'Dashboard',
+  robots: {
+    index: false,
+    follow: false,
+  },
+};
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <ToastProvider>
+      <AppShell>{children}</AppShell>
+    </ToastProvider>
+  );
+}

package/frontend/app/app/onboarding/page.tsx

@@ -0,0 +1,10 @@
+import { Suspense } from 'react';
+import { OnboardingClient } from '@/components/onboarding/OnboardingClient';
+
+export default function OnboardingPage() {
+  return (
+    <Suspense fallback={<main className="min-h-screen bg-bg" />}>
+      <OnboardingClient />
+    </Suspense>
+  );
+}

package/frontend/app/app/onboarding/verify/page.tsx

@@ -0,0 +1,309 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { AlertTriangle, Check, Copy, FlaskConical, Loader2, Users } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Badge } from '@/components/ui/Badge';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Skeleton } from '@/components/ui/Skeleton';
+import { listAgents, restoreSession, verifyOnboarding, type OnboardingVerifyResult } from '@/lib/api';
+import { saveSession } from '@/lib/storage';
+import type { Agent } from '@/lib/schemas';
+
+const progressRows = ['Sending claim from first agent', 'Sending claim from second agent', 'Resolving conflict'];
+
+function isoMinute(value: string) {
+  return new Date(value).toISOString().slice(0, 19).replace('T', ' ');
+}
+
+function agentTypeLabel(value: string) {
+  return value.replaceAll('_', ' ');
+}
+
+export default function VerifyOnboardingPage() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(true);
+  const [orgId, setOrgId] = useState('');
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [agentAId, setAgentAId] = useState('');
+  const [agentBId, setAgentBId] = useState('');
+  const [running, setRunning] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [result, setResult] = useState<OnboardingVerifyResult | null>(null);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    restoreSession()
+      .then(async (session) => {
+        saveSession({ orgId: session.org.id, userId: session.user.id, email: session.user.email });
+        setOrgId(session.org.id);
+        const rows = await listAgents(session.org.id);
+        setAgents(rows);
+        setAgentAId(rows[0]?.id ?? '');
+        setAgentBId(rows[1]?.id ?? '');
+      })
+      .catch(() => router.push('/login'))
+      .finally(() => setLoading(false));
+  }, [router]);
+
+  const selectedA = agents.find((agent) => agent.id === agentAId);
+  const selectedB = agents.find((agent) => agent.id === agentBId);
+  const canRun = Boolean(orgId && selectedA && selectedB && selectedA.id !== selectedB.id);
+
+  const curlExample = useMemo(() => {
+    if (!result) return '';
+    const appUrl = typeof window === 'undefined' ? 'https://availsync.dev' : window.location.origin;
+    return `RESOURCE_KEY="${result.resource_key}"
+START_AT="$(date -u +"%Y-%m-%dT%H:%M:%SZ")"
+
+curl -s -X POST "${appUrl}/v1/work/claim" \\
+  -H "Authorization: Bearer AGENT_A_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '{"agent_id":"${result.winner.agent_id}","resource_type":"project","resource_key":"'"$RESOURCE_KEY"'","start_at":"'"$START_AT"'","duration_minutes":5}'
+
+curl -s -X POST "${appUrl}/v1/work/claim" \\
+  -H "Authorization: Bearer AGENT_B_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '{"agent_id":"${result.loser.agent_id}","resource_type":"project","resource_key":"'"$RESOURCE_KEY"'","start_at":"'"$START_AT"'","duration_minutes":5}'`;
+  }, [result]);
+
+  const runVerification = async () => {
+    if (!canRun) return;
+    setRunning(true);
+    setError('');
+    setResult(null);
+    setProgress(0);
+    const timers = [
+      window.setTimeout(() => setProgress(1), 120),
+      window.setTimeout(() => setProgress(2), 420),
+      window.setTimeout(() => setProgress(3), 720),
+    ];
+    try {
+      const response = await verifyOnboarding({ agent_a_id: agentAId, agent_b_id: agentBId });
+      setProgress(3);
+      setResult(response);
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      timers.forEach((timer) => window.clearTimeout(timer));
+      setRunning(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="w-full max-w-none p-4 sm:p-6">
+        <Skeleton className="mb-4 h-8 w-64" />
+        <Skeleton className="mb-6 h-4 w-96" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  if (agents.length < 2) {
+    return (
+      <div className="w-full max-w-none p-4 sm:p-6">
+        <EmptyState
+          icon={Users}
+          title="Create one more agent to run verification"
+          description="The verification test needs two agents so Availsync can resolve a real conflict between them."
+          action={<Button href="/app/agents">Open agents</Button>}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full max-w-none p-4 sm:p-6">
+      <div className="mb-8">
+        <p className="text-label uppercase text-text-tertiary">Onboarding</p>
+        <h1 className="mt-2 text-title font-semibold text-text-primary">Verify your integration</h1>
+        <p className="mt-2 max-w-2xl text-body leading-6 text-text-secondary">
+          We&apos;ll send two claim requests from your agents to a temporary protected repo-style
+          resource. Availsync will pick a winner and block the overlapping run. No real data is touched.
+        </p>
+      </div>
+
+      <div className="mb-6 rounded border border-border bg-surface p-5">
+        <div className="grid gap-3 md:grid-cols-[1fr_1fr_auto] md:items-end">
+          <div>
+            <label className="mb-1 block text-label uppercase text-text-tertiary">First agent</label>
+            <select
+              value={agentAId}
+              onChange={(event) => setAgentAId(event.target.value)}
+              className="w-full rounded border border-border bg-bg px-3 py-2 text-body text-text-primary outline-none focus:border-border-focus"
+            >
+              {agents.map((agent) => (
+                <option key={agent.id} value={agent.id}>
+                  {agent.name}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="mb-1 block text-label uppercase text-text-tertiary">Second agent</label>
+            <select
+              value={agentBId}
+              onChange={(event) => setAgentBId(event.target.value)}
+              className="w-full rounded border border-border bg-bg px-3 py-2 text-body text-text-primary outline-none focus:border-border-focus"
+            >
+              {agents.map((agent) => (
+                <option key={agent.id} value={agent.id}>
+                  {agent.name}
+                </option>
+              ))}
+            </select>
+          </div>
+          <Button disabled={!canRun || running} onClick={runVerification}>
+            {running ? <Loader2 className="h-4 w-4 animate-spin" /> : <FlaskConical className="h-4 w-4" />}
+            {running ? 'Running...' : 'Run verification'}
+          </Button>
+        </div>
+        {selectedA?.id === selectedB?.id && (
+          <p className="mt-3 text-body text-error">Pick two different agents.</p>
+        )}
+      </div>
+
+      {(running || progress > 0) && !result && !error && (
+        <div className="mb-6 rounded border border-border bg-surface p-5">
+          <h2 className="mb-4 text-heading font-medium text-text-primary">Running verification</h2>
+          <div className="space-y-3">
+            {progressRows.map((row, index) => {
+              const done = progress > index;
+              return (
+                <div className="flex items-center justify-between rounded border border-border bg-bg px-3 py-2" key={row}>
+                  <span className="text-body text-text-secondary">{row}</span>
+                  <span className="flex items-center gap-2 font-mono text-[12px] text-text-tertiary">
+                    {done ? <Check className="h-4 w-4 text-success" /> : <Loader2 className="h-4 w-4 animate-spin" />}
+                    {new Date().toISOString().slice(11, 19)}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {error && (
+        <div className="mb-6 rounded border border-error/40 bg-error/10 p-4 text-body text-error">
+          {error}
+          <div className="mt-3">
+            <Button variant="secondary" onClick={runVerification}>Try again</Button>
+          </div>
+        </div>
+      )}
+
+      {result && (
+        <div className="space-y-6">
+          <div className="rounded border border-success/40 bg-success/10 p-5">
+            <h2 className="text-heading font-semibold text-success">
+              Availsync prevented a conflict in {result.duration_ms}ms
+            </h2>
+            <p className="mt-1 text-body text-text-secondary">
+              Workspace verified at {isoMinute(result.verified_at)}.
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <ResultCard title="Winner" variant="success" item={result.winner} />
+            <ResultCard title="Blocked" variant="error" item={result.loser} />
+          </div>
+
+          <div className="rounded border border-border bg-surface p-5">
+            <div className="mb-2 flex items-center gap-2">
+              <Badge variant="accent">{result.rule_applied}</Badge>
+              <h3 className="text-heading font-medium text-text-primary">Rule applied</h3>
+            </div>
+            <p className="text-body leading-6 text-text-secondary">{result.rule_explanation}</p>
+          </div>
+
+          {result.tie_warning && (
+            <div className="rounded border border-warning/40 bg-warning/10 p-4 text-body leading-6 text-warning">
+              <div className="mb-2 flex items-center gap-2 font-medium">
+                <AlertTriangle className="h-4 w-4" />
+                Tie warning
+              </div>
+              {result.tie_warning}{' '}
+              <a className="underline" href="/app/agents">
+                Update agent priority
+              </a>
+            </div>
+          )}
+
+          <div className="rounded border border-border bg-surface p-5">
+            <h3 className="text-heading font-medium text-text-primary">What just happened?</h3>
+            <div className="mt-3 grid gap-2 text-body text-text-secondary">
+              <p>1. Availsync created a temporary protected resource only for this verification run.</p>
+              <p>2. One agent claimed the protected resource and the second agent was blocked by the same conflict rules your real agents use.</p>
+              <p>3. The temporary claim and resource were cleaned up, while the audit events remain.</p>
+            </div>
+          </div>
+
+          <div className="rounded border border-border bg-surface p-5">
+            <div className="mb-3 flex items-center justify-between gap-3">
+              <div>
+                <h3 className="text-heading font-medium text-text-primary">Want to do this from your own code?</h3>
+                <p className="mt-1 text-body text-text-secondary">
+                  The dashboard demo runs the expected winner first, then proves the second agent is blocked by the
+                  same conflict engine.
+                </p>
+              </div>
+              <button
+                className="rounded border border-border p-2 text-text-tertiary hover:text-text-secondary"
+                onClick={() => navigator.clipboard.writeText(curlExample)}
+                title="Copy curl example"
+              >
+                <Copy className="h-4 w-4" />
+              </button>
+            </div>
+            <pre className="max-h-72 overflow-auto rounded border border-border bg-bg p-4 text-[11px] font-mono leading-5 text-text-secondary whitespace-pre-wrap">
+              {curlExample}
+            </pre>
+          </div>
+
+          <Button href="/app">Continue to dashboard</Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ResultCard({
+  title,
+  variant,
+  item,
+}: {
+  title: string;
+  variant: 'success' | 'error';
+  item: OnboardingVerifyResult['winner'] | OnboardingVerifyResult['loser'];
+}) {
+  return (
+    <div className={`rounded border bg-surface p-5 ${variant === 'success' ? 'border-success/50' : 'border-error/50'}`}>
+      <div className="mb-3 flex items-center justify-between">
+        <h3 className="text-heading font-semibold text-text-primary">{item.agent_name}</h3>
+        <Badge variant={variant}>{title}</Badge>
+      </div>
+      <div className="space-y-2 text-body text-text-secondary">
+        <div className="flex justify-between gap-3">
+          <span>Type</span>
+          <Badge variant="neutral">{agentTypeLabel(item.agent_type)}</Badge>
+        </div>
+        <div className="flex justify-between gap-3">
+          <span>Priority</span>
+          <span className="font-mono">{item.priority}</span>
+        </div>
+        <div className="flex justify-between gap-3">
+          <span>{item.outcome === 'claimed' ? 'claim_id' : 'retry_after'}</span>
+          <span className="max-w-52 truncate font-mono text-[12px]">
+            {item.outcome === 'claimed' ? item.claim_id : item.retry_after ? isoMinute(item.retry_after) : '-'}
+          </span>
+        </div>
+        <div className="flex justify-between gap-3">
+          <span>Timestamp</span>
+          <span className="font-mono text-[12px]">{isoMinute(item.completed_at)}</span>
+        </div>
+      </div>
+    </div>
+  );
+}