availsync 0.1.0

package/frontend/app/app/page.tsx

@@ -0,0 +1,508 @@
+'use client';
+
+import { Fragment, useEffect, useState } from 'react';
+import { saveSession } from '@/lib/storage';
+import {
+  getAuditLog,
+  getBillingStatus,
+  getMetricsOverview,
+  getValueHealth,
+  listAgents,
+  restoreSession,
+  type ValueHealth,
+} from '@/lib/api';
+import { SkeletonMetric } from '@/components/ui/Skeleton';
+import { Badge } from '@/components/ui/Badge';
+import { useRouter } from 'next/navigation';
+import { Clipboard } from 'lucide-react';
+import type { Agent } from '@/lib/schemas';
+import { mcpEnvSnippet, nodeSdkSnippets, workGuardrailSnippets, schedulingSnippets } from '@/lib/setupGuides';
+
+function formatRelative(dateStr: string) {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+const eventBadge: Record<string, { variant: 'success' | 'warning' | 'error' | 'neutral' | 'accent'; label: string }> = {
+  created: { variant: 'success', label: 'Created' },
+  superseded: { variant: 'warning', label: 'Superseded' },
+  released: { variant: 'neutral', label: 'Released' },
+  conflict_won: { variant: 'accent', label: 'Won' },
+  conflict_lost: { variant: 'error', label: 'Lost' },
+};
+
+const nextActionCopy: Record<ValueHealth['next_best_action'], { title: string; body: string; href: string; label: string }> = {
+  run_verification: {
+    title: 'Verify the workspace',
+    body: 'Run the dashboard verification to see Availsync resolve a real agent conflict.',
+    href: '/app/onboarding/verify',
+    label: 'Run verification',
+  },
+  connect_first_agent: {
+    title: 'Install the SDK and send a real run',
+    body: 'Verification is complete, but no production SDK/MCP/API traffic has reached Availsync yet. Put one agent in Observe and run a guarded repo task.',
+    href: '/app/agents',
+    label: 'Open agent setup',
+  },
+  check_inactive_agents: {
+    title: 'Check inactive agents',
+    body: 'One or more agents have not called Availsync recently. Check their SDK, REST, MCP, or automation env setup.',
+    href: '/app/agents',
+    label: 'Review agents',
+  },
+  review_errors: {
+    title: 'Review recent errors',
+    body: 'Recent runtime errors were reported by agents. Open Activity to inspect failed calls.',
+    href: '/app/activity?status=error',
+    label: 'Open Activity',
+  },
+  none: {
+    title: 'Agents are active',
+    body: 'Availsync has seen real runtime traffic and no immediate setup issue needs attention.',
+    href: '/app/activity',
+    label: 'Open Activity',
+  },
+};
+
+export default function OverviewPage() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(true);
+  const [metrics, setMetrics] = useState<{
+    active_agents: number;
+    mcp_online: number;
+    confirmed_holds: number;
+    conflicts_resolved: number;
+    conflicts_blocked: number;
+    released_holds: number;
+    api_calls_today: number;
+    connected_agents: number;
+    recent_errors: number;
+    token_usage_reported: number;
+    active_work_claims: number;
+    protected_resources: number;
+    blocked_agent_runs: number;
+    released_work_slots: number;
+    latest_event_at: string | null;
+  } | null>(null);
+  const [billing, setBilling] = useState<Awaited<ReturnType<typeof getBillingStatus>> | null>(null);
+  const [valueHealth, setValueHealth] = useState<ValueHealth | null>(null);
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [events, setEvents] = useState<Array<{
+    id: string;
+    event_type: string;
+    agent_name: string;
+    created_at: string;
+    hold_id: string;
+    rule_applied: string | null;
+    metadata: Record<string, unknown> | null;
+    actor_type: string | null;
+    actor_label: string | null;
+  }>>([]);
+  const [expandedEvent, setExpandedEvent] = useState<string | null>(null);
+  const [selectedSetupAgentId, setSelectedSetupAgentId] = useState('');
+  const [verifiedAt, setVerifiedAt] = useState<string | null>(null);
+  const selectedSetupAgent = agents.find((agent) => agent.id === selectedSetupAgentId) ?? agents[0];
+
+  useEffect(() => {
+    restoreSession().then(async (sessionData) => {
+      saveSession({
+        orgId: sessionData.org.id,
+        userId: sessionData.user.id,
+        email: sessionData.user.email,
+      });
+      const [metricsData, auditData, agentRows, billingData, valueHealthData] = await Promise.all([
+        getMetricsOverview(),
+        getAuditLog({ limit: 10 }).catch(() => ({ events: [] })),
+        listAgents(sessionData.org.id).catch(() => []),
+        getBillingStatus().catch(() => null),
+        getValueHealth().catch(() => null),
+      ]);
+      setMetrics(metricsData);
+      setEvents(auditData.events);
+      setAgents(agentRows);
+      setSelectedSetupAgentId((current) => current || agentRows[0]?.id || '');
+      setBilling(billingData);
+      setValueHealth(valueHealthData);
+      setVerifiedAt(sessionData.org.verified_at ?? null);
+      setLoading(false);
+    }).catch(() => router.push('/login'));
+  }, [router]);
+
+  return (
+    <div className="w-full max-w-none p-4 sm:p-6">
+      <h1 className="text-title font-semibold text-text-primary mb-6">Overview</h1>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 mb-8">
+        {loading ? (
+          <>
+            <SkeletonMetric />
+            <SkeletonMetric />
+            <SkeletonMetric />
+            <SkeletonMetric />
+            <SkeletonMetric />
+          </>
+        ) : (
+          <>
+            <MetricBlock
+              label="Active agents"
+              value={String(metrics?.active_agents ?? 0)}
+              sub={`${metrics?.connected_agents ?? 0} connected`}
+            />
+            <MetricBlock label="API calls today" value={String(metrics?.api_calls_today ?? 0)} />
+            <MetricBlock
+              label="Active work claims"
+              value={String(metrics?.active_work_claims ?? 0)}
+              sub={`${metrics?.protected_resources ?? 0} resources`}
+            />
+            <MetricBlock
+              label="Blocked agent runs"
+              value={String(metrics?.blocked_agent_runs ?? 0)}
+              sub={`${metrics?.released_work_slots ?? 0} released`}
+            />
+            <MetricBlock
+              label="Plan usage"
+              value={billing?.plan || 'free'}
+              sub={`${billing?.usage.api_calls_month ?? 0}/${billing?.limits.api_calls_month ?? 1000} API calls`}
+            />
+          </>
+        )}
+      </div>
+
+      {!loading && valueHealth && (
+        <div className="mb-8 grid grid-cols-1 gap-3 lg:grid-cols-[1.4fr_1fr]">
+          <ValuePanel valueHealth={valueHealth} />
+          <AgentHealthPanel valueHealth={valueHealth} agents={agents} />
+        </div>
+      )}
+
+      <SetupGuide
+        agents={agents}
+        selectedAgent={selectedSetupAgent}
+        selectedAgentId={selectedSetupAgentId}
+        onSelectAgent={setSelectedSetupAgentId}
+        verifiedAt={verifiedAt}
+      />
+
+      <div>
+        <h2 className="text-heading font-medium text-text-primary mb-3">Recent activity</h2>
+        {events.length === 0 && !loading ? (
+          <div className="rounded border border-border bg-surface p-4">
+            <p className="text-body text-text-secondary">
+              No audit events yet. Run an MCP heartbeat or call check_work_slot from an agent, then open Activity to validate runtime traffic.
+            </p>
+          <div className="mt-3 flex flex-wrap gap-2">
+              <a href={selectedSetupAgent ? `/app/agents?connect=${selectedSetupAgent.id}` : '/app/agents'} className="rounded bg-accent px-3 py-1.5 text-body font-medium text-white hover:bg-accent-hover">
+                Open agent setup
+              </a>
+              <a href="/docs/sdk/node" className="rounded border border-border px-3 py-1.5 text-body text-text-secondary hover:text-text-primary">
+                Read SDK docs
+              </a>
+              <a href="/app/activity" className="rounded border border-border px-3 py-1.5 text-body text-text-secondary hover:text-text-primary">
+                Open Activity
+              </a>
+            </div>
+          </div>
+        ) : (
+          <div className="overflow-x-auto rounded border border-border dark-scroll">
+            <table className="w-full min-w-[760px]">
+              <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">Time</th>
+                  <th className="text-left px-4 py-2 font-medium">Agent</th>
+                  <th className="text-left px-4 py-2 font-medium">Event</th>
+                  <th className="text-left px-4 py-2 font-medium">Actor</th>
+                </tr>
+              </thead>
+              <tbody>
+                {events.map((event) => {
+                  const badge = eventBadge[event.event_type] || { variant: 'neutral' as const, label: event.event_type };
+                  const isExpanded = expandedEvent === event.id;
+                  return (
+                    <Fragment key={event.id}>
+                      <tr
+                        className="border-b border-border h-9 hover:bg-surface-raised cursor-pointer transition-colors duration-150"
+                        onClick={() => setExpandedEvent(isExpanded ? null : event.id)}
+                      >
+                        <td className="px-4 font-mono text-body text-text-tertiary">
+                          {formatRelative(event.created_at)}
+                        </td>
+                        <td className="px-4 text-body text-text-secondary">
+                          {event.agent_name || 'Unknown'}
+                        </td>
+                        <td className="px-4">
+                          <Badge variant={badge.variant}>{badge.label}</Badge>
+                        </td>
+                        <td className="px-4 text-body text-text-secondary">
+                          {event.actor_label || event.actor_type || '-'}
+                        </td>
+                      </tr>
+                      {isExpanded && (
+                        <tr className="border-b border-border">
+                          <td colSpan={4} className="px-4 py-3 bg-surface">
+                            <pre className="font-mono text-[11px] text-text-secondary whitespace-pre-wrap">
+                              {JSON.stringify({ hold_id: event.hold_id, metadata: event.metadata }, null, 2)}
+                            </pre>
+                          </td>
+                        </tr>
+                      )}
+                    </Fragment>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SetupGuide({
+  agents,
+  selectedAgent,
+  selectedAgentId,
+  onSelectAgent,
+  verifiedAt,
+}: {
+  agents: Agent[];
+  selectedAgent?: Agent;
+  selectedAgentId: string;
+  onSelectAgent: (agentId: string) => void;
+  verifiedAt: string | null;
+}) {
+  const agentId = selectedAgent?.id || 'YOUR_AGENT_ID';
+  const appUrl = typeof window === 'undefined' ? 'https://availsync.dev' : window.location.origin;
+  const snippets = [
+    {
+      ...nodeSdkSnippets({ appUrl, agentId })[0],
+      title: '1. Install Node SDK',
+      description: 'Use npm install @availsync/node@alpha, then wrap your repo task with withClaim.',
+    },
+    {
+      ...mcpEnvSnippet({ appUrl, agentId }),
+      title: '2. Add runtime env',
+      description: 'Store the API key only in your agent, CI, MCP, or server environment.',
+    },
+    {
+      ...workGuardrailSnippets({ appUrl, agentId })[0],
+      title: '3. Check repo work',
+    },
+    {
+      ...workGuardrailSnippets({ appUrl, agentId })[1],
+      title: '4. Claim before coding',
+    },
+    {
+      ...workGuardrailSnippets({ appUrl, agentId })[2],
+      title: '5. Extend while working',
+    },
+    {
+      ...workGuardrailSnippets({ appUrl, agentId })[3],
+      title: '6. Release when finished',
+    },
+    {
+      ...schedulingSnippets({ appUrl, agentId })[0],
+      title: '7. Optional scheduling check',
+    },
+  ];
+
+  return (
+    <div className="mb-8">
+      <div className="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h2 className="text-heading font-medium text-text-primary">Setup guide</h2>
+          <p className="mt-1 text-body text-text-tertiary">
+            Start with dashboard verification, install the Node SDK, run one agent in Observe, then confirm real traffic in Activity.
+          </p>
+          <div className="mt-2 flex items-center gap-2">
+            <Badge variant={verifiedAt ? 'success' : 'neutral'}>
+              {verifiedAt ? 'Integration verified' : 'Verification pending'}
+            </Badge>
+            {!verifiedAt && (
+              <a href="/app/onboarding/verify" className="text-body text-accent hover:text-accent-hover">
+                Run verification
+              </a>
+            )}
+          </div>
+        </div>
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+          <select
+            value={selectedAgentId}
+            onChange={(event) => onSelectAgent(event.target.value)}
+            className="rounded border border-border bg-surface px-3 py-1.5 text-body text-text-primary outline-none focus:border-border-focus"
+            disabled={agents.length === 0}
+          >
+            {agents.length === 0 ? (
+              <option value="">No agents yet</option>
+            ) : (
+              agents.map((agent) => (
+                <option key={agent.id} value={agent.id}>
+                  {agent.name}
+                </option>
+              ))
+            )}
+          </select>
+          <div className="flex gap-3">
+            <a href={selectedAgent ? `/app/agents?connect=${selectedAgent.id}` : '/app/agents'} className="text-body text-accent hover:text-accent-hover">
+              Connect agent
+            </a>
+            <a href="/docs/quickstart" className="text-body text-accent hover:text-accent-hover">
+              Full quickstart
+            </a>
+            <a href="/docs/pilot" className="text-body text-accent hover:text-accent-hover">
+              Pilot guide
+            </a>
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        <GuideCard
+          title="Agent ID"
+          body="Use this ID when your coding agent checks, claims, extends, or releases guarded work through Availsync."
+          code={agentId}
+        />
+        {snippets.map((snippet) => (
+          <GuideCard key={snippet.id} title={snippet.title} body={snippet.description} code={snippet.code} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ValuePanel({ valueHealth }: { valueHealth: ValueHealth }) {
+  const action = nextActionCopy[valueHealth.next_best_action];
+
+  return (
+    <section className="rounded border border-border bg-surface p-4">
+      <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <h2 className="text-heading font-medium text-text-primary">Value this week</h2>
+          <p className="mt-1 text-body text-text-tertiary">
+            Real agent traffic only. Setup tests and onboarding verification are excluded.
+          </p>
+        </div>
+        <Badge variant={valueHealth.summary.conflicts_prevented_7d > 0 ? 'success' : 'neutral'}>
+          {valueHealth.summary.conflicts_prevented_7d} prevented
+        </Badge>
+      </div>
+      <div className="grid grid-cols-2 gap-3 lg:grid-cols-5">
+        <MiniMetric label="Conflicts prevented" value={valueHealth.summary.conflicts_prevented_7d} />
+        <MiniMetric label="Blocked work runs" value={valueHealth.summary.blocked_work_runs_7d} />
+        <MiniMetric label="Would have blocked" value={valueHealth.summary.would_have_blocked_runs_7d} />
+        <MiniMetric label="Real API calls" value={valueHealth.summary.api_calls_7d} />
+        <MiniMetric
+          label="Latest real activity"
+          value={valueHealth.summary.latest_real_activity_at ? formatRelative(valueHealth.summary.latest_real_activity_at) : 'none'}
+          text
+        />
+      </div>
+      <div className="mt-4 rounded border border-border bg-bg p-3">
+        <div className="text-body font-medium text-text-primary">{action.title}</div>
+        <p className="mt-1 text-body text-text-secondary">{action.body}</p>
+        <a href={action.href} className="mt-2 inline-flex rounded bg-accent px-3 py-1.5 text-body font-medium text-white hover:bg-accent-hover">
+          {action.label}
+        </a>
+      </div>
+    </section>
+  );
+}
+
+function AgentHealthPanel({ valueHealth, agents }: { valueHealth: ValueHealth; agents: Agent[] }) {
+  const needsAttention = valueHealth.agent_health.filter((agent) => agent.status !== 'healthy');
+  const rows = needsAttention.length > 0 ? needsAttention : valueHealth.agent_health.slice(0, 3);
+
+  return (
+    <section className="rounded border border-border bg-surface p-4">
+      <h2 className="text-heading font-medium text-text-primary">Agent health</h2>
+      <p className="mt-1 text-body text-text-tertiary">Quiet agents usually mean stale SDK/REST/MCP env, stopped automation, or disabled credentials.</p>
+      <div className="mt-4 space-y-2">
+        {rows.length === 0 ? (
+          <p className="text-body text-text-tertiary">No agents yet.</p>
+        ) : (
+          rows.map((agent) => {
+            const knownAgent = agents.find((row) => row.id === agent.agent_id);
+            return (
+              <a
+                key={agent.agent_id}
+                href={`/app/agents?connect=${agent.agent_id}`}
+                className="flex items-center justify-between gap-3 rounded border border-border bg-bg px-3 py-2 hover:bg-surface-raised"
+              >
+                <div className="min-w-0">
+                  <div className="truncate text-body font-medium text-text-primary">{agent.name}</div>
+                  <div className="text-label text-text-tertiary">
+                    {agent.last_activity_at
+                      ? `Last real activity ${formatRelative(agent.last_activity_at)}`
+                      : agent.last_seen_at
+                        ? `Last seen ${formatRelative(agent.last_seen_at)}`
+                        : knownAgent?.mcp_last_seen_at
+                          ? `MCP ${formatRelative(knownAgent.mcp_last_seen_at)}`
+                          : 'No SDK, REST, or MCP traffic yet'}
+                  </div>
+                </div>
+                <HealthBadge status={agent.status} />
+              </a>
+            );
+          })
+        )}
+      </div>
+    </section>
+  );
+}
+
+function MiniMetric({ label, value, text }: { label: string; value: number | string; text?: boolean }) {
+  return (
+    <div className="rounded border border-border bg-bg p-3">
+      <div className="text-label uppercase text-text-tertiary">{label}</div>
+      <div className={`${text ? 'text-body' : 'font-mono text-[24px]'} mt-1 font-semibold text-text-primary`}>
+        {value}
+      </div>
+    </div>
+  );
+}
+
+function HealthBadge({ status }: { status: ValueHealth['agent_health'][number]['status'] }) {
+  const map: Record<ValueHealth['agent_health'][number]['status'], { label: string; variant: 'success' | 'warning' | 'neutral' | 'error' }> = {
+    healthy: { label: 'Healthy', variant: 'success' },
+    quiet: { label: 'Quiet', variant: 'warning' },
+    never_connected: { label: 'Never connected', variant: 'neutral' },
+    error: { label: 'Error', variant: 'error' },
+  };
+  const entry = map[status];
+  return <Badge variant={entry.variant}>{entry.label}</Badge>;
+}
+
+function GuideCard({ title, body, code }: { title: string; body: string; code: string }) {
+  return (
+    <div className="rounded border border-border bg-surface p-4">
+      <h3 className="text-body font-medium text-text-primary">{title}</h3>
+      <p className="mt-1 mb-3 text-body text-text-secondary">{body}</p>
+      <div className="group relative rounded border border-border bg-bg">
+        <button
+          onClick={() => navigator.clipboard.writeText(code)}
+          className="absolute right-2 top-2 rounded border border-border bg-surface p-1.5 text-text-tertiary opacity-0 transition-opacity hover:text-text-secondary group-hover:opacity-100 focus:opacity-100"
+          title="Copy"
+        >
+          <Clipboard className="h-3.5 w-3.5" />
+        </button>
+        <pre className="max-h-56 overflow-auto p-3 pr-10 text-[11px] font-mono text-text-secondary whitespace-pre-wrap break-all">
+          {code}
+        </pre>
+      </div>
+    </div>
+  );
+}
+
+function MetricBlock({ label, value, sub }: { label: string; value: string; sub?: string }) {
+  return (
+    <div className="rounded border border-border bg-surface p-4">
+      <div className="text-label uppercase text-text-tertiary mb-2">{label}</div>
+      <div className="font-mono text-[30px] font-semibold leading-tight text-text-primary capitalize">{value}</div>
+      {sub && <div className="text-body text-text-tertiary mt-0.5">{sub}</div>}
+    </div>
+  );
+}