availsync 0.1.0

package/frontend/app/app/audit/page.tsx

@@ -0,0 +1,225 @@
+'use client';
+
+import { Fragment, useEffect, useState, useCallback } from 'react';
+import { loadSession, type StoredSession } from '@/lib/storage';
+import { getAuditLog, listAgents } from '@/lib/api';
+import { Badge } from '@/components/ui/Badge';
+import { SkeletonRow } from '@/components/ui/Skeleton';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { FileText } from 'lucide-react';
+import type { Agent } from '@/lib/schemas';
+
+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 EVENT_TYPES = ['created', 'superseded', 'released', 'conflict_won', 'conflict_lost'];
+
+type AuditEvent = {
+  id: string;
+  hold_id: string;
+  event_type: string;
+  agent_id: string;
+  agent_name: string;
+  org_id: string;
+  conflicting_hold_id: string | null;
+  rule_applied: string | null;
+  metadata: Record<string, unknown> | null;
+  actor_type: string | null;
+  actor_id: string | null;
+  actor_label: string | null;
+  created_at: string;
+};
+
+export default function AuditLogPage() {
+  const [session, setSession] = useState<StoredSession | null>(null);
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [events, setEvents] = useState<AuditEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [expandedEvent, setExpandedEvent] = useState<string | null>(null);
+
+  // Filters
+  const [filterAgent, setFilterAgent] = useState('');
+  const [filterEventType, setFilterEventType] = useState('');
+  const [offset, setOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
+  const limit = 50;
+
+  const fetchEvents = useCallback(async (currentOffset: number, append = false) => {
+    try {
+      const result = await getAuditLog({
+        limit,
+        offset: currentOffset,
+        agent_id: filterAgent || undefined,
+        event_type: filterEventType || undefined,
+      });
+      if (append) {
+        setEvents((prev) => [...prev, ...result.events]);
+      } else {
+        setEvents(result.events);
+      }
+      setHasMore(result.count === limit);
+      setLoading(false);
+    } catch {
+      setLoading(false);
+    }
+  }, [filterAgent, filterEventType]);
+
+  useEffect(() => {
+    const s = loadSession();
+    setSession(s);
+    if (s) {
+      listAgents(s.orgId).then(setAgents).catch(() => {});
+      fetchEvents(0);
+    } else {
+      setLoading(false);
+    }
+  }, [fetchEvents]);
+
+  useEffect(() => {
+    if (session) {
+      setOffset(0);
+      setLoading(true);
+      fetchEvents(0);
+    }
+  }, [filterAgent, filterEventType, session, fetchEvents]);
+
+  const loadMore = () => {
+    if (session) {
+      const newOffset = offset + limit;
+      setOffset(newOffset);
+      fetchEvents(newOffset, true);
+    }
+  };
+
+  return (
+    <div className="w-full max-w-none p-4 sm:p-6">
+      <h1 className="text-title font-semibold text-text-primary mb-6">Audit Log</h1>
+
+      {/* Filter bar */}
+      <div className="mb-4 flex flex-wrap items-center gap-3">
+        <select
+          value={filterAgent}
+          onChange={(e) => setFilterAgent(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((a) => (
+            <option key={a.id} value={a.id}>{a.name}</option>
+          ))}
+        </select>
+        <select
+          value={filterEventType}
+          onChange={(e) => setFilterEventType(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 events</option>
+          {EVENT_TYPES.map((t) => (
+            <option key={t} value={t}>{t.replace('_', ' ')}</option>
+          ))}
+        </select>
+      </div>
+
+      {loading ? (
+        <div className="overflow-hidden rounded border border-border">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <SkeletonRow key={i} />
+          ))}
+        </div>
+      ) : events.length === 0 ? (
+        <EmptyState
+          icon={FileText}
+          title="No events"
+          description="Events will appear here as agents create and resolve holds."
+        />
+      ) : (
+        <>
+          <div className="overflow-x-auto rounded border border-border dark-scroll">
+            <table className="w-full min-w-[1040px] table-fixed">
+              <colgroup>
+                <col className="w-[180px]" />
+                <col className="w-[180px]" />
+                <col className="w-[220px]" />
+                <col className="w-[120px]" />
+                <col className="w-[120px]" />
+                <col />
+              </colgroup>
+              <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">Actor</th>
+                  <th className="text-left px-4 py-2 font-medium">Event</th>
+                  <th className="text-left px-4 py-2 font-medium">Rule</th>
+                  <th className="text-left px-4 py-2 font-medium">Outcome</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 align-top hover:bg-surface-raised cursor-pointer transition-colors duration-150"
+                        onClick={() => setExpandedEvent(isExpanded ? null : event.id)}
+                      >
+                        <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 || 'Unknown'}</span>
+                        </td>
+                        <td className="px-4 py-2 text-body text-text-secondary">
+                          <div className="truncate">{event.actor_label || '-'}</div>
+                          {event.actor_type && (
+                            <div className="text-label uppercase text-text-tertiary">{event.actor_type}</div>
+                          )}
+                        </td>
+                        <td className="px-4 py-2">
+                          <Badge variant={badge.variant}>{badge.label}</Badge>
+                        </td>
+                        <td className="px-4 py-2 font-mono text-body text-text-tertiary">{event.rule_applied || '-'}</td>
+                        <td className="px-4 py-2 font-mono text-body text-text-tertiary">
+                          {event.conflicting_hold_id ? `vs ${event.conflicting_hold_id.slice(0, 8)}...` : '-'}
+                        </td>
+                      </tr>
+                      {isExpanded && (
+                        <tr className="border-b border-border">
+                          <td colSpan={6} 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,
+                                conflicting_hold_id: event.conflicting_hold_id,
+                                actor_type: event.actor_type,
+                                actor_id: event.actor_id,
+                                actor_label: event.actor_label,
+                                metadata: event.metadata,
+                              }, null, 2)}
+                            </pre>
+                          </td>
+                        </tr>
+                      )}
+                    </Fragment>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+          {hasMore && (
+            <button
+              onClick={loadMore}
+              className="mt-4 rounded bg-surface border border-border px-4 py-2 text-body text-text-secondary hover:bg-surface-raised transition-colors"
+            >
+              Load more
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}