availsync 0.1.0

package/frontend/app/app/settings/page.tsx

@@ -0,0 +1,399 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { clearSession, loadSession, type StoredSession } from '@/lib/storage';
+import { getBillingStatus, getBillingPortal, createCheckout, deleteWorkspaceAccount } from '@/lib/api';
+import { billingUpgradesEnabled } from '@/lib/billing';
+import { findPlan } from '@/lib/plans';
+import { Badge } from '@/components/ui/Badge';
+import { useToast } from '@/components/ui/Toast';
+import { Copy } from 'lucide-react';
+import { Suspense } from 'react';
+import { WaitlistDialog } from '@/components/waitlist/WaitlistDialog';
+
+function SettingsContent() {
+  const { toast } = useToast();
+  const searchParams = useSearchParams();
+  const initialTab = searchParams.get('tab') || 'account';
+  const [tab, setTab] = useState(initialTab);
+  const [session, setSession] = useState<StoredSession | null>(null);
+  const [deleteConfirmation, setDeleteConfirmation] = useState('');
+  const [deletingWorkspace, setDeletingWorkspace] = useState(false);
+  const [waitlistPlan, setWaitlistPlan] = useState<'individual' | 'team' | null>(null);
+  const [billing, setBilling] = useState<{
+    plan: 'free' | 'individual' | 'team';
+    subscription_status: string;
+    renewal_date: string | null;
+    cancel_at_period_end: boolean;
+    billing_email: string | null;
+    limits: {
+      agents: number | null;
+      protected_resources: number;
+      active_work_claims: number;
+      api_calls_month: number;
+      activity_retention_days: number;
+    };
+    usage: {
+      agents: number;
+      protected_resources: number;
+      active_work_claims: number;
+      api_calls_month: number;
+      activity_retention_days: number;
+    };
+    upgrade_reasons: Array<{
+      limit_type: string;
+      usage: number;
+      limit: number;
+      state: 'near' | 'reached';
+      upgrade_plan: 'individual' | 'team' | null;
+    }>;
+    agents_used: number;
+    agent_limit: number;
+    stripe_customer_id: boolean;
+    stripe_subscription_id: boolean;
+    billing_upgrades_enabled: boolean;
+  } | null>(null);
+
+  useEffect(() => {
+    const s = loadSession();
+    setSession(s);
+    if (s) {
+      getBillingStatus().then(setBilling).catch(() => {});
+    }
+  }, []);
+
+  useEffect(() => {
+    if (searchParams.get('checkout') === 'success') {
+      toast('Billing updated', 'success');
+    }
+  }, [searchParams, toast]);
+
+  const handleUpgrade = async (plan: 'individual' | 'team') => {
+    if (!session) return;
+    const upgradesEnabled = billing?.billing_upgrades_enabled ?? billingUpgradesEnabled();
+    if (!upgradesEnabled) {
+      setWaitlistPlan(plan);
+      return;
+    }
+
+    try {
+      const result = await createCheckout({ plan, org_id: session.orgId });
+      if (result.url) {
+        window.location.href = result.url;
+      }
+    } catch (err) {
+      toast((err as Error).message, 'error');
+    }
+  };
+
+  const handleManageBilling = async () => {
+    if (!session) return;
+    try {
+      const result = await getBillingPortal();
+      window.location.href = result.url;
+    } catch (err) {
+      toast((err as Error).message, 'error');
+    }
+  };
+
+  const showCopied = (label: string) => {
+    toast(`${label} copied`, 'success');
+  };
+
+  const handleDeleteWorkspace = async () => {
+    if (deleteConfirmation !== 'DELETE') return;
+    if (!window.confirm('This permanently deletes the workspace and cancels any active subscription. Continue?')) {
+      return;
+    }
+
+    setDeletingWorkspace(true);
+    try {
+      await deleteWorkspaceAccount({ confirmation: 'DELETE' });
+      clearSession();
+      window.location.href = '/?workspace=deleted';
+    } catch (err) {
+      toast((err as Error).message, 'error');
+      setDeletingWorkspace(false);
+    }
+  };
+
+  const appUrl = typeof window === 'undefined' ? '' : window.location.origin;
+  const tabs = ['account', 'billing', 'api'];
+  const upgradesEnabled = billing?.billing_upgrades_enabled ?? billingUpgradesEnabled();
+
+  return (
+    <div className="w-full max-w-none p-4 sm:p-6">
+      <h1 className="text-title font-semibold text-text-primary mb-6">Settings</h1>
+
+      {/* Tab bar */}
+      <div className="flex items-center gap-0 border-b border-border mb-6">
+        {tabs.map((t) => (
+          <button
+            key={t}
+            onClick={() => setTab(t)}
+            className={`px-4 py-2 text-body font-medium capitalize transition-colors border-b-2 -mb-px ${
+              tab === t
+                ? 'border-accent text-text-primary'
+                : 'border-transparent text-text-tertiary hover:text-text-secondary'
+            }`}
+          >
+            {t}
+          </button>
+        ))}
+      </div>
+
+      {/* Account tab */}
+      {tab === 'account' && (
+        <div className="space-y-6">
+          <div className="rounded border border-border bg-surface p-4">
+            <label className="block text-label uppercase text-text-tertiary mb-1">Organization ID</label>
+            <div className="font-mono text-body text-text-secondary">{session?.orgId || '-'}</div>
+          </div>
+          <div className="rounded border border-error/30 bg-error/5 p-4">
+            <h3 className="text-heading font-medium text-error mb-1">Danger zone</h3>
+            <p className="text-body leading-6 text-text-secondary">
+              Permanently delete this workspace, revoke all agent API keys, remove runtime data,
+              and cancel any active Stripe subscription immediately.
+            </p>
+            {billing?.stripe_subscription_id && billing.subscription_status !== 'canceled' && (
+              <div className="mt-3 rounded border border-warning/40 bg-warning/10 px-3 py-2 text-body text-warning">
+                This workspace has a Stripe subscription. Deletion will try to cancel it before any data is removed.
+              </div>
+            )}
+            <div className="mt-4 grid gap-3 md:grid-cols-[1fr_auto] md:items-end">
+              <label className="block">
+                <span className="mb-1 block text-label uppercase text-text-tertiary">Type DELETE to confirm</span>
+                <input
+                  value={deleteConfirmation}
+                  onChange={(event) => setDeleteConfirmation(event.target.value)}
+                  className="w-full rounded border border-border bg-bg px-3 py-2 font-mono text-body text-text-primary outline-none focus:border-border-focus"
+                  placeholder="DELETE"
+                  autoComplete="off"
+                />
+              </label>
+              <button
+                onClick={handleDeleteWorkspace}
+                disabled={deleteConfirmation !== 'DELETE' || deletingWorkspace}
+                className="rounded border border-error/40 bg-error/10 px-4 py-2 text-body font-medium text-error transition-colors hover:bg-error/15 disabled:cursor-not-allowed disabled:opacity-40"
+              >
+                {deletingWorkspace ? 'Deleting...' : 'Delete workspace'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Billing tab */}
+      {tab === 'billing' && (
+        <div className="space-y-6">
+          <div className="rounded border border-border bg-surface p-4">
+            <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
+              <div className="flex items-center gap-3">
+                <span className="text-body text-text-secondary">Current plan:</span>
+                <Badge variant={billing?.plan === 'free' ? 'neutral' : 'accent'}>
+                  {billing ? findPlan(billing.plan).name : 'Free'}
+                </Badge>
+                {billing?.subscription_status && (
+                  <Badge variant={billing.subscription_status === 'active' ? 'success' : 'neutral'}>
+                    {billing.subscription_status}
+                  </Badge>
+                )}
+              </div>
+              {billing?.cancel_at_period_end && (
+                <span className="text-body text-warning">Cancels at period end</span>
+              )}
+            </div>
+            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+              <UsageRow label="Agents" used={billing?.usage.agents ?? 0} limit={billing?.limits.agents ?? null} />
+              <UsageRow label="Protected resources" used={billing?.usage.protected_resources ?? 0} limit={billing?.limits.protected_resources ?? 2} />
+              <UsageRow label="Active work claims" used={billing?.usage.active_work_claims ?? 0} limit={billing?.limits.active_work_claims ?? 1} />
+              <UsageRow label="API calls this month" used={billing?.usage.api_calls_month ?? 0} limit={billing?.limits.api_calls_month ?? 1000} />
+            </div>
+            <div className="mt-3 text-body text-text-tertiary">
+              Pilot history target: {billing?.limits.activity_retention_days ?? 7} days
+            </div>
+            {!upgradesEnabled && (
+              <div className="mt-4 rounded border border-accent/30 bg-accent/10 px-3 py-2 text-body text-text-secondary">
+                Paid upgrades are currently waitlist-only. Free workspaces remain available while
+                we onboard early pilots.
+              </div>
+            )}
+            {billing?.renewal_date && (
+              <div className="text-body text-text-tertiary mt-1">
+                Next billing: {new Date(billing.renewal_date).toLocaleDateString()}
+              </div>
+            )}
+            {billing?.upgrade_reasons.length ? (
+              <div className="mt-4 rounded border border-warning/40 bg-warning/10 px-3 py-2 text-body text-warning">
+                {billing.upgrade_reasons[0].state === 'reached' ? 'Limit reached' : 'Approaching plan limit'}:
+                {' '}
+                {billing.upgrade_reasons[0].limit_type.replaceAll('_', ' ')}
+              </div>
+            ) : null}
+          </div>
+
+          {billing?.plan !== 'free' && billing?.stripe_customer_id ? (
+            <button
+              onClick={handleManageBilling}
+              className="rounded bg-surface-raised border border-border px-4 py-2 text-body text-text-primary hover:bg-border transition-colors"
+            >
+              Manage billing &rarr;
+            </button>
+          ) : (
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <PlanCard
+                name="Individual"
+                price={upgradesEnabled ? '$10' : 'Waitlist'}
+                period={upgradesEnabled ? '/mo' : ''}
+                features={['15 agents', 'Priority rules', 'More protected resources']}
+                cta={upgradesEnabled ? 'Upgrade' : 'Join waitlist'}
+                onSelect={() => handleUpgrade('individual')}
+              />
+              <PlanCard
+                name="Team"
+                price={upgradesEnabled ? '$25' : 'Waitlist'}
+                period={upgradesEnabled ? '/mo' : ''}
+                features={['Unlimited agents', 'Single workspace user for now', 'Advanced agent guardrails']}
+                cta={upgradesEnabled ? 'Upgrade' : 'Join waitlist'}
+                onSelect={() => handleUpgrade('team')}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* API tab */}
+      {tab === 'api' && (
+        <div className="space-y-6">
+          <div>
+            <h3 className="text-heading font-medium text-text-primary mb-3">Quick start</h3>
+            <CodeBlock
+              label="Check availability"
+              code={`curl -X GET "${appUrl}/v1/availability?agent_id=YOUR_AGENT_ID&from=NEXT_BUSINESS_DAY_START&to=NEXT_BUSINESS_DAY_END&duration_minutes=30" \\
+  -H "Authorization: Bearer YOUR_API_KEY"`}
+              onCopy={() => showCopied('Quick start')}
+            />
+          </div>
+
+          <div>
+            <h3 className="text-heading font-medium text-text-primary mb-3">MCP config</h3>
+            <CodeBlock
+              label="Claude Desktop config"
+              code={`{
+  "mcpServers": {
+    "availsync": {
+      "command": "npx",
+      "args": ["-y", "@availsync/mcp@alpha"],
+      "env": {
+        "AVAILSYNC_API_URL": "${appUrl}",
+        "AVAILSYNC_AGENT_ID": "YOUR_AGENT_ID",
+        "AVAILSYNC_API_KEY": "YOUR_API_KEY"
+      }
+    }
+  }
+}`}
+              onCopy={() => showCopied('MCP config')}
+            />
+          </div>
+        </div>
+      )}
+      {waitlistPlan && (
+        <WaitlistDialog
+          open
+          plan={waitlistPlan}
+          source="settings"
+          defaultEmail={session?.email || billing?.billing_email || ''}
+          onClose={() => setWaitlistPlan(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+function UsageRow({ label, used, limit }: { label: string; used: number; limit: number | null }) {
+  const pct = limit ? Math.min(100, Math.round((used / limit) * 100)) : 0;
+  return (
+    <div className="rounded border border-border bg-surface-raised p-3">
+      <div className="flex items-center justify-between gap-3 text-body">
+        <span className="text-text-secondary">{label}</span>
+        <span className="text-text-primary">{used.toLocaleString()} / {limit === null ? 'Unlimited' : limit.toLocaleString()}</span>
+      </div>
+      {limit !== null && (
+        <div className="mt-2 h-1.5 rounded bg-border">
+          <div
+            className={`h-1.5 rounded ${pct >= 100 ? 'bg-error' : pct >= 80 ? 'bg-warning' : 'bg-accent'}`}
+            style={{ width: `${pct}%` }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function PlanCard({
+  name,
+  price,
+  period,
+  features,
+  cta,
+  onSelect,
+}: {
+  name: string;
+  price: string;
+  period: string;
+  features: string[];
+  cta: string;
+  onSelect: () => void;
+}) {
+  return (
+    <div className="rounded border border-border bg-surface p-5">
+      <h3 className="text-heading font-medium text-text-primary">{name}</h3>
+      <div className="mt-2 mb-4">
+        <span className="text-title font-semibold text-text-primary">{price}</span>
+        <span className="text-body text-text-tertiary">{period}</span>
+      </div>
+      <ul className="space-y-1.5 mb-4">
+        {features.map((f) => (
+          <li key={f} className="text-body text-text-secondary">{f}</li>
+        ))}
+      </ul>
+      <button
+        onClick={onSelect}
+        className="w-full rounded bg-accent text-white py-2 text-body font-medium hover:bg-accent-hover transition-colors active:scale-[0.98]"
+      >
+        {cta}
+      </button>
+    </div>
+  );
+}
+
+function CodeBlock({ label, code, onCopy }: { label: string; code: string; onCopy: () => void }) {
+  return (
+    <div className="rounded border border-border bg-surface overflow-hidden">
+      <div className="flex items-center justify-between px-4 py-2 border-b border-border">
+        <span className="text-label uppercase text-text-tertiary">{label}</span>
+        <button
+          onClick={() => {
+            navigator.clipboard.writeText(code);
+            onCopy();
+          }}
+          className="text-text-tertiary hover:text-text-secondary transition-colors"
+        >
+          <Copy className="h-3.5 w-3.5" />
+        </button>
+      </div>
+      <pre className="px-4 py-3 text-[12px] font-mono text-text-secondary overflow-x-auto whitespace-pre">
+        {code}
+      </pre>
+    </div>
+  );
+}
+
+export default function SettingsPage() {
+  return (
+    <Suspense>
+      <SettingsContent />
+    </Suspense>
+  );
+}