MythEclipse/GMW
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(fe): overhaul — split types, type-safe WS, remove dead deps/code

Browse Source 
- Remove unused deps: gsap, @tanstack/react-query, three, r3f, drei, autoprefixer
- Split types from shared/api/client.ts into entities/{guild,voice,media,ui,recording,dashboard}
- Type-safe WebSocket handlers using WsEventMap — 0 'as' casts in App.tsx
- Replace gsap with framer-motion in AuthOverlay
- Remove dead code: useMascotSummary, gsapCardHover, live/components/index barrel
- Fix bare console calls → use createLogger from @bete/shared/logger
- Clean up unused imports and variables (aiVariant, etc.)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
MythEclipse
2026-06-16 22:44:28 +07:00
co-authored by Claude
parent 9af2d7d4dd
commit 752d144dc0
45 changed files with 535 additions and 1314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/frontend/package.json
+1 -7
View File
@@ -16,24 +16,18 @@
"@radix-ui/react-scroll-area": "^1.2.10",
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-tabs": "^1.1.13",
"@react-three/drei": "^9.6.1",
"@react-three/fiber": "^9.6.1",
"@tanstack/react-query": "^5.100.14",
"clsx": "^2.1.1",
"framer-motion": "^12.4.0",
"gsap": "^3.12.7",
"lucide-react": "^1.16.0",
"react": "^19.2.6",
"react-dom": "^19.2.6",
"tailwind-merge": "^3.6.0",
"three": "^0.174.0"
"tailwind-merge": "^3.6.0"
},
"devDependencies": {
"@biomejs/biome": "latest",
"@tailwindcss/postcss": "^4.3.0",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@types/three": "^0.184.1",
"@vitejs/plugin-react": "^6.0.2",
"autoprefixer": "^10.5.0",
"postcss": "^8.5.14",
services/frontend/src/App.tsx
+19 -38
View File
@@ -1,4 +1,5 @@
import { useEffect, useMemo, useState } from "react";
import type { ActiveSpeaker } from "./entities/voice/types.js";
import { DashboardPanel } from "./features/dashboard";
import { LivePanel } from "./features/live";
import { useMediaControl } from "./features/live/hooks/useMediaControl";
@@ -9,12 +10,7 @@ import {
mergeMessages,
useMessages,
} from "./features/messages/hooks/useMessages";
import {
type ActiveSpeaker,
getAppConfig,
type MediaState,
type MessageRecord,
} from "./shared/api/client";
import { getAppConfig } from "./shared/api/client";
import { useAudioPlayback } from "./shared/hooks/useAudioPlayback";
import { useAudioTransmit } from "./shared/hooks/useAudioTransmit";
import { useUIState } from "./shared/hooks/useUIState";
@@ -74,29 +70,20 @@ export default function App() {
onBinary: (d) => audio.handleIncomingBinary(d),
onUserState: (users) =>
setActiveSpeakers(
(users as (ActiveSpeaker & { heardAt?: number })[]).map((u) => ({
users.map((u) => ({
...u,
heardAt: Date.now(),
})),
),
onVoiceActiveUser: (data) => {
const d = data as {
userId?: string;
id?: string;
username: string;
avatar: string;
speaking: boolean;
};
if (d.userId) audio.registerUserId(d.userId);
if (data.userId) audio.registerUserId(data.userId);
setActiveSpeakers((prev) =>
updateSpeakerList(
prev,
d as Partial<ActiveSpeaker> & {
userId?: string;
id?: string;
speaking: boolean;
},
),
updateSpeakerList(prev, {
userId: data.userId,
username: data.username,
avatar: data.avatar,
speaking: data.speaking,
}),
);
},
onVoiceRecordingStarted: () =>
@@ -104,25 +91,19 @@ export default function App() {
onVoiceRecordingStopped: () =>
window.dispatchEvent(new CustomEvent("voice_recording_uploaded")),
onMessageCreated: (m) =>
messages.setMessages((prev) => mergeMessages(prev, [m as MessageRecord])),
onMessageUpdated: (m) => {
const d = m as Partial<MessageRecord> & { id: string };
messages.setMessages((prev) => mergeMessages(prev, [m])),
onMessageUpdated: (m) =>
messages.setMessages((prev) =>
prev.map((i) => (i.id === d.id ? { ...i, ...d } : i)),
);
},
onMessageDeleted: (m) => {
const d = m as { id: string };
prev.map((i) => (i.id === m.id ? { ...i, ...m } : i)),
),
onMessageDeleted: (m) =>
messages.setMessages((prev) =>
prev.map((i) =>
i.id === d.id ? { ...i, type: "deleted" as const } : i,
i.id === m.id ? { ...i, type: "deleted" as const } : i,
),
);
},
onMessageAnalyzed: (m) => {
const msg = m as MessageRecord;
),
onMessageAnalyzed: (msg) => {
messages.setMessages((prev) => mergeMessages(prev, [msg]));
// Show toast for moderation alerts (flagged)
const status = msg.ai_status;
if (status === "flagged") {
const username = msg.username || msg.user_id || "unknown";
@@ -144,7 +125,7 @@ export default function App() {
messages
.fetchMessages(monitorGuildId || undefined)
.catch(() => undefined),
onMediaState: (state) => media.setMediaState(state as MediaState),
onMediaState: (state) => media.setMediaState(state),
onVoiceRecordingUploaded: (d) =>
window.dispatchEvent(
new CustomEvent("voice_recording_uploaded", { detail: d }),
services/frontend/src/entities/dashboard/types.ts
+75
View File
@@ -0,0 +1,75 @@
export interface DashboardStats {
total_messages: number;
total_users: number;
total_flagged: number;
total_clean: number;
total_warned: number;
total_error: number;
total_voice_recordings: number;
total_profiles: number;
today_messages: number;
today_flagged: number;
active_users_24h: number;
top_channels: Array<{
channel_id: string;
channel_name: string | null;
message_count: number;
}>;
moderation_overview: {
pending: number;
processing: number;
error: number;
};
}
export interface DashboardUser {
user_id: string;
username: string | null;
avatar_url: string | null;
profile_summary: string | null;
total_messages: number;
flagged_count: number;
last_message_at: number | null;
trust_score: number | null;
}
export interface DashboardUserDetail extends DashboardUser {
last_analyzed_at: number | null;
clean_message_streak: number | null;
total_infractions: number | null;
clean_count: number;
recent_messages: Array<{
id: string;
content: string;
channel_id: string;
created_at: number;
ai_status: string | null;
}>;
}
export interface DashboardChannel {
channel_id: string;
channel_name: string | null;
guild_id: string | null;
total_messages: number;
flagged_count: number;
last_message_at: number | null;
culture_summary: string | null;
last_analyzed_at: number | null;
}
export interface DashboardChannelDetail extends DashboardChannel {
clean_count: number;
recent_messages: Array<{
id: string;
content: string;
channel_id: string;
created_at: number;
ai_status: string | null;
username: string | null;
}>;
}
export interface ChatResponse {
response?: string;
}
services/frontend/src/entities/guild/types.ts
+19
View File
@@ -0,0 +1,19 @@
export interface Guild {
id: string;
name: string;
icon: string | null;
}
export interface Channel {
id: string;
name: string;
type?: string;
parentId?: string | null;
}
export interface GuildVoiceEntry {
guildId: string;
channelId: string;
channelName: string;
connectedAt: number;
}
services/frontend/src/entities/media/types.ts
+17
View File
@@ -0,0 +1,17 @@
export type MediaMode = "music" | "screen";
export interface MediaItem {
id?: string;
source: string;
title: string;
mode?: "music" | "screen";
durationMs?: number | null;
thumbnailUrl?: string | null;
}
export interface MediaState {
playing: boolean;
musicVolume: number;
current: MediaItem | null;
queue: MediaItem[];
}
services/frontend/src/entities/message/types.ts
-10
View File
@@ -17,13 +17,3 @@ export interface MessageMetadata {
threadName?: string;
};
}
export function parseMetadata(value: string | null): MessageMetadata {
if (!value) return {};
try {
const parsed = JSON.parse(value) as MessageMetadata;
return parsed;
} catch {
return {};
}
}
services/frontend/src/entities/recording/types.ts
+23
View File
@@ -0,0 +1,23 @@
export interface VoiceRecording {
id: string;
user_id: string;
username: string;
avatar_url: string | null;
guild_id: string | null;
channel_id: string | null;
channel_name: string | null;
filename: string;
size_bytes: number;
download_url: string | null;
upload_status: "pending" | "uploaded" | "failed";
upload_error: string | null;
transcription?: string | null;
created_at: number;
uploaded_at: number | null;
}
export interface VoiceRecordingListResponse {
items: VoiceRecording[];
nextCursor: string | null;
hasMore: boolean;
}
services/frontend/src/entities/ui/types.ts
+18
View File
@@ -0,0 +1,18 @@
export interface UIState {
selectedGuild?: string;
selectedVoiceGuild?: string;
selectedVoiceChannel?: string;
selectedTextGuild?: string;
selectedTextChannel?: string;
selectedAnalyticsGuild?: string;
selectedAnalyticsChannel?: string;
activeTab?: "live" | "messages" | "dashboard";
isListening?: boolean;
isStreaming?: boolean;
}
export type DashboardTab = "live" | "messages" | "dashboard";
export interface AppConfig {
monitorGuildId: string | null;
}
services/frontend/src/entities/voice/types.ts
+17
View File
@@ -0,0 +1,17 @@
import type { GuildVoiceEntry } from "../guild/types";
export interface VoiceStatus {
connected: boolean;
activeGuildId: string | null;
activeChannelId: string | null;
activeChannelName: string | null;
connections: GuildVoiceEntry[];
}
export interface ActiveSpeaker {
id?: string;
userId?: string;
username: string;
avatar: string;
speaking: boolean;
}
services/frontend/src/features/auth/index.tsx
+10 -10
View File
@@ -1,7 +1,7 @@
import { motion } from "framer-motion";
import { Lock } from "lucide-react";
import { useEffect, useState } from "react";
import { login } from "../../shared/api/client";
import { useGsapTransition } from "../../shared/hooks/useGsapTransition";
import { useState } from "react";
import { login } from "../../shared/api/client.js";
import {
Button,
Card,
@@ -20,11 +20,6 @@ export function AuthOverlay({ onAuthenticated }: AuthOverlayProps) {
const [password, setPassword] = useState("");
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const { pageRef, animateIn } = useGsapTransition("auth");
useEffect(() => {
animateIn();
}, [animateIn]);
const handleSubmit = async (e: { preventDefault: () => void }) => {
e.preventDefault();
@@ -42,7 +37,12 @@ export function AuthOverlay({ onAuthenticated }: AuthOverlayProps) {
};
return (
<div ref={pageRef} className="flex items-center justify-center p-4">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, ease: "easeOut" }}
className="flex items-center justify-center p-4"
>
<Card className="w-full max-w-md border-primary/30 shadow-lg shadow-primary/10">
<CardHeader className="text-center">
<div className="mx-auto mb-4 flex items-center justify-center">
@@ -77,6 +77,6 @@ export function AuthOverlay({ onAuthenticated }: AuthOverlayProps) {
</form>
</CardContent>
</Card>
</div>
</motion.div>
);
}
services/frontend/src/features/dashboard/components/ChannelProfileDetail.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { Hash } from "lucide-react";
import type { DashboardChannelDetail } from "../../../shared/api/client";
import type { DashboardChannelDetail } from "../../../entities/dashboard/types.js";
import { ProfileDetail } from "../../../shared/ui";
interface ChannelProfileDetailProps {
services/frontend/src/features/dashboard/components/ChannelSummaryList.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { Hash } from "lucide-react";
import type { DashboardChannel } from "../../../shared/api/client";
import type { DashboardChannel } from "../../../entities/dashboard/types.js";
import type { SummaryItem } from "../../../shared/ui";
import { SummaryList } from "../../../shared/ui";
services/frontend/src/features/dashboard/components/DashboardStats.tsx
+2 -2
View File
@@ -10,7 +10,7 @@ import {
Users,
} from "lucide-react";
import { cardItem, cardStagger } from "../../../shared/hooks/useFramerStagger";
import { useUIState } from "../../../shared/hooks/useUIState";
import { useUIState } from "../../../shared/hooks/useUIState.js";
import { cn } from "../../../shared/lib/utils";
import {
Card,
@@ -168,7 +168,7 @@ export function DashboardStatsContent() {
</p>
) : (
<div className="space-y-2">
{stats.top_channels.map((ch, i) => (
{stats.top_channels.map((ch) => (
<div
key={ch.channel_id}
className="flex items-center justify-between rounded-lg bg-muted/50 px-3 py-2 text-sm"
services/frontend/src/features/dashboard/components/UserProfileDetail.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { User } from "lucide-react";
import type { DashboardUserDetail } from "../../../shared/api/client";
import type { DashboardUserDetail } from "../../../entities/dashboard/types.js";
import { ProfileDetail } from "../../../shared/ui";
interface UserProfileDetailProps {
services/frontend/src/features/dashboard/components/UserSummaryList.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { User } from "lucide-react";
import type { DashboardUser } from "../../../shared/api/client";
import type { DashboardUser } from "../../../entities/dashboard/types.js";
import type { SummaryItem } from "../../../shared/ui";
import { SummaryList } from "../../../shared/ui";
services/frontend/src/features/dashboard/hooks/useDashboard.ts
+6 -8
View File
@@ -1,20 +1,18 @@
import { useCallback, useEffect, useState } from "react";
import type { DashboardStats } from "../../../entities/dashboard/types.js";
import {
type DashboardChannel,
type DashboardChannelDetail,
type DashboardStats,
type DashboardUser,
type DashboardUserDetail,
getDashboardChannelDetail,
getDashboardStats,
getDashboardUserDetail,
listDashboardChannels,
listDashboardUsers,
} from "../../../shared/api/client";
} from "../../../shared/api/client.js";
import { useItemDetail } from "../../../shared/hooks/useItemDetail";
import { usePaginatedList } from "../../../shared/hooks/usePaginatedList";
const logger = console;
import { createLogger } from "../../../shared/lib/logger.js";
const logger = createLogger("use-dashboard");
/**
* Fetch dashboard aggregate stats.
@@ -33,7 +31,7 @@ export function useDashboardStats() {
} catch (e) {
const msg = e instanceof Error ? e.message : "Failed to load stats";
setError(msg);
logger.error("[useDashboardStats]", msg);
logger.error("[useDashboardStats]", { error: msg });
} finally {
setLoading(false);
}
services/frontend/src/features/live/components/ActiveSpeakers.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import type { ActiveSpeaker } from "../../../shared/api/client";
import type { ActiveSpeaker } from "../../../entities/voice/types.js";
import { EmptyStateMascot } from "../../../widgets/mascot/MascotImage";
interface ActiveSpeakersProps {
services/frontend/src/features/live/components/NowPlaying.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { MonitorUp, Music2 } from "lucide-react";
import type { MediaItem } from "../../../shared/api/client";
import type { MediaItem } from "../../../entities/media/types.js";
import { Badge } from "../../../shared/ui";
interface NowPlayingProps {
services/frontend/src/features/live/components/RecordingsSubPanel.tsx
+1 -1
View File
@@ -2,7 +2,7 @@
import { Download, Mic, Trash2 } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import type { VoiceRecording } from "../../../shared/api/client";
import type { VoiceRecording } from "../../../entities/recording/types.js";
import { deleteRecording, listRecordings } from "../../../shared/api/client";
import { formatBytes, formatDate } from "../../../shared/lib/utils";
import { Badge, Button, Skeleton } from "../../../shared/ui";
services/frontend/src/features/live/components/VoiceConnectionCard.tsx
+2 -1
View File
@@ -1,5 +1,6 @@
import { Headphones, Radio } from "lucide-react";
import type { Channel, Guild, VoiceStatus } from "../../../shared/api/client";
import type { Channel, Guild } from "../../../entities/guild/types.js";
import type { VoiceStatus } from "../../../entities/voice/types.js";
import { Button, Select } from "../../../shared/ui";
import { MicLevelMeter } from "./MicLevelMeter";
services/frontend/src/features/live/components/index.ts
-11
View File
@@ -1,11 +0,0 @@
// ─── Live feature barrel export ─────────────────────────────────────────────
export { ActiveSpeakers } from "./ActiveSpeakers";
export { AudioVisualizer } from "./AudioVisualizer";
export { MicLevelMeter } from "./MicLevelMeter";
export { MusicSubPanel } from "./MusicSubPanel";
export { NowPlaying } from "./NowPlaying";
export { RecordingsSubPanel } from "./RecordingsSubPanel";
export { ScreenSubPanel } from "./ScreenSubPanel";
export { VoiceConnectionCard } from "./VoiceConnectionCard";
export { WaveformPlayer } from "./WaveformPlayer";
services/frontend/src/features/live/hooks/useMediaControl.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useState } from "react";
import type { MediaState } from "../../../shared/api/client";
import type { MediaState } from "../../../entities/media/types.js";
import {
getMediaStatus,
queueMedia,
services/frontend/src/features/live/hooks/useVoiceControl.ts
+2 -1
View File
@@ -1,5 +1,6 @@
import { useCallback, useEffect, useState } from "react";
import type { Channel, Guild, VoiceStatus } from "../../../shared/api/client";
import type { Channel, Guild } from "../../../entities/guild/types.js";
import type { VoiceStatus } from "../../../entities/voice/types.js";
import {
connectVoice,
disconnectVoice,
services/frontend/src/features/live/index.tsx
+3 -7
View File
@@ -2,13 +2,9 @@
import { motion } from "framer-motion";
import { Mic, MonitorUp, Music2 } from "lucide-react";
import type {
ActiveSpeaker,
Channel,
Guild,
MediaState,
VoiceStatus,
} from "../../shared/api/client";
import type { Channel, Guild } from "../../entities/guild/types.js";
import type { MediaState } from "../../entities/media/types.js";
import type { ActiveSpeaker, VoiceStatus } from "../../entities/voice/types.js";
import { cardItem, cardStagger } from "../../shared/hooks/useFramerStagger";
import {
Card,
services/frontend/src/features/messages/components/ImageGrid.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { parseMetadata } from "../../../entities/message/types";
import type { MessageRecord } from "../../../shared/api/client";
import type { MessageRecord } from "../../../entities/message/types.js";
import { parseMetadata } from "../../../shared/lib/utils.js";
import { EmptyStateMascot } from "../../../widgets/mascot/MascotImage";
interface ImageItem {
@@ -73,7 +73,7 @@ export function ImageGrid({ messages }: { messages: MessageRecord[] }) {
return (
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
{images.map((image, index) => {
{images.map((image) => {
// Stable key using message.id + url
const stableKey = `${image.message.id}-${image.kind}-${image.url}`;
return (
services/frontend/src/features/messages/components/MessageCard.tsx
+2 -8
View File
@@ -9,8 +9,8 @@ import {
Trash2,
} from "lucide-react";
import { Fragment, useMemo, useState } from "react";
import { parseMetadata } from "../../../entities/message/types";
import type { MessageRecord } from "../../../shared/api/client";
import type { MessageRecord } from "../../../entities/message/types.js";
import { parseMetadata } from "../../../shared/lib/utils.js";
import { Badge, Button, Skeleton, StatusBadge } from "../../../shared/ui";
const CUSTOM_EMOJI_REGEX = /<(a)?:([a-zA-Z0-9_]+):(\d+)>/g;
@@ -72,12 +72,6 @@ function parseStringList(value?: string | null): string[] {
}
}
function aiVariant(status: string) {
if (status === "clean") return "success";
if (status === "flagged" || status === "error") return "destructive";
return "secondary";
}
function severityColor(severity: string) {
switch (severity) {
case "critical":
services/frontend/src/features/messages/components/MessageFeed.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { motion } from "framer-motion";
import { useEffect, useMemo, useRef } from "react";
import type { MessageRecord } from "../../../shared/api/client";
import type { MessageRecord } from "../../../entities/message/types.js";
import { cardItem, cardStagger } from "../../../shared/hooks/useFramerStagger";
import { ScrollArea } from "../../../shared/ui";
import { EmptyStateMascot } from "../../../widgets/mascot/MascotImage";
services/frontend/src/features/messages/hooks/useMessages.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { useCallback, useRef, useState } from "react";
import type { MessageRecord } from "../../../shared/api/client";
import type { MessageRecord } from "../../../entities/message/types.js";
import {
listMessages,
reanalyzeErrorBatch,
services/frontend/src/features/messages/index.tsx
+2 -1
View File
@@ -1,7 +1,8 @@
import { motion } from "framer-motion";
import { Filter, RotateCw, Search, X } from "lucide-react";
import { useMemo, useState } from "react";
import { type MessageRecord, request } from "../../shared/api/client";
import type { MessageRecord } from "../../shared/api/client";
import { request } from "../../shared/api/client";
import { cardItem, cardStagger } from "../../shared/hooks/useFramerStagger";
import {
Badge,
services/frontend/src/main.tsx
+3 -17
View File
@@ -1,21 +1,9 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ToastProvider } from "./shared/ui";
import "./styles.css";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 30_000, // data stays fresh for 30s — no refetch within this window
gcTime: 5 * 60_000, // keep unused data in cache for 5 minutes
refetchOnWindowFocus: false, // avoid spamming the API on tab switches
retry: 2,
},
},
});
const root = document.getElementById("root");
if (!root) {
@@ -24,10 +12,8 @@ if (!root) {
ReactDOM.createRoot(root).render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<ToastProvider>
<App />
</ToastProvider>
</QueryClientProvider>
<ToastProvider>
<App />
</ToastProvider>
</React.StrictMode>,
);
services/frontend/src/shared/api/client.ts
+52 -175
View File
@@ -1,6 +1,34 @@
// ─── Shared HTTP client — all API endpoints in one file ──────────────────────
import type { MessageRecord, PageResult } from "@bete/shared";
import type {
ChatResponse,
DashboardChannel,
DashboardChannelDetail,
DashboardStats,
DashboardUser,
DashboardUserDetail,
} from "../../entities/dashboard/types.js";
import type {
Channel,
Guild,
GuildVoiceEntry,
} from "../../entities/guild/types.js";
import type {
MediaItem,
MediaMode,
MediaState,
} from "../../entities/media/types.js";
import type {
VoiceRecording,
VoiceRecordingListResponse,
} from "../../entities/recording/types.js";
import type {
AppConfig,
DashboardTab,
UIState,
} from "../../entities/ui/types.js";
import type { ActiveSpeaker, VoiceStatus } from "../../entities/voice/types.js";
import { createLogger } from "../lib/logger.js";
const logger = createLogger("api");
@@ -85,86 +113,31 @@ export function getAPIURL(): string {
return BE_API_URL;
}
// ─── Types ───────────────────────────────────────────────────────────────────
// ─── Re-exports ──────────────────────────────────────────────────────────────
export type { MessageRecord, PageResult };
export interface Guild {
id: string;
name: string;
icon: string | null;
}
export interface Channel {
id: string;
name: string;
type?: string;
parentId?: string | null;
}
export interface GuildVoiceEntry {
guildId: string;
channelId: string;
channelName: string;
connectedAt: number;
}
export interface VoiceStatus {
connected: boolean;
activeGuildId: string | null;
activeChannelId: string | null;
activeChannelName: string | null;
connections: GuildVoiceEntry[];
}
export interface ActiveSpeaker {
id?: string;
userId?: string;
username: string;
avatar: string;
speaking: boolean;
}
export type MediaMode = "music" | "screen";
export interface MediaItem {
id?: string;
source: string;
title: string;
mode?: "music" | "screen";
durationMs?: number | null;
thumbnailUrl?: string | null;
}
export interface MediaState {
playing: boolean;
musicVolume: number;
current: MediaItem | null;
queue: MediaItem[];
}
export interface UIState {
selectedGuild?: string;
selectedVoiceGuild?: string;
selectedVoiceChannel?: string;
selectedTextGuild?: string;
selectedTextChannel?: string;
selectedAnalyticsGuild?: string;
selectedAnalyticsChannel?: string;
activeTab?: "live" | "messages" | "dashboard";
isListening?: boolean;
isStreaming?: boolean;
}
export interface AppConfig {
monitorGuildId: string | null;
}
export interface ChatResponse {
response?: string;
}
export type DashboardTab = "live" | "messages" | "dashboard";
export type {
ActiveSpeaker,
AppConfig,
Channel,
ChatResponse,
DashboardChannel,
DashboardChannelDetail,
DashboardStats,
DashboardTab,
DashboardUser,
DashboardUserDetail,
Guild,
GuildVoiceEntry,
MediaItem,
MediaMode,
MediaState,
MessageRecord,
PageResult,
UIState,
VoiceRecording,
VoiceRecordingListResponse,
VoiceStatus,
};
// ─── Messages ────────────────────────────────────────────────────────────────
@@ -275,30 +248,6 @@ export function setMediaVolume(volume: number): Promise<MediaState> {
// ─── Recordings ──────────────────────────────────────────────────────────────
export interface VoiceRecording {
id: string;
user_id: string;
username: string;
avatar_url: string | null;
guild_id: string | null;
channel_id: string | null;
channel_name: string | null;
filename: string;
size_bytes: number;
download_url: string | null;
upload_status: "pending" | "uploaded" | "failed";
upload_error: string | null;
transcription?: string | null;
created_at: number;
uploaded_at: number | null;
}
export interface VoiceRecordingListResponse {
items: VoiceRecording[];
nextCursor: string | null;
hasMore: boolean;
}
export function listRecordings(params?: {
limit?: number;
cursor?: string;
@@ -325,55 +274,6 @@ export function login(password: string): Promise<{ ok: boolean }> {
// ─── Dashboard ─────────────────────────────────────────────────────────────────
export interface DashboardStats {
total_messages: number;
total_users: number;
total_flagged: number;
total_clean: number;
total_warned: number;
total_error: number;
total_voice_recordings: number;
total_profiles: number;
today_messages: number;
today_flagged: number;
active_users_24h: number;
top_channels: Array<{
channel_id: string;
channel_name: string | null;
message_count: number;
}>;
moderation_overview: {
pending: number;
processing: number;
error: number;
};
}
export interface DashboardUser {
user_id: string;
username: string | null;
avatar_url: string | null;
profile_summary: string | null;
total_messages: number;
flagged_count: number;
last_message_at: number | null;
trust_score: number | null;
}
export interface DashboardUserDetail extends DashboardUser {
last_analyzed_at: number | null;
clean_message_streak: number | null;
total_infractions: number | null;
clean_count: number;
recent_messages: Array<{
id: string;
content: string;
channel_id: string;
created_at: number;
ai_status: string | null;
}>;
}
export function getDashboardStats(): Promise<DashboardStats> {
return request<DashboardStats>("/api/dashboard/stats");
}
@@ -399,29 +299,6 @@ export function getDashboardUserDetail(
// ─── Dashboard Channels ─────────────────────────────────────────────────────────
export interface DashboardChannel {
channel_id: string;
channel_name: string | null;
guild_id: string | null;
total_messages: number;
flagged_count: number;
last_message_at: number | null;
culture_summary: string | null;
last_analyzed_at: number | null;
}
export interface DashboardChannelDetail extends DashboardChannel {
clean_count: number;
recent_messages: Array<{
id: string;
content: string;
channel_id: string;
created_at: number;
ai_status: string | null;
username: string | null;
}>;
}
export function listDashboardChannels(
params: {
limit?: number;
services/frontend/src/shared/hooks/useAudioTransmit.ts
+1
View File
@@ -1,6 +1,7 @@
// ─── Audio transmit hook — captures mic, encodes to PCM, sends via WebSocket ──
import { useCallback, useRef, useState } from "react";
import { getAPIURL } from "../api/client.js";
// note: this hook only uses API functions, not entity types
import { createLogger } from "../lib/logger";
const SAMPLE_RATE = 24000;
services/frontend/src/shared/hooks/useGsapTransition.ts
-123
View File
@@ -1,123 +0,0 @@
import gsap from "gsap";
import { useCallback, useEffect, useRef } from "react";
function prefersReducedMotion(): boolean {
if (typeof window === "undefined") return false;
return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
}
export function useGsapTransition(tabKey: string) {
const pageRef = useRef<HTMLDivElement>(null);
const ctxRef = useRef<gsap.Context | null>(null);
const animateIn = useCallback(() => {
// Kill any previously recorded animations to prevent conflicts
ctxRef.current?.kill();
const instant = prefersReducedMotion();
const scope = pageRef.current ?? undefined;
const ctx = gsap.context(() => {
const tl = gsap.timeline();
// Page container: fade-in + slide-up (400ms ease-out)
if (pageRef.current) {
tl.fromTo(
pageRef.current,
{ opacity: 0, y: 20 },
{
opacity: 1,
y: 0,
duration: instant ? 0 : 0.4,
ease: "power2.out",
},
);
}
// Stagger children with data-stagger attribute
const staggerEls =
pageRef.current?.querySelectorAll<HTMLElement>("[data-stagger]");
if (staggerEls && staggerEls.length > 0) {
tl.fromTo(
staggerEls,
{ opacity: 0, y: 15 },
{
opacity: 1,
y: 0,
duration: instant ? 0 : 0.3,
stagger: instant ? 0 : 0.05,
ease: "power2.out",
},
"-=0.1",
);
}
}, scope);
ctxRef.current = ctx;
}, [tabKey]);
const animateOut = useCallback((): Promise<void> => {
// Kill any previously recorded animations to prevent conflicts
ctxRef.current?.kill();
return new Promise<void>((resolve) => {
const instant = prefersReducedMotion();
const scope = pageRef.current ?? undefined;
const ctx = gsap.context(() => {
const tl = gsap.timeline({
onComplete: () => {
resolve();
},
});
if (pageRef.current) {
// Page container: fade-out + slide-down (300ms ease-in)
tl.to(pageRef.current, {
opacity: 0,
y: 20,
duration: instant ? 0 : 0.3,
ease: "power2.in",
});
} else {
// No element to animate — resolve immediately
resolve();
}
}, scope);
ctxRef.current = ctx;
});
}, [tabKey]);
// Cleanup all recorded animations on unmount
useEffect(() => {
return () => {
ctxRef.current?.kill();
};
}, []);
return { pageRef, animateIn, animateOut };
}
function gsapCardHover() {
return {
onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {
gsap.to(e.currentTarget, {
y: -4,
boxShadow: "0 8px 25px rgba(0,0,0,0.15)",
duration: 0.2,
ease: "power2.out",
overwrite: "auto",
});
},
onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {
gsap.to(e.currentTarget, {
y: 0,
boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
duration: 0.2,
ease: "power2.out",
overwrite: "auto",
});
},
};
}
services/frontend/src/shared/hooks/useMascotChat.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { useCallback, useState } from "react";
import type { ChatResponse } from "../api/client";
import type { ChatResponse } from "../../entities/dashboard/types.js";
import { request } from "../api/client";
import { createLogger } from "../lib/logger";
services/frontend/src/shared/hooks/useMascotSummary.ts
-125
View File
@@ -1,125 +0,0 @@
import { useEffect, useState } from "react";
import type { MessageRecord } from "../api/client";
/**
* useMascotSummary — Generates AI-powered summary/insights from recent messages
* Used by mascot's floating chat bubble to display conversation insights
*/
interface UseMascotSummaryOptions {
messages: MessageRecord[];
enabled?: boolean;
}
const summaryPrompts = [
"📊 Diskusi sangat aktif dengan {count} pesan",
"💬 Topik populer: {topic} ({percentage}%)",
"👥 Partisipan utama: {users}",
"⏰ Aktivitas puncak: {time}",
"🔥 Buzz level: {level}",
"💡 Insight: {insight}",
];
function generateInsight(messages: MessageRecord[]): string {
if (messages.length === 0) {
return "Menunggu pesan...";
}
const totalMessages = messages.length;
const recentMessages = messages.slice(-10);
// Hitung user yang berbeda
const uniqueUsers = new Set(recentMessages.map((m) => m.user_id)).size;
// Hitung average panjang pesan
const avgLength = Math.round(
recentMessages.reduce((sum, m) => sum + (m.content?.length || 0), 0) /
recentMessages.length,
);
// Tentukan tipe percakapan
let insight = "";
if (avgLength > 150) {
insight = "Diskusi mendalam sedang berlangsung";
} else if (avgLength > 80) {
insight = "Percakapan normal dan interaktif";
} else {
insight = "Chat cepat dan ringkas";
}
// Tambah info partisipan
if (uniqueUsers > 5) {
insight += ` • ${uniqueUsers} orang aktif`;
}
// Tambah info volume
if (totalMessages > 50) {
insight += " • Volume tinggi 🔥";
} else if (totalMessages > 20) {
insight += " • Percakapan aktif";
}
return insight;
}
function extractTopics(messages: MessageRecord[]): string {
if (messages.length === 0) return "Tidak ada topik";
// Extract keywords dari recent messages
const recentMessages = messages.slice(-15);
const content = recentMessages
.map((m) => m.content?.toLowerCase() || "")
.join(" ");
// Simple keyword extraction
const keywords = [
{ word: "voice", label: "Voice" },
{ word: "recording", label: "Recording" },
{ word: "audio", label: "Audio" },
{ word: "chat", label: "Chat" },
{ word: "message", label: "Message" },
{ word: "user", label: "User" },
];
for (const { word, label } of keywords) {
if (content.includes(word)) {
return label;
}
}
return "Umum";
}
export function useMascotSummary({
messages,
enabled = true,
}: UseMascotSummaryOptions): string {
const [summary, setSummary] = useState<string>("");
useEffect(() => {
if (!enabled || messages.length === 0) {
setSummary("");
return;
}
// Generate summary berdasarkan messages
const insight = generateInsight(messages);
setSummary(insight);
// Rotate summary setiap 5 detik
const interval = setInterval(() => {
setSummary((prev) => {
if (prev.includes("aktif")) {
return `📈 Total: ${messages.length} pesan`;
} else if (prev.includes("Total")) {
return generateInsight(messages);
}
return prev;
});
}, 5000);
return () => clearInterval(interval);
}, [messages, enabled]);
return summary;
}
services/frontend/src/shared/hooks/useUIState.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { useCallback } from "react";
import type { UIState } from "../api/client";
import type { UIState } from "../../entities/ui/types.js";
import { uiStateValidator, useLocalStorage } from "./useLocalStorage";
export function useUIState() {
services/frontend/src/shared/lib/utils.ts
+22
View File
@@ -16,3 +16,25 @@ export function formatBytes(bytes: number): string {
export function formatDate(value: number): string {
return new Date(value).toLocaleString();
}
export interface MessageMetadata {
stickers?: Array<{ name?: string; url?: string }>;
attachments?: Array<{ name: string; url: string; contentType?: string }>;
embeds?: Array<{ title?: string; image?: string; thumbnail?: string }>;
channel?: {
channelId: string;
channelName?: string;
threadId?: string;
threadName?: string;
};
}
export function parseMetadata(value: string | null): MessageMetadata {
if (!value) return {};
try {
const parsed = JSON.parse(value) as MessageMetadata;
return parsed;
} catch {
return {};
}
}
services/frontend/src/shared/ui/MobileTabBar.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { LayoutDashboard, MessageSquare, Radio } from "lucide-react";
import type { DashboardTab } from "../api/client";
import type { DashboardTab } from "../../entities/ui/types.js";
import { cn } from "../lib/utils";
const tabs: Array<{ id: DashboardTab; label: string; Icon: typeof Radio }> = [
services/frontend/src/shared/ui/toast.tsx
+1
View File
@@ -1,4 +1,5 @@
// ─── Toast notification system ──────────────────────────────────────────────
// (no entity type imports needed — only uses string/ReactNode)
import {
AlertCircle,
AlertTriangle,
services/frontend/src/shared/ws/socket.ts
+123 -48
View File
@@ -1,6 +1,14 @@
// ─── WebSocket singleton with reconnect, typed events, and observable status ─
import type {
AttachmentRecord,
MessageRecord,
VoiceRecordingUploadData,
} from "@bete/shared";
import { useCallback, useEffect, useRef, useState } from "react";
import type { MediaState } from "../../entities/media/types.js";
import { createLogger } from "../lib/logger.js";
import type { ActiveSpeakerData } from "./events.js";
const logger = createLogger("socket");
@@ -23,30 +31,48 @@ function computeBackoff(attempt: number): number {
export interface WsHandlers {
onBinary?: BinaryHandler;
onMessageCreated?: (data: unknown) => void;
onMessageUpdated?: (data: unknown) => void;
onMessageDeleted?: (data: unknown) => void;
onMessageAnalyzed?: (data: unknown) => void;
onAttachmentCreated?: (data: unknown) => void;
onAttachmentUploaded?: (data: unknown) => void;
onUserState?: (users: unknown[]) => void;
onUiState?: (state: unknown) => void;
onMediaState?: (state: unknown) => void;
onVoiceRecordingStarted?: (data: unknown) => void;
onVoiceRecordingStopped?: (data: unknown) => void;
onVoiceRecordingUploaded?: (data: unknown) => void;
onVoicePcmData?: (data: unknown) => void;
onVoiceActiveUser?: (data: unknown) => void;
onReactionAdded?: (data: unknown) => void;
onReactionRemoved?: (data: unknown) => void;
onThreadCreated?: (data: unknown) => void;
onThreadDeleted?: (data: unknown) => void;
onThreadUpdated?: (data: unknown) => void;
onChannelTopicUpdated?: (data: unknown) => void;
onPresenceUpdated?: (data: unknown) => void;
onGuildMemberAdded?: (data: unknown) => void;
onGuildMemberRemoved?: (data: unknown) => void;
onVoiceAnalyzed?: (data: unknown) => void;
onMessageCreated?: (data: MessageRecord) => void;
onMessageUpdated?: (
data: MessageRecord & { edited_content?: string | null },
) => void;
onMessageDeleted?: (data: {
id: string;
channel_id?: string;
deleted_at: number;
}) => void;
onMessageAnalyzed?: (data: MessageRecord) => void;
onAttachmentCreated?: (data: AttachmentRecord) => void;
onAttachmentUploaded?: (data: AttachmentRecord) => void;
onUserState?: (users: ActiveSpeakerData[]) => void;
onUiState?: (state: Record<string, unknown>) => void;
onMediaState?: (state: MediaState) => void;
onVoiceRecordingStarted?: (data: Record<string, unknown>) => void;
onVoiceRecordingStopped?: (data: {
guild_id: string;
session_id: string;
duration_ms: number;
participants: number;
segment_count: number;
status: string;
stopped_at: number;
}) => void;
onVoiceRecordingUploaded?: (data: VoiceRecordingUploadData) => void;
onVoicePcmData?: (data: {
userId: string;
pcm: string;
metadata?: Record<string, unknown>;
}) => void;
onVoiceActiveUser?: (data: ActiveSpeakerData) => void;
onReactionAdded?: (data: Record<string, unknown>) => void;
onReactionRemoved?: (data: Record<string, unknown>) => void;
onThreadCreated?: (data: Record<string, unknown>) => void;
onThreadDeleted?: (data: Record<string, unknown>) => void;
onThreadUpdated?: (data: Record<string, unknown>) => void;
onChannelTopicUpdated?: (data: Record<string, unknown>) => void;
onPresenceUpdated?: (data: Record<string, unknown>) => void;
onGuildMemberAdded?: (data: Record<string, unknown>) => void;
onGuildMemberRemoved?: (data: Record<string, unknown>) => void;
onVoiceAnalyzed?: (data: Record<string, unknown>) => void;
}
let _wsInstance: WebSocket | null = null;
@@ -110,76 +136,125 @@ function doConnect(): WebSocket {
for (const h of _listeners) {
switch (msg.type) {
case "message_created":
if (msg.data !== undefined) h.onMessageCreated?.(msg.data);
if (msg.data !== undefined)
h.onMessageCreated?.(msg.data as MessageRecord);
break;
case "message_updated":
if (msg.data !== undefined) h.onMessageUpdated?.(msg.data);
if (msg.data !== undefined)
h.onMessageUpdated?.(
msg.data as MessageRecord & { edited_content?: string | null },
);
break;
case "message_deleted":
if (msg.data !== undefined) h.onMessageDeleted?.(msg.data);
if (msg.data !== undefined)
h.onMessageDeleted?.(
msg.data as {
id: string;
channel_id?: string;
deleted_at: number;
},
);
break;
case "message_analyzed":
if (msg.data !== undefined) h.onMessageAnalyzed?.(msg.data);
if (msg.data !== undefined)
h.onMessageAnalyzed?.(msg.data as MessageRecord);
break;
case "attachment_created":
if (msg.data !== undefined) h.onAttachmentCreated?.(msg.data);
if (msg.data !== undefined)
h.onAttachmentCreated?.(msg.data as AttachmentRecord);
break;
case "attachment_uploaded":
if (msg.data !== undefined) h.onAttachmentUploaded?.(msg.data);
if (msg.data !== undefined)
h.onAttachmentUploaded?.(msg.data as AttachmentRecord);
break;
case "user_state":
h.onUserState?.((msg.users as unknown[]) || []);
h.onUserState?.(
(msg.users as unknown as ActiveSpeakerData[]) || [],
);
break;
case "ui_state":
h.onUiState?.(msg.state);
h.onUiState?.(msg.state as Record<string, unknown>);
break;
case "media_state":
h.onMediaState?.(msg.state);
h.onMediaState?.(msg.state as MediaState);
break;
case "voice_recording_started":
if (msg.data !== undefined) h.onVoiceRecordingStarted?.(msg.data);
if (msg.data !== undefined)
h.onVoiceRecordingStarted?.(msg.data as Record<string, unknown>);
break;
case "voice_recording_stopped":
if (msg.data !== undefined) h.onVoiceRecordingStopped?.(msg.data);
if (msg.data !== undefined)
h.onVoiceRecordingStopped?.(
msg.data as {
guild_id: string;
session_id: string;
duration_ms: number;
participants: number;
segment_count: number;
status: string;
stopped_at: number;
},
);
break;
case "voice_recording_uploaded":
if (msg.data !== undefined) h.onVoiceRecordingUploaded?.(msg.data);
if (msg.data !== undefined)
h.onVoiceRecordingUploaded?.(
msg.data as VoiceRecordingUploadData,
);
break;
case "voice_pcm_data":
if (msg.data !== undefined) h.onVoicePcmData?.(msg.data);
if (msg.data !== undefined)
h.onVoicePcmData?.(
msg.data as {
userId: string;
pcm: string;
metadata?: Record<string, unknown>;
},
);
break;
case "voice_active_user":
if (msg.data !== undefined) h.onVoiceActiveUser?.(msg.data);
if (msg.data !== undefined)
h.onVoiceActiveUser?.(msg.data as ActiveSpeakerData);
break;
case "voice_analyzed":
if (msg.data !== undefined) h.onVoiceAnalyzed?.(msg.data);
if (msg.data !== undefined)
h.onVoiceAnalyzed?.(msg.data as Record<string, unknown>);
break;
case "reaction_added":
if (msg.data !== undefined) h.onReactionAdded?.(msg.data);
if (msg.data !== undefined)
h.onReactionAdded?.(msg.data as Record<string, unknown>);
break;
case "reaction_removed":
if (msg.data !== undefined) h.onReactionRemoved?.(msg.data);
if (msg.data !== undefined)
h.onReactionRemoved?.(msg.data as Record<string, unknown>);
break;
case "thread_created":
if (msg.data !== undefined) h.onThreadCreated?.(msg.data);
if (msg.data !== undefined)
h.onThreadCreated?.(msg.data as Record<string, unknown>);
break;
case "thread_deleted":
if (msg.data !== undefined) h.onThreadDeleted?.(msg.data);
if (msg.data !== undefined)
h.onThreadDeleted?.(msg.data as Record<string, unknown>);
break;
case "thread_updated":
if (msg.data !== undefined) h.onThreadUpdated?.(msg.data);
if (msg.data !== undefined)
h.onThreadUpdated?.(msg.data as Record<string, unknown>);
break;
case "channel_topic_updated":
if (msg.data !== undefined) h.onChannelTopicUpdated?.(msg.data);
if (msg.data !== undefined)
h.onChannelTopicUpdated?.(msg.data as Record<string, unknown>);
break;
case "presence_updated":
if (msg.data !== undefined) h.onPresenceUpdated?.(msg.data);
if (msg.data !== undefined)
h.onPresenceUpdated?.(msg.data as Record<string, unknown>);
break;
case "guild_member_added":
if (msg.data !== undefined) h.onGuildMemberAdded?.(msg.data);
if (msg.data !== undefined)
h.onGuildMemberAdded?.(msg.data as Record<string, unknown>);
break;
case "guild_member_removed":
if (msg.data !== undefined) h.onGuildMemberRemoved?.(msg.data);
if (msg.data !== undefined)
h.onGuildMemberRemoved?.(msg.data as Record<string, unknown>);
break;
case "analysis_queue_status":
// monitoring-only — no UI action needed
services/frontend/src/widgets/DashboardLayout.tsx
+3 -5
View File
@@ -1,10 +1,8 @@
import { motion } from "framer-motion";
import type { ReactNode } from "react";
import type {
DashboardTab,
MessageRecord,
VoiceStatus,
} from "../shared/api/client";
import type { MessageRecord } from "../entities/message/types.js";
import type { DashboardTab } from "../entities/ui/types.js";
import type { VoiceStatus } from "../entities/voice/types.js";
import { fadeSlideUp } from "../shared/hooks/useFramerStagger";
import type { WsStatus } from "../shared/ws/socket";
import { Header } from "./Header";
services/frontend/src/widgets/Header.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import { motion } from "framer-motion";
import { Wifi, WifiOff } from "lucide-react";
import type { DashboardTab, VoiceStatus } from "../shared/api/client";
import type { DashboardTab } from "../entities/ui/types.js";
import type { VoiceStatus } from "../entities/voice/types.js";
import { fadeSlideUp } from "../shared/hooks/useFramerStagger";
import { cn } from "../shared/lib/utils";
import { Badge } from "../shared/ui";
services/frontend/src/widgets/Sidebar.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import { motion } from "framer-motion";
import { LayoutDashboard, MessageSquare, Radio } from "lucide-react";
import type { DashboardTab, MessageRecord } from "../shared/api/client";
import type { MessageRecord } from "../entities/message/types.js";
import type { DashboardTab } from "../entities/ui/types.js";
import { useMascotChat } from "../shared/hooks/useMascotChat";
import { cn } from "../shared/lib/utils";
import { MascotChatbot } from "./mascot/MascotChatbot";
services/frontend/src/widgets/mascot/MascotChatbot.tsx
+6 -1
View File
@@ -1,8 +1,11 @@
import { AnimatePresence, motion } from "framer-motion";
import { Maximize2, MessageCircle, Minimize2, Send, X } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { createLogger } from "../../shared/lib/logger.js";
import { cn } from "../../shared/lib/utils";
const logger = createLogger("mascot-chat");
export interface ChatMessage {
id: string;
role: "user" | "mascot";
@@ -84,7 +87,9 @@ export function MascotChatbot({
setMessages((prev) => [...prev, mascotMessage]);
} catch (error) {
console.error("Error sending message:", error);
logger.error("Error sending message", {
error: error instanceof Error ? error.message : String(error),
});
const errorMessage: ChatMessage = {
id: `mascot-error-${Date.now()}`,
role: "mascot",