- chatbot-container: remove chatOpen layer — the minimized bubble now
expands straight into the chat panel (single click, no extra button)
- Remove the redundant 'Tanya soal server...' quick-prompt button and
the PanelLeft collapse toggle (one less state to fight)
- Bubble fixed h-[460px], chat panel flex-fills remaining space
- chat-panel: suggestion chips on empty state (suasana server, channel
paling ramai, total pesan, pesan bermasalah) so first-time users can
start with a single click
- Input: roomier padding, more descriptive placeholder, bigger send
button, autoComplete off
- Drop chatOpen/setChatOpen from context (dead state)
Backend:
- New chatbot.tools.ts: 4 tools (get_server_stats, get_top_channels,
get_recent_activity, get_top_flagged) with real DB executors
- chatbot.service: agentic loop — stream:true, parse SSE, execute
tool_calls, feed results back, up to 4 rounds
- controller: resolve userId from X-User-Id header (no-login device
uuid) with auth middleware precedence; history/clear scoped per user
Frontend:
- use-chatbot-user: mint UUID in localStorage, send as X-User-Id
- chatbotApi.send/getHistory/clearHistory accept userId header
- client.ts: apiRequest supports custom headers per call
- provider: history load + send + clear keyed to device user id
- Delete chatbot-canvas.tsx (placeholder face canvas) + its export
- Remove canvas area from chatbot container; chat panel gets the freed
space (248px → 300px) and bubble height drops 440px → 400px
- Chatbot bubble: 220px → 320px wide, 440px tall; proper header with
drag handle; quick-prompt row when chat is closed
- ChatPanel: show ALL history (not last 8), Indonesian placeholder/empty
state/error copy (backend speaks Indonesian), timestamps (id-ID),
clear-history button, typing indicator bubbles, Enter-to-send
- Send active guildId as context so backend answers reference the real
server (serverInsights path in chatbot.service)
- GuildId sync from layout → ChatbotProvider via ChatbotGuildSync
- chatbotApi.send(message, guildId) → POST /api/chat {message, context}
matching BE zod schema (guildId optional)
VoiceActivityTimeline was never given a data prop — the Activity tab always
showed an empty Recharts bar chart while the connection tab already had live
speaker state. Replace the dead chart with a live speaker/activity list fed
from the same WebSocket data, so the tab reflects real state instead of
misleading empty bars.
The voice_recordings table has no duration column, but the backend aliased
duration_bytes = size_bytes (file size in bytes) and RecordingCard divided it
by 60 as if it were seconds — a 3MB MP3 rendered as a nonsensical '55924:3'
fake timestamp. Drop the fabricated field and show real file size instead.
Also render edited_content fallback in the analysis search results for
consistency with message cards/detail.
message_updated broadcasts only {id, edited_content, edited_at} (+ reset
ai_* fields), but the frontend replaced the whole cached record, wiping
username/content/channel_id/created_at -> blank cards and the
'the channel_id of undefined' crash on /messages. Merge partials over the
existing record (list + detail), make list-patching channel-filter aware,
show edited content/badge, and fix the message_updated WS type.
Also broadcast type:'edited' + ai reset in message_updated so the live UI
matches the DB update.
Backend:
- GET /api/dashboard/activity?days=1..90 — daily buckets (messages,
flagged, active_users) + hourly distribution last 24h
- clamped days param, reuses existing indexes (idx_messages_created,
ai_status_created)
Frontend:
- ActivityChart: area chart messages+flagged per day, 7/14/30d range
- HourlyActivityChart: 24h bars with peak highlight
- ModerationDonut: clean/flagged/warned/error breakdown with live
summary line (server X% clean)
- Dashboard layout: activity 2/3 + donut 1/3, hourly + top channels
Verified: endpoint returns real data from prod DB (784/1897/8 msgs
per day), tsc clean backend+frontend.
- recording-card: kartu aktif di-highlight (ring primary + glow pulse),
badge 'Now Playing'/'Loading'/'Paused', tombol play berubah jadi Pause
saat playing dan spinner saat loading, waveform equalizer beranimasi
(animate-eq, delay per bar) saat playing / pulse saat loading.
- recording-player: jadi now-playing panel — tombol play/pause + spinner
loading, progress bar + waktu (current/duration), status 'loading…',
audio element pindah ke sini + event onPlay/onPause/onWaiting/onCanPlay/
onPlaying/onError naik ke page.
- recordings/page: state isPlaying/isLoadingAudio + audioRef, togglePlay
(klik card lain = ganti track, klik card sama = pause/resume).
- globals.css: keyframes eq-bounce + card-glow.
Verified: FE tsc0, next build 10/10 static pages.
Voice page (connection tab):
- ListenControl baru: toggle Listen (Headphones) — mulai PcmPlayer dari
user gesture, subscribe onPcm WS, volume slider, bar level per-user
REAL dari PCM (bukan random).
- lib/audio/pcm-player.ts (baru): ScriptProcessorNode mixer — ring buffer
2s per user (hash FNV-1a sama dengan gateway), upsampling 24k→48k
linear, mix semua user ke mono, gain volume, cleanup ring diam 5s.
- useVoiceListen + hashUserId di hooks; auto-stop saat disconnect.
Recordings:
- recording-player: reset src+load+play() eksplisit (bukan autoPlay doang),
tampilkan filename + error state 'playback failed' kalau file rusak.
- recording-card: tombol Download fetch blob (CORS tele open) → objectURL
→ force download dengan nama asli; fallback buka tab baru kalau fetch
gagal; spinner saat mendownload.
Verified: FE tsc 0, next build 10/10 static pages.
Hapus tab Live + komponennya (LiveStream, ModQueue) dari halaman
dashboard — tab Stats/Users/Channels tetap. useReview tetap dipakai
messages page (review tab), jadi hook tidak dihapus.
Verifikasi: tsc PASS, biome 0 error, next build PASS.
msg.username bisa undefined saat pesan live masuk lewat WS
(message_updated Partial payload / capture tidak lengkap) ->
msg.username.charAt(0) TypeError, halaman /messages mati.
- message-card + search-panel: username?.charAt(0) ?? '?'
- created_at di-guard juga biar tidak render 'Invalid Date'
Verifikasi: tsc PASS, build PASS, biome 0 error. DB saat ini 0 row
null username (1176 total) — crash murni dari jalur WS live.
- useMessageDetail: guard attachments fetcher — revalidate bisa race
detail load, detail.data undefined saat fetcher jalan ->
TypeError 'Cannot read properties of undefined (reading channel_id)'
yang bikin halaman /messages mati (Next error boundary). Sekarang
fetcher balikin [] kalau channel_id belum ada; hapus non-null
assertion. Diverifikasi: /messages sebelumnya crash, sekarang render
dengan data asli (list, verdict, confidence, sticker, emoji).
- ResponsiveContainer (recharts 3.8): initialDimension -1 di render
pertama -> warning 'width(-1) and height(-1)'. Pakai height numerik
tetap (192/160/48) + minWidth/minHeight 0 -> calculatedHeight >0,
warning hilang; width tetap responsif via ResizeObserver. Chart
baru dirender setelah mount (useMounted) biar container punya ukuran.
Diverifikasi console: 0 warning, 0 error di dashboard & voice.
Rombak data layer frontend:
- Hapus @tanstack/react-query (package.json, lockfile, provider di
dashboard layout) — ganti SWR 2.4.2 + SWRConfig (revalidateOnFocus
false, deduping 10s, no retry on 404)
- Semua hooks data ditulis ulang ke useSWR; useAction() helper baru
pengganti useMutation dengan surface kompatibel (mutate/mutateAsync/
isPending/error)
- useMessages + useMessagesHasMore share satu SWR key — probe cursor
yang tadinya dobel fetch API sekarang deduped
- WS sync (messages/media/recordings) pindah dari queryClient ke
SWR mutate dengan filter key + revalidate:false
- useMessageSearch() dipakai search-panel & search-overlay; search
overlay backdrop div -> button (fix a11y lint)
Rapikan UI + isi data:
- Tab stats recordings: placeholder 'coming soon' diganti stat asli
(total, ukuran, speaker unik, top speakers)
- Empty states konsisten via EmptyState (images/review/recordings),
EmptyState terima className
- biome check --write: 0 error, 8 warning pre-existing
- Verifikasi: tsc --noEmit PASS, next build PASS (11 halaman static),
API live dicek — semua endpoint dashboard/messages/guilds/config/
voice/media/recordings/review balikin data
QoL lanjutan dari fix60084b3: content pesan mentah masih nampilin
snowflake (<@&roleid>, <@userid>, <:emoji:id>) di log moderasi dan
prompt LLM. Sekarang dirender ke nama yang bisa dibaca:
- Gateway capture: metadata menyimpan mentionedRoles + mentionedUsers
(id+name) dari message.mentions, disimpan ke metadata JSON
- renderDiscordMentions(): <@&id> -> @RoleName, <@id> -> @Username,
<:name:id> -> :name:, fallback @role/@user — dipakai di
conversationContext (konteks LLM) dan moderationBuilders
(getAnalysisContent) sehingga LLM lihat nama role/user beneran,
bukan placeholder generik
- Frontend renderMessageContent() (mirror gateway) dipasang di semua
tempat nampilin content: message-card, message-detail(-view),
search-overlay, search-panel, users/channels section, live-stream,
mod-queue, review list; sticker-only message tetap [Sticker: name],
pesan teks+sticker kini ikut nampilin nama sticker
- tsc --noEmit PASS di gateway & frontend; renderDiscordMentions
diverifikasi manual (6 kasus: role/user/emoji/unknown/plain)
Root cause: ai-analysis-worker read llmResult.explanation and
llmResult.toxicityScore — fields the LLM pipeline never produces
(canonical AnalysisResult uses analysis/score). Every message fell back
to the bare template "Tidak ada indikasi pelanggaran." and the stored
score was always 0.
- Map analysis/score correctly; fallback now quotes the message content
- Prompt: ban generic analysis phrasing, require reply context
- LLM context: include replied-to message content (metadata.reference)
so the model can explain what the user is replying to
- Frontend: show thread/channel names from metadata instead of raw IDs
(message card, detail views, search overlay); detail panel now
displays the ai_analysis text
- Auto-delete log/DM include the descriptive analysis as the reason
- API/WS clients: same-origin by default, drop dead imphnen hardcode
- chatbot history: map BE rows {user_message,bot_response,created_at}
- message_deleted WS payload: object {id,deleted_at}, not bare string
- dashboard: wire top-channels chart + live mod queue from /api/review,
add Users & Channels tabs consuming /api/dashboard/users|channels
- recordings: live WS sync via voice_recording_uploaded; duration_bytes optional
- remove dead widgets with no BE data source (trend chart, heatmap)
Build & Deploy / build-and-push (backend) (push) Failing after 30s
Build & Deploy / build-and-push (discord-gateway) (push) Failing after 25s
Build & Deploy / build-and-push (proxy) (push) Failing after 25s
- Hapus export DetailStat dan StatCard dari shared/index.ts
(file komponen tidak ada atau salah lokasi)
- Buat message-detail-view.tsx dengan export MessageDetailView
(rename dari message-detail.tsx, sesuaikan export name)
Proxy image 96.9MB (nginx:alpine + 3.1MB static export)
Build & Deploy / build-and-push (backend) (push) Failing after 39s
Build & Deploy / build-and-push (discord-gateway) (push) Failing after 26s
Build & Deploy / build-and-push (proxy) (push) Failing after 24s
- Remove root pnpm-lock.yaml (stale monorepo lockfile)
- Rename root package from bete-monorepo to bete
- Clean up root scripts to use cd instead of pnpm --prefix
- Remove ignoreScripts/trustedDependencies from frontend package.json
- Optimize Dockerfiles with multi-stage builds and proper layer caching
- Update .dockerignore to exclude build artifacts
- Remove leftover pnpm test config file from frontend
Build & Deploy / build-and-push (backend) (push) Successful in 7m26s
Build & Deploy / build-and-push (proxy) (push) Successful in 2m16s
Build & Deploy / build-and-push (discord-gateway) (push) Canceled after 36m39s
Development should use the production API/WS endpoints
(imphnen.asepharyana.my.id) regardless of where the
frontend dev server runs.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Build & Deploy / build-and-push (discord-gateway) (push) Failing after 36s
Build & Deploy / build-and-push (proxy) (push) Successful in 1m59s
Build & Deploy / build-and-push (backend) (push) Successful in 3m47s
Detect localhost and redirect API calls and WebSocket
connections from frontend port (3000) to backend port
(3001). Production behavior (via nginx proxy) unchanged.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Build & Deploy / build-and-push (discord-gateway) (push) Failing after 27s
Build & Deploy / build-and-push (proxy) (push) Failing after 41s
Build & Deploy / build-and-push (backend) (push) Failing after 2m11s
- Remove broken DetailStat and StatCard exports from shared/index.ts
- Fix message-detail-view import to message-detail
- Create missing ai-status-badge component with status-based styling
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-28 14:40:19 +07:00
DeveloperandClaude Opus 4.8 (1M context) <noreply@anthropic.com
Full frontend redesign with glassmorphic dark theme, floating top nav,
Live2D mascot, split-pane messages, and Ops Center dashboard.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com
Add MascotExpressionSync component to dashboard layout that listens for message_created (flagged/warn triggers surprise expression) and voice_active_user (triggers listening expression) events.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Create ErrorBoundary class component with GlassCard fallback UI
- Update LoadingSkeleton with glass shimmer animation overlay
- Update EmptyState with GlassPanel and default Inbox icon
- Add ErrorBoundary to shared components index export
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
asepharyana