feat: MS23-P2-007 AuditLogDrawer + audit log endpoint

apps/web/src/components/mission-control/AuditLogDrawer.tsx

@@ -0,0 +1,322 @@
+"use client";
+
+import { isValidElement, useEffect, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+import { format } from "date-fns";
+import { useQuery } from "@tanstack/react-query";
+import { Loader2 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import type { BadgeVariant } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { apiGet } from "@/lib/api/client";
+
+const AUDIT_LOG_REFRESH_INTERVAL_MS = 10_000;
+const AUDIT_LOG_PAGE_SIZE = 50;
+const SUMMARY_MAX_LENGTH = 120;
+
+interface AuditLogDrawerProps {
+  sessionId?: string;
+  trigger: ReactNode;
+}
+
+interface AuditLogEntry {
+  id: string;
+  userId: string;
+  sessionId: string;
+  provider: string;
+  action: string;
+  content: string | null;
+  metadata: unknown;
+  createdAt: string;
+}
+
+interface AuditLogResponse {
+  items: AuditLogEntry[];
+  total: number;
+  page: number;
+  pages: number;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function truncateText(value: string, maxLength: number): string {
+  if (value.length <= maxLength) {
+    return value;
+  }
+
+  return `${value.slice(0, maxLength - 1)}…`;
+}
+
+function truncateSessionId(sessionId: string): string {
+  return sessionId.slice(0, 8);
+}
+
+function formatTimestamp(value: string): string {
+  const parsed = new Date(value);
+
+  if (Number.isNaN(parsed.getTime())) {
+    return "Unknown";
+  }
+
+  return format(parsed, "yyyy-MM-dd HH:mm:ss");
+}
+
+function stringifyPayloadValue(value: unknown): string {
+  if (typeof value === "string") {
+    return value;
+  }
+
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return "[unserializable]";
+  }
+}
+
+function getPayloadSummary(entry: AuditLogEntry): string {
+  const metadata = isRecord(entry.metadata) ? entry.metadata : undefined;
+  const payload = metadata && isRecord(metadata.payload) ? metadata.payload : undefined;
+
+  if (typeof entry.content === "string" && entry.content.trim().length > 0) {
+    return truncateText(entry.content.trim(), SUMMARY_MAX_LENGTH);
+  }
+
+  if (payload) {
+    const summary = Object.entries(payload)
+      .map(([key, value]) => `${key}=${stringifyPayloadValue(value)}`)
+      .join(", ");
+
+    if (summary.length > 0) {
+      return truncateText(summary, SUMMARY_MAX_LENGTH);
+    }
+  }
+
+  return "—";
+}
+
+function getActionVariant(action: string): BadgeVariant {
+  switch (action) {
+    case "inject":
+      return "badge-blue";
+    case "pause":
+      return "status-warning";
+    case "resume":
+      return "status-success";
+    case "kill":
+      return "status-error";
+    default:
+      return "status-neutral";
+  }
+}
+
+async function fetchAuditLog(
+  sessionId: string | undefined,
+  page: number
+): Promise<AuditLogResponse> {
+  const params = new URLSearchParams({
+    page: String(page),
+    limit: String(AUDIT_LOG_PAGE_SIZE),
+  });
+
+  const normalizedSessionId = sessionId?.trim();
+  if (normalizedSessionId && normalizedSessionId.length > 0) {
+    params.set("sessionId", normalizedSessionId);
+  }
+
+  return apiGet<AuditLogResponse>(`/api/mission-control/audit-log?${params.toString()}`);
+}
+
+export function AuditLogDrawer({ sessionId, trigger }: AuditLogDrawerProps): React.JSX.Element {
+  const [open, setOpen] = useState(false);
+  const [page, setPage] = useState(1);
+
+  const triggerElement = useMemo(
+    () =>
+      isValidElement(trigger) ? (
+        trigger
+      ) : (
+        <Button variant="outline" size="sm">
+          {trigger}
+        </Button>
+      ),
+    [trigger]
+  );
+
+  const auditLogQuery = useQuery<AuditLogResponse>({
+    queryKey: ["mission-control", "audit-log", sessionId ?? "all", page],
+    queryFn: async (): Promise<AuditLogResponse> => fetchAuditLog(sessionId, page),
+    enabled: open,
+    refetchInterval: open ? AUDIT_LOG_REFRESH_INTERVAL_MS : false,
+  });
+
+  useEffect(() => {
+    if (open) {
+      setPage(1);
+    }
+  }, [open, sessionId]);
+
+  useEffect(() => {
+    const pages = auditLogQuery.data?.pages;
+    if (pages !== undefined && pages > 0 && page > pages) {
+      setPage(pages);
+    }
+  }, [auditLogQuery.data?.pages, page]);
+
+  const totalItems = auditLogQuery.data?.total ?? 0;
+  const totalPages = auditLogQuery.data?.pages ?? 0;
+  const items = auditLogQuery.data?.items ?? [];
+
+  const canGoPrevious = page > 1;
+  const canGoNext = totalPages > 0 && page < totalPages;
+  const errorMessage =
+    auditLogQuery.error instanceof Error ? auditLogQuery.error.message : "Failed to load audit log";
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>{triggerElement}</SheetTrigger>
+      <SheetContent className="sm:max-w-[920px]">
+        <SheetHeader>
+          <div className="flex items-center justify-between gap-3">
+            <SheetTitle>Audit Log</SheetTitle>
+            {auditLogQuery.isFetching ? (
+              <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" aria-hidden="true" />
+            ) : null}
+          </div>
+          <SheetDescription>
+            {sessionId
+              ? `Showing actions for session ${sessionId}.`
+              : "Showing operator actions across all mission control sessions."}
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="mt-4 flex min-h-0 flex-1 flex-col gap-3">
+          <div className="rounded-md border border-border/70">
+            <ScrollArea className="h-[64vh]">
+              <table className="w-full min-w-[760px] border-collapse text-sm">
+                <thead className="sticky top-0 z-10 bg-muted/90">
+                  <tr>
+                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
+                      Timestamp
+                    </th>
+                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
+                      Action
+                    </th>
+                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
+                      Session
+                    </th>
+                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
+                      Operator
+                    </th>
+                    <th className="px-3 py-2 text-left font-medium text-muted-foreground">
+                      Payload
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {auditLogQuery.isLoading ? (
+                    <tr>
+                      <td
+                        colSpan={5}
+                        className="px-3 py-6 text-center text-sm text-muted-foreground"
+                      >
+                        Loading audit log...
+                      </td>
+                    </tr>
+                  ) : auditLogQuery.error ? (
+                    <tr>
+                      <td colSpan={5} className="px-3 py-6 text-center text-sm text-red-500">
+                        {errorMessage}
+                      </td>
+                    </tr>
+                  ) : items.length === 0 ? (
+                    <tr>
+                      <td
+                        colSpan={5}
+                        className="px-3 py-6 text-center text-sm text-muted-foreground"
+                      >
+                        No audit entries found.
+                      </td>
+                    </tr>
+                  ) : (
+                    items.map((entry) => {
+                      const payloadSummary = getPayloadSummary(entry);
+
+                      return (
+                        <tr key={entry.id} className="border-t border-border/60 align-top">
+                          <td className="px-3 py-2 font-mono text-xs text-muted-foreground">
+                            {formatTimestamp(entry.createdAt)}
+                          </td>
+                          <td className="px-3 py-2">
+                            <Badge variant={getActionVariant(entry.action)} className="capitalize">
+                              {entry.action}
+                            </Badge>
+                          </td>
+                          <td className="px-3 py-2 font-mono text-xs" title={entry.sessionId}>
+                            {truncateSessionId(entry.sessionId)}
+                          </td>
+                          <td
+                            className="px-3 py-2 text-xs text-muted-foreground"
+                            title={entry.userId}
+                          >
+                            {entry.userId}
+                          </td>
+                          <td className="px-3 py-2 text-xs" title={payloadSummary}>
+                            {payloadSummary}
+                          </td>
+                        </tr>
+                      );
+                    })
+                  )}
+                </tbody>
+              </table>
+            </ScrollArea>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-muted-foreground">{totalItems} total entries</p>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!canGoPrevious || auditLogQuery.isFetching}
+                onClick={() => {
+                  setPage((currentPage) => Math.max(1, currentPage - 1));
+                }}
+              >
+                Previous
+              </Button>
+              <span className="text-xs text-muted-foreground">
+                Page {page} of {Math.max(totalPages, 1)}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!canGoNext || auditLogQuery.isFetching}
+                onClick={() => {
+                  setPage((currentPage) => currentPage + 1);
+                }}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

apps/web/src/components/mission-control/MissionControlLayout.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { useState } from "react";
+import { AuditLogDrawer } from "@/components/mission-control/AuditLogDrawer";
 import { GlobalAgentRoster } from "@/components/mission-control/GlobalAgentRoster";
 import { MissionControlPanel } from "@/components/mission-control/MissionControlPanel";
+import { Button } from "@/components/ui/button";
 import { useSessions } from "@/hooks/useMissionControl";
 
 const DEFAULT_PANEL_SLOTS = ["panel-1", "panel-2", "panel-3", "panel-4"] as const;
@@ -16,12 +18,22 @@ export function MissionControlLayout(): React.JSX.Element {
   const panelSessionIds = [firstPanelSessionId, undefined, undefined, undefined] as const;
 
   return (
-    <section className="h-full min-h-0 overflow-hidden" aria-label="Mission Control">
-      <div className="grid h-full min-h-0 gap-4 xl:grid-cols-[280px_minmax(0,1fr)]">
+    <section className="flex h-full min-h-0 flex-col overflow-hidden" aria-label="Mission Control">
+      <header className="mb-3 flex items-center justify-end">
+        <AuditLogDrawer
+          trigger={
+            <Button variant="outline" size="sm">
+              Audit Log
+            </Button>
+          }
+        />
+      </header>
+
+      <div className="grid min-h-0 flex-1 gap-4 xl:grid-cols-[280px_minmax(0,1fr)]">
         <aside className="h-full min-h-0">
           <GlobalAgentRoster
             onSelectSession={setSelectedSessionId}
-            {...(selectedSessionId ? { selectedSessionId } : {})}
+            {...(selectedSessionId !== undefined ? { selectedSessionId } : {})}
           />
         </aside>
         <main className="h-full min-h-0 overflow-hidden">

apps/web/src/components/ui/sheet.tsx

@@ -0,0 +1,137 @@
+import * as React from "react";
+import { X } from "lucide-react";
+
+export interface SheetProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: React.ReactNode;
+}
+
+export interface SheetTriggerProps {
+  children?: React.ReactNode;
+  asChild?: boolean;
+}
+
+export interface SheetContentProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface SheetHeaderProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface SheetTitleProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface SheetDescriptionProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const SheetContext = React.createContext<{
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}>({});
+
+export function Sheet({ open, onOpenChange, children }: SheetProps): React.JSX.Element {
+  const contextValue: { open?: boolean; onOpenChange?: (open: boolean) => void } = {};
+
+  if (open !== undefined) {
+    contextValue.open = open;
+  }
+
+  if (onOpenChange !== undefined) {
+    contextValue.onOpenChange = onOpenChange;
+  }
+
+  return <SheetContext.Provider value={contextValue}>{children}</SheetContext.Provider>;
+}
+
+export function SheetTrigger({ children, asChild }: SheetTriggerProps): React.JSX.Element {
+  const { onOpenChange } = React.useContext(SheetContext);
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children, {
+      onClick: () => onOpenChange?.(true),
+    } as React.HTMLAttributes<HTMLElement>);
+  }
+
+  return (
+    <button type="button" onClick={() => onOpenChange?.(true)}>
+      {children}
+    </button>
+  );
+}
+
+export function SheetContent({
+  children,
+  className = "",
+}: SheetContentProps): React.JSX.Element | null {
+  const { open, onOpenChange } = React.useContext(SheetContext);
+
+  React.useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === "Escape") {
+        onOpenChange?.(false);
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return (): void => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [onOpenChange, open]);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 z-50">
+      <button
+        type="button"
+        aria-label="Close sheet"
+        className="absolute inset-0 h-full w-full bg-black/50"
+        onClick={() => onOpenChange?.(false)}
+      />
+
+      <div
+        className={`absolute inset-y-0 right-0 z-10 flex h-full w-full max-w-3xl flex-col border-l border-border bg-background p-6 shadow-xl ${className}`}
+      >
+        <button
+          type="button"
+          onClick={() => onOpenChange?.(false)}
+          className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100"
+        >
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </button>
+
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function SheetHeader({ children, className = "" }: SheetHeaderProps): React.JSX.Element {
+  return <div className={`space-y-1 pr-8 ${className}`}>{children}</div>;
+}
+
+export function SheetTitle({ children, className = "" }: SheetTitleProps): React.JSX.Element {
+  return <h2 className={`text-lg font-semibold ${className}`}>{children}</h2>;
+}
+
+export function SheetDescription({
+  children,
+  className = "",
+}: SheetDescriptionProps): React.JSX.Element {
+  return <p className={`text-sm text-muted-foreground ${className}`}>{children}</p>;
+}