availsync 0.1.0

package/frontend/app/app/activity/page.tsx

@@ -0,0 +1,257 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { getActivityLog, listAgents } from '@/lib/api';
+import { loadSession, type StoredSession } from '@/lib/storage';
+import { Badge } from '@/components/ui/Badge';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { SkeletonRow } from '@/components/ui/Skeleton';
+import { Activity } from 'lucide-react';
+import type { Agent } from '@/lib/schemas';
+
+type ActivityEvent = Awaited<ReturnType<typeof getActivityLog>>['events'][number];
+
+const activityTypes = [
+  'mcp_heartbeat',
+  'availability_check',
+  'conflict_preview',
+  'hold_create',
+  'hold_release',
+  'agent_run',
+  'key_rotated',
+  'connection_test',
+  'work_check',
+  'work_claim',
+  'work_extend',
+  'work_release',
+  'work_blocked',
+  'automation_start',
+  'automation_skip',
+  'automation_shadow_allowed',
+  'automation_shadow_blocked',
+  'automation_extend',
+  'automation_finish',
+  'automation_error',
+  'verification_run',
+  'setup_test',
+  'setup_test_availability',
+  'setup_test_conflict_preview',
+  'setup_test_work_check',
+  'setup_test_work_claim',
+  'setup_test_work_extend',
+  'setup_test_work_release',
+  'setup_test_work_blocked',
+];
+
+function activityLabel(event: ActivityEvent) {
+  if (event.activity_type === 'automation_shadow_blocked') {
+    return 'Observe-only · would have blocked';
+  }
+  if (event.activity_type === 'automation_shadow_allowed') {
+    return 'Observe-only · allowed';
+  }
+  if (event.activity_type.startsWith('automation_')) {
+    return `Automation · ${event.activity_type.replace(/^automation_/, '').replaceAll('_', ' ')}`;
+  }
+  if (event.activity_type.startsWith('setup_test')) {
+    return `Setup test · ${event.activity_type.replace(/^setup_test_?/, '').replaceAll('_', ' ') || 'summary'}`;
+  }
+  if (event.activity_type === 'verification_run') {
+    return 'Onboarding verification';
+  }
+  if ((event.metadata as { source?: string } | null)?.source === 'setup_test') {
+    return `Setup test · ${event.activity_type.replaceAll('_', ' ')}`;
+  }
+  return event.activity_type.replaceAll('_', ' ');
+}
+
+export default function ActivityPage() {
+  const [session, setSession] = useState<StoredSession | null>(null);
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [events, setEvents] = useState<ActivityEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [filterAgent, setFilterAgent] = useState('');
+  const [filterType, setFilterType] = useState('');
+  const [filterStatus, setFilterStatus] = useState('');
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const params = new URLSearchParams(window.location.search);
+    setFilterAgent(params.get('agent') || '');
+    setFilterType(params.get('activity_type') || '');
+    setFilterStatus(params.get('status') || '');
+  }, []);
+
+  const load = useCallback(async () => {
+    const current = loadSession();
+    setSession(current);
+    if (!current) {
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    const [agentRows, activity] = await Promise.all([
+      listAgents(current.orgId).catch(() => []),
+      getActivityLog({
+        limit: 100,
+        agent_id: filterAgent || undefined,
+        activity_type: filterType || undefined,
+        status: filterStatus ? (filterStatus as 'success' | 'error') : undefined,
+      }).catch(() => ({ events: [], count: 0, limit: 100, offset: 0 })),
+    ]);
+    setAgents(agentRows);
+    setEvents(activity.events);
+    setLoading(false);
+  }, [filterAgent, filterStatus, filterType]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  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">Activity</h1>
+        <p className="mt-1 text-body text-text-secondary">
+          Operational traffic from agents, MCP, API calls, key rotation, and reported token usage.
+        </p>
+      </div>
+
+      <div className="mb-4 flex flex-wrap items-center gap-3">
+        <select
+          value={filterAgent}
+          onChange={(event) => setFilterAgent(event.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>
+        <select
+          value={filterType}
+          onChange={(event) => setFilterType(event.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 activity</option>
+          {activityTypes.map((type) => (
+            <option key={type} value={type}>{type.replaceAll('_', ' ')}</option>
+          ))}
+        </select>
+        <select
+          value={filterStatus}
+          onChange={(event) => setFilterStatus(event.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 status</option>
+          <option value="success">Success</option>
+          <option value="error">Error</option>
+        </select>
+      </div>
+
+      {loading ? (
+        <div className="overflow-hidden rounded border border-border">
+          {Array.from({ length: 6 }).map((_, index) => <SkeletonRow key={index} />)}
+        </div>
+      ) : events.length === 0 ? (
+        <EmptyState
+          icon={Activity}
+          title="No activity yet"
+          description="Run the dashboard test first, then connect a real SDK, MCP, or REST client. Activity shows runtime traffic; setup tests and verification are not production value."
+          action={
+            <div className="flex flex-wrap justify-center gap-2">
+              <a
+                href="/docs/sdk/node"
+                className="rounded bg-accent px-3 py-1.5 text-body font-medium text-white hover:bg-accent-hover"
+              >
+                Read SDK docs
+              </a>
+              <a
+                href="/app/agents"
+                className="rounded border border-border px-3 py-1.5 text-body font-medium text-text-secondary hover:text-text-primary"
+              >
+                Open agent setup
+              </a>
+            </div>
+          }
+        />
+      ) : (
+        <div className="overflow-x-auto rounded border border-border dark-scroll">
+          <table className="w-full min-w-[1180px] table-fixed">
+            <colgroup>
+              <col className="w-[170px]" />
+              <col className="w-[170px]" />
+              <col className="w-[170px]" />
+              <col className="w-[120px]" />
+              <col className="w-[120px]" />
+              <col className="w-[110px]" />
+              <col className="w-[120px]" />
+              <col />
+            </colgroup>
+            <thead>
+              <tr className="border-b border-border bg-surface text-label uppercase text-text-tertiary">
+                <th className="px-4 py-2 text-left font-medium">Time</th>
+                <th className="px-4 py-2 text-left font-medium">Agent</th>
+                <th className="px-4 py-2 text-left font-medium">Action</th>
+                <th className="px-4 py-2 text-left font-medium">Status</th>
+                <th className="px-4 py-2 text-left font-medium">Latency</th>
+                <th className="px-4 py-2 text-left font-medium">Tokens</th>
+                <th className="px-4 py-2 text-left font-medium">Client</th>
+                <th className="px-4 py-2 text-left font-medium">Error</th>
+              </tr>
+            </thead>
+            <tbody>
+              {events.map((event) => (
+                <tr key={event.id} className="border-b border-border align-top hover:bg-surface-raised">
+                  <td className="px-4 py-2 font-mono text-body text-text-tertiary whitespace-nowrap">
+                    {new Date(event.created_at).toLocaleString()}
+                  </td>
+                  <td className="px-4 py-2 text-body text-text-secondary">
+                    <span className="block truncate">{event.agent_name || event.agent_id || '-'}</span>
+                  </td>
+                  <td className="px-4 py-2">
+                    <div className="flex items-center gap-2 text-body text-text-primary">
+                      <span>{activityLabel(event)}</span>
+                      {event.activity_type.startsWith('automation_') && (
+                        <Badge variant="accent">Automation</Badge>
+                      )}
+                      {(event.activity_type === 'automation_shadow_blocked' || event.activity_type === 'automation_shadow_allowed') && (
+                        <Badge variant="neutral">Observe-only</Badge>
+                      )}
+                      {(event.activity_type.startsWith('setup_test') || (event.metadata as { source?: string } | null)?.source === 'setup_test') && (
+                        <Badge variant="accent">Setup test</Badge>
+                      )}
+                    </div>
+                    <div className="truncate font-mono text-label text-text-tertiary">
+                      {[event.method, event.endpoint].filter(Boolean).join(' ')}
+                    </div>
+                  </td>
+                  <td className="px-4 py-2">
+                    <Badge variant={event.status === 'success' ? 'success' : 'error'}>
+                      {event.status_code || event.status}
+                    </Badge>
+                  </td>
+                  <td className="px-4 py-2 font-mono text-body text-text-tertiary">
+                    {event.latency_ms != null ? `${event.latency_ms}ms` : '-'}
+                  </td>
+                  <td className="px-4 py-2 font-mono text-body text-text-tertiary">
+                    {event.total_tokens ?? '-'}
+                  </td>
+                  <td className="px-4 py-2 text-body text-text-secondary">
+                    <span className="block truncate">
+                      {event.client_name === 'openclaw' ? 'OpenClaw' : event.client_name || event.actor_label || '-'}
+                    </span>
+                  </td>
+                  <td className="px-4 py-2 text-body text-text-tertiary">
+                    <span className="block truncate">{event.error_code || event.error_message || '-'}</span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

package/frontend/app/app/agents/[agentId]/page.tsx

@@ -0,0 +1,21 @@
+export default async function AgentDetailPage({
+  params,
+}: {
+  params: Promise<{ agentId: string }>;
+}) {
+  const { agentId } = await params;
+
+  return (
+    <section className="w-full max-w-none p-4 sm:p-6">
+      <h1 className="text-4xl font-semibold text-text-primary">Agent</h1>
+      <p className="mt-3 break-all font-mono text-body text-text-secondary">Agent ID: {agentId}</p>
+      <div className="mt-8 rounded border border-border bg-surface p-5">
+        <h2 className="text-title font-semibold text-text-primary">Next controls</h2>
+        <p className="mt-2 text-body leading-6 text-text-secondary">
+          Preferences, API key rotation, and audit event views belong here once backend endpoints
+          expose them fully for the dashboard.
+        </p>
+      </div>
+    </section>
+  );
+}