refactor(frontend): finish shadcn→custom primitive migration (green build)

- Remove tw-animate-css import + dead src/components/ui shadcn tree
- Convert 7 orphaned components (moderation, analysis, guild-selector,
  voice/activity-timeline, shared/empty+error) to new primitives
- Add missing moderation/view.tsx; analysis uses SearchPanel directly
- globals.css now uses new signal-driven ops-console tokens
- tsc --noEmit clean, next build green (11 routes), local smoke 200

services/frontend/src/components/shared/empty-state.tsx

@@ -1,8 +1,5 @@
-"use client";
-
 import type { LucideIcon } from "lucide-react";
 import { Inbox } from "lucide-react";
-import { Card } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 
 interface EmptyStateProps {
@@ -19,16 +16,15 @@ export function EmptyState({
   className,
 }: EmptyStateProps) {
   return (
-    <Card
+    <div
       className={cn(
-        "flex flex-col items-center gap-2 py-12",
+        "surface flex flex-col items-center gap-2 py-12 text-center",
         className,
-        "[--card-spacing:0px]",
       )}
     >
-      <Icon className="size-8 text-text-secondary/20" />
-      <p className="text-sm text-text-secondary/60">{title}</p>
-      <p className="text-xs text-text-secondary/40">{description}</p>
-    </Card>
+      <Icon className="size-8 text-[var(--color-ink-soft)]" />
+      <p className="text-sm font-medium text-[var(--color-ink)]">{title}</p>
+      <p className="text-xs text-[var(--color-ink-soft)]">{description}</p>
+    </div>
   );
 }

services/frontend/src/components/shared/error-boundary.tsx

@@ -1,8 +1,5 @@
-"use client";
-
 import { AlertCircle, RefreshCw } from "lucide-react";
 import { Component, type ReactNode } from "react";
-import { Card } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 
 interface Props {
@@ -25,26 +22,19 @@ export class ErrorBoundary extends Component<Props, State> {
     if (this.state.hasError) {
       return (
         this.props.fallback || (
-          <Card
-            className={cn(
-              "flex flex-col items-center gap-2 py-8",
-              "border border-red-500/30 ring-red-500/20",
-              "[--card-spacing:0px]",
-              "rounded-2xl",
-            )}
-          >
-            <AlertCircle className="size-6 text-destructive" />
-            <p className="text-sm text-text-secondary">
+          <div className={cn("surface flex flex-col items-center gap-2 py-8")}>
+            <AlertCircle className="size-6 text-[var(--color-vermilion)]" />
+            <p className="text-sm text-[var(--color-ink)]">
               {this.state.error?.message || "Something went wrong"}
             </p>
             <button
               type="button"
               onClick={() => this.setState({ hasError: false })}
-              className="flex items-center gap-1 text-xs text-primary hover:text-primary/80 transition-colors"
+              className="flex items-center gap-1 text-xs text-[var(--color-signal)] hover:opacity-80 transition-colors"
             >
               <RefreshCw className="size-3" /> Try again
             </button>
-          </Card>
+          </div>
         )
       );
     }

services/frontend/src/components/shared/error-state.tsx

@@ -1,21 +1,18 @@
 import { AlertCircle, RefreshCw } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/primitives/button";
 
 interface ErrorStateProps {
   message: string;
   onRetry?: () => void;
 }
 
-/**
- * Consistent error state for data-fetching pages.
- * Shows the error message with an optional retry button.
- */
 export function ErrorState({ message, onRetry }: ErrorStateProps) {
   return (
     <div className="flex flex-col items-center justify-center py-20 text-center">
-      <AlertCircle className="size-10 text-destructive mb-3" />
-      <p className="text-sm text-muted-foreground mb-4 max-w-sm">{message}</p>
+      <AlertCircle className="size-10 text-[var(--color-vermilion)] mb-3" />
+      <p className="text-sm text-[var(--color-ink-soft)] mb-4 max-w-sm">
+        {message}
+      </p>
       {onRetry && (
         <Button variant="outline" onClick={onRetry}>
           <RefreshCw className="size-4 mr-2" />

services/frontend/src/components/shared/guild-selector.tsx

@@ -1,18 +1,12 @@
 "use client";
 
-import { AlertCircle, RefreshCw, Server } from "lucide-react";
+import { AlertCircle, RefreshCw } from "lucide-react";
 import { useEffect, useRef } from "react";
 
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Skeleton } from "@/components/ui/skeleton";
+import { Badge } from "@/components/primitives/badge";
+import { Button } from "@/components/primitives/button";
+import { Select } from "@/components/primitives/select";
+import { Skeleton } from "@/components/primitives/skeleton";
 import { useConfig, useGuilds } from "@/hooks";
 
 export interface GuildSelectorProps {
@@ -24,10 +18,6 @@ export interface GuildSelectorProps {
   autoHide?: boolean;
 }
 
-/**
- * Guild selector bar — fetches the guild list and renders a <Select>.
- * Optionally auto-hides when there's exactly one guild.
- */
 export function GuildSelector({
   value,
   onChange,
@@ -45,24 +35,23 @@ export function GuildSelector({
     if (preferred) onChange(preferred);
   }, [value, guilds, config, onChange]);
 
-  // Auto-hide when there's exactly one guild and autoHide is on
   if (autoHide && guilds.length <= 1 && !isLoading && !error) return null;
 
   if (isLoading) {
     return (
-      <div className="flex items-center gap-3 rounded-xl border border-border/50 bg-card p-3">
+      <div className="flex items-center gap-3 rounded-[var(--radius-r)] bg-[var(--color-surface)] p-3">
         <Skeleton className="h-8 w-36" />
-        <Skeleton className="h-8 w-8 rounded-full" />
+        <Skeleton rounded className="h-8 w-8" />
       </div>
     );
   }
 
   if (error) {
     return (
-      <div className="flex items-center justify-between rounded-xl border border-destructive/20 bg-destructive/5 p-3">
+      <div className="flex items-center justify-between rounded-[var(--radius-r)] bg-[var(--color-vermilion)]/10 p-3">
         <div className="flex items-center gap-2">
-          <AlertCircle className="size-4 text-destructive shrink-0" />
-          <p className="text-sm text-muted-foreground">
+          <AlertCircle className="size-4 text-[var(--color-vermilion)] shrink-0" />
+          <p className="text-sm text-[var(--color-ink-soft)]">
             Could not load guilds: {error?.message ?? "Failed to load"}
           </p>
         </div>
@@ -76,10 +65,10 @@ export function GuildSelector({
 
   if (guilds.length === 0) {
     return (
-      <div className="rounded-xl border border-yellow-500/20 bg-yellow-500/5 p-3">
+      <div className="rounded-[var(--radius-r)] bg-[var(--color-amber)]/10 p-3">
         <div className="flex items-center gap-2">
-          <AlertCircle className="size-4 text-yellow-500 shrink-0" />
-          <p className="text-sm text-muted-foreground">
+          <AlertCircle className="size-4 text-[var(--color-amber)] shrink-0" />
+          <p className="text-sm text-[var(--color-ink-soft)]">
             No guilds available. Make sure the Discord gateway is connected.
           </p>
         </div>
@@ -88,35 +77,20 @@ export function GuildSelector({
   }
 
   return (
-    <div className="flex items-center gap-3 rounded-xl border border-border/50 bg-card p-3">
-      <Badge variant="outline" className="shrink-0 text-xs font-normal">
+    <div className="flex items-center gap-3 rounded-[var(--radius-r)] bg-[var(--color-surface)] p-3">
+      <Badge tone="neutral" className="shrink-0 text-xs font-normal">
         Guild
       </Badge>
-      <Select value={value} onValueChange={(v) => v && onChange(v)}>
-        <SelectTrigger className="h-10 w-full max-w-sm">
-          <SelectValue placeholder="Select a guild…">
-            {guilds.find((g) => g.id === value)?.name}
-          </SelectValue>
-        </SelectTrigger>
-        <SelectContent>
-          {guilds.map((g) => (
-            <SelectItem key={g.id} value={g.id}>
-              <span className="flex items-center gap-2">
-                {g.icon ? (
-                  // biome-ignore lint/performance/noImgElement: guild icon is a remote Discord CDN URL
-                  <img
-                    src={g.icon}
-                    alt=""
-                    className="size-4 rounded-full object-cover"
-                  />
-                ) : (
-                  <Server className="size-4 text-muted-foreground" />
-                )}
-                <span className="line-clamp-1">{g.name}</span>
-              </span>
-            </SelectItem>
-          ))}
-        </SelectContent>
+      <Select
+        value={value}
+        onChange={(e) => e.target.value && onChange(e.target.value)}
+        className="h-10 w-full max-w-sm"
+      >
+        {guilds.map((g) => (
+          <option key={g.id} value={g.id}>
+            {g.name}
+          </option>
+        ))}
       </Select>
     </div>
   );