GMW/docs/superpowers/specs/2026-07-28-discord-automod-redesign.md

name, version, date, status, inspiration, colors, typography, radius

name	version	date	status	inspiration	colors	typography	radius
Discord Automod — Neo Surveillance Redesign	1.0.0	2026-07-28	approved	Summit Cloud Migration Platform (glassmorphic, dark premium) AeroNet Visualization (data panels, modular layout)	canvas surface surface-hover border border-glow primary primary-glow accent-purple accent-amber text-primary text-secondary text-mono glass-bg glass-border glass-shadow oklch(0.07 0.015 250) oklch(0.11 0.02 245 / 0.6) oklch(0.15 0.02 245 / 0.7) oklch(1 0 0 / 0.06) oklch(0.62 0.17 215 / 0.3) oklch(0.62 0.17 215) oklch(0.62 0.17 215 / 0.4) oklch(0.65 0.2 280) oklch(0.7 0.17 75) oklch(0.93 0.01 245) oklch(0.55 0.02 245) oklch(0.62 0.17 215) oklch(1 0 0 / 0.04) oklch(1 0 0 / 0.08) 0 8px 32px oklch(0 0 0 / 0.4)	display body mono data Inter 28-48px weight 600 Inter 14-16px weight 400 JetBrains Mono 11-13px weight 500-600 JetBrains Mono 24-36px weight 600, teal tint	card panel control pill 16px 12px 8px 9999px

Discord Automod — Neo Surveillance Redesign

Full frontend redesign for Discord Automod, a Discord moderation watcher dashboard. Complete rewrite of layout, design system, navigation, and page architecture.

---

1. Design Philosophy

"Neo Surveillance" — a Security Operations Center (SOC) inspired dashboard where monitoring feels immersive and powerful. Full-screen glass panels float over a dark animated canvas. No persistent sidebar clutter. The interface disappears into the background, letting live data and alerts take center stage.

Key pillars:

• Immersion — Full-viewport canvas with ambient motion, glass panels float over content
• Awareness — Live data streams, real-time voice waveforms, animated moderation alerts
• Presence — Live2D vtuber mascot character as chatbot interface, reacts to server events

---

2. Layout & Navigation System

2.1 Global Structure

┌──────────────────────────────────────────────────────┐
│  ● Discord Automod  Dashboard Msgs Voice …  🟢 ●  │  ← Floating Top Bar (~44px)
├──────────────────────────────────────────────────────┤
│  [Sub-navigation tabs] ← muncul per-page              │
│━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━│
│                                                        │
│   ┌─────────┐  ┌──────────────┐                       │
│   │  Glass   │  │   Content    │                       │
│   │  Panels  │  │   Area       │                       │
│   │          │  │   (scroll)   │                       │
│   └─────────┘  └──────────────┘                       │
│                                                        │
├──────────────────────────────────────────────────────┤
│ 🎵 [Mini-player] ← bottom-left        🎭 [Mascot] ← BR │
└──────────────────────────────────────────────────────┘

2.2 Floating Top Navigation Bar

• Style: Glass (backdrop-blur-xl), subtle glow border bottom, h-11 (44px)
• Left: App logo "Discord Automod" with teal live dot indicator + current page name
• Center: Horizontal nav links — Dashboard, Messages, Voice, Recordings, Settings
  • Icon + label, active state with glow underline (box-shadow teal)
  • Hover: text brighter, no background fill
  • Search has no nav link — triggered globally via Cmd+K or / shortcut, opens spotlight
• Right: Connection status dot (pulse when connected) + theme toggle (sun/moon icon)
• Hover sidebar hotspot: Left edge 4px trigger → slide-in sidebar with guild selector, bookmarks, recent channels (auto-hide 300ms after mouse leave)

2.3 Sub-navigation

Each page has its own tab bar below the top nav, also glass-styled:

