fix(voice): screen share GoLive died instantly — neutralize node-av custom ffmpeg filters

prepareStream (from @dank074/discord-video-stream) unconditionally appends
audio filters 'volume@internal_lib' + 'azmq' that exist ONLY in its custom
node-av jellyfin-ffmpeg build. The Nix deployment runs plain ffmpeg-headless
on PATH, so fluent-ffmpeg died instantly with 'Filter not found' (exit 8),
the NUT output stream stayed empty, and playStream's node-av demux failed
with 'Failed to open input from Readable stream: Invalid data found when
processing input' — every screen share failed ~100ms after start.

Fix: pass customFfmpegFlags ['-filter:a','anull'] — ffmpeg applies the LAST
-filter:a for a stream, so the trailing no-op filter overrides the custom
chain (verified: command ends with '-filter:a anull', transcode runs, node-av
demux finds video+audio). Realtime volume control was already removed from
GMW (a690e5b), so dropping the filters is lossless.

Verified end-to-end with the failing URL (youtu.be/fONoh7Pc6VU, AV1+Opus
DASH): getDirectScreenInput → NUT merge → patched prepareStream → node-av
demux finds H264 video + Opus audio streams.

.github/workflows/deploy.yml

@@ -82,6 +82,19 @@ jobs:
           extra-conf: |
             sandbox = false
             accept-flake-config = true
+            # Attic binary cache as substituter on the runner: lets CI pull the
+            # prebuilt attic client (and any cached deps/builds) over HTTPS,
+            # no SSH round-trip needed. extra-substituters (NOT
+            # extra-trusted-substituters) is required — Determinate Nix never
+            # merges trusted-* substituters for nix-store CLI clients.
+            extra-substituters = https://attic.asepharyana.my.id/gmw
+            extra-trusted-public-keys = gmw:Fq2Anzuhkb+T/hftWnPcveHSi21/RzIgIOeG8pCJa88=
+            # NOTE: nix-installer-action unconditionally injects
+            # 'build-provenance-tags' into /etc/nix/nix.conf (a Determinate
+            # Nix-only setting). With determinate:false the runner's upstream
+            # nix warns 'unknown setting build-provenance-tags' on every
+            # invocation — benign, cosmetic. Switching determinate:true would
+            # silence it but changes the runner's nix flavor.
 
       - name: Cache Nix
         uses: DeterminateSystems/magic-nix-cache-action@v14
@@ -107,13 +120,117 @@ jobs:
           ssh-keygen -y -f ~/.ssh/id_ed25519 >/dev/null 2>&1 || { echo "SSH key invalid"; exit 1; }
           ssh-keyscan -H "$VPS_HOST" >> ~/.ssh/known_hosts 2>/dev/null
 
+      # Push build result to Attic binary cache (attic.asepharyana.my.id) so
+      # the VPS can substitute it instead of a single-stream `nix copy ssh://`.
+      #
+      # Fast path: push DIRECTLY from the runner to the public attic endpoint
+      # (validated 2026-08-10: token auth over public HTTPS works without
+      # Tailscale). This skips the ~794MB closure SSH copy to the VPS that
+      # used to take 25+ minutes per new store path.
+      #
+      # The attic client is NOT in nixpkgs anymore and has no prebuilt
+      # releases, so we pull the same prebuilt closure the VPS uses
+      # (/nix/store/fygyy3yk4rqdknxkiwkqambpnhyax0k4-attic-0.1.0, ~52MB).
+      # The closure itself lives in the attic cache (pushed once from the
+      # VPS), so the runner bootstraps it over HTTPS via the configured
+      # extra-substituters — no SSH round-trip. If that fails we fall back
+      # to `nix copy --from ssh://`, then the old VPS-hop flow (SSH copy to
+      # VPS, then attic push from the VPS over Tailscale) so the deploy step
+      # always has a working closure path.
+      - name: Push to Attic cache
+        env:
+          ATTIC_TOKEN: ${{ secrets.ATTIC_TOKEN }}
+        run: |
+          if [ -z "$ATTIC_TOKEN" ]; then
+            echo "ATTIC_TOKEN not set; skipping attic push"
+            exit 0
+          fi
+          STORE_PATH="${{ steps.build.outputs.store-path }}"
+          ATTIC_DIR="/nix/store/fygyy3yk4rqdknxkiwkqambpnhyax0k4-attic-0.1.0"
+          ATTIC_BIN="$ATTIC_DIR/bin/attic"
+
+          attic_push_vps_hop() {
+            echo "Fallback: VPS-hop attic push"
+            # Copy closure to VPS (fast if attic already has it via substitute)
+            ssh "$VPS_USER@$VPS_HOST" "sudo /nix/var/nix/profiles/default/bin/nix-store --realise '$STORE_PATH'" 2>/dev/null \
+              || nix copy --to "ssh://$VPS_USER@$VPS_HOST" "$STORE_PATH"
+            # Push from VPS → Attic over Tailscale.
+            # --ignore-upstream-cache-filter is REQUIRED: without it, attic skips
+            # writing the narinfo to gmw when chunks exist in the upstream
+            # cache.nixos.org — leaving the path 404 on gmw so the VPS deploy's
+            # nix-store --realise can't find it and falls back to ssh copy.
+            # sudo: attic must read root's config (~/.config/attic), which has
+            # the imrnes-ts server → Tailscale. Non-root users' configs only
+            # have the public `pub` server → "Server imrnes-ts does not exist".
+            ssh "$VPS_USER@$VPS_HOST" "sudo $ATTIC_BIN push imrnes-ts:gmw '$STORE_PATH' --jobs 4 --ignore-upstream-cache-filter" \
+              || echo "attic push failed (non-fatal; ssh copy fallback below)"
+          }
+
+          # ── Get an attic client on the runner ────────────────────────────
+          # Order: PATH → pull the prebuilt closure from the attic cache
+          # itself (extra-substituters configured in Install Nix step, HTTPS
+          # only, no SSH) → pull over ssh from the VPS → VPS-hop.
+          # The attic client closure is stored in the attic cache (pushed
+          # once from the VPS), so the fast path never depends on SSH.
+          ATTIC_BIN=""
+          if command -v attic >/dev/null 2>&1; then
+            ATTIC_BIN="$(command -v attic)"
+          elif nix-store --realise "$ATTIC_DIR" 2>/tmp/attic-bootstrap.err; then
+            echo "✅ Pulled attic client from attic cache (HTTPS substituter)"
+            ATTIC_BIN="$ATTIC_DIR/bin/attic"
+          elif nix copy --from "ssh://$VPS_USER@$VPS_HOST" "$ATTIC_DIR" 2>>/tmp/attic-bootstrap.err; then
+            echo "✅ Pulled attic client from VPS over ssh"
+            ATTIC_BIN="$ATTIC_DIR/bin/attic"
+          else
+            echo "attic client unavailable on runner; using VPS-hop flow"
+            echo "--- bootstrap errors (stderr) ---"
+            tail -5 /tmp/attic-bootstrap.err 2>/dev/null || true
+            attic_push_vps_hop
+            exit 0
+          fi
+
+          # ── Direct push: runner → attic public endpoint ──────────────────
+          # --ignore-upstream-cache-filter forces the narinfo write even when
+          # the path's chunks already exist in upstream cache.nixos.org (which
+          # attic would otherwise skip, leaving the path 404 on the gmw cache).
+          mkdir -p "$HOME/.config/attic"
+          cat > "$HOME/.config/attic/config.toml" <<EOF
+          default-server = "pub"
+
+          [servers.pub]
+          endpoint = "https://attic.asepharyana.my.id"
+          token = "$ATTIC_TOKEN"
+          EOF
+          # Retry the direct push — a transient 502 (e.g. atticd restart,
+          # Traefik blip) must not abort the whole closure upload. attic push
+          # is idempotent, so re-running only uploads what's still missing.
+          push_ok=""
+          for attempt in 1 2 3; do
+            if "$ATTIC_BIN" push pub:gmw "$STORE_PATH" --jobs 4 --ignore-upstream-cache-filter; then
+              echo "✅ Pushed $STORE_PATH to attic directly from runner"
+              push_ok=1
+              break
+            fi
+            echo "⚠️ Direct attic push attempt $attempt/3 failed; retrying in 10s..."
+            sleep 10
+          done
+          if [ -z "$push_ok" ]; then
+            echo "Direct attic push failed after 3 attempts; using VPS-hop flow"
+            attic_push_vps_hop
+          fi
+
       # NOTE: env files /etc/gmw/backend.env & /etc/gmw/discord-gateway.env are
       # managed MANUALLY on the VPS (source of truth). CI only builds & deploys.
       - name: Deploy ${{ matrix.service }} to VPS
         run: |
           STORE_PATH="${{ steps.build.outputs.store-path }}"
           echo "=== Copying ${{ matrix.service }}: $STORE_PATH ==="
-          nix copy --to "ssh://$VPS_USER@$VPS_HOST" "$STORE_PATH"
+          if [ -n "${{ secrets.ATTIC_TOKEN }}" ] && ssh "$VPS_USER@$VPS_HOST" "sudo /nix/var/nix/profiles/default/bin/nix-store --realise '$STORE_PATH'" 2>/dev/null; then
+            echo "Substituted ${{ matrix.service }} from Attic cache"
+          else
+            echo "Attic substitute failed; falling back to ssh copy"
+            nix copy --to "ssh://$VPS_USER@$VPS_HOST" "$STORE_PATH"
+          fi
 
           echo "=== Updating profile ==="
           ssh "$VPS_USER@$VPS_HOST" "sudo /nix/var/nix/profiles/default/bin/nix-env --profile /nix/var/nix/profiles/gmw-${{ matrix.service }} --set '$STORE_PATH'"

.gitignore

@@ -12,7 +12,7 @@ worktrees/
 .worktrees/
 services/frontend/frontend/dist/
 target/
