availsync 0.1.0

package/frontend/components/dashboard/AppShell.tsx

@@ -0,0 +1,291 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { Activity, CalendarClock, FileText, GitBranch, Home, Settings, Users } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { clearSession } from '@/lib/storage';
+import { createSupportTicket, getBillingStatus, logoutWorkspace, restoreSession } from '@/lib/api';
+import { billingUpgradesEnabled } from '@/lib/billing';
+import { useToast } from '@/components/ui/Toast';
+import { AvailsyncLogo } from '@/components/brand/AvailsyncLogo';
+
+const links = [
+  { href: '/app', label: 'Overview', icon: Home },
+  { href: '/app/agents', label: 'Agents', icon: Users },
+  { href: '/app/availability', label: 'Availability', icon: CalendarClock },
+  { href: '/app/work', label: 'Work Claims', icon: GitBranch },
+  { href: '/app/activity', label: 'API Activity', icon: Activity },
+  { href: '/app/audit', label: 'Audit', icon: FileText },
+  { href: '/app/settings', label: 'Settings', icon: Settings },
+];
+
+export function AppShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const { toast } = useToast();
+  const isOnboarding = pathname.startsWith('/app/onboarding');
+  const [planInfo, setPlanInfo] = useState<{
+    plan: string;
+    agents_used: number;
+    agent_limit: number;
+    billing_email: string | null;
+    billing_upgrades_enabled: boolean;
+  } | null>(null);
+  const [userEmail, setUserEmail] = useState('');
+  const [checkingSession, setCheckingSession] = useState(!isOnboarding);
+  const [supportOpen, setSupportOpen] = useState(false);
+  const [supportSending, setSupportSending] = useState(false);
+  const [supportForm, setSupportForm] = useState({
+    email: '',
+    subject: '',
+    category: 'setup' as 'billing' | 'setup' | 'sdk' | 'agent_error' | 'bug' | 'other',
+    message: '',
+  });
+  const upgradesEnabled = planInfo?.billing_upgrades_enabled ?? billingUpgradesEnabled();
+
+  useEffect(() => {
+    if (isOnboarding) return;
+
+    restoreSession()
+      .then((session) => {
+        setUserEmail(session.user.email);
+        setSupportForm((current) => ({ ...current, email: current.email || session.user.email }));
+        return getBillingStatus();
+      })
+      .then((billing) => {
+        setPlanInfo(billing);
+        setSupportForm((current) => ({ ...current, email: current.email || billing.billing_email || userEmail }));
+      })
+      .catch(() => {
+        clearSession();
+        window.location.href = '/login';
+      })
+      .finally(() => setCheckingSession(false));
+  }, [isOnboarding]);
+
+  async function signOut() {
+    await logoutWorkspace().catch(() => {});
+    clearSession();
+    window.location.href = '/login';
+  }
+
+  async function submitSupportTicket() {
+    if (!supportForm.email || !supportForm.subject.trim() || !supportForm.message.trim()) {
+      toast('Fill email, subject, and message', 'error');
+      return;
+    }
+
+    setSupportSending(true);
+    try {
+      await createSupportTicket({
+        ...supportForm,
+        subject: supportForm.subject.trim(),
+        message: supportForm.message.trim(),
+        context: {
+          path: pathname,
+          app_url: window.location.origin,
+        },
+      });
+      toast('Support ticket received', 'success');
+      setSupportOpen(false);
+      setSupportForm({
+        email: supportForm.email,
+        subject: '',
+        category: 'setup',
+        message: '',
+      });
+    } catch (err) {
+      toast((err as Error).message, 'error');
+    } finally {
+      setSupportSending(false);
+    }
+  }
+
+  if (isOnboarding) {
+    return <main className="min-h-screen bg-bg text-text-primary">{children}</main>;
+  }
+
+  if (checkingSession) {
+    return <main className="min-h-screen bg-bg" />;
+  }
+
+  return (
+    <div className="flex min-h-dvh flex-col bg-bg text-text-primary lg:h-screen lg:flex-row">
+      <header className="sticky top-0 z-30 border-b border-border bg-surface lg:hidden">
+        <div className="flex items-center justify-between gap-3 px-4 py-3">
+          <a className="text-text-primary" href="/app">
+            <AvailsyncLogo markClassName="h-7 w-7" wordmarkClassName="h-[20px] sm:h-[22px]" />
+          </a>
+          <button
+            onClick={signOut}
+            className="min-h-10 rounded border border-border px-3 text-body text-text-secondary hover:text-text-primary"
+          >
+            Sign out
+          </button>
+        </div>
+        <nav className="dark-scroll flex gap-1 overflow-x-auto px-2 pb-2">
+          {links.map(({ href, label, icon: Icon }) => {
+            const isActive =
+              href === '/app' ? pathname === '/app' : pathname.startsWith(href);
+            return (
+              <a
+                className={`flex min-h-10 shrink-0 items-center gap-2 rounded px-3 text-body transition-colors duration-150 ${
+                  isActive
+                    ? 'bg-surface-raised text-text-primary'
+                    : 'text-text-secondary hover:bg-surface-raised hover:text-text-primary'
+                }`}
+                href={href}
+                key={href}
+              >
+                <Icon className="h-4 w-4 flex-shrink-0" />
+                {label}
+              </a>
+            );
+          })}
+        </nav>
+      </header>
+
+      <aside className="hidden w-60 flex-shrink-0 flex-col overflow-y-auto border-r border-border bg-surface dark-scroll lg:flex">
+        <div className="px-4 py-4">
+          <a className="text-text-primary" href="/app">
+            <AvailsyncLogo markClassName="h-7 w-7" wordmarkClassName="h-[20px]" />
+          </a>
+        </div>
+
+        <div className="h-px bg-border mx-3" />
+
+        <nav className="flex-1 px-2 py-2 space-y-0.5">
+          {links.map(({ href, label, icon: Icon }) => {
+            const isActive =
+              href === '/app' ? pathname === '/app' : pathname.startsWith(href);
+            return (
+              <a
+                className={`flex items-center gap-2.5 rounded px-3 h-7.5 text-body transition-colors duration-150 ${
+                  isActive
+                    ? 'bg-surface-raised text-text-primary'
+                    : 'text-text-secondary hover:bg-surface-raised hover:text-text-primary'
+                }`}
+                href={href}
+                key={href}
+              >
+                <Icon className="h-4 w-4 flex-shrink-0" />
+                {label}
+              </a>
+            );
+          })}
+        </nav>
+
+        <div className="h-px bg-border mx-3" />
+
+        <div className="px-4 py-3 text-label text-text-tertiary space-y-1">
+          <div>
+            Plan:{' '}
+            <span className="text-text-secondary capitalize">
+              {planInfo?.plan || 'Free'}
+            </span>
+          </div>
+          <div>
+            {planInfo ? `${planInfo.agents_used}/${planInfo.agent_limit}` : '0/3'} agents
+          </div>
+          {planInfo?.plan === 'free' && (
+            <a
+              href="/app/settings?tab=billing"
+              className="text-accent hover:text-accent-hover text-label inline-block mt-1"
+            >
+              {upgradesEnabled ? 'Upgrade' : 'Paid waitlist'} &rarr;
+            </a>
+          )}
+          <button
+            onClick={signOut}
+            className="block text-left text-text-tertiary hover:text-text-secondary text-label mt-2"
+          >
+            Sign out
+          </button>
+        </div>
+      </aside>
+
+      <main className="min-w-0 flex-1 overflow-y-auto bg-bg dark-scroll">
+        {children}
+      </main>
+      {planInfo && planInfo.plan !== 'free' && (
+        <>
+          <button
+            onClick={() => setSupportOpen(true)}
+            className="fixed bottom-4 right-4 z-40 rounded border border-border bg-accent px-4 py-2 text-body font-medium text-white shadow-lg hover:bg-accent-hover"
+          >
+            Support
+          </button>
+          {supportOpen && (
+            <div className="fixed inset-0 z-50 flex items-end justify-end bg-black/45 p-4 sm:items-center">
+              <div className="w-full max-w-md rounded border border-border bg-surface p-5 shadow-xl">
+                <div className="mb-4 flex items-start justify-between gap-4">
+                  <div>
+                    <h2 className="text-heading font-semibold text-text-primary">Contact support</h2>
+                    <p className="mt-1 text-body text-text-secondary">
+                      Send a ticket. We will reply directly by email.
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => setSupportOpen(false)}
+                    className="text-text-tertiary hover:text-text-primary"
+                  >
+                    Close
+                  </button>
+                </div>
+                <div className="space-y-3">
+                  <div>
+                    <label className="mb-1 block text-label uppercase text-text-tertiary">Email</label>
+                    <input
+                      value={supportForm.email}
+                      onChange={(event) => setSupportForm({ ...supportForm, email: 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"
+                    />
+                  </div>
+                  <div>
+                    <label className="mb-1 block text-label uppercase text-text-tertiary">Category</label>
+                    <select
+                      value={supportForm.category}
+                      onChange={(event) => setSupportForm({ ...supportForm, category: event.target.value as typeof supportForm.category })}
+                      className="w-full rounded border border-border bg-bg px-3 py-2 text-body text-text-primary outline-none focus:border-border-focus"
+                    >
+                      <option value="setup">Setup</option>
+                      <option value="sdk">SDK</option>
+                      <option value="agent_error">Agent error</option>
+                      <option value="bug">Bug</option>
+                      <option value="billing">Billing</option>
+                      <option value="other">Other</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="mb-1 block text-label uppercase text-text-tertiary">Subject</label>
+                    <input
+                      value={supportForm.subject}
+                      onChange={(event) => setSupportForm({ ...supportForm, subject: 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"
+                      placeholder="What do you need help with?"
+                    />
+                  </div>
+                  <div>
+                    <label className="mb-1 block text-label uppercase text-text-tertiary">Message</label>
+                    <textarea
+                      value={supportForm.message}
+                      onChange={(event) => setSupportForm({ ...supportForm, message: event.target.value })}
+                      className="min-h-32 w-full rounded border border-border bg-bg px-3 py-2 text-body text-text-primary outline-none focus:border-border-focus"
+                      placeholder="Describe the issue, expected behavior, and what you already tried."
+                    />
+                  </div>
+                  <button
+                    onClick={submitSupportTicket}
+                    disabled={supportSending}
+                    className="w-full rounded bg-accent px-4 py-2 text-body font-medium text-white hover:bg-accent-hover disabled:opacity-50"
+                  >
+                    {supportSending ? 'Sending...' : 'Create ticket'}
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/frontend/components/dashboard/AvailabilityChecker.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { checkAvailability, listAgents } from '@/lib/api';
+import { fromLocalInputValue, formatDateTime, toLocalInputValue } from '@/lib/format';
+import { loadSession, type StoredSession } from '@/lib/storage';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import type { Agent, Slot } from '@/lib/schemas';
+
+export function AvailabilityChecker() {
+  const [session, setSession] = useState<StoredSession | null>(null);
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [agentId, setAgentId] = useState('');
+  const [from, setFrom] = useState(toLocalInputValue(new Date(Date.now() + 24 * 60 * 60 * 1000)));
+  const [to, setTo] = useState(toLocalInputValue(new Date(Date.now() + 25 * 60 * 60 * 1000)));
+  const [duration, setDuration] = useState(30);
+  const [slots, setSlots] = useState<Slot[]>([]);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    const loaded = loadSession();
+    setSession(loaded);
+    if (loaded) {
+      listAgents(loaded.orgId)
+        .then((rows) => {
+          setAgents(rows);
+          if (rows[0]) setAgentId(rows[0].id);
+        })
+        .catch(() => {});
+    }
+  }, []);
+
+  async function onSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    if (!session) return;
+    setError('');
+    try {
+      const result = await checkAvailability({
+        agent_id: agentId,
+        from: fromLocalInputValue(from),
+        to: fromLocalInputValue(to),
+        duration_minutes: duration,
+      });
+      setSlots(result.slots);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not check availability');
+    }
+  }
+
+  if (!session) {
+    return <p className="text-body text-text-secondary">Create an agent in onboarding before checking availability.</p>;
+  }
+
+  return (
+    <div className="grid gap-6">
+      <form className="grid gap-4 rounded border border-border bg-surface p-5" onSubmit={onSubmit}>
+        <label className="text-label uppercase text-text-tertiary" htmlFor="availability-from">
+          From
+        </label>
+        <Input
+          id="availability-from"
+          type="datetime-local"
+          value={from}
+          onChange={(event) => setFrom(event.target.value)}
+        />
+        <label className="text-label uppercase text-text-tertiary" htmlFor="availability-agent">
+          Agent
+        </label>
+        <select
+          id="availability-agent"
+          value={agentId}
+          onChange={(event) => setAgentId(event.target.value)}
+          className="rounded border border-border bg-surface px-3 py-2 text-body text-text-primary"
+        >
+          {agents.map((agent) => (
+            <option key={agent.id} value={agent.id}>{agent.name}</option>
+          ))}
+        </select>
+        <label className="text-label uppercase text-text-tertiary" htmlFor="availability-to">
+          To
+        </label>
+        <Input
+          id="availability-to"
+          type="datetime-local"
+          value={to}
+          onChange={(event) => setTo(event.target.value)}
+        />
+        <label className="text-label uppercase text-text-tertiary" htmlFor="availability-duration">
+          Duration minutes
+        </label>
+        <Input
+          id="availability-duration"
+          max={480}
+          min={1}
+          type="number"
+          value={duration}
+          onChange={(event) => setDuration(Number(event.target.value))}
+        />
+        {error && <p className="text-body text-error">{error}</p>}
+        <Button type="submit">Check availability</Button>
+      </form>
+      <div className="grid gap-3">
+        {slots.map((slot) => (
+          <div className="rounded border border-border bg-surface p-4" key={slot.start}>
+            <p className="font-semibold text-text-primary">
+              {formatDateTime(slot.start)} - {formatDateTime(slot.end)}
+            </p>
+            <p className="mt-1 text-body text-text-secondary">
+              Confidence {slot.confidence} - Competing holds {slot.competing_holds_count}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/frontend/components/dashboard/AvailabilityWindowForm.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { Input } from '@/components/ui/Input';
+
+type AvailabilityWindowFormProps = {
+  startAt: string;
+  endAt: string;
+  onStartAtChange: (value: string) => void;
+  onEndAtChange: (value: string) => void;
+};
+
+export function AvailabilityWindowForm({
+  startAt,
+  endAt,
+  onStartAtChange,
+  onEndAtChange,
+}: AvailabilityWindowFormProps) {
+  return (
+    <>
+      <label className="text-sm font-semibold" htmlFor="availability-starts">
+        Availability starts
+      </label>
+      <Input
+        id="availability-starts"
+        type="datetime-local"
+        value={startAt}
+        onChange={(event) => onStartAtChange(event.target.value)}
+      />
+      <label className="text-sm font-semibold" htmlFor="availability-ends">
+        Availability ends
+      </label>
+      <Input
+        id="availability-ends"
+        type="datetime-local"
+        value={endAt}
+        onChange={(event) => onEndAtChange(event.target.value)}
+      />
+    </>
+  );
+}

package/frontend/components/dashboard/HoldForm.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { createHold, listAgents, listHolds, releaseHold } from '@/lib/api';
+import { fromLocalInputValue, formatDateTime, toLocalInputValue } from '@/lib/format';
+import { loadSession, type StoredSession } from '@/lib/storage';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import type { Agent, Hold } from '@/lib/schemas';
+
+export function HoldForm() {
+  const [session, setSession] = useState<StoredSession | null>(null);
+  const [agentId, setAgentId] = useState('');
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [holds, setHolds] = useState<Hold[]>([]);
+  const [startAt, setStartAt] = useState(
+    toLocalInputValue(new Date(Date.now() + 24 * 60 * 60 * 1000)),
+  );
+  const [endAt, setEndAt] = useState(
+    toLocalInputValue(new Date(Date.now() + 24.5 * 60 * 60 * 1000)),
+  );
+  const [reason, setReason] = useState('Manual dashboard reservation');
+  const [error, setError] = useState('');
+
+  async function refresh(current: StoredSession) {
+    const agentRows = await listAgents(current.orgId);
+    setAgents(agentRows);
+    const nextAgentId = agentId || agentRows[0]?.id || '';
+    if (nextAgentId && !agentId) setAgentId(nextAgentId);
+    setHolds(await listHolds({ agent_id: nextAgentId || undefined }));
+  }
+
+  useEffect(() => {
+    const loaded = loadSession();
+    setSession(loaded);
+    if (loaded) {
+      refresh(loaded).catch(() => setError('Could not load holds'));
+    }
+  }, []);
+
+  async function onSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    if (!session) return;
+    setError('');
+    try {
+      await createHold({
+        agent_id: agentId,
+        start_at: fromLocalInputValue(startAt),
+        end_at: fromLocalInputValue(endAt),
+        reason,
+      });
+      await refresh(session);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not create hold');
+    }
+  }
+
+  async function onRelease(holdId: string) {
+    if (!session) return;
+    await releaseHold(holdId);
+    await refresh(session);
+  }
+
+  if (!session) {
+    return <p className="text-body text-text-secondary">Create an agent before managing holds.</p>;
+  }
+
+  return (
+    <div className="grid gap-6">
+      <form className="grid gap-4 rounded border border-border bg-surface p-5" onSubmit={onSubmit}>
+        <label className="text-label uppercase text-text-tertiary" htmlFor="hold-start">
+          Start
+        </label>
+        <Input
+          id="hold-start"
+          type="datetime-local"
+          value={startAt}
+          onChange={(event) => setStartAt(event.target.value)}
+        />
+        <label className="text-label uppercase text-text-tertiary" htmlFor="hold-agent">
+          Agent
+        </label>
+        <select
+          id="hold-agent"
+          value={agentId}
+          onChange={(event) => setAgentId(event.target.value)}
+          className="rounded border border-border bg-surface px-3 py-2 text-body text-text-primary"
+        >
+          {agents.map((agent) => (
+            <option key={agent.id} value={agent.id}>{agent.name}</option>
+          ))}
+        </select>
+        <label className="text-label uppercase text-text-tertiary" htmlFor="hold-end">
+          End
+        </label>
+        <Input
+          id="hold-end"
+          type="datetime-local"
+          value={endAt}
+          onChange={(event) => setEndAt(event.target.value)}
+        />
+        <label className="text-label uppercase text-text-tertiary" htmlFor="hold-reason">
+          Reason
+        </label>
+        <Input id="hold-reason" value={reason} onChange={(event) => setReason(event.target.value)} />
+        {error && <p className="text-body text-error">{error}</p>}
+        <Button type="submit">Create hold</Button>
+      </form>
+      <div className="grid gap-3">
+        {holds.map((hold) => (
+          <div
+            className="flex flex-col justify-between gap-3 rounded border border-border bg-surface p-4 md:flex-row md:items-center"
+            key={hold.id}
+          >
+            <div>
+              <p className="font-semibold text-text-primary">
+                {formatDateTime(hold.start_at)} - {formatDateTime(hold.end_at)}
+              </p>
+              <p className="mt-1 text-body text-text-secondary">
+                {hold.status} - {hold.reason || 'No reason'}
+              </p>
+            </div>
+            {hold.status === 'confirmed' && (
+              <Button onClick={() => onRelease(hold.id)} variant="secondary">
+                Release
+              </Button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/frontend/components/dashboard/MetricCard.tsx

@@ -0,0 +1,10 @@
+import { Card } from '@/components/ui/Card';
+
+export function MetricCard({ label, value }: { label: string; value: string }) {
+  return (
+    <Card>
+      <p className="text-label uppercase text-text-tertiary">{label}</p>
+      <p className="mt-2 text-3xl font-semibold text-text-primary">{value}</p>
+    </Card>
+  );
+}

package/frontend/components/login/LoginForm.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { loginWorkspace, restoreSession } from '@/lib/api';
+import { clearSession, saveSession } from '@/lib/storage';
+
+export function LoginForm() {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      clearSession();
+      await loginWorkspace(email, password);
+      const restored = await restoreSession();
+      saveSession({
+        orgId: restored.org.id,
+        userId: restored.user.id,
+        email: restored.user.email,
+      });
+      router.push('/app');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not sign in');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-bg flex items-center justify-center p-6">
+      <div className="w-full max-w-sm">
+        <a
+          href="/"
+          className="mb-6 inline-block text-body text-text-tertiary transition-colors hover:text-text-secondary"
+        >
+          Back to homepage
+        </a>
+        <h1 className="text-title font-semibold text-text-primary mb-2">Workspace login</h1>
+        <p className="text-body text-text-secondary mb-6">Sign in with your dashboard email and password.</p>
+        <form onSubmit={onSubmit} className="space-y-4">
+          <div>
+            <label className="block text-label uppercase text-text-tertiary mb-1" htmlFor="email">
+              Email
+            </label>
+            <input
+              id="email"
+              required
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(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"
+              placeholder="you@company.com"
+              autoFocus
+            />
+          </div>
+          <div>
+            <label className="block text-label uppercase text-text-tertiary mb-1" htmlFor="password">
+              Password
+            </label>
+            <input
+              id="password"
+              required
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(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"
+              placeholder="Password"
+            />
+          </div>
+          {error && <p className="text-body text-error">{error}</p>}
+          <button
+            disabled={loading}
+            type="submit"
+            className="w-full 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 ? 'Signing in...' : 'Sign in'}
+          </button>
+          <a
+            href="/signup"
+            className="block text-center text-body text-text-secondary hover:text-text-primary transition-colors"
+          >
+            Create workspace instead
+          </a>
+        </form>
+      </div>
+    </div>
+  );
+}