• Dashboard: Stats | Live | Activity
• Messages: All | Images | Review
• Voice: Connection | Activity
• Recordings: Library | Stats
• Settings: Connection | Appearance | Config | About

2.4 Hidden Sidebar (Hover-activated)

• Trigger: 4px hotspot at left screen edge
• Slide-in animation (150ms, ease-out-expo)
• Contains: guild selector dropdown, bookmarked channels, recent activity shortcuts
• Auto-hide on mouse leave with 300ms delay

2.5 Floating Media Player

• No dedicated Media page — persistent floating mini-player at bottom-left
• Visible only when a track is active
• Click to expand: full queue management overlay
• Controls: play/pause, skip, stop, volume slider, progress bar

---

3. Design Tokens

3.1 Color Palette

Token	Value	Usage
--canvas	oklch(0.07 0.015 250)	Deep navy background
--surface	oklch(0.11 0.02 245 / 0.6)	Glass card base
--surface-hover	oklch(0.15 0.02 245 / 0.7)	Card hover state
--border	oklch(1 0 0 / 0.06)	Subtle border
--border-glow	oklch(0.62 0.17 215 / 0.3)	Active card border glow
--primary	oklch(0.62 0.17 215)	Teal-cyan accent, buttons
--primary-glow	oklch(0.62 0.17 215 / 0.4)	Active state glow
--accent-purple	oklch(0.65 0.2 280)	Moderation flagged items
--accent-amber	oklch(0.7 0.17 75)	Warnings
--text-primary	oklch(0.93 0.01 245)	Body text
--text-secondary	oklch(0.55 0.02 245)	Secondary labels
--text-mono	oklch(0.62 0.17 215)	Data metrics (teal tint)
--glass-bg	oklch(1 0 0 / 0.04)	Glass base
--glass-border	oklch(1 0 0 / 0.08)	Glass border
--glass-shadow	0 8px 32px oklch(0 0 0 / 0.4)	Glass shadow

3.2 Typography

Role	Font	Size / Weight
Display	Inter	28-48px, weight 600
Body	Inter	14-16px, weight 400
Label / Mono	JetBrains Mono	11-13px, weight 500-600
Data metrics	JetBrains Mono	24-36px, weight 600, teal tint

3.3 Radius System

Token	Value
Card	16px
Panel	12px
Button / Control	8px
Pill	9999px

3.4 Motion Tokens

--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 400ms;

---

4. Component System

4.1 Glass Card System

• Base: glass-bg + glass-border + border-radius 16px
• Elevated: Deeper shadow + subtle primary glow border
• Interactive: Hover scale(1.01) + border glow intensify
• Danger: Red-tinted border for critical items
• Inner padding: 20px (card), 16px (panel), 12px (dense)

4.2 Button Variants

Variant	Style
Primary	bg-primary + shadow-[0_0_12px] shadow-primary/40 (glow)
Secondary	glass-bg + border
Ghost	Transparent, hover → subtle glass bg
Icon	Size 32px, rounded 8px
Danger	Red-tinted variant for destructive actions

4.3 Status Indicators

• Live dot: Pulsing ring animation (pulse-ring 1.5s)
• AI Badge: Teal pill with sparkle icon, mono font
• Severity badges: Clean (green), Warn (amber), Flagged (purple), Critical (red)
• Connection: Green (connected), Yellow (connecting), Red (disconnected)

4.4 Charts (Recharts)

Custom theme matching design tokens:

• Line/Area: gradient fill (primary → transparent)
• Bar: rounded bars, teal-cyan gradient
• Heatmap: activity by hour × weekday
• Radar: multi-axis for moderation categories

4.5 Live2D Mascot / Chatbot