-
+nix/
 # Gitea CI runner logs
 .gitea/workflows/*.log
 

flake.nix

@@ -59,6 +59,36 @@
           pnpm rebuild 2>&1 || true
         '';
 
+        # Shrink the shipped node_modules to production deps only. The full
+        # install's .pnpm virtual store carries dev-only packages (biome,
+        # typescript, esbuild, drizzle-kit, vitest, ... ~150MB+) that are never
+        # needed at runtime, so we delete every .pnpm dir that is not part of
+        # the resolved production graph (`pnpm list --prod`).
+        #
+        # NOTE: do NOT use `pnpm install --prod` here — it collapses the
+        # public-hoist dir (.pnpm/node_modules) that runtime peer resolution
+        # relies on (e.g. @lng2004/node-datachannel and @seydx/node-av-linux-x64
+        # are only reachable through it), silently breaking voice/screenshare.
+        # Instead we keep the full install's symlink layout and only prune
+        # orphaned package dirs + broken symlinks.
+        # Must run AFTER tsc (typescript is a devDep) and after native builds.
+        pruneProd = ''
+          echo "=== Pruning devDependencies (production-only node_modules) ==="
+          pnpm list --prod --depth 999 --parseable 2>/dev/null \
+            | grep -o '\.pnpm/[^/]*' | sort -u > $TMPDIR/prod-pnms.txt
+          ( cd node_modules/.pnpm \
+              && for d in */; do \
+                   d="''${d%/}"; \
+                   [ "$d" = "node_modules" ] && continue; \
+                   grep -qF ".pnpm/$d" $TMPDIR/prod-pnms.txt || rm -rf "$d"; \
+                 done ) || true
+          # Drop symlinks whose .pnpm target was pruned (top-level, scoped dirs,
+          # hoist, .bin — any depth). Mirrors stdenv's noBrokenSymlinks check,
+          # which would otherwise fail the fixupPhase.
+          find node_modules -type l ! -exec test -e {} \; -delete 2>/dev/null || true
+          du -sh node_modules
+        '';
+
         # ---- Backend ----
         backend = pkgs.stdenv.mkDerivation {
           pname = "gmw-backend";
@@ -97,7 +127,7 @@
               console.log('Fixed ' + count + ' files');
             "
             echo "=== Build complete ==="
-          '';
+          '' + pruneProd;
 
           installPhase = ''
             mkdir -p $out/lib/gmw-backend
@@ -170,6 +200,20 @@ WRAPPER
                 fi
               fi
             done
+            echo "=== Cleaning node-datachannel build tree ==="
+            # Runtime only needs build/Release/node_datachannel.node + dist/ —
+            # the cmake FetchContent sources (build/_deps, ~380MB), intermediate
+            # cmake files, and the nested node_modules of build tooling (nw-gyp,
+            # typescript, puppeteer, eslint, ... ~380MB) are build-time only.
+            for pkg in node_modules/.pnpm/@lng2004+node-datachannel@*/node_modules/@lng2004/node-datachannel
+            do
+              if [ -d "$pkg" ]; then
+                ( cd "$pkg/build" \
+                    && find . -mindepth 1 -maxdepth 1 ! -name 'Release' -exec rm -rf {} + ) 2>/dev/null || true
+                rm -rf "$pkg/node_modules" 2>/dev/null || true
+                echo "node-datachannel cleaned: $(du -sh "$pkg" | cut -f1)"
+              fi
+            done
             echo "=== Compiling TypeScript ==="
             npx tsc 2>&1
             echo "=== Fixing @/ path aliases to relative paths ==="
@@ -198,7 +242,7 @@ WRAPPER
               console.log('Fixed ' + count + ' files');
             "
             echo "=== Build complete ==="
-          '';
+          '' + pruneProd;
 
           installPhase = ''
             mkdir -p $out/lib/gmw-discord-gateway

services/discord-gateway/pnpm-workspace.yaml

@@ -3,6 +3,7 @@ allowBuilds:
   "@lng2004/node-datachannel": true
   esbuild: true
   node-av: true
+  sharp: true
   zeromq: true
 # pnpm 11 requires build-script approvals here (the legacy `pnpm` field in
 # package.json is ignored). Native voice deps need their postinstall build.

services/discord-gateway/src/modules/ai-moderation/ai-analysis-worker.ts

@@ -21,7 +21,11 @@ import { config } from "../../shared/config/config.js";
 import { initializeDatabase } from "../../shared/database/drizzle.js";
 import { messageStore } from "../message-capture/messageStore.js";
 import type { MessageRecord } from "../message-capture/types.js";
-import { buildConversationContext } from "./conversationContext.js";
+import {
+  buildConversationContext,
+  buildLocationContext,
+} from "./conversationContext.js";
+import { buildConversationContextBlock } from "./moderationBuilders.js";
 import { runModerationAnalysis } from "./moderationOrchestrator.js";
 
 const logger = createChildLogger("ai-analysis-worker");
@@ -274,29 +278,54 @@ async function processBatch(job: {
     contextBefore,
     targets: messages,
     maxTokens: config.AI_ANALYSIS_MAX_CONTEXT_TOKENS,
+    maxAgeMs: config.AI_ANALYSIS_CONTEXT_MAX_AGE_MS,
+    gapMs: config.AI_ANALYSIS_CONTEXT_GAP_MS,
+  });
+  const contextBlock = buildConversationContextBlock({
+    location: buildLocationContext(messages),
+    descriptor: contextLines.descriptor,
+    lines: contextLines.lines,
   });
-  const contextText = contextLines.join("\n");
 
-  const targetIds = messages.map((m) => m.id);
+  const allTargetIds = messages.map((m) => m.id);
   const contextIds = contextBefore.map((m) => m.id);
   const attachments = await messageStore.getAttachmentsForMessages([
-    ...targetIds,
+    ...allTargetIds,
     ...contextIds,
   ]);
 
+  // Attachment-upload race guard: a message whose attachment is still being
+  // uploaded (upload_status='pending') must not be analyzed yet. Its
+  // uploaded_url is not ready, and falling back to the Discord CDN link often
+  // 404s (expired/purged) — which used to silently produce a text-only
+  // verdict ("lampiran yang gagal terbaca"). Leave those targets pending; the
+  // next worker cycle picks them up after the upload lands.
+  const pendingUploadTargetIds = new Set(
+    (attachments ?? [])
+      .filter((a) => a.upload_status === "pending")
+      .map((a) => a.message_id),
+  );
+  const readyMessages =
+    pendingUploadTargetIds.size === 0
+      ? messages
+      : messages.filter((m) => !pendingUploadTargetIds.has(m.id));
+  if (readyMessages.length === 0) {
+    return { ok: true, conversationKey, rows: [] };
+  }
+
   // The orchestrator handles text/media split + caching + parallel paths
   // internally, so a 20-message batch = 1 text LLM call (+1 media call
   // when media is present), not N per-message calls.
   const moderationResult = await runModerationAnalysis({
-    targets: messages,
-    contextText,
+    targets: readyMessages,
+    contextBlock,
     attachments,
   });
 
   const results = moderationResult.results.map((r) =>
     normalizeResult(
       r as unknown as AnalysisResult,
-      messages.find((m) => m.id === r.messageId),
+      readyMessages.find((m) => m.id === r.messageId),
     ),
   );
 
@@ -324,9 +353,10 @@ async function processBatch(job: {
 
   logger.info(
     {
-      total: messages.length,
+      total: readyMessages.length,
       saved: allRows.length,
       conversationKey,
+      skippedPendingUpload: messages.length - readyMessages.length,
     },
     "LLM batch analysis complete",
   );
@@ -359,8 +389,14 @@ async function processIndividual(job: {
     contextBefore,
     targets: [message],
     maxTokens: config.AI_ANALYSIS_MAX_CONTEXT_TOKENS,
+    maxAgeMs: config.AI_ANALYSIS_CONTEXT_MAX_AGE_MS,
+    gapMs: config.AI_ANALYSIS_CONTEXT_GAP_MS,
+  });
+  const contextBlock = buildConversationContextBlock({
+    location: buildLocationContext([message]),
+    descriptor: contextLines.descriptor,
+    lines: contextLines.lines,
   });
-  const contextText = contextLines.join("\n");
 
   const contextIds = contextBefore.map((m) => m.id);
   const attachments = await messageStore.getAttachmentsForMessages([
@@ -368,10 +404,21 @@ async function processIndividual(job: {
     ...contextIds,
   ]);
 
+  // Same attachment-upload race guard as the batch path: while the upload is
+  // still in-flight the uploaded_url is not ready and the Discord CDN fallback
+  // often 404s — analyzing now would silently produce a text-only verdict.
+  // Return no results so the message stays pending for the next cycle.
+  const uploadStillPending = (attachments ?? []).some(
+    (a) => a.message_id === message.id && a.upload_status === "pending",
+  );
+  if (uploadStillPending) {
+    return { ok: true, results: [] };
+  }
+
   try {
     const moderationResult = await runModerationAnalysis({
       targets: [message],
-      contextText,
+      contextBlock,
       attachments,
     });
 

services/discord-gateway/src/modules/ai-moderation/autoDeleteEligibility.ts

@@ -47,6 +47,40 @@ export function deriveRecommendedAction(msg: MessageRecord): string {
   return "none";
 }
 
+/** Parse the flag list from a structured result or the stored column. */
+export function parseModerationFlags(
+  message: MessageRecord,
+  analysisResult?: AnalysisResult,
+): string[] {
+  const flags = analysisResult?.flags ?? null;
+  if (flags && flags.length > 0) return flags;
+  const stored = message.ai_moderation_flags;
+  if (!stored) return [];
+  try {
+    const parsed = JSON.parse(stored) as unknown;
+    return Array.isArray(parsed)
+      ? parsed.filter((f): f is string => typeof f === "string")
+      : [];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * True when the ONLY violation is the member's server nickname — the message
+ * content itself is clean. Such messages must NOT be auto-deleted; the
+ * correct enforcement is resetting the nickname to the default username.
+ * Any other flag (sara, harassment, vulgar_language, ...) keeps the normal
+ * delete path.
+ */
+export function isNicknameOnlyViolation(
+  message: MessageRecord,
+  analysisResult?: AnalysisResult,
+): boolean {
+  const flags = parseModerationFlags(message, analysisResult);
+  return flags.length > 0 && flags.every((f) => f === "offensive_username");
+}
+
 /**
  * Check whether a message qualifies for auto-deletion.
  * Uses the structured `analysisResult` fields when provided, falling back

services/discord-gateway/src/modules/ai-moderation/autoDeleteManager.ts

@@ -1,9 +1,13 @@
 import type { Client, PermissionString } from "discord.js-selfbot-v13";
+import { LRUCache } from "lru-cache";
 import { createChildLogger } from "@/shared/logger/index";
 import { config } from "../../shared/config/config.js";
 import { messageStore } from "../message-capture/messageStore.js";
 import type { MessageRecord } from "../message-capture/types.js";
-import { isEligibleForAutoDelete } from "./autoDeleteEligibility.js";
+import {
+  isEligibleForAutoDelete,
+  isNicknameOnlyViolation,
+} from "./autoDeleteEligibility.js";
 import { logDeletionToChannel } from "./autoDeleteLogger.js";
 import { sendDeletionNotification } from "./autoDeleteNotify.js";
 
@@ -15,6 +19,83 @@ export interface AutoDeleteResult {
   reason: string;
 }
 
+// Cooldown per guild:user — a nick violation fires per message, but the
+// Discord PATCH is idempotent; hammering it on every message by the same
+// member is wasteful and risks rate limits.
+const recentNicknameResets = new LRUCache<string, number>({
+  max: 200,
+  ttl: config.AUTO_NICKNAME_RESET_COOLDOWN_MS ?? 10 * 60 * 1000,
+});
+
+export function isNicknameResetInCooldown(
+  guildId: string,
+  userId: string,
+): boolean {
+  return recentNicknameResets.has(`${guildId}:${userId}`);
+}
+
+/**
+ * Resets a member's server nickname to the default (global username) —
+ * Discord's `setNickname(null)` removes the custom nick so the member is
+ * shown under their default username. Non-blocking; failures are logged
+ * but never throw into the moderation pipeline.
+ */
+export async function resetOffensiveNickname(
+  client: Client | undefined,
+  guildId: string,
+  userId: string,
+  messageId: string,
+): Promise<boolean> {
+  const cooldownKey = `${guildId}:${userId}`;
+  try {
+    if (!client?.user?.id) {
+      logger.warn(
+        { messageId, guildId, userId },
+        "Nick reset skipped: client missing",
+      );
+      return false;
+    }
+    if (userId === client.user.id) {
+      logger.debug({ userId }, "Nick reset skipped: operator's own account");
+      return false;
+    }
+    if (recentNicknameResets.has(cooldownKey)) {
+      logger.debug({ guildId, userId }, "Nick reset skipped: cooldown active");
+      return false;
+    }
+    if (config.AUTO_NICKNAME_RESET_ENABLED === false) return false;
+
+    const guild = client.guilds.cache.get(guildId);
+    if (!guild) {
+      logger.warn(
+        { messageId, guildId },
+        "Nick reset skipped: guild not found",
+      );
+      return false;
+    }
+    const member = await guild.members.fetch(userId);
+    // setNickname(null) = remove nickname → Discord shows global username
+    await member.setNickname(null, "[auto] nickname melanggar aturan server");
+    recentNicknameResets.set(cooldownKey, Date.now());
+    logger.info(
+      { messageId, guildId, userId },
+      "Offensive nickname reset to default username",
+    );
+    return true;
+  } catch (error) {
+    logger.warn(
+      {
+        messageId,
+        guildId,
+        userId,
+        error: error instanceof Error ? error.message : String(error),
+      },
+      "Nick reset failed",
+    );
+    return false;
+  }
+}
+
 // ─── Error Handling Utilities ────────────────────────────────────────
 
 function getErrorCode(error: unknown): number | string | undefined {
@@ -107,6 +188,57 @@ export async function attemptAutoDeleteFlaggedMessage(
     return { deleted: false, skipped: true, reason: "disabled" };
   }
 
+  // ── Nickname-only violation: reset nick, DO NOT delete ─────────────
+  // When the only flag is offensive_username (message content is clean),
+  // the problem is the server nickname, not the message. Enforcement is
+  // removing the nickname back to the default username — the message stays.
+  if (isNicknameOnlyViolation(message)) {
+    if (
+      !config.AUTO_DELETE_FLAGGED_DRY_RUN &&
+      config.AUTO_NICKNAME_RESET_ENABLED !== false
+    ) {
+      const inCooldown = isNicknameResetInCooldown(
+        message.guild_id,
+        message.user_id,
+      );
+      if (!inCooldown) {
+        const resetOk = await resetOffensiveNickname(
+          client,
+          message.guild_id,
+          message.user_id,
+          message.id,
+        );
+        try {
+          await messageStore.createModerationAction({
+            message_id: message.id,
+            user_id: message.user_id,
+            guild_id: message.guild_id,
+            action_type: "reset_nickname",
+            reason:
+              "nickname melanggar aturan server (offensive_username); pesan dibiarkan",
+            executed_by: "auto-delete-manager",
+            status: resetOk ? "executed" : "failed",
+            error: resetOk ? null : "nickname_reset_failed",
+            executed_at: resetOk ? Date.now() : null,
+          });
+        } catch (error) {
+          logger.warn(
+            {
+              messageId: message.id,
+              error: error instanceof Error ? error.message : String(error),
+            },
+            "Failed to persist nickname reset action log",
+          );
+        }
+      }
+    }
+    logger.info(
+      { messageId: message.id, userId: message.user_id },
+      "Nickname-only violation: message kept, nickname reset attempted",
+    );
+    return { deleted: false, skipped: true, reason: "nickname_only_violation" };
+  }
+
   // ── Status gate ──────────────────────────────────────────────────
 
   if (message.ai_status !== "flagged" && message.ai_status !== "warn") {

services/discord-gateway/src/modules/ai-moderation/conversationContext.ts

@@ -6,6 +6,7 @@ import {
 } from "../message-capture/messageMetadata.js";
 import type { MessageRecord } from "../message-capture/types.js";
 import { sanitizeDiscordTokens } from "./discordTokens.js";
+import { escapeXml, resolveDisplayName } from "./moderationBuilders.js";
 
 const logger = createChildLogger("conversationContext");
 
@@ -13,6 +14,26 @@ export interface ConversationContextInput {
   contextBefore: MessageRecord[];
   targets: MessageRecord[];
   maxTokens: number;
+  /**
+   * Hard age cap for context messages (ms). Messages older than this
+   * relative to the target are stale conversation noise and dropped.
+   */
+  maxAgeMs?: number;
+  /**
+   * Silence threshold (ms). A gap between consecutive context messages
+   * larger than this means the conversation restarted — older messages
+   * belong to a previous conversation and are dropped.
+   */
+  gapMs?: number;
+}
+
+export interface ConversationContextResult {
+  /** Formatted context lines (oldest → newest, recency-gated). */
+  lines: string[];
+  /** One-line flow descriptor: status, span, dropped counts. */
+  descriptor: string;
+  /** Number of context messages dropped by the recency gates. */
+  dropped: number;
 }
 
 let _encoder: ReturnType<typeof encodingForModel> | null = null;
@@ -103,26 +124,143 @@ export function formatMessageForPrompt(
   msg: MessageRecord,
   label: "context" | "target",
 ): string {
-  const content = sanitizeDiscordTokens(
-    renderDiscordMentions(msg.edited_content ?? msg.content, msg.metadata),
+  const content = truncateContextLine(
+    sanitizeDiscordTokens(
+      renderDiscordMentions(msg.edited_content ?? msg.content, msg.metadata),
+    ),
   );
   const timestamp = formatTimestamp(msg.created_at);
   const mediaEvidence = formatMediaEvidenceForPrompt(msg.metadata);
   const mediaSuffix = mediaEvidence ? ` ${mediaEvidence}` : "";
   const refInfo = formatReferenceInfo(msg);
-  return `[${label}] id=${msg.id} time=${timestamp} user=${msg.username}: ${content}${mediaSuffix}${refInfo}`;
+  return `[${label}] id=${msg.id} time=${timestamp} user=${resolveDisplayName(msg)}: ${content}${mediaSuffix}${refInfo}`;
+}
+
+/** Max content chars per context line — a single huge paste (log dump,
+ *  copypasta) must not eat the whole conversation budget. */
+const CONTEXT_LINE_CONTENT_MAX_CHARS = 1500;
+
+/** Marker appended when a context line's content was cut. Distinct from the
+ *  target-content marker so the model knows which side was truncated. */
+export const CONTEXT_TRUNC_MARKER = "…[konteks dipotong: terlalu panjang]";
+
+/** Cap one context message's content to CONTEXT_LINE_CONTENT_MAX_CHARS. */
+export function truncateContextLine(content: string): string {
+  if (content.length <= CONTEXT_LINE_CONTENT_MAX_CHARS) return content;
+  return `${content.slice(0, CONTEXT_LINE_CONTENT_MAX_CHARS).trimEnd()}${CONTEXT_TRUNC_MARKER}`;
+}
+
+/**
+ * Builds a structured `<location_context .../>` element for the batch —
+ * channel/thread name and age-restriction flags from captured message
+ * metadata. The LLM uses it to judge messages in the right channel context
+ * (e.g. a thread about a specific topic, or an age-restricted channel).
+ * Returns "" when no channel metadata was captured.
+ */
+export function buildLocationContext(targets: MessageRecord[]): string {
+  const target = targets[0];
+  if (!target?.metadata) return "";
+  try {
+    const meta = JSON.parse(target.metadata) as {
+      channel?: {
+        channelName?: string | null;
+        threadName?: string | null;
+        topic?: string | null;
+        nsfw?: boolean;
+        ageRestricted?: boolean;
+        nsfwLevel?: string | null;
+      } | null;
+    };
+    const ch = meta?.channel;
+    if (!ch) return "";
+    const attrs: string[] = [`channel_id="${escapeXml(target.channel_id)}"`];
+    if (ch.channelName)
+      attrs.push(`channel_name="${escapeXml(ch.channelName)}"`);
+    if (target.thread_id || ch.threadName) {
+      if (target.thread_id)
+        attrs.push(`thread_id="${escapeXml(target.thread_id)}"`);
+      if (ch.threadName)
+        attrs.push(`thread_name="${escapeXml(ch.threadName)}"`);
+    }
+    if (typeof ch.topic === "string" && ch.topic.trim().length > 0) {
+      const topic =
+        ch.topic.length > 200
+          ? `${ch.topic.slice(0, 200).trimEnd()}…`
+          : ch.topic;
+      attrs.push(`topic="${escapeXml(topic)}"`);
+    }
+    if (typeof ch.nsfw === "boolean") attrs.push(`nsfw="${ch.nsfw}"`);
+    if (typeof ch.ageRestricted === "boolean") {
+      attrs.push(`age_restricted="${ch.ageRestricted}"`);
+    }
+    return `<location_context ${attrs.join(" ")}/>`;
+  } catch {
+    return "";
+  }
 }
 
 /**
  * Builds conversation historical context without including targets.
- * Calculates how much token budget targets use, and fills the rest with context.
+ *
+ * Two recency gates decide whether a conversation is STILL the same one
+ * ("obrolan berlanjut") or already restarted:
+ *  - `gapMs`: a silence longer than this between two context messages cuts
+ *    the block there — earlier messages belong to a previous conversation.
+ *  - `maxAgeMs`: anything older than this relative to the target is noise.
+ *
+ * On a cold start (no recent context), the nearest messages are kept as a
+ * sparse anchor and the descriptor says `cold_start` instead of `ongoing`,
+ * so the LLM does not mistake scattered old messages for an active chat.
  */
 export function buildConversationContext(
   input: ConversationContextInput,
-): string[] {
+): ConversationContextResult {
   const { contextBefore, targets, maxTokens } = input;
+  const maxAgeMs = input.maxAgeMs ?? 45 * 60 * 1000;
+  const gapMs = input.gapMs ?? 12 * 60 * 1000;
 
-  // Calculate tokens used by targets (parallel)
+  const targetTime = targets.reduce(
+    (min, t) => Math.min(min, t.created_at),
+    targets[0]?.created_at ?? Date.now(),
+  );
+
+  // ── Recency gating (walk newest → oldest) ───────────────────────────────
+  const gated: MessageRecord[] = [];
+  let latestSelected: MessageRecord | null = null;
+  let gapBeforeMs: number | null = null;
+  let dropped = 0;
+
+  for (let i = contextBefore.length - 1; i >= 0; i--) {
+    const msg = contextBefore[i];
+    // Age gate
+    if (targetTime - msg.created_at > maxAgeMs) {
+      dropped += i + 1; // everything older also exceeds the age cap
+      break;
+    }
+    // Gap gate — silence between this message and the newer one already selected
+    if (latestSelected && latestSelected.created_at - msg.created_at > gapMs) {
+      gapBeforeMs = latestSelected.created_at - msg.created_at;
+      dropped += i + 1;
+      break;
+    }
+    gated.push(msg);
+    latestSelected = msg;
+  }
+
+  const gatedNewestFirst = gated.reverse();
+  let status: "ongoing" | "cold_start" | "sparse";
+  if (gatedNewestFirst.length === 0) {
+    // Cold start — keep a small anchor of the nearest messages so the LLM
+    // still senses the channel, but mark it clearly.
+    status = "cold_start";
+    gatedNewestFirst.push(...contextBefore.slice(-2)); // ± 2 nearest to target
+  } else if (gapBeforeMs === null) {
+    status = "ongoing";
+  } else {
+    status = "sparse";
+  }
+
+  // ── Format + token budget (most recent first, like before) ─────────────
   const targetLines = targets.map((msg) =>
     formatMessageForPrompt(msg, "target"),
   );
@@ -131,7 +269,7 @@ export function buildConversationContext(
     0,
   );
 
-  const contextLines = contextBefore.map((msg) =>
+  const contextLines = gatedNewestFirst.map((msg) =>
     formatMessageForPrompt(msg, "context"),
   );
   const selectedContextLines: string[] = [];
@@ -148,14 +286,26 @@ export function buildConversationContext(
     }
   }
 
+  const descriptorParts = [
+    `[conversation_flow] status=${status}`,
+    `context_msgs=${selectedContextLines.length}`,
+    `dropped=${dropped}`,
+  ];
+  if (gapBeforeMs !== null) {
+    descriptorParts.push(`gap_before_min=${Math.round(gapBeforeMs / 60000)}`);
+  }
+  const descriptor = descriptorParts.join(" ");
+
   logger.debug(
     {
       targetCount: targets.length,
       contextCount: selectedContextLines.length,
+      status,
+      dropped,
       usedTokens,
       maxTokens,
     },
     "Conversation context built",
   );
-  return selectedContextLines;
+  return { lines: selectedContextLines, descriptor, dropped };
 }

services/discord-gateway/src/modules/ai-moderation/llmClient.ts

@@ -56,7 +56,16 @@ export async function withLlmConcurrency<T>(fn: () => Promise<T>): Promise<T> {
  */
 type LLMResponseChunk = {
   choices?: Array<{
-    delta?: { content?: string | null };
+    delta?: {
+      content?: string | null;
+      reasoning_content?: string | null;
+      reasoning?: string | null;
+      reasoning_details?: Array<{
+        type?: string;
+        text?: string;
+        index?: number;
+      }> | null;
+    };
     message?: { content?: string | null };
     finish_reason?: string | null;
     text?: string;
@@ -67,6 +76,39 @@ type LLMResponseChunk = {
   finish_reason?: string;
 };
 
+/**
+ * Extract the textual payload from a single streaming chunk. Prefers
+ * `delta.content`; falls back to reasoning fields so reasoning-only models
+ * still produce usable aggregated text. Providers differ in the field name:
+ * - DeepSeek-style / Cloudflare gemma → `delta.reasoning_content`
+ * - mimo (via 9router) streams reasoning in `delta.reasoning` +
+ *   `delta.reasoning_details[].text` (content:"") — without these fallbacks
+ *   vision aggregation came back empty ("Vision API null response").
+ * Exported for unit tests.
+ */
+export function extractChunkText(
+  chunk: LLMResponseChunk | null | undefined,
+): string {
+  if (!chunk) return "";
+  const choice = chunk.choices?.[0];
+  const reasoningDetails = choice?.delta?.reasoning_details
+    ?.map((d) => d.text ?? "")
+    .filter(Boolean)
+    .join("");
+  return (
+    choice?.delta?.content ||
+    choice?.delta?.reasoning_content ||
+    choice?.delta?.reasoning ||
+    reasoningDetails ||
+    choice?.message?.content ||
+    choice?.text ||
+    chunk?.message?.content ||
+    chunk?.response ||
+    chunk?.content ||
+    ""
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Lazy singleton — created on first use so that config is always resolved.
 // ---------------------------------------------------------------------------
@@ -167,15 +209,7 @@ export async function llmChat(
             let finishReason = "stop";
             for await (const chunk of response as unknown as AsyncIterable<LLMResponseChunk>) {
               const choice = chunk?.choices?.[0];
-              const textChunk =
-                choice?.delta?.content ||
-                choice?.message?.content ||
-                choice?.text ||
-                chunk?.message?.content ||
-                chunk?.response ||
-                chunk?.content ||
-                "";
-              content += textChunk;
+              content += extractChunkText(chunk);
               const fr = choice?.finish_reason || chunk?.finish_reason;
               if (fr) finishReason = fr;
             }

services/discord-gateway/src/modules/ai-moderation/mediaBatchProcessor.ts

@@ -16,8 +16,10 @@ import { getChannelCulture } from "./channelCultureStore.js";
 import type { RetryState } from "./llmCaller.js";
 import { callModerationLLM } from "./llmCaller.js";
 import { prepareMediaMessage } from "./mediaAnalysisClient.js";
+import { buildUserProfilesBlock } from "./moderationBuilders.js";
 import { buildSystemPrompt as buildSystemPromptModular } from "./moderationPrompt.js";
 import { buildCorrectedFewShotExamples } from "./textBatchProcessor.js";
+import { getUserProfile } from "./userProfileStore.js";
 
 const log = createChildLogger("mediaBatchProcessor");
 
@@ -26,7 +28,7 @@ const log = createChildLogger("mediaBatchProcessor");
 // ---------------------------------------------------------------------------
 export async function runMediaBatch(
   targets: MessageRecord[],
-  contextText: string,
+  contextBlock: string,
   attachments: AttachmentRecord[] | undefined,
 ): Promise<{ results: AnalysisResult[]; raw: unknown }> {
   if (!targets.length) return { results: [], raw: null };
@@ -58,14 +60,41 @@ export async function runMediaBatch(
   const channelCulture = channelCultureObj?.culture_summary;
   const correctedExamples = await buildCorrectedFewShotExamples();
   const systemText = buildSystemPromptModular({
-    contextText,
     mode: "mixed",
     correctedExamples,
     channelCulture,
   });
 
+  // Gather user profiles ONCE for the whole batch and emit a deduplicated
+  // <user_profiles> map (with last-generated timestamp); per-message blocks
+  // (from prepareMediaMessage) reference it via <user_profile_ref>.
+  const profileByUser = new Map<
+    string,
+    {
+      text: string;
+      asOf?: number | null;
+    }
+  >();
+  for (const t of targets) {
+    if (profileByUser.has(t.user_id)) continue;
+    const profile = await getUserProfile(t.user_id);
+    profileByUser.set(t.user_id, {
+      text: profile?.profile_summary ?? "",
+      asOf: profile?.last_analyzed_at ?? null,
+    });
+  }
+  const userProfilesBlock = buildUserProfilesBlock(profileByUser);
+
   const messagesBlock = prepared.map((p) => p.messageBlock).join("\n");
-  const userContent = `<messages_to_analyze>\n${messagesBlock}\n</messages_to_analyze>`;
+  // Data/instruction separation: the system prompt is stable per mode — all
+  // per-batch context (profiles, conversation) lives in the USER payload,
+  // ordered oldest-first so targets come last.
+  const userBlocks = [
+    userProfilesBlock?.trimEnd() ?? "",
+    contextBlock?.trimEnd() ?? "",
+    `<messages_to_analyze>\n${messagesBlock}\n</messages_to_analyze>`,
+  ].filter((b) => b.trim().length > 0);
+  const userContent = userBlocks.join("\n\n");
 
   const perMsgTimeout = config.AI_LLM_MEDIA_ANALYSIS_TIMEOUT_MS ?? 60000;
   const batchTimeout = Math.min(

services/discord-gateway/src/modules/ai-moderation/mediaDownloader.ts

@@ -296,101 +296,137 @@ export async function downloadAndExtractFrame(
   imageMap: Map<string, MessageImagePart[]>,
 ): Promise<void> {
   const log = createChildLogger("mediaAnalysis");
-  const urlToUse = att.uploaded_url ?? att.discord_url ?? null;
-  if (!urlToUse) return;
+  // Prefer the upload proxy (uploaded_url); the Discord CDN link can expire
+  // or be purged (404), and a non-OK response used to silently drop the image
+  // from vision analysis (no log, empty image map → text-only verdict). Try
+  // each candidate URL in order and surface failures.
+  const urlCandidates = [
+    att.uploaded_url,
+    att.discord_url && att.discord_url !== att.uploaded_url
+      ? att.discord_url
+      : null,
+  ].filter((u): u is string => Boolean(u));
+  if (urlCandidates.length === 0) return;
 
-  const { controller, clear } = createAbortControllerWithTimeout(15000);
-  try {
-    const res = await fetch(urlToUse, { signal: controller.signal });
-    if (!res.ok || !res.body) return;
-
-    let totalBytes = 0;
-    const chunks: Uint8Array[] = [];
-    const reader = res.body.getReader();
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) break;
-      if (value) {
-        totalBytes += value.length;
-        if (totalBytes > 10 * 1024 * 1024) {
-          reader.cancel();
-          return;
-        }
-        chunks.push(value);
-      }
-    }
-    const imageBytes = Buffer.concat(chunks);
-    const sniffedMime = sniffImageMimeType(imageBytes);
-
-    if (!sniffedMime && att.type.startsWith("video/")) {
-      await extractVideoFrames(
-        att,
-        imageBytes,
-        targetId,
-        maxDimension,
-        imageMap,
-      );
-      return;
-    }
-
-    // Fallback: try attachment type metadata, then filename extension
-    let resolvedMime = sniffedMime;
-    if (!resolvedMime) {
-      if (att.type.startsWith("image/")) {
-        resolvedMime = att.type;
+  let imageBytes: Buffer | null = null;
+  let lastStatus = 0;
+  let lastError: string | null = null;
+  for (const urlToUse of urlCandidates) {
+    const { controller, clear } = createAbortControllerWithTimeout(15000);
+    try {
+      const res = await fetch(urlToUse, { signal: controller.signal });
+      if (!res.ok || !res.body) {
+        lastStatus = res.status;
         log.warn(
-          { attachmentId: att.id, filename: att.filename, type: att.type },
-          "Image MIME sniff failed — using attachment metadata type as fallback",
+          {
+            attachmentId: att.id,
+            urlHost: new URL(urlToUse).host,
+            status: res.status,
+          },
+          "Attachment fetch non-OK — trying next URL",
         );
-      } else {
-        // Last resort: check file extension
-        const ext = att.filename?.toLowerCase().split(".").pop();
-        if (ext && ["jpg", "jpeg", "png", "gif", "webp", "bmp"].includes(ext)) {
-          const mimeMap: Record<string, string> = {
-            jpg: "image/jpeg",
-            jpeg: "image/jpeg",
-            png: "image/png",
-            gif: "image/gif",
-            webp: "image/webp",
-            bmp: "image/bmp",
-          };
-          resolvedMime = mimeMap[ext];
-          log.warn(
-            { attachmentId: att.id, filename: att.filename, ext },
-            "Image MIME sniff failed — using file extension fallback",
-          );
+        continue;
+      }
+
+      let totalBytes = 0;
+      const chunks: Uint8Array[] = [];
+      const reader = res.body.getReader();
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        if (value) {
+          totalBytes += value.length;
+          if (totalBytes > 10 * 1024 * 1024) {
+            reader.cancel();
+            return;
+          }
+          chunks.push(value);
         }
       }
-    }
-
-    // If all fallbacks fail, still try with generic image/jpeg
-    if (!resolvedMime) {
-      resolvedMime = "image/jpeg";
+      imageBytes = Buffer.concat(chunks);
+      break;
+    } catch (err) {
+      lastError = err instanceof Error ? err.message : String(err);
       log.warn(
-        { attachmentId: att.id, filename: att.filename },
-        "All MIME detection failed — forcing image/jpeg as last resort",
+        {
+          attachmentId: att.id,
+          urlHost: new URL(urlToUse).host,
+          error: lastError,
+        },
+        "Attachment download failed — trying next URL",
       );
+    } finally {
+      clear();
     }
+  }
 
-    const { data: resizedBuffer, mimeType: resizedMime } =
-      await resizeImageForVision(imageBytes, maxDimension);
-    const dataUrl = `data:${resizedMime};base64,${resizedBuffer.toString("base64")}`;
-    addImageToMap(imageMap, targetId, {
-      type: "image_url",
-      image_url: { url: dataUrl },
-      sourceLabel: `[gambar di atas adalah attachment ${att.filename} dari pesan id=${att.message_id}]`,
-    });
-  } catch (err) {
+  if (!imageBytes) {
     log.warn(
       {
         attachmentId: att.id,
-        error: err instanceof Error ? err.message : String(err),
+        filename: att.filename,
+        lastStatus,
+        lastError,
       },
-      "Download failed",
+      "All attachment URLs failed — skipping media analysis",
     );
-  } finally {
-    clear();
+    return;
   }
+
+  const sniffedMime = sniffImageMimeType(imageBytes);
+
+  if (!sniffedMime && att.type.startsWith("video/")) {
+    await extractVideoFrames(att, imageBytes, targetId, maxDimension, imageMap);
+    return;
+  }
+
+  // Fallback: try attachment type metadata, then filename extension
+  let resolvedMime = sniffedMime;
+  if (!resolvedMime) {
+    if (att.type.startsWith("image/")) {
+      resolvedMime = att.type;
+      log.warn(
+        { attachmentId: att.id, filename: att.filename, type: att.type },
+        "Image MIME sniff failed — using attachment metadata type as fallback",
+      );
+    } else {
+      // Last resort: check file extension
+      const ext = att.filename?.toLowerCase().split(".").pop();
+      if (ext && ["jpg", "jpeg", "png", "gif", "webp", "bmp"].includes(ext)) {
+        const mimeMap: Record<string, string> = {
+          jpg: "image/jpeg",
+          jpeg: "image/jpeg",
+          png: "image/png",
+          gif: "image/gif",
+          webp: "image/webp",
+          bmp: "image/bmp",
+        };
+        resolvedMime = mimeMap[ext];
+        log.warn(
+          { attachmentId: att.id, filename: att.filename, ext },
+          "Image MIME sniff failed — using file extension fallback",
+        );
+      }
+    }
+  }
+
+  // If all fallbacks fail, still try with generic image/jpeg
+  if (!resolvedMime) {
+    resolvedMime = "image/jpeg";
+    log.warn(
+      { attachmentId: att.id, filename: att.filename },
+      "All MIME detection failed — forcing image/jpeg as last resort",
+    );
+  }
+
+  const { data: resizedBuffer, mimeType: resizedMime } =
+    await resizeImageForVision(imageBytes, maxDimension);
+  const dataUrl = `data:${resizedMime};base64,${resizedBuffer.toString("base64")}`;
+  addImageToMap(imageMap, targetId, {
+    type: "image_url",
+    image_url: { url: dataUrl },
+    sourceLabel: `[gambar di atas adalah attachment ${att.filename} dari pesan id=${att.message_id}]`,
+  });
 }
 
 // ---------------------------------------------------------------------------
@@ -494,8 +530,9 @@ export async function fetchUrlInline(
       sourceLabel: `[gambar dari URL ${url} (inline), pesan id=${targetId}]`,
     });
   } else if (result.type === "text" && result.textContent) {
+    const titleAttr = result.title ? ` title="${escapeXml(result.title)}"` : "";
     webTexts.push(
-      `<web_content url="${escapeXml(url)}">${escapeXml(result.textContent.slice(0, 2000))}</web_content>`,
+      `<web_content url="${escapeXml(url)}"${titleAttr}>${escapeXml(result.textContent.slice(0, 2000))}</web_content>`,
     );
   }
 }

services/discord-gateway/src/modules/ai-moderation/moderationBuilders.ts

@@ -9,6 +9,7 @@ import { renderDiscordMentions } from "../message-capture/messageMetadata.js";
 import { messageStore } from "../message-capture/messageStore.js";
 import type { MessageRecord } from "../message-capture/types.js";
 import { sanitizeDiscordTokens } from "./discordTokens.js";
+import { sanitizeAiContent } from "./prompts/output.js";
 
 /** Simple XML-escaping for content text. */
 export function escapeXml(s: string): string {
@@ -19,6 +20,216 @@ export function escapeXml(s: string): string {
     .replace(/"/g, """);
 }
 
+// ---------------------------------------------------------------------------
+// Conversation context block — structured data for the USER message.
+//
+// All per-batch context lives in the USER message (not the SYSTEM prompt) so
+// the system prompt is stable per mode (cacheable on routers/providers) and
+// the role boundary is clean: instructions in SYSTEM, data in USER.
+// ---------------------------------------------------------------------------
+
+/** Outer char cap for the assembled `<conversation_context>` inner text. */
+export const CONVERSATION_CONTEXT_MAX_CHARS = 40_000;
+
+/**
+ * Wraps per-batch context data into structured XML blocks for the USER
+ * message:
+ *
+ *   <location_context channel_id="..." channel_name="..." nsfw="..."/>
+ *   <conversation_context>
+ *     [conversation_flow] status=ongoing context_msgs=12 dropped=0
+ *     [context] id=... time=... user=...: isi pesan
+ *     ...
+ *   </conversation_context>
+ *
+ * Empty blocks are omitted entirely (never emit a hollow `<conversation_context>`
+ * with no content). The inner text is AI/user-derived and passed through
+ * `sanitizeAiContent` (CDATA + XML-escape) to block prompt injection.
+ */
+export function buildConversationContextBlock(input: {
+  /** Pre-built `<location_context .../>` string (or ""). */
+  location?: string;
+  /** `[conversation_flow]` descriptor line from buildConversationContext. */
+  descriptor?: string;
+  /** `[context]` lines, oldest → newest. */
+  lines: string[];
+}): string {
+  const blocks: string[] = [];
+  const location = input.location?.trim();
+  if (location) blocks.push(location);
+
+  const inner = [input.descriptor ?? "", ...input.lines]
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0)
+    .join("\n");
+  if (inner) {
+    blocks.push(
+      `<conversation_context>\n${sanitizeAiContent(inner, CONVERSATION_CONTEXT_MAX_CHARS)}\n</conversation_context>`,
+    );
+  }
+  return blocks.join("\n");
+}
+
+// ---------------------------------------------------------------------------
+// Per-message content bounds — protects the LLM token budget from a single
+// huge paste (stack traces, log dumps, copypasta). Truncation is explicit so
+// the model never mistakes the cut for a real message boundary.
+// ---------------------------------------------------------------------------
+
+/** Max characters of a message's content sent to the LLM `<content>` payload. */
+export const AI_CONTENT_MAX_CHARS = 4000;
+
+/** Marker appended when a message is longer than AI_CONTENT_MAX_CHARS. */
+export const AI_CONTENT_TRUNC_MARKER = "\n…[pesan dipotong: terlalu panjang]";
+
+/** Truncate a message's content for the LLM `<content>` payload. */
+export function truncateForAi(content: string): string {
+  if (content.length <= AI_CONTENT_MAX_CHARS) return content;
+  return `${content.slice(0, AI_CONTENT_MAX_CHARS)}${AI_CONTENT_TRUNC_MARKER}`;
+}
+
+// ---------------------------------------------------------------------------
+// User profile deduplication — a batch can contain many messages from the
+// same user. Instead of repeating the (up to 3000-char) profile summary on
+// every message, emit a single <user_profiles> map per batch and reference
+// entries per message with <user_profile_ref user_id="..."/>.
+// ---------------------------------------------------------------------------
+
+export interface UserProfileEntry {
+  /** Profile summary text (from user_profiles.profile_summary). */
+  text: string;
+  /** Epoch ms when the profile was last generated — staleness signal for
+   *  the LLM (a profile from months ago may not reflect current behavior). */
+  asOf?: number | null;
+}
+
+/** Build a deduplicated `<user_profiles>` map block, keyed by Discord user id. */
+export function buildUserProfilesBlock(
+  profiles: ReadonlyMap<string, UserProfileEntry>,
+): string {
+  const entries = Array.from(profiles.entries()).filter(
+    ([, entry]) => entry.text.trim().length > 0,
+  );
+  if (entries.length === 0) return "";
+  const lines = entries.map(([userId, entry]) => {
+    const asOfAttr =
+      typeof entry.asOf === "number" && entry.asOf > 0
+        ? ` as_of="${new Date(entry.asOf).toISOString()}"`
+        : "";
+    return `  <user_profile user_id="${escapeXml(userId)}"${asOfAttr}>${sanitizeAiContent(entry.text)}</user_profile>`;
+  });
+  return `<user_profiles>\n${lines.join("\n")}\n</user_profiles>`;
+}
+
+/** Per-message reference tag pointing at an entry in the `<user_profiles>` map. */
+export function buildUserProfileRef(userId: string): string {
+  return `<user_profile_ref user_id="${escapeXml(userId)}"/>`;
+}
+
+// ---------------------------------------------------------------------------
+// User reputation — richer than a bare trust score.
+//
+// The trust model tracks total_infractions, a clean-message streak and the
+// last infraction timestamp. Feeding all of it to the LLM lets it tell a
+// first-timer (same score, 1 infraction) from a repeat offender (score 50,
+// 3 infractions, last one yesterday) — the same score means very different
+// things in those two contexts.
+// ---------------------------------------------------------------------------
+
+export interface ReputationAttrsSource {
+  trust_score: number;
+  total_infractions: number;
+  clean_message_streak: number;
+  last_infraction_at: number | null;
+}
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+const REPEAT_OFFENSE_WINDOW_MS = 7 * DAY_MS;
+
+/**
+ * Formats reputation fields into XML attributes for `<user_reputation .../>`.
+ * Derived signals: last_offense_days_ago (0 = today) and repeat_offender
+ * (infraction within the last 7 days) are computed here so both the text and
+ * media paths emit the exact same shape.
+ */
+export function formatReputationAttrs(
+  rep: ReputationAttrsSource,
+  now: number = Date.now(),
+): string {
+  const attrs = [
+    `trust_score="${rep.trust_score}"`,
+    `total_infractions="${rep.total_infractions}"`,
+    `clean_streak="${rep.clean_message_streak}"`,
+  ];
+  if (
+    typeof rep.last_infraction_at === "number" &&
+    rep.last_infraction_at > 0
+  ) {
+    const daysAgo = Math.max(
+      0,
+      Math.floor((now - rep.last_infraction_at) / DAY_MS),
+    );
+    attrs.push(`last_offense_days_ago="${daysAgo}"`);
+    const isRepeat =
+      rep.total_infractions > 0 &&
+      now - rep.last_infraction_at <= REPEAT_OFFENSE_WINDOW_MS;
+    if (isRepeat) attrs.push(`repeat_offender="true"`);
+  }
+  return attrs.join(" ");
+}
+
+/**
+ * Builds an optional `<user_history>` block (last flagged messages) from
+ * getUserRecentInfractions rows. Only emitted when there is real history —
+ * lets the LLM see the PATTERN (e.g. the same scam link posted repeatedly)
+ * without treating old flags as proof for the current message.
+ */
+export function buildUserHistoryXml(
+  history: Array<{
+    content: string;
+    severity: string | null;
+    created_at: number;
+  }>,
+  now: number = Date.now(),
+): string {
+  const filtered = history.filter((h) => h.content?.trim());
+  if (filtered.length === 0) return "";
+  const lines = filtered.map((h) => {
+    const daysAgo = Math.max(0, Math.floor((now - h.created_at) / DAY_MS));
+    const severityAttr = h.severity
+      ? ` severity="${escapeXml(h.severity)}"`
+      : "";
+    const snippet =
+      h.content.length > 100
+        ? `${h.content.slice(0, 100).trimEnd()}…`
+        : h.content;
+    return `  <infraction${severityAttr} time_ago_days="${daysAgo}">${escapeXml(snippet)}</infraction>`;
+  });
+  return `<user_history>\n${lines.join("\n")}\n</user_history>`;
+}
+
+/**
+ * Whether the message author was a bot (captured in metadata.author.bot).
+ * Bot posts (logging bots, webhook-style automation) deserve different
+ * scrutiny than user posts — expose the flag instead of hiding it.
+ */
+export function resolveIsBot(msg: MessageRecord): boolean {
+  if (!msg.metadata) return false;
+  try {
+    const meta = JSON.parse(msg.metadata) as {
+      author?: { bot?: boolean } | null;
+    };
+    return Boolean(meta?.author?.bot);
+  } catch {
+    return false;
+  }
+}
+
+/** Whether the shown content is an EDIT of the original post (evasion signal). */
+export function resolveIsEdited(msg: MessageRecord): boolean {
+  return Boolean(msg.edited_content);
+}
+
 /**
  * Returns the real text content for AI analysis, stripping fallback text
  * that getDisplayContent() synthesized ("[Attachment: ...]", "[Sticker: ...]",
@@ -36,6 +247,27 @@ export function getAnalysisContent(message: MessageRecord): string {
   ).trim();
 }
 
+/**
+ * Server nickname (member.displayName) when captured, else the author
+ * username. Discord shows the server nickname to other members, so the LLM
+ * should see the same name the channel sees — and a nickname can carry
+ * moderation signal itself (offensive nick + clean message → low warn).
+ */
+export function resolveDisplayName(msg: MessageRecord): string {
+  if (msg.metadata) {
+    try {
+      const meta = JSON.parse(msg.metadata) as {
+        member?: { displayName?: string | null } | null;
+      };
+      const dn = meta?.member?.displayName;
+      if (dn && dn.trim().length > 0) return dn;
+    } catch {
+      // malformed metadata — fall back to username
+    }
+  }
+  return msg.username;
+}
+
 /**
  * Builds a <reference> XML element for reply/forward/crosspost context.
  */

services/discord-gateway/src/modules/ai-moderation/moderationOrchestrator.ts

@@ -35,7 +35,13 @@ const log = createChildLogger("moderationOrchestrator");
 // ---------------------------------------------------------------------------
 export interface ModerationInput {
   targets: MessageRecord[];
-  contextText: string;
+  /**
+   * Pre-built XML context block for the USER message (from
+   * `buildConversationContextBlock`): `<location_context .../>` +
+   * `<conversation_context>...</conversation_context>`. Kept out of the
+   * system prompt so it stays stable/cacheable per mode.
+   */
+  contextBlock: string;
   attachments?: AttachmentRecord[];
 }
 
@@ -62,7 +68,7 @@ export interface ModerationOutput {
 export async function runModerationAnalysis(
   input: ModerationInput,
 ): Promise<ModerationOutput> {
-  const { targets, contextText, attachments } = input;
+  const { targets, contextBlock, attachments } = input;
 
   initSearxngCache(config.REDIS_URL);
   if (!targets.length) throw new Error("No targets provided for analysis");
@@ -320,10 +326,10 @@ export async function runModerationAnalysis(
   // Run both paths in parallel
   const [textBatchResult, mediaBatchResult] = await Promise.all([
     textOnlyTargets.length > 0
-      ? runTextOnlyBatch(textOnlyTargets, contextText)
+      ? runTextOnlyBatch(textOnlyTargets, contextBlock)
       : Promise.resolve({ results: [] as AnalysisResult[], raw: null }),
     mediaTargets.length > 0
-      ? runMediaBatch(mediaTargets, contextText, attachments)
+      ? runMediaBatch(mediaTargets, contextBlock, attachments)
       : Promise.resolve({ results: [] as AnalysisResult[], raw: null }),
   ]);
 

services/discord-gateway/src/modules/ai-moderation/prompts/output.ts

@@ -31,11 +31,16 @@ Struktur wajib:
   ]
 }
 
+Instruksi per field:
+- "message_id": WAJIB sama persis dengan id di input. Setiap <message> di <messages_to_analyze> menghasilkan SATU hasil. Jangan gabungkan beberapa pesan, jangan lewati, jangan karang id.
+- "evidence": kutipan PERSIS frasa yang melanggar (maks 1 baris). Pelanggaran di gambar/sticker → kutip deskripsi Media analysis. Pelanggaran lewat balasan/referensi → sebut konteks pesan yang dibalas. Boleh tambah label sumber, mis. [media analysis] / [web_search] / [reply]. Kosong jika clean.
+
 ## PERSONALITY & MEMORI — Profil Pengguna dan Kultur Channel
-Data konteks tersedia: <user_profile> (ringkasan kepribadian pengguna) dan <channel_culture> (topik/vibe channel).
+Data konteks tersedia: <user_profiles> (peta ringkasan kepribadian, di pesan USER), <user_reputation> (skor trust), dan <channel_culture> (topik/vibe channel). Setiap <message> dapat memuat <user_profile_ref user_id="..."/> yang menunjuk ke entri di peta <user_profiles>.
 Gunakan untuk personalisasi analysis, tapi:
 - Profil adalah KONTEKS, bukan bukti. Profil mencurigakan ≠ flag; profil bersih ≠ loloskan pelanggaran.
 - Perubahan perilaku mencolok (biasanya teknis tiba-tiba provokatif) layak dicatat di analysis.
+- <user_history> (kutipan pesan yang pernah di-flag) = pola pelanggaran lama. Gunakan untuk mendeteksi PENGULANGAN (mis. spam link yang sama, provokasi berulang), tapi JANGAN memflag pesan bersih hanya karena riwayat.
 - JANGAN paksa referensi profil jika tidak relevan — analysis natural lebih baik.
 - Channel culture coding/teknis → pesan teknis lebih wajar; channel santai → slang lebih wajar. Jangan dipakai mengabaikan pelanggaran nyata.
 
@@ -54,6 +59,7 @@ Contoh buruk: "Pesan berisi teks dan gambar tanpa pelanggaran." (mengabaikan buk
 - **conflict_instigation:** "Pengirim <ajakan memicu konflik>. <konteks>. Diberi peringatan karena berpotensi memicu drama."
 - **Username ofensif (pesan bersih):** "Pengirim memiliki username yang <alasan ofensif>. Isi pesan hanya <isi>. Diberi warning ringan." — (pesan memperkuat): "<username SARA> + isi pesan memperkuat tone kebencian. Pelanggaran berat."
 - **Evasi (zalgo/leetspeak):** "Pengirim menggunakan teknik obfuscation untuk menyembunyikan <makna asli>. <dampak>. <kesimpulan>."
+- **Spam (repetitions > 1):** "Pengirim mengirim teks yang sama sebanyak N kali dalam waktu singkat. <isi pesan>. Diberi peringatan karena spam berulang." — nilai tetap dari isi; pengulangan saja (mis. "ok" x5 dalam obrolan aktif) bukan pelanggaran.
 - **sexual_deviation:** "Pengirim <konten penyimpangan>. <konteks>. Melanggar kebijakan server."
 - **SARA/penistaan agama:** "Pengirim <jenis penistaan spesifik: parodi ayat, mengaku Tuhan, mockery ritual, istilah agama sebagai joke, provokasi antar-agama>. <bukti>. Melanggar kebijakan SARA." — JANGAN gunakan kata "bercanda" untuk SARA.
 
@@ -66,7 +72,7 @@ CRITICAL:
 - Jika pesan adalah BALASAN (reply) ke pesan lain, jelaskan konteks balasannya: apa yang sedang dibicarakan, siapa yang dibalas (tanpa nama, cukup peran/isi pesan yang dibalas), dan bagaimana tanggapan pengirim terhadapnya.
 - Gunakan informasi dari Media analysis untuk mendeskripsikan gambar.
 - Analisis harus MEMBERI KONTEKS, bukan hanya menyatakan status.
-- GUNAKAN <user_profile> untuk personalisasi analysis — jadikan analysis terasa seperti sistem "mengenal" pengguna.
+- GUNAKAN <user_profile_ref>/<user_profiles> untuk personalisasi analysis — jadikan analysis terasa seperti sistem "mengenal" pengguna.
 - Jika perilaku pesan menyimpang dari profil yang diketahui, CATAT dalam analysis sebagai informasi kontekstual yang relevan.
 - JANGAN paksa referensi profil jika tidak relevan — analysis natural lebih baik dari yang dipaksakan.`;
 

services/discord-gateway/src/modules/ai-moderation/prompts/system.ts

@@ -39,7 +39,6 @@ Gambar/sticker/embed/preview link sudah DIDESKRIPSIKAN vision model sebelum batc
 // ---------------------------------------------------------------------------
 
 export interface BuildSystemPromptOptions {
-  contextText: string;
   /** Prompt mode — determines which sections are included. */
   mode: PromptMode;
   /** @deprecated Use `mode` instead. */
@@ -59,7 +58,6 @@ export interface BuildSystemPromptOptions {
 
 export function buildSystemPrompt(options: BuildSystemPromptOptions): string {
   const {
-    contextText,
     mode,
     includeMediaInstructions,
     correction,
@@ -105,15 +103,39 @@ export function buildSystemPrompt(options: BuildSystemPromptOptions): string {
   }
 
   parts.push(
-    `## Konteks Pengguna\nSetiap pesan mungkin memiliki tag <user_reputation>. Tag ini hanya indikator **referensi**, bukan bukti pelanggaran. Nilai trust_score yang rendah bukan alasan untuk memflag pesan yang bersih. Nilai trust_score yang tinggi bukan alasan untuk mengabaikan pelanggaran nyata. **Setiap pesan harus dinilai berdasarkan isinya sendiri.**`,
+    `## Blok Data di Pesan USER\n` +
+      `Semua data dinamis per-batch dikirim di pesan USER — system prompt ini TIDAK memuat data batch:\n` +
+      `- <location_context .../> = metadata channel/thread (channel_id, channel_name, thread_name, topic, nsfw, age_restricted). topic = deskripsi resmi channel — pakai untuk menilai kesesuaian pesan dengan tujuan channel.\n` +
+      `- <conversation_context> = obrolan SEBELUM pesan target. Baris "[context]" di dalamnya BUKAN yang dinilai.\n` +
+      `- <user_profiles> = peta ringkasan kepribadian per user_id (attr as_of = kapan profil terakhir dibuat — profil lama mungkin tidak mencerminkan perilaku terkini); setiap <message> merujuk lewat <user_profile_ref user_id="..."/>.\n` +
+      `- <web_searches> / <web_content> = bukti web (lihat "Web Sebagai Bukti Utama").\n` +
+      `- <messages_to_analyze> = pesan-pesan TARGET yang WAJIB dinilai. Atribut <message>: id, user (nama server), time (ISO — kapan pesan dikirim), repetitions (N = teks pendek sama muncul N kali di batch — sinyal spam), bot (true jika dari bot), edited (true jika konten adalah hasil edit setelah posting).`,
+  );
+
+  parts.push(
+    `## Konteks Pengguna (Referensi, Bukan Bukti)\n` +
+      `Konteks per pengguna hanya indikator **referensi** untuk personalisasi analisis, BUKAN bukti pelanggaran:\n` +
+      `- <user_reputation trust_score="..." total_infractions="..." clean_streak="..." last_offense_days_ago="..." repeat_offender="..."> = histori moderasi pengguna. Skor rendah BUKAN alasan memflag pesan bersih; skor tinggi BUKAN alasan mengabaikan pelanggaran nyata. repeat_offender="true" = ada pelanggaran dalam 7 hari terakhir.\n` +
+      `- <user_history> (di dalam <user_reputation>) = kutipan pesan-pesan pengguna yang PERNAH di-flag. Gunakan untuk mengenali POLA berulang (spam link sama, provokasi), tapi JANGAN memflag pesan bersih hanya karena riwayat.\n` +
+      `- <user_profiles> (di pesan USER) = peta ringkasan kepribadian per user_id. <user_profile_ref user_id="..."/> dalam sebuah pesan menunjuk ke peta itu. Tanpa ref = tidak ada profil untuk pengguna tersebut.\n` +
+      `- Profil berguna untuk mengenali penyimpangan perilaku mencolok (mis. pengguna teknis tiba-tiba provokatif), tapi JANGAN memflag atau meloloskan hanya karena profil.\n` +
+      `**Setiap pesan dinilai berdasarkan isinya sendiri.**`,
+  );
+
+  parts.push(
+    `## Framing: Konteks vs Target\n` +
+      `- Baris dalam <conversation_context> berformat "[context] id=... time=<ISO> user=<nama>: isi", diurutkan paling lama → paling baru. Baris pertama biasanya "[conversation_flow] status=... context_msgs=... dropped=..." — metadata sistem tentang status percakapan (ongoing/sparse/cold_start), BUKAN pesan yang dinilai.\n` +
+      `- <messages_to_analyze> berisi pesan-pesan TARGET yang WAJIB dinilai. Hasilkan SATU hasil per message_id — jangan menggabungkan beberapa pesan, jangan melewati, jangan mengarang id.\n` +
+      `- Setiap target dinilai berdasarkan isinya sendiri; konteks percakapan memengaruhi interpretasi, bukan menggantikan isi pesan.\n` +
+      `- Marker "…[pesan dipotong: terlalu panjang]" = konten TARGET sengaja dipotong; marker "…[konteks dipotong: terlalu panjang]" = konten pesan KONTEKS dipotong. Nilai dari bagian yang terlihat; pemotongan BUKAN pelanggaran dan BUKAN teknik evasi.\n` +
+      `- Atribut time= pada <message> target = kapan pesan dikirim (ISO). Pakai untuk menilai kerelevanan waktu (mis. pesan lama di-bump, spam beruntun dalam menit yang sama).\n` +
+      `- repetitions="N" pada <message> = teks pendek yang sama muncul N kali dalam batch — pertimbangkan sebagai sinyal spam, tapi nilai tetap dari isi pesan.\n` +
+      `- bot="true" = pengirim adalah bot (otomatisasi), bukan pengguna manusia — jangan perlakukan sebagai pelanggaran personal, tapi kontennya tetap dinilai.\n` +
+      `- edited="true" = konten yang ditampilkan adalah hasil edit setelah posting (sinyal potensi evasi), nilai konten saat ini apa adanya.`,
   );
 
   parts.push(OUTPUT_INSTRUCTIONS);
 
-  // XML-delimited context — prevents prompt injection
-  const delimitedContext = `<conversation_context>\n${sanitizeAiContent(contextText, 8000)}\n</conversation_context>`;
-  parts.push(delimitedContext);
-
   let base = parts.join("\n\n");
 
   if (correction) {

services/discord-gateway/src/modules/ai-moderation/textBatchProcessor.ts

@@ -6,7 +6,9 @@
  * the LLM for analysis. Extracted from moderationOrchestrator.ts.
  */
 import { createChildLogger } from "@/shared/logger/index";
+import { delay } from "@/shared/utils/index";
 import { config } from "../../shared/config/config.js";
+import { resizeImageForVision } from "../attachment-upload/imageResizer.js";
 import type {
   AnalysisResult,
   MessageRecord,
@@ -14,15 +16,21 @@ import type {
 import { getChannelCulture } from "./channelCultureStore.js";
 import type { ModerationPromptContent, RetryState } from "./llmCaller.js";
 import { callModerationLLM } from "./llmCaller.js";
+import { analyzeSingleMediaImage } from "./mediaAnalysisClient.js";
 import {
   buildReferenceXml,
+  buildUserHistoryXml,
+  buildUserProfileRef,
+  buildUserProfilesBlock,
   escapeXml,
+  formatReputationAttrs,
   getAnalysisContent,
+  resolveDisplayName,
+  resolveIsBot,
+  resolveIsEdited,
+  truncateForAi,
 } from "./moderationBuilders.js";
-import {
-  buildSystemPrompt as buildSystemPromptModular,
-  sanitizeAiContent,
-} from "./moderationPrompt.js";
+import { buildSystemPrompt as buildSystemPromptModular } from "./moderationPrompt.js";
 import { logModerationAnalysis } from "./responseLogger.js";
 import {
   extractSearchQueries,
@@ -32,7 +40,11 @@ import {
 import { getRecentCorrectedModerations } from "./textCacheStore.js";
 import { extractUrlsFromText, fetchUrlSafely } from "./urlFetcher.js";
 import { getUserProfile } from "./userProfileStore.js";
-import { initializeUserReputation } from "./userReputationStore.js";
+import {
+  getUserRecentInfractions,
+  initializeUserReputation,
+} from "./userReputationStore.js";
+import type { MessageImagePart } from "./visionAnalyzer.js";
 
 const log = createChildLogger("textBatchProcessor");
 
@@ -69,7 +81,7 @@ export async function buildCorrectedFewShotExamples(): Promise<string> {
 // ---------------------------------------------------------------------------
 export async function runTextOnlyBatch(
   targets: MessageRecord[],
-  contextText: string,
+  contextBlock: string,
 ): Promise<{ results: AnalysisResult[]; raw: unknown }> {
   if (!targets.length) return { results: [], raw: null };
 
@@ -84,22 +96,33 @@ export async function runTextOnlyBatch(
         allUrls.add(url);
     }
     const urlArr = Array.from(allUrls).slice(0, 10);
-    if (urlArr.length === 0) return new Map<string, string>();
+    if (urlArr.length === 0) {
+      return {
+        text: new Map<string, string>(),
+        image: new Map<string, { data: Buffer; mimeType: string }>(),
+        title: new Map<string, string>(),
+      };
+    }
     const results = await Promise.allSettled(
       urlArr.map((url) => fetchUrlSafely(url)),
     );
-    const map = new Map<string, string>();
+    const textMap = new Map<string, string>();
+    const imageMap = new Map<string, { data: Buffer; mimeType: string }>();
+    const titleMap = new Map<string, string>();
     for (let i = 0; i < urlArr.length; i++) {
       const r = results[i];
-      if (
-        r.status === "fulfilled" &&
-        r.value.type === "text" &&
-        r.value.textContent
-      ) {
-        map.set(urlArr[i], r.value.textContent);
+      if (r.status !== "fulfilled") continue;
+      const v = r.value;
+      if (v.type === "text" && v.textContent) {
+        textMap.set(urlArr[i], v.textContent);
+        if (v.title) titleMap.set(urlArr[i], v.title);
+      } else if (v.type === "image" && v.data && v.mimeType) {
+        // Direct image link (or og:image followed from an HTML page) —
+        // kept for vision analysis below.
+        imageMap.set(urlArr[i], { data: v.data, mimeType: v.mimeType });
       }
     }
-    return map;
+    return { text: textMap, image: imageMap, title: titleMap };
   })();
 
   const searxngPromise = (async () => {
@@ -122,10 +145,11 @@ export async function runTextOnlyBatch(
     return map;
   })();
 
-  const [urlFetchMap, searxngResults] = await Promise.all([
+  const [urlFetchMaps, searxngResults] = await Promise.all([
     urlFetchPromise,
     searxngPromise,
   ]);
+  const urlFetchMap = urlFetchMaps.text;
 
   // Deduplicate identical short messages
   const shortContentGroups = new Map<string, MessageRecord[]>();
@@ -171,25 +195,109 @@ export async function runTextOnlyBatch(
     const batch = subBatches[i];
     const targetIds = batch.map((t) => t.id);
 
-    // User reputation + profiles
+    // User reputation + profiles (raw summary text — deduplicated into a
+    // single <user_profiles> map per batch; messages only reference it).
     const userContexts = new Map<string, string>();
-    const userProfiles = new Map<string, string>();
+    const userProfiles = new Map<
+      string,
+      {
+        text: string;
+        asOf?: number | null;
+      }
+    >();
     for (const msg of batch) {
       if (!userContexts.has(msg.user_id)) {
         const rep = await initializeUserReputation(msg.user_id, msg.guild_id);
-        userContexts.set(
-          msg.user_id,
-          `<user_reputation trust_score="${rep.trust_score}" />`,
-        );
+        const repAttrs = formatReputationAttrs(rep);
+        let repXml = `<user_reputation ${repAttrs}/>`;
+        // Repeat offenders get their last flagged messages as <user_history>
+        // so the LLM can recognize PATTERNS (same scam link, repeated
+        // provocation) — history is reference, never proof. Best-effort.
+        if (rep.total_infractions > 0) {
+          try {
+            const history = await getUserRecentInfractions(msg.user_id, 2);
+            const historyXml = buildUserHistoryXml(
+              history.map((h) => ({
+                content: h.content ?? "",
+                severity: h.severity,
+                created_at: h.created_at,
+              })),
+            );
+            if (historyXml) {
+              repXml = `<user_reputation ${repAttrs}>\n${historyXml}\n</user_reputation>`;
+            }
+          } catch {
+            // history is a bonus — fall back to attrs-only reputation
+          }
+        }
+        userContexts.set(msg.user_id, repXml);
       }
       if (!userProfiles.has(msg.user_id)) {
         const profile = await getUserProfile(msg.user_id);
-        userProfiles.set(
-          msg.user_id,
-          profile
-            ? `<user_profile>${sanitizeAiContent(profile.profile_summary)}</user_profile>`
-            : "",
-        );
+        userProfiles.set(msg.user_id, {
+          text: profile?.profile_summary ?? "",
+          asOf: profile?.last_analyzed_at ?? null,
+        });
+      }
+    }
+    const userProfilesBlock = buildUserProfilesBlock(userProfiles);
+
+    // ── URL images → multimodal vision evidence ─────────────────────────
+    // The text batch fetches inline URLs; whenever one resolved to an image
+    // (direct image link, or og:image followed from an HTML page), run the
+    // vision model and append its description as media evidence. If any
+    // message in the sub-batch produced image evidence, the prompt switches
+    // to "mixed" mode so media-analysis instructions/examples are injected
+    // — a link to media is analyzed as media, not as bare text.
+    const batchImageEvidence = new Map<string, string[]>();
+    let batchHasImageEvidence = false;
+    const urlImages = urlFetchMaps.image;
+    const urlTitles = urlFetchMaps.title;
+    if (urlImages.size > 0) {
+      const maxDim = config.AI_LLM_IMAGE_MAX_DIMENSION ?? 1024;
+      const evidenceSets = await Promise.all(
+        batch.map(async (msg) => {
+          const content = getAnalysisContent(msg);
+          const pics = extractUrlsFromText(content)
+            .slice(0, 3)
+            .filter((url) => urlImages.has(url));
+          if (pics.length === 0) return { id: msg.id, lines: [] as string[] };
+          const lines = await Promise.all(
+            pics.map(async (url) => {
+              const img = urlImages.get(url)!;
+              try {
+                const { data: resizedBuffer, mimeType: resizedMime } =
+                  await resizeImageForVision(img.data, maxDim);
+                const part: MessageImagePart = {
+                  type: "image_url",
+                  image_url: {
+                    url: `data:${resizedMime};base64,${resizedBuffer.toString("base64")}`,
+                  },
+                  sourceLabel: `[gambar dari URL ${url} (inline), pesan id=${msg.id}]`,
+                };
+                // Bound vision time so a dead vision model can't stall the
+                // whole text batch — a timeout just skips the evidence.
+                const timedOut = delay(15000).then(() => null as string | null);
+                return await Promise.race([
+                  analyzeSingleMediaImage(msg.id, part),
+                  timedOut,
+                ]);
+              } catch {
+                return null;
+              }
+            }),
+          );
+          return {
+            id: msg.id,
+            lines: lines.filter((l): l is string => Boolean(l)),
+          };
+        }),
+      );
+      for (const set of evidenceSets) {
+        if (set.lines.length > 0) {
+          batchImageEvidence.set(set.id, set.lines);
+          batchHasImageEvidence = true;
+        }
       }
     }
 
@@ -204,8 +312,7 @@ export async function runTextOnlyBatch(
         : undefined;
       const correctedExamples = await buildCorrectedFewShotExamples();
       const systemText = buildSystemPromptModular({
-        contextText,
-        mode: "text",
+        mode: batchHasImageEvidence ? "mixed" : "text",
         correction,
         correctedExamples,
         channelCulture,
@@ -214,38 +321,58 @@ export async function runTextOnlyBatch(
       const messagesBlock = (
         await Promise.all(
           batch.map(async (msg) => {
-            const content = getAnalysisContent(msg);
+            const content = truncateForAi(getAnalysisContent(msg));
             const msgUrls = extractUrlsFromText(content);
             const urlContexts = msgUrls
               .map((url) => {
                 const ft = urlFetchMap.get(url);
-                return ft
-                  ? `<web_content url="${escapeXml(url)}">${escapeXml(ft)}</web_content>`
-                  : null;
+                if (!ft) return null;
+                const title = urlTitles.get(url);
+                const titleAttr = title ? ` title="${escapeXml(title)}"` : "";
+                return `<web_content url="${escapeXml(url)}"${titleAttr}>${escapeXml(ft)}</web_content>`;
               })
               .filter(Boolean)
               .join("\n");
             const webContext = urlContexts ? `\n${urlContexts}` : "";
+            const mediaEvidenceCtx = (batchImageEvidence.get(msg.id) ?? [])
+              .map((line) => `\n${line}`)
+              .join("");
             const userCtx = userContexts.get(msg.user_id) ?? "";
-            const userProfileCtx = userProfiles.get(msg.user_id) ?? "";
+            const userProfileRef = (
+              userProfiles.get(msg.user_id)?.text ?? ""
+            ).trim()
+              ? buildUserProfileRef(msg.user_id)
+              : "";
             const refXml = await buildReferenceXml(msg);
-            return `<message id="${msg.id}" user="${msg.username}">\n  ${userCtx}${userProfileCtx ? `\n  ${userProfileCtx}` : ""}${refXml ? `\n  ${refXml}` : ""}\n  <content>${escapeXml(content)}</content>${webContext}\n</message>`;
+            const repetitionCount = groupMapping.get(msg.id)?.length ?? 1;
+            const isBot = resolveIsBot(msg);
+            const isEdited = resolveIsEdited(msg);
+            return `<message id="${escapeXml(msg.id)}" user="${escapeXml(resolveDisplayName(msg))}" time="${new Date(msg.created_at).toISOString()}"${repetitionCount > 1 ? ` repetitions="${repetitionCount}"` : ""}${isBot ? ` bot="true"` : ""}${isEdited ? ` edited="true"` : ""}>\n  ${userCtx}${userProfileRef ? `\n  ${userProfileRef}` : ""}${refXml ? `\n  ${refXml}` : ""}\n  <content>${escapeXml(content)}</content>${webContext}${mediaEvidenceCtx}\n</message>`;
           }),
         )
       ).join("\n");
 
       const searxngBlock =
         searxngResults.size > 0
-          ? `\n\n<web_searches>\n${Array.from(searxngResults.entries())
+          ? `<web_searches>\n${Array.from(searxngResults.entries())
               .map(
                 ([q, xml]) =>
                   `  <search_query query="${escapeXml(q)}">\n${xml}  </search_query>`,
               )
               .join("\n")}\n</web_searches>`
           : "";
+      // Data/instruction separation: the system prompt is stable per mode —
+      // all per-batch context (profiles, conversation, web evidence) lives in
+      // the USER payload, ordered oldest-first so targets come last.
+      const userBlocks = [
+        userProfilesBlock?.trimEnd() ?? "",
+        contextBlock?.trimEnd() ?? "",
+        searxngBlock,
+        `<messages_to_analyze>\n${messagesBlock}\n</messages_to_analyze>`,
+      ].filter((b) => b.trim().length > 0);
       return {
         system: systemText,
-        user: `${searxngBlock}\n\n<messages_to_analyze>\n${messagesBlock}\n</messages_to_analyze>`,
+        user: userBlocks.join("\n\n"),
       };
     };
 

services/discord-gateway/src/modules/ai-moderation/urlFetcher.ts

@@ -11,6 +11,8 @@ export interface FetchedUrlContext {
   data?: Buffer;
   mimeType?: string;
   textContent?: string;
+  /** Page title from og:title / <title> — strong signal for the LLM. */
+  title?: string;
   error?: string;
 }
 
@@ -86,6 +88,50 @@ function extractOgImage(html: string): string | null {
   return null;
 }
 
+export interface OgMeta {
+  title: string | null;
+  description: string | null;
+  siteName: string | null;
+}
+
+/**
+ * Extracts OpenGraph / twitter meta + <title> from raw HTML. Both attribute
+ * orders are accepted (<meta property=... content=...> and reversed).
+ */
+export function extractOgMeta(html: string): OgMeta {
+  const metaValue = (name: string): string | null => {
+    const re = new RegExp(
+      `<meta[^>]*(?:property|name)=["']${name}["'][^>]*content=["']([^"']+)["']`,
+      "i",
+    );
+    const m = html.match(re);
+    if (m?.[1]) return m[1].replace(/&amp;/g, "&").replace(/&quot;/g, '"');
+    const reRev = new RegExp(
+      `<meta[^>]*content=["']([^"']+)["'][^>]*(?:property|name)=["']${name}["']`,
+      "i",
+    );
+    const mRev = html.match(reRev);
+    return mRev?.[1]
+      ? mRev[1].replace(/&amp;/g, "&").replace(/&quot;/g, '"')
+      : null;
+  };
+
+  const title =
+    metaValue("og:title") ||
+    metaValue("twitter:title") ||
+    html.match(/<title[^>]*>([^<]+)<\/title>/i)?.[1]?.trim() ||
+    null;
+  const description =
+    metaValue("og:description") ||
+    metaValue("twitter:description") ||
+    metaValue("description") ||
+    null;
+  const siteName =
+    metaValue("og:site_name") || metaValue("application-name") || null;
+
+  return { title, description, siteName };
+}
+
 function truncateAndCleanHtml(html: string, maxLen = 1000): string {
   // Strip <script> and <style> entirely
   let text = html.replace(
@@ -176,6 +222,7 @@ export async function fetchUrlSafely(
         url,
         type: "text",
         textContent: cleaned,
+        title: extractOgMeta(text).title ?? undefined,
       };
     }
 

services/discord-gateway/src/modules/ai-moderation/visionAnalyzer.ts

@@ -29,6 +29,35 @@ import {
   upsertCachedMediaByPhash,
   visionLruCache,
 } from "./mediaCache.js";
+
+/**
+ * Detect vision outputs where the model claims it saw no image at all
+ * ("Maaf, saya tidak melihat gambar apapun...", "Tidak ada gambar yang
+ * terlampir...", "I cannot see any image..."). Such text is NOT a valid
+ * analysis — caching it poisons the image cache for 24h (image/phash keys),
+ * so every re-analysis of the same image returns the "no image" text and the
+ * moderation LLM writes "lampiran gagal terbaca". These outputs must be
+ * treated as failures: never cached, and ignored when read back from cache.
+ */
+export function isNoImageSeenText(text: string | null | undefined): boolean {
+  if (!text) return false;
+  const lower = text.toLowerCase();
+  return (
+    /tidak (?:melihat|ada|terlihat) (?:gambar|foto|image)/i.test(lower) ||
+    /tidak (?:ada )?(?:gambar|foto|image) (?:apapun|yang terlampir)/i.test(
+      lower,
+    ) ||
+    /gambar apapun/i.test(lower) ||
+    /tanpa (?:input )?(?:visual|gambar|image)/i.test(lower) ||
+    /\bno image (?:provided|attached|detected|found|was provided)?/i.test(
+      lower,
+    ) ||
+    /(?:cannot|can't) see (?:any |an |the )?image/i.test(lower) ||
+    /i (?:do not|don't) (?:see|detect) (?:any |an |the )?image/i.test(lower) ||
+    /there (?:is|are) no image/i.test(lower)
+  );
+}
+
 import {
   buildMediaCandidates,
   downloadAndExtractFrame,
@@ -37,15 +66,21 @@ import {
 } from "./mediaDownloader.js";
 import {
   buildReferenceXml,
+  buildUserHistoryXml,
+  buildUserProfileRef,
   escapeXml,
+  formatReputationAttrs,
   getAnalysisContent,
+  resolveDisplayName,
+  resolveIsBot,
+  resolveIsEdited,
+  truncateForAi,
 } from "./moderationBuilders.js";
 import {
   buildCustomEmojiVisionPrompt,
   buildGeneralImageVisionPrompt,
   buildStickerTextOnlyWarning,
   buildStickerVisionPrompt,
-  sanitizeAiContent,
 } from "./moderationPrompt.js";
 import {
   extractSearchQueries,
@@ -54,7 +89,10 @@ import {
 } from "./searxngSearch.js";
 import { extractUrlsFromText } from "./urlFetcher.js";
 import { getUserProfile } from "./userProfileStore.js";
-import { initializeUserReputation } from "./userReputationStore.js";
+import {
+  getUserRecentInfractions,
+  initializeUserReputation,
+} from "./userReputationStore.js";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -110,18 +148,32 @@ export const analyzeSingleMediaImage = async (
 
   // Layer 0: LRU
   const lruCached = visionLruCache.get(cacheKey);
-  if (lruCached) {
+  if (lruCached && !isNoImageSeenText(lruCached)) {
     log.debug({ cacheKey }, "Vision LRU cache HIT (in-memory)");
     return `[Media analysis for message ${messageId}] ${image.sourceLabel}: ${lruCached}`;
   }
+  if (lruCached) {
+    // Poisoned entry ("I see no image") — drop it and re-analyze.
+    log.warn({ cacheKey }, "Vision LRU cache HIT was no-image-seen — dropping");
+    visionLruCache.delete(cacheKey);
+  }
 
   // Layer 1: DB
   const cached = await getCachedMediaAnalysis(cacheKey);
-  if (cached) {
+  if (cached && !isNoImageSeenText(cached)) {
     visionLruCache.set(cacheKey, cached);
     log.debug({ cacheKey }, "Media analysis cache HIT (DB → LRU)");
     return `[Media analysis for message ${messageId}] ${image.sourceLabel}: ${cached}`;
   }
+  if (cached) {
+    // Poisoned DB entry — purge it so later messages re-analyze.
+    log.warn(
+      { cacheKey },
+      "Media analysis cache HIT was no-image-seen — purging",
+    );
+    await deleteCachedMediaAnalysis(cacheKey).catch(() => {});
+    visionLruCache.delete(cacheKey);
+  }
 
   // In-flight dedupe
   const existing = inFlightVisionCalls.get(cacheKey);
@@ -164,7 +216,7 @@ export const analyzeSingleMediaImage = async (
           phash = await computeImagePhash(imgBuffer);
           if (phash) {
             const phashCached = await getCachedMediaByPhash(phash);
-            if (phashCached) {
+            if (phashCached && !isNoImageSeenText(phashCached)) {
               visionLruCache.set(cacheKey, phashCached);
               await upsertCachedMediaAnalysis(
                 cacheKey,
@@ -174,6 +226,12 @@ export const analyzeSingleMediaImage = async (
               ).catch(() => {});
               return phashCached;
             }
+            if (phashCached) {
+              log.warn(
+                { phash, cacheKey },
+                "phash cache HIT was no-image-seen — ignoring",
+              );
+            }
           }
         }
       } catch {
@@ -186,7 +244,7 @@ export const analyzeSingleMediaImage = async (
     for (let attempt = 0; attempt < 3; attempt++) {
       try {
         const content = await llmVision(promptText, image.image_url);
-        if (content) {
+        if (content && !isNoImageSeenText(content)) {
           await upsertCachedMediaAnalysis(
             cacheKey,
             content,
@@ -204,7 +262,17 @@ export const analyzeSingleMediaImage = async (
           }
           return content;
         }
-        log.warn({ messageId }, "Vision API null response");
+        if (content) {
+          // Model claims it saw no image — same as a null response: NOT a
+          // valid analysis, and caching it would poison the key for every
+          // re-analysis of the same image (phash TTL is 7 days).
+          log.warn(
+            { messageId, cacheKey },
+            "Vision returned no-image-seen text — not caching",
+          );
+        } else {
+          log.warn({ messageId }, "Vision API null response");
+        }
         break;
       } catch (err) {
         lastError = err instanceof Error ? err : new Error(String(err));
@@ -231,6 +299,7 @@ export const analyzeSingleMediaImage = async (
       "Vision failed after 3 attempts",
     );
     await deleteCachedMediaAnalysis(cacheKey).catch(() => {});
+    visionLruCache.delete(cacheKey);
     return FAILED_ANALYSIS_PREFIX;
   })();
 
@@ -366,7 +435,37 @@ export async function prepareMediaMessage(
   const rep = await initializeUserReputation(target.user_id, target.guild_id);
   const profile = await getUserProfile(target.user_id);
   const refXml = await buildReferenceXml(target);
+  // Profile is emitted ONCE per batch in a <user_profiles> map (see
+  // mediaBatchProcessor); here we only reference it to avoid repeating the
+  // full summary on every message of the same user.
+  const profileRef = profile?.profile_summary?.trim()
+    ? buildUserProfileRef(target.user_id)
+    : "";
 
-  const messageBlock = `<message id="${escapeXml(target.id)}" user="${escapeXml(target.username)}">\n  <user_reputation trust_score="${rep.trust_score}" />${profile ? `\n  <user_profile>${sanitizeAiContent(profile.profile_summary)}</user_profile>` : ""}${refXml ? `\n  ${refXml}` : ""}\n  <content>${escapeXml(content)}</content>${mediaContext ? ` ${escapeXml(mediaContext)}` : ""}${webContext}${mediaAnalysisContext}${searxngXml}\n</message>`;
+  // Rich reputation — same shape as the text path: attrs + optional
+  // <user_history> with the last flagged messages for repeat offenders.
+  const repAttrs = formatReputationAttrs(rep);
+  let repXml = `<user_reputation ${repAttrs}/>`;
+  if (rep.total_infractions > 0) {
+    try {
+      const history = await getUserRecentInfractions(target.user_id, 2);
+      const historyXml = buildUserHistoryXml(
+        history.map((h) => ({
+          content: h.content ?? "",
+          severity: h.severity,
+          created_at: h.created_at,
+        })),
+      );
+      if (historyXml) {
+        repXml = `<user_reputation ${repAttrs}>\n${historyXml}\n</user_reputation>`;
+      }
+    } catch {
+      // history is a bonus — fall back to attrs-only reputation
+    }
+  }
+
+  const isBot = resolveIsBot(target);
+  const isEdited = resolveIsEdited(target);
+  const messageBlock = `<message id="${escapeXml(target.id)}" user="${escapeXml(resolveDisplayName(target))}" time="${new Date(target.created_at).toISOString()}"${isBot ? ` bot="true"` : ""}${isEdited ? ` edited="true"` : ""}>\n  ${repXml}${profileRef ? `\n  ${profileRef}` : ""}${refXml ? `\n  ${refXml}` : ""}\n  <content>${escapeXml(truncateForAi(content))}</content>${mediaContext ? ` ${escapeXml(mediaContext)}` : ""}${webContext}${mediaAnalysisContext}${searxngXml}\n</message>`;
   return { targetId, messageBlock };
 }

services/discord-gateway/src/modules/message-capture/messageMetadata.ts

@@ -9,6 +9,10 @@ export interface MessageLocation {
   threadId: string | null;
   threadName: string | null;
   channelName: string | null;
+  /** Channel topic (resmi/deskripsi channel) — strong context for judging
+   *  whether a message fits the channel's purpose. Guarded: some channel
+   *  types (threads on older API builds) expose no topic. */
+  topic?: string | null;
   nsfw?: boolean;
   nsfwLevel?: string | null;
   ageRestricted?: boolean;
@@ -107,12 +111,17 @@ export function getMessageLocation(message: Message): MessageLocation {
     nsfw?: boolean;
     nsfwLevel?: string | null;
   };
+  const topic =
+    "topic" in channel && typeof channel.topic === "string"
+      ? channel.topic
+      : null;
   if (!channel.isThread?.()) {
     return {
       channelId: message.channelId,
       threadId: null,
       threadName: null,
       channelName: "name" in channel ? channel.name : null,
+      topic,
       nsfw:
         typeof safetyChannel.nsfw === "boolean"
           ? safetyChannel.nsfw
@@ -133,6 +142,7 @@ export function getMessageLocation(message: Message): MessageLocation {
     threadId: channel.id,
     threadName: channel.name,
     channelName: channel.parent?.name ?? null,
+    topic,
     nsfw:
       typeof safetyChannel.nsfw === "boolean" ? safetyChannel.nsfw : undefined,
     nsfwLevel:

services/discord-gateway/src/modules/voice-recording/screenShareController.ts

@@ -107,6 +107,15 @@ export class ScreenShareController {
         bitrateVideoMax: 4000,
         includeAudio: true,
         videoCodec: Utils.normalizeVideoCodec("H264"),
+        // The library unconditionally appends `volume@internal_lib` + `azmq`
+        // audio filters that only exist in its custom node-av ffmpeg build
+        // (jellyfin-ffmpeg) — NOT in the Nix ffmpeg-headless on PATH. Without
+        // an override fluent-ffmpeg dies instantly with "Filter not found",
+        // the NUT output stays empty and playStream fails with "Invalid data
+        // found when processing input". ffmpeg applies the LAST -filter:a for
+        // a stream, so a trailing no-op filter neutralizes the custom chain.
+        // Realtime volume control was removed from GMW, so this is lossless.
+        customFfmpegFlags: ["-filter:a", "anull"],
       });
 
       let stopped = false;

services/discord-gateway/src/shared/config/index.ts

@@ -189,6 +189,17 @@ export const configSchema = z
       .int()
       .positive()
       .default(20),
+    // Recency gates for conversation context. A silence longer than GAP_MS
+    // between context messages = the conversation restarted (older messages
+    // dropped); MAX_AGE_MS caps how far back context is considered relevant.
+    AI_ANALYSIS_CONTEXT_GAP_MS: z.coerce
+      .number()
+      .positive()
+      .default(12 * 60 * 1000),
+    AI_ANALYSIS_CONTEXT_MAX_AGE_MS: z.coerce
+      .number()
+      .positive()
+      .default(45 * 60 * 1000),
     AI_ANALYSIS_PROCESSING_TIMEOUT_MS: z.coerce
       .number()
       .positive()
@@ -242,6 +253,19 @@ export const configSchema = z
       .default(false),
     AUTO_DELETE_LOG_CHANNEL_ID: z.string().default(""),
 
+    // ── Nickname Reset (offensive_username enforcement) ────────────────
+    // When the only violation is the member's server nickname, reset the
+    // nickname to the default username instead of deleting the message.
+    AUTO_NICKNAME_RESET_ENABLED: z
+      .string()
+      .optional()
+      .transform((v) => v === "true")
+      .default(true),
+    AUTO_NICKNAME_RESET_COOLDOWN_MS: z.coerce
+      .number()
+      .positive()
+      .default(10 * 60 * 1000),
+
     // ── Retention ───────────────────────────────────────────────────────
     RETENTION_MESSAGES_DAYS: z.coerce.number().int().min(0).default(0),
     RETENTION_ATTACHMENTS_DAYS: z.coerce.number().int().min(0).default(0),

services/discord-gateway/src/shared/database/schema.ts

@@ -615,6 +615,7 @@ export const pgModerationActionsTable = pgTable(
         "warn_user",
         "kick_user",
         "ban_user",
+        "reset_nickname",
       ],
     }).notNull(),
     reason: pgText("reason"),

services/discord-gateway/src/shared/moderation-types.ts

@@ -198,7 +198,8 @@ export type ModerationActionType =
   | "mute_user"
   | "warn_user"
   | "kick_user"
-  | "ban_user";
+  | "ban_user"
+  | "reset_nickname";
 
 export interface ModerationAction {
   id: string;

services/discord-gateway/tests/contextEnrichment.test.ts

@@ -0,0 +1,209 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// Context enrichment builders — rich <user_reputation> attrs, <user_history>,
+// <user_profiles> as_of, bot/edited detection (pure, no DB)
+// ═══════════════════════════════════════════════════════════════════════════
+import { describe, expect, it } from "vitest";
+import {
+  buildUserHistoryXml,
+  buildUserProfilesBlock,
+  formatReputationAttrs,
+  resolveIsBot,
+  resolveIsEdited,
+} from "../src/modules/ai-moderation/moderationBuilders.js";
+import type { MessageRecord } from "../src/modules/message-capture/types.js";
+
+const NOW = 1_800_000_000_000;
+
+function msg(overrides: Partial<MessageRecord> = {}): MessageRecord {
+  return {
+    id: "m1",
+    guild_id: "g1",
+    channel_id: "c1",
+    thread_id: null,
+    user_id: "u1",
+    username: "user1",
+    avatar_url: null,
+    content: "hai",
+    edited_content: null,
+    created_at: NOW,
+    edited_at: null,
+    deleted_at: null,
+    type: "text",
+    is_reply: null,
+    is_forward: null,
+    is_crosspost: null,
+    reference_message_id: null,
+    reference_channel_id: null,
+    reference_guild_id: null,
+    metadata: null,
+    ...overrides,
+  };
+}
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+describe("formatReputationAttrs — rich reputation signal", () => {
+  it("emits trust, infraction count and clean streak", () => {
+    const attrs = formatReputationAttrs({
+      trust_score: 62,
+      total_infractions: 3,
+      clean_message_streak: 45,
+      last_infraction_at: null,
+    });
+    expect(attrs).toContain('trust_score="62"');
+    expect(attrs).toContain('total_infractions="3"');
+    expect(attrs).toContain('clean_streak="45"');
+  });
+
+  it("derives last_offense_days_ago and marks repeat offenders (7-day window)", () => {
+    const attrs = formatReputationAttrs(
+      {
+        trust_score: 50,
+        total_infractions: 2,
+        clean_message_streak: 0,
+        last_infraction_at: NOW - 2 * DAY_MS,
+      },
+      NOW,
+    );
+    expect(attrs).toContain('last_offense_days_ago="2"');
+    expect(attrs).toContain('repeat_offender="true"');
+  });
+
+  it("does NOT mark repeat offender when the last offense is older than 7 days", () => {
+    const attrs = formatReputationAttrs(
+      {
+        trust_score: 50,
+        total_infractions: 2,
+        clean_message_streak: 10,
+        last_infraction_at: NOW - 30 * DAY_MS,
+      },
+      NOW,
+    );
+    expect(attrs).toContain('last_offense_days_ago="30"');
+    expect(attrs).not.toContain("repeat_offender");
+  });
+
+  it("omits offense-derived attrs when the user has no recorded infraction date", () => {
+    const attrs = formatReputationAttrs({
+      trust_score: 85,
+      total_infractions: 0,
+      clean_message_streak: 120,
+      last_infraction_at: null,
+    });
+    expect(attrs).not.toContain("last_offense_days_ago");
+    expect(attrs).not.toContain("repeat_offender");
+  });
+
+  it("clamps a future/skewed timestamp to days_ago=0", () => {
+    const attrs = formatReputationAttrs(
+      {
+        trust_score: 50,
+        total_infractions: 1,
+        clean_message_streak: 0,
+        last_infraction_at: NOW + 5 * DAY_MS,
+      },
+      NOW,
+    );
+    expect(attrs).toContain('last_offense_days_ago="0"');
+  });
+});
+
+describe("buildUserHistoryXml — last flagged messages for repeat offenders", () => {
+  it("returns empty when there is no real history", () => {
+    expect(buildUserHistoryXml([])).toBe("");
+    expect(
+      buildUserHistoryXml([{ content: "   ", severity: "low", created_at: 1 }]),
+    ).toBe("");
+  });
+
+  it("renders <infraction> rows with severity and recency", () => {
+    const xml = buildUserHistoryXml(
+      [
+        {
+          content: "beli barang murah disini https://scam.example",
+          severity: "high",
+          created_at: NOW - 3 * DAY_MS,
+        },
+      ],
+      NOW,
+    );
+    expect(xml).toContain("<user_history>");
+    expect(xml).toContain('severity="high"');
+    expect(xml).toContain('time_ago_days="3"');
+    expect(xml).toContain("beli barang murah disini");
+  });
+
+  it("caps long snippets and XML-escapes content", () => {
+    const xml = buildUserHistoryXml(
+      [
+        {
+          content: "x".repeat(300),
+          severity: "low",
+          created_at: NOW - DAY_MS,
+        },
+      ],
+      NOW,
+    );
+    expect(xml.length).toBeLessThan(250);
+  });
+});
+
+describe("buildUserProfilesBlock — deduplicated map with staleness", () => {
+  it("emits as_of when the profile has a last-generated timestamp", () => {
+    const block = buildUserProfilesBlock(
+      new Map([
+        [
+          "u1",
+          {
+            text: "Developer teknis, bahasa Indonesia",
+            asOf: NOW - 3 * DAY_MS,
+          },
+        ],
+      ]),
+    );
+    expect(block).toContain('<user_profile user_id="u1"');
+    expect(block).toContain(
+      `as_of="${new Date(NOW - 3 * DAY_MS).toISOString()}"`,
+    );
+    expect(block).toContain("Developer teknis");
+  });
+
+  it("omits as_of when absent, and drops empty profiles", () => {
+    const block = buildUserProfilesBlock(
+      new Map([
+        ["u1", { text: "profil aktif", asOf: null }],
+        ["u2", { text: "   " }],
+      ]),
+    );
+    expect(block).toContain('user_id="u1"');
+    expect(block).not.toContain("as_of");
+    expect(block).not.toContain("u2");
+  });
+
+  it("returns empty for no profiles", () => {
+    expect(buildUserProfilesBlock(new Map())).toBe("");
+  });
+});
+
+describe("resolveIsBot / resolveIsEdited — message flags", () => {
+  it("reads author.bot from captured metadata", () => {
+    const bot = msg({
+      metadata: JSON.stringify({
+        author: { id: "x", username: "bot", bot: true },
+      }),
+    });
+    const human = msg({
+      metadata: JSON.stringify({
+        author: { id: "y", username: "user", bot: false },
+      }),
+    });
+    expect(resolveIsBot(bot)).toBe(true);
+    expect(resolveIsBot(human)).toBe(false);
+    expect(resolveIsBot(msg())).toBe(false);
+  });
+
+  it("flags edited content only when edited_content is present (the edit path)", () => {
+    expect(resolveIsEdited(msg({ edited_content: "versi baru" }))).toBe(true);
+    expect(resolveIsEdited(msg())).toBe(false);
+  });
+});

services/discord-gateway/tests/conversationContext.test.ts

@@ -0,0 +1,299 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// Conversation context v2 — recency gating + location context (pure, no DB)
+// ═══════════════════════════════════════════════════════════════════════════
+import { describe, expect, it } from "vitest";
+import {
+  buildConversationContext,
+  buildLocationContext,
+  formatMessageForPrompt,
+  truncateContextLine,
+} from "../src/modules/ai-moderation/conversationContext.js";
+import { buildConversationContextBlock } from "../src/modules/ai-moderation/moderationBuilders.js";
+import { extractOgMeta } from "../src/modules/ai-moderation/urlFetcher.js";
+import type { MessageRecord } from "../src/modules/message-capture/types.js";
+
+const NOW = 1_800_000_000_000;
+
+function msg(id: string, createdAt: number, content = "hai"): MessageRecord {
+  return {
+    id,
+    guild_id: "g1",
+    channel_id: "c1",
+    thread_id: null,
+    user_id: `u_${id}`,
+    username: `user_${id}`,
+    avatar_url: null,
+    content,
+    edited_content: null,
+    created_at: createdAt,
+    edited_at: null,
+    deleted_at: null,
+    type: "text",
+    is_reply: null,
+    is_forward: null,
+    is_crosspost: null,
+    reference_message_id: null,
+    reference_channel_id: null,
+    reference_guild_id: null,
+    metadata: null,
+  };
+}
+
+function target(id = "t1", createdAt = NOW): MessageRecord {
+  return {
+    ...msg(id, createdAt),
+    content: "pesan yang dianalisis",
+  };
+}
+
+const MIN = 60_000;
+
+describe("buildConversationContext — recency gating", () => {
+  it("keeps an ONGOING conversation — recent messages, small gaps", () => {
+    const context = [
+      msg("a", NOW - 8 * MIN),
+      msg("b", NOW - 6 * MIN),
+      msg("c", NOW - 4 * MIN),
+      msg("d", NOW - 2 * MIN),
+    ];
+    const { lines, descriptor, dropped } = buildConversationContext({
+      contextBefore: context,
+      targets: [target()],
+      maxTokens: 8000,
+      gapMs: 12 * MIN,
+      maxAgeMs: 45 * MIN,
+    });
+    expect(lines).toHaveLength(4);
+    expect(dropped).toBe(0);
+    expect(descriptor).toContain("status=ongoing");
+  });
+
+  it("drops messages before a silence gap — conversation RESTARTED", () => {
+    const context = [
+      msg("old1", NOW - 40 * MIN),
+      msg("old2", NOW - 38 * MIN),
+      msg("fresh", NOW - 5 * MIN),
+    ];
+    const { lines, descriptor, dropped } = buildConversationContext({
+      contextBefore: context,
+      targets: [target()],
+      maxTokens: 8000,
+      gapMs: 12 * MIN,
+      maxAgeMs: 45 * MIN,
+    });
+    // 40min-old messages are within maxAge but 33min before "fresh" → gap gate
+    expect(lines.some((l) => l.includes("old1"))).toBe(false);
+    expect(lines.some((l) => l.includes("fresh"))).toBe(true);
+    expect(dropped).toBe(2);
+    expect(descriptor).toContain("status=sparse");
+    expect(descriptor).toContain("gap_before_min=");
+  });
+
+  it("drops everything older than maxAge — stale noise, cold_start anchor kept", () => {
+    const context = [
+      msg("ancient", NOW - 120 * MIN),
+      msg("stale", NOW - 60 * MIN),
+    ];
+    const { lines, descriptor, dropped } = buildConversationContext({
+      contextBefore: context,
+      targets: [target()],
+      maxTokens: 8000,
+      gapMs: 12 * MIN,
+      maxAgeMs: 45 * MIN,
+    });
+    // Age gate drops both from the real context block, but the cold-start
+    // anchor keeps the nearest 2 so the LLM still senses the channel.
+    expect(dropped).toBe(2);
+    expect(descriptor).toContain("status=cold_start");
+    expect(lines).toHaveLength(2);
+  });
+
+  it("keeps a 2-message anchor on cold start so the LLM senses the channel", () => {
+    const context = [
+      msg("far1", NOW - 100 * MIN),
+      msg("far2", NOW - 99 * MIN),
+      msg("near1", NOW - 50 * MIN),
+    ];
+    const { lines, descriptor } = buildConversationContext({
+      contextBefore: context,
+      targets: [target()],
+      maxTokens: 8000,
+      gapMs: 12 * MIN,
+      maxAgeMs: 45 * MIN,
+    });
+    expect(lines).toHaveLength(2); // nearest 2 kept as anchor
+    expect(lines.some((l) => l.includes("near1"))).toBe(true);
+    expect(descriptor).toContain("status=cold_start");
+  });
+
+  it("respects the token budget (older lines dropped first)", () => {
+    const context = Array.from({ length: 20 }, (_, i) =>
+      msg(`m${i}`, NOW - (i + 1) * MIN),
+    );
+    const { lines } = buildConversationContext({
+      contextBefore: context,
+      targets: [target()],
+      maxTokens: 600,
+      gapMs: 12 * MIN,
+      maxAgeMs: 45 * MIN,
+    });
+    expect(lines.length).toBeLessThan(20);
+    expect(lines.length).toBeGreaterThan(0);
+  });
+});
+
+describe("formatMessageForPrompt — server nickname (displayName)", () => {
+  it("renders member.displayName when captured (per-server nickname)", () => {
+    const m = msg("n1", NOW - MIN);
+    m.metadata = JSON.stringify({
+      member: {
+        displayName: "Si Goblok Server",
+        roles: [],
+        joinedTimestamp: null,
+      },
+    });
+    const line = formatMessageForPrompt(m, "context");
+    expect(line).toContain("user=Si Goblok Server");
+    expect(line).not.toContain("user_user_n1");
+  });
+
+  it("falls back to global username when displayName missing", () => {
+    const line = formatMessageForPrompt(
+      msg("n2", NOW - MIN, "halo"),
+      "context",
+    );
+    expect(line).toContain("user=user_n2");
+  });
+
+  it("truncates an oversized context message so one paste cannot eat the whole budget", () => {
+    const huge = "A".repeat(5000);
+    const line = formatMessageForPrompt(msg("n3", NOW - MIN, huge), "context");
+    expect(line).toContain("…[konteks dipotong: terlalu panjang]");
+    expect(line.length).toBeLessThan(2000);
+  });
+
+  it("keeps short context content intact", () => {
+    expect(truncateContextLine("pendek")).toBe("pendek");
+  });
+});
+
+describe("buildLocationContext — channel/thread/nsfw enrichment", () => {
+  it("renders a structured <location_context/> element from captured metadata", () => {
+    const t = target();
+    t.metadata = JSON.stringify({
+      channel: {
+        channelName: "general",
+        threadName: "tanya coding",
+        nsfw: false,
+        ageRestricted: false,
+      },
+    });
+    const line = buildLocationContext([t]);
+    expect(line).toContain("<location_context");
+    expect(line).toContain('channel_id="c1"');
+    expect(line).toContain('channel_name="general"');
+    expect(line).toContain('thread_name="tanya coding"');
+    expect(line).toContain('nsfw="false"');
+    expect(line).toContain('age_restricted="false"');
+  });
+
+  it("includes the channel topic (escaped) when captured", () => {
+    const t = target();
+    t.metadata = JSON.stringify({
+      channel: {
+        channelName: "rules",
+        topic: "Diskusi coding & programming — no self-promo",
+        nsfw: false,
+      },
+    });
+    const line = buildLocationContext([t]);
+    expect(line).toContain(
+      'topic="Diskusi coding &amp; programming — no self-promo"',
+    );
+  });
+
+  it("caps an oversized topic and omits empty/absent topic", () => {
+    const t = target();
+    t.metadata = JSON.stringify({
+      channel: { channelName: "general", topic: "x".repeat(500), nsfw: false },
+    });
+    const line = buildLocationContext([t]);
+    const match = line.match(/topic="([^"]*)"/);
+    expect(match).not.toBeNull();
+    expect(match?.[1].length).toBeLessThanOrEqual(201);
+
+    const t2 = target();
+    t2.metadata = JSON.stringify({ channel: { channelName: "general" } });
+    expect(buildLocationContext([t2])).not.toContain("topic=");
+  });
+
+  it("returns empty when no metadata", () => {
+    expect(buildLocationContext([target()])).toBe("");
+  });
+});
+
+describe("buildConversationContextBlock — structured USER-message context", () => {
+  it("wraps location + descriptor + lines into XML blocks", () => {
+    const block = buildConversationContextBlock({
+      location: buildLocationContext(
+        (() => {
+          const t = target();
+          t.metadata = JSON.stringify({
+            channel: { channelName: "general", nsfw: false },
+          });
+          return [t];
+        })(),
+      ),
+      descriptor: "[conversation_flow] status=ongoing context_msgs=1 dropped=0",
+      lines: ["[context] id=a time=2027-01-01T00:00:00.000Z user=user_a: hai"],
+    });
+    expect(block).toContain("<location_context");
+    expect(block).toContain("<conversation_context>");
+    expect(block).toContain("[conversation_flow] status=ongoing");
+    expect(block).toContain("[context] id=a");
+    // location block comes before conversation block
+    expect(block.indexOf("<location_context")).toBeLessThan(
+      block.indexOf("<conversation_context>"),
+    );
+  });
+
+  it("omits the conversation block when there are no lines", () => {
+    const block = buildConversationContextBlock({
+      location: "",
+      descriptor: "",
+      lines: [],
+    });
+    expect(block).toBe("");
+  });
+
+  it("keeps only the location block when lines are empty but location exists", () => {
+    const block = buildConversationContextBlock({
+      location: '<location_context channel_id="c1"/>',
+      descriptor: "",
+      lines: [],
+    });
+    expect(block).toBe('<location_context channel_id="c1"/>');
+  });
+});
+
+describe("extractOgMeta — page title/site for <web_content>", () => {
+  it("extracts og:title, og:description and og:site_name", () => {
+    const html = `
+      <html><head>
+        <title>Fallback title</title>
+        <meta property="og:title" content="Judul Halaman &amp; Keren" />
+        <meta property="og:description" content="Deskripsi halaman" />
+        <meta property="og:site_name" content="Contoh Site" />
+        <meta property="og:image" content="https://img.example.com/x.png" />
+      </head></html>`;
+    const meta = extractOgMeta(html);
+    expect(meta.title).toBe("Judul Halaman & Keren");
+    expect(meta.description).toBe("Deskripsi halaman");
+    expect(meta.siteName).toBe("Contoh Site");
+  });
+
+  it("falls back to <title> when og:title missing", () => {
+    const html = "<html><head><title>Plain Title</title></head></html>";
+    expect(extractOgMeta(html).title).toBe("Plain Title");
+  });
+});

services/discord-gateway/tests/llmChunkExtraction.test.ts

@@ -0,0 +1,105 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// llmClient chunk extraction — reasoning_content fallback (pure, no network)
+// ═══════════════════════════════════════════════════════════════════════════
+// Regression: 9router "multimodal" combo routed to cloudflare gemma-4-26b
+// which streams ALL output in delta.reasoning_content with content:"" — the
+// old extractor returned empty text → llmVision reported "Vision API null
+// response" → every image moderation batch fell back to text-only analysis
+// (LLM kept writing "Meskipun analisis gambar gagal").
+import { describe, expect, it } from "vitest";
+import { extractChunkText } from "../src/modules/ai-moderation/llmClient.js";
+
+describe("extractChunkText — streaming chunk text extraction", () => {
+  it("reads delta.content (standard OpenAI streaming)", () => {
+    expect(
+      extractChunkText({
+        choices: [{ delta: { content: "halo" }, finish_reason: null }],
+      }),
+    ).toBe("halo");
+  });
+
+  it("falls back to delta.reasoning_content when content is empty — reasoning-only models (cloudflare gemma)", () => {
+    // Exact shape seen from 9router → cloudflare-ai/@cf/google/gemma-4-26b:
+    // {"choices":[{"delta":{"content":"","reasoning_content":"Task","role":"assistant"},"finish_reason":null,...}]}
+    expect(
+      extractChunkText({
+        choices: [
+          {
+            delta: { content: "", reasoning_content: "Task" },
+            finish_reason: null,
+          },
+        ],
+      }),
+    ).toBe("Task");
+  });
+
+  it('falls back to delta.reasoning — mimo via 9router streams reasoning there with content:""', () => {
+    // Exact shape seen from 9router → mimo-v2.5-free (2026-08-11):
+    // {"choices":[{"delta":{"content":"","reasoning":"The user wants a","role":"assistant"},"finish_reason":null,...}]}
+    expect(
+      extractChunkText({
+        choices: [
+          {
+            delta: { content: "", reasoning: "The user wants a" },
+            finish_reason: null,
+          },
+        ],
+      }),
+    ).toBe("The user wants a");
+  });
+
+  it("joins delta.reasoning_details[].text when present", () => {
+    expect(
+      extractChunkText({
+        choices: [
+          {
+            delta: {
+              content: "",
+              reasoning: "",
+              reasoning_details: [
+                { type: "reasoning.text", text: " detailed", index: 0 },
+                { type: "reasoning.text", text: " description", index: 1 },
+              ],
+            },
+            finish_reason: null,
+          },
+        ],
+      }),
+    ).toBe(" detailed description");
+  });
+
+  it("prefers content over reasoning when both present (deepseek-style final answer)", () => {
+    expect(
+      extractChunkText({
+        choices: [
+          {
+            delta: { content: "jawaban akhir", reasoning_content: "pikiran" },
+            finish_reason: null,
+          },
+        ],
+      }),
+    ).toBe("jawaban akhir");
+  });
+
+  it("handles Anthropic-style message.content", () => {
+    expect(extractChunkText({ message: { content: "via message" } })).toBe(
+      "via message",
+    );
+  });
+
+  it("handles top-level content / response fields (local LLM proxies)", () => {
+    expect(extractChunkText({ content: "top-level" })).toBe("top-level");
+    expect(extractChunkText({ response: "via response" })).toBe("via response");
+  });
+
+  it("returns empty string for null/undefined/empty chunks", () => {
+    expect(extractChunkText(null)).toBe("");
+    expect(extractChunkText(undefined)).toBe("");
+    expect(extractChunkText({})).toBe("");
+    expect(
+      extractChunkText({
+        choices: [{ delta: { content: "", reasoning_content: null } }],
+      }),
+    ).toBe("");
+  });
+});

services/discord-gateway/tests/nicknameEnforcement.test.ts

@@ -0,0 +1,77 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// Nickname-only enforcement — offensive username flag handling (pure, no DB)
+// ═══════════════════════════════════════════════════════════════════════════
+import { describe, expect, it } from "vitest";
+import {
+  isNicknameOnlyViolation,
+  parseModerationFlags,
+} from "../src/modules/ai-moderation/autoDeleteEligibility.js";
+import type {
+  AnalysisResult,
+  MessageRecord,
+} from "../src/modules/message-capture/types.js";
+
+function msg(flagsJson: string | null): MessageRecord {
+  return {
+    id: "m1",
+    guild_id: "g1",
+    channel_id: "c1",
+    thread_id: null,
+    user_id: "u1",
+    username: "user1",
+    avatar_url: null,
+    content: "halo semua",
+    edited_content: null,
+    created_at: Date.now(),
+    edited_at: null,
+    deleted_at: null,
+    type: "text",
+    is_reply: null,
+    is_forward: null,
+    is_crosspost: null,
+    reference_message_id: null,
+    reference_channel_id: null,
+    reference_guild_id: null,
+    metadata: null,
+    ai_moderation_flags: flagsJson,
+  };
+}
+
+describe("parseModerationFlags", () => {
+  it("parses JSON array from stored column", () => {
+    expect(parseModerationFlags(msg('["offensive_username","sara"]'))).toEqual([
+      "offensive_username",
+      "sara",
+    ]);
+  });
+
+  it("returns [] for null / malformed values", () => {
+    expect(parseModerationFlags(msg(null))).toEqual([]);
+    expect(parseModerationFlags(msg("not-json"))).toEqual([]);
+  });
+
+  it("prefers structured analysisResult flags", () => {
+    const result = { flags: ["vulgar_language"] } as AnalysisResult;
+    expect(parseModerationFlags(msg('["old_flag"]'), result)).toEqual([
+      "vulgar_language",
+    ]);
+  });
+});
+
+describe("isNicknameOnlyViolation", () => {
+  it("true when the ONLY flag is offensive_username", () => {
+    expect(isNicknameOnlyViolation(msg('["offensive_username"]'))).toBe(true);
+  });
+
+  it("false when other flags ride along (message itself violated)", () => {
+    expect(isNicknameOnlyViolation(msg('["offensive_username","sara"]'))).toBe(
+      false,
+    );
+    expect(isNicknameOnlyViolation(msg('["harassment"]'))).toBe(false);
+  });
+
+  it("false when no flags at all", () => {
+    expect(isNicknameOnlyViolation(msg(null))).toBe(false);
+    expect(isNicknameOnlyViolation(msg("[]"))).toBe(false);
+  });
+});

services/discord-gateway/tests/placeholder.test.ts

@@ -1,6 +1,8 @@
 // ═══════════════════════════════════════════════════════════════════════════════
 // 1. AppError Hierarchy
 // ═══════════════════════════════════════════════════════════════════════════════
+
+import { afterEach, describe, expect, it, vi } from "vitest";
 import {
   AppError,
   ConfigError,
@@ -9,7 +11,6 @@ import {
   UnauthorizedError,
   ValidationError,
 } from "../src/shared/errors/index.js";
-import { afterEach, describe, expect, it, vi } from "vitest";
 
 describe("AppError subclasses", () => {
   it("AppError carries code, statusCode, and details", () => {

services/discord-gateway/tests/visionNoImageSeen.test.ts

@@ -0,0 +1,52 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// isNoImageSeenText — vision outputs that claim "no image" must not be cached
+// ═══════════════════════════════════════════════════════════════════════════
+// Regression (2026-08-11): the vision model sometimes answered "Maaf, saya
+// tidak melihat gambar apapun yang terlampir..." and that text was cached as
+// a VALID vision_llm result. Every later analysis of the same image (same
+// hash / phash) then hit the poisoned cache and the moderation LLM wrote
+// "lampiran yang gagal terbaca" — image analysis seemed permanently broken
+// even though 9router was responding fine.
+import { describe, expect, it } from "vitest";
+import { isNoImageSeenText } from "../src/modules/ai-moderation/visionAnalyzer.js";
+
+describe("isNoImageSeenText — poisoned vision output detection", () => {
+  it("detects the exact poisoned strings seen in production", () => {
+    expect(
+      isNoImageSeenText(
+        "Maaf, saya tidak melihat gambar apapun yang terlampir dalam pesan Anda. Mohon kirimkan ulang gambarnya agar saya bisa mendeskripsikannya secara objektif dan spesifik.",
+      ),
+    ).toBe(true);
+    expect(
+      isNoImageSeenText(
+        "Tidak ada gambar yang terlampir. Tidak bisa deskripsi tanpa input visual.",
+      ),
+    ).toBe(true);
+  });
+
+  it("detects English variants", () => {
+    expect(isNoImageSeenText("I cannot see any image in this message")).toBe(
+      true,
+    );
+    expect(isNoImageSeenText("No image provided")).toBe(true);
+    expect(isNoImageSeenText("there is no image attached")).toBe(true);
+    expect(isNoImageSeenText("I don't see an image")).toBe(true);
+  });
+
+  it("does NOT flag legitimate image descriptions", () => {
+    expect(
+      isNoImageSeenText(
+        "Gambar ini menampilkan dua panel komik, seorang gadis berambut biru tersipu saat dipuji.",
+      ),
+    ).toBe(false);
+    expect(
+      isNoImageSeenText("Ini adalah screenshot dari sebuah website rekrutmen."),
+    ).toBe(false);
+    expect(isNoImageSeenText("Emoji menampilkan ekspresi wajah tertawa.")).toBe(
+      false,
+    );
+    expect(isNoImageSeenText(null)).toBe(false);
+    expect(isNoImageSeenText(undefined)).toBe(false);
+    expect(isNoImageSeenText("")).toBe(false);
+  });
+});

services/frontend/src/app/(dashboard)/layout.tsx

@@ -7,10 +7,15 @@ import {
   ChatbotProvider,
   useChatbot,
 } from "@/components/chatbot/chatbot-context";
-import { HiddenSidebar } from "@/components/layout/hidden-sidebar";
-import { MobileNav } from "@/components/layout/mobile-nav";
-import { TopNav } from "@/components/layout/top-nav";
+import { AppSidebar } from "@/components/layout/app-sidebar";
 import { MiniPlayer } from "@/components/media/mini-player";
+import { GuildSelector } from "@/components/shared/guild-selector";
+import { Separator } from "@/components/ui/separator";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
 import { MediaPlayerProvider } from "@/lib/hooks/use-media-player";
 import { useWebSocket, WsProvider } from "@/lib/ws/context";
 
@@ -69,29 +74,41 @@ export default function DashboardLayout({
           <ChatbotProvider>
             <ChatbotGuildSync guildId={guildId} />
             <ChatbotExpressionSync />
-            <div className="min-h-screen bg-canvas">
-              <TopNav />
-              <HiddenSidebar
-                guildId={guildId}
-                onGuildChange={(g) => setGuildId(g ?? "")}
-              />
+            <div className="min-h-svh bg-canvas">
+              <SidebarProvider>
+                <AppSidebar />
+                <SidebarInset className="gap-0">
+                  <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4 bg-canvas">
+                    <SidebarTrigger className="-ml-1" />
+                    <Separator
+                      orientation="vertical"
+                      className="mr-2 h-6 max-md:hidden"
+                    />
+                    <div className="font-semibold max-md:hidden">Overview</div>
+                    <div className="ms-auto">
+                      <GuildSelector
+                        value={guildId}
+                        onChange={(g) => setGuildId(g ?? "")}
+                      />
+                    </div>
+                  </header>
 
-              {/* Sub-nav space — filled per-page */}
-              <div className="pt-11">
-                <main className="p-4 md:p-6 pb-24 md:pb-6 max-w-[1600px] mx-auto">
-                  <Suspense
-                    fallback={
-                      <div className="flex h-[60vh] items-center justify-center">
-                        <div className="size-8 rounded-full border-2 border-primary border-t-transparent animate-spin" />
-                      </div>
-                    }
-                  >
-                    {children}
-                  </Suspense>
-                </main>
-              </div>
+                  <main className="flex flex-1 flex-col gap-4 p-4 pb-28 md:p-6 lg:pb-8">
+                    <div className="mx-auto w-full max-w-[1440px]">
+                      <Suspense
+                        fallback={
+                          <div className="flex h-[60vh] items-center justify-center">
+                            <div className="size-8 rounded-full border-2 border-primary border-t-transparent animate-spin" />
+                          </div>
+                        }
+                      >
+                        {children}
+                      </Suspense>
+                    </div>
+                  </main>
+                </SidebarInset>
+              </SidebarProvider>
 
-              <MobileNav />
               <MiniPlayer />
               <ChatbotContainer />
             </div>

services/frontend/src/app/(dashboard)/messages/view.tsx

@@ -3,8 +3,6 @@
 import { Flag, Image, Loader2, Search } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
-import { GlassCard } from "@/components/glass/card";
-import { GlassPanel } from "@/components/glass/panel";
 import { SubNav } from "@/components/layout/sub-nav";
 import { Lightbox } from "@/components/messages/lightbox";
 import { extractFirstImage } from "@/components/messages/message-card";
@@ -13,6 +11,7 @@ import { MessageList } from "@/components/messages/message-list";
 import { SearchOverlay } from "@/components/messages/search-overlay";
 import { EmptyState, ErrorState, LoadingSkeleton } from "@/components/shared";
 import { GuildSelector } from "@/components/shared/guild-selector";
+import { Card } from "@/components/ui/card";
 import {
   Select,
   SelectContent,
@@ -218,12 +217,14 @@ export default function MessagesView({
           {detailId && (
             <div className="sticky top-16 hidden w-1/2 self-start md:block lg:w-3/5">
               {detailLoading ? (
-                <GlassPanel
-                  dense
-                  className="flex items-center justify-center py-12"
+                <Card
+                  className={cn(
+                    "flex items-center justify-center py-12",
+                    "[--card-spacing:0px]",
+                  )}
                 >
                   <Loader2 className="size-5 animate-spin text-text-secondary/60" />
-                </GlassPanel>
+                </Card>
               ) : detailMessage ? (
                 <div className="space-y-3">
                   <button
@@ -337,10 +338,14 @@ function ReviewList({
   return (
     <div className="space-y-2">
       {items.map((item) => (
-        <GlassCard
+        <Card
           key={item.id}
-          variant="danger"
-          className="cursor-pointer p-3"
+          className={cn(
+            "cursor-pointer p-3",
+            "border border-red-500/30 ring-red-500/20",
+            "[--card-spacing:0px]",
+            "rounded-2xl",
+          )}
           onClick={() => onSelect(item.id)}
         >
           <div className="flex items-start gap-2">
@@ -351,7 +356,7 @@ function ReviewList({
               </p>
             </div>
           </div>
-        </GlassCard>
+        </Card>
       ))}
       {items.length === 0 && (
         <EmptyState

services/frontend/src/app/globals.css

@@ -56,6 +56,23 @@
   /* Ring / focus outline for shadcn outline-ring utility */
   --color-ring: var(--color-primary);
 
+  /* Base-ui / shadcn primitives */
+  --color-popover: oklch(0.99 0.005 250 / 0.95);
+  --color-popover-foreground: var(--color-text-primary);
+  --color-input: oklch(0.55 0.02 250 / 0.35);
+  --color-secondary: oklch(0.92 0.01 250 / 0.6);
+  --color-secondary-foreground: var(--color-text-primary);
+
+  /* Sidebar (shadcn) */
+  --color-sidebar: oklch(1 0 0 / 0.6);
+  --color-sidebar-foreground: var(--color-text-primary);
+  --color-sidebar-primary: var(--color-primary);
+  --color-sidebar-primary-foreground: var(--color-primary-foreground);
+  --color-sidebar-accent: oklch(0.93 0.01 250 / 0.7);
+  --color-sidebar-accent-foreground: var(--color-text-primary);
+  --color-sidebar-border: var(--color-border);
+  --color-sidebar-ring: var(--color-ring);
+
   /* Radius */
   --radius-card: 16px;
   --radius-panel: 12px;
@@ -102,6 +119,23 @@
   --color-accent: var(--color-primary);
   --color-accent-foreground: var(--color-primary-foreground);
   --color-ring: var(--color-primary);
+
+  /* Base-ui / shadcn primitives */
+  --color-popover: oklch(0.13 0.02 245 / 0.96);
+  --color-popover-foreground: var(--color-text-primary);
+  --color-input: oklch(1 0 0 / 0.18);
+  --color-secondary: oklch(0.2 0.02 245 / 0.7);
+  --color-secondary-foreground: var(--color-text-primary);
+
+  /* Sidebar (shadcn) */
+  --color-sidebar: oklch(0.11 0.02 245 / 0.55);
+  --color-sidebar-foreground: var(--color-text-primary);
+  --color-sidebar-primary: var(--color-primary);
+  --color-sidebar-primary-foreground: var(--color-primary-foreground);
+  --color-sidebar-accent: oklch(0.17 0.02 245 / 0.7);
+  --color-sidebar-accent-foreground: var(--color-text-primary);
+  --color-sidebar-border: var(--color-border);
+  --color-sidebar-ring: var(--color-ring);
 }
 
 @layer utilities {

services/frontend/src/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Inter, JetBrains_Mono } from "next/font/google";
+import { ThemeProvider } from "next-themes";
 import { Toaster } from "@/components/ui/sonner";
 import "./globals.css";
 
@@ -30,7 +31,15 @@ export default function RootLayout({
       suppressHydrationWarning
     >
       <body className="min-h-full flex flex-col">
-        {children}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem={false}
+          enableColorScheme={false}
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
         <Toaster position="bottom-right" richColors closeButton />
       </body>
     </html>

services/frontend/src/components/dashboard/activity-chart.tsx

@@ -9,8 +9,9 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
-import { GlassCard } from "@/components/glass/card";
+import { Card } from "@/components/ui/card";
 import { useMounted } from "@/lib/hooks/use-mounted";
+import { cn } from "@/lib/utils";
 
 interface ActivityChartProps {
   data?: { day: string; messages: number; flagged: number }[];
@@ -28,7 +29,7 @@ export function ActivityChart({ data = [] }: ActivityChartProps) {
   const mounted = useMounted();
 
   return (
-    <GlassCard variant="base">
+    <Card className={cn("[--card-spacing:0px]", "rounded-2xl", "p-5")}>
       <div className="flex items-center justify-between mb-3">
         <span className="text-xs font-semibold tracking-wide uppercase text-text-secondary">
           Message Activity
@@ -123,6 +124,6 @@ export function ActivityChart({ data = [] }: ActivityChartProps) {
           <div className="h-full w-full animate-pulse rounded-md bg-card/40" />
         )}
       </div>
-    </GlassCard>
+    </Card>
   );
 }

services/frontend/src/components/dashboard/channels-section.tsx

@@ -2,7 +2,6 @@
 
 import { Hash, Search } from "lucide-react";
 import { useCallback, useState } from "react";
-import { GlassCard } from "@/components/glass/card";
 import { EmptyState, LoadingSkeleton } from "@/components/shared";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -11,6 +10,7 @@ import { Input } from "@/components/ui/input";
 import { useChannelDetail, useChannels } from "@/hooks";
 import { renderMessageContent } from "@/lib/format";
 import type { DashboardChannel } from "@/lib/types";
+import { cn } from "@/lib/utils";
 
 export function ChannelsSection({ guildId }: { guildId?: string }) {
   const [search, setSearch] = useState("");
@@ -31,7 +31,14 @@ export function ChannelsSection({ guildId }: { guildId?: string }) {
 
   if (error) {
     return (
-      <GlassCard variant="danger" className="p-6 text-sm">
+      <Card
+        className={cn(
+          "p-6 text-sm",
+          "border border-red-500/30 ring-red-500/20",
+          "[--card-spacing:0px]",
+          "rounded-2xl",
+        )}
+      >
         Failed to load channels: {error.message}
         <Button
           variant="outline"
@@ -41,7 +48,7 @@ export function ChannelsSection({ guildId }: { guildId?: string }) {
         >
           Retry
         </Button>
-      </GlassCard>
+      </Card>
     );
   }
 
@@ -76,7 +83,9 @@ export function ChannelsSection({ guildId }: { guildId?: string }) {
         )}
       </div>
 
-      <GlassCard variant="base" className="h-fit">
+      <Card
+        className={cn("h-fit", "[--card-spacing:0px]", "rounded-2xl", "p-5")}
+      >
         {detail ? (
           <div className="space-y-3">
             <div className="flex items-center gap-2">
@@ -144,7 +153,7 @@ export function ChannelsSection({ guildId }: { guildId?: string }) {
             </p>
           </div>
         )}
-      </GlassCard>
+      </Card>
     </div>
   );
 }

services/frontend/src/components/dashboard/hourly-activity-chart.tsx

@@ -9,8 +9,9 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
-import { GlassCard } from "@/components/glass/card";
+import { Card } from "@/components/ui/card";
 import { useMounted } from "@/lib/hooks/use-mounted";
+import { cn } from "@/lib/utils";
 
 interface HourlyActivityChartProps {
   data?: { hour: number; messages: number; flagged: number }[];
@@ -46,7 +47,7 @@ export function HourlyActivityChart({ data = [] }: HourlyActivityChartProps) {
   const maxMessages = Math.max(...full.map((d) => d.messages));
 
   return (
-    <GlassCard variant="base">
+    <Card className={cn("[--card-spacing:0px]", "rounded-2xl", "p-5")}>
       <div className="flex items-center justify-between mb-3">
         <span className="text-xs font-semibold tracking-wide uppercase text-text-secondary">
           Hourly Activity
@@ -103,6 +104,6 @@ export function HourlyActivityChart({ data = [] }: HourlyActivityChartProps) {
           <div className="h-full w-full animate-pulse rounded-md bg-card/40" />
         )}
       </div>
-    </GlassCard>
+    </Card>
   );
 }

services/frontend/src/components/dashboard/moderation-donut.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
-import { GlassCard } from "@/components/glass/card";
+import { Card } from "@/components/ui/card";
 import { useMounted } from "@/lib/hooks/use-mounted";
+import { cn } from "@/lib/utils";
 
 interface ModerationDonutProps {
   data?: { name: string; value: number; color: string }[];
@@ -27,7 +28,7 @@ export function ModerationDonut({ data = [] }: ModerationDonutProps) {
       : 0;
 
   return (
-    <GlassCard variant="base">
+    <Card className={cn("[--card-spacing:0px]", "rounded-2xl", "p-5")}>
       <div className="flex items-center justify-between mb-1">
         <span className="text-xs font-semibold tracking-wide uppercase text-text-secondary">
           Moderation Breakdown
@@ -96,6 +97,6 @@ export function ModerationDonut({ data = [] }: ModerationDonutProps) {
           )}
         </div>
       </div>
-    </GlassCard>
+    </Card>
   );
 }

services/frontend/src/components/dashboard/reactions-section.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { Flame, Heart, SmilePlus } from "lucide-react";
-import { GlassCard } from "@/components/glass/card";
 import { EmptyState, LoadingSkeleton } from "@/components/shared";
 import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
 import { useTopReactions, useTopReactors } from "@/hooks";
 import { renderMessageContent } from "@/lib/format";
+import { cn } from "@/lib/utils";
 
 function formatReactionTime(ts: number | null): string {
   if (!ts) return "";
@@ -31,19 +32,23 @@ export function ReactionsSection() {
         {reactionsLoading ? (
           <LoadingSkeleton count={5} height="h-16" />
         ) : !reactions || reactions.length === 0 ? (
-          <GlassCard className="p-6">
+          <Card className={cn("p-6", "[--card-spacing:0px]", "rounded-2xl")}>
             <EmptyState
               icon={Heart}
               title="Belum ada reaksi"
               description="Pesan dengan reaksi emoji akan muncul di sini."
             />
-          </GlassCard>
+          </Card>
         ) : (
           <div className="space-y-2">
             {reactions.map((r, i) => (
-              <GlassCard
+              <Card
                 key={r.message_id}
-                className="flex items-center gap-3 p-3"
+                className={cn(
+                  "flex items-center gap-3 p-3",
+                  "[--card-spacing:0px]",
+                  "rounded-2xl",
+                )}
               >
                 <span className="w-6 shrink-0 text-center font-mono text-xs text-text-secondary/50">
                   {i + 1}
@@ -76,7 +81,7 @@ export function ReactionsSection() {
                   <Heart className="size-3" />
                   {r.reaction_count}
                 </Badge>
-              </GlassCard>
+              </Card>
             ))}
           </div>
         )}
@@ -90,19 +95,23 @@ export function ReactionsSection() {
         {reactorsLoading ? (
           <LoadingSkeleton count={5} height="h-14" />
         ) : !reactors || reactors.length === 0 ? (
-          <GlassCard className="p-6">
+          <Card className={cn("p-6", "[--card-spacing:0px]", "rounded-2xl")}>
             <EmptyState
               icon={SmilePlus}
               title="Belum ada reaktor"
               description="User yang ngasih reaksi emoji akan muncul di sini."
             />
-          </GlassCard>
+          </Card>
         ) : (
           <div className="space-y-2">
             {reactors.map((r, i) => (
-              <GlassCard
+              <Card
                 key={r.user_id}
-                className="flex items-center gap-3 p-3"
+                className={cn(
+                  "flex items-center gap-3 p-3",
+                  "[--card-spacing:0px]",
+                  "rounded-2xl",
+                )}
               >
                 <span className="w-6 shrink-0 text-center font-mono text-xs text-text-secondary/50">
                   {i + 1}
@@ -120,7 +129,7 @@ export function ReactionsSection() {
                   <Flame className="size-3" />
                   {r.net_count}
                 </Badge>
-              </GlassCard>
+              </Card>
             ))}
           </div>
         )}

services/frontend/src/components/dashboard/stat-card.tsx

@@ -2,7 +2,7 @@
 
 import type { LucideIcon } from "lucide-react";
 import { Area, AreaChart, ResponsiveContainer } from "recharts";
-import { GlassCard } from "@/components/glass/card";
+import { Card } from "@/components/ui/card";
 import { useMounted } from "@/lib/hooks/use-mounted";
 import { cn } from "@/lib/utils";
 
@@ -39,7 +39,13 @@ export function StatCard({
   const numValue = typeof value === "number" ? value : Number(value);
 
   return (
-    <GlassCard variant="base" className="relative overflow-hidden p-4">
+    <Card
+      className={cn(
+        "relative overflow-hidden p-4",
+        "[--card-spacing:0px]",
+        "rounded-2xl",
+      )}
+    >
       <div className="flex items-start justify-between mb-2">
         <div className={cn("p-1.5 rounded-md", bgAccent)}>
           <Icon className="size-4" />
@@ -90,6 +96,6 @@ export function StatCard({
           </ResponsiveContainer>
         </div>
       )}
-    </GlassCard>
+    </Card>
   );
 }

services/frontend/src/components/dashboard/top-channels-chart.tsx

@@ -8,8 +8,9 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
-import { GlassCard } from "@/components/glass/card";
+import { Card } from "@/components/ui/card";
 import { useMounted } from "@/lib/hooks/use-mounted";
+import { cn } from "@/lib/utils";
 
 interface TopChannelsChartProps {
   data?: { name: string; count: number }[];
@@ -19,7 +20,7 @@ export function TopChannelsChart({ data = [] }: TopChannelsChartProps) {
   const mounted = useMounted();
 
   return (
-    <GlassCard variant="base">
+    <Card className={cn("[--card-spacing:0px]", "rounded-2xl", "p-5")}>
       <div className="flex items-center gap-2 mb-3">
         <span className="text-xs font-semibold tracking-wide uppercase text-text-secondary">
           Top Channels
@@ -68,6 +69,6 @@ export function TopChannelsChart({ data = [] }: TopChannelsChartProps) {
           <div className="h-full w-full animate-pulse rounded-md bg-card/40" />
         )}
       </div>
-    </GlassCard>
+    </Card>
   );
 }

services/frontend/src/components/dashboard/users-section.tsx

@@ -2,7 +2,6 @@
 
 import { Search, Users, UserX } from "lucide-react";
 import { useCallback, useState } from "react";
-import { GlassCard } from "@/components/glass/card";
 import { EmptyState, LoadingSkeleton } from "@/components/shared";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
@@ -12,6 +11,7 @@ import { Input } from "@/components/ui/input";
 import { useUserDetail, useUsers } from "@/hooks";
 import { renderMessageContent } from "@/lib/format";
 import type { DashboardUser } from "@/lib/types";
+import { cn } from "@/lib/utils";
 
 const TRUST_TIERS = [
   {
@@ -67,7 +67,14 @@ export function UsersSection() {
 
   if (error) {
     return (
-      <GlassCard variant="danger" className="p-6 text-sm">
+      <Card
+        className={cn(
+          "p-6 text-sm",
+          "border border-red-500/30 ring-red-500/20",
+          "[--card-spacing:0px]",
+          "rounded-2xl",
+        )}
+      >
         Failed to load users: {error.message}
         <Button
           variant="outline"
@@ -77,7 +84,7 @@ export function UsersSection() {
         >
           Retry
         </Button>
-      </GlassCard>
+      </Card>
     );
   }
 
@@ -112,7 +119,9 @@ export function UsersSection() {
         )}
       </div>
 
-      <GlassCard variant="base" className="h-fit">
+      <Card
+        className={cn("h-fit", "[--card-spacing:0px]", "rounded-2xl", "p-5")}
+      >
         {detail ? (
           <div className="space-y-3">
             <div className="flex items-center gap-3">
@@ -196,7 +205,7 @@ export function UsersSection() {
             </p>
           </div>
         )}
-      </GlassCard>
+      </Card>
     </div>
   );
 }

services/frontend/src/components/glass/card.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import type { ComponentPropsWithoutRef } from "react";
-import { cn } from "@/lib/utils";
-
-type GlassVariant = "base" | "elevated" | "interactive" | "danger";
-
-interface GlassCardProps extends ComponentPropsWithoutRef<"div"> {
-  variant?: GlassVariant;
-}
-
-const variantStyles: Record<GlassVariant, string> = {
-  base: "glass rounded-[var(--radius-card)]",
-  elevated: "glass-elevated rounded-[var(--radius-card)]",
-  interactive:
-    "glass rounded-[var(--radius-card)] transition-all duration-150 hover:scale-[1.01] hover:border-[var(--color-border-glow)] cursor-pointer",
-  danger: "glass rounded-[var(--radius-card)] border-red-500/30",
-};
-
-export function GlassCard({
-  variant = "base",
-  className,
-  children,
-  ...props
-}: GlassCardProps) {
-  return (
-    <div className={cn(variantStyles[variant], "p-5", className)} {...props}>
-      {children}
-    </div>
-  );
-}

services/frontend/src/components/glass/index.ts

@@ -1,2 +0,0 @@
-export { GlassCard } from "./card";
-export { GlassPanel } from "./panel";

services/frontend/src/components/glass/panel.tsx

@@ -1,28 +0,0 @@
-"use client";
-
-import type { ComponentPropsWithoutRef } from "react";
-import { cn } from "@/lib/utils";
-
-interface GlassPanelProps extends ComponentPropsWithoutRef<"div"> {
-  dense?: boolean;
-}
-
-export function GlassPanel({
-  dense = false,
-  className,
-  children,
-  ...props
-}: GlassPanelProps) {
-  return (
-    <div
-      className={cn(
-        "glass rounded-[var(--radius-panel)]",
-        dense ? "p-3" : "p-4",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}

services/frontend/src/components/layout/app-sidebar.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { ThemeToggle } from "@/components/layout/theme-toggle";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/components/ui/sidebar";
+import { isActivePath, navItems } from "@/lib/navigation";
+
+/**
+ * Primary application navigation — pure shadcn Sidebar primitives.
+ * Renders as a fixed desktop rail (collapsible to icons) and a Sheet
+ * on mobile via the Sidebar component itself.
+ */
+export function AppSidebar() {
+  const pathname = usePathname();
+
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" render={<Link href="/dashboard" />}>
+              <div className="flex size-6 shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-cyan-500 to-teal-400 text-white text-[10px] font-bold">
+                D
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">Discord Automod</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  Moderation dashboard
+                </span>
+              </div>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+          <SidebarMenu>
+            {navItems.map(({ href, label, icon: Icon, matchPrefix }) => {
+              const active = isActivePath(pathname, matchPrefix);
+              return (
+                <SidebarMenuItem key={href}>
+                  <SidebarMenuButton
+                    render={<Link href={href} />}
+                    isActive={active}
+                    tooltip={label}
+                    className="group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center"
+                  >
+                    <Icon />
+                    <span>{label}</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              );
+            })}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <ThemeToggle />
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+
+      <SidebarRail />
+    </Sidebar>
+  );
+}

services/frontend/src/components/layout/hidden-sidebar.tsx

@@ -1,54 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { GuildSelector } from "@/components/shared/guild-selector";
-
-interface HiddenSidebarProps {
-  guildId: string;
-  onGuildChange: (guildId: string) => void;
-}
-
-export function HiddenSidebar({ guildId, onGuildChange }: HiddenSidebarProps) {
-  const [visible, setVisible] = useState(false);
-  let hideTimer: ReturnType<typeof setTimeout> | null = null;
-
-  const handleMouseEnter = () => {
-    if (hideTimer) clearTimeout(hideTimer);
-    setVisible(true);
-  };
-
-  const handleMouseLeave = () => {
-    hideTimer = setTimeout(() => setVisible(false), 300);
-  };
-
-  return (
-    <>
-      {/* Hotspot trigger */}
-      {/* biome-ignore lint/a11y/noStaticElementInteractions: transparent mouse detection zone, not interactive content */}
-      <div
-        className="fixed left-0 top-0 bottom-0 w-1 z-50"
-        onMouseEnter={handleMouseEnter}
-      />
-
-      {/* Sidebar */}
-      <div
-        role="region"
-        aria-label="Guild selector sidebar"
-        className={`fixed left-0 top-0 bottom-0 z-40 w-56 glass-intense border-r border-glass-border transition-transform duration-150 ease-out ${
-          visible ? "translate-x-0" : "-translate-x-full"
-        }`}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      >
-        <div className="flex h-11 items-center gap-2 px-4 border-b border-glass-border">
-          <span className="text-xs font-semibold tracking-wider uppercase text-text-secondary">
-            Guilds
-          </span>
-        </div>
-        <div className="p-3 space-y-4">
-          <GuildSelector value={guildId} onChange={onGuildChange} />
-        </div>
-      </div>
-    </>
-  );
-}

services/frontend/src/components/layout/mobile-nav.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
-import { isActivePath, mobileNavItems } from "@/lib/navigation";
-import { cn } from "@/lib/utils";
-
-export function MobileNav() {
-  const pathname = usePathname();
-
-  return (
-    <nav className="md:hidden fixed bottom-0 inset-x-0 z-30 glass-intense border-t border-glass-border">
-      <div className="flex items-center justify-around h-14 px-2">
-        {mobileNavItems.map(({ href, label, icon: Icon, matchPrefix }) => {
-          const active = isActivePath(pathname, matchPrefix);
-          return (
-            <Link
-              key={href}
-              href={href}
-              className={cn(
-                "flex flex-col items-center gap-0.5 py-1 px-3 rounded-lg transition-all relative min-w-0",
-                active
-                  ? "text-primary"
-                  : "text-text-secondary/50 hover:text-text-secondary/80",
-              )}
-            >
-              <Icon className="size-5" />
-              <span className="text-[10px] font-medium leading-tight">
-                {label}
-              </span>
-              {active && (
-                <span className="absolute -top-0.5 left-1/2 -translate-x-1/2 size-1 rounded-full bg-primary shadow-[0_0_6px] shadow-primary/80" />
-              )}
-            </Link>
-          );
-        })}
-      </div>
-    </nav>
-  );
-}

services/frontend/src/components/layout/theme-toggle.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button variant="ghost" size="sm" className="w-full justify-start" />
+        }
+      >
+        <Sun className="scale-100 dark:scale-0" />
+        <Moon className="absolute scale-0 dark:scale-100" />
+        <span className="truncate pl-1.5">Toggle theme</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-32">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          <Sun className="mr-2 size-4" />
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          <Moon className="mr-2 size-4" />
+          Dark
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

services/frontend/src/components/layout/top-nav.tsx

@@ -1,87 +0,0 @@
-"use client";
-
-import { Moon, Sun } from "lucide-react";
-import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { isActivePath, navItems } from "@/lib/navigation";
-
-export function TopNav() {
-  const pathname = usePathname();
-  const router = useRouter();
-  const [theme, setTheme] = useState<"light" | "dark">("dark");
-
-  // Apply persisted theme on mount (client-side only — avoids SSR hydration
-  // mismatch from touching <html> during server render).
-  useEffect(() => {
-    const stored = localStorage.getItem("theme") as "light" | "dark" | null;
-    const initial =
-      stored === "light" ? "light" : stored === "dark" ? "dark" : "light";
-    setTheme(initial);
-    document.documentElement.classList.remove("light", "dark");
-    document.documentElement.classList.add(initial);
-  }, []);
-
-  const toggleTheme = () => {
-    const next = theme === "dark" ? "light" : "dark";
-    setTheme(next);
-    localStorage.setItem("theme", next);
-    document.documentElement.classList.remove("light", "dark");
-    document.documentElement.classList.add(next);
-  };
-
-  return (
-    <header className="fixed top-0 left-0 right-0 z-40 h-11 flex items-center gap-1 px-3 glass-intense border-b border-[var(--color-border-glow)]">
-      {/* Brand */}
-      <div className="flex items-center gap-2 mr-4 shrink-0">
-        <div className="relative flex size-6 items-center justify-center rounded-md bg-gradient-to-br from-cyan-500 to-teal-400 text-white text-[10px] font-bold">
-          D
-          <span className="absolute -top-0.5 -right-0.5 size-1.5 rounded-full bg-emerald-500 shadow-[0_0_6px] shadow-emerald-500/80 animate-pulse" />
-        </div>
-        <span className="text-xs font-semibold text-text-primary tracking-tight hidden sm:inline">
-          Discord Automod
-        </span>
-      </div>
-
-      {/* Nav links */}
-      <nav className="flex items-center gap-0.5 flex-1 justify-center">
-        {navItems.map(({ href, label, icon: Icon, matchPrefix }) => {
-          const active = isActivePath(pathname, matchPrefix);
-          return (
-            <button
-              key={href}
-              type="button"
-              onClick={() => router.push(href)}
-              className={`relative flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all duration-150 ${
-                active
-                  ? "text-text-primary"
-                  : "text-text-secondary/60 hover:text-text-primary/80"
-              }`}
-            >
-              <Icon className="size-3.5" />
-              <span className="hidden sm:inline">{label}</span>
-              {active && (
-                <span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 rounded-full bg-primary shadow-[0_0_8px] shadow-primary/60" />
-              )}
-            </button>
-          );
-        })}
-      </nav>
-
-      {/* Right side */}
-      <div className="flex items-center gap-2 shrink-0">
-        <button
-          type="button"
-          onClick={toggleTheme}
-          className="size-7 flex items-center justify-center rounded-md text-text-secondary/60 hover:text-text-primary hover:bg-glass-bg transition-all"
-          aria-label="Toggle theme"
-        >
-          {theme === "dark" ? (
-            <Moon className="size-3.5" />
-          ) : (
-            <Sun className="size-3.5" />
-          )}
-        </button>
-      </div>
-    </header>
-  );
-}

services/frontend/src/components/messages/ai-analysis-panel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { GlassPanel } from "@/components/glass/panel";
+import { Card } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 
 interface AiAnalysisPanelProps {
@@ -37,11 +37,11 @@ export function AiAnalysisPanel({
 
   if (!status || status === "pending") {
     return (
-      <GlassPanel dense>
+      <Card className={cn("[--card-spacing:0px]", "p-3")}>
         <span className="text-xs text-text-secondary/50">
           AI analysis pending
         </span>
-      </GlassPanel>
+      </Card>
     );
   }
 
@@ -55,7 +55,7 @@ export function AiAnalysisPanel({
       : categories || [];
 
   return (
-    <GlassPanel dense className="space-y-2">
+    <Card className={cn("space-y-2", "[--card-spacing:0px]", "p-3")}>
       <div className="flex items-center gap-2">
         <span className="text-xs font-semibold tracking-wide uppercase text-text-secondary">
           AI Analysis
@@ -155,6 +155,6 @@ export function AiAnalysisPanel({
           <span className="font-mono text-accent-amber">{action}</span>
         </div>
       )}
-    </GlassPanel>
+    </Card>
   );
 }

services/frontend/src/components/messages/message-detail-view.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { ArrowLeft, MessageSquare, MessagesSquare, Pencil } from "lucide-react";
-import { GlassCard } from "@/components/glass/card";
+import { Card } from "@/components/ui/card";
 import { getMessageChannelLabel, renderMessageContent } from "@/lib/format";
 import type { AttachmentRecord, MessageRecord } from "@/lib/types";
+import { cn } from "@/lib/utils";
 import { AiAnalysisPanel } from "./ai-analysis-panel";
 import { AttachmentsGrid } from "./attachments-grid";
 
@@ -21,7 +22,9 @@ export function MessageDetailView({
   onImageClick,
 }: MessageDetailViewProps) {
   return (
-    <GlassCard variant="base" className="h-full">
+    <Card
+      className={cn("h-full", "[--card-spacing:0px]", "rounded-2xl", "p-5")}
+    >
       {onBack && (
         <button
           type="button"
@@ -94,6 +97,6 @@ export function MessageDetailView({
         score={message.ai_moderation_score}
         analysis={message.ai_analysis}
       />
-    </GlassCard>
+    </Card>
   );
 }

services/frontend/src/components/messages/message-detail.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { ArrowLeft, MessageSquare, MessagesSquare } from "lucide-react";
-import { GlassCard } from "@/components/glass/card";
+import { Card } from "@/components/ui/card";
 import { getMessageChannelLabel, renderMessageContent } from "@/lib/format";
 import type { AttachmentRecord, MessageRecord } from "@/lib/types";
+import { cn } from "@/lib/utils";
 import { AiAnalysisPanel } from "./ai-analysis-panel";
 import { AttachmentsGrid } from "./attachments-grid";
 
@@ -19,7 +20,9 @@ export function MessageDetail({
   onBack,
 }: MessageDetailProps) {
   return (
-    <GlassCard variant="base" className="h-full">
+    <Card
+      className={cn("h-full", "[--card-spacing:0px]", "rounded-2xl", "p-5")}
+    >
       {onBack && (
         <button
           type="button"
@@ -68,6 +71,6 @@ export function MessageDetail({
         score={message.ai_moderation_score}
         analysis={message.ai_analysis}
       />
-    </GlassCard>
+    </Card>
   );
 }

services/frontend/src/components/moderation/moderation-section.tsx

@@ -12,9 +12,9 @@ import {
   XCircle,
 } from "lucide-react";
 import { useState } from "react";
-import { GlassCard } from "@/components/glass/card";
 import { EmptyState, LoadingSkeleton } from "@/components/shared";
 import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
 import { useModerationActions, useModerationStats } from "@/hooks";
 import { renderMessageContent } from "@/lib/format";
 import type {
@@ -173,13 +173,13 @@ export function ModerationSection({
       {actionsLoading && !actions ? (
         <LoadingSkeleton count={6} height="h-16" />
       ) : !actions || actions.length === 0 ? (
-        <GlassCard className="p-6">
+        <Card className={cn("p-6", "[--card-spacing:0px]", "rounded-2xl")}>
           <EmptyState
             icon={ShieldAlert}
             title="Belum ada aksi moderasi"
             description="Aksi auto- moderasi (delete, warn, kick, ban) akan muncul di sini."
           />
-        </GlassCard>
+        </Card>
       ) : (
         <div className="space-y-2">
           {actions.map((a) => (
@@ -207,7 +207,7 @@ function SummaryCard({
   hint?: string;
 }) {
   return (
-    <GlassCard className="p-4">
+    <Card className={cn("p-4", "[--card-spacing:0px]", "rounded-2xl")}>
       <p className="text-[10px] uppercase tracking-wide text-text-secondary/50">
         {label}
       </p>
@@ -217,7 +217,7 @@ function SummaryCard({
           <span className="ml-1 text-xs font-medium opacity-80">({hint})</span>
         )}
       </p>
-    </GlassCard>
+    </Card>
   );
 }
 
@@ -251,7 +251,13 @@ function ActionRow({ action }: { action: ModerationAction }) {
   const st = STATUS_META[action.status];
   const Icon = meta.Icon;
   return (
-    <GlassCard className="flex items-start gap-3 p-3">
+    <Card
+      className={cn(
+        "flex items-start gap-3 p-3",
+        "[--card-spacing:0px]",
+        "rounded-2xl",
+      )}
+    >
       <span className={cn("mt-0.5 shrink-0", meta.className)}>
         <Icon className="size-4" />
       </span>
@@ -301,7 +307,7 @@ function ActionRow({ action }: { action: ModerationAction }) {
       ) : (
         <Loader2 className="mt-0.5 size-3.5 shrink-0 animate-spin text-amber-500" />
       )}
-    </GlassCard>
+    </Card>
   );
 }
 

services/frontend/src/components/recordings/recording-card.tsx

@@ -2,9 +2,10 @@
 
 import { Download, Loader2, Pause, Play } from "lucide-react";
 import { useState } from "react";
-import { GlassCard } from "@/components/glass/card";
+import { Card } from "@/components/ui/card";
 import { formatBytes } from "@/lib/format";
 import type { VoiceRecording } from "@/lib/types";
+import { cn } from "@/lib/utils";
 
 interface RecordingCardProps {
   recording: VoiceRecording;
@@ -55,13 +56,17 @@ export function RecordingCard({
   };
 
   return (
-    <GlassCard
-      variant="interactive"
-      className={`p-4 transition-all ${
-        active
-          ? "ring-1 ring-primary/40 border-primary/30 animate-card-glow"
-          : "hover:ring-1 hover:ring-border/60"
-      }`}
+    <Card
+      className={cn(
+        `p-4 transition-all ${
+          active
+            ? "ring-1 ring-primary/40 border-primary/30 animate-card-glow"
+            : "hover:ring-1 hover:ring-border/60"
+        }`,
+        "cursor-pointer transition-colors hover:ring-primary/40",
+        "[--card-spacing:0px]",
+        "rounded-2xl",
+      )}
       onClick={() => onTogglePlay(recording.id)}
     >
       <div className="flex items-start gap-3">
@@ -151,6 +156,6 @@ export function RecordingCard({
           )}
         </div>
       </div>
-    </GlassCard>
+    </Card>
   );
 }

services/frontend/src/components/recordings/recording-player.tsx

@@ -2,7 +2,8 @@
 
 import { Loader2, Pause, Play, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-import { GlassPanel } from "@/components/glass/panel";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
 
 interface RecordingPlayerProps {
   url?: string;
@@ -70,9 +71,12 @@ export function RecordingPlayer({
   const pct = duration > 0 ? Math.min(100, (progress / duration) * 100) : 0;
 
   return (
-    <GlassPanel
-      dense
-      className="fixed bottom-20 left-4 z-30 w-80 flex flex-col gap-1.5"
+    <Card
+      className={cn(
+        "fixed bottom-20 left-4 z-30 w-80 flex flex-col gap-1.5",
+        "[--card-spacing:0px]",
+        "p-3",
+      )}
     >
       <div className="flex items-center gap-2.5">
         <button
@@ -140,6 +144,6 @@ export function RecordingPlayer({
         }}
         className="hidden"
       />
-    </GlassPanel>
+    </Card>
   );
 }

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

@@ -2,7 +2,7 @@
 
 import type { LucideIcon } from "lucide-react";
 import { Inbox } from "lucide-react";
-import { GlassPanel } from "@/components/glass/panel";
+import { Card } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 
 interface EmptyStateProps {
@@ -19,13 +19,16 @@ export function EmptyState({
   className,
 }: EmptyStateProps) {
   return (
-    <GlassPanel
-      dense
-      className={cn("flex flex-col items-center gap-2 py-12", className)}
+    <Card
+      className={cn(
+        "flex flex-col items-center gap-2 py-12",
+        className,
+        "[--card-spacing:0px]",
+      )}
     >
       <Icon className="size-8 text-text-secondary/20" />
       <p className="text-sm text-text-secondary/60">{title}</p>
       <p className="text-xs text-text-secondary/40">{description}</p>
-    </GlassPanel>
+    </Card>
   );
 }

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

@@ -2,7 +2,8 @@
 
 import { AlertCircle, RefreshCw } from "lucide-react";
 import { Component, type ReactNode } from "react";
-import { GlassCard } from "@/components/glass/card";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
 
 interface Props {
   children: ReactNode;
@@ -24,9 +25,13 @@ export class ErrorBoundary extends Component<Props, State> {
     if (this.state.hasError) {
       return (
         this.props.fallback || (
-          <GlassCard
-            variant="danger"
-            className="flex flex-col items-center gap-2 py-8"
+          <Card
+            className={cn(
+              "flex flex-col items-center gap-2 py-8",
+              "border border-red-500/30 ring-red-500/20",
+              "[--card-spacing:0px]",
+              "rounded-2xl",
+            )}
           >
             <AlertCircle className="size-6 text-destructive" />
             <p className="text-sm text-text-secondary">
@@ -39,7 +44,7 @@ export class ErrorBoundary extends Component<Props, State> {
             >
               <RefreshCw className="size-3" /> Try again
             </button>
-          </GlassCard>
+          </Card>
         )
       );
     }

services/frontend/src/components/ui/accordion.tsx

@@ -0,0 +1,72 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

services/frontend/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,187 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

services/frontend/src/components/ui/alert.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

services/frontend/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@/lib/utils"
+
+function AspectRatio({
+  ratio,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & { ratio: number }) {
+  return (
+    <div
+      data-slot="aspect-ratio"
+      style={
+        {
+          "--ratio": ratio,
+        } as React.CSSProperties
+      }
+      className={cn("relative aspect-(--ratio)", className)}
+      {...props}
+    />
+  )
+}
+
+export { AspectRatio }

services/frontend/src/components/ui/avatar.tsx

@@ -1,16 +1,16 @@
-"use client";
+"use client"
 
-import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
-import type * as React from "react";
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Avatar({
   className,
   size = "default",
   ...props
 }: AvatarPrimitive.Root.Props & {
-  size?: "default" | "sm" | "lg";
+  size?: "default" | "sm" | "lg"
 }) {
   return (
     <AvatarPrimitive.Root
@@ -18,11 +18,11 @@ function Avatar({
       data-size={size}
       className={cn(
         "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
@@ -31,13 +31,11 @@ function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
       data-slot="avatar-image"
       className={cn(
         "aspect-square size-full rounded-full object-cover",
-        className,
+        className
       )}
-      loading="lazy"
-      decoding="async"
       {...props}
     />
-  );
+  )
 }
 
 function AvatarFallback({
@@ -49,11 +47,11 @@ function AvatarFallback({
       data-slot="avatar-fallback"
       className={cn(
         "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
@@ -65,11 +63,11 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
@@ -78,11 +76,11 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="avatar-group"
       className={cn(
         "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function AvatarGroupCount({
@@ -94,18 +92,18 @@ function AvatarGroupCount({
       data-slot="avatar-group-count"
       className={cn(
         "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
   Avatar,
-  AvatarBadge,
+  AvatarImage,
   AvatarFallback,
   AvatarGroup,
   AvatarGroupCount,
-  AvatarImage,
-};
+  AvatarBadge,
+}

services/frontend/src/components/ui/badge.tsx

@@ -1,8 +1,8 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { cva, type VariantProps } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
   "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
@@ -24,8 +24,8 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  },
-);
+  }
+)
 
 function Badge({
   className,
@@ -39,14 +39,14 @@ function Badge({
       {
         className: cn(badgeVariants({ variant }), className),
       },
-      props,
+      props
     ),
     render,
     state: {
       slot: "badge",
       variant,
     },
-  });
+  })
 }
 
-export { Badge, badgeVariants };
+export { Badge, badgeVariants }

services/frontend/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,125 @@
+import * as React from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"a">) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn("transition-colors hover:text-foreground", className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "breadcrumb-link",
+    },
+  })
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? (
+        <ChevronRightIcon />
+      )}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn(
+        "flex size-5 items-center justify-center [&>svg]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

services/frontend/src/components/ui/button.tsx

@@ -1,7 +1,7 @@
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
-import { cva, type VariantProps } from "class-variance-authority";
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
   "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -37,8 +37,8 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
-);
+  }
+)
 
 function Button({
   className,
@@ -52,7 +52,7 @@ function Button({
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  );
+  )
 }
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }

services/frontend/src/components/ui/calendar.tsx

@@ -0,0 +1,221 @@
+"use client"
+
+import * as React from "react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+  type Locale,
+} from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-(--cell-radius)",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-sm"
+            : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn(
+          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_end
+        ),
+        today: cn(
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: ({ ...props }) => (
+          <CalendarDayButton locale={locale} {...props} />
+        ),
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  locale,
+  ...props
+}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString(locale?.code)}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

services/frontend/src/components/ui/card.tsx

@@ -1,6 +1,6 @@
-import type * as React from "react";
+import * as React from "react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Card({
   className,
@@ -13,11 +13,11 @@ function Card({
       data-size={size}
       className={cn(
         "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -26,11 +26,11 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-header"
       className={cn(
         "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -38,12 +38,12 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-title"
       className={cn(
-        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
-        className,
+        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
@@ -53,7 +53,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
-  );
+  )
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
@@ -62,11 +62,11 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-action"
       className={cn(
         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -76,7 +76,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("px-(--card-spacing)", className)}
       {...props}
     />
-  );
+  )
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -85,19 +85,19 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-footer"
       className={cn(
         "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
   Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
   CardHeader,
+  CardFooter,
   CardTitle,
-};
+  CardAction,
+  CardDescription,
+  CardContent,
+}

services/frontend/src/components/ui/carousel.tsx

@@ -0,0 +1,242 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute touch-manipulation rounded-full",
+        orientation === "horizontal"
+          ? "inset-y-0 -left-12 my-auto"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute touch-manipulation rounded-full",
+        orientation === "horizontal"
+          ? "inset-y-0 -right-12 my-auto"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ChevronRightIcon />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  useCarousel,
+}

services/frontend/src/components/ui/chart.tsx

@@ -0,0 +1,373 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+import type { TooltipValueType } from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+const INITIAL_DIMENSION = { width: 320, height: 200 } as const
+type TooltipNameType = number | string
+
+export type ChartConfig = Record<
+  string,
+  {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+>
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  initialDimension = INITIAL_DIMENSION,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]
+  initialDimension?: {
+    width: number
+    height: number
+  }
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer
+          initialDimension={initialDimension}
+        >
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme ?? config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  } & Omit<
+    RechartsPrimitive.DefaultTooltipContentProps<
+      TooltipValueType,
+      TooltipNameType
+    >,
+    "accessibilityLayer"
+  >) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? (config[label]?.label ?? label)
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item, index) => {
+            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color ?? item.payload?.fill ?? item.color
+
+            return (
+              <div
+                key={index}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label ?? item.name}
+                        </span>
+                      </div>
+                      {item.value != null && (
+                        <span className="font-mono font-medium text-foreground tabular-nums">
+                          {typeof item.value === "number"
+                            ? item.value.toLocaleString()
+                            : String(item.value)}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> & {
+  hideIcon?: boolean
+  nameKey?: string
+} & RechartsPrimitive.DefaultLegendContentProps) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item, index) => {
+          const key = `${nameKey ?? item.dataKey ?? "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}

services/frontend/src/components/ui/checkbox.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon } from "lucide-react"
+
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      >
+        <CheckIcon
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

services/frontend/src/components/ui/collapsible.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
+  )
+}
+
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

services/frontend/src/components/ui/context-menu.tsx

@@ -0,0 +1,271 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuTrigger({
+  className,
+  ...props
+}: ContextMenuPrimitive.Trigger.Props) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  align = "start",
+  alignOffset = 4,
+  side = "right",
+  sideOffset = 0,
+  ...props
+}: ContextMenuPrimitive.Popup.Props &
+  Pick<
+    ContextMenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <ContextMenuPrimitive.Popup
+          data-slot="context-menu-content"
+          className={cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </ContextMenuPrimitive.Positioner>
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: ContextMenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.GroupLabel
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ContextMenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
+  return (
+    <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ContextMenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubmenuTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  ...props
+}: React.ComponentProps<typeof ContextMenuContent>) {
+  return (
+    <ContextMenuContent
+      data-slot="context-menu-sub-content"
+      className="shadow-lg"
+      side="right"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: ContextMenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon
+          />
+        </ContextMenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: ContextMenuPrimitive.RadioGroup.Props) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: ContextMenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.RadioItemIndicator>
+          <CheckIcon
+          />
+        </ContextMenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: ContextMenuPrimitive.Separator.Props) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

services/frontend/src/components/ui/dialog.tsx

@@ -1,25 +1,26 @@
-"use client";
+"use client"
 
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
-import { XIcon } from "lucide-react";
-import type * as React from "react";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
 
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
 }
 
 function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 }
 
 function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 }
 
 function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 }
 
 function DialogOverlay({
@@ -31,11 +32,11 @@ function DialogOverlay({
       data-slot="dialog-overlay"
       className={cn(
         "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DialogContent({
@@ -44,7 +45,7 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }: DialogPrimitive.Popup.Props & {
-  showCloseButton?: boolean;
+  showCloseButton?: boolean
 }) {
   return (
     <DialogPortal>
@@ -53,7 +54,7 @@ function DialogContent({
         data-slot="dialog-content"
         className={cn(
           "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className,
+          className
         )}
         {...props}
       >
@@ -69,13 +70,14 @@ function DialogContent({
               />
             }
           >
-            <XIcon />
+            <XIcon
+            />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Popup>
     </DialogPortal>
-  );
+  )
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -85,7 +87,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-2", className)}
       {...props}
     />
-  );
+  )
 }
 
 function DialogFooter({
@@ -94,14 +96,14 @@ function DialogFooter({
   children,
   ...props
 }: React.ComponentProps<"div"> & {
-  showCloseButton?: boolean;
+  showCloseButton?: boolean
 }) {
   return (
     <div
       data-slot="dialog-footer"
       className={cn(
         "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
-        className,
+        className
       )}
       {...props}
     >
@@ -112,7 +114,7 @@ function DialogFooter({
         </DialogPrimitive.Close>
       )}
     </div>
-  );
+  )
 }
 
 function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
@@ -120,12 +122,12 @@ function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
     <DialogPrimitive.Title
       data-slot="dialog-title"
       className={cn(
-        "font-heading text-base leading-none font-medium",
-        className,
+        "text-base leading-none font-medium",
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DialogDescription({
@@ -137,11 +139,11 @@ function DialogDescription({
       data-slot="dialog-description"
       className={cn(
         "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -155,4 +157,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-};
+}

services/frontend/src/components/ui/drawer.tsx

@@ -0,0 +1,228 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
+
+import { cn } from "@/lib/utils"
+
+type DrawerContextProps = {
+  hasSnapPoints: boolean
+  modal: DrawerPrimitive.Root.Props["modal"]
+  showSwipeHandle: boolean
+  swipeDirection: NonNullable<DrawerPrimitive.Root.Props["swipeDirection"]>
+}
+
+const DrawerContext = React.createContext<DrawerContextProps | null>(null)
+
+function useDrawer() {
+  const context = React.useContext(DrawerContext)
+
+  if (!context) {
+    throw new Error("useDrawer must be used within a Drawer.")
+  }
+
+  return context
+}
+
+function Drawer({
+  modal = true,
+  showSwipeHandle = false,
+  snapPoints,
+  swipeDirection = "down",
+  ...props
+}: DrawerPrimitive.Root.Props & {
+  showSwipeHandle?: boolean
+}) {
+  const hasSnapPoints = snapPoints != null && snapPoints.length > 0
+  const contextValue = React.useMemo(
+    () => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
+    [hasSnapPoints, modal, showSwipeHandle, swipeDirection]
+  )
+
+  return (
+    <DrawerContext.Provider value={contextValue}>
+      <DrawerPrimitive.Root
+        data-slot="drawer"
+        modal={modal}
+        snapPoints={snapPoints}
+        swipeDirection={swipeDirection}
+        {...props}
+      />
+    </DrawerContext.Provider>
+  )
+}
+
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: DrawerPrimitive.Backdrop.Props) {
+  return (
+    <DrawerPrimitive.Backdrop
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerSwipeHandle({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-swipe-handle"
+      aria-hidden="true"
+      className={cn(
+        "relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: DrawerPrimitive.Popup.Props) {
+  const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer()
+  const swipeAxis =
+    swipeDirection === "down" || swipeDirection === "up" ? "y" : "x"
+
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      {modal === true && (
+        <DrawerOverlay data-snap-points={hasSnapPoints ? "" : undefined} />
+      )}
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        data-modal={modal}
+        className="pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto"
+      >
+        <DrawerPrimitive.Popup
+          data-slot="drawer-popup"
+          data-swipe-axis={swipeAxis}
+          data-snap-points={hasSnapPoints ? "" : undefined}
+          className={cn(
+            // Base.
+            "group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b",
+            // Nested.
+            "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
+            // Bleed.
+            "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
+            // Sizing.
+            "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
+            // Stack.
+            "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
+            // Transitions.
+            "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
+            // Axis: y.
+            "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
+            // Axis: x.
+            "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
+            // Direction: down.
+            "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
+            // Direction: up.
+            "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
+            // Direction: left.
+            "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
+            // Direction: right.
+            "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",
+            className
+          )}
+          {...props}
+        >
+          {showSwipeHandle && <DrawerSwipeHandle />}
+          <DrawerPrimitive.Content
+            data-slot="drawer-content"
+            className={cn(
+              "flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"
+            )}
+          >
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn(
+        "text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: DrawerPrimitive.Description.Props) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-balance text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerSwipeHandle,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

services/frontend/src/components/ui/dropdown-menu.tsx

@@ -1,20 +1,21 @@
-"use client";
+"use client"
 
-import { Menu as MenuPrimitive } from "@base-ui/react/menu";
-import { CheckIcon, ChevronRightIcon } from "lucide-react";
-import type * as React from "react";
-import { cn } from "@/lib/utils";
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
 
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
-  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
 }
 
 function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
-  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
 }
 
 function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
-  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
 }
 
 function DropdownMenuContent({
@@ -40,19 +41,16 @@ function DropdownMenuContent({
       >
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
-          className={cn(
-            "z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
-            className,
-          )}
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
           {...props}
         />
       </MenuPrimitive.Positioner>
     </MenuPrimitive.Portal>
-  );
+  )
 }
 
 function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
-  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
 }
 
 function DropdownMenuLabel({
@@ -60,7 +58,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: MenuPrimitive.GroupLabel.Props & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <MenuPrimitive.GroupLabel
@@ -68,11 +66,11 @@ function DropdownMenuLabel({
       data-inset={inset}
       className={cn(
         "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuItem({
@@ -81,8 +79,8 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }: MenuPrimitive.Item.Props & {
-  inset?: boolean;
-  variant?: "default" | "destructive";
+  inset?: boolean
+  variant?: "default" | "destructive"
 }) {
   return (
     <MenuPrimitive.Item
@@ -91,15 +89,15 @@ function DropdownMenuItem({
       data-variant={variant}
       className={cn(
         "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
-  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
 }
 
 function DropdownMenuSubTrigger({
@@ -108,7 +106,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: MenuPrimitive.SubmenuTrigger.Props & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <MenuPrimitive.SubmenuTrigger
@@ -116,14 +114,14 @@ function DropdownMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto" />
     </MenuPrimitive.SubmenuTrigger>
-  );
+  )
 }
 
 function DropdownMenuSubContent({
@@ -137,17 +135,14 @@ function DropdownMenuSubContent({
   return (
     <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-        className,
-      )}
+      className={cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
       align={align}
       alignOffset={alignOffset}
       side={side}
       sideOffset={sideOffset}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuCheckboxItem({
@@ -157,7 +152,7 @@ function DropdownMenuCheckboxItem({
   inset,
   ...props
 }: MenuPrimitive.CheckboxItem.Props & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <MenuPrimitive.CheckboxItem
@@ -165,7 +160,7 @@ function DropdownMenuCheckboxItem({
       data-inset={inset}
       className={cn(
         "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       checked={checked}
       {...props}
@@ -175,12 +170,13 @@ function DropdownMenuCheckboxItem({
         data-slot="dropdown-menu-checkbox-item-indicator"
       >
         <MenuPrimitive.CheckboxItemIndicator>
-          <CheckIcon />
+          <CheckIcon
+          />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
     </MenuPrimitive.CheckboxItem>
-  );
+  )
 }
 
 function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
@@ -189,7 +185,7 @@ function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
       data-slot="dropdown-menu-radio-group"
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuRadioItem({
@@ -198,7 +194,7 @@ function DropdownMenuRadioItem({
   inset,
   ...props
 }: MenuPrimitive.RadioItem.Props & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <MenuPrimitive.RadioItem
@@ -206,7 +202,7 @@ function DropdownMenuRadioItem({
       data-inset={inset}
       className={cn(
         "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     >
@@ -215,12 +211,13 @@ function DropdownMenuRadioItem({
         data-slot="dropdown-menu-radio-item-indicator"
       >
         <MenuPrimitive.RadioItemIndicator>
-          <CheckIcon />
+          <CheckIcon
+          />
         </MenuPrimitive.RadioItemIndicator>
       </span>
       {children}
     </MenuPrimitive.RadioItem>
-  );
+  )
 }
 
 function DropdownMenuSeparator({
@@ -233,7 +230,7 @@ function DropdownMenuSeparator({
       className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuShortcut({
@@ -245,27 +242,27 @@ function DropdownMenuShortcut({
       data-slot="dropdown-menu-shortcut"
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
   DropdownMenu,
-  DropdownMenuCheckboxItem,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuGroup,
-  DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuPortal,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuSub,
-  DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-};
+  DropdownMenuSubContent,
+}

services/frontend/src/components/ui/hover-card.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
+  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
+  return (
+    <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 4,
+  ...props
+}: PreviewCardPrimitive.Popup.Props &
+  Pick<
+    PreviewCardPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <PreviewCardPrimitive.Portal data-slot="hover-card-portal">
+      <PreviewCardPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PreviewCardPrimitive.Popup
+          data-slot="hover-card-content"
+          className={cn(
+            "z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

services/frontend/src/components/ui/input-group.tsx

@@ -1,164 +0,0 @@
-"use client";
-
-import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { cn } from "@/lib/utils";
-
-function InputGroup({ className, ...props }: React.ComponentProps<"fieldset">) {
-  return (
-    <fieldset
-      data-slot="input-group"
-      className={cn(
-        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      align: {
-        "inline-start":
-          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
-        "inline-end":
-          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
-        "block-start":
-          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
-        "block-end":
-          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
-      },
-    },
-    defaultVariants: {
-      align: "inline-start",
-    },
-  },
-);
-
-function InputGroupAddon({
-  className,
-  align = "inline-start",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
-  return (
-    <div
-      role="none"
-      data-slot="input-group-addon"
-      data-align={align}
-      className={cn(inputGroupAddonVariants({ align }), className)}
-      onClick={(e) => {
-        if ((e.target as HTMLElement).closest("button")) {
-          return;
-        }
-        e.currentTarget.parentElement?.querySelector("input")?.focus();
-      }}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          if ((e.target as HTMLElement).closest("button")) {
-            return;
-          }
-          e.currentTarget.parentElement?.querySelector("input")?.focus();
-        }
-      }}
-      {...props}
-    />
-  );
-}
-
-const inputGroupButtonVariants = cva(
-  "flex items-center gap-2 text-sm shadow-none",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-        sm: "",
-        "icon-xs":
-          "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
-      },
-    },
-    defaultVariants: {
-      size: "xs",
-    },
-  },
-);
-
-function InputGroupButton({
-  className,
-  type = "button",
-  variant = "ghost",
-  size = "xs",
-  ...props
-}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
-  VariantProps<typeof inputGroupButtonVariants> & {
-    type?: "button" | "submit" | "reset";
-  }) {
-  return (
-    <Button
-      type={type}
-      data-size={size}
-      variant={variant}
-      className={cn(inputGroupButtonVariants({ size }), className)}
-      {...props}
-    />
-  );
-}
-
-function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      className={cn(
-        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function InputGroupInput({
-  className,
-  ...props
-}: React.ComponentProps<"input">) {
-  return (
-    <Input
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function InputGroupTextarea({
-  className,
-  ...props
-}: React.ComponentProps<"textarea">) {
-  return (
-    <Textarea
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea,
-};

services/frontend/src/components/ui/input-otp.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+
+import { cn } from "@/lib/utils"
+import { MinusIcon } from "lucide-react"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "cn-input-otp flex items-center has-disabled:opacity-50",
+        containerClassName
+      )}
+      spellCheck={false}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn(
+        "flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      role="separator"
+      {...props}
+    >
+      <MinusIcon
+      />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

services/frontend/src/components/ui/input.tsx

@@ -1,7 +1,7 @@
-import { Input as InputPrimitive } from "@base-ui/react/input";
-import type * as React from "react";
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
@@ -10,11 +10,11 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       data-slot="input"
       className={cn(
         "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Input };
+export { Input }

services/frontend/src/components/ui/label.tsx

@@ -1,24 +1,20 @@
-"use client";
+"use client"
 
-import type * as React from "react";
+import * as React from "react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
-function Label({
-  className,
-  htmlFor: _htmlFor,
-  ...props
-}: React.ComponentProps<"label">) {
+function Label({ className, ...props }: React.ComponentProps<"label">) {
   return (
-    <span
+    <label
       data-slot="label"
       className={cn(
         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Label };
+export { Label }

services/frontend/src/components/ui/menubar.tsx

@@ -0,0 +1,280 @@
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
+
+import { cn } from "@/lib/utils"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { CheckIcon } from "lucide-react"
+
+function Menubar({ className, ...props }: MenubarPrimitive.Props) {
+  return (
+    <MenubarPrimitive
+      data-slot="menubar"
+      className={cn(
+        "flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {
+  return <DropdownMenu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuGroup>) {
+  return <DropdownMenuGroup data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPortal>) {
+  return <DropdownMenuPortal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuTrigger>) {
+  return (
+    <DropdownMenuTrigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="menubar-content"
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn("min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className )}
+      {...props}
+    />
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuItem>) {
+  return (
+    <DropdownMenuItem
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {
+  return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuLabel> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuLabel
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-sm font-medium data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSeparator>) {
+  return (
+    <DropdownMenuSeparator
+      data-slot="menubar-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuShortcut>) {
+  return (
+    <DropdownMenuShortcut
+      data-slot="menubar-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSub>) {
+  return <DropdownMenuSub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuSubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSubContent>) {
+  return (
+    <DropdownMenuSubContent
+      data-slot="menubar-sub-content"
+      className={cn("min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}

services/frontend/src/components/ui/navigation-menu.tsx

@@ -0,0 +1,168 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon } from "lucide-react"
+
+function NavigationMenu({
+  align = "start",
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Root.Props &
+  Pick<NavigationMenuPrimitive.Positioner.Props, "align">) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <NavigationMenuPositioner align={align} />
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Trigger.Props) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: NavigationMenuPrimitive.Content.Props) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuPositioner({
+  className,
+  side = "bottom",
+  sideOffset = 8,
+  align = "start",
+  alignOffset = 0,
+  ...props
+}: NavigationMenuPrimitive.Positioner.Props) {
+  return (
+    <NavigationMenuPrimitive.Portal>
+      <NavigationMenuPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        className={cn(
+          "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
+          className
+        )}
+        {...props}
+      >
+        <NavigationMenuPrimitive.Popup className="data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
+          <NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
+        </NavigationMenuPrimitive.Popup>
+      </NavigationMenuPrimitive.Positioner>
+    </NavigationMenuPrimitive.Portal>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: NavigationMenuPrimitive.Link.Props) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {
+  return (
+    <NavigationMenuPrimitive.Icon
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className
+      )}
+      {...props}
+    >
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    </NavigationMenuPrimitive.Icon>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+  NavigationMenuPositioner,
+}

services/frontend/src/components/ui/pagination.tsx

@@ -0,0 +1,130 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex items-center gap-0.5", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <Button
+      variant={isActive ? "outline" : "ghost"}
+      size={size}
+      className={cn(className)}
+      nativeButton={false}
+      render={
+        <a
+          aria-current={isActive ? "page" : undefined}
+          data-slot="pagination-link"
+          data-active={isActive}
+          {...props}
+        />
+      }
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  text = "Previous",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("pl-1.5!", className)}
+      {...props}
+    >
+      <ChevronLeftIcon data-icon="inline-start" />
+      <span className="hidden sm:block">{text}</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  text = "Next",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("pr-1.5!", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">{text}</span>
+      <ChevronRightIcon data-icon="inline-end" />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn(
+        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

services/frontend/src/components/ui/popover.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}: PopoverPrimitive.Popup.Props &
+  Pick<
+    PopoverPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-0.5 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+  return (
+    <PopoverPrimitive.Title
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}

services/frontend/src/components/ui/progress.tsx

@@ -1,8 +1,8 @@
-"use client";
+"use client"
 
-import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Progress({
   className,
@@ -22,7 +22,7 @@ function Progress({
         <ProgressIndicator />
       </ProgressTrack>
     </ProgressPrimitive.Root>
-  );
+  )
 }
 
 function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
@@ -30,12 +30,12 @@ function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
     <ProgressPrimitive.Track
       className={cn(
         "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
-        className,
+        className
       )}
       data-slot="progress-track"
       {...props}
     />
-  );
+  )
 }
 
 function ProgressIndicator({
@@ -48,7 +48,7 @@ function ProgressIndicator({
       className={cn("h-full bg-primary transition-all", className)}
       {...props}
     />
-  );
+  )
 }
 
 function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
@@ -58,7 +58,7 @@ function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
       data-slot="progress-label"
       {...props}
     />
-  );
+  )
 }
 
 function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
@@ -66,18 +66,18 @@ function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
     <ProgressPrimitive.Value
       className={cn(
         "ml-auto text-sm text-muted-foreground tabular-nums",
-        className,
+        className
       )}
       data-slot="progress-value"
       {...props}
     />
-  );
+  )
 }
 
 export {
   Progress,
+  ProgressTrack,
   ProgressIndicator,
   ProgressLabel,
-  ProgressTrack,
   ProgressValue,
-};
+}

services/frontend/src/components/ui/radio-group.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import { Radio as RadioPrimitive } from "@base-ui/react/radio"
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+  return (
+    <RadioGroupPrimitive
+      data-slot="radio-group"
+      className={cn("grid w-full gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
+  return (
+    <RadioPrimitive.Root
+      data-slot="radio-group-item"
+      className={cn(
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <RadioPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex size-4 items-center justify-center"
+      >
+        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
+      </RadioPrimitive.Indicator>
+    </RadioPrimitive.Root>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

services/frontend/src/components/ui/resizable.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />
+      )}
+    </ResizablePrimitive.Separator>
+  )
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }

services/frontend/src/components/ui/scroll-area.tsx

@@ -1,8 +1,9 @@
-"use client";
+"use client"
 
-import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function ScrollArea({
   className,
@@ -24,7 +25,7 @@ function ScrollArea({
       <ScrollBar />
       <ScrollAreaPrimitive.Corner />
     </ScrollAreaPrimitive.Root>
-  );
+  )
 }
 
 function ScrollBar({
@@ -39,7 +40,7 @@ function ScrollBar({
       orientation={orientation}
       className={cn(
         "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
-        className,
+        className
       )}
       {...props}
     >
@@ -48,7 +49,7 @@ function ScrollBar({
         className="relative flex-1 rounded-full bg-border"
       />
     </ScrollAreaPrimitive.Scrollbar>
-  );
+  )
 }
 
-export { ScrollArea, ScrollBar };
+export { ScrollArea, ScrollBar }

services/frontend/src/components/ui/select.tsx

@@ -1,11 +1,12 @@
-"use client";
+"use client"
 
-import { Select as SelectPrimitive } from "@base-ui/react/select";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import type * as React from "react";
-import { cn } from "@/lib/utils";
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
 
-const Select = SelectPrimitive.Root;
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+const Select = SelectPrimitive.Root
 
 function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
   return (
@@ -14,7 +15,7 @@ function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
       className={cn("scroll-my-1 p-1", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
@@ -24,7 +25,7 @@ function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
       className={cn("flex flex-1 text-left", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SelectTrigger({
@@ -33,15 +34,15 @@ function SelectTrigger({
   children,
   ...props
 }: SelectPrimitive.Trigger.Props & {
-  size?: "sm" | "default";
+  size?: "sm" | "default"
 }) {
   return (
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-full items-center justify-between gap-2 rounded-lg border border-input bg-transparent py-2 pr-2 pl-3 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
       )}
       {...props}
     >
@@ -52,7 +53,7 @@ function SelectTrigger({
         }
       />
     </SelectPrimitive.Trigger>
-  );
+  )
 }
 
 function SelectContent({
@@ -62,7 +63,7 @@ function SelectContent({
   sideOffset = 4,
   align = "center",
   alignOffset = 0,
-  alignItemWithTrigger = true,
+  alignItemWithTrigger = false,
   ...props
 }: SelectPrimitive.Popup.Props &
   Pick<
@@ -82,10 +83,7 @@ function SelectContent({
         <SelectPrimitive.Popup
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
-          className={cn(
-            "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            className,
-          )}
+          className={cn("relative isolate z-50 max-h-(--available-height) w-fit min-w-40 max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
           {...props}
         >
           <SelectScrollUpButton />
@@ -94,7 +92,7 @@ function SelectContent({
         </SelectPrimitive.Popup>
       </SelectPrimitive.Positioner>
     </SelectPrimitive.Portal>
-  );
+  )
 }
 
 function SelectLabel({
@@ -107,7 +105,7 @@ function SelectLabel({
       className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SelectItem({
@@ -120,11 +118,11 @@ function SelectItem({
       data-slot="select-item"
       className={cn(
         "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className,
+        className
       )}
       {...props}
     >
-      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-normal break-words">
         {children}
       </SelectPrimitive.ItemText>
       <SelectPrimitive.ItemIndicator
@@ -135,7 +133,7 @@ function SelectItem({
         <CheckIcon className="pointer-events-none" />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
-  );
+  )
 }
 
 function SelectSeparator({
@@ -148,7 +146,7 @@ function SelectSeparator({
       className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SelectScrollUpButton({
@@ -160,13 +158,14 @@ function SelectScrollUpButton({
       data-slot="select-scroll-up-button"
       className={cn(
         "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     >
-      <ChevronUpIcon />
+      <ChevronUpIcon
+      />
     </SelectPrimitive.ScrollUpArrow>
-  );
+  )
 }
 
 function SelectScrollDownButton({
@@ -178,13 +177,14 @@ function SelectScrollDownButton({
       data-slot="select-scroll-down-button"
       className={cn(
         "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     >
-      <ChevronDownIcon />
+      <ChevronDownIcon
+      />
     </SelectPrimitive.ScrollDownArrow>
-  );
+  )
 }
 
 export {
@@ -198,4 +198,4 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-};
+}

services/frontend/src/components/ui/separator.tsx

@@ -1,8 +1,8 @@
-"use client";
+"use client"
 
-import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Separator({
   className,
@@ -15,11 +15,11 @@ function Separator({
       orientation={orientation}
       className={cn(
         "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Separator };
+export { Separator }

services/frontend/src/components/ui/sheet.tsx

@@ -1,25 +1,26 @@
-"use client";
+"use client"
 
-import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
-import { XIcon } from "lucide-react";
-import type * as React from "react";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
 
 function Sheet({ ...props }: SheetPrimitive.Root.Props) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
 }
 
 function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 }
 
 function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
 }
 
 function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
 }
 
 function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
@@ -28,11 +29,11 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
       data-slot="sheet-overlay"
       className={cn(
         "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function SheetContent({
@@ -42,8 +43,8 @@ function SheetContent({
   showCloseButton = true,
   ...props
 }: SheetPrimitive.Popup.Props & {
-  side?: "top" | "right" | "bottom" | "left";
-  showCloseButton?: boolean;
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
 }) {
   return (
     <SheetPortal>
@@ -53,7 +54,7 @@ function SheetContent({
         data-side={side}
         className={cn(
           "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
-          className,
+          className
         )}
         {...props}
       >
@@ -69,13 +70,14 @@ function SheetContent({
               />
             }
           >
-            <XIcon />
+            <XIcon
+            />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
         )}
       </SheetPrimitive.Popup>
     </SheetPortal>
-  );
+  )
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -85,7 +87,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-0.5 p-4", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -95,7 +97,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
@@ -103,12 +105,12 @@ function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
     <SheetPrimitive.Title
       data-slot="sheet-title"
       className={cn(
-        "font-heading text-base font-medium text-foreground",
-        className,
+        "text-base font-medium text-foreground",
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function SheetDescription({
@@ -121,16 +123,16 @@ function SheetDescription({
       className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
-  );
+  )
 }
 
 export {
   Sheet,
+  SheetTrigger,
   SheetClose,
   SheetContent,
-  SheetDescription,
-  SheetFooter,
   SheetHeader,
+  SheetFooter,
   SheetTitle,
-  SheetTrigger,
-};
+  SheetDescription,
+}

services/frontend/src/components/ui/sidebar.tsx

@@ -0,0 +1,723 @@
+"use client"
+
+import * as React from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { PanelLeftIcon } from "lucide-react"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={cn(
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon-sm"
+      className={cn(className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("h-8 w-full bg-background shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & React.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-group-label",
+      sidebar: "group-label",
+    },
+  })
+}
+
+function SidebarGroupAction({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"button"> & React.ComponentProps<"button">) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-group-action",
+      sidebar: "group-action",
+    },
+  })
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-0", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  render,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: useRender.ComponentProps<"button"> &
+  React.ComponentProps<"button"> & {
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const { isMobile, state } = useSidebar()
+  const comp = useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      },
+      props
+    ),
+    render: !tooltip ? render : <TooltipTrigger render={render} />,
+    state: {
+      slot: "sidebar-menu-button",
+      sidebar: "menu-button",
+      size,
+      active: isActive,
+    },
+  })
+
+  if (!tooltip) {
+    return comp
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      {comp}
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  render,
+  showOnHover = false,
+  ...props
+}: useRender.ComponentProps<"button"> &
+  React.ComponentProps<"button"> & {
+    showOnHover?: boolean
+  }) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          showOnHover &&
+            "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-menu-action",
+      sidebar: "menu-action",
+    },
+  })
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  })
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  render,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: useRender.ComponentProps<"a"> &
+  React.ComponentProps<"a"> & {
+    size?: "sm" | "md"
+    isActive?: boolean
+  }) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn(
+          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-menu-sub-button",
+      sidebar: "menu-sub-button",
+      size,
+      active: isActive,
+    },
+  })
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

services/frontend/src/components/ui/skeleton.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -7,7 +7,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("animate-pulse rounded-md bg-muted", className)}
       {...props}
     />
-  );
+  )
 }
 
-export { Skeleton };
+export { Skeleton }

services/frontend/src/components/ui/slider.tsx

@@ -1,6 +1,6 @@
-import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import { Slider as SliderPrimitive } from "@base-ui/react/slider"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Slider({
   className,
@@ -14,7 +14,7 @@ function Slider({
     ? value
     : Array.isArray(defaultValue)
       ? defaultValue
-      : [min, max];
+      : [min, max]
 
   return (
     <SliderPrimitive.Root
@@ -37,16 +37,16 @@ function Slider({
             className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
           />
         </SliderPrimitive.Track>
-        {_values.map((val, index) => (
+        {Array.from({ length: _values.length }, (_, index) => (
           <SliderPrimitive.Thumb
             data-slot="slider-thumb"
-            key={val ?? index}
+            key={index}
             className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
           />
         ))}
       </SliderPrimitive.Control>
     </SliderPrimitive.Root>
-  );
+  )
 }
 
-export { Slider };
+export { Slider }

services/frontend/src/components/ui/switch.tsx

@@ -1,15 +1,15 @@
-"use client";
+"use client"
 
-import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Switch({
   className,
   size = "default",
   ...props
 }: SwitchPrimitive.Root.Props & {
-  size?: "sm" | "default";
+  size?: "sm" | "default"
 }) {
   return (
     <SwitchPrimitive.Root
@@ -17,7 +17,7 @@ function Switch({
       data-size={size}
       className={cn(
         "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
-        className,
+        className
       )}
       {...props}
     >
@@ -26,7 +26,7 @@ function Switch({
         className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
       />
     </SwitchPrimitive.Root>
-  );
+  )
 }
 
-export { Switch };
+export { Switch }

services/frontend/src/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

services/frontend/src/components/ui/tabs.tsx

@@ -1,9 +1,9 @@
-"use client";
+"use client"
 
-import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
-import { cva, type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Tabs({
   className,
@@ -16,11 +16,11 @@ function Tabs({
       data-orientation={orientation}
       className={cn(
         "group/tabs flex gap-2 data-horizontal:flex-col",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 const tabsListVariants = cva(
@@ -35,8 +35,8 @@ const tabsListVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  },
-);
+  }
+)
 
 function TabsList({
   className,
@@ -50,7 +50,7 @@ function TabsList({
       className={cn(tabsListVariants({ variant }), className)}
       {...props}
     />
-  );
+  )
 }
 
 function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
@@ -62,11 +62,11 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
@@ -76,7 +76,7 @@ function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
       className={cn("flex-1 text-sm outline-none", className)}
       {...props}
     />
-  );
+  )
 }
 
-export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

services/frontend/src/components/ui/textarea.tsx

@@ -1,6 +1,6 @@
-import type * as React from "react";
+import * as React from "react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
@@ -8,11 +8,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
       data-slot="textarea"
       className={cn(
         "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Textarea };
+export { Textarea }

services/frontend/src/components/ui/toast.tsx

@@ -0,0 +1,234 @@
+"use client"
+
+import * as React from "react"
+import { Toast as ToastPrimitive } from "@base-ui/react/toast"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const toast = ToastPrimitive.createToastManager()
+
+function ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {
+  return <ToastPrimitive.Provider {...props} />
+}
+
+function ToastPortal({ ...props }: ToastPrimitive.Portal.Props) {
+  return <ToastPrimitive.Portal data-slot="toast-portal" {...props} />
+}
+
+function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {
+  return (
+    <ToastPrimitive.Viewport
+      data-slot="toast-viewport"
+      className={cn(
+        "pointer-events-none fixed inset-x-4 bottom-4 z-50 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
+  return (
+    <ToastPrimitive.Root
+      data-slot="toast"
+      className={cn(
+        "group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-2xl border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
+        "h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
+        "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+        "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+        "data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]",
+        "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",
+        "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+        "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+        "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+        "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {
+  return (
+    <ToastPrimitive.Content
+      data-slot="toast-content"
+      className={cn(
+        "flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToastTitle({ className, ...props }: ToastPrimitive.Title.Props) {
+  return (
+    <ToastPrimitive.Title
+      data-slot="toast-title"
+      className={cn("text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function ToastDescription({
+  className,
+  ...props
+}: ToastPrimitive.Description.Props) {
+  return (
+    <ToastPrimitive.Description
+      data-slot="toast-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function ToastAction({
+  className,
+  render = <Button variant="outline" size="sm" />,
+  ...props
+}: ToastPrimitive.Action.Props) {
+  return (
+    <ToastPrimitive.Action
+      data-slot="toast-action"
+      render={render}
+      className={cn("shrink-0", className)}
+      {...props}
+    />
+  )
+}
+
+function ToastClose({
+  className,
+  children,
+  render = <Button variant="ghost" size="icon-sm" />,
+  ...props
+}: ToastPrimitive.Close.Props) {
+  return (
+    <ToastPrimitive.Close
+      data-slot="toast-close"
+      aria-label="Close toast"
+      render={render}
+      className={cn(
+        "relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <XIcon aria-hidden="true" />
+      )}
+    </ToastPrimitive.Close>
+  )
+}
+
+function ToastIcon({ type }: { type: string | undefined }) {
+  let icon: React.ReactNode = null
+
+  if (type === "success") {
+    icon = (
+      <CircleCheckIcon aria-hidden="true" />
+    )
+  }
+
+  if (type === "info") {
+    icon = (
+      <InfoIcon aria-hidden="true" />
+    )
+  }
+
+  if (type === "warning") {
+    icon = (
+      <TriangleAlertIcon aria-hidden="true" />
+    )
+  }
+
+  if (type === "error") {
+    icon = (
+      <OctagonXIcon className="text-destructive" aria-hidden="true" />
+    )
+  }
+
+  if (type === "loading") {
+    icon = (
+      <Loader2Icon className="animate-spin" aria-hidden="true" />
+    )
+  }
+
+  if (!icon) {
+    return null
+  }
+
+  return (
+    <span
+      data-slot="toast-icon"
+      className="shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+    >
+      {icon}
+    </span>
+  )
+}
+
+function ToastList() {
+  const { toasts } = ToastPrimitive.useToastManager()
+
+  return toasts.map((toastItem) => (
+    <Toast key={toastItem.id} toast={toastItem}>
+      <ToastContent>
+        <ToastIcon type={toastItem.type} />
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <ToastTitle />
+          <ToastDescription />
+        </div>
+        <ToastAction />
+        <ToastClose />
+      </ToastContent>
+    </Toast>
+  ))
+}
+
+function Toaster({
+  children,
+  toastManager = toast,
+  ...props
+}: ToastPrimitive.Provider.Props) {
+  return (
+    <ToastProvider toastManager={toastManager} {...props}>
+      {children}
+      <ToastPortal>
+        <ToastViewport>
+          <ToastList />
+        </ToastViewport>
+      </ToastPortal>
+    </ToastProvider>
+  )
+}
+
+const createToastManager = ToastPrimitive.createToastManager
+const useToastManager = ToastPrimitive.useToastManager
+
+export {
+  Toaster,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastContent,
+  ToastDescription,
+  ToastPortal,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  createToastManager,
+  toast,
+  useToastManager,
+}

services/frontend/src/components/ui/toggle-group.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 2,
+  orientation: "horizontal",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 2,
+  orientation = "horizontal",
+  children,
+  ...props
+}: ToggleGroupPrimitive.Props &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }) {
+  return (
+    <ToggleGroupPrimitive
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider
+        value={{ variant, size, spacing, orientation }}
+      >
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <TogglePrimitive
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </TogglePrimitive>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }