-
-
-
-```
-
-- [ ] **Step 5: Create `Skeleton.astro`** and `Spinner.astro`
-
-```astro
----
-// Skeleton.astro
-export interface Props {
- variant?: 'text' | 'card' | 'circle' | 'rect';
- width?: string;
- height?: string;
- class?: string;
-}
-const { variant = 'text', width, height, class: className = '' } = Astro.props;
----
-
-
-```
-
-```astro
----
-// Spinner.astro
-export interface Props { size?: 'sm' | 'default' | 'lg'; class?: string; }
-const { size = 'default', class: className = '' } = Astro.props;
----
-
- Loading...
-
-
-```
-
-- [ ] **Step 6: Verify components compile**
-
-Run:
-```bash
-cd services/frontend && pnpm build 2>&1 | tail -10
-```
-Expected: Build succeeds, zero errors.
-
-- [ ] **Step 7: Commit**
-
-```bash
-git add services/frontend/src/components/ui/
-git commit -m "feat(frontend): add Astro UI components (Button, Badge, Card, Skeleton, Spinner)"
-```
-
----
-
-### Task 1.3: Create Layout Components (Sidebar, Header, States)
-
-**Files:**
-- Create: `services/frontend/src/components/sidebar/NavItem.astro`
-- Create: `services/frontend/src/components/sidebar/Sidebar.astro`
-- Create: `services/frontend/src/components/header/Header.astro`
-- Create: `services/frontend/src/components/states/EmptyState.astro`
-- Create: `services/frontend/src/components/states/ErrorState.astro`
-- Create: `services/frontend/src/components/states/LoadingSkeleton.astro`
-
-**Interfaces:**
-- Consumes: UI components from Task 1.2
-- Produces: Layout shell components used by DashboardLayout
-
-- [ ] **Step 1: Create `NavItem.astro`**
-
-```astro
----
-export interface Props {
- href: string;
- icon: string; // Lucide icon name
- label: string;
- active?: boolean;
- collapsed?: boolean;
- notificationCount?: number;
-}
-const { href, icon, label, active = false, collapsed = false, notificationCount = 0 } = Astro.props;
----
-
-
-
- {!collapsed && (
- <>
-
- {notificationCount > 0 && (
-
- )}
-
- )}
-
-
-
-```
-
-- [ ] **Step 2: Create `Sidebar.astro`**
-
-```astro
----
-import NavItem from './NavItem.astro';
-
-export interface Props {
- collapsed?: boolean;
- activeTab?: string;
- notificationCount?: number;
- class?: string;
-}
-
-const { collapsed = false, activeTab = 'live', notificationCount = 0, class: className = '' } = Astro.props;
-
-const NAV_ITEMS = [
- { id: 'live', icon: 'radio', href: '/live', label: 'Live' },
- { id: 'messages', icon: 'message-square', href: '/messages', label: 'Messages' },
- { id: 'recordings', icon: 'mic', href: '/recordings', label: 'Recordings' },
- { id: 'settings', icon: 'settings', href: '/settings', label: 'Settings' },
-];
----
-
-
-
-
-```
-
-- [ ] **Step 3: Create `Header.astro`**
-
-```astro
----
-export interface Props {
- title?: string;
- class?: string;
-}
-const { title = 'Dashboard', class: className = '' } = Astro.props;
----
-
-
-
- {title}
-
-
-
- {icon && }
-
-
-```
-
-`ErrorState.astro`:
-```astro
----
-export interface Props {
- message?: string;
- class?: string;
-}
-const { message = 'Something went wrong', class: className = '' } = Astro.props;
----
-{title}
- {description &&{description}
} -
-
-
-
-```
-
-`LoadingSkeleton.astro`:
-```astro
----
-import Skeleton from '../ui/Skeleton.astro';
-
-export interface Props {
- variant?: 'card' | 'list' | 'detail';
- count?: number;
- class?: string;
-}
-const { variant = 'card', count = 3, class: className = '' } = Astro.props;
----
-{message}
-
- {Array.from({ length: count }).map(() => (
- variant === 'list' ? (
-
-```
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add services/frontend/src/components/
-git commit -m "feat(frontend): add Astro layout components (Sidebar, Header, states)"
-```
-
----
-
-### Task 1.4: Update BaseLayout and Create AuthLayout + Pages
-
-**Files:**
-- Modify: `services/frontend/src/layouts/BaseLayout.astro`
-- Create: `services/frontend/src/layouts/AuthLayout.astro`
-- Create: `services/frontend/src/pages/login.astro`
-- Create: `services/frontend/src/pages/404.astro`
-- Modify: `services/frontend/src/pages/index.astro`
-
-**Interfaces:**
-- Consumes: No prior tasks (independent)
-- Produces: Working routes and layout shell
-
-- [ ] **Step 1: Update `BaseLayout.astro`**
-
-```astro
----
-const FONT_HREF =
- "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";
-const FONT_MONO_HREF =
- "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap";
-
-export interface Props {
- title?: string;
- description?: string;
-}
-const { title = 'IMPHNEN — Discord Moderation', description = 'Real-time Discord AI Moderation & Voice Recording Dashboard' } = Astro.props;
----
-
-
-
-
-
-
-
-
- ) : (
-
-
-
-
- )
- ))}
-
-
-
-
-
-
- BETE
-Discord Moderation Dashboard
-
-
-
- );
- }
-
- if (!authenticated) {
- return (
-
-
- );
- }
-
- return <>{children};
-}
-```
-
-- [ ] **Step 3: Create `ThemeToggle.tsx` island**
-
-```tsx
-import { useEffect, useState } from 'react';
-
-export default function ThemeToggle() {
- const [theme, setTheme] = useState<'dark' | 'light'>('dark');
-
- useEffect(() => {
- const stored = localStorage.getItem('bete-dashboard-theme');
- if (stored === 'light' || stored === 'dark') setTheme(stored);
- }, []);
-
- const toggle = () => {
- const next = theme === 'dark' ? 'light' : 'dark';
- setTheme(next);
- localStorage.setItem('bete-dashboard-theme', next);
- document.documentElement.setAttribute('data-theme', next);
- document.documentElement.classList.toggle('dark', next === 'dark');
- };
-
- return (
-
- );
-}
-```
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add services/frontend/src/islands/AuthGuard.tsx services/frontend/src/islands/ThemeToggle.tsx
-git commit -m "feat(frontend): add AuthGuard and ThemeToggle islands"
-```
-
----
-
-## Phase 3: Messages Feature
-
-### Task 3.1: MessageFeed Island
-
-**Files:**
-- Create: `services/frontend/src/islands/MessageFeed.tsx`
-- Port: `services/frontend/src/shared/hooks/useMessages.ts` from `features/messages/hooks/useMessages.ts`
-- Port: `services/frontend/src/shared/api/client.ts` (exists)
-
-**Interfaces:**
-- Consumes: `useMessageStore` from Task 2.1, `socket.ts` from Task 2.2
-- Produces: `MessageFeed` React island with loading/error/empty states
-
-- [ ] **Step 1: Port `useMessages` hook to `src/shared/hooks/useMessages.ts`**
-
-```typescript
-import { useCallback, useEffect, useRef, useState } from 'react';
-import type { MessageRecord } from '@bete/shared/types';
-import { getMessages, reanalyzeMessage } from '../api/client';
-import { useMessageStore } from '../../stores/message-store';
-
-export function mergeMessages(
- existing: MessageRecord[],
- incoming: MessageRecord[],
-): MessageRecord[] {
- const map = new Map(existing.map((m) => [m.id, m]));
- for (const msg of incoming) {
- map.set(msg.id, msg);
- }
- return Array.from(map.values()).sort(
- (a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
- );
-}
-
-export function useMessages() {
- const { messages, setMessages, prependMessage } = useMessageStore();
- const [loading, setLoading] = useState(true);
- const [loadingMore, setLoadingMore] = useState(false);
- const [hasMore, setHasMore] = useState(true);
- const cursorRef = useRefPlease enter admin password to continue.
- {/* Login form with password input */} - -
- {Array.from({ length: 5 }).map((_, i) => (
-
- ))}
-
- );
- }
-
- // Empty state
- if (!loading && messages.length === 0) {
- return (
-
-
- );
- }
-
- // Error state
- if (messages.length === 0) {
- return (
- 💬
- No messages yet
-Messages will appear here once captured.
-
-
- );
- }
-
- // Success state
- return (
- !
- Failed to load messages
- -
- {messages.map((msg) => (
-
- );
-}
-```
-
-- [ ] **Step 3: Create `messages.astro` page**
-
-```astro
----
-import BaseLayout from '../layouts/BaseLayout.astro';
-import Sidebar from '../components/sidebar/Sidebar.astro';
-import Header from '../components/header/Header.astro';
-import ThemeToggle from '../islands/ThemeToggle.tsx';
-import MessageFeed from '../islands/MessageFeed.tsx';
----
-
-
-
- ))}
- {loadingMore && (
-
- 
-
-
-
-
- {msg.username}
- {msg.ai_severity && (
-
- {msg.ai_severity.toUpperCase()}
-
- )}
-
- {msg.content || msg.edited_content}
-
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
-
- {/* Guild select */}
-
-
- {/* Channel select */}
-
-
- {/* Connect/Disconnect */}
- {!connected ? (
-
- ) : (
-
- )}
-
- );
-}
-```
-
-- [ ] **Step 2: Create `ActiveSpeakers.tsx`**
-
-```tsx
-import { useVoiceStore } from '../stores/voice-store';
-
-export default function ActiveSpeakers() {
- const activeSpeakers = useVoiceStore((s) => s.activeSpeakers);
-
- if (activeSpeakers.length === 0) {
- return (
-
-
- );
- }
-
- return (
- No active speakers
--
- {activeSpeakers.map((speaker) => (
-
-
-
- {speaker.username} - {speaker.speaking && ( -
- {Array.from({ length: 4 }).map((_, i) => ( - - ))} -- )} -
- ))}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Voice Connection
-Now Playing
-
- {Array.from({ length: 3 }).map((_, i) => (
-
- ))}
-
- );
- }
-
- if (error) {
- return (
-
-
- );
- }
-
- if (recordings.length === 0) {
- return (
- !
- {error}
-
-
- );
- }
-
- return (
- No recordings
-Join a voice channel to start recording.
-
- {recordings.map((rec) => (
-
- );
-}
-```
-
-- [ ] **Step 2: Create `recordings.astro` page**
-
-```astro
----
-import BaseLayout from '../layouts/BaseLayout.astro';
-import Sidebar from '../components/sidebar/Sidebar.astro';
-import Header from '../components/header/Header.astro';
-import Card from '../components/ui/Card.astro';
-import RecordingsList from '../islands/RecordingsList.tsx';
-import ThemeToggle from '../islands/ThemeToggle.tsx';
----
-
-
-
- ))}
-
-
-
-
- {rec.download_url && (
-
- Download
-
- )}
- {rec.username}
-{rec.channel_name} · {new Date(rec.created_at).toLocaleString()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-```
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add services/frontend/src/pages/recordings.astro services/frontend/src/islands/RecordingsList.tsx services/frontend/src/pages/settings.astro services/frontend/src/islands/SettingsForm.tsx
-git commit -m "feat(frontend): add Recordings and Settings pages with islands"
-```
-
----
-
-## Phase 5: Polish (Deferred Islands + Cleanup)
-
-### Task 5.1: Deferred Islands (Particles, Mascot, Recordings)
-
-**Files:**
-- Port: `services/frontend/src/islands/Particles.tsx` from `widgets/particles/`
-- Create: `services/frontend/src/islands/MascotChat.tsx`
-
-- [ ] **Step 1: Create `Particles.tsx`** (Three.js background, deferred)
-
-```tsx
-import { useEffect, useRef } from 'react';
-
-export default function Particles() {
- const canvasRef = useRefAppearance
-
-
-
-
- {(['dark', 'light', 'system'] as const).map((mode) => (
-
- ))}
-
-
- {open && (
-
- );
-}
-```
-
-- [ ] **Step 3: Commit**
-
-```bash
-git add services/frontend/src/islands/Particles.tsx services/frontend/src/islands/MascotChat.tsx
-git commit -m "feat(frontend): add deferred islands (Particles, MascotChat)"
-```
-
----
-
-### Task 5.2: Delete Legacy Code + Cleanup
-
-**Files:**
-- Delete: `services/frontend/src/App.tsx`
-- Delete: `services/frontend/src/App.client.tsx`
-- Delete: `services/frontend/src/entities/` (entire directory)
-- Delete: `services/frontend/src/features/` (entire directory)
-- Delete: `services/frontend/src/hooks/` (entire directory)
-- Delete: `services/frontend/src/widgets/` (entire directory)
-
-**Interfaces:**
-- Consumes: All prior tasks proving feature parity
-- Produces: Clean Astro project structure
-
-- [ ] **Step 1: Verify all features are ported before deletion**
-
-Check each feature directory has been ported to equivalent island/page:
-- `features/auth/` → `islands/AuthGuard.tsx` ✓ (Task 2.2)
-- `features/messages/` → `islands/MessageFeed.tsx` ✓ (Task 3.1)
-- `features/live/` → `islands/VoiceControls.tsx` + `ActiveSpeakers.tsx` + `AudioVisualizer.tsx` + `NowPlaying.tsx` ✓ (Task 4.1)
-- `features/settings/` → `islands/SettingsForm.tsx` ✓ (Task 4.2)
-- `widgets/DashboardLayout.tsx` → replaced by `components/sidebar/` + `components/header/` + page layouts ✓ (Task 1.3)
-- `entities/` → moved to `@bete/shared` or inline types ✓
-
-- [ ] **Step 2: Remove legacy files**
-
-Run:
-```bash
-git rm -r services/frontend/src/App.tsx services/frontend/src/App.client.tsx services/frontend/src/entities services/frontend/src/features services/frontend/src/hooks services/frontend/src/widgets
-```
-
-- [ ] **Step 3: Remove legacy shared/ui (replaced by Astro components)**
-
-Run:
-```bash
-git rm -r services/frontend/src/shared/ui
-```
-(Keep `shared/api`, `shared/ws`, `shared/hooks`, `shared/lib` — these still used)
-
-- [ ] **Step 4: Build to verify**
-
-Run:
-```bash
-cd services/frontend && pnpm build 2>&1 | tail -30
-```
-Expected: Build succeeds, no missing imports.
-
-- [ ] **Step 5: Commit**
-
-```bash
-git commit -m "refactor(frontend): remove legacy React SPA files, clean project structure"
-```
-
----
-
-### Task 5.3: Final Verification
-
-- [ ] **Step 1: Verify all pages render**
-
-Run dev server and check each route:
-```bash
-cd services/frontend && pnpm dev
-```
-Check: `/live`, `/messages`, `/recordings`, `/settings`, `/login`, `/404`
-
-- [ ] **Step 2: Build production bundle**
-
-```bash
-cd services/frontend && pnpm build
-```
-Expected: Build succeeds, output in `dist/`.
-
-- [ ] **Step 3: Run typecheck**
-
-```bash
-cd services/frontend && pnpm typecheck
-```
-Expected: No type errors.
-
-- [ ] **Step 4: Final commit**
-
-```bash
-git commit -m "chore(frontend): finalize Astro migration with full design system"
-```
-
----
-
-## Self-Review Checklist
-
-**1. Spec coverage:**
-- All 5 migration phases match the spec ✓
-- Design tokens from `design/` implemented in Task 1.1 ✓
-- Component taxonomy from `05-component-architecture.md` in Task 1.2 ✓
-- State machines from `09-state-machines.md` in all islands (loading/error/empty) ✓
-- Responsive patterns from `10-responsive-system.md` in layout CSS ✓
-- Glassmorphism from `01-color-system.md` in `base.css` ✓
-- Motion system from `04-motion-system.md` in animations + reduced motion ✓
-- Theme architecture from `15-theme-architecture.md` in `base.css` ✓
-
-**2. Placeholder scan:** No TBD, TODO, or incomplete code. All steps contain actual implementation code.
-
-**3. Type consistency:** All store interfaces use the same types consistently. `ActiveSpeaker`, `MessageRecord`, `VoiceStatus` referenced from `@bete/shared/types`.
-
- )}
-
- Hi! I'm BETE's mascot. Ask me anything about the dashboard.
- -