• Replaces the existing Chatbot component entirely — mascot panel is the new chat interface
• Location: Floating panel, bottom-right corner, draggable
• Default size: Compact — upper body visible (~200×280px)
• Click character: Expand with full chat panel
• Dynamic expressions:
  • Idle: subtle breathing, blink every 4s
  • New message: head tilt "listening"
  • Flagged detected: eyes widen, ! bubble
  • User click: happy wave
  • Voice active: ear/head tilt toward audio
  • Chat reply: mouth sync animation
  • Disconnect: sad expression
• Technology: Live2D Cubism SDK (WebGL via pixi.js wrapper), .model3.json + .moc3 format
• Chat panel: Glass-styled input + message history, context-aware (server context)

4.6 Loading States

• Skeleton: Glass card shape with shimmer gradient (teal → transparent → teal)
• Button loading: Spinner within button
• Full page: Glass skeleton grid matching target layout

---

5. Page Layouts

5.1 Dashboard — "Ops Center"

Full-viewport command center:

• Stat cards row: Total Messages, Today, Users, Active 24h, Flagged, Clean — each with micro sparkline chart (Recharts mini area) behind the number
• Live Message Stream: Auto-scrolling glass panel showing recent messages, fade-in animation, click for detail
• Mod Queue: Flagged messages with quick action buttons (approve/delete/escalate)
• Message Trend Chart: 7-day area chart
• Activity Heatmap: Hour × day-of-week, moderation event density
• Top Channels: Bar chart with channel names
• Mascot visible floating bottom-right

5.2 Messages — Split Pane

• Left pane: Scrollable message list, glass cards with severity badge, channel tag, timestamp
• Right pane: Detail/preview — full message content, attachments gallery, AI analysis breakdown (severity, flags, confidence, categories)
• Global search bar in top area: spotlight-style overlay (Cmd+K)
• State in URL params: ?guild=xxx&channel=yyy&selected=msg123&tab=all
• Tabs: All | Images (grid view) | Review (flagged queue)
• Actions: Reanalyze, Moderate (dropdown: delete/warn/escalate)

5.3 Voice — Connection Center

• Connection card: Guild/channel selectors, status with live dot + duration
• Active Speakers: Per-user waveform visualization (canvas-based, 100ms update)
• Microphone/Transmit: Toggle mic, volume slider
• Voice Activity Timeline: Bar chart showing who spoke and total duration
• Recordings quick link to Recordings page

5.4 Recordings — Voice Library

• Search + filter bar: By user, channel, date range
• Recording cards: Glass card, waveform preview (canvas), duration, timestamp
• Inline playback: Play button, audio player without leaving page
• Actions: Download, Copy Link

5.5 Settings

• Sections: Connection (WebSocket status, guild info), Appearance (theme toggle), Server Config (read-only), About
• All glass cards, mono font for config values
• Toggle switches with glass styling

---

6. Animations & Micro-interactions

6.1 Ambient Background

• Gradient mesh with slow-shift (30s cycle)
• 2-3 soft color blobs (teal, purple, amber), opacity 0.03-0.06
• Grid dot pattern: radial-gradient(circle, oklch(1 0 0 / 0.025) 1px, transparent 1px), 24px spacing

6.2 Page Transitions

• Route change: fade-in-up 200ms ease-out
• Content section: scale(0.98→1) + opacity(0.6→1)

6.3 Card Interactions

• Hover: scale(1.01) + border glow intensify + shadow lift
• Click: scale(0.98) brief (100ms)
• Panel enter: translateY(-4px) + opacity fade-in
• Stat counter: count-up animation (JS tween, 400ms)

6.4 Live Data

• Message stream: fade-in from top, slide down as new arrive
• Voice waveform: real-time canvas draw, 100ms interval
• Recording: pulsing dot + ring expansion (1.5s loop)
• Connection: slow pulse when connected
• Flagged: brief red/purple border flash on new flagged message

6.5 Micro-interactions

• Toggle: slide with glow
• Scrollbar: custom thin (6px), auto-hide, rounded
• Drag handle: subtle dot grip for split pane
• Copy: brief "Copied!" toast
• Reanalyze: 360° icon rotation

---

7. Data Flow & State Management

7.1 Architecture

WS Provider (auto-reconnect, typed events, event buffer)
  ↓
TanStack Query (fetches + cache)
  ↓
Query invalidation on WS events
  ↓
Optimistic cache updates for real-time data

7.2 WS → Cache Strategy

WS Event	Action
message_created	Optimistic insert to message list + dashboard stats
message_analyzed	Update AI fields in message cache
message_deleted	Remove from cache + update counters
voice_recording_started	Update voice status
voice_pcm_data	Buffer to waveform canvas (bypass React)
voice_active_user	Update speakers cache
analysis_queue_status	Update queue progress

7.3 Query Config

• staleTime: 10_000 (10s)
• gcTime: 5 * 60 * 1000 (5 min)
• refetchOnWindowFocus: false

7.4 Global State (React Context)

• useMediaPlayer() — current track, queue, play/skip/stop/volume
• useMascot() — expression, minimized, chatHistory, setExpression
  • Externally triggerable: mascot.setExpression("surprise") on flagged message, ("listening") on voice activity

7.5 URL State

Persistent page state via search params (not React state):

/messages?guild=xxx&channel=yyy&selected=msg123&tab=all

7.6 Error Boundaries

Each page has its own error boundary. One page failure doesn't affect others.

---

8. Technology Stack

• Framework: Next.js 16 (App Router, static export)
• Language: TypeScript strict
• Styling: Tailwind v4 + CSS custom properties
• UI Base: shadcn/ui components (adapted for glass theme)
• Icons: lucide-react
• State/data: @tanstack/react-query v5
• Charts: Recharts 3.8 (with custom theme)
• 3D/Mascot: Live2D Cubism SDK WebGL (pixi.js wrapper)
• Audio: Web Audio API for waveform visualization
• Animation: CSS animations + transitions (no GSAP/framer-motion dependency unless specifically needed)

---

9. File Structure (New)

