feat(api): add audit helpers, tool registry, shared tool manifest types, and UI primitives

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -0,0 +1,29 @@
+import { clsx } from "clsx";
+
+interface BadgeProps {
+  children: React.ReactNode;
+  variant?: "default" | "success" | "warning" | "danger" | "info";
+  className?: string;
+}
+
+const variantClasses = {
+  default: "bg-gray-100 text-gray-700",
+  success: "bg-green-100 text-green-700",
+  warning: "bg-yellow-100 text-yellow-700",
+  danger: "bg-red-100 text-red-700",
+  info: "bg-blue-100 text-blue-700",
+};
+
+export function Badge({ children, variant = "default", className }: BadgeProps) {
+  return (
+    <span
+      className={clsx(
+        "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
+        variantClasses[variant],
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { clsx } from "clsx";
+import type { ButtonHTMLAttributes } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "ghost" | "danger";
+  size?: "sm" | "md" | "lg";
+}
+
+const variantClasses = {
+  primary: "bg-brand-600 hover:bg-brand-700 text-white",
+  secondary: "bg-white hover:bg-gray-50 text-gray-700 border border-gray-300",
+  ghost: "text-gray-600 hover:bg-gray-100",
+  danger: "bg-red-600 hover:bg-red-700 text-white",
+};
+
+const sizeClasses = {
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-4 py-2 text-sm",
+  lg: "px-6 py-3 text-base",
+};
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  className,
+  children,
+  disabled,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={clsx(
+        "inline-flex items-center justify-center font-medium rounded-lg transition-all duration-75",
+        "focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2",
+        "active:scale-[0.97]",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        variantClasses[variant],
+        sizeClasses[size],
+        className,
+      )}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

apps/web/src/hooks/useLocalStorage.ts

@@ -0,0 +1,72 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * Persist a value in localStorage with SSR safety and JSON serialization.
+ *
+ * When `T` is a plain object, stored values are merged with `defaultValue`
+ * so fields added to the schema later get their defaults filled in.
+ * For primitive types (string, number, boolean) the stored value is used as-is.
+ *
+ * The optional `changeEventName` parameter causes every write to dispatch a
+ * CustomEvent so other instances of the hook in the same tab stay in sync.
+ */
+export function useLocalStorage<T>(
+  key: string,
+  defaultValue: T,
+  changeEventName?: string,
+): [T, (updater: T | ((prev: T) => T)) => void] {
+  const [value, setValue] = useState<T>(() => read(key, defaultValue));
+
+  // Re-read after hydration (SSR → client) and subscribe to cross-instance events.
+  useEffect(() => {
+    setValue(read(key, defaultValue));
+
+    if (!changeEventName) return;
+    function handleChange(e: Event) {
+      setValue((e as CustomEvent<T>).detail);
+    }
+    window.addEventListener(changeEventName, handleChange);
+    return () => window.removeEventListener(changeEventName, handleChange);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, changeEventName]);
+
+  const set = useCallback(
+    (updater: T | ((prev: T) => T)) => {
+      setValue((prev) => {
+        const next = typeof updater === "function" ? (updater as (p: T) => T)(prev) : updater;
+        if (typeof window !== "undefined") {
+          localStorage.setItem(key, JSON.stringify(next));
+          if (changeEventName) {
+            window.dispatchEvent(new CustomEvent<T>(changeEventName, { detail: next }));
+          }
+        }
+        return next;
+      });
+    },
+    [key, changeEventName],
+  );
+
+  return [value, set];
+}
+
+function read<T>(key: string, defaultValue: T): T {
+  if (typeof window === "undefined") return defaultValue;
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return defaultValue;
+    const parsed = JSON.parse(raw) as T;
+    // For plain objects, merge with defaults to handle schema evolution.
+    if (isPlainObject(defaultValue) && isPlainObject(parsed)) {
+      return { ...defaultValue, ...parsed } as T;
+    }
+    return parsed;
+  } catch {
+    return defaultValue;
+  }
+}
+
+function isPlainObject(v: unknown): v is Record<string, unknown> {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}