src/
├── app/
│   ├── layout.tsx                    # Root layout (fonts, theme script, Toaster)
│   ├── page.tsx                      # Redirect → /dashboard
│   ├── globals.css                   # Complete redesign CSS (tokens, glass, animations)
│   └── (dashboard)/
│       ├── layout.tsx                # Dashboard layout (top nav, QueryClient, WS, mascot)
│       ├── dashboard/
│       │   └── page.tsx              # Ops Center
│       ├── messages/
│       │   └── page.tsx              # Split pane messages
│       ├── voice/
│       │   └── page.tsx              # Voice connection center
│       ├── recordings/
│       │   └── page.tsx              # Recording library
│       └── settings/
│           └── page.tsx              # Settings page
│
├── components/
│   ├── layout/
│   │   ├── top-nav.tsx               # Floating top navigation bar
│   │   ├── sub-nav.tsx               # Per-page sub-navigation tabs
│   │   ├── hidden-sidebar.tsx        # Hover-activated guild sidebar
│   │   └── mobile-nav.tsx           # Mobile bottom nav (updated design)
│   │
│   ├── glass/
│   │   ├── card.tsx                  # Glass card component (base, elevated, interactive)
│   │   ├── panel.tsx                 # Glass panel wrapper
│   │   └── divider.tsx              # Glass-styled separator
│   │
│   ├── dashboard/
│   │   ├── stat-card.tsx             # Stat card with micro sparkline
│   │   ├── live-stream.tsx           # Auto-scrolling message stream
│   │   ├── mod-queue.tsx             # Moderation queue with quick actions
│   │   ├── message-trend-chart.tsx   # 7-day area chart
│   │   ├── activity-heatmap.tsx      # Hour × day heatmap
│   │   └── top-channels-chart.tsx    # Top channels bar chart
│   │
│   ├── messages/
│   │   ├── message-list.tsx          # Left pane — scrollable message list
│   │   ├── message-card.tsx          # Individual message card (redesigned)
│   │   ├── message-detail.tsx        # Right pane — full detail
│   │   ├── attachments-grid.tsx      # Attachments gallery
│   │   ├── ai-analysis-panel.tsx     # AI analysis breakdown
│   │   └── search-overlay.tsx        # Cmd+K search spotlight
│   │
│   ├── voice/
│   │   ├── connection-card.tsx       # Guild/channel selector + status
│   │   ├── speaker-waveform.tsx      # Canvas waveform per speaker
│   │   ├── mic-control.tsx           # Mic toggle + volume
│   │   └── activity-timeline.tsx     # Voice activity bar chart
│   │
│   ├── recordings/
│   │   ├── recording-card.tsx        # Glass card with waveform preview
│   │   └── recording-player.tsx      # Inline audio player
│   │
│   ├── mascot/
│   │   ├── mascot-container.tsx      # Floating L2D container
│   │   ├── mascot-canvas.tsx         # WebGL canvas for L2D rendering
│   │   ├── chat-panel.tsx            # Chat input + history
│   │   └── mascot-context.tsx        # Context provider
│   │
│   ├── media/
│   │   └── mini-player.tsx           # Floating mini media player
│   │
│   ├── shared/
│   │   ├── error-state.tsx           # Error boundary fallback
│   │   ├── loading-skeleton.tsx      # Glass shimmer skeleton
│   │   └── empty-state.tsx           # Empty state illustration
│   │
│   └── ui/                           # shadcn/ui components (adapted to glass)
│       ├── button.tsx, badge.tsx, dialog.tsx, ...
│
├── lib/
│   ├── api/                          # Existing API client (unchanged)
│   ├── ws/
│   │   ├── context.tsx               # WS provider (unchanged)
│   │   └── types.ts                  # WS event types
│   ├── hooks/                        # Existing hooks + new ones
│   │   ├── use-media-player.ts       # Global media state
│   │   ├── use-mascot.ts             # Mascot context hook
│   │   └── use-heatmap.ts           # Heatmap data hook
│   ├── types/                        # Existing types (unchanged)
│   ├── navigation.ts                 # Nav items (updated)
│   └── format.ts                     # Format utilities

---

10. Implementation Order

Phase 1 — Foundation

1. Update globals.css with new design tokens (colors, glass, radius, typography, animations)
2. Rewrite root layout.tsx with theme system
3. Build glass component system (card.tsx, panel.tsx)
4. Build top-nav.tsx, sub-nav.tsx, hidden-sidebar.tsx
5. Update dashboard layout with new nav

Phase 2 — Dashboard Ops Center

6. Build stat-card.tsx with micro sparkline
7. Build live-stream.tsx
8. Build mod-queue.tsx
9. Build charts: message-trend-chart.tsx, activity-heatmap.tsx, top-channels-chart.tsx
10. Rewrite dashboard page

Phase 3 — Messages (Split Pane)

11. Build message-list.tsx, message-card.tsx (redesigned)
12. Build message-detail.tsx, ai-analysis-panel.tsx, attachments-grid.tsx
13. Build search-overlay.tsx
14. Rewrite messages page with split-pane layout

Phase 4 — Voice, Recordings, Settings

15. Build voice components and rewrite voice page
16. Build recording components and rewrite recordings page
17. Rewrite settings page

Phase 5 — Floating Elements

18. Build mini-player.tsx for media
19. Build mascot components (L2D integration)

---

11. Testing

• Visual regression checks per component
• WS integration tests for cache updates
• Responsive breakpoint testing (mobile bottom nav)
• L2D mascot load + expression trigger

---

12. Non-Goals (Out of Scope)

• Authentication — remains public
• Backend API changes — only frontend redesign
• Database changes — no schema modifications
• New backend WebSocket events — reuse existing
• L2D model creation — integration only (model file provided separately)